@dasidev/dasi-ui 1.0.0

package/src/components/tables/DataStatusTag.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { LucideCheckCheck, LucideCircleDashed, LucideCircleX, LucideGlobe, LucideHourglass, LucideShieldUser, LucideUserRoundCheck } from 'lucide-vue-next';
+
+const props = defineProps(['status', 'class']);
+</script>
+
+<template>
+  <div v-if="status" :class="[
+      cn('bg-gray-100 whitespace-nowrap text-slate-500 font-medium flex items-center gap-1 pl-2 pr-3 h-8 text-xs rounded-md w-fit', props.class),
+      {
+        '!bg-yellow-100 !text-yellow-500': status === 'APPROVAL_REQUIRED',
+        '!bg-orange-100 !text-orange-400': status === 'WAITING_APPROVAL',
+        '!bg-purple-100 !text-purple-500': status === 'APPROVED_PARTIALY',
+        '!bg-red-100 !text-red-500': status === 'REJECTED',
+        '!bg-green-100 !text-green-500': status === 'APPROVED',
+        '!bg-blue-100 !text-blue-500': status.toUpperCase() === 'PUBLISHED',
+      },
+    ]">
+    <template v-if="String(status).toUpperCase() === 'DRAFT'">
+      <LucideCircleDashed :size="14" stroke-width="2.6"/>
+      Draft
+    </template>
+    <template v-else-if="status === 'APPROVAL_REQUIRED'">
+      <LucideShieldUser :size="16" :stroke-width="1.6"/>
+      Approval Required
+    </template>
+    <template v-else-if="['WAITING_APPROVAL'].includes(status)">
+      <LucideHourglass :size="14" :stroke-width="2"/>
+      Waiting Approval
+    </template>
+    <template v-else-if="['APPROVED_PARTIALY'].includes(status)">
+      <LucideUserRoundCheck :size="16" :stroke-width="2"/>
+      Approved Partialy
+    </template>
+    <template v-else-if="['REJECTED'].includes(status)">
+      <LucideCircleX :size="16" :stroke-width="1.4"/>
+      Rejected
+    </template>
+    <template v-else-if="['APPROVED'].includes(status)">
+      <LucideCheckCheck :size="16" :stroke-width="1.4"/>
+      Approved
+    </template>
+    <template v-else-if="['PUBLISHED'].includes(status.toUpperCase())">
+      <LucideGlobe :size="16" :stroke-width="1.4"/>
+      Published
+    </template>
+    <template v-else>
+      {{ status }}
+    </template>
+  </div>
+</template>

package/src/components/tables/DataTable.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableRow,
+} from "@/components/ui/table";
+import { Skeleton } from "@/components/ui/skeleton";
+import LoadingIndicator from "@/components/loadings/LoadingIndicator.vue";
+import {
+	LucideDatabase,
+	LucideOctagonAlert,
+} from "lucide-vue-next";
+import BtnPrimary from "@/components/button/BtnPrimary.vue";
+import type { ColumnRef, PageConfig, SortBy } from "@/vueform/config/types";
+import DataTableRow from "./DataTableRow.vue";
+import DataTableHeader from "./DataTableHeader.vue";
+
+interface Props {
+  title: string
+	columns: ColumnRef[];
+	loading?: boolean;
+	loadingType?: "skeleton" | "loader";
+	error?: string | null;
+	formSchema?: any;
+	formHooks?: any;
+	endpoint?: string;
+  pageConfig?: PageConfig
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	loading: false,
+	loadingType: "loader",
+	error: null,
+});
+const emits = defineEmits(["getData", 'reloadDataByIds', "openDetail", 'edit']);
+
+const data = defineModel<any[]>('data', { default: [] });
+const selectedId = defineModel("selectedId");
+const sortBy = defineModel<SortBy>('sortBy');
+
+function setSortBy(key?: string) {
+  if (!key) return;
+  if (sortBy.value && sortBy.value.key === key) {
+    const by = sortBy.value.by === 'asc' ? 'desc' : 'asc';
+    sortBy.value = { key, by };
+  } else {
+    sortBy.value = { key, by: 'asc' };
+  }
+}
+</script>
+
+<template>
+	<div>
+		<Table class="bg-white border-y dark:bg-dark_bg2 dark:border-dark_border3">
+      <slot name="header">
+        <DataTableHeader
+          :page-config="pageConfig"
+          :columns="columns"
+          :sort-by="sortBy"
+          @update:sort-by="setSortBy"
+        />
+      </slot>
+			<TableBody v-if="error">
+				<TableRow>
+					<TableCell colspan="999" class="bg-red-50 dark:bg-dark_bg2">
+						<div class="flex items-center min-h-[calc(100vh-440px)]">
+							<div class="text-center w-full text-red-500">
+								<LucideOctagonAlert
+									:size="40"
+									:stroke-width="1.5"
+									class="mx-auto mb-3"
+								/>
+								<div class="font-bold text-lg">Loading Data Error</div>
+								<div class="text-sm mb-4">{{ error }}</div>
+								<BtnPrimary
+									class="py-0 h-9 rounded-full"
+									v-on:click="emits('getData')"
+									>Coba Lagi</BtnPrimary
+								>
+							</div>
+						</div>
+					</TableCell>
+				</TableRow>
+			</TableBody>
+			<TableBody v-else-if="props.loading">
+				<template v-if="props.loadingType === 'skeleton'">
+					<TableRow
+						v-for="i in 25"
+						:key="i"
+						class="border-slate-100 dark:border-slate-700"
+					>
+						<TableCell
+							colspan="10"
+							class="px-5 2xl:px-8 py-3 bg-white dark:bg-slate-800"
+						>
+							<div class="flex gap-2">
+								<Skeleton class="h-6 w-6 rounded-s"></Skeleton>
+								<Skeleton class="h-6 rounded-s w-full"></Skeleton>
+							</div>
+						</TableCell>
+					</TableRow>
+				</template>
+				<TableRow v-else>
+					<TableCell colspan="999" class="bg-slate-50 dark:bg-slate-900">
+						<div class="h-[calc(100vh-420px)] flex items-center justify-center">
+							<LoadingIndicator class="scale-90"/>
+						</div>
+					</TableCell>
+				</TableRow>
+			</TableBody>
+      <template v-else-if="data.length">
+        <slot name="content">
+          <TableBody>
+            <DataTableRow
+              :title="props.title"
+              v-model:data="data"
+              :columns="columns"
+              :page-config="pageConfig"
+              :form-schema="formSchema"
+              :form-hooks="formHooks"
+              :endpoint="endpoint"
+              v-model:selected-id="selectedId"
+              @view-detail="(...e) => emits('openDetail', e)"
+              @get-data="emits('getData')"
+              @reload-data-by-ids="(...e) => emits('reloadDataByIds', ...e)"
+              @edit="(...e) => emits('edit', ...e)"
+            >
+              <template #detail="detail">
+                <slot name="detail" :detail="detail"></slot>
+              </template>
+            </DataTableRow>
+          </TableBody>
+        </slot>
+      </template>
+			<TableBody v-else>
+        <TableRow>
+          <TableCell colspan="999" class="bg-slate-50 dark:bg-dark_bg2">
+            <div class="flex items-center min-h-[calc(100vh-440px)]">
+              <div class="text-center w-full">
+                <LucideDatabase
+                  :stroke-width="1.5"
+                  class="mx-auto mb-3 text-gray-500 size-[34px] 2xl:size-[40px]"
+                />
+                <div class="font-semibold 2xl:text-lg">Tidak Ada Data</div>
+                <div class="text-gray-500 text-xs 2xl:text-sm">
+                  Maaf! Data Anda belum tersedia
+                </div>
+              </div>
+            </div>
+          </TableCell>
+        </TableRow>
+			</TableBody>
+		</Table>
+	</div>
+</template>

package/src/components/tables/DataTableAccordion.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
+import { TableBody, TableCell, TableRow } from "@/components/ui/table";
+import { EllipsisVertical, LucideChevronDownCircle, LucideSquare } from "lucide-vue-next";
+import LucideIcon from "@/components/helper/LucideIcon.vue";
+import { cn } from "@/lib/utils";
+import type { ColumnRef, PageConfig } from "@/vueform/config/types";
+import type { DasiV2FormSchema, FormSchemaHooks } from "@/types/form.types";
+import DataTable from "@/components/tables/DataTable.vue";
+import DataTableRow from "@/components/tables/DataTableRow.vue";
+import CheckboxElement from "@/components/helper/CheckboxElement.vue";
+import BtnCircle from "@/components/button/BtnCircle.vue";
+import DataStatusTag from "@/components/tables/DataStatusTag.vue";
+
+interface Props {
+  /**
+   * Table group
+   *
+   */
+  groupBy: string;
+  groupLabels: any;
+  groupActions?: (groupBy: any) => any[];
+
+  /**
+   * Base data table
+   *
+   */
+  title: string;
+  columns: ColumnRef[];
+  loading?: boolean;
+  error: string | null;
+  formSchema?: DasiV2FormSchema;
+  formHooks?: FormSchemaHooks;
+  endpoint?: string;
+  pageConfig?: PageConfig;
+}
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  loadingType: "loader",
+  error: null,
+
+  /**
+   * Extend
+   *
+   */
+  groupBy: "status",
+  groupLabels: {},
+  groupActions: (groupBy: any) => []
+});
+const emits = defineEmits(["getData", "reloadDataByIds", "openDetail", "groupActionClick", "edit"]);
+
+/**
+ * Base
+ *
+ */
+const data = defineModel<any[]>("data", { default: [] });
+const selectedId = defineModel("selectedId");
+const sortBy = defineModel<any>("sortBy");
+
+/**
+ * Extend
+ *
+ */
+const groupOpen = ref<any[]>([]);
+const firstOpen = ref(true);
+
+const groupedData = computed(() => {
+  const groups: { [key: string]: { items: any[]; checkboxDisabled: boolean } } = {};
+  for (const item of data.value) {
+    let key: string;
+    if (props.pageConfig?.tableGroupConfig?.setGroupLabel) {
+      key = props.pageConfig?.tableGroupConfig?.setGroupLabel(item, data.value);
+    } else {
+      key = item[props.groupBy];
+    }
+    if (!groups[key]) groups[key] = { items: [], checkboxDisabled: true };
+    groups[key].items.push(item);
+  }
+  return groups;
+});
+const groupedDataWithCheck = computed(() => {
+  if (!props.pageConfig?.showCheckboxItem || !props.pageConfig.checkDisabled) {
+    for (const [_, group] of Object.entries(groupedData.value)) {
+      group.checkboxDisabled = false;
+    }
+    return groupedData.value;
+  }
+  for (const [_, group] of Object.entries(groupedData.value)) {
+    for (const item of group.items) {
+      if (!props.pageConfig.checkDisabled(item, data.value)) {
+        group.checkboxDisabled = false;
+        break;
+      }
+    }
+  }
+  return groupedData.value;
+});
+
+function doNothing() {}
+
+function toggleGroup(groupName: any) {
+  const idx = groupOpen.value.indexOf(groupName);
+  if (idx >= 0) groupOpen.value.splice(idx, 1);
+  else groupOpen.value.push(groupName);
+}
+
+function checkAllGroup(groupName: any) {
+  const group = groupedData.value[groupName] ?? { items: [] };
+  const checked = group.items.some(r => !r.checked);
+  for (const item of group.items) {
+    if (props.pageConfig?.checkDisabled && props.pageConfig?.checkDisabled(item, data.value) === true) continue;
+    item.checked = checked;
+  }
+}
+
+watch(
+  () => data.value,
+  newData => {
+    if ((newData ?? []).length > 0 && firstOpen.value) {
+      firstOpen.value = false;
+      setTimeout(() => {
+        for (const item of Object.keys(groupedData.value)) {
+          if (!groupOpen.value.includes(item)) groupOpen.value.push(item);
+          break;
+        }
+      });
+    }
+  }
+);
+</script>
+
+<template>
+  <DataTable
+    v-model:data="data"
+    :title="title"
+    :columns="props.columns"
+    :loading="props.loading"
+    :error="props.error"
+    :form-hooks="props.formHooks"
+    :form-schema="props.formSchema"
+    :endpoint="props.endpoint"
+    :page-config="pageConfig"
+    v-model:sort-by="sortBy"
+    v-model:selected-id="selectedId"
+    v-on:get-data="(...e) => emits('getData', ...e)"
+    v-on:open-detail="(...e) => emits('openDetail', ...e)">
+    <template #content>
+      <TableBody v-for="(group, groupName) in groupedDataWithCheck" :key="groupName">
+        <TableRow
+          class="cursor-pointer border-t hover:bg-blue-50 dark:border-none dark:hover:bg-dark_bg4"
+          :class="{ 'bg-blue-50 dark:bg-dark_bg3': groupOpen.includes(groupName) }"
+          v-on:click="toggleGroup(groupName)">
+          <TableCell colspan="999">
+            <div class="flex items-center px-3">
+              <div class="-mt-px mr-3 flex-none" v-if="pageConfig?.showCheckboxItem">
+                <CheckboxElement
+                  :indeterminate="group.items.some(r => r.checked)"
+                  :ignore-model="true"
+                  :checked="group.items.length > 0 && !group.items.some(r => !r.checked)"
+                  v-on:click.stop="checkAllGroup(groupName)"
+                  :disabled="group.checkboxDisabled" />
+              </div>
+              <LucideChevronDownCircle :stroke-width="1.5" class="mr-2 flex-none opacity-75 transition-all" :size="20" :class="{ 'rotate-180': groupOpen.includes(groupName) }" />
+              <div class="font-medium">
+                {{ props.groupLabels[groupName] || groupName }}
+              </div>
+              <div class="ml-auto flex flex-none items-center">
+                <div class="mr-4 flex items-center" v-if="pageConfig?.groupApproval && pageConfig.groupStatus">
+                  <DataStatusTag :status="pageConfig.groupStatus(groupName, group.items)" />
+                </div>
+                <div class="flex items-center" v-if="pageConfig?.tableGroupActionBtn">
+                  <!-- <button :class="cn('text-[13px] 2xl:text-[14px] leading-none rounded-full h-8 flex items-center justify-center hover:bg-blue-100 transition text-blue-500 border border-blue-500 cursor-pointer pl-2.5 pr-3 mr-2', action.class)"
+                    v-for="(action, i) in pageConfig?.checkboxActionBtn ?? []"
+                    @click.stop="checkActionClicked(i, action)">
+                    <LucideIcon
+                      :name="action.icon"
+                      :class="cn('mr-1.5', action.iconClass)"
+                      :size="action.iconSize ?? 20"
+                      :stroke-width="action.iconStrokeWidth ?? 1.6"
+                    />
+                    {{ action.label }}
+                  </button> -->
+
+                  <!-- v-on:click.stop="groupAction.action(groupName, group)" -->
+                  <button
+                    :class="
+                      cn(
+                        'mr-2 flex h-8 cursor-pointer items-center justify-center rounded-full border border-blue-500 pl-2.5 pr-3 text-[13px] leading-none text-blue-500 transition hover:bg-blue-100',
+                        action.class
+                      )
+                    "
+                    v-for="action in pageConfig?.tableGroupActionBtn(groupName, group.items).filter((r: any) => !r.displayAsOption)"
+                    :key="action.id"
+                    v-on:click.stop="emits('groupActionClick', groupName, group.items, action.id)">
+                    <LucideIcon :name="action.icon" :class="cn('mr-1.5', action.iconClass)" :size="action.iconSize ?? 18" :stroke-width="action.iconStrokeWidth ?? 1.8" />
+                    {{ action.label }}
+                  </button>
+
+                  <DropdownMenu v-if="pageConfig?.tableGroupActionBtn(groupName, group.items).filter(r => r.displayAsOption).length > 0">
+                    <DropdownMenuTrigger as-child>
+                      <BtnCircle data-test="action-menu" @click.stop="doNothing">
+                        <EllipsisVertical :size="22" />
+                      </BtnCircle>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent class="w-[320px]" align="end">
+                      <template v-for="action in pageConfig?.tableGroupActionBtn(groupName, group.items).filter(r => r.displayAsOption)" :key="action.id">
+                        <DropdownMenuSeparator v-if="action.type === 'separator'"></DropdownMenuSeparator>
+                        <DropdownMenuItem
+                          v-else
+                          v-on:click.stop="emits('groupActionClick', groupName, group.items, action.id)"
+                          class="cursor-pointer items-center text-[13px] 2xl:text-sm"
+                          :class="{ '!text-red-500': action.negative }"
+                          :data-test="action.label">
+                          <LucideIcon :name="action.icon" :size="action.iconSize || 18" :strokeWidth="1" v-if="action.icon" class="mr-2 flex-none scale-90 2xl:scale-100" />
+                          <LucideSquare :size="18" :stroke-width="1" class="mr-2 mt-px text-transparent" v-else />
+                          <span>{{ action.label }}</span>
+                        </DropdownMenuItem>
+                      </template>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </div>
+            </div>
+          </TableCell>
+        </TableRow>
+        <template v-if="groupOpen.includes(groupName)">
+          <DataTableRow
+            v-model:data="group.items"
+            :title="title"
+            :columns="columns"
+            :page-config="pageConfig"
+            :form-schema="formSchema"
+            :form-hooks="formHooks"
+            :endpoint="endpoint"
+            v-model:selected-id="selectedId"
+            @view-detail="(...e) => emits('openDetail', ...e)"
+            @get-data="(...e) => emits('getData', ...e)"
+            @reload-data-by-ids="(...e) => emits('reloadDataByIds', ...e)"
+            @edit="(...e) => emits('edit', ...e)">
+            <template #detail="detail">
+              <slot name="detail" :detail="detail"></slot>
+            </template>
+          </DataTableRow>
+        </template>
+      </TableBody>
+    </template>
+  </DataTable>
+</template>

package/src/components/tables/DataTableActionRow.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { ColumnRef } from "@/vueform/config/types";
+import BaseDropdownTable from "./dropdown/BaseDropdownTable.vue";
+import { DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
+import { LucideFileText, LucideSquare } from "lucide-vue-next";
+import LucideIcon from "@/components/helper/LucideIcon.vue";
+
+const props = defineProps(["i", "cell", "row", "showViewDetail", "hasFileField", "endpoint", "pageConfig"]);
+const emits = defineEmits(["openDetail", "openDoc", "openApproval", "customBtnClick", "edit"]);
+
+function onCustomBtnClick(cell: ColumnRef, i: number, item: any, btnId?: string) {
+  emits("customBtnClick", item, btnId);
+  if (cell.onCustomBtnClick && typeof cell.onCustomBtnClick === "function") {
+    cell.onCustomBtnClick(i, item, btnId);
+  }
+}
+</script>
+
+<template>
+  <BaseDropdownTable
+    :i="i"
+    :cell="cell"
+    :row="row"
+    :row-actions="cell.rowActions"
+    :show-action="cell.showAction && typeof cell.showAction === 'function' ? cell.showAction(i, row) : cell.showAction"
+    :custom-btn-config="cell.customBtnConfig && typeof cell.customBtnConfig === 'function' ? cell.customBtnConfig(i, row) : cell.customBtnConfig"
+    :show-view-detail="showViewDetail"
+    :item-loading="cell.itemLoading && typeof cell.itemLoading === 'function' ? cell.itemLoading(i, row) : cell.itemLoading"
+    :endpoint="endpoint"
+    :page-config="pageConfig"
+    @custom-btn-click="(i, item, btnId) => onCustomBtnClick(cell, i, item, btnId)"
+    @view-detail="emits('openDetail', row)"
+    @open-approval="emits('openApproval', row)"
+    @edit="(...e) => emits('edit', ...e)">
+    <template v-if="cell.actions">
+      <template v-if="props.hasFileField && !(cell.actions(i, row) ?? []).find((row: any) => row.id === 'edit')">
+        <DropdownMenuItem @click="emits('openDoc', row)" class="cursor-pointer items-center text-[13px] 2xl:text-sm">
+          <LucideFileText :size="19" :strokeWidth="1" class="-mt-px mr-2 flex-none scale-90 2xl:scale-100" /> Lihat Dokumen
+        </DropdownMenuItem>
+        <DropdownMenuSeparator v-if="(cell.actions(i, row) ?? []).length > 0" />
+      </template>
+      <div v-for="(action, i2) in cell.actions(i, row)" :key="i2">
+        <DropdownMenuSeparator v-if="action.type === 'separator'"></DropdownMenuSeparator>
+        <DropdownMenuItem
+          @click="action.action(i, row, action.id)"
+          v-else-if="action.action"
+          class="cursor-pointer items-start text-[13px] 2xl:text-sm"
+          :class="{ '!text-red-500': action.negative }"
+          :data-test="action.label">
+          <LucideIcon :name="action.icon" :size="action.iconSize || 18" :strokeWidth="1" v-if="action.icon" class="mr-2 flex-none scale-90 2xl:scale-100" />
+          <LucideSquare :size="18" :stroke-width="1" class="mr-2 mt-px text-transparent" v-else />
+          <span>{{ action.label }}</span>
+        </DropdownMenuItem>
+
+        <template v-if="props.hasFileField && action.id === 'edit'">
+          <DropdownMenuSeparator />
+          <DropdownMenuItem @click="emits('openDoc', row)" class="cursor-pointer items-start text-[13px] 2xl:text-sm">
+            <LucideFileText :size="19" :strokeWidth="1" class="mr-2 flex-none scale-90 2xl:scale-100" /> Lihat Dokumen
+          </DropdownMenuItem>
+        </template>
+      </div>
+    </template>
+  </BaseDropdownTable>
+</template>