@dasidev/dasi-ui 1.0.0

package/src/components/detail/DetailContentItems.vue

@@ -0,0 +1,388 @@
+<script setup lang="ts">
+import type { DasiV2FormSchema, FormSchema, FormSchemaHooks } from "@/types/form.types";
+import { LucideBuilding, LucideCheck, LucideFile } from "lucide-vue-next";
+import moment from "moment";
+import DetailContentTablet from "./DetailContentTablet.vue";
+import { formatNumberIntl, numberToMonth } from "@/lib/utils";
+import { onMounted, computed, watch, ref } from "vue";
+import { schemaMaping } from "@/lib/detail.utils";
+import api from "@/api/api";
+
+interface DetailItemProps {
+  schema: DasiV2FormSchema; // Support both old and new formats
+  data: any;
+  hooks?: FormSchemaHooks;
+}
+
+const props = defineProps<DetailItemProps>();
+const detailSchma = ref();
+const docViewer = ref<any>(null);
+
+const formHooks = ["onBeforeMount", "onMounted", "onBeforeSubmit", "onChange", "onMountedDetail"];
+
+// Helper function to get nested property value
+function getNestedValue(obj: any, path: string): any {
+  return path.split(".").reduce((current, key) => current?.[key], obj);
+}
+
+// Helper function to determine if item should be shown in detail view
+function shouldShowInDetail(item: any): boolean {
+  return item.showInDetail !== false && item.type !== "hidden" && item.type !== "button" && typeof item !== "function";
+}
+
+function getDetailValue(fieldKey: string): any {
+  // Prefer schema default if present, otherwise take from data
+  const fieldDef = (detailSchma.value || {})[fieldKey];
+  if (fieldDef && typeof fieldDef === "object" && "default" in fieldDef) return fieldDef.default;
+  return (props.data || {})[fieldKey];
+}
+
+function isEmptyValue(val: any): boolean {
+  if (val === null || val === undefined) return true;
+  if (typeof val === "string" && val.trim() === "") return true;
+  if (Array.isArray(val) && val.length === 0) return true;
+  return false;
+}
+
+function evaluateClause(fieldKey: string, operator: string, expected: any): boolean {
+  const actual = getDetailValue(fieldKey);
+  switch (operator) {
+    case "in":
+      return Array.isArray(expected) ? expected.includes(actual) : expected === actual;
+    case "not_in":
+      return Array.isArray(expected) ? !expected.includes(actual) : expected !== actual;
+    case "not_empty":
+      return !isEmptyValue(actual);
+    case "empty":
+      return isEmptyValue(actual);
+    case "=":
+    case "eq":
+      return actual === expected;
+    case "!=":
+    case "neq":
+      return actual !== expected;
+    default:
+      return true;
+  }
+}
+
+function normalizeConditions(conds: any): Array<[string, string, any]> {
+  const clauses: Array<[string, string, any]> = [];
+  if (!Array.isArray(conds)) return clauses;
+  for (const c of conds) {
+    if (Array.isArray(c) && Array.isArray(c[0]) && typeof c[0][0] === "string") {
+      // Nested list of clauses
+      for (const sub of c) {
+        if (Array.isArray(sub) && sub.length >= 2) {
+          clauses.push([sub[0], sub[1] || "eq", sub[2]] as any);
+        }
+      }
+    } else if (Array.isArray(c) && c.length >= 2) {
+      clauses.push([c[0], c[1] || "eq", c[2]] as any);
+    }
+  }
+  return clauses;
+}
+
+function meetsConditions(key: string | number, item: any): boolean {
+  if (!item || !item.conditions) return true;
+  const clauses = normalizeConditions(item.conditions);
+  for (const [fieldKey, operator, expected] of clauses) {
+    if (!evaluateClause(fieldKey, operator, expected)) return false;
+  }
+  return true;
+}
+
+const filteredSchema = computed(() => {
+  if (!detailSchma.value) return {};
+
+  if (Array.isArray(detailSchma.value)) {
+    return detailSchma.value;
+  }
+
+  // Handle new FormSchema structure
+  if (detailSchma.value.schema && typeof detailSchma.value.schema === "object") {
+    const filtered: any = {};
+    for (const [key, value] of Object.entries(detailSchma.value.schema)) {
+      if (!formHooks.includes(key)) {
+        filtered[key] = value;
+      }
+    }
+    return filtered;
+  }
+
+  // Legacy structure (DasiV2FormSchema or direct object)
+  const filtered: any = {};
+  for (const [key, value] of Object.entries(detailSchma.value)) {
+    if (!formHooks.includes(key)) {
+      filtered[key] = value;
+    }
+  }
+
+  return filtered;
+});
+
+async function prepareSchema() {
+  if (!detailSchma.value) return;
+
+  // Call onMountedDetail FIRST, before schemaMaping
+  if (props.hooks?.onMountedDetail) {
+    const result = await props.hooks.onMountedDetail({ ...detailSchma.value }, props.data);
+    if (!result) return;
+  }
+
+  await schemaMaping(detailSchma.value, props.data);
+
+  // Fallback: isi default dari data jika belum ada (hanya untuk field yang belum di-mapping)
+  for (const key in detailSchma.value) {
+    if (
+      detailSchma.value.hasOwnProperty(key) &&
+      props.data?.hasOwnProperty(key) &&
+      typeof detailSchma.value[key] === "object" &&
+      detailSchma.value[key] !== null &&
+      detailSchma.value[key].default === undefined
+    ) {
+      // Hanya override jika data dari props.data tidak kosong dan lebih lengkap
+      const propsData = props.data[key];
+      if (propsData !== null && propsData !== undefined && propsData !== "") {
+        // Untuk array, pastikan tidak kosong
+        if (Array.isArray(propsData) && propsData.length > 0) {
+          detailSchma.value[key].default = propsData;
+        } else if (!Array.isArray(propsData)) {
+          detailSchma.value[key].default = propsData;
+        }
+      }
+    }
+  }
+
+  // Inisialisasi default dari nullValue jika masih undefined
+  for (const key in detailSchma.value) {
+    if (detailSchma.value.hasOwnProperty(key) && typeof detailSchma.value[key] === "object" && detailSchma.value[key] !== null) {
+      const field = detailSchma.value[key];
+      if (field.default === undefined && field.nullValue !== undefined) {
+        field.default = field.nullValue;
+      }
+    }
+  }
+
+  // Jika data punya targetLoading tapi schema tidak, tambahkan field targetLoading ke schema detail
+  if (props.data?.targetLoading && !detailSchma.value.targetLoading) {
+    detailSchma.value.targetLoading = {
+      type: "date_selector",
+      label: "Tanggal Loading",
+      default: props.data.targetLoading,
+      showInDetail: true
+    };
+  }
+}
+
+watch(
+  () => props.data,
+  async () => {
+    await prepareSchema();
+  }
+);
+
+// Deep copy function that preserves functions
+function deepCopyWithFunctions(obj: any): any {
+  if (obj === null || typeof obj !== "object") return obj;
+  if (obj instanceof Date) return new Date(obj);
+  if (Array.isArray(obj)) return obj.map(deepCopyWithFunctions);
+
+  const copy: any = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      copy[key] = deepCopyWithFunctions(obj[key]);
+    }
+  }
+  return copy;
+}
+
+onMounted(async () => {
+  detailSchma.value = deepCopyWithFunctions(props.schema);
+  await prepareSchema();
+});
+</script>
+
+<template>
+  <section class="detail-items space-y-2.5 px-6 py-4">
+    <template v-for="(item, i) in filteredSchema" :key="i">
+      <div v-if="item.type === 'static' && item.showInDetail !== false" v-html="item.content"></div>
+      <div class="flex text-sm" v-else-if="shouldShowInDetail(item) && meetsConditions(i, item)">
+        <div class="w-56 flex-none text-gray-500">
+          {{ item.cellHeader || item.label || item.text }}
+        </div>
+        <div class="flex-none pr-2">:</div>
+        <div class="flex w-full font-medium">
+          <template v-if="(item.default !== undefined && item.default !== null && item.default !== '') || item.type === 'toggle' || (Array.isArray(item.default) && item.default.length > 0)">
+            <!-- Debug log untuk field yang tidak ditampilkan -->
+            <div v-if="['managerId', 'adminId', 'superadminId', 'userId'].includes(String(i))" style="display: none"></div>
+            <!-- Organization display (now handled by unified selector) -->
+            <DetailContentTablet
+              class="pl-[5px] font-medium"
+              v-if="item.type === 'selector' && item.showAvatar && !item.multiple"
+              :class="{ 'rounded-md': (Array.isArray(item.default) ? item.default[0] : item.default)?.accessLevel }">
+              <div
+                class="flex size-[22px] flex-none items-center justify-center rounded-full bg-blue-500 text-[11px] font-medium text-white"
+                :class="{ 'mb-auto': (Array.isArray(item.default) ? item.default[0] : item.default)?.accessLevel }">
+                {{
+                  (() => {
+                    const data = Array.isArray(item.default) ? item.default[0] : item.default;
+                    return (data?.name || data?.id || "").substring(0, 1) || "?";
+                  })()
+                }}
+              </div>
+              <div class="leading-snug">
+                {{
+                  (() => {
+                    const data = Array.isArray(item.default) ? item.default[0] : item.default;
+                    return data?.name || data?.id || "-";
+                  })()
+                }}
+                <div class="flex items-center pt-px text-xs opacity-75" v-if="(Array.isArray(item.default) ? item.default[0] : item.default)?.accessLevel">
+                  <LucideBuilding class="-mt-px mr-1 size-3.5" />
+                  {{ (Array.isArray(item.default) ? item.default[0] : item.default)?.accessLevel?.name }}
+                </div>
+              </div>
+            </DetailContentTablet>
+            <!-- Unified Selector Element (single selection) -->
+            <template v-else-if="item.type === 'selector' && !item.multiple">
+              <template v-if="item.nameFieldFunc && item.default">
+                <div v-html="item.nameFieldFunc(item.default)"></div>
+              </template>
+              <template v-else-if="item.nameField && item.default">
+                {{
+                  (() => {
+                    // Handle array case - take first element
+                    const data = Array.isArray(item.default) ? item.default[0] : item.default;
+
+                    // Handle nested properties like 'masterEpiKapal.nama'
+                    if (item.nameField.includes(".")) {
+                      const value = getNestedValue(data, item.nameField);
+                      return value || "";
+                    }
+
+                    return data?.[item.nameField] || "";
+                  })()
+                }}
+              </template>
+              <template v-else-if="item.default && typeof item.default === 'object'">
+                {{
+                  (() => {
+                    // Handle array case - take first element
+                    const data = Array.isArray(item.default) ? item.default[0] : item.default;
+                    return data?.name || data?.nama || data?.label || data?.noPenagihan || data?.id || JSON.stringify(data);
+                  })()
+                }}
+              </template>
+              <template v-else>
+                {{ item.default || "-" }}
+              </template>
+            </template>
+
+            <!-- Unified Selector Element (multiple selection) -->
+            <div v-else-if="item.type === 'selector' && item.multiple">
+              <template v-if="!item.default || !Array.isArray(item.default) || item.default.length === 0"> - </template>
+              <template v-else>
+                <div class="space-y-1">
+                  <div class="flex w-full items-center gap-2.5 rounded-sm border px-2 py-2 leading-[1.125]" v-for="sub in item.default" :key="sub.id">
+                    <div class="flex size-8 items-center justify-center rounded-md border">
+                      <LucideCheck :size="20" class="opacity-60" />
+                    </div>
+                    <div>
+                      {{
+                        (() => {
+                          // Try to get name from uraian relation
+                          if (sub?.uraian?.name) {
+                            return sub.uraian.name;
+                          }
+
+                          return (sub[item.field || "_"] || sub)[item.nameField || "_"] || "-";
+                        })()
+                      }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+
+            <!-- Config Data Selector Element -->
+            <template v-else-if="item.type === 'config_data_selector'">
+              {{ item.default?.name || "" }}
+            </template>
+
+            <!-- Date Selector Element -->
+            <template v-else-if="item.type === 'date_selector'">
+              <template v-if="item.range && Array.isArray(item.default)">
+                <template v-if="item.default.length === 2 && item.default[0] && item.default[1]">
+                  {{ moment(item.default[0]).format("DD/MM/YYYY") }} - {{ moment(item.default[1]).format("DD/MM/YYYY") }}
+                </template>
+                <template v-else>-</template>
+              </template>
+              <template v-else-if="item.default">
+                {{ moment(item.default).format("DD/MM/YYYY") }}
+              </template>
+              <template v-else>-</template>
+            </template>
+            <!-- Standard text elements -->
+            <template v-else-if="['text', 'textarea', 'email', 'password', 'number', 'tel', 'url'].includes(item.type)">
+              <div class="flex items-center gap-1">
+                <div v-if="item.cellRender" v-html="item.cellRender(0, data)"></div>
+                <div v-else class="flex items-center gap-1">
+                  <span v-if="item?.addons?.before" v-html="item?.addons?.before"></span>
+                  <span>
+                    {{
+                      item?.mask?.thousandsSeparator === ","
+                        ? item.default != null && item.default !== ""
+                          ? formatNumberIntl(item.default)
+                          : "-"
+                        : item.default != null && item.default !== ""
+                          ? item.default
+                          : "-"
+                    }}
+                  </span>
+                  <span v-if="item?.addons?.after" v-html="item?.addons?.after"></span>
+                </div>
+              </div>
+            </template>
+            <!-- Standard form elements -->
+            <template v-else-if="['radiogroup', 'select', 'checkboxgroup'].includes(item.type)">
+              <template v-if="Array.isArray(item.items)">
+                {{ item.items.find((opt: any) => opt.value === item.default)?.label || item.default || "-" }}
+              </template>
+              <template v-else>
+                {{ item.default || "-" }}
+              </template>
+            </template>
+            <!-- Toggle and checkbox elements -->
+            <template v-else-if="['toggle', 'checkbox'].includes(item.type)">
+              <span class="text-green-500" v-if="item.default">Ya</span>
+              <span class="text-red-500" v-else>Tidak</span>
+            </template>
+
+            <!-- File element -->
+            <a v-else-if="item.type === 'file'" :href="item.default?.url" target="_blank" class="flex w-fit items-center gap-3 rounded-md border px-1 py-1 pr-3.5">
+              <div class="flex size-10 items-center justify-center rounded-sm bg-blue-100 text-blue-500">
+                <LucideFile :size="24" :stroke-width="1.5" />
+              </div>
+              <div class="pt-0.5s leading-[1.2]">
+                <h4>{{ item.default?.filename || "File" }}</h4>
+                <p class="text-xs font-normal opacity-65" v-if="item.default?.creatorAt">Diunggah pada {{ moment(item.default.creatorAt).format("DD/MM/YYYY HH:mm") }}</p>
+              </div>
+            </a>
+
+            <!-- Hidden fields -->
+            <div v-else-if="item.type === 'hidden' && item.label">{{ item.default ?? "-" }}</div>
+
+            <!-- Fallback for unknown types -->
+            <template v-else>
+              {{ item.default ?? "-" }}
+            </template>
+          </template>
+          <div v-else-if="item.cellRender" v-html="item.cellRender(0, data)"></div>
+          <template v-else>{{ item.default ?? "-" }}</template>
+        </div>
+      </div>
+    </template>
+  </section>
+</template>

package/src/components/detail/DetailContentLoading.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Skeleton from '../ui/skeleton/Skeleton.vue';
+</script>
+
+<template>
+  <section class="p-6 pt-7">
+    <Skeleton class="h-9 mb-2"/>
+    <Skeleton class="h-4 mb-2 w-40"/>
+    <Skeleton class="h-3 mb-2 w-[75%]"/>
+    <Skeleton class="h-3 mb-2 w-[50%]"/>
+  </section>
+</template>

package/src/components/detail/DetailContentTablet.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+const props = defineProps(['class'])
+</script>
+
+<template>
+  <div :class="cn('text-sm flex items-center w-fit rounded-full pl-2 pr-3 py-1 gap-2 bg-blue-50 dark:bg-slate-700', props.class)">
+    <slot></slot>
+  </div>
+</template>