@neutron.co.id/operasional-interfaces 1.12.8 → 1.13.0-beta.1

package/build/@mock/index.d.ts

@@ -1,5 +1,3 @@
-export * from './mock.app';
 export * from './mock.interfaces';
-export * from './mock.models';
 export * from './mock.office';
 export * from './mock.operasional';

package/build/@mock/mock.interfaces.d.ts

@@ -1,10 +1,9 @@
 import { type App } from 'vue';
 import '@neon.id/context/style.css';
-import '@neon.id/interfaces/style.css';
-import '@neon.id/form/style.css';
-import '@neon.id/media/style.css';
-import '@neon.id/field/style.css';
 import '@neon.id/discovery/style.css';
+import '@neon.id/field/style.css';
+import '@neon.id/form/style.css';
+import '@neon.id/interfaces/style.css';
 import '@neon.id/editor/style.css';
 import '@neon.id/relation/style.css';
 import '@neon.id/display/style.css';
@@ -13,6 +12,4 @@ import '@neon.id/fluffy/style.css';
 import '@neon.id/office/style.css';
 import '@neon.id/dampak-interfaces/style.css';
 import '@neon.id/identitas-interfaces/fluffy.css';
-export declare function mockInterfaces(input: {
-    app: App;
-}): void;
+export declare function mockInterfaces(app: App): void;

package/build/@mock/mock.office.d.ts

@@ -1,78 +1,29 @@
-import { type NCollection, type NSingle } from '@neon.id/context';
-import type { NModel } from '@neon.id/model';
-import type { DecoratorFunction, StoryContext, PartialStoryFn as StoryFunction } from '@storybook/types';
-import type { VueRenderer } from '@storybook/vue3';
-import { type App, type Component } from 'vue';
-export declare function mockViews(input: {
-    app: App;
-}): void;
-export declare function decorateContext(story: StoryFunction<VueRenderer>, ctx: StoryContext<VueRenderer>): {
-    name: string;
-    components: {
-        story: StoryFunction<VueRenderer>;
-    };
-    template: string;
-    setup(): {
-        args: import("@storybook/types").Args;
-    };
-};
-export interface DecorateSingleContextInput {
-    model: NModel.Instance;
-    id?: string;
-    initialValues?: Record<string, any>;
-    isMain?: boolean;
-    onSetup?: (context: NSingle.Context) => void;
-}
-export declare function decorateSingleContext(input: DecorateSingleContextInput): (story: StoryFunction<VueRenderer>, ctx: StoryContext<VueRenderer>) => {
-    name: string;
-    components: {
-        story: StoryFunction<VueRenderer>;
+import * as modules from '@neutron.co.id/operasional-modules';
+declare const models: import("@neon.id/context").TModuleModels;
+declare const mockViews: (app: import("vue").App) => void, decorateCollection: (input: import("@neon.id/context/mock").DecorateCollectionContextInput) => DecoratorFunction<import("@storybook/vue3").VueRenderer>[], viewCollection: (input: {
+    description: string;
+    component: import("vue").Component;
+    setup?: () => void;
+    props?: {
+        overrides?: Partial<import("@neon.id/context").TCollectionInput>;
     };
-    template: string;
-    setup(): void;
-};
-export declare function decorateSingle(input: DecorateSingleContextInput): DecoratorFunction<VueRenderer>[];
-export declare function wrapSingle(component: Component): (args: any) => {
+}) => import("@storybook/types").StoryAnnotations<import("@storybook/vue3").VueRenderer, {}, {}>, wrapCollection: (component: import("vue").Component) => (args: any) => {
     setup(): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>;
-};
-export declare function viewSingle(input: {
+}, decorateSingle: (input: import("@neon.id/context/mock").DecorateSingleContextInput) => DecoratorFunction<import("@storybook/vue3").VueRenderer>[], viewSingle: (input: {
     description: string;
-    component: Component;
+    component: import("vue").Component;
+    setup?: () => void;
     props?: {
         id?: string;
         isNew?: boolean;
         isMain?: boolean;
-        overrides?: Partial<NSingle.Input>;
+        overrides?: Partial<import("@neon.id/context").TSingleInput>;
     };
-}): import("@storybook/types").StoryAnnotations<VueRenderer, {}, {}>;
-export interface DecorateCollectionContextInput {
-    model: NModel.Instance;
-    isMain?: boolean;
-    id?: string;
-    onSetup?: (context: NCollection.Context) => void;
-}
-export declare function decorateCollectionContext(input: DecorateCollectionContextInput): (story: StoryFunction<VueRenderer>, ctx: StoryContext<VueRenderer>) => {
-    name: string;
-    components: {
-        story: StoryFunction<VueRenderer>;
-    };
-    template: string;
-    setup(): {
-        args: import("@storybook/types").Args;
-    };
-};
-export declare function decorateCollection(input: DecorateCollectionContextInput): DecoratorFunction<VueRenderer>[];
-export declare function wrapCollection(component: Component): (args: any) => {
+}) => import("@storybook/types").StoryAnnotations<import("@storybook/vue3").VueRenderer, {}, {}> | import("@storybook/types").StoryAnnotations<import("@storybook/vue3").VueRenderer, any>, wrapSingle: (component: import("vue").Component) => (args: any) => {
     setup(): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>;
 };
-export declare function viewCollection(input: {
-    description: string;
-    component: Component;
-    props?: {
-        overrides?: Partial<NCollection.Input>;
-    };
-}): import("@storybook/types").StoryAnnotations<VueRenderer, {}, {}>;
+export { decorateCollection, decorateSingle, mockViews, models, modules, viewCollection, viewSingle, wrapCollection, wrapSingle, };

package/build/@mock/mock.operasional.d.ts

@@ -1,3 +1,3 @@
-import type { DecoratorFunction } from '@storybook/types';
+import type { DecoratorFunction } from 'storybook/internal/types';
 import type { VueRenderer } from '@storybook/vue3';
 export declare const decorateOperational: DecoratorFunction<VueRenderer>;

package/build/@office/common/NeonTime/NeonTime.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="neon-time" :class="{ 'is-disabled': isDisabled }">
+    <div v-if="isLoading" class="input-loading">
+      <div class="loading placeholder-block placeholder-wave"></div>
+    </div>
+
+    <DatePicker
+      v-else
+      :model-value="internalValue"
+      v-bind="{
+        color: 'gray',
+        mode: 'time',
+        is24hr: true,
+        updateOnInput: false,
+        modelConfig: {
+          type: 'string',
+        },
+        popover: {
+          visibility: 'hover-focus',
+        },
+      }"
+      @update:model-value="onUpdate"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DatePicker } from 'v-calendar'
+import { computed } from 'vue'
+import { DateUtil } from '../../common/utils/util.date'
+import type { MaybeProp } from '../../common/types/type.utils'
+
+const props = defineProps({
+  modelValue: {
+    type: String as MaybeProp<string>,
+    default: undefined,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const internalValue = computed(() => {
+  const newDate = DateUtil.day(props.modelValue || undefined)
+  return newDate.second(0).millisecond(0).toISOString()
+})
+
+function onUpdate(newValue: Date) {
+  if (props.isDisabled) return
+  let newDate = DateUtil.day(newValue)
+  newDate = newDate.second(0).millisecond(0)
+  emit('update:modelValue', newDate.toISOString())
+}
+</script>
+
+<style scoped>
+.input-loading {
+  @apply relative flex items-center border-2 rounded-xl;
+  padding: 0 12px;
+  height: var(--height-md);
+
+  .loading {
+    @apply w-full rounded-xl;
+    height: 17px;
+  }
+}
+</style>
+
+<style>
+.neon-time {
+  &.is-disabled {
+    @apply pointer-events-none;
+
+    .vc-container {
+      @apply bg-gray-100;
+    }
+
+    .vc-select select {
+      @apply bg-gray-100 text-fg-subdued;
+    }
+  }
+  .vc-container {
+    @apply w-full;
+    @apply border-2 border-border-normal;
+
+    & > div {
+      @apply w-full;
+    }
+
+    .vc-time-picker {
+      @apply w-full grid gap-1;
+      @apply border-none;
+      grid-template-columns: 1fr min-content;
+      padding-top: 3px;
+      padding-bottom: 3px;
+
+      & > :first-child {
+        @apply order-2;
+      }
+    }
+  }
+
+  .vc-select select {
+    @apply bg-gray-100 border-gray-100 text-fg-normal;
+    @apply rounded-lg;
+  }
+
+  .vc-time-content {
+    @apply mx-0;
+  }
+
+  .vc-time-icon {
+    @apply hidden;
+  }
+}
+</style>

package/build/@office/common/NeonTime/index.mjs

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

package/build/@office/common/OperasionalIdentitas/OperasionalIdentitas.vue

@@ -0,0 +1,405 @@
+<script setup lang="ts">
+import { GraphUtil } from '@neon.id/context'
+import { RowUtil } from '@neon.id/display'
+import { NeonField } from '@neon.id/form'
+import {
+  IdentitasAssistRegistration,
+  IdentitasConnect,
+  IdentitasDelegate,
+} from '@neon.id/identitas-interfaces/office'
+import { models } from '@neon.id/identitas-models'
+import {
+  NeonAvatar,
+  NeonButton,
+  NeonDivider,
+  NeonModal,
+  NeonSheet,
+} from '@neon.id/interfaces'
+import { Field } from '@neon.id/model'
+import type { NQuery } from '@neon.id/query'
+import { Query } from '@neon.id/query'
+import type { NRelation } from '@neon.id/relation'
+import { NeonRelationSheet, withRelation } from '@neon.id/relation'
+import type { NBase, MaybeProp } from '@neon.id/types'
+import { CodeUtil } from '@neon.id/utils/code'
+import { useClientHandle } from '@urql/vue'
+import { format } from 'date-fns'
+import { computed, h, ref, watch, type PropType } from 'vue'
+import type { Schema } from '@neutron.co.id/personalia-models'
+
+export interface UpdateUserPayload {
+  userId: string
+  roleIds: string[]
+}
+
+defineOptions({ name: 'OperasionalIdentitas' })
+
+const props = defineProps({
+  profile: {
+    type: Object as MaybeProp<any>,
+    default: null,
+  },
+  user: {
+    type: Object as MaybeProp<Schema.User>,
+    default: null,
+  },
+  conflict: {
+    type: Object as PropType<any>,
+    default: null,
+  },
+  roles: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+  },
+  errors: {
+    type: Object as PropType<Record<string, string>>,
+    default: () => ({}),
+  },
+  onChoose: {
+    type: Function as PropType<(userId: string) => Promise<any | undefined>>,
+    default: null,
+  },
+  onRegister: {
+    type: Function as PropType<(payload: any) => Promise<string | undefined>>,
+    default: null,
+  },
+  onConnect: {
+    type: Function as PropType<(userId: string) => Promise<any>>,
+    default: null,
+  },
+  onDisconnect: {
+    type: Function as PropType<(payload: UpdateUserPayload) => Promise<any>>,
+    default: null,
+  },
+  onDelegate: {
+    type: Function as PropType<(payload: UpdateUserPayload) => Promise<any>>,
+    default: null,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'no-conflict'): void
+}>()
+
+const fullNameField = {
+  handle: 'name',
+  name: 'Nama Lengkap',
+  type: 'string',
+  input: 'short-text',
+  options: {
+    note: 'Nama lengkap pengguna, sesuai dengan nama pada data profil.',
+  },
+}
+
+const passwordField = {
+  handle: 'defaultPassword',
+  name: 'Password Awal',
+  type: 'string',
+  input: 'short-text',
+  options: {
+    note: `<em>Password</em> awal pengguna, dapat menggunakan tanggal lahir dari data profil.`,
+    iconLeft: 'key',
+  },
+}
+
+const state = ref('connect')
+const candidateId = ref<string | null>(null)
+const candidate = ref<Schema.User | null>(null)
+
+const isChoosing = ref(false)
+const isLoading = ref(false)
+
+const user = computed(() => props.user)
+const userForDelegating = computed(() => {
+  if (!user.value) return null
+
+  const availableRoleIds = props.roles.map((role) => role.id)
+  const roleIds = user.value?.roleIds?.filter((id: string) =>
+    availableRoleIds.includes(id),
+  )
+
+  return { ...user.value, roleIds }
+})
+const profile = computed(() => props.profile)
+const initialRegistration = ref({
+  defaultPassword: getDefaultPassword(),
+})
+
+const { client } = useClientHandle()
+const UserModel = models.UserModel
+
+withRelation({
+  field: Field.define({
+    handle: 'user',
+    name: 'Pengguna',
+    type: 'relation',
+    input: 'relation',
+    options: {},
+  }),
+  fields: UserModel.fields,
+  title: 'Choose Item',
+  icon: '',
+  singular: '',
+  plural: '',
+  scope: CodeUtil.getCode({ prefix: 'relation', chars: 6 }),
+  isMultiple: false,
+
+  query: Query.define({}),
+  filters: [],
+  sorts: [],
+  columns: ['flag', 'username', 'email', 'phone', 'status', 'lastLoggedInAt'],
+  renders: {
+    flag: (item) => {
+      const Avatar = h(NeonAvatar as any, {
+        image: item.image,
+        name: item.id,
+        style: { '--neon-avatar-size': '32px' },
+      })
+      const Display = RowUtil.renderDisplay(item, UserModel.fields.flag)
+
+      return h('div', { class: 'flex items-center space-x-2' }, [
+        Avatar,
+        Display,
+      ])
+    },
+    username: (item) => RowUtil.renderCode(item, UserModel.fields.username),
+    email: (item) => RowUtil.renderCode(item, UserModel.fields.email),
+    phone: (item) => RowUtil.renderCode(item, UserModel.fields.phone),
+  },
+
+  ids: [],
+  initialIds: [],
+  initialItems: [],
+  logs: [],
+
+  getItems: getManyUsers,
+  updateValue: (id: any) => {
+    candidateId.value = id
+  },
+} as NRelation.Input)
+
+watch(candidateId, async (id) => {
+  if (!id) {
+    candidate.value = null
+  } else {
+    isLoading.value = true
+
+    const query = Query.define({ ids: [id] })
+    const resp = await getManyUsers(query)
+    candidate.value = resp.items[0] || null
+    await props.onChoose(id)
+
+    isLoading.value = false
+  }
+})
+
+function getDefaultPassword() {
+  if (!profile.value.birthDate) return CodeUtil.getCode({ chars: 6 })
+
+  const birthDate = new Date(profile.value.birthDate)
+  return format(birthDate, 'yyyy-MM-dd')
+}
+
+function onWillChoose() {
+  isChoosing.value = true
+}
+
+function onWillRegister() {
+  clear()
+  state.value = 'register'
+}
+
+async function onRegister(payload: any) {
+  if (!props.onRegister) return
+
+  try {
+    isLoading.value = true
+    const userId = await props.onRegister({
+      ...payload,
+      name: profile.value.name,
+      organizationIds: [
+        '5f8c6b0cc94b750008d4a156', // Neon,
+        '5f8fe9a61e42a200082e3fef', // Neutron
+      ],
+    })
+
+    if (userId) {
+      candidateId.value = userId
+      state.value = 'connect'
+    }
+  } catch (error) {
+    console.log(error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function onConnect() {
+  if (!props.onConnect || !candidateId.value) return
+
+  isLoading.value = true
+  await props.onConnect(candidateId.value)
+  isLoading.value = false
+}
+
+async function onDisconnect() {
+  if (!props.onDisconnect || !user.value?.id) return
+
+  const availableRoleIds = props.roles.map((role) => role.id)
+  const roleIds =
+    user.value?.roleIds?.filter(
+      (id: string) => !availableRoleIds.includes(id),
+    ) || []
+
+  isLoading.value = true
+  await props.onDisconnect({ userId: user.value.id, roleIds })
+  isLoading.value = false
+}
+
+function onBack() {
+  clear()
+}
+
+async function onDelegate(delegation: { roleIds: string[] }) {
+  if (!props.onDelegate || !user.value?.id || !delegation) return
+
+  const availableRoleIds = props.roles.map((role) => role.id)
+  const existingRoleIds =
+    user.value?.roleIds?.filter(
+      (id: string) => !availableRoleIds.includes(id),
+    ) || []
+
+  const roleIds = [
+    ...new Set([...delegation.roleIds, ...existingRoleIds]).values(),
+  ].filter(Boolean)
+
+  isLoading.value = true
+  await props.onDelegate({ userId: user.value.id, roleIds })
+  isLoading.value = false
+}
+
+async function getManyUsers(query: NQuery.Instance) {
+  const resp = await client
+    .query(
+      GraphUtil.getMany(UserModel, {
+        id: 1,
+        flag: 1,
+        display: 1,
+        name: 1,
+        username: 1,
+        email: 1,
+        phone: 1,
+        image: 1,
+        status: 1,
+        lastLoggedInAt: 1,
+        roleIds: 1,
+      }),
+      {
+        ids: query.ids,
+        page: query.final.page,
+        limit: query.final.limit,
+        search: query.search,
+        filter: query.raw.criteria,
+        sort: query.raw.sort,
+        logs: ['error'],
+      },
+      { requestPolicy: 'network-only' },
+    )
+    .toPromise()
+
+  const wrapper = resp.data?.[UserModel.plural]
+  const items = wrapper?.items || []
+  const meta = wrapper?.info?.meta || {}
+
+  return { items, meta }
+}
+
+function clear() {
+  emit('no-conflict')
+  candidate.value = null
+  candidateId.value = null
+}
+</script>
+
+<template>
+  <div class="operasional-identitas">
+    <IdentitasConnect
+      v-if="state === 'connect'"
+      :user="user as any"
+      :candidate="candidate as any"
+      :conflict="conflict"
+      is-ready
+      :is-loading="isLoading"
+      @choose="onWillChoose"
+      @register="onWillRegister"
+      @connect="onConnect"
+      @disconnect="onDisconnect"
+      @back="onBack"
+    >
+      <template #ready>
+        <NeonField
+          :model-value="user?.defaultPassword"
+          v-bind="passwordField"
+          :more-options="{
+            note: `<em>Password</em> awal pengguna. Tidak berlaku apabila pengguna <strong class='text-danger'>telah mengubah <em>password</em></strong> atau <strong class='text-danger'>mendaftarkan akunnya sendiri</strong>.`,
+          }"
+          is-disabled
+          is-alone
+        />
+      </template>
+    </IdentitasConnect>
+
+    <IdentitasAssistRegistration
+      v-else-if="state === 'register'"
+      :initial-values="initialRegistration"
+      :is-loading="isLoading"
+      :errors="errors"
+      @back="state = 'connect'"
+      @save="onRegister"
+    >
+      <NeonField
+        :model-value="profile?.name"
+        v-bind="fullNameField"
+        is-disabled
+        is-alone
+      />
+    </IdentitasAssistRegistration>
+
+    <div v-if="user && onDelegate" class="section">
+      <NeonDivider is-dashed label="Delegasi" class="divider" />
+      <IdentitasDelegate
+        :user="userForDelegating as any"
+        :roles="roles"
+        :is-loading="isLoading"
+        @save="onDelegate"
+      />
+    </div>
+
+    <NeonModal
+      v-if="isChoosing"
+      is-active
+      size="lg"
+      @close="isChoosing = false"
+    >
+      <NeonSheet
+        icon="user-magnifying-glass"
+        title="Pilih Akun"
+        label="User"
+        no-padding
+        @close="isChoosing = false"
+      >
+        <NeonRelationSheet />
+      </NeonSheet>
+    </NeonModal>
+  </div>
+</template>
+
+<style scoped>
+.operasional-identitas {
+  .section {
+    .divider {
+      @apply mb-4;
+    }
+  }
+}
+</style>

package/build/@office/common/OperasionalIdentitas/index.mjs

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

package/build/{@package/components → @office}/common/index.d.ts

@@ -1,2 +1,3 @@
 export * from './OperasionalIdentitas';
 export * from './NeonTime';
+export * from './providers';

package/build/@office/common/index.mjs

@@ -0,0 +1,3 @@
+export * from "./OperasionalIdentitas/index.mjs";
+export * from "./NeonTime/index.mjs";
+export * from "./providers/index.mjs";

package/build/@office/common/providers/index.mjs

@@ -0,0 +1 @@
+export * from "./operasional/index.mjs";