api รอบการขึ้นเงินเดือน

src/modules/13_salary/components/SalaryRound/DialogForm.vue

@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import { ref, defineModel, defineProps, watch } from "vue";
+import Header from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type {
+  ObjectRef,
+  DataOption,
+} from "@/modules/13_salary/interface/response/Main";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+
+import config from "@/app.config";
+
+const $q = useQuasar();
+const isActive = ref<boolean>(false);
+const period = ref<string>("");
+const modal = defineModel<boolean>("modal", { required: true });
+const mixin = useCounterMixin();
+const { dialogConfirm, date2Thai, messageError } = mixin;
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const effectiveDate = ref<Date | null>(null);
+/** ตัวแปร validate */
+const periodRef = ref<Object | null>(null);
+const effectiveDateRef = ref<Object | null>(null);
+const typeOptions = ref<DataOption[]>([
+  { id: "SPECIAL", name: "รอบพิเศษ" },
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
+const objectForm: ObjectRef = {
+  period: periodRef,
+  effectiveDate: effectiveDateRef,
+};
+
+const props = defineProps({
+  getData: Function,
+  edit: Boolean,
+  idRound: String,
+  period: String,
+  effectiveDate: Date,
+  isActive: Boolean,
+});
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectForm) {
+    if (Object.prototype.hasOwnProperty.call(objectForm, key)) {
+      const property = objectForm[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+
+  if (hasError.every((result) => result === true)) {
+    if(props.edit == true){
+      editSummit();
+    }else{
+      onSubmit();
+    }
+  }
+}
+
+function saveData() {}
+function clearForm() {
+  isActive.value = false;
+  period.value = "";
+  effectiveDate.value = null;
+}
+
+function close() {
+  modal.value = false;
+  clearForm();
+}
+
+function editSummit(){
+  dialogConfirm($q, () => {
+    const body = {
+      period: period.value,
+      isActive: isActive.value,
+      effectiveDate: effectiveDate.value,
+    };
+    http
+      .put(config.API.salaryPeriod()+`/${props.idRound}`, body)
+      .then((res) => {
+        modal.value = false;
+        clearForm();
+        props.getData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
+  });
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    const body = {
+      period: period.value,
+      isActive: isActive.value,
+      effectiveDate: effectiveDate.value,
+    };
+    http
+      .post(config.API.salaryPeriod(), body)
+      .then((res) => {
+        modal.value = false;
+        clearForm();
+        props.getData?.();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
+  });
+}
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+watch(
+  () => props.edit,
+  () => {
+    if (props.edit == true) {
+      period.value = props.period ? props.period :'';
+      effectiveDate.value = props.effectiveDate ? props.effectiveDate:null;
+      isActive.value = props.isActive;
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <Header
+        :tittle="`${
+          props.edit ? `แก้ไขรอบการขึ้นเงินเดือน` : `เพิ่มรอบการขึ้นเงินเดือน`
+        }`"
+        :close="close"
+      />
+      <q-separator />
+
+      <q-card-section class="scroll" style="max-height: 70vh">
+        <div class="q-gutter-y-sm">
+          <q-select
+            ref="periodRef"
+            :class="inputEdit(isReadonly)"
+            v-model="period"
+            label="รอบการขึ้นเงินเดือน"
+            dense
+            outlined
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="typeOptions"
+            :rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
+            lazy-rules
+            hide-bottom-space
+          />
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="effectiveDate"
+            :locale="'th'"
+            autoApply
+            borderless
+            :readonly="isReadonly"
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                for="effectiveDate"
+                ref="effectiveDateRef"
+                outlined
+                dense
+                :class="inputEdit(isReadonly)"
+                :readonly="isReadonly"
+                hide-bottom-space
+                :model-value="
+                  effectiveDate != null ? date2Thai(effectiveDate) : null
+                "
+                label="วันที่มีผลบังคับใช้งาน"
+                :rules="[
+                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้งาน'}`,
+                ]"
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+          <div class="col q-pa-sm bg-white border_custom text-weight-medium">
+            <div class="row items-center q-my-sm justify-between">
+              <p class="q-ma-none">สถานะการใช้งาน</p>
+              <label class="toggle-control">
+                <input type="checkbox" v-model="isActive" />
+                <span class="control"></span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-actions align="right" class="bg-white text-teal">
+          <!-- <q-btn flat label="OK" v-close-popup /> -->
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+          />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>