@dasidev/dasi-ui 1.0.0

package/src/components/tables/DataTableCell.vue

@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import { LucideBuilding, LucideFile } from "lucide-vue-next";
+import { convertFormatDate, numberToMonth, formatNumberIntl, formatMonthYear } from "@/lib/utils";
+import moment from "moment";
+import type { ColumnRef } from "@/vueform/config/types";
+import { computed } from "vue";
+import DataStatusTag from "./DataStatusTag.vue";
+import { onMounted } from "vue";
+
+interface Props {
+  i: number;
+  row: any;
+  cell: ColumnRef;
+}
+
+const props = defineProps<Props>();
+const emits = defineEmits(["viewDoc"]);
+
+const item = computed(() => {
+  if (props.cell.dataSource) {
+    return props.cell.dataSource(props.i, props.row) ?? null;
+  }
+  return props.row?.[props.cell.key] ?? null;
+});
+
+// Helper functions for clean and robust code
+
+// Simplified helper functions for cleaner code
+function getSelectorDisplayValue(item: any, cell: ColumnRef): string {
+  if (!item) return "-";
+  if (!cell.nameField) return item.name || item.label || item.title || String(item);
+
+  try {
+    const regex = /\{([a-zA-Z0-9_]+)\}/g;
+
+    if (regex.test(cell.nameField)) {
+      return cell.nameField.replace(regex, (_: any, fieldName: any) => {
+        if (fieldName.includes(".")) {
+          const fields = fieldName.split(".");
+          let value: any = item;
+          for (const field of fields) {
+            if (value && typeof value === "object") {
+              value = value[field];
+            } else {
+              return "";
+            }
+          }
+          return value || "";
+        }
+        return (item as any)[fieldName] || "";
+      });
+    }
+
+    if (cell.nameField.includes(".")) {
+      const fields = cell.nameField.split(".");
+      let value: any = item;
+      for (const field of fields) {
+        if (value && typeof value === "object") {
+          value = value[field];
+        } else {
+          return "";
+        }
+      }
+      return value || "";
+    }
+
+    return (item as any)[cell.nameField] || item.name || item.label || item.title || String(item);
+  } catch (error) {
+    console.warn("Error parsing name field in getSelectorDisplayValue:", error);
+    return item.name || item.label || item.title || String(item);
+  }
+}
+
+// Helper function for DateSelectorElement formatting
+function formatDateSelectorValue(value: any, cell: ColumnRef, isRange: boolean = false): string {
+  if (!value) return "-";
+
+  const pickerType = cell.pickerType || "date";
+  const isDateTime = pickerType === "datetime";
+  const isMonth = pickerType === "month";
+  const isYear = pickerType === "year";
+
+  if (isRange && Array.isArray(value)) {
+    if (!value[0] || !value[1]) return "-";
+
+    if (isDateTime) {
+      return `${moment(value[0]).format("DD/MM/YYYY HH:mm")} - ${moment(value[1]).format("DD/MM/YYYY HH:mm")}`;
+    } else if (isMonth) {
+      return `${moment(value[0]).format("MM/YYYY")} - ${moment(value[1]).format("MM/YYYY")}`;
+    } else if (isYear) {
+      return `${value[0]} - ${value[1]}`;
+    } else {
+      return `${moment(value[0]).format("DD/MM/YYYY")} - ${moment(value[1]).format("DD/MM/YYYY")}`;
+    }
+  } else if (!isRange) {
+    if (isDateTime) {
+      return ["createdAt", "updatedAt"].includes(cell.key || "") ? moment(value).utc().format("DD/MM/YYYY HH:mm") : moment(value).format("DD/MM/YYYY HH:mm");
+    } else if (isMonth) {
+      return value && moment(value).isValid() ? formatMonthYear(value) : "-";
+    } else if (isYear) {
+      return value || "-";
+    } else {
+      return moment(value).format("DD/MM/YYYY");
+    }
+  }
+
+  return "-";
+}
+
+// Component mounted - ready for use
+</script>
+
+<template>
+  <section class="w-full text-[13px] leading-snug">
+    <div class="w-full text-inherit" :class="{ 'text-right': cell.textAlign === 'right' }" v-if="cell.cellRender">
+      <div class="text-inherit" v-html="cell.cellRender(i, row)"></div>
+    </div>
+    <div class="w-full" :class="{ 'text-right': cell.textAlign === 'right' }" v-else-if="item || ['toggle', 'approval_status'].includes(cell.cellType ?? '')">
+      <!-- title -->
+      <section :class="{ 'font-semibold': cell.bold }">
+        <!-- Date Selector Element -->
+        <template v-if="cell.cellType === 'date_selector'">
+          <!-- Use helper function for consistent formatting -->
+          <template v-if="Array.isArray(item) && item.length === 2 && item[0] && item[1]">
+            {{ formatDateSelectorValue(item, cell, true) }}
+          </template>
+          <template v-else-if="row[`${cell.key}Awal`] && row[`${cell.key}Akhir`]">
+            {{ formatDateSelectorValue([row[`${cell.key}Awal`], row[`${cell.key}Akhir`]], cell, true) }}
+          </template>
+          <template v-else-if="row[`${cell.key}Mulai`] && row[`${cell.key}Akhir`]">
+            {{ formatDateSelectorValue([row[`${cell.key}Mulai`], row[`${cell.key}Akhir`]], cell, true) }}
+          </template>
+          <template v-else>
+            {{ formatDateSelectorValue(item, cell, cell.range) }}
+          </template>
+        </template>
+
+        <!-- Selector Element - Unified Selector Display -->
+        <template v-else-if="cell.cellType === 'selector'">
+          <!-- Single Selector -->
+          <template v-if="!cell.multiple">
+            <!-- With Avatar -->
+            <template v-if="cell.showAvatar">
+              <div class="flex w-fit items-start" v-if="item">
+                <div class="-mt-[3px] mr-1.5 flex size-[22px] flex-none items-center justify-center rounded-full bg-blue-100 text-[11px] font-medium text-blue-500">
+                  {{ item ? item.name.substring(0, 1) : "?" }}
+                </div>
+                <div class="leading-snug">
+                  <span v-if="cell.nameFieldFunc" v-html="cell.nameFieldFunc(item)"></span>
+                  <template v-else>
+                    {{ getSelectorDisplayValue(item, cell) }}
+                  </template>
+                  <div class="flex items-center text-xs opacity-75" v-if="item && item.accessLevel">
+                    <LucideBuilding class="mr-1.5 size-3.5" />
+                    {{ item.accessLevel.name }}
+                  </div>
+                </div>
+              </div>
+              <div v-else>-</div>
+            </template>
+            <!-- Without Avatar -->
+            <template v-else>
+              <span v-if="cell.nameFieldFunc" v-html="cell.nameFieldFunc(item)"></span>
+              <template v-else>
+                {{ getSelectorDisplayValue(item, cell) }}
+              </template>
+              <div class="max-w-96 overflow-hidden text-ellipsis whitespace-nowrap text-[13px] opacity-65" v-if="cell.descriptionField || cell.descriptionFieldFunc">
+                {{ cell.descriptionFieldFunc ? item[cell.descriptionFieldFunc(item) ?? "_"] : item[cell.descriptionField ?? "_"] }}
+              </div>
+            </template>
+          </template>
+
+          <!-- Multiple Selector -->
+          <template v-else>
+            <template v-if="!item">-</template>
+            <template v-else>
+              <!-- With Avatar -->
+              <template v-if="cell.showAvatar">
+                <div class="flex flex-wrap gap-1.5 font-[13px]">
+                  <div
+                    class="flex items-center rounded-full border border-blue-300 bg-blue-100 px-2 py-0.5 pl-1 font-medium text-blue-700"
+                    v-for="(item2, i2) in (Array.isArray(item) ? item : [item]).slice(0, 2)">
+                    <div class="mr-2 flex size-[18px] flex-none items-center justify-center rounded-full bg-blue-700 text-[11px] font-medium text-white">
+                      {{ item2 ? item2.name.substring(0, 1) : "?" }}
+                    </div>
+                    <span v-if="cell.nameFieldFunc" v-html="cell.nameFieldFunc(item2)"></span>
+                    <template v-else>
+                      {{ getSelectorDisplayValue(item2, cell) }}
+                    </template>
+                  </div>
+                </div>
+                <div class="pt-1 text-xs opacity-75" v-if="(Array.isArray(item) ? item.length : 1) > 2">+ {{ (Array.isArray(item) ? item.length : 1) - 2 }} lainya</div>
+              </template>
+              <!-- Without Avatar -->
+              <template v-else>
+                <div class="flex flex-wrap gap-1">
+                  <div class="rounded-sm border px-1.5" v-for="(item2, i2) in (Array.isArray(item) ? item : [item]).slice(0, 2)">
+                    <span v-if="cell.nameFieldFunc" v-html="cell.nameFieldFunc(item2)"></span>
+                    <template v-else>
+                      {{ getSelectorDisplayValue(item2, cell) }}
+                    </template>
+                  </div>
+                </div>
+                <div class="pt-1 text-xs opacity-75" v-if="(Array.isArray(item) ? item.length : 1) > 2">+ {{ (Array.isArray(item) ? item.length : 1) - 2 }} lainya</div>
+              </template>
+            </template>
+          </template>
+        </template>
+
+        <template v-else-if="cell.cellType === 'checkboxgroup'">
+          {{ item }}
+        </template>
+
+        <template v-else-if="cell.cellType === 'radiogroup'">
+          {{ (cell.items || []).find((r: any) => r.value === item)?.label }}
+        </template>
+
+        <template v-else-if="cell.cellType === 'select'">
+          {{ (cell.items || []).find((r: any) => r.value === item)?.label }}
+        </template>
+
+        <template v-else-if="cell.cellType === 'toggle'">
+          <b class="text-green-600" v-if="item">Ya</b>
+          <b class="text-red-600" v-else>Tidak</b>
+        </template>
+
+        <template v-else-if="cell.cellType === 'approval_status'">
+          <DataStatusTag :status="row.status" />
+        </template>
+        <template v-else-if="item && item.filetype">
+          <div class="flex w-fit items-center">
+            <LucideFile class="-mt-0.5 mr-1.5 text-blue-500" :size="20" :stroke-width="1.5" />
+            {{ item.filename }}
+          </div>
+        </template>
+        <template v-else-if="cell.key.toLowerCase().includes('tgl') || cell.key.toLowerCase().includes('masa') || cell.key.toLowerCase().includes('mulai') || cell.key.toLowerCase().includes('akhir')">
+          {{ convertFormatDate(item) }}
+        </template>
+        <template v-else-if="cell.cellType === 'text' && cell.mask && cell.mask.mask === 'number' && cell.mask.thousandsSeparator === ','">
+          <span class="opacity-75" v-if="cell.addons && cell.addons.before">
+            {{ cell.addons.before }}
+          </span>
+          {{ formatNumberIntl(item) }}
+          <span class="opacity-75" v-if="cell.addons && cell.addons.after">
+            {{ cell.addons.after }}
+          </span>
+        </template>
+        <template v-else>{{ item }}</template>
+      </section>
+
+      <!-- description -->
+      <div class="max-w-96 overflow-hidden text-ellipsis whitespace-nowrap" v-if="cell.description" v-html="cell.description(i, row)"></div>
+      <div class="max-w-96 overflow-hidden text-ellipsis whitespace-nowrap" v-if="cell.descriptonKey && row[cell.descriptonKey]">
+        {{ row[cell.descriptonKey] }}
+      </div>
+    </div>
+    <div v-else class="w-full">
+      <!-- Date Selector Element - Fallback for empty values -->
+      <template v-if="cell.cellType === 'date_selector'">
+        <template v-if="row[`${cell.key}Mulai`] && row[`${cell.key}Akhir`]">
+          {{ formatDateSelectorValue([row[`${cell.key}Mulai`], row[`${cell.key}Akhir`]], cell, true) }}
+        </template>
+        <template v-else-if="row[`${cell.key}Awal`] && row[`${cell.key}Akhir`]">
+          {{ formatDateSelectorValue([row[`${cell.key}Awal`], row[`${cell.key}Akhir`]], cell, true) }}
+        </template>
+        <template v-else>
+          {{ formatDateSelectorValue(item, cell, cell.range) }}
+        </template>
+      </template>
+    </div>
+  </section>
+</template>

package/src/components/tables/DataTableHeader.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { ColumnRef, PageConfig, SortBy } from '@/vueform/config/types';
+import { TableHead, TableHeader, TableRow } from '../ui/table';
+import { LucideArrowDownWideNarrow, LucideArrowUpDown, LucideArrowUpNarrowWide } from 'lucide-vue-next';
+import { onMounted } from 'vue';
+
+interface Props {
+  columns: ColumnRef[]
+  pageConfig?: PageConfig
+  sortBy?: SortBy
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['update:sortBy']);
+// Add a computed property to safely check sortBy
+const hasSortBy = (key: string) => {
+  return props.sortBy && typeof props.sortBy === 'object' && props.sortBy.key === key;
+};
+
+const getSortDirection = (key: string) => {
+  if (!hasSortBy(key)) return null;
+  return props.sortBy?.by;
+};
+</script>
+
+<template>
+  <TableHeader>
+    <TableRow class="dark:border-dark_border3">
+      <TableHead v-for="(cell, i) in columns.filter((r) => r.visible)" :key="cell.key"
+        :class="cn(
+          'bg-slate-100 pl-5 pr-2.5 2xl:pr-3.5 dark:bg-dark_bg2 text-[13px]',
+          cell.headerClass
+        )"
+        :style="{ width: cell.size ? `${cell.size}px` : 'auto' }"
+      >
+        <div class="flex items-center rounded-md px-2 py-1.5 -my-1.5 -mx-2 dark:text-dark_text/80"
+          :class="{
+            'transition hover:bg-slate-200 dark:hover:bg-dark_bg4 cursor-pointer': cell.sortKey,
+            'justify-end text-right': cell.headAlign
+              ? cell.headAlign === 'right'
+              : cell.textAlign === 'right' || cell.type === 'action',
+            'justify-center text-center': cell.headAlign
+              ? cell.headAlign === 'center'
+              : false,
+            'justify-start text-left': cell.headAlign
+              ? cell.headAlign === 'left'
+              : false
+          }"
+          v-on:click="emits('update:sortBy', cell.sortKey)">
+          <span v-html="cell.header"></span>
+          <div class="ml-2 flex-none" v-if="cell.sortKey">
+            <LucideArrowDownWideNarrow :size="18" v-if="hasSortBy(cell.sortKey) && getSortDirection(cell.sortKey) === 'desc'"/>
+            <LucideArrowUpNarrowWide :size="18" v-else-if="hasSortBy(cell.sortKey) && getSortDirection(cell.sortKey) === 'asc'"/>
+            <LucideArrowUpDown :size="18" class="opacity-40" v-else/>
+          </div>
+        </div>
+      </TableHead>
+    </TableRow>
+  </TableHeader>
+</template>

package/src/components/tables/DataTableRow.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import type { ColumnRef, PageConfig } from "@/vueform/config/types";
+import DataTableCell from "./DataTableCell.vue";
+import DataTableActionRow from "./DataTableActionRow.vue";
+import { TableCell, TableRow } from "@/components/ui/table";
+import LucideIcon from "@/components/helper/LucideIcon.vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import type { DasiV2FormSchema, FormSchemaHooks } from "@/types/form.types";
+import DetailSheet from "../detail/DetailSheet.vue";
+import CheckboxElement from "@/components/helper/CheckboxElement.vue";
+import DocApprovalDialog from "../detail/DocApprovalDialog.vue";
+import { useRoute } from "vue-router";
+
+interface Props {
+  title: string;
+  columns: ColumnRef[];
+  pageConfig?: PageConfig;
+  formSchema?: DasiV2FormSchema;
+  formHooks?: FormSchemaHooks;
+  endpoint?: string;
+}
+
+const route = useRoute();
+const props = defineProps<Props>();
+const emits = defineEmits(["viewDoc", "viewDetail", "change:check", "getData", "reloadDataByIds", "edit"]);
+const data = defineModel<any[]>("data", { default: [] });
+const selectedId = defineModel("selectedId");
+
+/**
+ * Document viewer
+ *
+ */
+const docApprovalDialog = ref<InstanceType<typeof DocApprovalDialog>>();
+
+/**
+ * Check if formSchema contains any file field
+ * if explicitly specified on page config
+ * or if schema has file field
+ *
+ */
+const hasFileField = computed(() => {
+  if (props.pageConfig?.showViewDocButton) return true;
+  /**
+   * Check from form schema
+   *
+   */
+  if (!props.formSchema) return false;
+
+  // Check all fields in the formSchema for type 'file'
+  return Object.values(props.formSchema).some((field: any) => field && typeof field === "object" && field.type === "file");
+});
+
+function openApproval(item: any) {
+  const itemName = props.pageConfig?.dataName ? props.pageConfig.dataName(item) : item.name || item.nama || "data";
+  const dialogTitle = `Approval ${props.title} / ${itemName}`;
+  docApprovalDialog.value?.open({ title: dialogTitle, item }).then(b => {
+    setTimeout(() => {
+      emits("reloadDataByIds", [item.id]);
+    }, 300);
+  });
+}
+
+async function viewDoc(item: any) {
+  const itemName = props.pageConfig?.dataName ? props.pageConfig.dataName(item) : item.name || item.nama || "data";
+  const dialogTitle = `Dokumen ${props.title} / ${itemName}`;
+  docApprovalDialog.value?.open({ title: dialogTitle, item }).then(b => {
+    setTimeout(() => {
+      emits("reloadDataByIds", [item.id]);
+    }, 300);
+  });
+}
+
+/**
+ * View detail
+ *
+ */
+const detailSheet = ref<InstanceType<typeof DetailSheet>>();
+function canViewDetail(i: number, row: any): boolean {
+  if (typeof props.pageConfig?.showViewDetail === "function") {
+    return props.pageConfig?.showViewDetail(i, row);
+  }
+  if (typeof props.pageConfig?.showViewDetail === "boolean") {
+    return props.pageConfig?.showViewDetail;
+  }
+  return !!props.formSchema;
+}
+
+function viewDetail(item: any) {
+  emits("viewDetail", item);
+  detailSheet.value?.open({
+    item: item,
+    pageConfig: props.pageConfig,
+    endpoint: props.pageConfig?.viewDetailEndpoint ?? props.pageConfig?.savePath ?? props.endpoint ?? "",
+    schema: props.formSchema,
+    columns: props.columns,
+    hooks: props.formHooks
+  });
+}
+
+function customBtnClick(item: any, btnId?: string) {
+  switch (btnId) {
+    case "view-doc":
+      viewDoc(item);
+      break;
+  }
+}
+
+/**
+ * Checkbox
+ *
+ */
+async function checkItemChanged(item: any) {
+  await nextTick();
+  emits("change:check", item);
+}
+
+// async function checkDetailFromRoutes() {
+//   await nextTick();
+//   if (route.query.detail) {
+//     for (const item of data.value) {
+//       if (item.id === route.query.detail) {
+//         viewDetail(item);
+//         break;
+//       }
+//     }
+//   }
+// }
+
+// // watch(() => route.query, () => {
+// //   checkDetailFromRoutes();
+// // })
+
+// // onMounted(() => {
+// // })
+</script>
+
+<template>
+  <TableRow
+    v-for="(row, i) in data"
+    :key="i"
+    class="border-gray-100 dark:border-none dark:!bg-dark_bg2"
+    :class="{
+      '!bg-gray-50': String(row.status).toUpperCase() === 'DRAFT',
+      '!bg-orange-50': row.status === 'WAITING_APPROVAL',
+      '!bg-red-50': row.status === 'REJECTED',
+      '!bg-blue-200 dark:!bg-dark_bg5': selectedId === row.id
+    }"
+    v-on:click.stop="selectedId = row.id">
+    <TableCell
+      class="pl-5 pr-2.5 align-top text-[13px] 2xl:pr-3.5 2xl:text-sm"
+      v-for="(cell, i2) in columns.filter(r => r.visible)"
+      :key="cell.key"
+      :style="{ width: cell.size ? `${cell.size}px` : 'auto' }">
+      <div v-if="cell.type === 'notifIcon'">
+        <div class="flex items-center">
+          <div
+            class="mr-3 flex size-9 items-center justify-center rounded-full bg-blue-100 text-blue-500"
+            :style="{
+              'background-color': row.iconBgColor,
+              color: row.iconColor
+            }">
+            <img :src="row.customIcon.url" v-if="row.useCustomIcon && row.customIcon && row.customIcon.url" class="h-5" />
+            <LucideIcon
+              v-else-if="row.iconName"
+              :name="row.iconName.replace(/^[a-z]|-([a-z])/g, (g: string) => (g.length === 1 ? g.toUpperCase() : g[1].toUpperCase()))"
+              :size="20"
+              :stroke-width="2" />
+          </div>
+          <div>
+            <b>{{ row.name }}</b
+            ><br />{{ row.code }}
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-start" :class="{ 'justify-end': cell.textAlign === 'right' }">
+        <div class="-mt-px mr-3 flex-none" v-if="pageConfig?.showCheckboxItem && i2 === 0">
+          <CheckboxElement v-model="row.checked" v-on:change="checkItemChanged(row)" :disabled="pageConfig?.checkDisabled && pageConfig?.checkDisabled(row, data) === true" />
+        </div>
+        <div>
+          <DataTableCell :i="i" :row="row" :cell="cell" @view-doc="viewDoc" />
+        </div>
+      </div>
+
+      <DataTableActionRow
+        :i="i"
+        :cell="cell"
+        :row="row"
+        :show-view-detail="canViewDetail(i, row)"
+        :has-file-field="hasFileField"
+        :endpoint="endpoint"
+        :page-config="pageConfig"
+        @open-detail="viewDetail(row)"
+        @open-doc="viewDoc(row)"
+        @open-approval="openApproval(row)"
+        @custom-btn-click="(row, btnId) => customBtnClick(row, btnId)"
+        @edit="(...e) => emits('edit', ...e)"
+        v-if="cell.type === 'action'" />
+    </TableCell>
+  </TableRow>
+  <DetailSheet ref="detailSheet">
+    <template #detail="detail">
+      <slot name="detail" :detail="detail"></slot>
+    </template>
+  </DetailSheet>
+  <DocApprovalDialog
+    ref="docApprovalDialog"
+    :docs-endpoint="pageConfig?.viewDocsEndpoint ?? props.endpoint ?? pageConfig?.endpoint"
+    :detail-endpoint="pageConfig?.viewDetailEndpoint ?? props.endpoint ?? pageConfig?.endpoint"
+    :form-schema="formSchema"
+    :page-config="pageConfig"
+    :columns="columns" />
+</template>