base_ui/components/global/SubHeader.vue

<template>
  <div class="sub-header" :class="$attrs.myClass ?? 'my-2'">
    <div class="d-flex">
      <h6 class="m-0 pr-3 title-sub-header ml-2">
        {{ title ?? "" }}
      </h6>
      <!-- <div class="mr-1 d-flex flex-wrap">
        <filter-items
          :filters="selectionFilterItemsGetter"
          @remove-filter="delFilterItem"
        ></filter-items>
      </div> -->
    </div>
    <div class="subset-sub-header d-flex">
      <div v-if="getPanelStatus">
        <button-component
          title="بازنشانی فرم"
          classes="btn d-inline-flex px-2 "
          @click="REFRESH_FORM()"
          buttonText=""
        >
          <span class="tavasi tavasi-rotate-left"></span>
        </button-component>
        <button-component
          title="بستن فرم"
          classes="btn d-inline-flex px-2"
          @click="TOGGLE_PANEL(false)"
          buttonText=""
        >
          <span class="tavasi tavasi-Component-294--1"></span>
        </button-component>
      </div>

      <div v-else>
        <!-- <button-component title="جستجو" classes="btn d-inline-flex px-2" buttonText="">
          <i class="tavasi tavasi-Component-78--9---2"><span data-v-1ba02e9f="" class="path1"></span><span
              data-v-1ba02e9f="" class="path2"></span></i>
        </button-component> -->
        <switch-with-icon
          v-if="hasViewMode"
          @change-mode="switchViewMode($event)"
          classes="btn d-inline-flex px-2 "
          texts1="حالت جدولی"
          texts2="حالت فهرستی"
        ></switch-with-icon>

        <!-- <div v-if="hasViewMode" class="switcher-container">
          <button-component
            @click="switchViewMode()"
            :class="{ active: viewMode === 'table' }"
            classes="btn d-inline-flex px-2 "
            buttonText=""
            title="حالت جدولی"
          >
            <span class="tavasi tavasi-table-view"></span>
          </button-component>
          <button-component
            @click="switchViewMode()"
            :class="{ active: viewMode === 'list' }"
            classes="btn d-inline-flex px-2 "
            buttonText=""
            title="حالت فهرستی"
          >
            <span class="tavasi tavasi-list-view"></span>
          </button-component>
        </div> -->

        <button-component
          v-if="enableNewButton"
          v-can="canCreate"
          title="ایجاد"
          classes="btn d-inline-flex px-5"
          @click="TOGGLE_PANEL(true)"
          buttonText=""
        >
          فهرست جدید
          <span class="tavasi tavasi-Component-212--1"
            ><span class="path1"></span><span class="path2"></span
            ><span class="path3"></span
          ></span>
        </button-component>

        <button-component
          v-if="showLeftPanel"
          title="بستن جزییات"
          classes="btn d-inline-flex px-2"
          @click="showDetails()"
          buttonText=""
        >
          <span class="tavasi tavasi-Component-71--1"></span>
        </button-component>
      </div>
    </div>
  </div>
</template>

<script>
import apis from "~/apis/permitApi";
import { mapState, mapActions } from "pinia";
import { useCommonStore } from "~/stores/commonStore";

export default {
  props: {
    enableNewButton: {
      default: true,
      type: Boolean,
    },
    hasViewMode: {
      default: true,
      type: Boolean,
    },
    title: {
      default: "",
      type: String,
    },
    showDetailsPanel: {
      default: false,
      type: Boolean,
    },
    canCreate: {
      default: "",
      type: String,
    },
  },

  emits: ["open-form", "view-mode-switched", "show-details"],
  data() {
    return {
      showLeftPanel: false,
      viewMode: "table",
      projects: [],
    };
  },
  computed: {
    ...mapState(usePermitStore, ["projectGetter"]),
    ...mapState(useCommonStore, ["isSidebarCollapsed", "getPanelStatus"]),
    ...mapState(useSearchStore, ["selectionFilterItemsGetter"]),
    project_id() {
      return this.projectGetter.id;
    },
    hasDefaultSlot() {
      return !!this.$slots.default;
    },
    hasFooterSlot() {
      return !!this.$slots["footer"];
    },
  },
  methods: {
    ...mapActions(usePermitStore, ["SET_PROJECT"]),
    ...mapActions(useCommonStore, ["TOGGLE_PANEL", "REFRESH_FORM"]),
    ...mapActions(useSearchStore, ["selectionFilterItemsSetter"]),

    delFilterItem(item) {
      var filterItems = this.selectionFilterItemsGetter;
      var index = this.selectionFilterItemsGetter.indexOf(item);
      var filterSelect = [];
      if (index != -1) {
        // this.filterSelect.splice(index, 1);
        filterItems.splice(index, 1);
      }
      filterItems.forEach((element) => {
        filterSelect.push(element.id);
      });
      this.$emit("filterSelect", filterSelect);
      this.selectionFilterItemsSetter(filterItems);
    },
    showDetails() {
      this.showLeftPanel = !this.showLeftPanel;
      this.$emit("show-details", this.showLeftPanel);
    },
    switchViewMode() {
      this.viewMode = this.viewMode === "table" ? "list" : "table";
      this.$emit("view-mode-switched", this.viewMode);
    },
    setProject($ev) {
      const id = +$ev.target.value;
      const result = this.projects.findIndex((item) => item.id === id);
      const project = this.projects[result];

      this.SET_PROJECT(project);
    },
    async getProjects() {
      try {
          const { $api } = useNuxtApp();
          const res = await $api(apis.projects.list, {
            method: "POST",
            baseURL: repoUrl(),
          });

          this.projects = res.data.data;

        } catch (err) {

        }

      // iApiService.formData(apis.projects.list).then((res) => {
      //   this.projects = res.data.data;
      //   // ths.SET_PROJECT(res.data.data[0]);
      // });
    },

    openForm() {
      this.$emit("open-form");
    },
  },

  watch: {
    showDetailsPanel(newVal) {
      this.showLeftPanel = newVal;
    },
  },
};
</script>

<style scoped lang="scss">
.tavasi {
  font-size: 1.4rem;
  color: #bac4ce;
}
</style>