halaman dipisah

components/Setting/ViewPermission/CrudCardList.vue

@@ -10,14 +10,30 @@ 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";
+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 dialog = ref(false);
-const dialogDelete = ref(false);
+// const getData = ref([]);
+let page = ref(0);
+const limit = ref(5);
+
 const editedIndex = ref(-1);
-const editedItem = ref({});
-const defaultItem = ref({});
 
 const permissionCategories = [
   {
@@ -34,16 +50,6 @@ const permissionCategories = [
   },
 ];
 
-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(() => {
@@ -53,44 +59,50 @@ const filteredCards = computed(() => {
       .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);
+  editedIndex.value = getData.value.indexOf(item);
   store.getTypeUser(item);
-  dialog.value = true;
-  console.log("ini dialog:", dialog.value);
+  openFormDialog(true);
 }
 
-function deleteItem(item: any) {
-  editedIndex.value = filteredCards.value.indexOf(item);
-  dialogDelete.value = true;
+function onDelete(item: any) {
+  editedIndex.value = getData.value.indexOf(item);
+  openDeleteDialog(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);
+    Object.assign(getData.value[editedIndex.value], data.data);
     toastAlert("Berhasil ubah data!", "success");
     //proses simpan data create
   } else {
-    filteredCards.value.push(data.data);
+    getData.value.push(data.data);
     toastAlert("Berhasil simpan data!", "success");
   }
-  dialog.value = false;
+  openFormDialog(false);
 }
+
+// function paginated(i:any) {
+//     let skip = page.value * limit.value;
+//     const roles = data.filter((i,index:number)=>index >= skip && index < skip + limit.value);
+//     // const roles = await $fetch(`/api/roles/get?skip=${skip}`);
+//     console.log("roles:",roles)
+//     if (roles && roles.length > 0) {
+//       getData.value.push(...roles);
+//       console.log("getData.value:",getData.value)
+//       page.value++;
+//     }
+//     console.log("paginated", page.value);
+//   }
+
+
+onBeforeMount(() => {
+  paginated(data)
+  // paginated()
+  // getData.value = data;
+});
 </script>
 
 <template>
@@ -135,7 +147,7 @@ function saveData(data: object) {
       </div>
 
       <!-- card list -->
-      <UserCards :data="filteredCards">
+      <UserCards :data="filteredCards" @paginated="paginated(data)">
         <template v-slot:avatar="data">
           <Icon icon="solar:user-circle-broken" height="32" width="80" />
         </template>
@@ -150,7 +162,7 @@ function saveData(data: object) {
             v-for="(item, i) in data.prop.roleMenu"
             :key="i"
           >
-            {{ findData(item.permission)?.label }}
+            {{ findRole(permissionCategories, item.permission)?.label }}
           </li>
         </template>
         <template v-slot:right-side-content="data">
@@ -171,7 +183,7 @@ function saveData(data: object) {
             variant="tonal"
             class="mt-3"
             block
-            @click="deleteItem(data.prop)"
+            @click="onDelete(data.prop)"
             >Remove</v-btn
           >
         </template>
@@ -181,12 +193,12 @@ function saveData(data: object) {
       <UiComponents2DialogsScrollable v-model="dialog">
         <template v-slot:title>
           <div class="d-flex justify-space-between">
-            {{ formTitle }}
+            {{ formTitle(editedIndex) }}
             <v-btn @click="dialog = false">X</v-btn>
           </div>
         </template>
         <template v-slot:text>
-          <Form :typeForm="typeForm" @stateValue="saveData" />
+          <Form :typeForm="typeForm(editedIndex)" @stateValue="saveData" />
         </template>
       </UiComponents2DialogsScrollable>
 
@@ -196,10 +208,18 @@ function saveData(data: object) {
           >Are you sure you want to delete this item?</template
         >
         <template v-slot:actions>
-          <v-btn color="error" variant="flat" dark @click="closeDelete"
+          <v-btn
+            color="error"
+            variant="flat"
+            dark
+            @click="openDeleteDialog(false)"
             >Cancel</v-btn
           >
-          <v-btn color="primary" variant="flat" dark @click="deleteItemConfirm"
+          <v-btn
+            color="primary"
+            variant="flat"
+            dark
+            @click="deleteConfirm(getData, editedIndex)"
             >OK</v-btn
           >
         </template>

components/Setting/ViewPermission/CrudCardListLama.vue

@@ -0,0 +1,209 @@
+<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, deleteItem,formTitle,typeForm } 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 onDelete(item: any) {
+  editedIndex.value = filteredCards.value.indexOf(item);
+  dialogDelete.value = true;
+}
+
+function deleteItemConfirm() {
+  //   filteredCards.value.splice(editedIndex.value, 1);
+  deleteItem(filteredCards.value, editedIndex.value);
+  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="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="closeDelete"
+            >Cancel</v-btn
+          >
+          <v-btn color="primary" variant="flat" dark @click="deleteItemConfirm"
+            >OK</v-btn
+          >
+        </template>
+      </UiComponents2DialogsActivator>
+    </v-col>
+  </v-row>
+</template>

components/Setting/ViewPermission/Form.vue

@@ -67,7 +67,7 @@ onBeforeMount(() => {
         <ListElement name="roleMenu" :default="form.roleMenu" class="mx-4" add-text="+ permission">
             <template #default="{ index }">
                 <ObjectElement :name="index" class="px-3 py-3 border border-gray-200 rounded-xl">
-                    <permission name="permission" :items="permissionCategories"/>
+                    <permission name="permission" :items="permissionCategories" :label="`Permission Category`"/>
                         <div class="vf-element-layout vf-col-12">
                             <!-- <menuRoles name="gridTable" :items="form.roleMenu[index] != null  ? form.roleMenu[index]: []"/> -->
                             <menuRoles name="gridTable" :items="props.typeForm === 'edit' ? form.roleMenu[index]: []"/>