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

package/build/@office/models/personalia/checkIn/CheckInExternal.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { NeonSingle, useSingle, usePermit } from '@neon.id/context'
+import { NeonField, NeonForm } from '@neon.id/form'
+import { OfficeRelation, OfficeTab, OfficeTabs } from '@neon.id/office'
+import { useRoute } from 'vue-router'
+import { computed, watch } from 'vue'
+import type { Schema } from '@neutron.co.id/personalia-models'
+import { PromiseUtil } from '@neon.id/utils/promise'
+import { useGeolocation } from '@vueuse/core'
+import type { TTempatCheckInModel } from '@neutron.co.id/tempat-models'
+import { useOperasional } from '../../../common'
+
+const {
+  fields,
+  initialValues,
+  values,
+  isLoading,
+  isChanged,
+  isMain,
+  isNew,
+  saveOne,
+  discardChanges,
+} = useSingle<Schema.CheckIn, TTempatCheckInModel>()
+
+const route = useRoute()
+
+const permit = usePermit()
+const { staff } = useOperasional()
+const { coords } = useGeolocation()
+
+watch(isNew, setDefaultValues, { immediate: true })
+
+async function setDefaultValues() {
+  if (!isNew.value) return
+  await PromiseUtil.wait(1000)
+
+  const defaultValues = {
+    staffId: staff.value?.id,
+    staff: { id: staff.value?.id, flag: staff.value?.flag },
+    checkInAt: new Date().toISOString(),
+    type: 'checkpoint',
+    latitude: coords.value.latitude.toString(),
+    longitude: coords.value.longitude.toString(),
+  } satisfies Schema.CheckIn
+
+  values.value = defaultValues
+}
+</script>
+
+<template>
+  <NeonSingle class="neu-checkIn-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"
+        >
+          <OfficeRelation
+            v-if="
+              values.type === 'in' ||
+              values.type === 'out' ||
+              values.type === 'checkin' ||
+              values.type === 'checkout'
+            "
+            v-model="values"
+            :field="fields.building"
+            :is-disabled="
+              values.type === 'checkin' ||
+              values.type === 'checkout' ||
+              values.type === 'out'
+            "
+          />
+
+          <div class="grid gap-4 sm:grid-cols-2">
+            <NeonField
+              v-model="values.type"
+              v-bind="fields.type"
+              :is-disabled="
+                values.type === 'checkin' ||
+                values.type === 'checkout' ||
+                values.type === 'out' ||
+                values.type === 'checkpoint'
+              "
+            />
+            <!-- !permit.isAny(['neu:cabangOperasional', 'neu:admin']) -->
+            <NeonField
+              v-model="values.checkInAt"
+              v-bind="fields.checkInAt"
+              is-disabled
+            />
+          </div>
+
+          <OfficeRelation
+            v-model="values"
+            :field="fields.staff"
+            :is-disabled="
+              values.type === 'in' ||
+              values.type === 'out' ||
+              values.type === 'home' ||
+              values.type === 'checkpoint'
+            "
+          />
+
+          <NeonField v-model="values.note" v-bind="fields.note" />
+        </NeonForm>
+      </OfficeTab>
+    </OfficeTabs>
+  </NeonSingle>
+</template>
+
+<style scoped>
+.neu-checkIn-single {
+  @apply block;
+}
+</style>

package/build/@office/models/personalia/checkIn/CheckInPresenceCollection.vue

@@ -0,0 +1,393 @@
+<script setup lang="ts">
+import { GraphUtil, NeonCollectionContext } from '@neon.id/context'
+import { useEventBus, useGeolocation } from '@vueuse/core'
+import {
+  NeonSlide,
+  NeonSlider,
+  NeonStat,
+  NeonModal,
+  useToastStore,
+} from '@neon.id/interfaces'
+import {
+  OfficeCollectionQuery,
+  OfficeContent,
+  OfficeCollectionOperation,
+  OfficePeekSingle,
+} from '@neon.id/office'
+import { Query } from '@neon.id/query'
+import { models as checkIn } from '@neutron.co.id/tempat-models'
+import { storeToRefs } from 'pinia'
+import { computed, ref } from 'vue'
+import { useClientHandle } from '@urql/vue'
+import { startOfToday, endOfToday } from 'date-fns'
+import { useAuthStore } from '@neon.id/identitas-interfaces'
+import { useRouter } from 'vue-router'
+import { CheckInScanner, CheckInAccess } from '.'
+import { useOperasional, useAttendanceStore } from '../../../common'
+
+defineOptions({
+  name: 'CheckInPresenceCollection',
+})
+const router = useRouter()
+
+const { client } = useClientHandle()
+const authStore = useAuthStore()
+const { userId } = storeToRefs(authStore)
+const { staff } = useOperasional()
+const attendanceStore = useAttendanceStore()
+const { isAsking, isScanning, isScanError, isScanned, type } =
+  storeToRefs(attendanceStore)
+
+const { coords } = useGeolocation()
+
+const toast = useToastStore()
+const id = ref('new')
+const isCheckpoint = ref(false)
+const isOut = ref(false)
+
+function notify(e: any) {
+  const toastId = 'neu:personalia:staff:checkIn'
+  if (isCheckpoint.value === true || isOut.value === true) {
+    if (e.event === 'createOne:ok') {
+      toast.push({
+        id: toastId,
+        icon: 'check',
+        content: 'Presensi berhasil.',
+        color: 'success',
+      })
+
+      isCheckpoint.value = false
+      setTimeout(() => {
+        router.go(0)
+      }, 500)
+    } else if (e.event === 'updateOne:ok') {
+      toast.push({
+        id: toastId,
+        icon: 'check',
+        content: 'Catatan presensi berhasil ditambahkan.',
+        color: 'success',
+      })
+      isOut.value = false
+      setTimeout(() => {
+        router.go(0)
+      }, 500)
+    }
+  }
+}
+
+const query = computed(() => {
+  return Query.define({
+    filter: {
+      handle: '',
+      operator: 'mongo',
+      value: {
+        // staffId: staff.value?.id,
+        // $and: PeriodUtil.getPeriodFilter('checkInAt', new Date().toISOString()),
+        $and: [
+          { staffId: staff.value?.id },
+          { checkInAt: { $gte: startOfToday() } },
+          { checkInAt: { $lte: endOfToday() } },
+        ],
+      },
+    },
+  })
+})
+
+function onPresenceIn(data: any) {
+  isAsking.value = true
+  type.value = 'in'
+}
+
+function onPresenceCheckpoint() {
+  isCheckpoint.value = true
+  id.value = 'new'
+}
+
+function onPresenceOut(data: any) {
+  isAsking.value = true
+  type.value = 'out'
+}
+
+function onPresenceCheckin(data: any) {
+  isAsking.value = true
+  type.value = 'checkin'
+}
+
+function onPresenceCheckout(data: any) {
+  isAsking.value = true
+  type.value = 'checkout'
+}
+
+async function onPresenceHome() {
+  await checkInStaff(
+    null,
+    'home',
+    staff.value?.id,
+    coords.value.latitude.toString(),
+    coords.value.longitude.toString(),
+  )
+  setTimeout(() => {
+    router.go(0)
+  }, 500)
+}
+
+function onModalClose() {
+  isCheckpoint.value = false
+  isOut.value = false
+}
+
+async function onScanned(data: any) {
+  id.value = await checkInStaff(
+    data,
+    type.value,
+    staff.value?.id,
+    coords.value.latitude.toString(),
+    coords.value.longitude.toString(),
+  )
+}
+
+async function checkInStaff(
+  qrKey: any,
+  type: string,
+  staffId: any,
+  latitude: any,
+  longitude: any,
+) {
+  const toastId = 'neu:personalia:staff:checkIn'
+  let checkInId
+  console.log('bangunan...', qrKey)
+
+  try {
+    const resp = await client
+      .mutation(GraphUtil.executeOne(checkIn.CheckInModel, {}), {
+        action: 'presence',
+        input: {
+          userId: userId.value,
+          staffId,
+          key: qrKey,
+          type,
+          branchId: staff.value?.branchId,
+          latitude,
+          longitude,
+        },
+      })
+      .toPromise()
+    const data = resp.data.executeCheckIn.output
+    checkInId = data.checkInId
+
+    if (data) {
+      isScanning.value = false
+      isScanned.value = true
+
+      if (type === 'out') {
+        isOut.value = true
+      }
+
+      if (type === 'checkin') {
+        isOut.value = true
+      }
+
+      if (type === 'checkout') {
+        isOut.value = true
+      }
+
+      toast.push({
+        id: toastId,
+        icon: 'check',
+        content: 'Presensi berhasil.',
+        color: 'success',
+      })
+
+      if (type === 'in') {
+        setTimeout(() => {
+          router.go(0)
+        }, 500)
+      }
+    } else throw new Error('Terjadi kesalahan.')
+  } catch (error) {
+    console.log(error)
+    isScanError.value = true
+
+    toast.push({
+      id: toastId,
+      icon: 'xmark',
+      content:
+        'Presensi gagal, cek kembali qrcode atau koneksi internet kamu dan coba lagi.',
+      color: 'danger',
+    })
+  }
+  return checkInId
+}
+</script>
+
+<template>
+  <div id="view-checkIns">
+    <OfficeContent icon="barcode-read" :title="'Presensi'" is-expanded>
+      <template #header-detail>
+        <div class="summary">
+          <NeonSlider
+            :per-view="2"
+            :gap="16"
+            :offset="16"
+            :peek="24"
+            :breakpoints="{
+              xl: { perView: 5 },
+              lg: { perView: 4 },
+              md: { perView: 4 },
+              sm: { perView: 3 },
+            }"
+          >
+            <NeonSlide>
+              <NeonStat label="Masuk" icon="barcode-read" @click="onPresenceIn"
+                >Masuk</NeonStat
+              >
+            </NeonSlide>
+            <NeonSlide>
+              <NeonStat label="Checkpoint" @click="onPresenceCheckpoint"
+                >Checkpoint</NeonStat
+              >
+            </NeonSlide>
+            <NeonSlide>
+              <NeonStat
+                label="Keluar"
+                icon="barcode-read"
+                @click="onPresenceOut"
+                >Keluar</NeonStat
+              >
+            </NeonSlide>
+            <NeonSlide>
+              <NeonStat label="Pulang" @click="onPresenceHome">Pulang</NeonStat>
+            </NeonSlide>
+            <NeonSlide>
+              <NeonStat
+                label="Checkin"
+                icon="barcode-read"
+                @click="onPresenceCheckin"
+                >Checkin</NeonStat
+              >
+            </NeonSlide>
+            <NeonSlide>
+              <NeonStat
+                label="Checkout"
+                icon="barcode-read"
+                @click="onPresenceCheckout"
+                >Checkout</NeonStat
+              >
+            </NeonSlide>
+          </NeonSlider>
+          <OfficePeekSingle
+            v-if="isOut"
+            id="id"
+            key="id"
+            definition="neu:tempat:checkIn"
+            is-related
+            mode="modal"
+            :overrides="{
+              onEvent: notify,
+            }"
+            @close="onModalClose"
+          >
+            <CheckInSingleExternalView
+              :id="id"
+              :is-new="!id"
+              :is-main="false"
+              :overrides="{
+                onEvent: notify,
+              }"
+              @close="onModalClose"
+            />
+          </OfficePeekSingle>
+          <OfficePeekSingle
+            v-if="isCheckpoint"
+            :id="id"
+            :key="id"
+            definition="neu:tempat:checkIn"
+            is-related
+            mode="modal"
+            sheet="single-external-view"
+            :overrides="{
+              onEvent: notify,
+            }"
+            @close="onModalClose"
+          >
+          </OfficePeekSingle>
+          <CheckInAccess @close="isAsking = false" />
+          <CheckInScanner @scanned="onScanned" @close="isScanning = false" />
+        </div>
+      </template>
+
+      <div class="wrapper">
+        <NeonCollectionContext
+          definition="neu:tempat:checkIn"
+          scope="_checkIns"
+          sheet="single-view"
+          :query="query"
+          :peeks="['modal']"
+          :excludes="['create']"
+          :columns="[
+            'statusGPS',
+            'display',
+            'type',
+            'checkInAt',
+            'staff',
+            'building',
+          ]"
+          :filters="['type', 'building']"
+          :sorts="['checkInAt']"
+          is-ready
+          is-main
+        >
+          <div class="header">
+            <div class="start">
+              <div class="title">➡️ Presensi</div>
+              <div class="description">Daftar presensi hari ini.</div>
+            </div>
+
+            <div class="end">
+              <OfficeCollectionQuery :displays="['table']">
+                <OfficeCollectionOperation is-main />
+              </OfficeCollectionQuery>
+            </div>
+          </div>
+
+          <CheckInCollection />
+        </NeonCollectionContext>
+      </div>
+    </OfficeContent>
+  </div>
+</template>
+
+<style scoped>
+#view-checkIns {
+  @apply h-full;
+
+  .wrapper {
+    @apply h-full;
+  }
+
+  .header {
+    @apply flex items-center justify-between;
+    @apply pt-4 pb-2 px-4;
+
+    .start {
+      @apply leading-tight;
+    }
+
+    .title {
+      @apply font-bold;
+    }
+
+    .description {
+      @apply text-fg-subdued text-sm;
+    }
+  }
+
+  .buttons {
+    @apply flex items-center space-x-1 pr-1;
+  }
+
+  .summary {
+    @apply pb-2;
+  }
+}
+</style>

package/build/@office/models/personalia/checkIn/CheckInScanError.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// import { bus } from '@src/bus'
+import { storeToRefs } from 'pinia'
+import { NeonModal, NeonSheet, NeonInfo, NeonButton } from '@neon.id/interfaces'
+import { useAttendanceStore } from '../../../common'
+
+const attendanceStore = useAttendanceStore()
+const { isScanError } = storeToRefs(attendanceStore)
+
+function ok() {
+  isScanError.value = false
+  // bus.emit('classAttendance:scan', true)
+}
+</script>
+
+<template>
+  <NeonModal>
+    <NeonSheet>
+      <NeonInfo
+        title="Scan kode QR belum berhasil"
+        description="Pastikan koneksi internetmu stabil dan kameramu dalam kondisi baik. Coba lagi yuk!"
+        is-full
+        class="mt-4"
+      />
+
+      <template #footer>
+        <div class="buttons">
+          <NeonButton
+            is-full
+            is-rounded
+            icon-left="arrows-rotate"
+            color="success"
+            @click="ok"
+          >
+            Coba Scan Lagi
+          </NeonButton>
+        </div>
+      </template>
+    </NeonSheet>
+  </NeonModal>
+</template>
+
+<style scoped></style>

package/build/@office/models/personalia/checkIn/CheckInScanSuccess.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { NeonModal, NeonSheet } from '@neon.id/interfaces'
+import { useAttendanceStore } from '../../../common'
+const attendanceStore = useAttendanceStore()
+const { isScanned } = storeToRefs(attendanceStore)
+
+defineEmits<{
+  (e: 'close'): void
+}>()
+</script>
+
+<template>
+  <NeonModal v-model:is-active="isScanned" size="lg" @close="$emit('close')">
+    <NeonSheet title="Presensi" icon="check" @close="$emit('close')">
+      <h3 align="center">Presensi Berhasil!</h3>
+    </NeonSheet>
+  </NeonModal>
+</template>
+
+<style scoped></style>