@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/components/detail/DetailSheet.vue

@@ -1,294 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { ArrowLeftToLine, LucideFileClock, LucideX } from "lucide-vue-next";
-import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet";
-import ScrollArea from "../ui/scroll-area/ScrollArea.vue";
-import { cn } from "../../lib/utils";
-import DetailTimeline from "./DetailTimeline.vue";
-import type { DasiV2FormSchema, FormSchema, FormSchemaHooks } from "../../types/form.types";
-import DetailContentLoading from "./DetailContentLoading.vue";
-import DetailContentHeader from "./DetailContentHeader.vue";
-import DetailContentItems from "./DetailContentItems.vue";
-import DCI2 from "./DCI2.vue";
-import moment from "moment";
-import BtnCircle from "../button/BtnCircle.vue";
-import type { ColumnRef, PageConfig } from "../../vueform/config/types";
-import { getPageDataDetail } from "../../lib/page.utils";
-import { useErrorDialog } from "../../stores/dialog";
-import { InternalServerError } from "../../lib/constants";
-
-interface Props {
-  title?: string;
-  class?: string;
-}
-
-interface DetailSheetOptions {
-  item: any;
-  endpoint: string;
-  schema?: DasiV2FormSchema;
-  columns?: ColumnRef[];
-  hooks?: FormSchemaHooks;
-  pageConfig?: PageConfig;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "Data Detail"
-});
-
-const sheetOpen = ref(false);
-const endpoint = ref<string>();
-const data = ref<any>(null);
-const loading = ref(true);
-const schema = ref<DasiV2FormSchema>();
-const columns = ref<ColumnRef[]>([]);
-const hooks = ref<FormSchemaHooks>();
-const pageConfig = ref<PageConfig>();
-
-/**
- * For shipment and payment flow
- * when displaying parent and child data
- *
- */
-const parentData = ref<any>(null);
-const loadingParent = ref(false);
-
-/**
- * Dialog
- *
- */
-const errorDialog = useErrorDialog();
-
-/**
- * Timeline
- *
- */
-const payload = ref();
-const prevData = ref();
-const loadingDiff = ref(false);
-const tlSelected = ref();
-
-function closeDiff() {
-  tlSelected.value = null;
-  payload.value = null;
-  prevData.value = null;
-}
-
-/**
- * Get data from api
- *
- */
-function getData() {
-  loading.value = true;
-
-  // Simpan data dari list untuk fallback jika detail tidak lengkap
-  // const originalItem = data.value ? JSON.parse(JSON.stringify(data.value)) : null;
-
-  /**
-   * This is flow page,
-   * used on shipment and payment
-   *
-   */
-  const parentId = data.value.id;
-  if (pageConfig.value?.parentField && pageConfig.value.nextDataField) {
-    loadingParent.value = true;
-    getPageDataDetail({
-      endpoint: pageConfig.value.endpoint ?? "",
-      pageConfig: pageConfig.value,
-      item: { id: parentId },
-      formSchema: schema.value ?? {}
-    })
-      .then(r => {
-        if (!r || !r.data) return;
-        parentData.value = r.data.data || r.data;
-      })
-      .catch(err => {
-        prevData.value = null;
-        errorDialog.open({
-          title: "Gagal Mendapatkan Data",
-          description: err.message ?? InternalServerError
-        });
-      })
-      .finally(() => {
-        loadingParent.value = false;
-      });
-  }
-
-  getPageDataDetail({
-    endpoint: endpoint.value ?? "",
-    pageConfig: pageConfig.value,
-    item: data.value,
-    formSchema: schema.value ?? {},
-    includeExtras: !pageConfig.value?.parentField
-  })
-    .then(r => {
-      if (!r || !r.data) return;
-      data.value = r.data.data || r.data;
-
-      // // Gabungkan relasi yang kosong dari data list jika endpoint detail tidak mengembalikannya
-      // if (originalItem) {
-      //   if ((!data.value.catatBongkarDs || data.value.catatBongkarDs.length === 0) && originalItem.catatBongkarDs && originalItem.catatBongkarDs.length > 0) {
-      //     data.value.catatBongkarDs = originalItem.catatBongkarDs;
-      //   }
-      //   if ((!data.value.loadingInfoCif || data.value.loadingInfoCif.length === 0) && originalItem.loadingInfoCif && originalItem.loadingInfoCif.length > 0) {
-      //     data.value.loadingInfoCif = originalItem.loadingInfoCif;
-      //   }
-      //   if ((!data.value.norIzinSandarBongkar || data.value.norIzinSandarBongkar.length === 0) && originalItem.norIzinSandarBongkar && originalItem.norIzinSandarBongkar.length > 0) {
-      //     data.value.norIzinSandarBongkar = originalItem.norIzinSandarBongkar;
-      //   }
-      // }
-
-      // // Add creator name for header display - fallback chain
-      // if (data.value.roa && Array.isArray(data.value.roa) && data.value.roa.length > 0) {
-      //   const roaData = data.value.roa[0];
-      //   if (roaData.creatorName && !data.value.creatorName) {
-      //     data.value.creatorName = roaData.creatorName;
-      //   }
-      // }
-
-    })
-    .catch(err => {
-      console.log("get detail data failed", err);
-      data.value = null;
-    })
-    .finally(() => {
-      loading.value = false;
-      // setTimeout(() => {
-      //   const dci = document.getElementById('detail-content-items');
-      //   if (!dci) return;
-      //   dci.style.minHeight = `calc(100vh - ${dci.getBoundingClientRect().top + 33}px)`; // 1 border
-      // });
-    });
-}
-
-function open(options: DetailSheetOptions) {
-  sheetOpen.value = true;
-  data.value = options.item;
-  schema.value = options.schema;
-  hooks.value = options.hooks;
-  pageConfig.value = options.pageConfig;
-
-  columns.value = [];
-
-  /**
-   * Payment flow, columns and schema are different
-   * sources, so we need to display it separately
-   *
-   */
-  if (pageConfig.value?.parentField && pageConfig.value.nextDataField) {
-    for (const column of options.columns ?? []) {
-      if (
-        (!options.schema?.[column.key ?? "_"] && !options.schema?.[`${column.key}Id`] && !options.schema?.[`${column.key}Code`]) ||
-        options.schema?.[column.key ?? "_"]?.showInDetail === false ||
-        options.schema?.[`${column.key}Id`]?.showInDetail === false ||
-        options.schema?.[`${column.key}Code`]?.showInDetail === false
-      ) {
-        columns.value?.push(column);
-      }
-    }
-  } else {
-    /**
-     * Merge columns to schema
-     */
-    // for (const column of options.columns ?? []) {
-    //   if (!schema.value) continue;
-    //   if (column.key === 'id' || column.type === 'action') continue;
-    //   if (!schema.value[column.key]) schema.value[column.key] = { type: column.cellType };
-    //   schema.value[column.key].cellRender = column.cellRender as any;
-    //   schema.value[column.key].cellDataSource = column.dataSource;
-    //   schema.value[column.key].label = column.header;
-    //   schema.value[column.key].showInDetail = column.showInDetail;
-    // }
-  }
-
-  /**
-   * Reset timeline
-   *
-   */
-  tlSelected.value = null;
-  prevData.value = null;
-  payload.value = null;
-  loadingDiff.value = false;
-
-  const slash = options.endpoint.startsWith("/") ? "" : "/";
-  endpoint.value = `${slash}${options.endpoint}`;
-  getData();
-}
-
-defineExpose({ open });
-</script>
-
-<template>
-  <Sheet v-model:open="sheetOpen">
-    <SheetContent :class="cn('w-11/12 !max-w-[1360px] bg-white px-8 pt-3 dark:bg-dark_bg2', props.class)">
-      <SheetHeader class="relative gap-y-0.5 pl-6">
-        <SheetClose>
-          <div
-            class="absolute -left-6 -top-1 flex size-10 cursor-pointer items-center justify-center rounded-full text-gray-500 transition hover:bg-hover_main hover:text-primary_main dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-            <ArrowLeftToLine class="h-6 w-6 -scale-x-100 transform" />
-          </div>
-        </SheetClose>
-        <SheetTitle>{{ props.title }}</SheetTitle>
-      </SheetHeader>
-      <section class="absolute bottom-0 left-0 right-0 top-14 flex border-b border-t bg-slate-50 dark:border-dark_border3 dark:bg-dark_bg2">
-        <slot name="detail" :detail="data">
-          <div class="h-full w-[calc(100%-400px)] overflow-auto border-r bg-white dark:border-gray-700 dark:bg-dark_bg2">
-            <DetailContentLoading v-if="loading || loadingParent" />
-            <div class="min-h-full bg-white pt-5 dark:bg-dark_bg2" v-else>
-              <DetailContentHeader :data="data" :endpoint="endpoint || ''" :pageConfig="pageConfig" />
-              <div v-if="payload" class="flex h-8 w-full items-center gap-1.5 border-b bg-yellow-200 px-6 text-sm font-medium dark:border-gray-700 dark:bg-yellow-800 dark:text-yellow-100">
-                <LucideFileClock :size="20" :stroke-width="1.6" class="-mt-px" />
-                Riwayat data pada {{ moment(tlSelected.createdAt).utc().format("DD/MM/YYYY HH:mm") }}
-                <BtnCircle class="-mr-3 ml-auto !size-6 hover:bg-black/10 dark:hover:bg-white/10" v-on:click="closeDiff">
-                  <LucideX :size="18" />
-                </BtnCircle>
-              </div>
-              <div id="detail-content-items" class="overflow-auto pb-[140px]">
-                <div v-if="loadingDiff">
-                  <DetailContentLoading />
-                </div>
-                <div v-else>
-                  <template v-if="columns && parentData">
-                    <section class="detail-items px-6 pt-4">
-                      <div class="vueform-divider"><span>Informasi General</span></div>
-                    </section>
-                    <DCI2 :columns="columns" :data="parentData" />
-                    <div class="border-t py-1"></div>
-                  </template>
-
-                  <div :class="{ 'grid min-h-full w-[180%] grid-cols-2': payload, '!w-[270%] !grid-cols-3': prevData }">
-                    <div class="w-full">
-                      <div class="border-b bg-slate-100 px-6 py-1.5 text-[15px] font-medium dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200" v-if="payload">Data saat ini</div>
-                      <DCI2 :schema="schema" :data="data" v-if="schema" />
-                      <!-- <DetailContentItems :schema="schema" :hooks="hooks" :data="data" v-if="schema"/> -->
-                    </div>
-                    <div class="w-full" v-if="prevData">
-                      <div class="border-b bg-slate-100 px-6 py-1.5 text-[15px] font-medium dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200">Data sebelum perubahan</div>
-                      <DetailContentItems :schema="schema" :hooks="hooks" :data="prevData" v-if="schema" />
-                    </div>
-                    <div class="w-full" v-if="payload">
-                      <div class="border-b bg-slate-100 px-6 py-1.5 text-[15px] font-medium dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200">
-                        <template v-if="prevData"> Data setelah perubahan </template>
-                        <template v-else> Data pada {{ moment(tlSelected.createdAt).utc().format("DD/MM/YYYY HH:mm") }} </template>
-                      </div>
-                      <DetailContentItems :schema="schema" :hooks="hooks" :data="payload" v-if="schema" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <ScrollArea class="h-full w-[400px]">
-            <DetailTimeline
-              v-if="data"
-              :data="data"
-              :page-config="pageConfig"
-              v-model:loading-diff="loadingDiff"
-              v-model:payload="payload"
-              v-model:prev-data="prevData"
-              v-model:selected="tlSelected" />
-          </ScrollArea>
-        </slot>
-      </section>
-    </SheetContent>
-  </Sheet>
-</template>

package/template/src/components/detail/DetailTimeline.vue

@@ -1,191 +0,0 @@
-<script setup lang="ts">
-import api from "../../api/api";
-import moment from "moment";
-import { onMounted, ref } from "vue";
-import Skeleton from "../ui/skeleton/Skeleton.vue";
-import { LucideEdit, LucideFileClock, LucideTrash2, LucideUndo2 } from "lucide-vue-next";
-
-moment.updateLocale("en", {
-  relativeTime: {
-    future: "in %s",
-    past: "%s ago",
-    s: "1s",
-    ss: "%ds",
-    m: "1m",
-    mm: "%dm",
-    h: "1h",
-    hh: "%dh",
-    d: "1d",
-    dd: "%dd",
-    w: "1w",
-    ww: "%dw",
-    M: "1Mo",
-    MM: "%dMo",
-    y: "1y",
-    yy: "%dy"
-  }
-});
-
-const props = defineProps(["data", "pageConfig"]);
-const loading = ref(true);
-const timeline = ref<any[]>([]);
-const payload = defineModel("payload");
-const prevData = defineModel("prevData");
-const loadingDiff = defineModel<boolean>("loadingDiff", { default: false });
-const selected = defineModel<any>("selected");
-
-function getTimeline() {
-  loading.value = true;
-  const tlId = props.pageConfig?.parentField && props.pageConfig?.nextDataField ? props.data[props.pageConfig.nextDataField]?.[0]?.id : props.data.id;
-  api
-    .get(`/data-history/reference/${tlId || props.data.id}?limit=250`)
-    .then(r => {
-      timeline.value = r.data.data;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-function getHistoryItem(item: any) {
-  selected.value = item;
-  loadingDiff.value = true;
-  api
-    .get(`/data-history/${item.id}/data-diff`)
-    .then(r => {
-      payload.value = r.data.data.payload;
-      prevData.value = r.data.data.prevData;
-    })
-    .finally(() => {
-      loadingDiff.value = false;
-    });
-}
-
-onMounted(() => {
-  getTimeline();
-});
-</script>
-
-<template>
-  <div class="px-1.5 pb-14 pt-3">
-    <h4 class="flex gap-2 pb-3.5 pl-4 font-medium">
-      <LucideFileClock :size="22" :stroke-width="1.6" />
-      Audit log
-    </h4>
-    <section class="relative mb-6 text-sm" v-if="loading">
-      <div class="absolute left-4 top-0 h-full w-px bg-gray-300"></div>
-      <div class="space-y-4">
-        <div class="relative flex items-center">
-          <div class="flex h-8 w-8 flex-none items-center justify-center overflow-hidden rounded-full bg-slate-50">
-            <Skeleton class="h-[13px] w-[13px] rounded-full"></Skeleton>
-          </div>
-          <div class="ml-3 w-full">
-            <Skeleton class="h-2 w-[40%]"></Skeleton>
-          </div>
-        </div>
-        <div class="relative flex items-start">
-          <div class="-ml-1.5 flex h-11 w-11 flex-none items-center justify-center overflow-hidden rounded-full border-4 border-slate-50 bg-slate-50">
-            <Skeleton class="size-11 rounded-full" />
-          </div>
-          <div class="ml-2 mr-5 mt-1 w-full rounded-sm border-slate-100 bg-slate-100 px-4 py-3">
-            <Skeleton class="mb-2 h-3 w-[30%]"></Skeleton>
-            <Skeleton class="mb-2 h-2 w-[60%]"></Skeleton>
-            <Skeleton class="h-2 w-[85%]"></Skeleton>
-          </div>
-        </div>
-        <div class="relative flex items-center">
-          <div class="flex h-8 w-8 flex-none items-center justify-center overflow-hidden rounded-full bg-slate-50">
-            <Skeleton class="h-[13px] w-[13px] rounded-full"></Skeleton>
-          </div>
-          <div class="ml-3 w-full">
-            <Skeleton class="h-2 w-[40%]"></Skeleton>
-          </div>
-        </div>
-        <div class="relative flex items-center">
-          <div class="flex h-8 w-8 flex-none items-center justify-center overflow-hidden rounded-full bg-slate-50">
-            <Skeleton class="h-[13px] w-[13px] rounded-full"></Skeleton>
-          </div>
-          <div class="ml-3 w-full">
-            <Skeleton class="h-2 w-[40%]"></Skeleton>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section class="relative mb-6 text-sm" v-else>
-      <div class="absolute left-7 top-0 h-full w-px bg-gray-300"></div>
-      <div class="space-y-0.5">
-        <div v-for="(item, i) in timeline" :key="i" class="rounded-md border border-transparent px-3 pb-3 pt-1" :class="{ '!border-blue-500 bg-blue-100': selected && item.id === selected.id }">
-          <!-- <pre>{{ item }}</pre> -->
-          <div class="relative flex items-start" v-if="['Create'].includes(item.type)">
-            <div
-              class="-ml-1.5 flex h-11 w-11 flex-none items-center justify-center overflow-hidden rounded-full border-4 border-slate-50 bg-green-300 text-[17px] font-semibold leading-none text-green-700">
-              {{ item.creatorName?.substring(0, 1)?.toUpperCase() }}
-            </div>
-            <div class="ml-2 pt-2.5 text-sm leading-[1.3]">
-              <div class="mr-1.5 font-[500]">{{ item.creatorName }}</div>
-              <div class="text-[13px] opacity-75">
-                <template v-if="item.type === 'Create'"> Membuat data baru </template>
-                <template v-else-if="item.type === 'Update'"> Melakukan perubahan data </template>
-                <template v-else>{{ item.type }}</template>
-              </div>
-              <!-- <button class="text-blue-500 text-[13px] flex items-center font-medium gap-1.5 w-full border mt-1 border-blue-500 pl-1.5 pr-2 py-0.5 rounded-md transition hover:bg-blue-500 hover:text-white"
-                v-on:click="getHistoryItem(item)">
-                <LucideSquareSplitHorizontal :size="20" :stroke-width="1.8"/>
-                Lihat riwayat data
-              </button> -->
-            </div>
-            <div class="ml-auto text-[13px] text-gray-400" :title="moment(item.createdAt).utc().format('DD/MM/YYYY HH:mm')">
-              {{ moment(item.createdAt).utc().calendar() }}
-            </div>
-          </div>
-          <div class="relative flex items-start" v-else-if="['approval_reject', 'approval_approve'].includes(item.activityCode)">
-            <div class="-ml-1.5 h-11 w-11 flex-none overflow-hidden rounded-full border-4 border-slate-50 bg-green-300 text-green-700"></div>
-            <div class="ml-2 mr-5 mt-1 rounded-sm border bg-white px-4 py-3">
-              <div class="font-semibold">{{ item.creatorName }} Approve</div>
-              <div class="mt-1 text-gray-500">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti, blanditiis?</div>
-            </div>
-            <div class="ml-auto flex-none text-[13px] text-gray-400" :title="moment(item.createdAt).utc().format('DD/MM/YYYY HH:mm')">
-              {{ moment(item.createdAt).utc().calendar() }}
-            </div>
-          </div>
-          <div class="relative flex items-start" v-else>
-            <div class="flex h-8 w-8 flex-none items-center justify-center overflow-hidden rounded-full bg-slate-50">
-              <div
-                class="flex size-6 items-center justify-center rounded-full p-1 text-white"
-                :class="{
-                  'bg-blue-500': item.type === 'Update',
-                  'bg-green-500': item.type === 'Restore',
-                  'bg-red-500': item.type === 'Delete'
-                }"
-                v-if="['Delete', 'Update', 'Restore'].includes(item.type)">
-                <LucideEdit v-if="item.type === 'Update'" />
-                <LucideTrash2 v-else-if="item.type === 'Delete'" />
-                <LucideUndo2 v-else-if="item.type === 'Restore'" />
-              </div>
-              <div class="h-[13px] w-[13px] rounded-full border-2 border-gray-400" v-else></div>
-            </div>
-            <div class="ml-4 pt-1.5 text-sm leading-[1.3]">
-              <div class="mr-1.5 font-[500]">{{ item.creatorName }}</div>
-              <div class="text-[13px] text-gray-400">
-                <template v-if="item.type === 'Delete'"> Menghapus data </template>
-                <template v-else-if="item.type === 'Restore'"> Mengembalikan data terhapus </template>
-                <template v-else-if="item.type === 'Update'"> Melakukan perubahan data </template>
-                <template v-else>{{ item.type }}</template>
-                <!-- <button class="text-blue-500 text-[13px] flex items-center font-medium gap-1.5 w-full border mt-1 border-blue-500 pl-1.5 pr-2 py-0.5 rounded-md transition hover:bg-blue-500 hover:text-white"
-                  :class="{'bg-blue-500 text-white': selected && selected.id === item.id}"
-                  v-on:click="getHistoryItem(item)"
-                  v-if="item.type === 'Update'">
-                  <LucideSquareSplitHorizontal :size="20" :stroke-width="1.8"/>
-                  Lihat riwayat data
-                </button> -->
-              </div>
-            </div>
-            <div class="ml-auto text-[13px] text-gray-400" :title="moment(item.createdAt).utc().format('DD/MM/YYYY HH:mm')">
-              {{ moment(item.createdAt).utc().calendar() }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>

package/template/src/components/detail/DocApprovalDialog.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import DocViewerContent, { type DocViewerOptions } from './DocViewerContent.vue'
-
-const data = ref<any>({});
-const docs = ref<any>([]);
-const docViewerContent = ref<InstanceType<typeof DocViewerContent>>()
-defineProps(['title', 'detailEndpoint', 'docsEndpoint', 'formSchema', 'pageConfig', 'columns']);
-
-async function open(options: DocViewerOptions) {
-  return await docViewerContent.value?.open(options);
-}
-
-defineExpose({ open });
-</script>
-
-<template>
-  <DocViewerContent
-    ref="docViewerContent"
-    :title="title"
-    :detail-endpoint="detailEndpoint"
-    :docs-endpoint="docsEndpoint"
-    :form-schema="formSchema"
-    :page-config="pageConfig"
-    :columns="columns ?? pageConfig.columns"
-    v-model:data="data"
-    v-model:docs="docs"
-  />
-</template>