halaman dipisah

composable/index.ts

@@ -1,18 +1,89 @@
-import { toast } from "vue3-toastify";
-// export function deleteItem (data:any, index:number) {
-//     try {
-//         data.splice(index,1)
-//     } catch (error) {
-        
-//     }
-// }
-// export function delete(){
+import { toast } from 'vue3-toastify';
+interface useRoleInterface {
+    datas: {
+        dialog: Ref<boolean>
+        dialogDelete: Ref<boolean>
+        getData: Ref<any>
+    },
+    method: {
+        formTitle: (index: number) => string
+        typeForm: (index: number) => string
+        deleteItem: (data: any, index: number) => any
+        deleteConfirm: (data: any, index: number) => any
+        toastAlert: (msg: string, type: any) => void
+        openDeleteDialog: (value: boolean) => any
+        openFormDialog: (value: boolean) => any
+        findRole: (list: any, item: string) => any
+        paginated: (data: any) => void
+    }
+}
 
-// }
-export function toastAlert(msg:string,type:any){
-    toast(msg, {
-    type: type,
-    dangerouslyHTMLString: true,
-    autoClose: 2000,
-  })
-}
+const useRole = (): useRoleInterface => {
+    const dialog: Ref<boolean> = ref(false);
+    const dialogDelete: Ref<boolean> = ref(false);
+    const getData: Ref<any> = ref([]);
+    const page: Ref<number> = ref(0);
+    const limit: Ref<number> = ref(5);
+    const formTitle = (index: number): string => {
+        return index === -1 ? "New Item" : "Edit Item";
+    }
+
+    const typeForm = (index: number): string => {
+        return index === -1 ? "create" : "edit";
+    }
+    const deleteItem = (data: any, index: number): any => {
+        return data.splice(index, 1)
+    }
+    const deleteConfirm = (data: any, index: number): void => {
+        deleteItem(data, index);
+        openDeleteDialog(false);
+        toastAlert("Berhasil hapus data!", "success");
+    }
+    const toastAlert = (msg: string, type: any): void => {
+        toast(msg, {
+            type: type,
+            dangerouslyHTMLString: true,
+            autoClose: 2000,
+        })
+    }
+    const openDeleteDialog = (value: boolean): any => {
+        dialogDelete.value = value;
+    }
+    const openFormDialog = (value: boolean): any => {
+        dialog.value = value;
+    }
+    const findRole = (list: any, item: string): any => {
+        return list.find((data: any) => data.value === item);
+    }
+    const paginated = (data: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}`);
+    if (roles && roles.length > 0) {
+      getData.value.push(...roles);
+      page.value++;
+    }
+  }
+
+    return {
+        datas: {
+            dialog,
+            dialogDelete,
+            getData
+        },
+        method: {
+            formTitle,
+            typeForm,
+            deleteItem,
+            deleteConfirm,
+            toastAlert,
+            openDeleteDialog,
+            openFormDialog,
+            findRole,
+            paginated
+        }
+    }
+
+}
+
+export default useRole

composable/indexLama.ts

@@ -0,0 +1,26 @@
+import { toast } from "vue3-toastify";
+// export function deleteItem (data:any, index:number) {
+//     try {
+//         data.splice(index,1)
+//     } catch (error) {
+        
+//     }
+// }
+
+export function formTitle(index:number){
+    return index === -1 ? "New Item" : "Edit Item"; 
+}
+export function typeForm(index:number){
+    return index === -1 ? "create" : "edit"; 
+}
+
+export function deleteItem(data:any, index:number) {
+    return data.splice(index,1)
+}
+export function toastAlert(msg:string,type:any){
+    toast(msg, {
+    type: type,
+    dangerouslyHTMLString: true,
+    autoClose: 2000,
+  })
+}