@neutron.co.id/operasional-interfaces 1.17.13-beta.1 → 1.17.13

package/build/@office/models/personalia/attendance/AttendanceStaff.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { GraphUtil, NeonSingle, useSingle } from '@neon.id/context'
+import { GraphUtil, NeonSingle, useSingle, useAppStore } from '@neon.id/context'
 import { NeonCheck, NeonField, NeonForm } from '@neon.id/form'
 import {
   NeonAlert,
@@ -7,10 +7,11 @@ import {
   NeonDivider,
   useToastStore,
   NeonCopy,
+  NeonImage,
 } from '@neon.id/interfaces'
 import { OfficeRelation, OfficeTab, OfficeTabs } from '@neon.id/office'
 import { Query } from '@neon.id/query'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, watchEffect } from 'vue'
 import { PromiseUtil } from '@neon.id/utils/promise'
 import {
   AttendanceModel,
@@ -18,9 +19,11 @@ import {
   type Schema,
 } from '@neutron.co.id/personalia-models'
 import { DateUtil } from '../../../common/utils/util.date'
-import { NeonTime, useOperasional } from '../../../common'
+import { NeonTime, useOperasional, apiUrl } from '../../../common'
 import { AttendanceNoteTab } from './sections'
 import { useClientHandle } from '@urql/vue'
+import { ofetch } from 'ofetch'
+import { useAuthStore } from '@neon.id/identitas-interfaces'
 
 const {
   fields,
@@ -38,6 +41,14 @@ const {
   executeOne,
 } = useSingle<Schema.Attendance, TPersonaliaAttendanceModel>()
 
+const appStore = useAppStore()
+
+const officeAppUrl = computed(() => {
+  const url = apiUrl()
+  return url.action
+  // return 'http://127.0.0.1:7020'
+})
+
 const key = ref(0)
 const responseState = ref()
 const toast = useToastStore()
@@ -156,6 +167,10 @@ function getNotified() {
 }
 
 async function generateAttendance() {
+  // console.log('show', showLeaveQuota.value)
+  // console.log('initial values', initialValues.value)
+  // console.log('values', values.value)
+  // console.log('leaveStffId', leaveStaffId.value)
   const responseGenerateAttendance = await client
     .mutation(GraphUtil.executeOne(AttendanceModel, {}), {
       action: 'generateAttendance',
@@ -164,7 +179,7 @@ async function generateAttendance() {
         // Attendance input.
         status: values.value.status,
         submitStaffId: values.value.submitStaffId,
-        type: values.value.type,
+        typeId: values.value.type?.id,
         decideStaffId: values.value.decideStaffId,
         delegateStaffIds: values.value.delegateStaffIds,
         monitoringStaffIds: values.value.monitoringStaffIds,
@@ -173,6 +188,9 @@ async function generateAttendance() {
         startedAt: values.value.startedAt,
         endedAt: values.value.endedAt,
         delegateNotes: values.value.delegateNotes,
+        leaveQuota: quotaTaken.value,
+        isQuota: showLeaveQuota.value,
+        leaveStaffId: leaveStaffId.value,
       },
     })
     .toPromise()
@@ -180,6 +198,94 @@ async function generateAttendance() {
   const wrapper = responseGenerateAttendance.data?.executeAttendance
   responseState.value = wrapper?.info?.state
 }
+const type = ref('')
+const showLeaveQuota = ref(true)
+const authStore = useAuthStore()
+const createdBy = authStore.userId
+const quota = ref(0)
+const maxDuration = ref(0)
+const quotaTaken = ref(0)
+const leaveStaffId = ref('')
+
+function checkDurationLeave() {
+  if (!values.value.startedAt || !values.value.endedAt) {
+    return true
+  }
+
+  const startedAt = new Date(values.value.startedAt)
+  const endedAt = new Date(values.value.endedAt)
+
+  const durationMilliseconds = endedAt.getTime() - startedAt.getTime()
+
+  const days = Math.floor(durationMilliseconds / (1000 * 60 * 60 * 24)) + 1
+  quotaTaken.value = days
+
+  if (days > maxDuration.value) return false
+
+  return true
+}
+
+watch(
+  () => values.value,
+  async (newType) => {
+    if (values.value.attendanceTypeId) {
+      checkDurationLeave()
+      const response = await ofetch(`${officeAppUrl.value}/getAttendanceType`, {
+        method: 'POST',
+        headers: {
+          'X-Neon-Key': 'CH7JLKT6MW',
+        },
+        body: {
+          id: values.value.attendanceTypeId,
+        },
+      })
+      type.value = response.data[0].code
+      showLeaveQuota.value = response.data[0].showLeaveQuota
+      // quota.value = response.data[0].leaveQuota
+      maxDuration.value = response.data[0].maxDurationDays
+    }
+  },
+  { immediate: true },
+)
+
+const isLeaveStaff = ref(false)
+
+watch(
+  () => [values.value.startedAt, values.value.endedAt],
+  async (newType) => {
+    if (values.value.startedAt && values.value.endedAt) {
+      const leaveStaff = await ofetch(`${officeAppUrl.value}/getLeaveQuota`, {
+        method: 'POST',
+        headers: {
+          'X-Neon-Key': 'CH7JLKT6MW',
+        },
+        body: {
+          id: values.value.attendanceTypeId,
+          staffId: staffId,
+          startedAt: values.value.startedAt,
+          endedAt: values.value.endedAt,
+        },
+      })
+
+      if (leaveStaff.code !== 200) {
+        quota.value = 0
+        isLeaveStaff.value = false
+        return
+      }
+      // console.log('leaveStaff', leaveStaff)
+
+      quota.value = leaveStaff.data.quota
+      maxDuration.value = leaveStaff.data.quota
+      leaveStaffId.value = leaveStaff.data.leaveStaff.id
+
+      if (leaveStaff?.code === 200 && leaveStaff?.data?.quota > 0) {
+        isLeaveStaff.value = true
+      } else {
+        isLeaveStaff.value = false
+      }
+    }
+  },
+)
 
 async function generate() {
   await generateAttendance()
@@ -187,6 +293,24 @@ async function generate() {
   await syncOne()
 }
 
+const showDurationAlert = ref(false)
+async function saveData() {
+  const result = await checkDurationLeave()
+  // console.log('showLeaveQuota', showLeaveQuota.value)
+
+  if (
+    (result === true && isLeaveStaff.value === true) ||
+    showLeaveQuota.value === false
+  ) {
+    showDurationAlert.value = false
+    console.log('save')
+    await saveOne()
+  } else {
+    showDurationAlert.value = true
+    console.log('error')
+  }
+}
+
 //copy link for catatan
 const copy = ref({
   copyDelegate: `${window.location.origin}/penugasan/staff-attendances/?peek=neu:personalia:attendance:${id.value}:single-staff-view:s`,
@@ -204,8 +328,15 @@ const copy = ref({
           :is-changed="isChanged"
           use-unsaved
           @cancel="discardChanges"
-          @submit="saveOne"
+          @submit="saveData"
         >
+          <NeonStat
+            v-if="showLeaveQuota"
+            class="w-36 mb-2"
+            label="Cuti Pribadi"
+            icon="person-to-door"
+            >{{ quota }} hari</NeonStat
+          >
           <NeonAlert
             v-if="conflictAtt == true"
             icon="circle-info"
@@ -213,6 +344,13 @@ const copy = ref({
             description="Untuk hari ini kamu sudah ada absensi yang diajukan, silahkan cari absensi yang telah diajukan dan ajukan kembali untuk pergantiannya."
             color="#F7CF6D"
           />
+          <NeonAlert
+            v-if="showDurationAlert == true"
+            icon="circle-info"
+            label="Durasi Melebihi Batas!."
+            description="Durasi cuti yang diajukan melebihi batas maksimum yang telah ditentukan. Mohon sesuaikan kembali permohonan cuti sesuai dengan ketentuan yang berlaku"
+            color="#F7CF6D"
+          />
           <div v-if="!isNew && conflictAtt == false" class="flex flex-wrap">
             <div class="mt-2">
               <NeonField>
@@ -275,7 +413,6 @@ const copy = ref({
             "
             @update:model-value="onStartedAtUpdate"
           />
-
           <OfficeRelation
             v-model="values"
             :field="fields.type"
@@ -284,6 +421,13 @@ const copy = ref({
               values.status == 'approved' ||
               values.status == 'rejected'
             "
+            :query="
+              Query.define({
+                filter: {
+                  showAttendanceType: true,
+                },
+              })
+            "
           />
 
           <OfficeRelation
@@ -301,10 +445,10 @@ const copy = ref({
               <NeonFields class="flex-1"> -->
           <OfficeRelation
             v-if="
-              values.type?.code == 'leave' ||
-              values.type?.code == 'dayOff' ||
-              values.type?.code == 'sick' ||
-              values.type?.code == 'permission'
+              type == 'cuti' ||
+              type == 'dayOff' ||
+              type == 'sakit' ||
+              type == 'izin'
             "
             v-model="values"
             :field="fields.delegateStaffs"
@@ -314,15 +458,16 @@ const copy = ref({
               values.status == 'rejected'
             "
           />
+          <NeonField v-model="values.image" v-bind="fields.image" />
           <!-- </NeonFields>
             </div> -->
           <!-- <div class="ml-2 flex items-end pb-1">
               <NeonCopy
                 v-if="
-                  values.type?.code == 'leave' ||
-                  values.type?.code == 'dayOff' ||
-                  values.type?.code == 'sick' ||
-                  values.type?.code == 'permission' ||
+                  values.type == 'leave' ||
+                  values.type == 'dayOff' ||
+                  values.type == 'sick' ||
+                  values.type == 'permission' ||
                   values.isNotes == true
                 "
                 :size="'sm'"
@@ -332,10 +477,10 @@ const copy = ref({
           </div> -->
           <!-- <NeonField
             v-if="
-              values.type?.code == 'leave' ||
-              values.type?.code == 'dayOff' ||
-              values.type?.code == 'sick' ||
-              values.type?.code == 'permission'
+              values.type == 'leave' ||
+              values.type == 'dayOff' ||
+              values.type == 'sick' ||
+              values.type == 'permission'
             "
             v-model="values.isNotes"
             v-bind="fields.isNotes"
@@ -348,10 +493,10 @@ const copy = ref({
           <!-- <template #input>
               <NeonCheck
                 v-if="
-                  values.type?.code == 'leave' ||
-                  values.type?.code == 'dayOff' ||
-                  values.type?.code == 'sick' ||
-                  values.type?.code == 'permission'
+                  values.type == 'leave' ||
+                  values.type == 'dayOff' ||
+                  values.type == 'sick' ||
+                  values.type == 'permission'
                 "
                 v-model="values.isNotes"
                 label="Catatan"
@@ -360,7 +505,6 @@ const copy = ref({
               />
             </template> -->
           <!-- </NeonField> -->
-
           <NeonField
             v-if="isNew || isReady"
             v-model="values.notes"
@@ -368,35 +512,33 @@ const copy = ref({
           />
           <NeonField
             v-if="
-              values.type?.code == 'leave' ||
-              values.type?.code == 'dayOff' ||
-              values.type?.code == 'sick' ||
-              values.type?.code == 'permission'
+              type == 'cuti' ||
+              type == 'dayOff' ||
+              type == 'sakit' ||
+              type == 'izin'
             "
             v-model="values.delegateNotes"
             v-bind="fields.delegateNotes"
           />
 
-          <NeonDivider v-if="values.type" is-dashed label="Keterangan" />
+          <NeonDivider
+            v-if="values.attendanceTypeId"
+            is-dashed
+            label="Keterangan"
+          />
 
           <NeonField
             v-if="
-              values.type?.code == 'dayOff' ||
-              values.type?.code == 'sick' ||
-              values.type?.code == 'permission' ||
-              values.type?.code == 'leave'
+              type == 'dayOff' ||
+              type == 'sakit' ||
+              type == 'izin' ||
+              type == 'cuti'
             "
             v-model="values.submittedAt"
             v-bind="fields.submittedAt"
             is-disabled
           />
-          <div
-            v-if="
-              values.type?.code == 'sick' ||
-              values.type?.code == 'leave' ||
-              values.type?.code == 'permission'
-            "
-          >
+          <div v-if="type == 'sakit' || type == 'cuti' || type == 'izin'">
             <NeonDivider
               is-dashed
               label="Tanggal ini digunakan hanya untuk Generate Absensi"
@@ -435,7 +577,7 @@ const copy = ref({
 
           <!-- EARLY GO HOME -->
           <div
-            v-if="values.type?.code == 'homeEarly'"
+            v-if="type == 'pulangLebihAwal'"
             class="grid gap-2 sm:grid-cols-2"
           >
             <NeonField
@@ -493,7 +635,7 @@ const copy = ref({
 
           <!-- COME TOO LATE -->
           <div
-            v-if="values.type?.code == 'comeLate'"
+            v-if="type == 'datangTerlambat'"
             class="grid gap-2 sm:grid-cols-2"
           >
             <NeonField
@@ -550,10 +692,7 @@ const copy = ref({
           </div>
 
           <!-- TIMEOUT -->
-          <div
-            v-if="values.type?.code == 'timeout'"
-            class="grid gap-2 sm:grid-cols-2"
-          >
+          <div v-if="type == 'timeout'" class="grid gap-2 sm:grid-cols-2">
             <NeonField
               v-model="values.startedAt"
               v-bind="{