จัดการข้แมูลผู้ใช้ => จัดการสิทธิ์

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

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { FormRole } from "@/modules/02_users/interface/request/Main";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+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: "",
+});
+
+/**
+ * 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();
+    //   });
+  });
+}
+
+/** function ปิด Dialog */
+function closeDialog() {
+  modal.value = false;
+  formData.role = "";
+  formData.description = "";
+}
+
+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"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-md">
+            <div class="col-12">
+              <q-input
+                v-model="formData.role"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อบทบาท'}`,]"
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                label="ชื่อบทบาท"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formData.description"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกคำอิบาย'}`,]"
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                label="คำอิบาย"
+                type="textarea"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>