133 lines
3.4 KiB
Vue
133 lines
3.4 KiB
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 titleRef = ref();
|
|
const categoryId = ref<string>("");
|
|
const categoryRef = ref();
|
|
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,
|
|
}));
|
|
}
|
|
});
|
|
|
|
async function onSubmit() {
|
|
titleRef.value.validate();
|
|
categoryRef.value.validate();
|
|
if (titleRef.value.hasError || categoryRef.value.hasError) return "";
|
|
await store.newIssue(title.value, categoryId.value);
|
|
isOpen.value = false;
|
|
}
|
|
</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>
|
|
|
|
<form @submit.prevent.stop="onSubmit">
|
|
<q-card-section class="q-gutter-x-md row">
|
|
<q-select
|
|
ref="categoryRef"
|
|
class="col-3"
|
|
outlined
|
|
dense
|
|
emit-value
|
|
map-options
|
|
v-model="categoryId"
|
|
:options="options"
|
|
option-value="value"
|
|
option-label="label"
|
|
label="หมวดหมู่"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) => (val !== null && val !== '') || 'กรุณาเลือหมวดหมู่',
|
|
]"
|
|
/>
|
|
<q-input
|
|
ref="titleRef"
|
|
class="col-grow"
|
|
outlined
|
|
dense
|
|
v-model="title"
|
|
label="ชื่อเรื่อง"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) => (val && val.length > 0) || 'กรุณาเพิ่มชื่อเรื่อง',
|
|
]"
|
|
/>
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right">
|
|
<q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
|
|
<q-btn
|
|
type="submit"
|
|
label="บันทึก"
|
|
color="primary"
|
|
text-color="white"
|
|
/>
|
|
</q-card-actions>
|
|
</form>
|
|
</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>
|