coba-tampilan/components/apps/Setting/TipePengguna/ViewPermission.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 SettingCards from "@/components/widgets2/cards/SettingCards.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,
    toastAlert,
    openDeleteDialog,
    openFormDialog,
    findRole,
    paginated
  },
} = useRole();

const store = useSettingStore();

const editedIndex = ref(-1);

const searchValue = ref("");


const filteredCards = computed(() => {
  console.log("getData.value:",getData.value)
  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);
  console.log("data:",editedIndex)
}

function deleteConfirm(data: any, index: number) {
   deleteItem(data, index);
  openDeleteDialog(false);
  toastAlert("Berhasil hapus data!", "success");
}

onBeforeMount(async() => {
  await store.getAllTypeUser();
  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
          to="/apps/Setting/TipePengguna/create"
          ><v-icon icon="mdi-plus" /> 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 -->
      <SettingCards :data="filteredCards" @paginated="paginated(store.listTypeUser)">
        <template v-slot:avatar="data">
          <Icon icon="solar:user-circle-broken" height="140" width="80" />
          <!-- <img src="@/assets/images/profile/user-3.jpg" height="140" alt="image" /> -->
        </template>
        <template v-slot:title="data">
          <!-- {{ data.prop.title }} -->
          {{ data.prop.display }}
        </template>
        <template v-slot:content="data">

        </template>
        <template v-slot:actions="data">
            <v-btn flat color="primary" size="large" @click="editItem(data.prop)" to="/apps/Setting/TipePengguna/update"><v-icon icon="mdi-pencil" />Type User</v-btn>
            <v-btn flat variant="tonal"  size="large"  color="error" @click="onDelete(data.prop)"><v-icon icon="mdi-delete" />Type User</v-btn>
        </template>
      </SettingCards>

      <!-- 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>