@dasidev/dasi-ui 1.0.0

package/src/components/detail/DetailSheet.vue

@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { ArrowLeftToLine, LucideFileClock, LucideX } from "lucide-vue-next";
+import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import ScrollArea from "@/components/ui/scroll-area/ScrollArea.vue";
+import { cn } from "@/lib/utils";
+import DetailTimeline from "@/components/detail/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/src/components/detail/DetailTimeline.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import api from "@/api/api";
+import moment from "moment";
+import { onMounted, ref } from "vue";
+import Skeleton from "@/components/ui/skeleton/Skeleton.vue";
+import { LucideEdit, LucideFileClock, LucideSquareSplitHorizontal, 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/src/components/detail/DocApprovalDialog.vue

@@ -0,0 +1,29 @@
+<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>