@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/components/pages/PageActivityContent.vue

@@ -1,597 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, computed, defineAsyncComponent, nextTick } from "vue";
-import api from "../../api/api";
-import { type CustomTab } from "../../components/pages/PageTab.vue";
-import PageContentTable from "../../components/pages/PageContentTable.vue";
-import { type Submenu } from "../../menu";
-import type { ColumnRef, FilterForm, PageConfig, SortBy } from "../../vueform/config/types";
-import { clearFormSchema, isValidValue } from "../../lib/utils";
-import { editFormData, deleteFormData, restoreFormData, addFormData } from "../../lib/form.utils";
-import type { DasiV2FormSchema, FormSchemaHooks } from "../../types/form.types";
-import { genFilterQuery, type FilterItem, initPageActivity, getPageData, getFilterSeparated, applyToggleChange } from "../../lib/page.utils";
-import { useRoute, useRouter } from "vue-router";
-import PageActivityHeader from "../../components/layout/PageActivityHeader.vue";
-import DataTableAccordion from "../../components/tables/DataTableAccordion.vue";
-import { InternalServerError } from "../../lib/constants";
-
-// Fix: Import Vueform to resolve "Failed to resolve component: Vueform" error
-import Vueform from "@vueform/vueform";
-
-export interface PageActivityInitOptions {
-  title: string;
-  pageConfig: PageConfig;
-  endpoint: string;
-  query: string;
-  menuItem?: Submenu;
-  columns?: ColumnRef[];
-  formSchema?: DasiV2FormSchema;
-}
-
-const route = useRoute();
-const router = useRouter();
-const emits = defineEmits<{
-  (e: "pageInitialized", options: PageActivityInitOptions): void;
-  (e: "rowActionClick", i: number, item: any, btnId?: string): void;
-  (e: "checkActionClick", checkedItems: any[], btnId?: string): void;
-  (e: "groupActionClick", groupId: string, groupItems: any[], btnId?: string): void;
-}>();
-const props = defineProps(["pageCode", "endpoint"]);
-
-/**
- * Search
- *
- */
-const searchQuery = ref("");
-const searchTimer: any = ref(null);
-
-/**
- * Pagination
- *
- */
-const itemsPerPage = ref(25);
-const currentPage = ref(1);
-const totalData = ref(0);
-const totalFilteredData = ref(0);
-
-/**
- * Base config
- *
- */
-const title = ref("");
-const endpoint = ref("");
-
-/**
- * Form by Vueform
- *
- */
-const formSchema = defineModel<DasiV2FormSchema>("schema");
-const formHooks = defineModel<FormSchemaHooks>("hooks");
-
-/**
- * Display data
- *
- */
-const menuItem = ref<Submenu>();
-const pageConfig = ref<PageConfig>({ showAddBtn: false, showDeleted: false });
-const pageContentTable = ref<InstanceType<typeof PageContentTable>>();
-
-/**
- * Dynamic component per endpoint
- *
- */
-const formComponent = computed(() => {
-  if (!pageConfig.value.useCustomViewDetail) return null;
-  const schemaPath = (pageConfig.value.customComponentPath ?? pageConfig.value.schema ?? endpoint.value ?? "").replace(/^\/+/, "");
-  if (!schemaPath) return;
-  return defineAsyncComponent(() => import(`../../components/page-activity/${schemaPath}/Detail.vue`));
-});
-const $detail = ref();
-const detailComponent = computed(() => {
-  if (!pageConfig.value.useCustomViewDetail) return null;
-  const schemaPath = (pageConfig.value.customComponentPath ?? pageConfig.value.schema ?? endpoint.value ?? "").replace(/^\/+/, "");
-  if (!schemaPath) return;
-  return defineAsyncComponent(() => import(`../../components/page-activity/${schemaPath}/Detail.vue`));
-});
-const $actionRow = ref();
-const actionRowComponent = computed(() => {
-  if (!pageConfig.value.useActionRowBtnComponent) return null;
-  const schemaPath = (pageConfig.value.customComponentPath ?? pageConfig.value.schema ?? endpoint.value ?? "").replace(/^\/+/, "");
-  if (!schemaPath) return;
-  return defineAsyncComponent(() => import(`../../components/page-activity/${schemaPath}/ActionRow.vue`));
-});
-const $actionCheck = ref();
-const actionCheckComponent = computed(() => {
-  if (!isValidValue(pageConfig.value.checkboxActionBtn)) return null;
-  const schemaPath = (pageConfig.value.customComponentPath ?? pageConfig.value.schema ?? endpoint.value ?? "").replace(/^\/+/, "");
-  if (!schemaPath) return;
-  return defineAsyncComponent(() => import(`../../components/page-activity/${schemaPath}/ActionCheck.vue`));
-});
-const $actionGroup = ref();
-const actionGroupComponent = computed(() => {
-  if (!pageConfig.value.tableGroupActionBtn) return null;
-  const schemaPath = (pageConfig.value.customComponentPath ?? pageConfig.value.schema ?? endpoint.value ?? "").replace(/^\/+/, "");
-  if (!schemaPath) return;
-  return defineAsyncComponent(() => import(`../../components/page-activity/${schemaPath}/ActionGroup.vue`));
-});
-
-/**
- * Model
- *
- */
-const data = defineModel<any[]>("data", { default: [] });
-const customTabs = defineModel<CustomTab[]>("customTabs", { default: [] });
-
-const columns = defineModel<ColumnRef[]>("columns", { default: [] });
-const tab = defineModel<string>("tab", { default: "all" });
-const loading = defineModel<boolean>("loading", { default: true });
-const dataError = defineModel<string | null>("dataError", { default: null });
-
-/**
- * Filter, sort, and query string
- *
- */
-const filterQueryForm = ref<FilterItem>({});
-const filterQueryPageMenu = ref<FilterItem>({});
-const filterOnForm = ref<FilterForm>({});
-const filterOnPageMenu = ref<FilterForm>({});
-const queryParams = ref("");
-const sortBy = ref<SortBy>();
-
-async function addData() {
-  console.log("pc", pageConfig.value);
-  await addFormData({
-    title: title.value,
-    endpoint: pageConfig.value?.savePath ?? endpoint.value,
-    formSchema: formSchema as any,
-    formHooks: formHooks.value,
-    formDialogClass: pageConfig.value.formDialogClass
-  });
-  getData();
-}
-
-/**
- * Edit item data based on
- * schema and data get by id from API
- *
- */
-async function editItem(i: number, item: any) {
-  await editFormData({
-    title: title.value,
-    endpoint: pageConfig.value?.savePath ?? endpoint.value,
-    formSchema: formSchema as any,
-    formHooks: formHooks.value,
-    formDialogClass: pageConfig.value.formDialogClass,
-    pageConfig: pageConfig.value,
-    item
-  });
-  getData();
-}
-
-/**
- * Edit from router ?edit={id}
- *
- */
-function editFromRoute() {
-  if (!route.query.edit) return;
-
-  /**
-   * Call the edit function
-   *
-   */
-  editItem(0, { id: route.query.edit });
-
-  /**
-   * Remove the edit parameter from the URL to prevent re-triggering on refresh
-   *
-   */
-  router.replace({
-    path: route.path,
-    query: { ...route.query, edit: undefined }
-  });
-}
-
-/**
- * Soft delete item
- *
- */
-async function deleteItem(i: number, item: any) {
-  await deleteFormData({
-    title: title.value,
-    endpoint: pageConfig.value?.savePath ?? endpoint.value,
-    formSchema: formSchema as any,
-    formHooks: formHooks.value,
-    allData: data.value,
-    index: i,
-    item
-  });
-}
-
-/**
- * Restore item from deleted to all data
- *
- */
-async function restoreItem(i: number, item: any) {
-  await restoreFormData({
-    title: title.value,
-    endpoint: pageConfig.value?.savePath ?? endpoint.value,
-    formSchema: formSchema as any,
-    formHooks: formHooks.value,
-    allData: data.value,
-    index: i,
-    item
-  });
-}
-
-function rowCustomBtnAction(i: number, item: any, btnId?: string) {
-  if ($actionRow.value) {
-    $actionRow.value.open(i, item).then((b: boolean) => {
-      if (b) reloadDataByIds([item.id]);
-    });
-  }
-  emits("rowActionClick", i, item, btnId);
-}
-
-function checkActionClicked(checkedItems: any[], btnId?: string) {
-  if ($actionCheck.value) {
-    $actionCheck.value.open(checkedItems, btnId).then((b: boolean) => {
-      if (b) reloadDataByIds(checkedItems.map(r => r.id));
-    });
-  }
-  emits("checkActionClick", checkedItems, btnId);
-}
-
-function groupActionClicked(groupId: string, groupItems: any[], btnId?: string) {
-  if ($actionGroup.value) {
-    $actionGroup.value.open(groupId, groupItems, btnId).then((b: boolean) => {
-      if (b) reloadDataByIds(groupItems.map(r => r.id));
-    });
-  }
-  emits("groupActionClick", groupId, groupItems, btnId);
-}
-
-/**
- * Get data with delayed search
- *
- */
-function search() {
-  if (searchTimer.value) clearTimeout(searchTimer.value);
-  searchTimer.value = setTimeout(() => {
-    getData();
-  }, 300);
-}
-
-function reloadDataByIds(ids: string[]) {
-  getPageData({
-    endpoint: endpoint.value,
-    tabActive: tab.value,
-    queryParams: queryParams.value,
-    searchQuery: searchQuery.value,
-    columns: columns.value,
-    sortBy: sortBy.value,
-    filterQueryForm: filterQueryForm.value,
-    filterQueryPageMenu: filterQueryPageMenu.value,
-    pageConfig: pageConfig.value,
-    pagination: { limit: itemsPerPage.value, page: currentPage.value }
-  })
-    .then(r => {
-      for (const item of r.data.data) {
-        if (ids.includes(item.id)) {
-          const idx = data.value.findIndex(r => r.id === item.id);
-          if (idx >= 0) data.value[idx] = item;
-        }
-      }
-    })
-    .catch((err: any) => {
-      dataError.value = err.message || "Internal server error. Please try again later.";
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-function getData() {
-  /**
-   * Reset state and display loading
-   *
-   */
-  loading.value = true;
-  dataError.value = null;
-  totalData.value = 0;
-  totalFilteredData.value = 0;
-  data.value = [];
-
-  getPageData({
-    endpoint: endpoint.value,
-    tabActive: tab.value,
-    queryParams: queryParams.value,
-    searchQuery: searchQuery.value,
-    columns: columns.value,
-    sortBy: sortBy.value,
-    filterQueryForm: filterQueryForm.value,
-    filterQueryPageMenu: filterQueryPageMenu.value,
-    pageConfig: pageConfig.value,
-    pagination: { limit: itemsPerPage.value, page: currentPage.value }
-  })
-    .then(r => {
-      data.value = r.data.data;
-      totalData.value = r.data.totalData;
-      totalFilteredData.value = r.data.data?.length || 0;
-    })
-    .catch((err: any) => {
-      dataError.value = err.message || "Internal server error. Please try again later.";
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
-
-async function tabChanged() {
-  currentPage.value = 1;
-  await nextTick();
-  getData();
-}
-
-/**
- * Filter
- *
- */
-function initFilter() {
-  filterQueryForm.value = {};
-  filterQueryPageMenu.value = {};
-  filterOnForm.value = {};
-  filterOnPageMenu.value = {};
-  if (!pageConfig.value?.filter) return;
-
-  /**
-   * Separate filter displayed on form dialog
-   * and on page action menu
-   *
-   */
-  [filterOnPageMenu.value, filterOnForm.value] = getFilterSeparated(pageConfig.value.filter);
-  clearFormSchema(Object.entries(filterOnPageMenu.value));
-  clearFormSchema(Object.entries(filterOnForm.value));
-  filterQueryForm.value = genFilterQuery(filterOnForm.value);
-  filterQueryPageMenu.value = genFilterQuery(filterOnPageMenu.value);
-}
-
-function onFilterChanged(formData: any) {
-  if (!formData || !filterOnForm.value) return;
-  clearFormSchema(Object.entries(filterOnForm.value));
-  filterQueryForm.value = genFilterQuery(filterOnForm.value, formData);
-  getData();
-}
-
-function onFilterPageMenuChanged(formData: any) {
-  if (!formData || !filterOnPageMenu.value) return;
-  clearFormSchema(Object.entries(filterOnPageMenu.value));
-  filterQueryPageMenu.value = genFilterQuery(filterOnPageMenu.value, formData);
-  getData();
-}
-
-function resetFilter() {
-  clearFormSchema(Object.entries(filterOnForm.value));
-  filterQueryForm.value = genFilterQuery(filterOnForm.value);
-  getData();
-}
-
-/**
- * Toggle handling - simple like filter pattern
- */
-function onToggleChanged(toggleData: any) {
-  const { checked, config } = toggleData;
-
-  // Use utility function to get new endpoint (just like filter pattern)
-  endpoint.value = applyToggleChange(config, checked, endpoint.value);
-
-  // Reset to first page and refetch data
-  currentPage.value = 1;
-  getData();
-}
-
-/**
- * Page initialization
- * this will set initialization for page that govern
- * - API Endpoint
- * - Page config
- * - Filter
- * - Tab
- * - Search
- * - Sort
- * - Form schema
- * - Form hooks
- * - Page title
- * - Table columns
- *
- */
-async function initPage() {
-  loading.value = true;
-
-  /**
-   * Make sure the endpoint and pageCode
-   * from parent already set
-   *
-   */
-  await nextTick();
-
-  /**
-   * Reset state before
-   * initializing with new page data
-   *
-   */
-  customTabs.value = [];
-  tab.value = "all"; // Reset tab to default when changing pages
-  searchQuery.value = route.query?.search ? String(route.query?.search) : "";
-
-  /**
-   * Init page
-   * Get config from ../../vueform/config/${props.pageCode}/${props.endpoint}
-   *
-   */
-  try {
-    const pageInit = await initPageActivity({
-      pageCode: props.pageCode,
-      endpoint: props.endpoint,
-      fullPath: route.fullPath,
-      tabReactive: tab,
-      onRestore: restoreItem,
-      onDelete: deleteItem,
-      onEdit: editItem,
-      onCustomBtnClick: rowCustomBtnAction
-    });
-    title.value = pageInit.title;
-    pageConfig.value = pageInit.pageConfig;
-    endpoint.value = pageInit.endpoint;
-    queryParams.value = pageInit.queryString;
-    formSchema.value = pageInit.formSchema;
-    formHooks.value = pageInit.formHooks;
-    menuItem.value = pageInit.menuItem;
-    columns.value = pageInit.columns;
-    sortBy.value = pageInit.pageConfig.sortBy;
-
-    /**
-     * Await for vue update so
-     * other using this variables can
-     * safe to access it
-     *
-     */
-    await nextTick();
-
-    /**
-     * Notify parent that page has been initilized
-     *
-     */
-    emits("pageInitialized", {
-      title: pageInit.title,
-      pageConfig: pageInit.pageConfig,
-      columns: pageInit.columns,
-      endpoint: pageInit.endpoint,
-      query: pageInit.queryString,
-      menuItem: pageInit.menuItem,
-      formSchema: pageInit.formSchema
-    });
-
-    /**
-     * Notify page content table
-     * that page are initialized and pageConfig
-     * is now available
-     *
-     */
-    pageContentTable.value?.pageInitialized();
-
-    /**
-     * Init filter set with default value
-     *
-     */
-    initFilter();
-
-    /**
-     * Add handler for query params
-     *
-     */
-    editFromRoute();
-
-    /**
-     * Fetch data
-     *
-     */
-    // getTotalWaitingApproval();
-    getData();
-  } catch (err: any) {
-    loading.value = false;
-    dataError.value = err.message ?? InternalServerError;
-  }
-}
-
-/**
- * Reload data when sort are changed
- *
- */
-watch(sortBy, () => {
-  if (!sortBy.value) return;
-  setTimeout(() => {
-    getData();
-  });
-});
-
-defineExpose({ getData, reloadDataByIds, initPage });
-</script>
-
-<template>
-  <main>
-    <PageActivityHeader
-      v-model:tab="tab"
-      v-on:tab-changed="tabChanged"
-      :show-deleted-tab="pageConfig.showDeleted"
-      :custom-tabs="customTabs"
-      :title="title"
-      v-on:reload="getData"
-      v-on:add-data="addData"
-      :show-add-btn="pageConfig.showAddBtn" />
-    <PageContentTable
-      ref="pageContentTable"
-      :title="title"
-      :endpoint="endpoint"
-      v-model:data="data"
-      :error="dataError"
-      :loading="loading"
-      :page-config="pageConfig"
-      :show-copyright="true"
-      v-on:get-data="getData"
-      v-model:sort-by="sortBy"
-      v-model:columns="columns"
-      @check-action-click="checkActionClicked"
-      @get-data="getData"
-      @reload-data-by-ids="reloadDataByIds"
-      @edit-item="editItem"
-      :total-data="totalData"
-      :total-filtered-data="totalFilteredData"
-      v-model:items-per-page="itemsPerPage"
-      v-model:current-page="currentPage"
-      :display-search="pageConfig.showSearch"
-      :search-placeholder="`Cari ${title}...`"
-      v-model:search="searchQuery"
-      v-on:search-input="search"
-      v-on:add-click="addData"
-      :form-schema="formSchema"
-      :form-hooks="formHooks"
-      :filter="filterOnForm"
-      v-on:filter-change="onFilterChanged"
-      v-on:reset-filter="resetFilter"
-      v-on:toggle-change="onToggleChanged"
-      :show-checkbox-item="false"
-      :show-view-document-btn="pageConfig?.showViewDocButton"
-      :view-docs-endpoint="pageConfig?.viewDocsEndpoint">
-      <template #right-action>
-        <section class="vueform-page-menu" v-if="Object.keys(filterOnPageMenu).length > 0">
-          <Vueform :schema="filterOnPageMenu" v-on:change="onFilterPageMenuChanged" />
-        </section>
-      </template>
-      <template #table>
-        <slot name="table">
-          <DataTableAccordion
-            v-model:data="data"
-            :title="title"
-            :columns="columns"
-            :loading="loading"
-            :error="dataError"
-            :form-hooks="formHooks"
-            :form-schema="formSchema"
-            :endpoint="endpoint"
-            :page-config="pageConfig"
-            v-model:sort-by="sortBy"
-            @get-data="getData"
-            @group-action-click="groupActionClicked"
-            @reload-data-by-ids="reloadDataByIds"
-            @edit="editItem"
-            :group-by="pageConfig.tableGroupConfig?.by || ''"
-            :group-labels="pageConfig.tableGroupConfig?.labels"
-            v-if="pageConfig.tableGrouped && pageConfig.tableGroupConfig" />
-        </slot>
-      </template>
-    </PageContentTable>
-  </main>
-  <component :is="detailComponent" v-if="detailComponent" ref="$detail" />
-  <component :is="actionRowComponent" v-if="actionRowComponent" ref="$actionRow" />
-  <component :is="actionCheckComponent" v-if="actionCheckComponent" ref="$actionCheck" />
-  <component :is="actionGroupComponent" v-if="actionGroupComponent" ref="$actionGroup" />
-</template>