search_ui/components/search/SearchAccordion.vue

<template>
  <div class="overlay-plugin firefox-scrollbar">
    <div class="accordion ps-3" id="accordionExample">
      <div
        v-for="(item, index) in suggestions"
        :key="index"
        class="card border-0"
      >
        <div class="card-header border-bottom-0 p-0" :id="'heading-' + index">
          <button
            class="btn btn-link btn-block has-indicator"
            type="button"
            data-bs-toggle="collapse"
            :data-bs-target="'#collapse-' + index"
            aria-expanded="true"
            :aria-controls="'collapse-' + index"
          >
            {{ item.title }}
          </button>
        </div>
        <div
          :id="'collapse-' + index"
          class="collapse show"
          :aria-labelledby="'heading-' + index"
          data-parent="#accordionExample"
        >
          <div class="card-body">
            <ul class="list-group list-group-flush">
              <li
                :key="j"
                v-for="(child, j) in item.data"
                class="list-group-item text__14"
              >
                <div class="form-check">
                  <input
                    @change.prevent="changePermission(child)"
                    class="form-check-input"
                    type="checkbox"
                    :checked="child?.check"
                    :value="child?.check"
                    :id="'role-' + j"
                  />
                  <label class="form-check-label pe-2" :for="'role-' + j">
                    {{ child.title }}
                  </label>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apis from "~/permission/permitApi";
import { mapState } from "pinia";

export default {
  props: {
    user_id: {
      type: Number,
      default: undefined,
    },
    role_id: {
      type: Number,
      default: undefined,
    },
  },
  data() {
    return {
      suggestions: [
        {
          title: "موضوعات",
          data: [
            {
              id: 1,
              title: "اقتصاد کلان",
              count: 1,
            },
            {
              id: 2,
              title: "اقتصاد کلان 2",
              count: 2,
            },
            {
              id: 3,
              title: "اقتصاد کلان 3",
              count: 3,
            },
          ],
        },
        {
          title: "نمایه ها",
          data: [
            {
              id: 1,
              title: "اقتصاد کلان",
              count: 1,
            },
            {
              id: 2,
              title: "اقتصاد کلان 2",
              count: 2,
            },
            {
              id: 3,
              title: "اقتصاد کلان 3",
              count: 3,
            },
          ],
        },
        {
          title: "برچسب ها",
          data: [
            {
              id: 1,
              title: "اقتصاد کلان",
              count: 1,
            },
            {
              id: 2,
              title: "اقتصاد کلان 2",
              count: 2,
            },
            {
              id: 3,
              title: "اقتصاد کلان 3",
              count: 3,
            },
          ],
        },
      ],
      collapseAll: false,
      grouplist: [],
      groupbyList: {},
      roles: [],
    };
  },
  computed: {
    ...mapState("permit", ["projectGetter"]),
  },
  mounted() {
    // this.getRoles();
  },
  methods: {
    getRoles() {
      const payload = {
        user_id: this.user_id,
        role_id: this.role_id,
        project_id: this.projectGetter?.id,
      };

      const { listUserPermission, listRolePermission } = apis.permissions;
      const url = this.user_id ? listUserPermission : listRolePermission;

      ApiService.formData(url, payload).then(({ data }) => {
        this.listUserPermission = data.data;
        this.groupbyList = this.groupBy(data.data, "section_title");
      });
    },

    changePermission(action) {
      action.check
        ? this.deletePermission(action)
        : this.addOrUpdatePermission(action);
    },
    addOrUpdatePermission(action) {
      const payload = {
        user_id: this.user_id,
        role_id: this.role_id,
        project_id: this.projectGetter?.id,
        section_id: action.section_id,
        state: 0,
        section_user_id: action.section_user_id ?? undefined,
        section_role_id: action.section_role_id ?? undefined,
      };

      const { addOrEditUserPermission, addOrEditRolePermission } =
        apis.permissions;
      const url = this.user_id
        ? addOrEditUserPermission
        : addOrEditRolePermission;

      ApiService.formData(url, payload).then(({ data }) => {
        this.mySwalToast({
          title: "تبریک",
          html: data.message,
          icon: "success",
        });
      });

      action.check = true;
    },
    deletePermission(action) {
      const payload = {
        project_id: this.projectGetter?.id,

        id: action.section_user_id ?? undefined,
      };
      if (action.section_role_id) payload.id = action.section_role_id;

      const { deleteUserPermission, deleteRolePermission } = apis.permissions;
      const url = this.user_id ? deleteUserPermission : deleteRolePermission;

      ApiService.formData(url, payload).then(({ data }) => {
        this.mySwalToast({
          title: "تبریک",
          html: data.message,
          icon: "success",
        });

        action.check = false;
      });
    },
  },
  watch: {
    role_id() {
      this.getRoles();
    },
    user_id() {
      this.getRoles();
    },
  },
};
</script>

<style lang="scss">
.overlay-plugin {
  height: 20em;
  overflow:auto
}
</style>