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

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>

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

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+// import mitt, { Emitter } from 'mitt'
+import { useIntervalFn, useThrottleFn } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import Scanner from 'qr-scanner'
+import { computed, onBeforeUnmount, reactive, ref, watchEffect } from 'vue'
+import { NeonModal, NeonSheet, NeonButton } from '@neon.id/interfaces'
+import { bus, useAttendanceStore } from '../../../common'
+
+type DeviceId = string
+
+interface Camera {
+  id: DeviceId
+  label: string
+}
+
+const emit = defineEmits(['start', 'stop', 'scanned', 'close'])
+
+const attendanceStore = useAttendanceStore()
+const { isScanning } = storeToRefs(attendanceStore)
+
+const frameEl = ref()
+const videoEl = ref()
+const scanner = ref<Scanner>()
+
+// const { height, width } = useElementSize(frameEl)
+
+const state = reactive({
+  isScanning: false,
+  isInvalid: false,
+  result: '',
+  currentIndex: 0,
+})
+
+const cameras = ref<Camera[]>([])
+const currentCamera = computed(
+  () => cameras.value[state.currentIndex]?.label || '',
+)
+const canSwitch = computed(() => cameras.value.length > 1)
+
+const { resume, pause } = useIntervalFn(
+  async () => {
+    cameras.value = await Scanner.listCameras()
+    console.log(cameras.value)
+  },
+  1000,
+  { immediate: false },
+)
+
+const throttledEmit = useThrottleFn(emitResult, 2000)
+
+watchEffect(() => {
+  if (isScanning.value && videoEl.value) {
+    scanner.value = new Scanner(
+      videoEl.value,
+      (result) => {
+        if (!result.data) return
+
+        throttledEmit(result.data)
+        stopScan()
+      },
+      {
+        preferredCamera: 'environment',
+        highlightScanRegion: true,
+        highlightCodeOutline: true,
+      },
+    )
+
+    resume()
+    startScan()
+  }
+})
+
+watchEffect(() => {
+  if (!isScanning.value) {
+    stopScan()
+    destroy()
+  }
+})
+
+bus.on('attendance:scan', (isStart) => {
+  if (isStart) startScan()
+  else stopScan()
+})
+
+onBeforeUnmount(() => {
+  bus.off('attendance:scan')
+  destroy()
+})
+
+function emitResult(data: string) {
+  state.result = data
+  emit('scanned', data)
+}
+
+function switchCamera() {
+  if (cameras.value.length - 1 === state.currentIndex) {
+    state.currentIndex = 0
+  } else {
+    state.currentIndex++
+  }
+
+  const deviceId = cameras.value[state.currentIndex]?.id
+  scanner.value?.setCamera(deviceId)
+}
+
+function startScan() {
+  scanner.value?.start()
+  state.isScanning = true
+  emit('start')
+}
+
+function stopScan() {
+  scanner.value?.stop()
+  state.isScanning = false
+  pause()
+  emit('stop')
+}
+
+function destroy() {
+  scanner.value?.destroy()
+  scanner.value = undefined
+}
+</script>
+
+<template>
+  <NeonModal v-model:is-active="isScanning" size="xl" @close="$emit('close')">
+    <NeonSheet icon="barcode-read" title="Scan QR Code" @close="$emit('close')">
+      <div
+        ref="frameEl"
+        class="video-frame"
+        :class="[
+          {
+            'is-scanning': state.isScanning,
+            'is-invalid': state.isInvalid,
+          },
+        ]"
+      >
+        <video
+          ref="videoEl"
+          :style="{
+            height: `auto`,
+            width: `auto`,
+          }"
+        />
+
+        <div class="inner" @click="switchCamera">
+          <div class="invalid-message">Invalid Code!</div>
+
+          <div></div>
+
+          <div class="button-switch" @click.stop="switchCamera">
+            <div class="mr-2 text-sm">{{ currentCamera }}</div>
+            <NeonButton
+              icon-left="arrows-repeat"
+              is-squared
+              size="sm"
+              :is-disabled="!canSwitch"
+            />
+          </div>
+        </div>
+      </div>
+    </NeonSheet>
+  </NeonModal>
+</template>
+
+<style scoped>
+.video-frame {
+  @apply relative h-full overflow-hidden;
+  @apply flex items-center justify-center;
+  height: var(--neon-mobile-modal-wrapper-height);
+
+  video {
+    @apply relative object-cover;
+    /* @apply relative h-full;
+    @apply object-cover;
+    min-height: 300px; */
+  }
+
+  .inner {
+    @apply absolute inset-0 flex items-start justify-between p-2;
+  }
+
+  &.is-scanning {
+    /* @apply rounded-lg border border-solid; */
+
+    video {
+      min-height: auto;
+    }
+  }
+
+  &.is-invalid {
+    /* @apply border-red-200 bg-red-50; */
+
+    .invalid-message {
+      @apply block;
+    }
+  }
+}
+
+.invalid-message {
+  @apply hidden absolute top-0 left-0 p-3 text-red-500;
+}
+
+.result {
+  @apply p-4 mt-4;
+  @apply rounded-lg border-2;
+}
+
+.button-switch {
+  @apply flex items-center;
+  @apply text-white;
+  text-shadow:
+    -1px 0 1px black,
+    0 1px 1px black,
+    1px 0 1px black,
+    0 -1px 1px black;
+}
+</style>

package/build/@office/models/personalia/checkIn/CheckInSingle/CheckInSingle.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta } from '@storybook/vue3';
+import CheckInSingle from './CheckInSingle.vue';
+declare const _default: Meta<typeof CheckInSingle>;
+export default _default;
+export declare const New: import("@storybook/csf").StoryAnnotations<import("@storybook/vue3").VueRenderer, {}, {}>;
+export declare const Existing: import("@storybook/csf").StoryAnnotations<import("@storybook/vue3").VueRenderer, {}, {}>;
+export declare const Content: import("@storybook/csf").StoryAnnotations<import("@storybook/vue3").VueRenderer, {}, {}>;
+export declare const $DefaultView: any;