จัดการบทบาทและสิทธิ์ => API

src/modules/02_users/components/Roles/DialogAddRole.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -14,101 +16,56 @@ import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
 const $q = useQuasar();
+const router = useRouter();
 const { showLoader, hideLoader, dialogConfirm, messageError, success } =
   useCounterMixin();
 
 /**  props*/
 const modal = defineModel<boolean>("modal", { required: true });
-const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
-const roleId = defineModel<string>("roleId", { required: true });
-const props = defineProps({
-  fetchlist: {
-    type: Function,
-    required: true,
-  },
-});
 
 const formData = reactive<FormRole>({
-  role: "",
-  description: "",
+  roleName: "",
+  roleDescription: "",
 });
 
-/**
- * function fetch ข้อมูลผู้ใช้งาน
- * @param id ผู้ใช้งาน
- */
-function fetchRoleDetail(id: string) {
-  // showLoader();
-  // http
-  //   .get(config.API.managementUser + `/${id}`)
-  //   .then((res) => {
-  //     const data = res.data;
-  //     formData.username = data.username;
-  //     formData.firstName = data.firstName;
-  //     formData.lastName = data.lastName;
-  //     formData.email = data.email;
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
-}
-
 /** function บันทึกข้อมูลผู้ใช้งาน*/
 function onSubmit() {
   dialogConfirm($q, () => {
-    // showLoader();
-    // const url = isStatusEdit.value
-    //   ? config.API.managementUser + `/${roleId.value}`
-    //   : config.API.managementUser;
-    // http[isStatusEdit.value ? "put" : "post"](url, formData)
-    //   .then(() => {
-    //     success($q, "บันทึกข้อมูลสำเร็จ");
-    //     props.fetchlist?.();
-    closeDialog();
-    //   })
-    //   .catch((e) => {
-    //     messageError($q, e);
-    //   })
-    //   .finally(() => {
-    //     hideLoader();
-    //   });
+    showLoader();
+    http
+      .post(config.API.managementAuth, formData)
+      .then((res) => {
+        closeDialog();
+        router.push(`/roles/${res.data.result}`);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
 /** function ปิด Dialog */
 function closeDialog() {
   modal.value = false;
-  formData.role = "";
-  formData.description = "";
+  formData.roleName = "";
+  formData.roleDescription = "";
 }
-
-watch(
-  () => modal.value,
-  () => {
-    if (modal.value && isStatusEdit.value) {
-      fetchRoleDetail(roleId.value);
-    }
-  }
-);
 </script>
 
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 25%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader
-          :tittle="isStatusEdit ? 'แก้ไขบทบาท' : 'เพิ่มบทบาท'"
-          :close="closeDialog"
-        />
+        <DialogHeader :tittle="'เพิ่มบทบาท'" :close="closeDialog" />
         <q-separator />
         <q-card-section>
           <div class="row q-col-gutter-md">
             <div class="col-12">
               <q-input
-                v-model="formData.role"
+                v-model="formData.roleName"
                 outlined
                 dense
                 :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
@@ -120,7 +77,7 @@ watch(
             </div>
             <div class="col-12">
               <q-input
-                v-model="formData.description"
+                v-model="formData.roleDescription"
                 outlined
                 dense
                 :rules="[(val:string) => !!val || `${'กรุณากรอกคำอิบาย'}`,]"