180 lines
5.2 KiB
Vue
180 lines
5.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, computed } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useOrganizational } from "@/modules/02_organization/store/organizational";
|
|
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
const $q = useQuasar();
|
|
const store = useOrganizational();
|
|
const {
|
|
dialogConfirm,
|
|
date2Thai,
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
success,
|
|
convertDateToAPI,
|
|
} = useCounterMixin();
|
|
|
|
/**
|
|
* porps
|
|
*/
|
|
const props = defineProps({
|
|
modal: Boolean,
|
|
close: Function,
|
|
fetchActive: {
|
|
type: Function,
|
|
require: true,
|
|
default: () => "Function fetchActive",
|
|
},
|
|
});
|
|
|
|
const dateTime = ref<Date | null>(null); //เวลาเผยแพร่
|
|
|
|
/**
|
|
* กำหนดวันที่เผยแพร่ไม่ให้น้อยกว่าวันปัจจุบัน
|
|
*/
|
|
const minDate = computed(() => {
|
|
const date = new Date();
|
|
date.setDate(date.getDate() + 1);
|
|
return date;
|
|
});
|
|
|
|
/**
|
|
* ฟังก์ชันบันทึกการตั้งเวลาเผยแพร่
|
|
*/
|
|
function onSubmit() {
|
|
dialogConfirm($q, () => {
|
|
showLoader();
|
|
http
|
|
.put(config.API.orgSetDateTime(store.draftId as string), {
|
|
orgPublishDate: convertDateToAPI(dateTime.value),
|
|
})
|
|
.then(async () => {
|
|
await props.fetchActive();
|
|
await success($q, "บันทึกข้อมูลสำเร็จ");
|
|
props.close?.();
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันยืนยันการเผยแพร่โครงาสร้าง
|
|
*/
|
|
function onClickPublish() {
|
|
dialogConfirm(
|
|
$q,
|
|
() => {
|
|
showLoader();
|
|
http
|
|
.get(config.API.organizationPublishGet)
|
|
.then(async () => {
|
|
await props.fetchActive();
|
|
await props.close?.();
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
},
|
|
"ยืนยันการเผยเเพร่ข้อมูล",
|
|
"ต้องการยืนยันการเผยเเพร่ข้อมูลนี้ใช่หรือไม่?"
|
|
);
|
|
}
|
|
|
|
/**
|
|
* ดูการเปลี่ยนแปลงของ props.modal
|
|
*/
|
|
watch(
|
|
() => props.modal,
|
|
() => {
|
|
if (props.modal) {
|
|
dateTime.value = store.orgPublishDate ? store.orgPublishDate : null;
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<template>
|
|
<q-dialog v-model="props.modal" persistent>
|
|
<q-card style="min-width: 18vw">
|
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
|
<DialogHeader :tittle="`ตั้งเวลาเผยแพร่`" :close="props.close" />
|
|
<q-separator />
|
|
|
|
<q-card-section>
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-12">
|
|
<datepicker
|
|
menu-class-name="modalfix"
|
|
v-model="dateTime"
|
|
:locale="'th'"
|
|
autoApply
|
|
borderless
|
|
:enableTimePicker="false"
|
|
week-start="0"
|
|
:min-date="minDate"
|
|
class="inputgreen"
|
|
>
|
|
<template #year="{ year }">
|
|
{{ year + 543 }}
|
|
</template>
|
|
<template #year-overlay-value="{ value }">
|
|
{{ parseInt(value + 543) }}
|
|
</template>
|
|
<template #trigger>
|
|
<q-input
|
|
for="#dateTime"
|
|
ref="dateTimeRef"
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
:model-value="
|
|
dateTime != null ? date2Thai(dateTime) : null
|
|
"
|
|
label="วันที่เผยแพร่"
|
|
:rules="[
|
|
(val:string) => !!val || `${'กรุณาเลือกวันที่เผยแพร่'}`,
|
|
]"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon
|
|
name="event"
|
|
class="cursor-pointer"
|
|
style="color: var(--q-primary)"
|
|
>
|
|
</q-icon>
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
</datepicker>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn flat color="blue-7" icon="public" @click="onClickPublish()">
|
|
<q-tooltip>เผยแพร่ข้อมูลทันที</q-tooltip>
|
|
</q-btn>
|
|
<q-space />
|
|
<q-btn type="submit" :label="`บันทึก`" color="public" />
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
</template>
|