@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/components/tables/DataTableCell.vue

@@ -1,271 +0,0 @@
-<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";
-
-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/template/src/components/tables/DataTableHeader.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">  
-import { cn } from '../../lib/utils';
-import type { ColumnRef, PageConfig, SortBy } from '../../vueform/config/types';
-import { TableHead, TableHeader, TableRow } from '../../components/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/template/src/components/tables/DataTableRow.vue

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