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

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;

package/build/@office/models/personalia/checkIn/CheckInSingle/CheckInSingle.stories.mjs

@@ -0,0 +1,47 @@
+import { decorateSingle, viewSingle, wrapSingle } from "@mock";
+import { StoryUtil } from "@neon.id/story/helpers";
+import { CheckInModel } from "@neutron.co.id/tempat-models";
+import { CheckInSingleView } from "@neutron.co.id/operasional-modules";
+import CheckInSingle from "./CheckInSingle.vue";
+export default {
+  title: "Office/CheckIn/Single",
+  tags: [],
+  component: CheckInSingle,
+  parameters: StoryUtil.parameters({
+    description: "`CheckInSingle`",
+    layout: "fullscreen",
+    controls: { exclude: ["colors"] },
+    backgrounds: { default: "light" }
+  })
+};
+export const New = StoryUtil.story({
+  description: "New.",
+  decorators: decorateSingle({
+    model: CheckInModel
+  })
+});
+export const Existing = StoryUtil.story({
+  description: "Existing.",
+  args: { id: "" },
+  decorators: decorateSingle({
+    model: CheckInModel
+    // id: '___',
+  })
+});
+export const Content = StoryUtil.story({
+  description: "Inside content.",
+  render: wrapSingle(CheckInSingle),
+  args: { id: "" },
+  decorators: decorateSingle({
+    model: CheckInModel
+    // id: '___',
+  })
+});
+export const $DefaultView = viewSingle({
+  description: "Default view.",
+  component: CheckInSingleView,
+  props: {
+    // id: '___',
+    overrides: {}
+  }
+});

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

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { NeonSingle, useSingle } from '@neon.id/context'
+import { NeonField, NeonForm } from '@neon.id/form'
+import { OfficeRelation, OfficeTab, OfficeTabs } from '@neon.id/office'
+import { onMounted } from 'vue'
+import type { TTempatCheckInModel } from '@neutron.co.id/tempat-models'
+import type { Schema } from '@neutron.co.id/personalia-models'
+import { useOperasional } from '../../../../common'
+
+const {
+  fields,
+  id,
+  initialValues,
+  values,
+  isLoading,
+  isChanged,
+  isMain,
+  saveOne,
+  discardChanges,
+} = useSingle<Schema.CheckIn, TTempatCheckInModel>()
+
+const { staff } = useOperasional()
+
+onMounted(() => {
+  console.log('idnya?', id.value)
+  if (id.value === 'new') {
+    values.value.staffId = staff.value?.id
+    values.value.staff = {
+      id: staff.value?.id,
+      display: staff.value?.display,
+    }
+    values.value.checkInAt = new Date().toISOString()
+    values.value.type = 'checkpoint'
+  }
+})
+</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-model="values"
+            :field="fields.building"
+            is-disabled
+          />
+
+          <div class="grid gap-4 sm:grid-cols-2">
+            <NeonField v-model="values.type" v-bind="fields.type" is-disabled />
+            <NeonField
+              v-model="values.checkInAt"
+              v-bind="fields.checkInAt"
+              is-disabled
+            />
+          </div>
+
+          <OfficeRelation v-model="values" :field="fields.staff" is-disabled />
+
+          <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/CheckInSingle/index.d.ts

@@ -0,0 +1 @@
+export { default as CheckInSingle } from './CheckInSingle.vue';

package/build/@office/models/personalia/checkIn/CheckInSingle/index.mjs

@@ -0,0 +1 @@
+export { default as CheckInSingle } from "./CheckInSingle.vue";

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

@@ -0,0 +1,122 @@
+<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, onMounted } from 'vue'
+import type { TTempatCheckInModel } from '@neutron.co.id/tempat-models'
+import type { Schema } from '@neutron.co.id/personalia-models'
+import { useOperasional } from '../../../common'
+
+const {
+  fields,
+  id,
+  initialValues,
+  values,
+  isLoading,
+  isChanged,
+  isMain,
+  isNew,
+  isReady,
+  saveOne,
+  discardChanges,
+} = useSingle<Schema.CheckIn, TTempatCheckInModel>()
+
+const route = useRoute()
+
+const permit = usePermit()
+const { staff } = useOperasional()
+const isOperasional = computed(() => (route.name as string)?.includes('rapor'))
+
+onMounted(() => {
+  console.log('idnya?', id.value)
+  if (id.value === 'new' && isOperasional) {
+    values.value.staffId = staff.value?.id
+    values.value.staff = {
+      id: staff.value?.id,
+      display: staff.value?.display,
+    }
+    values.value.checkInAt = new Date().toISOString()
+    values.value.type = 'checkpoint'
+  } else {
+    values.value.checkInAt = new Date().toISOString()
+  }
+})
+</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="
+              !permit.isAny([
+                'neu:cabangOperasional',
+                'neu:admin',
+                'neu:karyawan',
+              ])
+            "
+          />
+
+          <NeonField
+            v-if="isNew || isReady"
+            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/index.d.ts

@@ -0,0 +1,9 @@
+export { default as CheckInPresenceCollection } from './CheckInPresenceCollection.vue';
+export { default as CheckInExternal } from './CheckInExternal.vue';
+export { default as CheckInAccess } from './CheckInAccess.vue';
+export { default as CheckInScanError } from './CheckInScanError.vue';
+export { default as CheckInScanner } from './CheckInScanner.vue';
+export { default as CheckInScanSuccess } from './CheckInScanSuccess.vue';
+export { default as CheckInSupervisor } from './CheckInSupervisor.vue';
+export * from './CheckInCollection';
+export * from './CheckInSingle';

package/build/@office/models/personalia/checkIn/index.mjs

@@ -0,0 +1,9 @@
+export { default as CheckInPresenceCollection } from "./CheckInPresenceCollection.vue";
+export { default as CheckInExternal } from "./CheckInExternal.vue";
+export { default as CheckInAccess } from "./CheckInAccess.vue";
+export { default as CheckInScanError } from "./CheckInScanError.vue";
+export { default as CheckInScanner } from "./CheckInScanner.vue";
+export { default as CheckInScanSuccess } from "./CheckInScanSuccess.vue";
+export { default as CheckInSupervisor } from "./CheckInSupervisor.vue";
+export * from "./CheckInCollection/index.mjs";
+export * from "./CheckInSingle/index.mjs";

package/build/@office/models/personalia/index.d.ts

@@ -0,0 +1,15 @@
+export * from './attendance';
+export * from './checkIn';
+export * from './plan';
+export * from './planType';
+export * from './progress';
+export * from './progressAccess';
+export * from './responsibility';
+export * from './responsibilityType';
+export * from './situation';
+export * from './situationType';
+export * from './staff';
+export * from './submission';
+export * from './submissionType';
+export * from './target';
+export * from './task';

package/build/@office/models/personalia/index.mjs

@@ -0,0 +1,15 @@
+export * from "./attendance/index.mjs";
+export * from "./checkIn/index.mjs";
+export * from "./plan/index.mjs";
+export * from "./planType/index.mjs";
+export * from "./progress/index.mjs";
+export * from "./progressAccess/index.mjs";
+export * from "./responsibility/index.mjs";
+export * from "./responsibilityType/index.mjs";
+export * from "./situation/index.mjs";
+export * from "./situationType/index.mjs";
+export * from "./staff/index.mjs";
+export * from "./submission/index.mjs";
+export * from "./submissionType/index.mjs";
+export * from "./target/index.mjs";
+export * from "./task/index.mjs";

package/build/@office/models/personalia/plan/PlanCollection/PlanCollection.stories.d.ts

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

package/build/@office/models/personalia/plan/PlanCollection/PlanCollection.stories.mjs

@@ -0,0 +1,36 @@
+import { decorateCollection, viewCollection, wrapCollection } from "@mock";
+import { StoryUtil } from "@neon.id/story/helpers";
+import { PlanModel } from "@neutron.co.id/personalia-models";
+import { PlanCollectionView } from "@neutron.co.id/operasional-modules";
+import PlanCollection from "./PlanCollection.vue";
+export default {
+  title: "Office/Plan/Collection",
+  tags: [],
+  component: PlanCollection,
+  parameters: StoryUtil.parameters({
+    description: "`PlanCollection`",
+    layout: "fullscreen",
+    controls: { exclude: ["colors"] },
+    backgrounds: { default: "light" }
+  })
+};
+export const Main = StoryUtil.story({
+  description: "Main.",
+  decorators: decorateCollection({
+    model: PlanModel
+  })
+});
+export const InsideContent = StoryUtil.story({
+  description: "Inside content.",
+  render: wrapCollection(PlanCollection),
+  decorators: decorateCollection({
+    model: PlanModel
+  })
+});
+export const $DefaultView = viewCollection({
+  description: "Default view.",
+  component: PlanCollectionView,
+  props: {
+    overrides: {}
+  }
+});

package/build/@office/models/personalia/plan/PlanCollection/PlanCollection.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { NeonCollection, useCollection } from '@neon.id/context'
+import { OfficeCollectionTable } from '@neon.id/office'
+import type {
+  Schema,
+  TPersonaliaPlanModel,
+} from '@neutron.co.id/personalia-models'
+
+defineOptions({
+  name: 'PlanCollection',
+})
+
+const { resource } = useCollection<Schema.Plan, TPersonaliaPlanModel>()
+</script>
+
+<template>
+  <NeonCollection class="neu-plan-collection">
+    <OfficeCollectionTable />
+  </NeonCollection>
+</template>
+
+<style scoped></style>

package/build/@office/models/personalia/plan/PlanCollection/index.d.ts

@@ -0,0 +1 @@
+export { default as PlanCollection } from './PlanCollection.vue';

package/build/@office/models/personalia/plan/PlanCollection/index.mjs

@@ -0,0 +1 @@
+export { default as PlanCollection } from "./PlanCollection.vue";

package/build/@office/models/personalia/plan/PlanSingle/PlanSingle.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta } from '@storybook/vue3';
+import PlanSingle from './PlanSingle.vue';
+declare const _default: Meta<typeof PlanSingle>;
+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;

package/build/@office/models/personalia/plan/PlanSingle/PlanSingle.stories.mjs

@@ -0,0 +1,47 @@
+import { decorateSingle, viewSingle, wrapSingle } from "@mock";
+import { StoryUtil } from "@neon.id/story/helpers";
+import { PlanModel } from "@neutron.co.id/personalia-models";
+import { PlanSingleView } from "@neutron.co.id/operasional-modules";
+import PlanSingle from "./PlanSingle.vue";
+export default {
+  title: "Office/Plan/Single",
+  tags: [],
+  component: PlanSingle,
+  parameters: StoryUtil.parameters({
+    description: "`PlanSingle`",
+    layout: "fullscreen",
+    controls: { exclude: ["colors"] },
+    backgrounds: { default: "light" }
+  })
+};
+export const New = StoryUtil.story({
+  description: "New.",
+  decorators: decorateSingle({
+    model: PlanModel
+  })
+});
+export const Existing = StoryUtil.story({
+  description: "Existing.",
+  args: { id: "" },
+  decorators: decorateSingle({
+    model: PlanModel
+    // id: '___',
+  })
+});
+export const Content = StoryUtil.story({
+  description: "Inside content.",
+  render: wrapSingle(PlanSingle),
+  args: { id: "" },
+  decorators: decorateSingle({
+    model: PlanModel
+    // id: '___',
+  })
+});
+export const $DefaultView = viewSingle({
+  description: "Default view.",
+  component: PlanSingleView,
+  props: {
+    // id: '___',
+    overrides: {}
+  }
+});