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

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

@@ -0,0 +1,381 @@
+<script setup lang="ts">
+import { NeonSingle, useSingle } 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'
+import { computed, ref, watch } from 'vue'
+import { PromiseUtil } from '@neon.id/utils/promise'
+import type {
+  TPersonaliaAttendanceModel,
+  Schema,
+} from '@neutron.co.id/personalia-models'
+import { DateUtil } from '../../..//common/utils/util.date'
+import { useOperasional, NeonTime } from '../../../common'
+
+const {
+  fields,
+  id,
+  initialValues,
+  values,
+  isLoading,
+  isChanged,
+  isReady,
+  isMain,
+  isNew,
+  saveOne,
+  discardChanges,
+  syncOne,
+  executeOne,
+} = useSingle<Schema.Attendance, TPersonaliaAttendanceModel>()
+
+const key = ref(0)
+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]')
+})
+
+const reverseDiff = computed(() => {
+  return DateUtil.day(values.value.startedAt).diff(values.value.endedAt)
+})
+const reverseDuration = computed(() => {
+  if (isNaN(reverseDiff.value)) return '-'
+  const duration = DateUtil.day.duration(reverseDiff.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()
+}
+
+// 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 approvedAbsensi = async () => {
+  await executeOne('approvedAttendance', { attendanceId: id.value })
+  await syncOne()
+}
+
+const deleteAbsensi = async () => {
+  await executeOne('deleteAttendance', { attendanceId: id.value })
+  await syncOne()
+  window.location.href = '/penugasan/manager-attendances'
+}
+const rejectedAbsensi = async () => {
+  await executeOne('rejectedAttendance', { attendanceId: id.value })
+  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"
+        >
+          <div class="flex flex-wrap">
+            <div class="mt-2">
+              <NeonField>
+                <template #input>
+                  <NeonButton
+                    size="md"
+                    color="success"
+                    icon-left="x"
+                    :is-disabled="
+                      values.status == 'approved' || values.status == 'rejected'
+                    "
+                    @click="rejectedAbsensi"
+                    >Ditolak</NeonButton
+                  >
+                </template>
+              </NeonField>
+            </div>
+            &nbsp;&nbsp;
+            <div class="mt-2">
+              <NeonField>
+                <template #input>
+                  <NeonButton
+                    size="md"
+                    color="warning"
+                    icon-left="trash-can"
+                    @click="deleteAbsensi"
+                    >Dihapus</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 == 'approved' || values.status == 'rejected'
+            "
+            @update:model-value="onStartedAtUpdate"
+          />
+
+          <NeonField
+            v-model="values.type"
+            v-bind="fields.type"
+            :is-disabled="
+              values.status == 'approved' || values.status == 'rejected'
+            "
+          />
+
+          <OfficeRelation
+            v-model="values"
+            :field="fields.decideStaff"
+            :is-disabled="
+              values.status == 'approved' || values.status == 'rejected'
+            "
+          />
+
+          <OfficeRelation
+            v-if="values.type == 'leave'"
+            v-model="values"
+            :field="fields.delegateStaffs"
+            :is-disabled="
+              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"
+                />
+              </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"
+                />
+
+                <div class="text-right text-fg-subdued text-sm">
+                  {{ reverseDuration }}
+                </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"
+                />
+              </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"
+                />
+
+                <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"
+                />
+              </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"
+                />
+
+                <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>

package/build/@office/models/personalia/attendance/AttendanceSingle/AttendanceSingle.stories.d.ts

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

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

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

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { NeonSingle, useSingle } from '@neon.id/context'
+import { NeonField, NeonForm } from '@neon.id/form'
+import { NeonDivider } from '@neon.id/interfaces'
+import { OfficeRelation, OfficeTab, OfficeTabs } from '@neon.id/office'
+import { computed, ref } from 'vue'
+import type {
+  TPersonaliaAttendanceModel,
+  Schema,
+} from '@neutron.co.id/personalia-models'
+import { NeonTime } from '../../../../common'
+import { DateUtil } from '../../../../common/utils/util.date'
+
+const {
+  fields,
+  initialValues,
+  values,
+  isLoading,
+  isChanged,
+  isReady,
+  isMain,
+  isNew,
+  saveOne,
+  discardChanges,
+} = useSingle<Schema.Attendance, TPersonaliaAttendanceModel>()
+
+const key = ref(0)
+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]')
+})
+
+const reverseDiff = computed(() => {
+  return DateUtil.day(values.value.startedAt).diff(values.value.endedAt)
+})
+
+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()
+}
+</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"
+        >
+          <NeonField v-model="values.status" v-bind="fields.status" />
+
+          <OfficeRelation v-model="values" :field="fields.submitStaff" />
+
+          <NeonField
+            :key="key"
+            :model-value="values.startedAt"
+            v-bind="{
+              handle: 'startedAt',
+              name: 'Tanggal',
+              type: 'date',
+              input: 'date2',
+              options: {
+                note: 'Tanggal absensi.',
+              },
+            }"
+            @update:model-value="onStartedAtUpdate"
+          />
+
+          <NeonField v-model="values.type" v-bind="fields.type" />
+
+          <OfficeRelation v-model="values" :field="fields.decideStaff" />
+
+          <OfficeRelation
+            v-if="values.type == 'leave'"
+            v-model="values"
+            :field="fields.delegateStaffs"
+          />
+
+          <NeonField
+            v-if="isNew || isReady"
+            v-model="values.notes"
+            v-bind="fields.notes"
+          />
+
+          <NeonDivider is-dashed label="Keterangan" />
+
+          <NeonField v-model="values.submittedAt" v-bind="fields.submittedAt" />
+
+          <div 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"
+                />
+              </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"
+                />
+
+                <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>

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

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

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

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