adminforth 1.6.2-next.1 → 1.6.2-next.3

package/dist/spa/src/views/ResourceParent.vue

@@ -1,50 +0,0 @@
-<template>
-  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4 flex" 
-    :class="limitHeightToPage ? 'h-[calc(100vh-3.5rem)]': undefined"
-  >
-    <RouterView/>
-  </div>
-</template>
-
-<style>
-</style>
-
-<script setup>
-
-import { useCoreStore } from '@/stores/core';
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-
-const route = useRoute()
-const coreStore = useCoreStore()
-
-const limitHeightToPage = computed(() => {
-  if (route.name !== 'resource-list' ) {
-    return false;
-  }
-  // for mobile phones disable shrinking table at all because of the issues with HEADER and general UX
-  // use navigator.userAgent to detect mobile phones
-  if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
-    return false;
-  }
-
-  if (!coreStore.resource?.options?.pageInjections?.list) {
-    return true;
-  }
-  const listPageInjects = coreStore.resource.options.pageInjections.list;
-  
-  for (const pi of [listPageInjects.beforeBreadcrumbs, listPageInjects.afterBreadcrumbs, listPageInjects.bottom]) {
-    if (pi) {
-      for (const piItem of pi) {
-        if (!piItem.meta?.thinEnoughToShrinkTable) {
-          return false;
-        }
-      }
-    }
-  }
-
-  return true;
-
-})
-
-</script>

package/dist/spa/src/views/ShowView.vue

@@ -1,209 +0,0 @@
-<template>
-  <div class="relative w-full">
-    <component 
-      v-if="!loading"
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.beforeBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-    <BreadcrumbsWithButtons>
-      <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
-        :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
-      >
-        <IconPlusOutline class="w-4 h-4 me-2"/>
-        {{ $t('Add new') }}
-      </RouterLink>
-
-      <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-      >
-        <IconPenSolid class="w-4 h-4" />
-        {{ $t('Edit') }}
-      </RouterLink>
-
-      <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="deleteRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white  border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-      >
-        <IconTrashBinSolid class="w-4 h-4" />
-        {{ $t('Delete') }}
-      </button>
-
-      <ThreeDotsMenu 
-        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.show?.threeDotsDropdownItems"
-      ></ThreeDotsMenu>
-    </BreadcrumbsWithButtons>
-
-    <component 
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.afterBreadcrumbs || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
-    <div v-if="loading" role="status" class="max-w-sm animate-pulse">
-        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[330px] mb-2.5"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[300px] mb-2.5"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
-        <span class="sr-only">{{ $t('Loading...') }}</span>
-    </div>
-    <div 
-      v-else-if="coreStore.record"
-      class="relative w-full flex flex-col gap-4"
-    >
-    <div v-if="!groups.length && allColumns.length">
-      <ShowTable
-        :columns="allColumns"
-        :resource="coreStore.resource"
-        :record="coreStore.record"
-      />
-    </div>
-    <template v-else>
-      <template v-for="group in groups" :key="group.groupName">
-        <ShowTable
-          :columns="group.columns"
-          :groupName="group.groupName"
-          :resource="coreStore.resource"
-          :record="coreStore.record"
-        />
-      </template>
-      <template v-if="otherColumns.length > 0">
-        <ShowTable
-          :columns="otherColumns"
-          groupName="Other Fields"
-          :resource="coreStore.resource"
-          :record="coreStore.record"
-        />
-      </template>
-    </template>
-    </div>
-
-    <div v-else class="text-center text-gray-500 dark:text-gray-400 mt-10">
-      {{ $t('Ooops. Record not found') }}
-    </div>
-
-    <component 
-      v-if="!loading"
-      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.bottom || []"
-      :is="getCustomComponent(c)"
-      :meta="c.meta"
-      :column="column"
-      :record="coreStore.record"
-      :resource="coreStore.resource"
-      :adminUser="coreStore.adminUser"
-    />
-
-
-  </div>
-</template>
-
-
-<script setup lang="ts">
-
-import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-
-import { useCoreStore } from '@/stores/core';
-import { getCustomComponent, checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
-import { IconPenSolid, IconTrashBinSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
-import { onMounted, ref, computed } from 'vue';
-import { useRoute,useRouter } from 'vue-router';
-import {callAdminForthApi} from '@/utils';
-import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
-import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
-import ShowTable from '@/components/ShowTable.vue';
-import adminforth from "@/adminforth";
-
-
-const route = useRoute();
-const router = useRouter();
-const loading = ref(true);
-
-const coreStore = useCoreStore();
-
-onMounted(async () => {
-  loading.value = true;
-  await coreStore.fetchResourceFull({
-    resourceId: route.params.resourceId
-  });
-  initThreeDotsDropdown();
-  await coreStore.fetchRecord({
-    resourceId: route.params.resourceId, 
-    primaryKey: route.params.primaryKey,
-    source: 'show',
-  });
-  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
-  loading.value = false;
-});
-
-const groups = computed(() => {
-  let fieldGroupType;
-  if (coreStore.resource.options?.showFieldGroups) {
-    fieldGroupType = coreStore.resource.options.showFieldGroups;
-  } else if (coreStore.resource.options?.showFieldGroups === null) {
-    fieldGroupType = [];
-  } else {
-    fieldGroupType = coreStore.resource.options?.fieldGroups;
-  }
-
-  const activeGroups = fieldGroupType ?? [];
-
-  return activeGroups.map(group => ({
-    ...group,
-    columns: coreStore.resource.columns.filter(
-      col => group.columns.includes(col.name) && col.showIn.includes('show')
-    ),
-  }));
-});
-
-const allColumns = computed(() => {
-  return coreStore.resource.columns.filter(col => col.showIn.includes('show'));
-});
-
-const otherColumns = computed(() => {
-  const groupedColumnNames = new Set(
-    groups.value.flatMap(group => group.columns.map(col => col.name))
-  );
-
-  return coreStore.resource.columns.filter(
-    col => !groupedColumnNames.has(col.name) && col.showIn.includes('show')
-  );
-});
-
-async function deleteRecord(row) {
-  const data = await adminforth.confirm({
-    message: 'Are you sure you want to delete this item?',
-    yes: 'Delete',
-    no: 'Cancel',
-  });
-  if (data) {
-    try {
-      const res = await callAdminForthApi({
-      path: '/delete_record',
-      method: 'POST',
-      body: {
-        resourceId: route.params.resourceId,
-        primaryKey: route.params.primaryKey,
-      }});
-      if (!res.error){
-        router.push({ name: 'resource-list', params: { resourceId: route.params.resourceId } });
-        showSuccesTost('Record deleted successfully')
-      } else {
-        showErrorTost(res.error)
-      }
-
-    } catch (e) {
-      console.error(e);
-    };
-  }
-    
-}
-
-</script>

package/dist/spa/src/websocket.ts

@@ -1,129 +0,0 @@
-
-const subscriptions: { [topic: string]: ((data: any) => void)[] } = {};
-const state: {
-  status: 'connecting' | 'connected' | 'disconnected';
-  ws: WebSocket | null;
-} = {
-  status: 'connecting',
-  ws: null
-};
-
-function doPhysicalSubscribe(topic: string) {
-  state.ws!.send(JSON.stringify({ type: 'subscribe', topic }));
-}
-
-function doPhysicalUnsubscribe(topic: string) {
-  state.ws!.send(JSON.stringify({ type: 'unsubscribe', topic }));
-}
-
-
-async function connect () {
-  // if socket is not supported return
-  if (!window.WebSocket) {
-    console.error('Websocket not supported by this browser');
-    return;
-  }
-  if (state.ws?.connected) {
-    console.error('🔌 AFWS already connected');
-    return;
-  }
-
-  let base = import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || '';
-  if (base.endsWith('/')) {
-    base = base.slice(0, -1);
-  }
-
-  state.ws = new WebSocket(`${
-    window.location.protocol === 'http:' ? 'ws' : 'wss'
-  }://${window.location.host}${base}/afws`);
-  state.status = 'connecting';
-  state.ws.addEventListener('open', () => {
-    console.log('🔌 AFWS connected');
-    state.status = 'connected';
-
-  });
-  state.ws.addEventListener('message', (event) => {
-    const data = event.data.toString();
-    if (data === 'pong') {
-      return;
-    }
-    console.log('🔌 AFWS message', data);
-    
-    const message = JSON.parse(data);
-    if (message.type === 'ready') {
-      Object.keys(subscriptions).forEach((topic) => {
-        doPhysicalSubscribe(topic);
-      });
-      return
-    }
-    if (message.type === 'message') {
-      const topic = message.topic;
-      const data = message.data;
-      if (subscriptions[topic]) {
-        for (const callback of subscriptions[topic]) {
-          callback(data);
-        }
-      }
-    }
-  });
-  state.ws.addEventListener('close', () => {
-    console.log('🔌 AFWS disconnected');
-    setTimeout(() => {
-      console.log('🔌 AFWS reconnecting after close');
-      connect();
-      // if it is first time, reconnect instantly
-    }, state.status === 'connected' ? 0 : 2_000);
-    state.status = 'disconnected';
-  });
-}
-
-try {
-  connect();
-} catch (e) {
-  console.error('🔌 AFWS failed to connect', e);
-}
-
-export function reconnect() {
-  console.log('🔌 AFWS reconnect initiated');
-  // disconnect if already connected
-  if (state.status === 'connected') {
-    state.ws!.close();
-  }
-  
-}
-
-setInterval(() => {
-  if (state.status === 'connected') {
-    state.ws!.send('ping');
-  }
-}, 10_000);
-
-
-export default {
-  subscribe(topic: string, callback: (data: any) => void): void {
-    if (!subscriptions[topic]) {
-      subscriptions[topic] = [];
-    }
-    subscriptions[topic].push(callback);
-    if (state.status === 'connected') {
-      doPhysicalSubscribe(topic);
-    }
-  },
-
-  unsubscribe(topic: string): void {
-    delete subscriptions[topic];
-    if (state.status === 'connected') {
-      doPhysicalUnsubscribe(topic);
-    }
-  },
-
-  unsubscribeAll(): void {
-    Object.keys(subscriptions).forEach((topic) => {
-      delete subscriptions[topic];
-      if (state.status === 'connected') {
-        doPhysicalUnsubscribe(topic);
-      }
-    });
-  }
-  
-}

package/dist/spa/tailwind.config.js

@@ -1,19 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-import flowbitePlugin from 'flowbite/plugin';
-
-export default {
-  content:  ["./src/**/*.{vue, js, ts, tsx}","./src/*.{vue, js, ts, tsx}", "./index.html", "./node_modules/flowbite/**/*.js"],
-  theme: {
-    extend: {
-      /* IMPORTANT:ADMINFORTH TAILWIND STYLES */
-  }
-  },
-
-  darkMode: 'class',
-  plugins: [
-    flowbitePlugin({
-      charts: true,
-    }),
-  ],
-}
-

package/dist/spa/tsconfig.app.json

@@ -1,14 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

package/dist/spa/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
-    }
-  ],
-}

package/dist/spa/tsconfig.node.json

@@ -1,19 +0,0 @@
-{
-  "extends": "@tsconfig/node20/tsconfig.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*"
-  ],
-  "compilerOptions": {
-    "composite": true,
-    "noEmit": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "types": ["node"]
-  }
-}

package/dist/spa/vite.config.ts

@@ -1,52 +0,0 @@
-import { fileURLToPath, URL } from 'node:url'
-
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import portfinder from 'portfinder';
-
-/**
- * Find the next available port after a specified port.
- * @param {number} startPort - The starting port to check.
- * @returns {Promise<number>} - A promise that resolves with the next available port.
- */
-async function getNextAvailablePort(startPort) {
-  return await portfinder.getPortPromise({ port: startPort });
-};
-
-const appPort = await getNextAvailablePort(5173);
-const hmrPort = await getNextAvailablePort(5273);
-console.log(`SPA port: ${appPort}. HMR port: ${hmrPort}`);
-// https://vitejs.dev/config/
-export default defineConfig({
-  base: process.env.VITE_ADMINFORTH_PUBLIC_PATH || '/',
-  server: {
-    port: appPort,
-    hmr: {
-      path: '/adminforth-dev-server-ws', // Set your custom WebSocket path here
-      port: hmrPort,
-    },
-  },
-  plugins: [
-    vue(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@@': fileURLToPath(new URL('./src/custom', import.meta.url)),
-    }
-  },
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks(id) {
-          // reduce the size of the vendor chunk
-          // to only include the package name
-          // helps to reduce consumption of memory
-          if (id.includes('node_modules')) {
-            return id.toString().split('node_modules/')[1].split('/')[0].toString();
-          }
-        },
-      },
-    },
-  },
-})