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

package/build/@office/models/personalia/progress/ProgressCollection/ProgressCollection.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { NeonCollection, useCollection } from '@neon.id/context'
+import type { NCalendar } from '@neon.id/display'
+import {
+  OfficeCollectionCalendar,
+  OfficeCollectionTable,
+  OfficeTabs,
+  OfficeTab,
+} from '@neon.id/office'
+import type {
+  TPersonaliaProgressModel,
+  Schema,
+} from '@neutron.co.id/personalia-models'
+
+defineOptions({
+  name: 'ProgressCollection',
+})
+
+const { resource, display, items, userQuery } = useCollection<
+  Schema.Progress,
+  TPersonaliaProgressModel
+>()
+
+const props = defineProps({
+  startedAtField: {
+    type: String,
+    default: 'startedAt',
+  },
+  endedAtField: {
+    type: String,
+    default: 'endedAt',
+  },
+  period: {
+    type: Object as any,
+    default: () => ({
+      startedAt: new Date(),
+      endedAt: new Date(),
+    }),
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'update:period', period: NCalendar.PeriodData): void
+}>()
+
+function onCalendarPeriodUpdate(period: NCalendar.PeriodData) {
+  console.log('calendar', period)
+  emit('update:period', period)
+}
+</script>
+
+<template>
+  <OfficeTabs>
+    <OfficeTab handle="progress" icon="circle-info" title="Progress">
+      <NeonCollection class="neu-progress-collection">
+        <OfficeCollectionTable v-if="userQuery.display === 'table'" />
+
+        <OfficeCollectionCalendar
+          v-else-if="userQuery.display === 'calendar' && period.startedAt"
+          :default-all-day="false"
+          :views="['week', 'month']"
+          :period="period"
+          @update:period="onCalendarPeriodUpdate"
+        />
+      </NeonCollection>
+    </OfficeTab>
+  </OfficeTabs>
+</template>
+
+<style scoped>
+.neu-progress-collection {
+  --neon-calendar-min-height: auto;
+}
+</style>

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

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

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

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

package/build/@office/models/personalia/progress/ProgressNote.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { NeonSingle, useSingle } from '@neon.id/context'
+import { NeonCheck, NeonField, NeonFields, NeonForm } from '@neon.id/form'
+import { OfficeRelation, OfficeTab, OfficeTabs } from '@neon.id/office'
+import { PromiseUtil } from '@neon.id/utils/promise'
+import { watch } from 'vue'
+import type {
+  TPersonaliaProgressModel,
+  Schema,
+} from '@neutron.co.id/personalia-models'
+import { useOperasional } from '../../../common'
+import { ProgressNoteTab } from './sections'
+
+const { staff } = useOperasional()
+const {
+  fields,
+  initialValues,
+  values,
+  isLoading,
+  isChanged,
+  isMain,
+  isNew,
+  saveOne,
+  discardChanges,
+} = useSingle<Schema.Progress, TPersonaliaProgressModel>()
+
+const staffId = staff.value?.id || ''
+
+watch(isNew, setDefaultValues, { immediate: true })
+
+async function setDefaultValues() {
+  if (!isNew.value) return
+  await PromiseUtil.wait(500)
+
+  const defaultValues = {
+    staffIds: [staffId],
+    staffs: [{ id: staffId, flag: staff.value?.flag }],
+    accessStaffIds: [staffId],
+    accessStaffs: [{ id: staffId, flag: staff.value?.flag }],
+    isNotes: true,
+    virtualIsNotes: 'active',
+  } satisfies Schema.Progress
+
+  values.value = defaultValues
+}
+</script>
+
+<template>
+  <NeonSingle class="neu-progress-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"
+        >
+          <NeonFields md="grid-cols-2">
+            <NeonField
+              v-model="values.startedAt"
+              v-bind="fields.startedAt"
+              is-disabled
+            />
+
+            <NeonField v-model="values.detail" v-bind="fields.detail" />
+          </NeonFields>
+
+          <OfficeRelation
+            v-if="isNew"
+            v-model="values"
+            :field="fields.staffs"
+          />
+
+          <OfficeRelation v-model="values" :field="fields.accessStaffs" />
+
+          <NeonField v-model="values.priority" v-bind="fields.priority" />
+
+          <NeonField v-model="values.isNotes" v-bind="fields.isNotes">
+            <template #input>
+              <NeonCheck
+                v-model="values.isNotes"
+                label="Catatan"
+                class="mt-2"
+                is-disabled
+              />
+            </template>
+          </NeonField>
+        </NeonForm>
+      </OfficeTab>
+
+      <ProgressNoteTab />
+    </OfficeTabs>
+  </NeonSingle>
+</template>
+
+<style scoped>
+.neu-progress-single {
+  @apply relative;
+
+  .segments {
+    @apply flex items-center justify-center p-1;
+    @apply border-b-2 bg-gray-50;
+  }
+}
+</style>

package/build/@office/models/personalia/progress/ProgressSingle/ProgressSingle.stories.d.ts

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

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

package/build/@office/models/personalia/progress/ProgressSingle/ProgressSingle.vue

@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import { NeonSingle, useSingle } from '@neon.id/context'
+import { NeonCheck, NeonField, NeonFields, NeonForm } from '@neon.id/form'
+import { NeonButton, NeonDivider } 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 { useRoute } from 'vue-router'
+import type {
+  TPersonaliaProgressModel,
+  Schema,
+} from '@neutron.co.id/personalia-models'
+import { DateUtil } from '../../../../common/utils'
+import { useOperasional, NeonTime } from '../../../../common'
+import { ProgressNoteTab } from '../sections'
+
+const { staff } = useOperasional()
+const {
+  fields,
+  id,
+  initialValues,
+  values,
+  isLoading,
+  isChanged,
+  isReady,
+  isMain,
+  isNew,
+  saveOne,
+  discardChanges,
+  syncOne,
+  executeOne,
+} = useSingle<Schema.Progress, TPersonaliaProgressModel>()
+
+const path = useRoute().path
+
+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]')
+})
+
+watch(isNew, setInitialValues, { immediate: true })
+
+async function setInitialValues() {
+  if (!isNew.value) return
+  await PromiseUtil.wait(1000)
+
+  const sekarang = DateUtil.day(new Date())
+
+  values.value.startedAt = sekarang.second(0).millisecond(0).toISOString()
+  values.value.endedAt = sekarang.add(90, 'm').toISOString()
+
+  if (staff.value?.id) {
+    values.value.staffIds = [staff.value?.id]
+    values.value.staffs = [staff.value]
+  }
+}
+
+const submissionOptions = computed(() => {
+  return {
+    filter: [
+      {
+        handle: 'status',
+        operator: 'in',
+        value: ['approved', 'monitored'],
+      },
+      {
+        handle: 'followUpStaffIds',
+        operator: 'in',
+        value: values.value.staffIds,
+      },
+    ],
+  }
+})
+
+const taskOptions = computed(() => {
+  return Query.define({
+    filter: [
+      {
+        estimatedStartDate: {
+          $lte: values.value.startedAt,
+        },
+        estimatedEndDate: {
+          $gte: values.value.startedAt,
+        },
+      },
+      {
+        $or: [
+          {
+            handle: 'givingAssignmentIds',
+            operator: 'in',
+            value: staff.value?.id,
+          },
+          {
+            handle: 'doingAssignmentIds',
+            operator: 'in',
+            value: staff.value?.id,
+          },
+        ],
+      },
+      {
+        completedDate: {
+          $eq: null,
+        },
+      },
+      {
+        canceledDate: {
+          $eq: null,
+        },
+      },
+    ],
+    sort: [{ handle: 'estimatedStartDate', direction: 'ascending' }],
+  })
+})
+
+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()
+
+  // key.value++
+}
+
+const handleSyncReport = async () => {
+  await executeOne('syncProgressReport', {
+    progressId: id.value,
+    responsibilityIds: values.value.responsibilityIds,
+  })
+  await syncOne()
+}
+</script>
+
+<template>
+  <NeonSingle class="neu-progress-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"
+        >
+          <NeonFields md="grid-cols-2">
+            <NeonField
+              :key="key"
+              :model-value="values.startedAt"
+              v-bind="{
+                handle: 'startedAt',
+                name: 'Tanggal',
+                type: 'date',
+                input: 'date2',
+                options: {
+                  note: 'Tanggal progress.',
+                },
+              }"
+              @update:model-value="onStartedAtUpdate"
+            />
+            <NeonField v-model="values.detail" v-bind="fields.detail" />
+          </NeonFields>
+
+          <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>
+
+          <OfficeRelation v-model="values" :field="fields.staffs" />
+
+          <NeonField v-model="values.isNotes" v-bind="fields.isNotes">
+            <template #input>
+              <NeonCheck
+                v-model="values.isNotes"
+                label="Catatan"
+                class="mt-2"
+              />
+            </template>
+          </NeonField>
+
+          <OfficeRelation v-model="values" :field="fields.accessStaffs" />
+
+          <NeonDivider is-dashed label="Referensi" />
+
+          <OfficeRelation
+            v-model="values"
+            :field="fields.responsibilities"
+            :query="
+              Query.define({
+                filter: [
+                  {
+                    handle: 'condition',
+                    operator: 'eq',
+                    value: 'active',
+                  },
+                  {
+                    $or: [
+                      {
+                        handle: 'staffWorkIds',
+                        operator: 'in',
+                        value: staff?.id,
+                      },
+                      {
+                        handle: 'staffSuperviseIds',
+                        operator: 'in',
+                        value: staff?.id,
+                      },
+                    ],
+                  },
+                ],
+                sort: [{ handle: 'title', direction: 'ascending' }],
+              })
+            "
+          />
+
+          <!-- <OfficeRelation v-model="values" :field="fields.plans" /> -->
+          <OfficeRelation
+            v-model="values"
+            :field="fields.submissions"
+            :query="Query.define(submissionOptions)"
+          />
+
+          <OfficeRelation
+            v-if="path !== '/pengawas/progresses'"
+            v-model="values"
+            :field="fields.tasks"
+            :query="taskOptions"
+          />
+          <!-- v-if="!permit.isAny(['neu:pengawasSDM'])" -->
+        </NeonForm>
+      </OfficeTab>
+
+      <!-- LAPORAN -->
+      <OfficeTab
+        v-if="isReady && values.responsibilityIds?.length == 1"
+        handle="report"
+        icon="info-circle"
+        title="Laporan"
+      >
+        <NeonForm
+          handle="report"
+          :initial-values="initialValues"
+          :is-loading="isLoading"
+          :is-changed="isChanged"
+          use-unsaved
+          @cancel="discardChanges"
+          @submit="saveOne"
+        >
+          <NeonField v-if="isReady">
+            <template #input>
+              <NeonButton
+                size="md"
+                color="dark"
+                icon-left="sync"
+                @click="handleSyncReport"
+                >Laporan</NeonButton
+              >
+            </template>
+          </NeonField>
+          <NeonField
+            v-if="isNew || isReady"
+            v-model="values.reports"
+            v-bind="fields.reports"
+          />
+        </NeonForm>
+      </OfficeTab>
+
+      <ProgressNoteTab />
+    </OfficeTabs>
+  </NeonSingle>
+</template>
+
+<style scoped>
+.neu-progress-single {
+  @apply relative;
+
+  .segments {
+    @apply flex items-center justify-center p-1;
+    @apply border-b-2 bg-gray-50;
+  }
+}
+</style>

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

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

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

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