coba-tampilan/components/Setting/ViewPermission/CrudCardList.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 { toastAlert } from "@/composable/index";
const store = useSettingStore();

const dialog = ref(false);
const dialogDelete = ref(false);
const editedIndex = ref(-1);
const editedItem = ref({});
const defaultItem = ref({});

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

const formTitle = computed(() => {
  return editedIndex.value === -1 ? "New Item" : "Edit Item";
});
const typeForm = computed(() => {
  return editedIndex.value === -1 ? "create" : "edit";
});

const getData: any = computed(() => {
  return data;
});
const searchValue = ref("");

const filteredCards = computed(() => {
  return getData.value.filter((card: any) => {
    return card.typeUser
      .toLowerCase()
      .includes(searchValue.value.toLowerCase());
  });
});
const findData = (item: string) => {
  return permissionCategories.find((data) => data.value === item);
};

function editItem(item: any) {
  editedIndex.value = filteredCards.value.indexOf(item);
  store.getTypeUser(item);
  dialog.value = true;
  console.log("ini dialog:", dialog.value);
}

function deleteItem(item: any) {
  editedIndex.value = filteredCards.value.indexOf(item);
  dialogDelete.value = true;
}

function deleteItemConfirm() {
  filteredCards.value.splice(editedIndex.value, 1);
  closeDelete();

  toastAlert("Berhasil hapus data!", "success");
}

function closeDelete() {
  dialogDelete.value = false;
}
function saveData(data: object) {
  //proses simpan data edit
  if (editedIndex.value > -1) {
    Object.assign(filteredCards.value[editedIndex.value], data.data);
    toastAlert("Berhasil ubah data!", "success");
    //proses simpan data create
  } else {
    filteredCards.value.push(data.data);
    toastAlert("Berhasil simpan data!", "success");
  }
  dialog.value = false;
}
</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">
        <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.typeUser }}
        </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"
          >
            {{ findData(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="deleteItem(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 }}
            <v-btn @click="dialog = false">X</v-btn>
          </div>
        </template>
        <template v-slot:text>
          <Form :typeForm="typeForm" @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="closeDelete"
            >Cancel</v-btn
          >
          <v-btn color="primary" variant="flat" dark @click="deleteItemConfirm"
            >OK</v-btn
          >
        </template>
      </UiComponents2DialogsActivator>
    </v-col>
  </v-row>
</template>