hrms-user/src/modules/00_support/components/NewIssue.vue

<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-py-sm q-px-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>