@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/layouts/FormGlobal.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import FormDialog from '../components/dialog/FormDialog.vue';
-import { useFormSheet } from '../stores/form';
-import type { Vueform } from '@vueform/vueform';
-import { ref, watch } from 'vue';
-
-const formSheet = useFormSheet();
-
-/**
- * El
- *
- */
-const formSheetEl = ref<Vueform>();
-
-function sheetFormChanged(after: any, before: any) {
-  formSheet.onChange(after, before);
-}
-
-function formEditCanceled() {
-  formSheetEl.value?.reset();
-  formSheet.close();
-}
-
-watch(() => formSheetEl.value, (el$) => {
-  formSheet.el$ = el$;
-  if (el$) {
-    setTimeout(() => {
-      formSheet.onMounted();
-    })
-  }
-})
-</script>
-
-<template>
-  <FormDialog
-    v-model:open="formSheet.show"
-    :title="formSheet.title"
-    v-on:save-click="formSheetEl?.submit()"
-    v-on:cancel-click="formEditCanceled"
-    :loading="formSheet.loading"
-    v-model:saving="formSheet.saving"
-    v-model:error="formSheet.formError"
-    :class="formSheet.className">
-    <Vueform
-      :schema="(formSheet.formSchema as any)"
-      :endpoint="formSheet.submitForm"
-      ref="formSheetEl"
-      v-on:change="sheetFormChanged"/>
-  </FormDialog>
-</template>

package/template/src/layouts/GlobalDialog.vue

@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import BtnPrimary from '../components/button/BtnPrimary.vue';
-import BtnSecondary from '../components/button/BtnSecondary.vue';
-import ErrorDialog from '../components/dialog/ErrorDialog.vue';
-import FormInputerDialog from '../components/dialog/FormInputerDialog.vue';
-import InfoDialog from '../components/dialog/InfoDialog.vue';
-import SuccessDialog from '../components/dialog/SuccessDialog.vue';
-import LoadingDialog from '../components/loadings/LoadingDialog.vue';
-import LucideIcon from '../components/helper/LucideIcon.vue';
-import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter,
-  AlertDialogHeader, AlertDialogTitle } from '../components/ui/alert-dialog';
-import DialogDescription from '../components/ui/dialog/DialogDescription.vue';
-import DialogTitle from '../components/ui/dialog/DialogTitle.vue';
-import { useConfirmDialog, useErrorDialog, useFormInputerDialog, useInfoDialog, useLoadingDialog, useSuccessDialog } from '../stores/dialog';
-
-/**
- * Dialog
- *
- */
-const infoDialog = useInfoDialog();
-const errorDialog = useErrorDialog();
-const loadingDialog = useLoadingDialog();
-const confirmDialog = useConfirmDialog();
-const successDialog = useSuccessDialog();
-const formInputerDialog = useFormInputerDialog();
-
-function formInputerChanged(after: any, before: any, el$: any) {
-if (formInputerDialog.options?.onChange) {
-    formInputerDialog.options?.onChange(after, before, el$);
-  }
-}
-</script>
-
-<template>
-  <LoadingDialog v-model:show="loadingDialog.show"/>
-  <InfoDialog v-model:open="infoDialog.show">
-    <template #title>
-      {{ infoDialog.options?.title }}
-    </template>
-    <template #description>
-      {{ infoDialog.options?.description }}
-    </template>
-    <template #actionLabel>
-      {{ infoDialog.options?.actionLabel || 'Tutup' }}
-    </template>
-  </InfoDialog>
-  <ErrorDialog v-model:open="errorDialog.show" v-on:close="errorDialog.close">
-    <template #title>
-      {{ errorDialog.options?.title }}
-    </template>
-    <template #description>
-      {{ errorDialog.options?.description }}
-    </template>
-    <template #actionLabel>
-      {{ errorDialog.options?.actionLabel || 'Tutup' }}
-    </template>
-  </ErrorDialog>
-  <SuccessDialog v-model:open="successDialog.show" v-on:close="successDialog.close">
-    <template #title v-if="successDialog.options?.title">
-      {{ successDialog.options?.title }}
-    </template>
-    <template #description v-if="successDialog.options?.description">
-      {{ successDialog.options?.description }}
-    </template>
-    <template #close-label v-if="successDialog.options?.closeLabel">
-      {{ successDialog.options?.closeLabel }}
-    </template>
-  </SuccessDialog>
-
-  <AlertDialog v-model:open="confirmDialog.show">
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>{{ confirmDialog.options?.title }}</AlertDialogTitle>
-        <AlertDialogDescription>
-          <div v-html="confirmDialog.options?.description"></div>
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <slot name="content"></slot>
-      <AlertDialogFooter class="pt-4">
-        <BtnSecondary class="h-auto 2xl:h-auto"
-          v-on:click="confirmDialog.close(false)">
-          {{ confirmDialog.options?.cancelLabel || 'Batal' }}
-        </BtnSecondary>
-        <BtnPrimary v-on:click.stop="confirmDialog.close(true)"
-          :loading="confirmDialog.options?.loading"
-          :disabled="confirmDialog.options?.loading"
-          class="h-auto 2xl:h-auto"
-          :class="{
-            'bg-red-500 hover:bg-red-600': confirmDialog.options?.negative,
-            'pl-3 pr-4': confirmDialog.options?.actionIcon,
-          }">
-          <LucideIcon v-if="confirmDialog.options?.actionIcon"
-            :name="confirmDialog.options?.actionIcon"
-            :size="18" class="mr-2 -ml-1" />
-          {{ confirmDialog.options?.actionLabel || 'Simpan' }}
-        </BtnPrimary>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-
-  <FormInputerDialog
-    :class="formInputerDialog.options?.class"
-    :class-content="formInputerDialog.options?.classContent"
-    :class-overlay="formInputerDialog.options?.classOverlay"
-    :close-on-submit="false"
-    v-model:show="formInputerDialog.show"
-    v-model:error="formInputerDialog.formError"
-    v-model:saving="formInputerDialog.saving"
-    v-model:form="formInputerDialog.formSchema"
-    @submit="formInputerDialog.submit"
-    @change="formInputerChanged"
-  >
-    <template #header>
-      <DialogTitle>{{ formInputerDialog.options?.title }}</DialogTitle>
-      <DialogDescription v-if="formInputerDialog.options?.description">
-        {{ formInputerDialog.options?.description }}
-      </DialogDescription>
-    </template>
-    <template #button-label>{{ formInputerDialog.options?.actionLabel ?? 'Simpan' }}</template>
-    <template #secondary-button-label>{{ formInputerDialog.options?.cancelLabel ?? 'Batal' }}</template>
-  </FormInputerDialog>
-</template>

package/template/src/layouts/RakorConfirmDialog.vue

@@ -1,95 +0,0 @@
-<script setup lang="ts">
-import api from '../api/api';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../components/ui/dialog';
-import { LucideCheckCheck } from 'lucide-vue-next';
-import { onMounted, ref } from 'vue';
-
-const konfirmasiTutupRakorOpen = ref(false);
-const konfirmasiData = ref<any>(null);
-const tutupRakorCountdown = ref(0);
-let tutupRakorInterval: any = null;
-
-function konfirmasiTutupRakor() {
-  konfirmasiTutupRakorOpen.value = false;
-  dialogOpenChanged(false);
-  api.post(`jadwal-rakor/${konfirmasiData.value.id}/konfirmasi-tutup-rakor`);
-}
-
-function setIntervalCloseKonfirmasiTutupRakor() {
-  tutupRakorCountdown.value = 30;
-  if (tutupRakorInterval) clearInterval(tutupRakorInterval);
-  setInterval(() => {
-    if (tutupRakorCountdown.value <= 0) {
-      if (tutupRakorInterval) clearInterval(tutupRakorInterval);
-      konfirmasiTutupRakorOpen.value = false;
-      setTimeout(() => {
-        dialogOpenChanged(false);
-      }, 3000);
-      return;
-    }
-    tutupRakorCountdown.value -= 1;
-  }, 1000);
-}
-
-/**
- * Next change this to get from websocket
- * when back-end ws ready
- *
- */
-function checkKonfirmasiTutupRakor() {
-  if (konfirmasiTutupRakorOpen.value) return;
-  // api.get('/jadwal-rakor/konfirmasi-tutup-rakor').then((r) => {
-  //   konfirmasiTutupRakorOpen.value = true;
-  //   konfirmasiData.value = r.data.data;
-  //   setIntervalCloseKonfirmasiTutupRakor();
-  // }).finally(() => {
-  //   setTimeout(() => {
-  //     checkKonfirmasiTutupRakor();
-  //   }, 3000);
-  // })
-}
-
-function dialogOpenChanged(b: boolean) {
-  if (b) return;
-  setTimeout(() => {
-    checkKonfirmasiTutupRakor();
-  }, 5000);
-}
-
-onMounted(() => {
-  // checkKonfirmasiTutupRakor();
-})
-</script>
-
-<template>
-  <Dialog v-model:open="konfirmasiTutupRakorOpen" v-on:update:open="dialogOpenChanged">
-    <DialogContent class="max-w-[520px] w-full">
-      <DialogHeader>
-        <DialogTitle>Rakor <b>{{ konfirmasiData.jadwalRakor.judul }}</b> Telah Ditutup</DialogTitle>
-        <DialogDescription class="mt-2">
-          Rakor 1 telah ditutup oleh
-          <b>{{ konfirmasiData.jadwalRakor && konfirmasiData.jadwalRakor.rakorDitutupOleh
-            ? konfirmasiData.jadwalRakor.rakorDitutupOleh.name : '' }}</b>
-          dari <b>{{ konfirmasiData.jadwalRakor && konfirmasiData.jadwalRakor.rakorDitutupOleh
-            && konfirmasiData.jadwalRakor.rakorDitutupOleh.organization
-            ? konfirmasiData.jadwalRakor.rakorDitutupOleh.organization.name : '' }}</b>,
-          silahkan konfrimasi penutupan Rakor dengan klik tombol Konfirmasi di bawah.
-          <br /><br />
-          Notulen rakor akan dikirimkan melalui email setelah semua peserta melakukan konfirmasi.
-          <br /><br />
-          Akan otomatis terkonfirmasi jika tidak ada konfirmasi selama 30 detik.
-        </DialogDescription>
-      </DialogHeader>
-      <div class="text-sm">
-        <div class="flex items-center pt-4 -mb-1">
-          <div class="ml-auto pr-5" v-if="tutupRakorCountdown">{{ tutupRakorCountdown }}</div>
-          <button class="bg-green-500 text-white hover:bg-green-600 transition px-4 py-2 rounded-md font-medium text-base min-w-[120px] flex items-center"
-            v-on:click="konfirmasiTutupRakor">
-            <LucideCheckCheck class="mr-2"/>
-            Konfirmasi
-          </button>
-        </div>
-      </div>
-    </DialogContent>
-  </Dialog>
-</template>

package/template/src/layouts/SettingsLayout.vue

@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import ScrollArea from "../components/ui/scroll-area/ScrollArea.vue";
-import LucideIcon from "../components/helper/LucideIcon.vue";
-import { ref, onMounted, watch } from "vue";
-import { useRoute } from "vue-router";
-
-interface Menu {
-  id: string;
-  name: string;
-  uri?: string;
-  icon?: string;
-  iconSize?: number;
-  iconType?: "svg" | "lucide";
-  hasData?: boolean;
-  connectApi?: boolean;
-  finished?: boolean;
-  submenu?: Menu[];
-}
-
-const menu: Menu[] = [
-  {
-    id: "personal",
-    name: "Personal Settings",
-    submenu: [
-      {
-        id: "profile",
-        name: "Profile Settings",
-        icon: "CircleUser",
-        uri: "/settings/profile"
-      },
-      {
-        id: "account",
-        name: "Account Settings",
-        icon: "UserCog",
-        uri: "/settings/account"
-      },
-      {
-        id: "device",
-        name: "Devices",
-        icon: "Smartphone",
-        uri: "/settings/device"
-      }
-    ]
-  },
-  {
-    id: "security",
-    name: "Security",
-    submenu: [
-      {
-        id: "logs",
-        name: "Audit Logs",
-        icon: "ScrollText",
-        uri: "/settings/audit-logs"
-      }
-      // {
-      //   name: 'API Access',
-      //   icon: 'FileKey2',
-      // },
-    ]
-  }
-];
-
-const route = useRoute();
-
-const menuOpen = ref("");
-
-watch(route, to => {
-  findMenuOpen(to.path);
-});
-
-function findMenuOpen(path: string) {
-  searhMenu: for (const item of menu) {
-    if (!item.submenu) continue;
-    for (const sub of item.submenu) {
-      if (sub.uri === path) {
-        menuOpen.value = sub.id;
-        break searhMenu;
-      }
-    }
-  }
-}
-
-onMounted(() => {
-  findMenuOpen(route.path);
-});
-</script>
-
-<template>
-  <section class="dark:bg-dark_bg3 fixed bottom-0 left-20 top-14 z-9 w-80 border-r bg-white">
-    <ScrollArea class="h-full px-2 pb-5">
-      <div v-for="(item, i) in menu" :key="i" class="pt-5">
-        <div class="my-1 flex items-center px-3 text-[13px] font-semibold uppercase text-gray-400">
-          {{ item.name }}
-        </div>
-        <div v-for="(sub, i) in item.submenu" :key="i">
-          <RouterLink
-            :to="sub.uri || '#'"
-            class="hover:bg-dasi_hover hover:text-dasi_primary relative my-2 block rounded-md py-2.5 pl-11 pr-4 text-sm font-[500]"
-            :class="{ '!bg-dasi_primary !text-white': menuOpen && menuOpen === sub.id }">
-            <div class="absolute left-3 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center">
-              <div v-html="sub.icon" v-if="sub.iconType === 'svg'"></div>
-              <LucideIcon :name="sub.icon" :size="sub.iconSize || 19" :strokeWidth="1.4"></LucideIcon>
-            </div>
-            {{ sub.name }}
-          </RouterLink>
-        </div>
-      </div>
-    </ScrollArea>
-  </section>
-  <section class="pl-80">
-    <div class="p-5 text-sm">
-      <RouterView />
-    </div>
-  </section>
-</template>

package/template/src/lib/constants.ts

@@ -1,2 +0,0 @@
-export const InternalServerError = 'Internal server error, mohon coba beberapa saat lagi';
-export const DibutuhkanPerbaikanLabel = '<p class="text-red-500 font-medium text-[12px]">Dibutuhkan perbaikan</p>';

package/template/src/lib/detail.utils.ts

@@ -1,213 +0,0 @@
-import type { DasiV2FormSchema } from "../types/form.types";
-
-/**
- * Generic schema mapping utility
- * Maps data from API response to form schema defaults
- */
-export async function schemaMaping(schema: DasiV2FormSchema, items: any) {
-  // Process each field in schema
-  for (const [key, item] of Object.entries(schema)) {
-    processSchemaField(key, item, items);
-  }
-}
-
-function processSchemaField(key: string, item: any, items: any) {
-  // Generate search key variations (removes Id, Ids, Code suffixes)
-  const searchKey = generateSearchKey(key);
-
-  // Try direct mapping from main data
-  setDirectMapping(key, searchKey, item, items);
-
-  // Fallback: try mapping from parent object if present
-  // Generic pattern: look for parent[searchKey] or parent[key]
-  const parentKeys = ['parent', 'parentData', 'related'];
-  for (const parentKey of parentKeys) {
-    if ((item.default === undefined || item.default === null || item.default === "") && items?.[parentKey]) {
-      const parent = items[parentKey];
-      // Direct key mapping
-      if (parent[searchKey] !== undefined && parent[searchKey] !== null) {
-        item.default = parent[searchKey];
-        break;
-      } else if (parent[key] !== undefined && parent[key] !== null) {
-        item.default = parent[key];
-        break;
-      } else {
-        // Selector/organization style keys
-        if (["dasi_v2_selector_single", "dasi_v2_config_data_selector", "dasi_v2_organization"].includes(item.type)) {
-          const theKey = key.endsWith("Id")
-            ? key.substring(0, key.length - 2)
-            : key.endsWith("Code") && key !== "unitCode"
-              ? key.substring(0, key.length - 4)
-              : key.endsWith("Ids")
-                ? key.substring(0, key.length - 3)
-                : key;
-          if (parent[theKey] !== undefined && parent[theKey] !== null) {
-            item.default = parent[theKey];
-            break;
-          }
-        }
-      }
-    }
-  }
-
-  // Fallback: try mapping from array of related items (first item)
-  const relatedArrayKeys = ['relatedItems', 'items', 'children'];
-  for (const arrayKey of relatedArrayKeys) {
-    if ((item.default === undefined || item.default === null || item.default === "") && Array.isArray(items?.[arrayKey]) && items[arrayKey].length > 0) {
-      const firstItem = items[arrayKey][0];
-      // Try direct key mapping
-      if (firstItem[searchKey] !== undefined && firstItem[searchKey] !== null) {
-        item.default = firstItem[searchKey];
-        break;
-      } else if (firstItem[key] !== undefined && firstItem[key] !== null) {
-        item.default = firstItem[key];
-        break;
-      }
-    }
-  }
-
-  // Handle organization mapping
-  if (key === "organizationId" && items.organization) {
-    item.default = items.organization;
-  }
-
-  // Handle accessLevelId mapping
-  if (key === "accessLevelId") {
-    item.default = items.accessLevel || null;
-  }
-
-  // Handle Selector types
-  if (["dasi_v2_selector_single", "dasi_v2_config_data_selector", "dasi_v2_organization", "file"].includes(item.type)) {
-    const theKey =
-      key.substring(key.length - 2, key.length) === "Id"
-        ? key.substring(0, key.length - 2)
-        : key.substring(key.length - 4, key.length) === "Code" && key !== "unitCode"
-          ? key.substring(0, key.length - 4)
-          : key.substring(key.length - 3, key.length) === "Ids"
-            ? key.substring(0, key.length - 3)
-            : key;
-
-    item.default = items[theKey] || null;
-  }
-
-  // Handle file type
-  if (item.type === "file") {
-    const theKey = key.endsWith("Id") ? key.substring(0, key.length - 2) : key;
-    item.default = items[theKey] || null;
-  }
-
-  // Handle date range mapping
-  if (key.endsWith("Range") && item.type === "dasi_v2_date_range") {
-    // For date range fields, virtual fields will be handled separately
-    // The template will look for {key}Awal and {key}Akhir fields
-  }
-
-  // Fallback for createdAt
-  if (key === "createdAt" && !item.default && items.createdAt) {
-    item.default = items.createdAt;
-  }
-}
-
-function getNestedValue(obj: any, path: string): any {
-  return path.split(".").reduce((current, key) => {
-    if (current === null || current === undefined) {
-      return null;
-    }
-
-    // Handle array notation like "items.0.field"
-    if (!isNaN(Number(key))) {
-      const index = Number(key);
-      return Array.isArray(current) && current[index] ? current[index] : null;
-    }
-
-    return current[key];
-  }, obj);
-}
-
-function generateSearchKey(key: string): string {
-  const suffixes = [
-    { suffix: "Id", length: 2 },
-    { suffix: "Ids", length: 3 },
-    { suffix: "Code", length: 4 }
-  ];
-
-  for (const { suffix, length } of suffixes) {
-    if (key.endsWith(suffix) && key !== "unitCode") {
-      return key.substring(0, key.length - length);
-    }
-  }
-
-  return key;
-}
-
-function setDirectMapping(key: string, searchKey: string, item: any, items: any) {
-  for (const [itemKey, value] of Object.entries(items)) {
-    if (searchKey === itemKey || key === itemKey) {
-      // Don't override if value is null/undefined for organization fields
-      if ((value === null || value === undefined) && key.endsWith("Id")) {
-        break;
-      }
-      item.default = value;
-      break;
-    }
-  }
-}
-
-/**
- * Add virtual fields for date range types to support template rendering
- */
-function addVirtualDateRangeFields(schema: DasiV2FormSchema, items: any) {
-  // Find all date range fields
-  for (const [key, item] of Object.entries(schema)) {
-    if (item.type === "dasi_v2_date_range") {
-      // Add virtual Start field
-      const startKey = `${key}Start`;
-      if (!schema[startKey] && items[startKey]) {
-        schema[startKey] = {
-          type: "hidden",
-          default: items[startKey],
-          showInDetail: false
-        };
-      }
-
-      // Add virtual End field
-      const endKey = `${key}End`;
-      if (!schema[endKey] && items[endKey]) {
-        schema[endKey] = {
-          type: "hidden",
-          default: items[endKey],
-          showInDetail: false
-        };
-      }
-
-      // Also try Awal/Akhir pattern as fallback (Indonesian naming)
-      const awalKey = `${key}Awal`;
-      if (!schema[awalKey] && items[awalKey]) {
-        schema[awalKey] = {
-          type: "hidden",
-          default: items[awalKey],
-          showInDetail: false
-        };
-      }
-
-      const akhirKey = `${key}Akhir`;
-      if (!schema[akhirKey] && items[akhirKey]) {
-        schema[akhirKey] = {
-          type: "hidden",
-          default: items[akhirKey],
-          showInDetail: false
-        };
-      }
-
-      // Also try Mulai pattern as fallback
-      const mulaiKey = `${key}Mulai`;
-      if (!schema[mulaiKey] && items[mulaiKey]) {
-        schema[mulaiKey] = {
-          type: "hidden",
-          default: items[mulaiKey],
-          showInDetail: false
-        };
-      }
-    }
-  }
-}