#HASHTAG 상단 알림목록에 알림 전체삭제 추가하기

알림 전체삭제가 필요해서 추가해보았습니다.

 

1. 전 components\header\header-right\header-notify.html 에 삭제를 추가했습니다. 붉은색이 변경된 부분입니다.

{@

  $oNcenterliteClass = getClass('ncenterlite');

  $oNcenterliteModel = getModel('ncenterlite');

  $nCenterList = $oNcenterliteModel->getMyNotifyList();  

 

  // user/user-notification.html에서 쓸 변수

  // 알림센터의 [회원 메뉴 표시] 설정 확인(각 회원 메뉴에 알림 목록 표시)

  $ncDisplayUserMenu = $oNcenterliteModel->getConfig()->user_config_list;

  

  // 알림센터의 [회원 알림 설정] 확인(각 회원들이 알림 설정 가능 유무)

  $ncUserConfig = $oNcenterliteModel->getConfig()->user_notify_setting;

}

 

<div class="app-dropdown">

  <a class="app-dropdown-toggle app-header-item">

    <ion-icon name="notifications-outline"></ion-icon>

 

    <span cond="$nCenterList->total_count >= 1" class="app-header-item__badge">

      {$nCenterList->total_count}

    </span>

  </a>

 

  <div class="app-dropdown-menu app-right" style="width: 270px">

    <div class="app-dropdown-header notify">

      <div>{$lang->notify}</div>

      {@

        // 모두 삭제 메시지 변경. ko, en

        if($lang_type=="ko") :

          $lang->ncenterlite_delete_all = "모두 읽음";

        elseif($lang_type=="en") : 

          $lang->ncenterlite_delete_all = "Read All";

        endif;

      }

      <div cond="$nCenterList->total_count >= 1" class="headerReadAll"><a class="app-button app-primary app-xs">{$lang->ncenterlite_delete_all}</a></div>     

    </div>

    <include target="../../user/user-notification.html" />

  </div>

</div>

 

2.  components\common\dropdown\dropdown.scss 에 notify 추가(알림과 전체삭제를 좌우 정렬하기 위해서)

  .app-dropdown-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid $color-gray-300;

    font-size: 1.25rem;
    font-weight: 600;

    &.notify {
      display: flex;
      justify-content: space-between;

      .headerReadAll {
        display: flex;
      }
    }
  }

 

3. components\header\header.js 에 삭제 클릭시 실행할 스크립트 추가

jQuery(function($) {  

  $('.headerReadAll').click(function(){

    exec_json('ncenterlite.procNcenterliteNotifyReadAll', null, function(data) {

       $('.app-dropdown').removeClass('active');   //div 숨기고

       $('.app-header-item__badge').detach();        //알림카운터 삭제하고

       location.reload();

       return false;

    })  

  })

})

 

버튼 디자인은 위젯스타일꺼 그대로 따라 했습니다.

 

 

저는 사용자 알림을 꺼놓고 필요할 때 켜기 때문에 알림 설정과 알림 목록을 껐다 켰다 할 수 있게 수정했습니다.

위에서 추가 해놓을 것을

  // user/user-notification.html에서 쓸 변수

  // 알림센터의 [회원 메뉴 표시] 설정 확인(각 회원 메뉴에 알림 목록 표시)

  $ncDisplayUserMenu = $oNcenterliteModel->getConfig()->user_config_list;

  

  // 알림센터의 [회원 알림 설정] 확인(각 회원들이 알림 설정 가능 유무)

  $ncUserConfig = $oNcenterliteModel->getConfig()->user_notify_setting;

 

components\user\user-notification.html 에서 if문으로 감싸줍니다.

 

<!--@else-->

<div class="app-header-notify__empty">

  <ion-icon name="notifications"></ion-icon>

  <div class="app-title">{$lang->no_notify}</div>

  <div class="app-desc">{$lang->notify_description_1}<br/>{$lang->notify_description_2}</div>

  <!--@if($ncUserConfig == 'Y')-->

  <a href="{getUrl('', 'mid', $mid, 'act', 'dispNcenterliteUserConfig')}" class="app-button app-primary app-plain">{$lang->my_notification_setting}</a>

  <!--@endif-->

</div>

<!--@end-->

 

<!--@if($ncDisplayUserMenu == 'Y')-->

<ul class="app-dropdown-menu-list">  

  <li class="app-divider"></li>

  <li>

    <a href="{getUrl('', 'mid', $mid, 'act', 'dispNcenterliteNotifyList')}">

      <span>{$lang->my_notification_list}</span>

    </a>

  </li>   

</ul>

<!--@endif-->