@dasidev/dasi-ui 1.0.19 → 1.0.21

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

@@ -1,164 +0,0 @@
-<script lang="ts" setup>
-import type { DasiV2FormSchema, FormSchemaItem } from "../../types/form.types";
-import DetailContentItem from "./DetailContentItem.vue";  
-import { 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/template/src/components/detail/DetailContentHeader.vue

@@ -1,83 +0,0 @@
-<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/template/src/components/detail/DetailContentItem.vue

@@ -1,186 +0,0 @@
-<script setup lang="ts">
-import { LucideBuilding, LucideCheck, LucideFile } from "lucide-vue-next";
-import moment from "moment";
-import DetailContentTablet from "./DetailContentTablet.vue";
-import { formatNumberIntl, getNestedValue } 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>