Merge branch 'develop' into dev

* develop:
  fix: text
  fix:add colum email phone
  แก้ชื่อเมนู
  fix: role get position
  fix:router issue
  feat:issue

src/api/02_organizational/api.organization.ts

@@ -113,4 +113,6 @@ export default {
   viewWorkflow: `${organization}/view-workflow`,
 
   keycloakLogSSO: `${organization}/keycloak/log/sso`,
+
+  orgIssues: `${organization}/issues`,
 };

src/interface/request/main/main.ts

@@ -182,6 +182,14 @@ const menuList = readonly<any[]>([
     path: "manageWebservices",
     role: ["SUPER_ADMIN"],
   },
+  {
+    key: 7,
+    icon: "mdi-bug",
+    activeIcon: "mdi-bug",
+    label: "รายงานปัญหา",
+    path: "manageIssues",
+    role: ["SUPER_ADMIN", "ISSUE"],
+  },
 ]);
 
 export { menuList };

src/modules/07_issues/components/DialogViewIssue.vue

@@ -0,0 +1,587 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import { storeToRefs } from "pinia";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useIssueStore } from "@/modules/07_issues/store";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  IssueData,
+  IssueAttachment,
+  IssueAttachmentWithDownloadUrl,
+} from "@/modules/07_issues/interface/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const store = useIssueStore();
+const { statusOptions } = storeToRefs(store);
+const { convertStatus, convertSystem } = store;
+
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", {
+  default: false,
+});
+const type = defineModel<string>("type", {
+  default: "edit",
+});
+const data = defineModel<IssueData | null>("data", {
+  default: null,
+});
+
+const props = defineProps<{
+  fetchData: () => Promise<void>;
+}>();
+
+const isEdit = computed(() => type.value === "edit");
+const title = computed(() => (isEdit.value ? "แก้ไขสถานะ" : "รายละเอียดปัญหา"));
+const optionsStatus = computed(() =>
+  statusOptions.value.filter((item) => item.value !== ""),
+);
+const splitterModel = computed({
+  get: () => {
+    if (!isEdit.value) return 100;
+    // สำหรับหน้าจอเล็ก ใช้ horizontal splitter และแบ่งเป็น 60:40
+    if ($q.screen.lt.md) return 60;
+    return 70;
+  },
+  set: (val: number) => {},
+});
+
+const form = reactive({
+  status: "",
+  remark: "",
+});
+const fileList = ref<IssueAttachment[]>([]);
+const images = ref<IssueAttachmentWithDownloadUrl[]>([]);
+
+const imageModal = ref(false);
+const selectedImg = ref("");
+
+// ฟังก์ชันสำหรับเปิดดูรูป
+const openPreview = (url: string) => {
+  selectedImg.value = url;
+  imageModal.value = true;
+};
+
+/** ฟังก์ชันบันทึกข้อมูล */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    try {
+      await http.put(config.API.orgIssues + "/" + data?.value?.id, {
+        status: form.status,
+        remark: form.remark,
+      });
+      await props.fetchData();
+      success($q, "บันทึกข้อมูลเรียบร้อย");
+      onClose();
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/** ฟังก์ชันปิด dialog และรีเซ็ตข้อมูล */
+function onClose() {
+  modal.value = false;
+  form.status = "";
+  form.remark = "";
+  fileList.value = [];
+  images.value = [];
+}
+
+async function fetchDocument(codeIssue: string, system: string) {
+  try {
+    const res = await http.get(
+      config.API.file("issueAttachments", system, codeIssue),
+    );
+    const allFiles = res.data;
+
+    // 1. แยกไฟล์ที่ไม่ใช่รูปเก็บเข้า list
+    fileList.value = allFiles.filter(
+      (f: IssueAttachment) => !/\.(jpg|jpeg|png|gif|webp)$/i.test(f.fileName),
+    );
+
+    // 2. แยกเฉพาะรูปภาพแล้วโหลดข้อมูล
+    const images = allFiles.filter((f: IssueAttachment) =>
+      /\.(jpg|jpeg|png|gif|webp)$/i.test(f.fileName),
+    );
+    for (const img of images) {
+      await getImg(img.path, img.fileName);
+    }
+  } catch (error) {
+    messageError($q, error);
+  }
+}
+
+/**
+ * ฟังก์ชันเรียกข้อมูลรายการรูป
+ * @param dataList ข้อมูล
+ */
+async function getImg(path: string, fileName: string) {
+  await http
+    .get(config.API.fileByPath(`${path}/${fileName}`))
+    .then((res) => {
+      const data = res.data;
+      const newData: IssueAttachmentWithDownloadUrl = {
+        ...data,
+      };
+
+      images.value.push(newData);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * ดาวน์โหลดลิงก์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile(
+        "issueAttachments",
+        data?.value?.system || "",
+        data?.value?.codeIssue || "",
+        fileName,
+      ),
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+const downloadImage = async (url: string, fileName: string = "image.png") => {
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob(); // แปลงข้อมูลเป็น Blob
+    const blobUrl = window.URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = fileName; // กำหนดชื่อไฟล์ที่ต้องการให้บันทึก
+    document.body.appendChild(link);
+    link.click();
+
+    // ล้างหน่วยความจำ
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(blobUrl);
+  } catch (error) {
+    messageError($q, error);
+  }
+};
+
+watch(
+  () => modal.value,
+  (val: boolean) => {
+    if (val && data.value) {
+      form.status = data.value.status || "";
+      form.remark = data.value.remark || "";
+      fetchDocument(data.value.codeIssue, data.value.system);
+    }
+  },
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card
+      class="overflow-hidden"
+      style="width: 100%; max-width: min(900px, 95vw); min-width: 320px"
+    >
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="title" :close="onClose" />
+        <q-separator />
+
+        <q-card-section style="max-height: 70vh; padding: 0">
+          <q-splitter
+            v-model="splitterModel"
+            :limits="
+              isEdit && !$q.screen.lt.md
+                ? [70, 70]
+                : isEdit && $q.screen.lt.md
+                ? [50, 80]
+                : [100, 100]
+            "
+            :style="`height: ${
+              $q.screen.height > 700 ? '500px' : 'calc(60vh - 100px)'
+            }`"
+            :separator-class="!isEdit ? 'hidden' : ''"
+            :horizontal="$q.screen.lt.md && isEdit"
+          >
+            <template v-slot:before>
+              <div :class="$q.screen.xs ? 'q-pa-md' : 'q-pa-lg'">
+                <div class="q-gutter-y-md text-body2">
+                  <div class="row">
+                    <div
+                      class="col-xs-12 col-sm-3 text-grey-7"
+                      :class="{ 'q-mb-xs': $q.screen.xs }"
+                    >
+                      รหัส:
+                    </div>
+                    <div class="col-xs-12 col-sm-9 text-weight-bold">
+                      {{ data?.codeIssue || "-" }}
+                    </div>
+                  </div>
+                  <div class="row q-col-gutter-sm">
+                    <div
+                      class="col-xs-12 col-sm-3 text-grey-7"
+                      :class="{ 'q-mb-xs': $q.screen.xs }"
+                    >
+                      หัวข้อ:
+                    </div>
+                    <div class="col-xs-12 col-sm-9">
+                      {{ data?.title || "-" }}
+                    </div>
+                  </div>
+                  <div class="row q-col-gutter-sm">
+                    <div
+                      class="col-xs-12 col-sm-3 text-grey-7"
+                      :class="{ 'q-mb-xs': $q.screen.xs }"
+                    >
+                      รายละเอียด:
+                    </div>
+                    <div class="col-xs-12 col-sm-9">
+                      {{ data?.description || "-" }}
+                    </div>
+                  </div>
+                  <div class="row q-col-gutter-sm">
+                    <div
+                      class="col-xs-12 col-sm-3 text-grey-7"
+                      :class="{ 'q-mb-xs': $q.screen.xs }"
+                    >
+                      ระบบ/เมนู:
+                    </div>
+                    <div class="col-xs-12 col-sm-9">
+                      {{ convertSystem(data?.system || "") }} / {{ data?.menu }}
+                    </div>
+                  </div>
+
+                  <div class="row q-col-gutter-sm">
+                    <div
+                      class="col-xs-12 col-sm-3 text-grey-7"
+                      :class="{ 'q-mb-xs': $q.screen.xs }"
+                    >
+                      สังกัด:
+                    </div>
+                    <div class="col-xs-12 col-sm-9">
+                      {{ data?.org || "-" }}
+                    </div>
+                  </div>
+
+                  <div class="row q-col-gutter-sm">
+                    <div
+                      class="col-xs-12 col-sm-3 text-grey-7"
+                      :class="{ 'q-mb-xs': $q.screen.xs }"
+                    >
+                      อีเมลติดต่อกลับ:
+                    </div>
+                    <div class="col-xs-12 col-sm-9">
+                      {{ data?.email || "-" }}
+                    </div>
+                  </div>
+
+                  <div class="row q-col-gutter-sm">
+                    <div
+                      class="col-xs-12 col-sm-3 text-grey-7"
+                      :class="{ 'q-mb-xs': $q.screen.xs }"
+                    >
+                      เบอร์ติดต่อกลับ:
+                    </div>
+                    <div class="col-xs-12 col-sm-9">
+                      {{ data?.phone || "-" }}
+                    </div>
+                  </div>
+                  <div class="row q-col-gutter-sm">
+                    <div
+                      class="col-xs-12 col-sm-3 text-grey-7"
+                      :class="{ 'q-mb-xs': $q.screen.xs }"
+                    >
+                      ผู้แจ้ง:
+                    </div>
+                    <div class="col-xs-12 col-sm-9">
+                      {{ data?.createdFullName || "-" }}
+                    </div>
+                  </div>
+                  <div class="row q-col-gutter-sm">
+                    <div
+                      class="col-xs-12 col-sm-3 text-grey-7"
+                      :class="{ 'q-mb-xs': $q.screen.xs }"
+                    >
+                      วันที่แจ้ง:
+                    </div>
+                    <div class="col-xs-12 col-sm-9">
+                      {{
+                        data?.createdAt
+                          ? date2Thai(data?.createdAt, false, true)
+                          : ""
+                      }}
+                    </div>
+                  </div>
+                  <div class="row q-col-gutter-sm">
+                    <div
+                      class="col-xs-12 col-sm-3 text-grey-7"
+                      :class="{ 'q-mb-xs': $q.screen.xs }"
+                    >
+                      สถานะ:
+                    </div>
+                    <div class="col-xs-12 col-sm-9">
+                      {{ convertStatus(data?.status || "") }}
+                    </div>
+                  </div>
+                  <div
+                    v-if="data?.remark"
+                    class="row q-mt-sm bg-grey-2 q-pa-sm rounded-borders"
+                  >
+                    <div class="col-12 text-grey-7 text-caption">หมายเหตุ:</div>
+                    <div class="col-12">{{ data?.remark }}</div>
+                  </div>
+                </div>
+
+                <div v-if="images.length > 0" class="q-mt-xl">
+                  <div class="text-subtitle2 q-mb-sm">
+                    <q-icon name="image" /> รูปภาพประกอบ
+                  </div>
+                  <div class="row q-col-gutter-sm">
+                    <div
+                      v-for="(img, index) in images"
+                      :key="index"
+                      class="col-xs-6 col-sm-4 col-md-3"
+                    >
+                      <q-img
+                        :src="img.downloadUrl"
+                        :ratio="1"
+                        fit="cover"
+                        class="rounded-borders shadow-1 cursor-pointer image-hover"
+                        @click="openPreview(img.downloadUrl)"
+                      >
+                        <div
+                          class="absolute-full flex flex-center view-overlay"
+                        >
+                          <q-icon name="visibility" size="sm" />
+                        </div>
+                        <div class="absolute-top-right btn-overlay q-pa-xs">
+                          <q-btn
+                            flat
+                            round
+                            dense
+                            icon="download"
+                            color="white"
+                            size="sm"
+                            class="bg-black-op"
+                            @click.stop="
+                              downloadImage(img.downloadUrl, img.fileName)
+                            "
+                          />
+                        </div>
+                      </q-img>
+                    </div>
+                  </div>
+                </div>
+
+                <div v-if="fileList.length > 0" class="q-mt-lg">
+                  <div class="text-subtitle2 q-mb-sm">
+                    <q-icon name="attachment" /> ไฟล์เอกสารแนบ
+                  </div>
+                  <q-list bordered separator class="rounded-borders">
+                    <q-item v-for="file in fileList" :key="file.fileName" dense>
+                      <q-item-section avatar
+                        ><q-icon name="description" color="blue"
+                      /></q-item-section>
+                      <q-item-section class="text-caption ellipsis">{{
+                        file.fileName
+                      }}</q-item-section>
+                      <q-item-section side>
+                        <q-btn
+                          flat
+                          round
+                          dense
+                          icon="download"
+                          color="blue"
+                          size="sm"
+                          @click="downloadFile(file.fileName)"
+                        />
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+              </div>
+            </template>
+
+            <template v-slot:after v-if="isEdit">
+              <div
+                :class="[
+                  $q.screen.xs ? 'q-pa-md' : 'q-pa-lg',
+                  'full-height bg-grey-1',
+                ]"
+              >
+                <div class="col-12 q-pa-none q-col-gutter-sm">
+                  <div class="col-12">
+                    <q-select
+                      dense
+                      outlined
+                      v-model="form.status"
+                      :options="optionsStatus"
+                      option-value="value"
+                      option-label="label"
+                      map-options
+                      label="สถานะ"
+                      emit-value
+                      :rules="[ (val: string) => !!val || 'กรุณาเลือกสถานะ' ]"
+                      hide-bottom-space
+                      class="inputgreen bg-white"
+                      :readonly="isEdit ? false : true"
+                    >
+                      <template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-grey">
+                            ไม่มีข้อมูล
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+                  </div>
+                  <div class="col-12">
+                    <q-input
+                      :readonly="isEdit ? false : true"
+                      dense
+                      outlined
+                      label="หมายเหตุ"
+                      v-model="form.remark"
+                      class="inputgreen bg-white"
+                      hide-bottom-space
+                      type="textarea"
+                    />
+                  </div>
+                </div>
+              </div>
+            </template>
+          </q-splitter>
+        </q-card-section>
+
+        <q-separator v-if="isEdit" />
+        <q-card-actions
+          :align="$q.screen.xs ? 'center' : 'right'"
+          :class="$q.screen.xs ? 'q-pa-md' : 'q-pa-md'"
+          v-if="isEdit"
+        >
+          <q-btn
+            type="submit"
+            :class="$q.screen.xs ? 'full-width q-px-md' : 'q-px-md'"
+            class="items-center"
+            color="public"
+            label="บันทึก"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="imageModal">
+    <q-btn
+      icon="close"
+      flat
+      round
+      dense
+      v-close-popup
+      class="absolute-top-right z-top text-white"
+      style="margin: 16px"
+    />
+    <q-card
+      style="
+        width: auto;
+        max-width: none;
+        background: transparent;
+        box-shadow: none;
+      "
+    >
+      <img
+        :src="selectedImg"
+        style="
+          display: block;
+          max-width: 90vw;
+          max-height: 90vh;
+          object-fit: contain;
+        "
+      />
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.bg-black-op {
+  background: rgba(0, 0, 0, 0.4);
+}
+.view-overlay {
+  background: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+.btn-overlay {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.image-hover:hover .view-overlay,
+.image-hover:hover .btn-overlay {
+  opacity: 1;
+}
+/* ซ่อน Splitter Line เมื่อไม่ได้แก้ไข */
+.hidden {
+  display: none !important;
+}
+
+/* Responsive styles */
+@media (max-width: 599px) {
+  .q-card {
+    margin: 8px !important;
+  }
+
+  .q-splitter--horizontal .q-splitter__panel:first-child {
+    max-height: calc(50vh - 50px) !important;
+    overflow-y: auto;
+  }
+
+  .text-body2 {
+    font-size: 0.875rem;
+  }
+
+  .q-img {
+    min-height: 120px;
+  }
+}
+
+@media (max-width: 1023px) and (min-width: 600px) {
+  .q-splitter--horizontal .q-splitter__panel:first-child {
+    max-height: calc(55vh - 50px) !important;
+    overflow-y: auto;
+  }
+}
+</style>

src/modules/07_issues/interface/Main.ts

@@ -0,0 +1,44 @@
+import type { D } from "@fullcalendar/core/internal-common";
+
+interface Options {
+  label: string;
+  value: string;
+}
+
+interface IssueData {
+  codeIssue: string;
+  createdAt: Date;
+  createdFullName: string;
+  createdUserId: string;
+  description: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: Date;
+  menu: string;
+  org: string;
+  remark: string;
+  status: "IN_PROGRESS" | "RESOLVED" | "CLOSED" | "NEW";
+  system: "mgt" | "user" | "checkin";
+  title: string;
+  email: string;
+  phone: string;
+}
+
+interface IssueAttachment {
+  fileName: string;
+  path: string;
+  pathname: string;
+  title: string;
+}
+
+interface IssueAttachmentWithDownloadUrl extends IssueAttachment {
+  downloadUrl: string;
+}
+
+export type {
+  Options,
+  IssueData,
+  IssueAttachment,
+  IssueAttachmentWithDownloadUrl,
+};

src/modules/07_issues/router.ts

@@ -0,0 +1,13 @@
+const Main = () => import("@/modules/07_issues/views/Main.vue");
+
+export default [
+  {
+    path: "/issues",
+    name: "manageIssues",
+    component: Main,
+    meta: {
+      Auth: true,
+      role: ["SUPER_ADMIN", "ISSUE"],
+    },
+  },
+];

src/modules/07_issues/store.ts

@@ -0,0 +1,52 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import type { Options } from "@/modules/07_issues/interface/Main";
+
+export const useIssueStore = defineStore("issue", () => {
+  const systemOptions = ref<Options[]>([
+    { label: "ทั้งหมด", value: "" },
+    { label: "ระบบบริหารจัดการ", value: "MGT" },
+    { label: "ระบบผู้ใช้งาน", value: "USER" },
+    { label: "ระบบลงเวลา", value: "CHECKIN" },
+  ]);
+
+  const statusOptions = ref<Options[]>([
+    { label: "ทั้งหมด", value: "" },
+    { label: "ใหม่", value: "NEW" },
+    { label: "กำลังดำเนินการ", value: "IN_PROGRESS" },
+    { label: "แก้ไขแล้ว", value: "RESOLVED" },
+    { label: "ปิดแล้ว", value: "CLOSED" },
+  ]);
+
+  function convertStatus(status: string) {
+    let val = status.toUpperCase();
+    switch (val) {
+      case "NEW":
+        return "ใหม่";
+      case "IN_PROGRESS":
+        return "กำลังดำเนินการ";
+      case "RESOLVED":
+        return "แก้ไขแล้ว";
+      case "CLOSED":
+        return "ปิดแล้ว";
+      default:
+        return "-";
+    }
+  }
+
+  function convertSystem(system: string) {
+    let val = system.toUpperCase();
+    switch (val) {
+      case "MGT":
+        return "ระบบบริหารจัดการ";
+      case "USER":
+        return "ระบบผู้ใช้งาน";
+      case "CHECKIN":
+        return "ระบบลงเวลา";
+      default:
+        return "-";
+    }
+  }
+
+  return { systemOptions, statusOptions, convertStatus, convertSystem };
+});

src/modules/07_issues/views/Main.vue

@@ -0,0 +1,363 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { storeToRefs } from "pinia";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useIssueStore } from "@/modules/07_issues/store";
+
+import type { QTableProps } from "quasar";
+import type { IssueData } from "@/modules/07_issues/interface/Main";
+
+import DialogViewIssue from "@/modules/07_issues/components/DialogViewIssue.vue";
+
+const $q = useQuasar();
+const store = useIssueStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
+
+const { convertStatus, convertSystem } = store;
+const { systemOptions, statusOptions } = storeToRefs(store);
+
+const visibleColumns = ref<string[]>([
+  "title",
+  "description",
+  "system",
+  "menu",
+  "org",
+  "email",
+  "phone",
+  "createdAt",
+  "createdFullName",
+  "status",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "title",
+    align: "left",
+    label: "หัวข้อปัญหา",
+    sortable: false,
+    field: "title",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "description",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: false,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "system",
+    align: "left",
+    label: "ระบบ",
+    sortable: false,
+    field: "system",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val: string) => convertSystem(val),
+  },
+  {
+    name: "menu",
+    align: "left",
+    label: "เมนู",
+    sortable: false,
+    field: "menu",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "org",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: false,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "email",
+    align: "left",
+    label: "อีเมลติดต่อกลับ",
+    sortable: false,
+    field: "email",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "phone",
+    align: "left",
+    label: "เบอร์ติดต่อกลับ",
+    sortable: false,
+    field: "phone",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: false,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val: string) => date2Thai(new Date(val), false, true),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ชื่อผู้สร้าง",
+    sortable: false,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: false,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val: string) => convertStatus(val),
+  },
+]);
+const filterKeyword = ref<string>(""); // ค้นหา
+const systemFilter = ref<string>(""); // กรองระบบ
+const statusFilter = ref<string>("NEW"); // กรองสถานะ
+const rows = ref<IssueData[]>([]); // ข้อมูลตาราง
+const rowsData = ref<IssueData[]>([]); // ข้อมูลตารางทั้งหมด
+
+const modal = ref<boolean>(false); // modal แสดงรายละเอียด
+const typeModal = ref<string>("view"); // ประเภท modal
+const dataIssue = ref<IssueData | null>(null); // ข้อมูลรายงานปัญหา
+
+/** fetch รายการรายงานปัญหา */
+async function fetchListIssues() {
+  try {
+    showLoader();
+    const res = await http.get(config.API.orgIssues + "/lists");
+    rowsData.value = res.data.result;
+    onSearch();
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
+}
+
+/** ค้นหารายการรายงานปัญหา*/
+function onSearch() {
+  let filtered = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : [],
+  );
+  if (systemFilter.value) {
+    filtered = filtered.filter(
+      (item) =>
+        item.system &&
+        item.system.toUpperCase() === systemFilter.value.toUpperCase(),
+    );
+  }
+  if (statusFilter.value) {
+    filtered = filtered.filter(
+      (item) =>
+        item.status &&
+        item.status.toUpperCase() === statusFilter.value.toUpperCase(),
+    );
+  }
+  rows.value = filtered;
+}
+
+/**
+ * แสดงรายละเอียดรายงานปัญหา
+ * @param row ข้อมูลรายงานปัญหา
+ * @param type ประเภทของ modal
+ */
+function onViewDetail(row: IssueData, type: string) {
+  typeModal.value = type;
+  dataIssue.value = row;
+  modal.value = true;
+}
+
+/** โหลดข้อมูลเมื่อเข้าหน้า */
+onMounted(async () => {
+  await fetchListIssues();
+});
+</script>
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      รายการรายงานปัญหา
+    </div>
+  </div>
+
+  <q-card flat bordered class="q-pa-md">
+    <div class="row col-12 q-col-gutter-sm">
+      <div class="col-12">
+        <div class="row q-col-gutter-xs items-end">
+          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
+            <div class="row q-col-gutter-sm">
+              <div class="col-xs-12 col-sm-8 col-md-6">
+                <q-select
+                  dense
+                  outlined
+                  v-model="systemFilter"
+                  :options="systemOptions"
+                  option-value="value"
+                  option-label="label"
+                  map-options
+                  label="ระบบ"
+                  emit-value
+                  @update:modelValue="onSearch"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+              <div class="col-xs-12 col-sm-8 col-md-6">
+                <q-select
+                  dense
+                  outlined
+                  v-model="statusFilter"
+                  :options="statusOptions"
+                  option-value="value"
+                  option-label="label"
+                  map-options
+                  label="สถานะ"
+                  emit-value
+                  @update:modelValue="onSearch"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+            </div>
+          </div>
+          <div class="col-xs-0 col-sm-1 col-md-3 col-lg-5"></div>
+          <div class="col-xs-12 col-sm-5 col-md-3 col-lg-4">
+            <div class="row q-col-gutter-xs">
+              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-7">
+                <q-input
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  outlined
+                  placeholder="ค้นหา"
+                  @keydown.enter.prevent="onSearch"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-5">
+                <q-select
+                  dense
+                  multiple
+                  outlined
+                  emit-value
+                  map-options
+                  options-dense
+                  option-value="name"
+                  style="min-width: 140px"
+                  v-model="visibleColumns"
+                  :options="columns"
+                  :display-value="$q.lang.table.columns"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-12">
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          row-key="id"
+          flat
+          bordered
+          :paging="true"
+          dense
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width></q-th>
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  round
+                  color="info"
+                  flat
+                  dense
+                  icon="mdi-eye"
+                  @click.prevent.stop="onViewDetail(props.row, 'view')"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  round
+                  color="edit"
+                  flat
+                  dense
+                  icon="edit"
+                  @click.prevent.stop="onViewDetail(props.row, 'edit')"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div
+                  :class="
+                    col.name === 'description' || col.name === 'org'
+                      ? 'table_ellipsis'
+                      : ''
+                  "
+                >
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+
+  <DialogViewIssue
+    v-model:modal="modal"
+    :type="typeModal"
+    :data="dataIssue"
+    :fetch-data="fetchListIssues"
+  />
+</template>
+
+<style scoped></style>

src/router/index.ts

@@ -12,6 +12,7 @@ import ModuleLogs from "@/modules/03_logs/router";
 import ModuleSystem from "@/modules/04_system/router";
 import ModuleCommand from "@/modules/05_command/router";
 import ModuleWebServices from "@/modules/06_webservices/router";
+import ModeuleIssues from "@/modules/07_issues/router";
 
 // TODO: ใช้หรือไม่?
 import { authenticated, logout } from "@/plugins/auth";
@@ -50,6 +51,7 @@ const router = createRouter({
         ...ModuleSystem,
         ...ModuleCommand,
         ...ModuleWebServices,
+        ...ModeuleIssues,
       ],
     },
     /**

src/views/MainLayout.vue

@@ -129,7 +129,7 @@ async function getDataNotification(index: number, type: string) {
                 : e.createdFullName[0],
             body: e.body ?? "",
             timereceive: `${date2Thai(e.receiveDate)} ${new Date(
-              e.receiveDate
+              e.receiveDate,
             ).toLocaleTimeString("th-TH", thaiOptions)} น.`,
             isOpen: e.isOpen,
           });
@@ -255,7 +255,7 @@ function doLogout() {
       await logoutSSO();
     },
     "ยืนยันการออกจากระบบ",
-    "ต้องการออกจากระบบใช่หรือไม่?"
+    "ต้องการออกจากระบบใช่หรือไม่?",
   );
 }
 
@@ -335,6 +335,10 @@ const landingPageUrl = ref<string>(configParam.landingPageUrl);
 
 /** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
 async function fetchKeycloakPosition() {
+  const checkRole =
+    role.value.includes("SUPER_ADMIN") || role.value.includes("ADMIN");
+  if (!checkRole) return;
+
   await http
     .get(config.API.keycloakPosition())
     .then(async (res) => {
@@ -379,7 +383,7 @@ watch(
       notiList.value = updatedNotifications;
       fetchmsgNoread();
     }
-  }
+  },
 );
 
 const isSsoToken = ref<boolean>(false);
@@ -730,7 +734,6 @@ onUnmounted(() => {
                   v-if="
                     menuItem.key == 2 ||
                     menuItem.key == 0 ||
-                    menuItem.key == 7 ||
                     menuItem.key == 8 ||
                     menuItem.key == 9 ||
                     menuItem.key == 10 ||
@@ -773,7 +776,6 @@ onUnmounted(() => {
                         <div
                           v-if="
                             menuItem.key == 2 ||
-                            menuItem.key == 7 ||
                             menuItem.key == 12 ||
                             menuItem.key == 13
                           "
@@ -915,7 +917,6 @@ onUnmounted(() => {
                 v-if="
                   menuItem.key == 2 ||
                   menuItem.key == 0 ||
-                  menuItem.key == 7 ||
                   menuItem.key == 8 ||
                   menuItem.key == 9 ||
                   menuItem.key == 10 ||
@@ -942,7 +943,6 @@ onUnmounted(() => {
                 <div
                   v-if="
                     menuItem.key == 2 ||
-                    menuItem.key == 7 ||
                     menuItem.key == 12 ||
                     menuItem.key == 13
                   "
@@ -954,7 +954,6 @@ onUnmounted(() => {
                       :label="subMenu.label"
                       v-if="
                         subMenu.key !== 2.0 &&
-                        subMenu.key !== 7.1 &&
                         subMenu.key !== 12.0 &&
                         subMenu.key !== 13.0
                       "