update หน้า support user (แยก component)

src/modules/00_support/components/NewIssue.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useSupportStore } from "@/modules/00_support/store/Main";
+
+const store = useSupportStore();
+
+const isOpen = ref<boolean>(false);
+const title = ref<string>("");
+const categoryId = ref<string>("");
+
+const options = ref<{ label: string; value: string }[]>([]);
+
+onMounted(async () => {
+  await store.fetchIssueCategory();
+  if (store.issueCategory) {
+    options.value = store.issueCategory?.result.map((v) => ({
+      label: v.name,
+      value: v.id,
+    }));
+  }
+});
+</script>
+
+<template>
+  <div @click="isOpen = true" class="col-10 row items-center q-pa-md new">
+    <div class="noactive-avatar">
+      <div class="new-avatar">
+        <q-icon name="mdi-plus" size="24px" color="primary" />
+      </div>
+    </div>
+
+    <div class="col column q-ml-md">
+      <span class="col text-grey"> เพิ่มเรื่องปรึกษาใหม่ </span>
+    </div>
+  </div>
+
+  <!-- Dialog -->
+  <q-dialog v-model="isOpen">
+    <q-card class="q-pa-md" style="width: 100%">
+      <q-card-section class="row items-center">
+        <div class="text-h6">เพิ่มเรื่องปรึกษาใหม่</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          v-close-popup
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+
+      <q-card-section class="q-gutter-x-md row">
+        <q-select
+          class="col-3"
+          outlined
+          dense
+          emit-value
+          map-options
+          v-model="categoryId"
+          :options="options"
+          option-value="value"
+          option-label="label"
+          label="หมวดหมู่"
+        />
+        <q-input
+          class="col-grow"
+          outlined
+          dense
+          v-model="title"
+          label="ชื่อเรื่อง"
+        />
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
+        <q-btn
+          @click="
+            async () => {
+              await store.newIssue(title, categoryId);
+              isOpen = false;
+            }
+          "
+          label="บันทึก"
+          color="primary"
+          text-color="white"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.new {
+  transition: 0.1s ease all;
+  opacity: 1;
+  cursor: pointer;
+  border-left: 5px solid transparent;
+
+  &:hover {
+    background: #ebf9f7;
+  }
+}
+
+.new-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px dashed #9e9e9e;
+}
+</style>