@dasidev/dasi-ui 1.0.19 → 1.0.21

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

@@ -1,52 +0,0 @@
-<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/template/src/components/tables/DataTable.vue

@@ -1,156 +0,0 @@
-<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/template/src/components/tables/DataTableAccordion.vue

@@ -1,249 +0,0 @@
-<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/template/src/components/tables/DataTableActionRow.vue

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