base_ui/pages/data-setting/AdminNotification.vue

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div v-if="canView">
          <div class="user__container">
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <h3>
                  {{ $t("Notifications") }}
                </h3>
                <p class="text__light text__13">
                  شما {{ list?.length }} اعلان خوانده نشده دارید.
                </p>
              </div>
              <div>
                <button-component
                  @click="openModal"
                  type="button"
                  classes="btn-primary"
                  buttonText="اعلان جدید"
                  title="اعلان جدید"
                >
                </button-component>
              </div>
            </div>
            <ul class="nav nav-tabs">
              <li class="nav-item">
                <button
                  title="همه"
                  type="button"
                  @click.prevent="filterNotifications('all')"
                  class="btn nav-link"
                  :class="{
                    active: activeTab == 'all',
                  }"
                >
                  <span class="badge badge-light">{{ counts?.all?.count }}</span>
                  همه
                </button>
              </li>
              <li class="nav-item">
                <button
                  title="جدید"
                  type="button"
                  @click.prevent="filterNotifications('new')"
                  class="btn nav-link"
                  :class="{
                    active: activeTab == 'new',
                  }"
                >
                  <span class="badge badge-light">{{ counts?.new?.count }}</span>

                  جدید
                </button>
              </li>
              <li class="nav-item">
                <button
                  title="خوانده نشده ها"
                  type="button"
                  @click.prevent="filterNotifications('unseen')"
                  class="btn nav-link"
                  :class="{
                    active: activeTab == 'unseen',
                  }"
                >
                  <span class="badge badge-light">{{ counts?.unseen?.count }}</span>

                  خوانده نشده ها
                </button>
              </li>

              <li class="nav-item">
                <button
                  title="خوانده شده ها"
                  type="button"
                  @click.prevent="filterNotifications('seen')"
                  class="btn nav-link"
                  :class="{
                    active: activeTab == 'seen',
                  }"
                >
                  <span class="badge badge-light">{{ counts?.seen?.count }}</span>

                  خوانده شده ها
                </button>
              </li>
            </ul>

            <the-content-loading
              class="absolute-positioning"
              v-if="fetchingData"
            ></the-content-loading>

            <div v-else>
              <div v-if="list && list.length">
                <div class="notif-list firefox-scrollbar">
                  <notification-item
                    v-for="(item, index) in list"
                    :item="item"
                    :index="index"
                    :key="item._id"
                    @getList="getList()"
                    @go-to-notification-show-page="
                      goToNotificationShowPage(item)
                    "
                  ></notification-item>
                </div>
                <jahat-pagination
                  v-if="pagination.total"
                  :paginationInfo="pagination"
                  @page-changed="pageChanged"
                  @page-limit-changed="pageLimitChanged"
                  @sort-changed="sortChanged"
                >
                </jahat-pagination>
              </div>
              <no-data v-else></no-data>
            </div>
          </div>
        </div>
        <no-data v-else>
          <the-content-loading v-if="fetchingData"></the-content-loading>

          <div v-else class="d-flex justify-content-center align-items-center">
            <div
              class="alert alert-warning d-flex justify-content-center align-items-center"
            >
              <span
                class="tavasi tavasi-warning-circle color-inherit ml-1 text__32"
              ></span>
              عدم دسترسی
            </div>
          </div>
        </no-data>
      </div>
    </div>

    <base-modal
      v-if="showModal"
      modalSize="modal-lg"
      modalTitle="اعلان جدید"
      :hasFooter="false"
      @close="closeModal"
    >
      <admin-notification-form
        ref="tabFormBuilder"
        :formData="notificationItem"
        @close-modal="closeModal"
      ></admin-notification-form>
    </base-modal>
  </div>
</template>

<script>
import notificationMixin from "~/mixins/notifications/notificationMixin";

export default {
  extends: notificationMixin,
  mounted() {
    // this.canView = true;
    this.checkPermisionBeforGetList("notification_edit").then(() => {
      this.getList();
      this.numberOfMark();
    });
  },
  // watch: {
  // $route: {
  //   handler: function () {
  //     this.$store.state.collapsed = false;
  //   },
  //   deep: true,
  //   immediate: true,
  // },
  // },
  data() {
    return {
      showModal: false,
    };
  },

  methods: {
    onEditItem(item, index) {
      this.notificationItem = item;
      this.openModal();
    },
    onDeleteItem(item) {
      this.mySwalConfirm({
        title: "هشدار!!!",
        html: "از حذف این مورد مطمئن هستید؟",
      }).then((result) => {
        if (result.isConfirmed) {
          this.deleteItem(item).then(() => {
            setTimeout(() => {
              this.getList();
            }, 1000);
          });
        }
      });
    },

    openModal() {
      this.showModal = true;

      setTimeout(() => {
        $("#base-modal").modal({ backdrop: "static", keyboard: false }, "show");
      }, 500);
    },
    closeModal(isCreate = false) {
      $("#base-modal").modal("hide");

      if (isCreate)
        setTimeout(() => {
          this.showModal = false;
          this.notificationItem = undefined;
          this.getList();
        }, 1000);
      else
        setTimeout(() => {
          this.showModal = false;
          this.notificationItem = undefined;
          this.getList();
        }, 500);
    },
  },

};

</script>