@neutron.co.id/operasional-interfaces 1.14.0 → 1.14.2

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

@@ -0,0 +1,540 @@
+<script setup lang="ts">
+import { GraphUtil, NeonSingle, useSingle } from '@neon.id/context'
+import { NeonField, NeonForm } from '@neon.id/form'
+import {
+  NeonAlert,
+  NeonButton,
+  NeonDivider,
+  useToastStore,
+} 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 { PromiseUtil } from '@neon.id/utils/promise'
+import {
+  AttendanceModel,
+  type TPersonaliaAttendanceModel,
+  type Schema,
+} from '@neutron.co.id/personalia-models'
+import { DateUtil } from '../../../common/utils/util.date'
+import { NeonTime, useOperasional } from '../../../common'
+import { useClientHandle } from '@urql/vue'
+
+const {
+  fields,
+  id,
+  initialValues,
+  values,
+  isLoading,
+  isChanged,
+  isReady,
+  isMain,
+  isNew,
+  saveOne,
+  discardChanges,
+  syncOne,
+  executeOne,
+} = useSingle<Schema.Attendance, TPersonaliaAttendanceModel>()
+
+const key = ref(0)
+const responseState = ref()
+const toast = useToastStore()
+
+const diff = computed(() => {
+  return DateUtil.day(values.value.endedAt).diff(values.value.startedAt)
+})
+
+const duration = computed(() => {
+  if (isNaN(diff.value)) return '-'
+  const duration = DateUtil.day.duration(diff.value)
+  return duration.format('HH [jam] mm [menit]')
+})
+
+function setDefaultSchedule() {
+  const today = DateUtil.day()
+  const startedAt = today.second(0).millisecond(0)
+  const endedAt = startedAt.add(90, 'minute')
+
+  key.value++
+}
+
+function onStartedAtUpdate(date: any) {
+  if (!date) return
+
+  const currentEndedendedAt = DateUtil.day(values.value.endedAt)
+  let startedAt = DateUtil.day(date)
+  let endedAt = DateUtil.day(date)
+
+  startedAt = startedAt.second(0).millisecond(0)
+  endedAt = endedAt
+    .hour(currentEndedendedAt.hour())
+    .minute(currentEndedendedAt.minute())
+    .second(0)
+    .millisecond(0)
+
+  values.value.startedAt = startedAt.toISOString()
+  values.value.endedAt = endedAt.toISOString()
+  conflictAtt.value = false
+}
+
+// OTHER
+
+const { staff } = useOperasional()
+const staffId = staff.value?.id || ''
+
+watch(isNew, setDefaultValues, { immediate: true })
+
+async function setDefaultValues() {
+  if (!isNew.value) return
+  await PromiseUtil.wait(500)
+
+  const defaultValues = {
+    submitStaffId: staffId,
+    submitStaff: staff.value,
+  } satisfies Schema.Attendance
+
+  values.value.submitStaffId = defaultValues.submitStaffId
+  values.value.submitStaff = defaultValues.submitStaff
+}
+
+const submitAbsensi = async () => {
+  await executeOne('submitAttendance', { attendanceId: id.value })
+  await syncOne()
+}
+
+const changeAbsensi = async () => {
+  await executeOne('changeAttendance', { attendanceId: id.value })
+  await syncOne()
+}
+
+const conflictAtt = ref(false)
+
+async function conflictAttendance() {
+  const resp = await executeOne('checkAttendance', {
+    staffId: staff.value?.id,
+    startedAt: values.value.startedAt,
+  })
+  const countAtt = resp.data.executeAttendance.output.countAttendance
+  if (values.value.startedAt) {
+    if (countAtt > 1) {
+      conflictAtt.value = true
+    } else {
+      await submitAbsensi()
+      await syncOne()
+      conflictAtt.value = false
+    }
+  } else {
+    conflictAtt.value = true
+  }
+}
+
+const staffOptions = computed(() => {
+  return {
+    filter: [
+      {
+        handle: '_id',
+        operator: 'nin',
+        value: staff.value?.id,
+      },
+    ],
+  }
+})
+
+//Generate Attendance
+const { client } = useClientHandle()
+
+function getNotified() {
+  if (responseState.value === 'attendanceGenerated') {
+    toast.push({
+      id: 'generate:attendance',
+      content: 'Successfully generated attendance.',
+      color: 'success',
+    })
+  }
+}
+
+async function generateAttendance() {
+  const responseGenerateAttendance = await client
+    .mutation(GraphUtil.executeOne(AttendanceModel, {}), {
+      action: 'generateAttendance',
+      input: {
+        attendanceId: values.value.id,
+        // Attendance input.
+        status: values.value.status,
+        submitStaffId: values.value.submitStaffId,
+        type: values.value.type,
+        decideStaffId: values.value.decideStaffId,
+        notes: values.value.notes,
+        submittedAt: values.value.submittedAt,
+        startedAt: values.value.startedAt,
+        endedAt: values.value.endedAt,
+      },
+    })
+    .toPromise()
+
+  const wrapper = responseGenerateAttendance.data?.executeAttendance
+  responseState.value = wrapper?.info?.state
+}
+
+console.log('decideStaffId', values.value.decideStaffId)
+
+async function generate() {
+  await generateAttendance()
+  await getNotified()
+  await syncOne()
+}
+</script>
+
+<template>
+  <NeonSingle class="neu-attendance-single">
+    <OfficeTabs :use-url="isMain">
+      <OfficeTab handle="info" icon="circle-info" title="Info">
+        <NeonForm
+          handle="info"
+          :initial-values="initialValues"
+          :is-loading="isLoading"
+          :is-changed="isChanged"
+          use-unsaved
+          @cancel="discardChanges"
+          @submit="saveOne"
+        >
+          <NeonAlert
+            v-if="conflictAtt == true"
+            icon="circle-info"
+            label="Sudah ada Absensi!. "
+            description="Untuk hari ini kamu sudah ada absensi yang diajukan, silahkan cari absensi yang telah diajukan dan ajukan kembali untuk pergantiannya."
+            color="#F7CF6D"
+          />
+          <div v-if="!isNew && conflictAtt == false" class="flex flex-wrap">
+            <div class="mt-2">
+              <NeonField>
+                <template #input>
+                  <NeonButton
+                    size="md"
+                    color="success"
+                    icon-left="up-from-line"
+                    :is-disabled="
+                      values.status == 'notApproved' ||
+                      values.status == 'approved' ||
+                      values.status == 'rejected'
+                    "
+                    @click="conflictAttendance"
+                    >Ajukan</NeonButton
+                  >
+                </template>
+              </NeonField>
+            </div>
+            &nbsp;&nbsp;
+            <div class="mt-2">
+              <NeonField>
+                <template #input>
+                  <NeonButton
+                    size="md"
+                    color="warning"
+                    icon-left="arrows-retweet"
+                    :is-disabled="
+                      values.status == 'notApproved' || values.status == 'draft'
+                    "
+                    @click="changeAbsensi"
+                    >Ganti</NeonButton
+                  >
+                </template>
+              </NeonField>
+            </div>
+          </div>
+          <OfficeRelation
+            v-model="values"
+            :field="fields.submitStaff"
+            is-disabled
+          />
+
+          <NeonField
+            :key="key"
+            :model-value="values.startedAt"
+            v-bind="{
+              handle: 'startedAt',
+              name: 'Tanggal',
+              type: 'date',
+              input: 'date2',
+              options: {
+                note: 'Tanggal absensi.',
+              },
+            }"
+            :is-disabled="
+              values.status == 'notApproved' ||
+              values.status == 'approved' ||
+              values.status == 'rejected'
+            "
+            @update:model-value="onStartedAtUpdate"
+          />
+          <NeonDivider
+            is-dashed
+            label="Tanggal ini digunakan hanya untuk Generate Absensi"
+            class="divider"
+          />
+          <NeonFields md="grid-cols-3">
+            <NeonField
+              v-model="values.startedAt"
+              v-bind="fields.startedAt"
+              :is-disabled="
+                values.status == 'approved' || values.isGenerate === true
+              "
+            />
+            <NeonField
+              v-model="values.endedAt"
+              v-bind="fields.endedAt"
+              :is-disabled="
+                values.status == 'approved' || values.isGenerate === true
+              "
+            />
+            <NeonButton
+              icon-left="bolt"
+              label="Generate"
+              color="success"
+              class="mt-12"
+              size="xs"
+              :is-loading="isLoading"
+              :is-disabled="
+                values.status !== 'approved' || values.isGenerate === true
+              "
+              is-rounded
+              @click="generate"
+            />
+          </NeonFields>
+
+          <NeonField
+            v-model="values.type"
+            v-bind="fields.type"
+            :is-disabled="
+              values.status == 'notApproved' ||
+              values.status == 'approved' ||
+              values.status == 'rejected'
+            "
+          />
+
+          <OfficeRelation
+            v-model="values"
+            :field="fields.decideStaff"
+            :query="Query.define(staffOptions)"
+            :is-disabled="
+              values.status == 'notApproved' ||
+              values.status == 'approved' ||
+              values.status == 'rejected'
+            "
+          />
+
+          <OfficeRelation
+            v-if="values.type == 'leave'"
+            v-model="values"
+            :field="fields.delegateStaffs"
+            :is-disabled="
+              values.status == 'notApproved' ||
+              values.status == 'approved' ||
+              values.status == 'rejected'
+            "
+          />
+
+          <NeonField
+            v-if="isNew || isReady"
+            v-model="values.notes"
+            v-bind="fields.notes"
+          />
+
+          <NeonDivider v-if="values.type" is-dashed label="Keterangan" />
+
+          <NeonField
+            v-if="
+              values.type == 'dayOff' ||
+              values.type == 'sick' ||
+              values.type == 'permission' ||
+              values.type == 'leave'
+            "
+            v-model="values.submittedAt"
+            v-bind="fields.submittedAt"
+            is-disabled
+          />
+
+          <!-- EARLY GO HOME -->
+          <div
+            v-if="values.type == 'homeEarly'"
+            class="grid gap-2 sm:grid-cols-2"
+          >
+            <NeonField
+              v-model="values.startedAt"
+              v-bind="{
+                handle: 'startedAt',
+                name: 'Jam Pulang Kerja',
+                options: {
+                  note: 'Jam pulang kerja.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.startedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                  :is-disabled="
+                    values.status == 'notApproved' ||
+                    values.status == 'approved' ||
+                    values.status == 'rejected'
+                  "
+                />
+              </template>
+            </NeonField>
+
+            <NeonField
+              v-model="values.endedAt"
+              v-bind="{
+                handle: 'endedAt',
+                name: 'Jam Pulang Lebih Awal',
+                options: {
+                  note: 'Jam pulang lebih awal.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.endedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                  :is-disabled="
+                    values.status == 'notApproved' ||
+                    values.status == 'approved' ||
+                    values.status == 'rejected'
+                  "
+                />
+
+                <div class="text-right text-fg-subdued text-sm">
+                  {{ duration }}
+                </div>
+              </template>
+            </NeonField>
+          </div>
+
+          <!-- COME TOO LATE -->
+          <div
+            v-if="values.type == 'comeLate'"
+            class="grid gap-2 sm:grid-cols-2"
+          >
+            <NeonField
+              v-model="values.startedAt"
+              v-bind="{
+                handle: 'startedAt',
+                name: 'Jam Datang',
+                options: {
+                  note: 'Jam Datang kerja.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.startedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                  :is-disabled="
+                    values.status == 'notApproved' ||
+                    values.status == 'approved' ||
+                    values.status == 'rejected'
+                  "
+                />
+              </template>
+            </NeonField>
+
+            <NeonField
+              v-model="values.endedAt"
+              v-bind="{
+                handle: 'endedAt',
+                name: 'Jam Datang Terlambat',
+                options: {
+                  note: 'Jam datang terlambat.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.endedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                  :is-disabled="
+                    values.status == 'notApproved' ||
+                    values.status == 'approved' ||
+                    values.status == 'rejected'
+                  "
+                />
+
+                <div class="text-right text-fg-subdued text-sm">
+                  {{ duration }}
+                </div>
+              </template>
+            </NeonField>
+          </div>
+
+          <!-- TIMEOUT -->
+          <div
+            v-if="values.type == 'timeout'"
+            class="grid gap-2 sm:grid-cols-2"
+          >
+            <NeonField
+              v-model="values.startedAt"
+              v-bind="{
+                handle: 'startedAt',
+                name: 'Mulai',
+                options: {
+                  note: 'Jam mulai.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.startedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                  :is-disabled="
+                    values.status == 'notApproved' ||
+                    values.status == 'approved' ||
+                    values.status == 'rejected'
+                  "
+                />
+              </template>
+            </NeonField>
+
+            <NeonField
+              v-model="values.endedAt"
+              v-bind="{
+                handle: 'endedAt',
+                name: 'Selesai',
+                options: {
+                  note: 'Jam selesai.',
+                },
+              }"
+            >
+              <template #input>
+                <NeonTime
+                  v-model="values.endedAt"
+                  :is-loading="isLoading"
+                  class="mt-2"
+                  :is-disabled="
+                    values.status == 'notApproved' ||
+                    values.status == 'approved' ||
+                    values.status == 'rejected'
+                  "
+                />
+
+                <div class="text-right text-fg-subdued text-sm">
+                  {{ duration }}
+                </div>
+              </template>
+            </NeonField>
+          </div>
+        </NeonForm>
+      </OfficeTab>
+    </OfficeTabs>
+  </NeonSingle>
+</template>
+
+<style scoped>
+.neu-attendance-single {
+  @apply block;
+}
+</style>