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

package/build/@office/models/personalia/attendance/AttendanceDelegate.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,
@@ -21,6 +21,7 @@ import { DateUtil } from '../../../common/utils/util.date'
 import { NeonTime, useOperasional } from '../../../common'
 import { AttendanceNoteTab } from './sections'
 import { useClientHandle } from '@urql/vue'
+import { ofetch } from 'ofetch'
 
 const {
   fields,
@@ -164,7 +165,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,
@@ -172,6 +173,7 @@ async function generateAttendance() {
         submittedAt: values.value.submittedAt,
         startedAt: values.value.startedAt,
         endedAt: values.value.endedAt,
+        leaveQuota: quotaTaken.value,
       },
     })
     .toPromise()
@@ -185,6 +187,86 @@ async function generate() {
   await getNotified()
   await syncOne()
 }
+
+const appStore = useAppStore()
+const officeAppUrl = computed(() => {
+  if (appStore.appEnv === 'dev')
+    return 'https://dev.api.office.operasional.neutron.neon.id'
+
+  if (appStore.appEnv === 'prod')
+    return 'https://api.office.operasional.neutron.neon.id'
+
+  return 'http://127.0.0.1:7020'
+})
+
+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)
+
+function checkDurationLeave() {
+  console.log('cek', values.value)
+  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))
+  quotaTaken.value = days
+  console.log('days', days, maxDuration.value)
+
+  if (days > maxDuration.value) return false
+
+  return true
+}
+
+watch(
+  () => values.value,
+  async (newType) => {
+    console.log('new', newType)
+    console.log('new val', values.value)
+    console.log('type', values.value.type)
+    const response = await ofetch(`${officeAppUrl.value}/getAttendanceType`, {
+      method: 'POST',
+      headers: {
+        'X-Neon-Key': 'CH7JLKT6MW',
+      },
+      body: {
+        id: values.value.attendanceTypeId,
+      },
+    })
+    console.log(response)
+    type.value = response.data[0].code
+    showLeaveQuota.value = response.data[0].showLeaveQuota
+    quota.value = response.data[0].leaveQuota
+    maxDuration.value = response.data[0].maxDurationDays
+  },
+)
+
+const isLeaveStaff = ref(false)
+
+const showDurationAlert = ref(false)
+async function saveData() {
+  const result = await checkDurationLeave()
+
+  console.log('dur', result)
+
+  if (result == true && isLeaveStaff.value == true) {
+    showDurationAlert.value = false
+    console.log('save')
+    await saveOne()
+  } else {
+    showDurationAlert.value = true
+    console.log('error')
+  }
+}
 </script>
 
 <template>
@@ -198,14 +280,21 @@ async function generate() {
           :is-changed="isChanged"
           use-unsaved
           @cancel="discardChanges"
-          @submit="saveOne"
+          @submit="saveData"
         >
+          <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"
+          />
           <OfficeRelation
             v-if="
-              values.type?.code == 'leave' ||
+              values.type?.code == 'cuti' ||
               values.type?.code == 'dayOff' ||
               values.type?.code == 'sick' ||
-              values.type?.code == 'permission'
+              values.type?.code == 'izin'
             "
             v-model="values"
             :field="fields.delegateStaffs"
@@ -251,10 +340,10 @@ async function generate() {
           />
           <!-- <OfficeRelation
             v-if="
-              values.type?.code == 'leave' ||
-              values.type?.code == 'sick' ||
-              values.type?.code == 'dayOff' ||
-              values.type?.code == 'permission'
+              values.type == 'leave' ||
+              values.type == 'sick' ||
+              values.type == 'dayOff' ||
+              values.type == 'permission'
             "
             v-model="values"
             :field="fields.monitoringStaffs"
@@ -264,10 +353,10 @@ async function generate() {
           /> -->
           <NeonField
             v-if="
-              values.type?.code == 'leave' ||
-              values.type?.code == 'dayOff' ||
-              values.type?.code == 'sick' ||
-              values.type?.code == 'permission'
+              type == 'cuti' ||
+              type == 'dayOff' ||
+              type == 'sick' ||
+              type == 'izin'
             "
             v-model="values.delegateNotes"
             v-bind="fields.delegateNotes"

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NeonSingle, useSingle } from '@neon.id/context'
+import { NeonSingle, useSingle, useAppStore } from '@neon.id/context'
 import { NeonField, NeonForm } from '@neon.id/form'
 import { NeonButton, NeonDivider } from '@neon.id/interfaces'
 import { OfficeRelation, OfficeTab, OfficeTabs } from '@neon.id/office'
@@ -11,6 +11,7 @@ import type {
 } from '@neutron.co.id/personalia-models'
 import { DateUtil } from '../../..//common/utils/util.date'
 import { useOperasional, NeonTime } from '../../../common'
+import { ofetch } from 'ofetch'
 
 const {
   fields,
@@ -108,6 +109,108 @@ const rejectedAbsensi = async () => {
   await executeOne('rejectedAttendance', { attendanceId: id.value })
   await syncOne()
 }
+
+const appStore = useAppStore()
+const officeAppUrl = computed(() => {
+  if (appStore.appEnv === 'dev')
+    return 'https://dev.api.office.operasional.neutron.neon.id'
+
+  if (appStore.appEnv === 'prod')
+    return 'https://api.office.operasional.neutron.neon.id'
+
+  return 'http://127.0.0.1:7020'
+})
+
+const type = ref('')
+const showLeaveQuota = ref(true)
+const quota = ref(0)
+const maxDuration = ref(0)
+const quotaTaken = ref(0)
+
+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) => {
+    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
+  },
+)
+
+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: initialValues.value.submitStaffId,
+          startedAt: values.value.startedAt,
+          endedAt: values.value.endedAt,
+        },
+      })
+
+      if (leaveStaff.code === 200 && leaveStaff.data.quota > 0) {
+        isLeaveStaff.value = true
+        quota.value = leaveStaff.data.quota
+        maxDuration.value = leaveStaff.data.quota
+      } else {
+        isLeaveStaff.value = false
+      }
+    }
+  },
+)
+
+const showDurationAlert = ref(false)
+async function saveData() {
+  const result = await checkDurationLeave()
+
+  if (
+    (result === true && isLeaveStaff.value === true) ||
+    (type.value !== 'cuti' && type.value !== 'izin' && type.value !== 'sakit')
+  ) {
+    showDurationAlert.value = false
+    console.log('save')
+    await saveOne()
+  } else {
+    showDurationAlert.value = true
+    console.log('error')
+  }
+}
 </script>
 
 <template>
@@ -121,8 +224,22 @@ const rejectedAbsensi = async () => {
           :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="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 class="flex flex-wrap">
             <div class="mt-2">
               <NeonField>
@@ -197,13 +314,14 @@ const rejectedAbsensi = async () => {
           />
 
           <OfficeRelation
-            v-if="values.type?.code === 'leave'"
+            v-if="type === 'cuti'"
             v-model="values"
             :field="fields.delegateStaffs"
             :is-disabled="
               values.status == 'approved' || values.status == 'rejected'
             "
           />
+          <NeonField v-model="values.image" v-bind="fields.image" />
 
           <NeonField
             v-if="isNew || isReady"
@@ -211,14 +329,18 @@ const rejectedAbsensi = async () => {
             v-bind="fields.notes"
           />
 
-          <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 == 'cuti' ||
+              type == 'dayOff' ||
+              type == 'sick' ||
+              type == 'izin'
             "
             v-model="values.submittedAt"
             v-bind="fields.submittedAt"
@@ -227,7 +349,7 @@ const rejectedAbsensi = async () => {
 
           <!-- EARLY GO HOME -->
           <div
-            v-if="values.type?.code == 'homeEarly'"
+            v-if="type == 'pulangLebihAwal'"
             class="grid gap-2 sm:grid-cols-2"
           >
             <NeonField
@@ -275,7 +397,7 @@ const rejectedAbsensi = async () => {
 
           <!-- COME TOO LATE -->
           <div
-            v-if="values.type?.code == 'comeLate'"
+            v-if="type == 'datangTerlambat'"
             class="grid gap-2 sm:grid-cols-2"
           >
             <NeonField
@@ -322,10 +444,7 @@ const rejectedAbsensi = async () => {
           </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="{

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

@@ -30,6 +30,8 @@ const diff = computed(() => {
   return DateUtil.day(values.value.endedAt).diff(values.value.startedAt)
 })
 
+console.log('single', values.value)
+
 const duration = computed(() => {
   if (isNaN(diff.value)) return '-'
   const duration = DateUtil.day.duration(diff.value)
@@ -91,7 +93,7 @@ function onStartedAtUpdate(date: any) {
             @update:model-value="onStartedAtUpdate"
           />
 
-          <OfficeRelation v-model="values" :field="fields.type" />
+          <OfficeRelation v-model="values.type" :field="fields.type" />
 
           <OfficeRelation v-model="values" :field="fields.decideStaff" />