adminforth 1.3.55-next.0 → 1.3.55

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

@@ -0,0 +1,194 @@
+<template>
+  <div class="relative">
+    <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"/>
+        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" />
+        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" />
+        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">Loading...</span>
+    </div>
+    <div 
+      v-else-if="coreStore.record"
+      class="relative overflow-x-auto rounded-default shadow-resourseFormShadow "
+    >
+     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
+        <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+                <th scope="col" class="px-6 py-3">
+                    Field
+                </th>
+                <th scope="col" class="px-6 py-3 w-5/6">
+                    Value
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="column,i in coreStore.resource?.columns.filter(c => c.showIn.includes('show'))" :key="column.name"
+              class="bg-lightForm bg-darkForm odd:dark:bg-gray-900 even:dark:bg-gray-800 dark:border-gray-700"
+              :class="{ 'border-b': i !== coreStore.resource.columns.filter(c => c.showIn.includes('show')).length - 1 }"
+            >
+              <component
+                v-if="column.components?.showRow"
+                  :is="getCustomComponent(column.components.showRow)"
+                  :meta="column.components.showRow.meta"
+                  :column="column"
+                  :resource="coreStore.resource"
+                  :record="coreStore.record"
+              />
+              <template v-else>
+                <td class="px-6 py-4 whitespace-nowrap "> <!--align-top-->
+                  {{ column.label }}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap" :data-af-column="column.name">
+                  <component
+                    v-if="column?.components?.show"
+                    :is="getCustomComponent(column?.components?.show)"
+                    :resource="coreStore.resource"
+                    :meta="column.components.show.meta"
+                    :column="column"
+                    :record="coreStore.record"
+                  />
+                  <ValueRenderer v-else 
+                    :column="column" 
+                    :record="coreStore.record"
+                  />
+                </td>
+              </template>
+            </tr>
+        </tbody>
+     </table>
+    </div>
+
+    <div v-else class="text-center text-gray-500 dark:text-gray-400 mt-10">
+      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>
+
+import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
+
+import ValueRenderer from '@/components/ValueRenderer.vue';
+import { useCoreStore } from '@/stores/core';
+import { getCustomComponent, checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
+import { IconPenSolid, IconTrashBinSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+import { onMounted, ref } from 'vue';
+import { useRoute,useRouter } from 'vue-router';
+import {callAdminForthApi} from '@/utils';
+import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
+
+
+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,
+  });
+  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
+  loading.value = false;
+});
+
+async function deleteRecord(row) {
+  const data = await window.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/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+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: [
+    require('flowbite/plugin')({
+      charts: true,
+    }),
+  ],
+}
+

package/dist/spa/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "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

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

package/dist/spa/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "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

@@ -0,0 +1,56 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { clear, error } from 'node:console';
+
+
+const customLogger = {
+  info(msg: string) {
+    // Filter out the lines containing '➜ Local:' or '➜ Network:'
+    if (!msg.includes('➜')) {
+      console.log(msg);
+    }
+  },
+  warnOnce(msg: string) {
+    console.warn('warn once', msg);
+    if (!this.hasWarned) {
+      this.hasWarned = true;
+    }
+  },
+  warn(msg: string) {
+    console.warn(msg);
+  },
+  error(msg: string) {
+    console.error(msg);
+  },
+  clear() {
+    console.clear();
+  },
+  clearScreen() {
+    console.clear();
+  },
+  hasWarned: false,
+  hasErrorLogged: (error: any): boolean => {
+    return false;
+  }
+};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: process.env.VITE_ADMINFORTH_PUBLIC_PATH || '/',
+  server: {
+    port: 5173,
+    strictPort: true, // better predictability
+  },
+  customLogger,
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@@': fileURLToPath(new URL('./src/custom', import.meta.url)),
+    }
+  }
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.3.55-next.0",
+  "version": "1.3.55",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc",
+    "build": "npm run prepareDist && tsc",
     "--comment": "to suppply the spa without symlinks which allows to not include source code in the package",
     "prepareDist": "cp -rL spa dist/",
     "put-git-tag": "git tag v$(node -p \"require('./package.json').version\") && git push --tags",