crud use done

src/components/Page/FormPage.vue

@@ -5,7 +5,17 @@
         <h6>{{ title }}</h6>
         <hr />
       </div>
+      <div
+        v-if="isFetching"
+        class="card-body p-5 text-center d-flex align-items-center justify-content-center"
+        style="min-height: 300px"
+      >
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
       <DynamicForm
+        v-if="!isFetching"
         ref="createForm"
         :schemas="schemas"
         @formSubmit="handleSubmit"
@@ -20,9 +30,14 @@
 </template>
 <script setup>
 import { ref, onBeforeMount } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import BasePage from "./BasePage.vue";
 import DynamicForm from "./../Form/DynamicForm.vue";
 import { Swal, showLoading, hideLoading } from "@/utils/alert.js";
+
+const emit = defineEmits(["saved", "dataLoaded"]);
+const route = useRoute();
+
 const props = defineProps({
   schemas: {
     type: Array,
@@ -33,20 +48,29 @@ const props = defineProps({
     default: "",
   },
   api: {},
+  isEdit: {
+    default: false,
+  },
 });
 
 const createForm = ref(null);
+const isFetching = ref(false);
+const formValue = ref({});
 
 const handleSubmit = async (payload, { resetForm }) => {
   // console.log(payload)
   // return
   try {
     showLoading();
-    const response = await props.api.store(payload);
+    const response = props.isEdit
+      ? await props.api.update(route.params.id, payload)
+      : await props.api.store(payload);
     hideLoading();
     Swal.fire("Sukses", "", "success");
-    resetForm();
-    emit("created", response);
+    if (!props.isEdit) {
+      resetForm();
+    }
+    emit("saved", response);
   } catch (err) {
     console.log(err);
     if (err.response && err.response.status == 422) {
@@ -59,8 +83,6 @@ const handleSubmit = async (payload, { resetForm }) => {
   }
 };
 
-const formValue = ref({});
-
 onBeforeMount(async () => {
   const initialValue = {};
   props.schemas.forEach((schema) => {
@@ -69,5 +91,26 @@ onBeforeMount(async () => {
     }
   });
   formValue.value = initialValue;
+
+  if (props.isEdit) {
+    isFetching.value = true;
+    let response = await props.api.detail(route.params.id);
+    const data = response.result;
+    emit("dataLoaded", data);
+    props.schemas.forEach((schema) => {
+      if (schema.type == "password") {
+        data[schema.name] = null;
+      }
+      if (schema.type == "checkbox") {
+        if (data[schema.name] == 1) {
+          data[schema.name] = true;
+        } else {
+          data[schema.name] = false;
+        }
+      }
+    });
+    formValue.value = data;
+    isFetching.value = false;
+  }
 });
 </script>

src/router/user.js

 import UserProfile from "./../views/user/UserProfile.vue";
 import UserIndex from "./../views/user/UserIndex.vue";
 import UserCreate from "@/views/user/UserCreate.vue";
+import UserEdit from "@/views/user/UserEdit.vue";
 export const userRoutes = [
   {
     path: "/user",
@@ -18,7 +19,7 @@ export const userRoutes = [
       {
         path: "/user/:id/edit",
         name: "edit",
-        component: UserIndex,
+        component: UserEdit,
       },
       {
         path: "/user/profile",

src/views/user/UserCreate.vue

 <template>
-  <form-page title="Tambah User" :schemas="schemas"></form-page>
+  <form-page title="Tambah User" :schemas="schemas" :api="UserApi"></form-page>
 </template>
 <script setup>
 import * as Yup from "yup";
 import FormPage from "@/components/Page/FormPage.vue";
-
+import { UserApi } from "@/api/user.js";
 const schemas = [
   {
     label: "Nama User",
@@ -29,7 +29,7 @@ const schemas = [
     name: "password",
     validation: Yup.string().required().label("Password User"),
     cols: 6,
-    type: "password"
+    type: "password",
   },
 ];
 </script>

src/views/user/UserEdit.vue

+<template>
+  <form-page
+    :isEdit="true"
+    title="Edit User"
+    :schemas="schemas"
+    :api="UserApi"
+  ></form-page>
+</template>
+<script setup>
+import * as Yup from "yup";
+import FormPage from "@/components/Page/FormPage.vue";
+import { UserApi } from "@/api/user.js";
+const schemas = [
+  {
+    label: "Nama User",
+    name: "name",
+    validation: Yup.string().required().label("Nama User"),
+    cols: 6,
+  },
+  {
+    label: "Email",
+    name: "email",
+    validation: Yup.string().required().label("Email User"),
+    cols: 6,
+  },
+  {
+    label: "username",
+    name: "username",
+    validation: Yup.string().required().label("Username"),
+    cols: 6,
+  },
+  {
+    label: "Password User",
+    name: "password",
+    validation: Yup.string().required().label("Password User"),
+    cols: 6,
+    type: "password",
+  },
+];
+</script>