@dasidev/dasi-ui 1.0.19 → 1.0.21

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

@@ -1,417 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, onBeforeMount, computed } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import ScrollArea from "../../components/ui/scroll-area/ScrollArea.vue";
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../components/ui/accordion";
-import { ChevronDown, LucideSearch, Search } from "lucide-vue-next";
-import LucideIcon from "../../components/helper/LucideIcon.vue";
-import menuSchema from "../../menu";
-import type { Menu, OrgLevel, Submenu } from "../../menu";
-import { Dialog, DialogContent } from "../../components/ui/dialog";
-import { useAppConfig } from "../../composables/useAppConfig";
-
-/**
- * Init variable
- *
- */
-const router = useRouter();
-const route = useRoute();
-
-const { companyName, logo, organizationLevels, isConfigLoaded } = useAppConfig();
-
-const open = ref(false);
-const commandOpen = ref(false);
-const selectedMenuUri = ref("");
-const menuOpen = ref("");
-const menu = ref<Menu[]>([]);
-const menuFiltered = ref<Menu[]>([]);
-const menuHistory = ref<Submenu[]>([]);
-const q = ref("");
-const orgLevel = ref<OrgLevel | null>(null);
-
-/**
- * Keys shortcut to open global search
- *
- */
-function initKeyShortcuts() {
-  window.addEventListener("keydown", event => {
-    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
-      event.preventDefault();
-      openSearch();
-    }
-  });
-}
-
-/**
- * Go to menu from global search
- *
- */
-function openMenuItem(item: Menu, submenu: Submenu) {
-  menuOpen.value = item.id;
-  commandOpen.value = false;
-  if (!submenu.url) return;
-
-  const history = {
-    ...submenu,
-    icon: item.icon,
-    iconSize: item.iconSize,
-    iconType: item.iconType
-  };
-  const historyIdx = menuHistory.value.findIndex((r: any) => r.url === submenu.url);
-  if (historyIdx >= 0) menuHistory.value.splice(historyIdx, 1);
-  menuHistory.value.unshift(history);
-  if (menuHistory.value.length > 5) {
-    menuHistory.value.pop();
-  }
-  const historyStr = JSON.stringify(menuHistory.value);
-  localStorage.setItem("app.menu_history", historyStr);
-
-  router.push(submenu.url);
-}
-
-function openSubmenu(item: Menu, submenu: Submenu) {
-  menuOpen.value = item.id;
-  if (!submenu.url) return;
-  router.push(submenu.url);
-}
-
-function getSelectedMenu() {
-  if (menuFiltered.value.length > 0) {
-    for (const item of menuFiltered.value) {
-      if (item.submenu && item.submenu.length > 0) {
-        selectedMenuUri.value = item.submenu[0].url || "";
-        break;
-      }
-    }
-  }
-}
-
-function openSearch() {
-  commandOpen.value = !commandOpen.value;
-  getSelectedMenu();
-}
-
-function openSelectedMenu() {
-  for (const item of menuFiltered.value) {
-    for (const submenu of item.submenu) {
-      if (submenu.url === selectedMenuUri.value) {
-        openMenuItem(item, submenu);
-        return;
-      }
-    }
-  }
-}
-function selectPreviousMenuItem() {
-  let i1 = 0;
-  for (const item of menuFiltered.value) {
-    let i2 = 0;
-    for (const submenu of item.submenu) {
-      if (submenu.url === selectedMenuUri.value) {
-        if (menuFiltered.value[i1].submenu[i2 - 1]) {
-          selectedMenuUri.value = menuFiltered.value[i1].submenu[i2 - 1].url ?? "";
-        } else if (menuFiltered.value[i1 - 1]?.submenu[menuFiltered.value[i1 - 1].submenu.length - 1]) {
-          selectedMenuUri.value = menuFiltered.value[i1 - 1].submenu[menuFiltered.value[i1 - 1].submenu.length - 1].url ?? "";
-        }
-        return;
-      }
-      i2 += 1;
-    }
-    i1 += 1;
-  }
-}
-function selectNextMenuItem() {
-  let i1 = 0;
-  for (const item of menuFiltered.value) {
-    let i2 = 0;
-    for (const submenu of item.submenu) {
-      if (submenu.url === selectedMenuUri.value) {
-        if (menuFiltered.value[i1].submenu[i2 + 1]) {
-          selectedMenuUri.value = menuFiltered.value[i1].submenu[i2 + 1].url ?? "";
-        } else if (menuFiltered.value[i1 + 1]?.submenu[0]) {
-          selectedMenuUri.value = menuFiltered.value[i1 + 1]?.submenu[0].url ?? "";
-        }
-        return;
-      }
-      i2 += 1;
-    }
-    i1 += 1;
-  }
-}
-
-function searchMenu() {
-  menuFiltered.value = [];
-  const qlower = q.value.toLowerCase();
-  for (const item of menu.value) {
-    const headerFound = item.name.toLowerCase().includes(qlower) || (item.keyword || "").toLowerCase().includes(qlower);
-    if (headerFound) {
-      menuFiltered.value.push(item);
-    }
-    if (!headerFound) {
-      const submenu: Submenu[] = [];
-      for (const sub of item.submenu) {
-        if (sub.name.toLowerCase().includes(qlower) || (sub.keyword || "").toLowerCase().includes(qlower)) {
-          submenu.push(sub);
-        }
-      }
-      if (submenu.length > 0) {
-        menuFiltered.value.push({ ...item, submenu });
-      }
-    }
-  }
-  getSelectedMenu();
-}
-
-onBeforeMount(() => {
-  searhMenu: for (const item of menuSchema) {
-    for (const sub of item.submenu) {
-      if (sub.url === route.path) {
-        menuOpen.value = item.id;
-        break searhMenu;
-      }
-    }
-  }
-});
-
-onMounted(() => {
-  initKeyShortcuts();
-
-  // Use configurable key for organization level
-  orgLevel.value = localStorage.getItem("app.user.organization.level") as any;
-
-  // For development/testing - provide a fallback if no orgLevel is set
-  if (!orgLevel.value) {
-    console.warn('No organization level found in localStorage. Using fallback "superadmin" for development.');
-    orgLevel.value = "superadmin";
-  }
-
-  console.log("Current orgLevel:", orgLevel.value);
-
-  const historyStr = localStorage.getItem("app.menu_history");
-  if (historyStr) {
-    try {
-      const history = JSON.parse(historyStr);
-      if (Array.isArray(history)) menuHistory.value = history;
-    } catch (_) {}
-  }
-
-  // api.get('/auth/directory').then((r) => {
-  //   for (const item of menuSchema) {
-  //     for (const sub of item.submenu) {
-  //       if (sub.url === route.path) menuOpen.value = item.id;
-  //       sub.visible = r.data.data.findIndex((row: any) => row.url === sub.url) >= 0;
-  //     }
-  //     item.submenu = item.submenu.filter(sub => sub.visible);
-  //     if (item.submenu.length > 0) menu.value.push(item);
-  //   }
-  // })
-
-  for (const item of menuSchema) {
-    for (const sub of item.submenu) {
-      if (sub.url === route.path) menuOpen.value = item.id;
-      // More lenient visibility check - show if orgLevel matches or if superadmin or if no orgLevels restriction
-      sub.visible = (orgLevel.value && sub.orgLevels.includes(orgLevel.value)) || orgLevel.value === "superadmin" || !sub.orgLevels || sub.orgLevels.length === 0;
-
-      console.log(`Menu item "${sub.name}": orgLevel=${orgLevel.value}, required=${sub.orgLevels}, visible=${sub.visible}`);
-    }
-    item.submenu = item.submenu.filter(sub => sub.visible);
-    if (item.submenu.length > 0) {
-      menu.value.push(item);
-      console.log(`Added menu group "${item.name}" with ${item.submenu.length} items`);
-    }
-  }
-
-  console.log("Final menu structure:", menu.value);
-  // menu.value = menuSchema;
-
-  // api.get('/auth/page-activity').then((r) => {
-  // 	menu.value = r.data.data;
-  // })
-});
-
-defineExpose({ openSearch });
-</script>
-
-<template>
-  <div
-    class="leftbar fixed bottom-0 left-0 top-0 z-50 w-20 border-r bg-white transition-all hover:w-[380px] hover:shadow-lg dark:border-dark_border2 dark:bg-dark_bg"
-    :class="[{ open: open }]"
-    v-on:mouseenter="() => (open = true)"
-    v-on:mouseleave="() => (open = false)">
-    <ScrollArea class="h-full">
-      <!-- Sticky header with logo and search -->
-      <div class="sticky-header sticky top-0 z-50 bg-white dark:bg-dark_bg">
-        <div class="overflow-hidden pt-6">
-          <div class="w-[380px] pl-3">
-            <RouterLink to="/" class="relative flex items-center">
-              <div class="app-logo mr-3 h-14 w-14 bg-no-repeat transition-all" :style="{ backgroundImage: `url(${logo})` }"></div>
-              <div class="text-4xl font-bold text-primary_main">
-                {{ companyName }}
-              </div>
-              <!-- <div v-if="isConfigLoaded" class="ml-2 text-xs text-green-600 dark:text-green-400">✓ Config Loaded</div>
-              <div v-else class="ml-2 text-xs text-red-600 dark:text-red-400">⚠ Config Loading...</div> -->
-            </RouterLink>
-          </div>
-        </div>
-        <div class="w-[380px] px-5 pt-6">
-          <div
-            class="relative flex h-10 cursor-pointer items-center rounded-md text-gray-500 transition dark:hover:border-dark_bg3"
-            :class="[{ border: open, 'bg-gray-100 dark:bg-dark_bg2': open }]"
-            v-on:click="commandOpen = true">
-            <div class="mr-4 flex h-10 w-10 items-center justify-center rounded-md">
-              <Search class="scale-90 2xl:scale-100" />
-            </div>
-            <span class="text-sm opacity-0 transition" :class="[{ 'opacity-100': open }]">Search...</span>
-            <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-400 opacity-0 transition" :class="[{ 'opacity-100': open }]">⌘K</span>
-          </div>
-          <div class="mb-3 mt-3 h-px w-10 bg-gray-200" :class="[{ 'opacity-0': open }]"></div>
-        </div>
-      </div>
-
-      <!-- Scrollable content -->
-      <div class="overflow-hidden pb-14">
-        <div class="w-[380px] px-5">
-          <Accordion collapsible type="single" :default-value="menuOpen">
-            <AccordionItem v-for="(item, i) in menu" :key="i" :value="item.id" class="relative mb-2 border-none p-0 font-medium text-gray-500 dark:text-dark_text">
-              <AccordionTrigger class="relative block p-0 hover:no-underline">
-                <RouterLink to="#" class="flex items-center rounded-md transition hover:bg-hover_main hover:text-primary_main dark:hover:bg-dark_bg3 dark:hover:text-dark_text">
-                  <div
-                    class="relative mr-4 flex h-10 w-10 items-center justify-center overflow-hidden rounded-md text-gray-800 dark:text-dark_text"
-                    :class="{
-                      'bg-active_main dark:bg-blue-500 dark:text-white': menuOpen === item.id
-                    }">
-                    <div class="relative z-3">
-                      <div v-html="item.icon" v-if="item.iconType === 'svg'"></div>
-                      <LucideIcon :name="item.icon" :size="item.iconSize || 24" :strokeWidth="1.4" class="scale-[.85] 2xl:scale-100" />
-                    </div>
-                  </div>
-                  <div class="text-[13px] opacity-0 transition 2xl:text-[13px]" :class="[{ 'opacity-100': open }]">
-                    {{ item.name }}
-                  </div>
-                </RouterLink>
-                <template v-slot:icon>
-                  <ChevronDown class="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400 dark:text-active_main"></ChevronDown>
-                </template>
-              </AccordionTrigger>
-              <AccordionContent v-if="item.submenu && item.submenu.length > 0">
-                <div class="group relative py-0.5 pl-10" v-for="(sub, i) in item.submenu" :key="i">
-                  <div
-                    class="absolute bottom-0 left-5 top-0 -ml-px w-0.5 bg-gray-200 group-hover:bg-primary_main dark:bg-dark_bg2/60 dark:group-hover:bg-dark_bg4"
-                    :class="{ '!bg-blue-500': sub.url === route.path }"></div>
-                  <div class="px-4 pb-px pt-3 text-xs uppercase tracking-wider text-gray-400" v-if="sub.type === 'header'">
-                    {{ sub.name }}
-                  </div>
-                  <div
-                    class="relative block cursor-pointer rounded-md px-4 py-2 text-xs transition hover:bg-hover_main hover:text-primary_main dark:hover:bg-dark_bg3 dark:hover:text-dark_text 2xl:text-[13px]"
-                    :class="{
-                      'bg-active_main text-primary_main dark:!bg-blue-500 dark:!text-white': sub.url === route.path,
-                      '!text-transparent dark:!text-transparent': !open
-                    }"
-                    v-on:click="openSubmenu(item, sub)"
-                    v-else>
-                    {{ sub.name }}
-                    <div
-                      class="absolute -left-4 top-3 h-2 w-2 rounded-full bg-orange-300 dark:bg-orange-700"
-                      v-if="sub.url && !sub.ok"
-                      :class="{
-                        '!bg-orange-300': sub.connectApi,
-                        '!bg-green-500': sub.finished
-                      }"></div>
-                  </div>
-                  <template v-if="sub.submenu && sub.submenu.length > 0">
-                    <div class="pl-4" v-for="(sub2, i2) in sub.submenu" :key="i2">
-                      <RouterLink :to="sub2.url || '#'" class="block rounded-md px-4 py-2 text-sm hover:bg-hover_main hover:text-primary_main">
-                        {{ sub2.name }}
-                      </RouterLink>
-                    </div>
-                  </template>
-                </div>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        </div>
-      </div>
-    </ScrollArea>
-  </div>
-
-  <Dialog v-model:open="commandOpen">
-    <DialogContent class="block w-[calc(100%-40px)] max-w-[680px] overflow-hidden p-0 dark:bg-dark_bg2">
-      <div class="relative border-b">
-        <input
-          type="text"
-          class="w-full px-12 py-3 dark:bg-dark_bg2"
-          placeholder="Cari halaman..."
-          v-model="q"
-          v-on:input.prevent="searchMenu"
-          v-on:keydown.enter.prevent="openSelectedMenu"
-          v-on:keydown.up.prevent="selectPreviousMenuItem"
-          v-on:keydown.down.prevent="selectNextMenuItem" />
-        <LucideSearch class="absolute left-3 top-3 opacity-60" :size="20" />
-      </div>
-      <div class="h-[400px]">
-        <ScrollArea class="h-full">
-          <section class="py-3" v-if="!q">
-            <div class="px-5 pt-3 text-center" v-if="menuHistory.length > 0">
-              <div class="mb-6 px-5 text-sm opacity-60">Ketik untuk mulai pencarian halaman</div>
-              <h4 class="mb-4 font-medium">Riwayat Halaman</h4>
-              <div class="flex flex-wrap items-start justify-center gap-0">
-                <button class="w-24 text-center leading-none" v-for="(item, i) in menuHistory" :key="i" v-on:click="openMenuItem(item as any, item)">
-                  <div class="mx-auto mb-2 flex size-20 items-center justify-center rounded-lg border text-slate-500 hover:border-slate-500 hover:bg-slate-100 hover:text-blue-600 hover:shadow-md">
-                    <LucideIcon :name="item.icon" :size="item.iconSize ? item.iconSize + 20 : 44" :strokeWidth="1.4" class="mx-auto flex-none" />
-                  </div>
-                  <span class="text-xs font-medium leading-none">
-                    {{ item.name }}
-                  </span>
-                </button>
-              </div>
-            </div>
-            <div class="px-5 text-sm opacity-60" v-else>Ketik untuk mulai pencarian halaman</div>
-          </section>
-          <section class="px-5 py-3 text-sm opacity-60" v-else-if="menuFiltered.length < 1">
-            <i>Halaman tidak ditemukan!</i>
-          </section>
-          <section class="py-3" v-else>
-            <div v-for="(item, i1) in menuFiltered" :key="item.id" class="px-2 pb-3">
-              <h4 class="mb-1 px-3 text-[13px] font-medium opacity-85">
-                {{ item.name }}
-              </h4>
-              <div v-for="(submenu, i2) in item.submenu" :key="submenu.url">
-                <button
-                  v-on:click="openMenuItem(item, submenu)"
-                  v-if="submenu.type !== 'header'"
-                  class="flex w-full cursor-pointer items-center rounded-sm px-3 py-1.5 text-sm hover:!bg-blue-500 hover:!text-white dark:hover:!bg-blue-600"
-                  :class="{
-                    'bg-blue-50 text-white dark:bg-dark_bg5': submenu.url === route.path,
-                    '!bg-blue-200 dark:!bg-dark_bg5': submenu.url === selectedMenuUri
-                  }">
-                  <LucideIcon :name="item.icon" :size="item.iconSize ? item.iconSize - 8 : 16" :strokeWidth="1.4" class="mr-3 flex-none" />
-                  {{ submenu.name }}
-                </button>
-              </div>
-            </div>
-          </section>
-        </ScrollArea>
-      </div>
-    </DialogContent>
-  </Dialog>
-</template>
-
-<style lang="scss">
-.leftbar {
-  .app-logo {
-    background-position: top center;
-    background-size: 2.6rem auto;
-    background-repeat: no-repeat;
-  }
-
-  &.open {
-    .app-logo {
-      background-size: 3.5rem auto;
-    }
-  }
-
-  .sticky-header {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  }
-}
-</style>

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

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import PageActivityContent from "../../components/pages/PageActivityContent.vue";
-import type { CustomTab } from "../../components/pages/PageTab.vue";
-import type { DasiV2FormSchema, FormSchema, FormSchemaHooks } from "../../types/form.types";
-import type { ColumnRef } from "../../vueform/config/types";
-import { nextTick, onMounted, ref, watch } from "vue";
-import { useRoute } from "vue-router";
-
-const route = useRoute();
-
-/**
- * As default page initialization
- * will do automatic get from routes
- * 
- * If manualInit is set to true, you have to hit
- * initPage manualy after setting pageCode and endpoint
- *
- */
-const props = defineProps(['manualInit']);
-
-/**
- * Base
- * 
- */
-const pageCode = defineModel<string>('pageCode', { default: '' });
-const endpoint = defineModel<string>('endpoint', { default: '' });
-
-/**
- * Form by Vueform
- *
- */
-const formSchema = ref<DasiV2FormSchema>();
-const formHooks = ref<FormSchemaHooks>();
-
-/**
- * Model binding
- *
- */
-const data = ref<any[]>();
-const customTabs = ref<CustomTab[]>();
-const columns = ref<ColumnRef[]>();
-const tab = ref<string>();
-const loading = ref<boolean>();
-const dataError = ref<string | null>();
-
-/**
- * El
- *
- */
-const pac = ref<InstanceType<typeof PageActivityContent>>();
-
-/**
- * Init page with timeout or nextTick
- * to make sure the model already set
- *
- */
-async function initPage() {
-  await nextTick();
-  pac.value?.initPage();
-}
-
-/**
- * Re-init page
- * if route params changed
- *
- */
-watch(
-  () => route.params,
-  (newParams) => {
-    if (props.manualInit) return;
-
-    /**
-     * Only reinitialize if the page or activity params have changed
-     * 
-     */
-    if (pageCode.value !== String(newParams.page) || endpoint.value !== String(newParams.activity)) {
-      pageCode.value = String(newParams.page);
-      endpoint.value = String(newParams.activity);
-      initPage();
-    }
-  },
-  { deep: true },
-);
-
-onMounted(() => {
-  if (props.manualInit) return;
-  pageCode.value = String(route.params.page);
-  endpoint.value = String(route.params.activity);
-  initPage();
-});
-
-defineExpose({ initPage });
-</script>
-
-<template>
-  <PageActivityContent ref="pac"
-    :page-code="pageCode"
-    :endpoint="endpoint"
-    v-model:schema="formSchema"
-    v-model:hooks="formHooks"
-    v-model:data="data"
-    v-model:custom-tabs="customTabs"
-    v-model:columns="columns"
-    v-model:tab="tab"
-    v-model:loading="loading"
-    v-model:data-error="dataError"
-  />
-</template>