coba-tampilan/components/Setting/TipePengguna/TableViewPermission.vue

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { HeartIcon, UsersIcon, TrashIcon } from "vue-tabler-icons";
import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
// import { useFrinedsStore } from '@/stores/apps/userprofile/friends';
import UserCards from "@/components/widgets2/cards/UserCards.vue";
import data from "@/data/dummy/keuangan.type_user.json";
import { toast } from "vue3-toastify";
import "vue3-toastify/dist/index.css";
import Form from "@/components/Setting/ViewPermission/Form.vue";
import { Icon } from "@iconify/vue";
import { useSettingStore } from "~/store/apps/Setting/setting";
import useRole from "@/composable/index";

const {
  datas: { dialog, dialogDelete,getData},
  method: {
    formTitle,
    typeForm,
    deleteItem,
    deleteConfirm,
    toastAlert,
    openDeleteDialog,
    openFormDialog,
    findRole,
    paginated
  },
} = useRole();

const store = useSettingStore();

const editedIndex = ref(-1);

const permissionCategories = [
  {
    value: "0",
    label: "General",
  },
  {
    value: "1",
    label: "ProductServce",
  },
  {
    value: "2",
    label: "Product",
  },
];

const searchValue = ref("");


const filteredCards = computed(() => {
  return getData.value.filter((card: any) => {
    return card.display
      .toLowerCase()
      .includes(searchValue.value.toLowerCase());
  });
});

const editItem = async(item: any) =>{
  console.log("item:",item._id)
  // editedIndex.value = getData.value.indexOf(item);
  // editedIndex.value = item._id;
  // store.getTypeUser(item);
   await store.getRoleMenuById(item._id)
  openFormDialog(true);
}

function onDelete(item: any) {
  editedIndex.value = getData.value.indexOf(item);
  openDeleteDialog(true);
}

function saveData(data: object) {
  //proses simpan data edit
  if (editedIndex.value > -1) {
    Object.assign(getData.value[editedIndex.value], data.data);
    toastAlert("Berhasil ubah data!", "success");
    //proses simpan data create
  } else {
    getData.value.push(data.data);
    toastAlert("Berhasil simpan data!", "success");
  }
  openFormDialog(false);
}

onBeforeMount(async() => {
  await store.getTypeUser();
  paginated(store.listTypeUser)
  console.log("getData.value:",filteredCards)
});

</script>

<template>
  <!-- <pre>{{ filteredCards }}</pre> -->
  <v-row class="justify-content-end mt-5">
    <v-col cols="12">
      <div class="d-sm-flex justify-end mb-2">
        <v-btn
          color="primary"
          variant="flat"
          dark
          @click="
            dialog = true;
            editedIndex = -1;
          "
          >+ Type User</v-btn
        >
      </div>
      <div class="d-sm-flex align-center mb-5">
        <h3 class="text-h3">
          Type User
          <v-chip
            size="small"
            class="ml-2 elevation-0"
            variant="elevated"
            color="secondary"
            >{{ getData.length }}</v-chip
          >
        </h3>
        <v-sheet width="250" class="ml-0 ml-sm-auto mt-3 mt-sm-0">
          <v-text-field
            color="primary"
            hide-details
            variant="outlined"
            placeholder="Search Friends"
            density="compact"
            prepend-inner-icon="mdi-magnify"
            v-model="searchValue"
          >
          </v-text-field>
        </v-sheet>
      </div>

      <!-- card list -->
      <UserCards :data="filteredCards" @paginated="paginated(data)">
        <template v-slot:avatar="data">
          <Icon icon="solar:user-circle-broken" height="32" width="80" />
        </template>
        <template v-slot:title="data">
          <!-- {{ data.prop.title }} -->
          {{ data.prop.display }}
        </template>
        <!-- <template v-slot:left-side-content="data">
          <li
            class="text-subtitle-1 text-textSecondary mr-2"
            style="list-style-type: none"
            v-for="(item, i) in data.prop.roleMenu"
            :key="i"
          >
            {{ findRole(permissionCategories, item.permission)?.label }}
          </li>
        </template>
        <template v-slot:right-side-content="data">
          <v-chip size="small" color="secondary">{{
            data.prop.roleMenu.length
          }}</v-chip>
        </template> -->
        <template v-slot:actions="data">
          <v-btn
            color="secondary"
            variant="tonal"
            block
            @click="editItem(data.prop)"
            >Edit Type User</v-btn
          >
          <v-btn
            color="error"
            variant="tonal"
            class="mt-3"
            block
            @click="onDelete(data.prop)"
            >Remove</v-btn
          >
        </template>
      </UserCards>

      <!-- dialog create & update -->
      <UiComponents2DialogsScrollable v-model="dialog">
        <template v-slot:title>
          <div class="d-flex justify-space-between">
            {{ formTitle(editedIndex) }}
            <v-btn @click="dialog = false">X</v-btn>
          </div>
        </template>
        <template v-slot:text>
          <Form :typeForm="typeForm(editedIndex)" @stateValue="saveData" />
        </template>
      </UiComponents2DialogsScrollable>

      <!-- dialog delete -->
      <UiComponents2DialogsActivator v-model="dialogDelete">
        <template v-slot:text
          >Are you sure you want to delete this item?</template
        >
        <template v-slot:actions>
          <v-btn
            color="error"
            variant="flat"
            dark
            @click="openDeleteDialog(false)"
            >Cancel</v-btn
          >
          <v-btn
            color="primary"
            variant="flat"
            dark
            @click="deleteConfirm(getData, editedIndex)"
            >OK</v-btn
          >
        </template>
      </UiComponents2DialogsActivator>
    </v-col>
  </v-row>
</template>