@dasidev/dasi-ui 1.0.0

package/src/components/detail/DCI2.vue

@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+import type { DasiV2FormSchema, FormSchema, FormSchemaItem } from "@/types/form.types";
+import DetailContentItem from "./DetailContentItem.vue";
+import { nextTick, onMounted, ref, watch } from "vue";
+import type { ColumnRef } from "@/vueform/config/types";
+
+interface DetailItemProps {
+  columns?: ColumnRef[];
+  schema?: DasiV2FormSchema;
+  data: any;
+}
+
+const props = defineProps<DetailItemProps>();
+
+/**
+ * Like form schema item
+ * but saved as array
+ *
+ */
+const detailItems = ref<FormSchemaItem[]>([]);
+
+function schemaMaping(formSchema: DasiV2FormSchema, items: any) {
+  console.log("Schema mapping:", formSchema);
+
+  // Handle both old and new schema formats
+  let schemaItems: any = {};
+
+  if (formSchema && typeof formSchema === "object") {
+    // New FormSchema format
+    if (formSchema.schema && typeof formSchema.schema === "object") {
+      schemaItems = formSchema.schema;
+    }
+    // Old DasiV2FormSchema format (direct object)
+    else if (!formSchema.schema) {
+      schemaItems = formSchema;
+    }
+  }
+
+  // Safety check
+  if (!schemaItems || typeof schemaItems !== "object") {
+    console.warn("Invalid schema format:", formSchema);
+    return;
+  }
+
+  for (let [key, item] of Object.entries(schemaItems)) {
+    if (!item || typeof item !== "object") continue;
+
+    // Type assertion for better TypeScript support
+    const schemaItem = item as any;
+
+    /**
+     * Skip field not displayed in detail
+     * Check for schema conditions
+     */
+    if (schemaItem.showInDetail === false) continue;
+    if (["button", "static"].includes(schemaItem.type ?? "")) continue;
+
+    /**
+     * Check for nested items
+     * or flatten the schema before calling this
+     */
+    if (schemaItem.schema) {
+      if (schemaItem.label || schemaItem.cellHeader) {
+        detailItems.value.push({
+          type: "static",
+          cellType: "divider",
+          content: `<div class="vueform-divider mt-3"><span>${schemaItem.label ?? schemaItem.cellHeader}</span></div>`
+        });
+      }
+      // Recursively handle nested schema
+      schemaMaping({ schema: schemaItem.schema }, items);
+      detailItems.value.push({
+        type: "static",
+        cellType: "divider",
+        content: `<div class="vueform-divider !py-2"></div>`
+      });
+      continue;
+    }
+
+    // Normalize key for data mapping
+    let normalizedKey = key;
+    if (key.endsWith("Id")) normalizedKey = key.substring(0, key.length - 2);
+    if (key.endsWith("Ids")) normalizedKey = key.substring(0, key.length - 3);
+    if (key.endsWith("Code") && key !== "unitCode") normalizedKey = key.substring(0, key.length - 4);
+
+    // Map data to item
+    if (items && typeof items === "object") {
+      for (const [k2, value] of Object.entries(items)) {
+        if (normalizedKey === k2) {
+          schemaItem.default = value;
+          break;
+        }
+      }
+    }
+
+    /**
+     * Add to detail items to display
+     */
+    if (schemaItem.cellDataSource && typeof schemaItem.cellDataSource === "function") {
+      try {
+        schemaItem.default = schemaItem.cellDataSource(0, items);
+      } catch (error) {
+        console.warn("Error in cellDataSource for", key, error);
+      }
+    }
+
+    schemaItem.key = key;
+    detailItems.value?.push(schemaItem);
+  }
+}
+
+function initDetail() {
+  if (props.schema) schemaMaping(props.schema, props.data);
+
+  /**
+   * Also display data from columns
+   */
+  for (const item of props.columns ?? []) {
+    if (item.showInDetail === false || ["id"].includes(item.key) || ["action"].includes(item.type ?? "")) {
+      continue;
+    }
+
+    const itemValue = item.dataSource ? item.dataSource(0, props.data) : props.data[item.key ?? "_"];
+    detailItems.value.push({
+      key: item.key,
+      type: item.cellType ?? "text",
+      label: item.header,
+      cellRender: item.cellRender as any,
+      cellDataSource: item.dataSource as any,
+      cellDescripton: item.description,
+      objectKey: item.objectKey,
+      default: itemValue,
+
+      /**
+       * Used by dialog form selector
+       */
+      nameField: item.nameField,
+      nameFieldFunc: item.nameFieldFunc,
+      descriptionField: item.descriptionField,
+      descriptionFieldFunc: item.descriptionFieldFunc
+    });
+  }
+}
+
+watch(
+  () => props.schema,
+  () => {
+    initDetail();
+  }
+);
+
+onMounted(async () => {
+  initDetail();
+});
+</script>
+
+<template>
+  <section class="detail-items space-y-2.5 px-6 py-4">
+    <template v-for="(item, i) in detailItems" :key="i">
+      <!-- <div class="text-xs">{{ item.key }}</div> -->
+      <DetailContentItem :item="item" :data="data" />
+    </template>
+  </section>
+</template>

package/src/components/detail/DetailContentHeader.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { LucideCalendarClock, LucideCircleUserRound, LucideDatabase } from "lucide-vue-next";
+import moment from "moment";
+import DetailContentTablet from "./DetailContentTablet.vue";
+import DataStatusTag from "../tables/DataStatusTag.vue";
+import type { PageConfig } from "@/vueform/config/types";
+
+const props = defineProps<{
+  data: any;
+  endpoint: string;
+  pageConfig?: PageConfig;
+}>();
+
+// Get display name from config or fallback to default
+const displayName = computed(() => {
+  if (props.pageConfig?.dataName && typeof props.pageConfig.dataName === "function") {
+    return props.pageConfig.dataName(props.data);
+  }
+  return props.data?.name || props.data?.nama || "data";
+});
+</script>
+
+<template>
+  <section class="border-b px-6 pb-4 dark:border-dark_border3" v-if="data">
+    <section class="pb-3">
+      <DataStatusTag :status="data.status" class="mb-3 ml-1 scale-110" />
+      <div class="mb-1 text-xl font-medium leading-tight">
+        {{ displayName }}
+      </div>
+    </section>
+    <div class="flex flex-wrap gap-x-6 gap-y-3">
+      <section>
+        <div class="mb-0.5 text-[12px] font-medium uppercase opacity-65">Dibuat</div>
+        <div class="flex items-center gap-3 text-sm">
+          <div class="flex items-center">
+            <LucideCalendarClock :size="18" class="-mt-px mr-2" />
+            {{ moment(data.createdAt).utc().format("DD/MM/YYYY HH:mm") }}
+          </div>
+          <DetailContentTablet v-if="data.creatorName">
+            <LucideCircleUserRound :size="19" />
+            {{ data.creatorName }}
+          </DetailContentTablet>
+        </div>
+      </section>
+      <section v-if="data.updatedAt && data.updatedAt !== data.createdAt">
+        <div class="mb-0.5 text-[12px] font-medium uppercase opacity-65">Terakhir diperbarui</div>
+        <div class="flex items-center gap-3 text-sm">
+          <div class="flex items-center">
+            <LucideCalendarClock :size="18" class="-mt-px mr-2" />
+            {{ moment(data.updatedAt).utc().format("DD/MM/YYYY HH:mm") }}
+          </div>
+          <DetailContentTablet v-if="data.updaterName">
+            <LucideCircleUserRound :size="19" />
+            {{ data.updaterName }}
+          </DetailContentTablet>
+        </div>
+      </section>
+      <section v-if="endpoint == '/kurs-tengah'">
+        <div class="mb-0.5 text-[12px] font-medium uppercase opacity-65">Sumber Data</div>
+        <div class="flex items-center gap-3 text-sm">
+          <div class="flex items-center">
+            <LucideDatabase :size="18" class="-mt-px mr-2" />
+            Diambil dari Bank Indonesia
+          </div>
+        </div>
+      </section>
+      <section class="text-red-500" v-if="data.deletedAt">
+        <div class="mb-0.5 text-[12px] font-medium uppercase">Data dihapus</div>
+        <div class="flex items-center gap-3 text-sm">
+          <div class="flex items-center">
+            <LucideCalendarClock :size="18" class="-mt-px mr-2" />
+            {{ moment(data.deletedAt).format("DD/MM/YYYY HH:mm") }}
+          </div>
+          <DetailContentTablet class="bg-red-50">
+            <LucideCircleUserRound :size="19" />
+            {{ data.deleterName }}
+          </DetailContentTablet>
+        </div>
+      </section>
+    </div>
+  </section>
+</template>

package/src/components/detail/DetailContentItem.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { LucideBuilding, LucideCheck, LucideFile } from "lucide-vue-next";
+import moment from "moment";
+import DetailContentTablet from "./DetailContentTablet.vue";
+import { formatNumberIntl, getNestedValue, numberToMonth, displayNumberFormatedIntl } from "@/lib/utils";
+
+const props = defineProps(["item", "data"]);
+</script>
+
+<template>
+  <div v-if="item.type === 'static'" v-html="item.content"></div>
+  <div class="flex text-sm" v-else>
+    <div class="w-56 flex-none text-gray-500 dark:text-gray-400" v-html="item.cellHeader ?? item.label ?? item.text"></div>
+    <div class="flex-none pr-2">:</div>
+    <div class="flex w-full font-medium">
+      <!-- {{ item.type }} - {{ item.default }} -->
+      <div v-if="item.cellRender" v-html="item.cellRender(0, data)"></div>
+
+      <template v-else-if="item.default || ['checkbox', 'toggle'].includes(item.type)">
+        <!-- Organization display (now handled by unified selector) -->
+        <DetailContentTablet
+          class="items-start bg-transparent p-0 pl-[5px] font-medium"
+          v-if="item.type === 'selector' && item.showAvatar && !item.multiple"
+          :class="{ 'rounded-md': item.default?.accessLevel }">
+          <div class="-mt-0.5 flex size-[24px] flex-none items-center justify-center rounded-full bg-blue-100 text-[13px] font-medium text-blue-700" :class="{ 'mb-auto': item.default?.accessLevel }">
+            {{ (item.default?.name || "").substring(0, 1) || "?" }}
+          </div>
+          <div class="leading-snug">
+            {{ item.default?.name ?? "-" }}
+            <div class="flex items-center pt-px text-xs opacity-75" v-if="item.default?.accessLevel">
+              <LucideBuilding class="-mt-px mr-1 size-3.5" />
+              {{ 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 nested properties like 'masterEpiKapal.nama'
+                if (item.nameField.includes(".")) {
+                  const value = getNestedValue(item.default, item.nameField);
+                  return value ?? "";
+                }
+
+                return item.default?.[item.nameField] || "";
+              })()
+            }}
+          </template>
+          <template v-else-if="item.default && typeof item.default === 'object'">
+            {{ item.default?.name ?? item.default?.nama ?? item.default?.label ?? JSON.stringify(item.default) }}
+          </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="w-full space-y-1">
+              <div class="flex w-full items-center gap-2.5 rounded-sm border p-1.5 leading-[1.125] dark:border-none dark:bg-dark_bg4" v-for="sub in item.default" :key="sub.id">
+                <div class="flex size-8 items-center justify-center rounded-md border dark:bg-dark_bg3">
+                  <LucideCheck :size="20" class="opacity-60" />
+                </div>
+                <div class="leading-snug">
+                  <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>
+            </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="detail-item-with-add-ons 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-full items-center gap-3 rounded-md border px-1 py-1 pr-3.5 dark:border-gray-600 dark:bg-gray-700">
+          <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).utc().format("DD/MM/YYYY HH:mm") }}</p>
+          </div>
+        </a>
+
+        <!-- Hidden fields -->
+        <div v-else-if="item.type === 'hidden' && item.label">{{ item.default ?? "-" }}</div>
+
+        <!-- Group elements -->
+        <div v-else-if="item.type === 'group'">
+          <template v-if="item.default && typeof item.default === 'object'">
+            <div class="space-y-1">
+              <div v-for="(value, key) in item.default" :key="key" class="flex items-center gap-2">
+                <span class="text-sm text-gray-400">{{ key }}:</span>
+                <span class="font-medium">{{ value }}</span>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            {{ item.default ?? "-" }}
+          </template>
+        </div>
+
+        <!-- Fallback for unknown types -->
+        <template v-else>
+          {{ item.default ?? "-" }}
+        </template>
+      </template>
+
+      <template v-else>-</template>
+    </div>
+  </div>
+</template>