adminforth 1.1.50 → 1.1.52

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

@@ -1,38 +1,21 @@
 <template>
   <div class="relative">
-    <component 
-      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?.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-blue-700 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"
+      <RouterLink :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
+        class="flex items-center py-1 px-3 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-blue-700 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"
+      <button  @click="deleteRecord"
+        class="flex items-center py-1 px-3 mb-2 text-sm font-medium text-red-600 focus:outline-none bg-white rounded 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>
     </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>
@@ -44,10 +27,10 @@
     </div>
     <div 
       v-else
-      class="relative overflow-x-auto shadow-resourse-form-shadow "
+      class="relative overflow-x-auto shadow-md sm:rounded-lg"
     >
-     <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-form-view-heading dark:bg-gray-700 dark:text-gray-400">
+     <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
             <tr>
                 <th scope="col" class="px-6 py-3">
                     Field
@@ -58,49 +41,19 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="column in coreStore.resource?.columns.filter(c => c.showIn.includes('show'))" :key="column.name"
-                class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
+            <tr v-for="column in coreStore.resourceColumns?.filter(c => c.showIn.includes('show'))" :key="column.name"
+                class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700"
             >
-              <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 class="px-6 py-4 whitespace-nowrap">
+                    {{ column.label }}
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
-                  <component
-                    v-if="showComponentsPerColumn[column.name]"
-                    :is="showComponentsPerColumn[column.name]"
-                    :resource="coreStore.resource"
-                    :meta="column.components.show.meta"
-                    :column="column"
-                    :record="coreStore.record"
-                  />
-                  <ValueRenderer v-else 
-                    :column="column" 
-                    :record="coreStore.record"
-                  />
+                    <ValueRenderer :column="column" :row="coreStore.record" />
                 </td>
-              </template>
             </tr>
+            
         </tbody>
     </table>
-
-    <component 
-      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>
 
 
@@ -110,79 +63,31 @@
 
 <script setup>
 
+import { ref, computed, onMounted } from 'vue';  
+import { useRoute } from 'vue-router';
+import { callAdminForthApi } from '@/utils';
 import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
-
-import ValueRenderer from '@/components/ValueRenderer.vue';
-import { useCoreStore } from '@/stores/core';
-import { useModalStore } from '@/stores/modal';
-import { getCustomComponent, checkAcessByAllowedActions } from '@/utils';
 import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
-import { onMounted, ref } from 'vue';
-import { useRoute,useRouter } from 'vue-router';
-import {callAdminForthApi} from '@/utils';
-import {showSuccesTost} from '@/composables/useFrontendApi';
+import { useCoreStore } from '@/stores/core';
+import ValueRenderer from '@/components/ValueRenderer.vue';
 
 
 const item = ref(null);
 const route = useRoute();
-const router = useRouter();
 const loading = ref(false);
-let showComponentsPerColumn = {};
-
-console.log(route.params,'showWiev');
-
 
 const coreStore = useCoreStore();
-const modalStore = useModalStore();
 
 onMounted(async () => {
   loading.value = true;
-  await coreStore.fetchResourceFull({
+  await coreStore.fetchColumns({
     resourceId: route.params.resourceId
   });
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
   });
-  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
-
-  showComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.show) {
-          acc[column.name] = getCustomComponent(column.components.show);
-      }
-      return acc;
-  }, {});
   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 {
-        console.error(res.error)
-      }
-
-    } catch (e) {
-      console.error(e);
-      };
-    }
-
-    
-}
-
 </script>

package/dist/spa/tailwind.config.js

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

package/dist/spa/vite.config.ts

@@ -11,12 +11,6 @@ const customLogger = {
       console.log(msg);
     }
   },
-  warnOnce(msg: string) {
-    console.warn('warn once', msg);
-    if (!this.hasWarned) {
-      this.hasWarned = true;
-    }
-  },
   warn(msg: string) {
     console.warn(msg);
   },

package/dist/types.js

@@ -0,0 +1,30 @@
+// typical types which AdminForth supports
+//
+export const AdminForthTypes = {
+    STRING: 'string',
+    INTEGER: 'integer',
+    FLOAT: 'float',
+    DECIMAL: 'decimal',
+    BOOLEAN: 'boolean',
+    DATE: 'date',
+    DATETIME: 'datetime',
+    TIME: 'time',
+    TEXT: 'text',
+    JSON: 'json',
+};
+export const AdminForthFilterOperators = {
+    EQ: 'eq',
+    NE: 'ne',
+    GT: 'gt',
+    LT: 'lt',
+    GTE: 'gte',
+    LTE: 'lte',
+    LIKE: 'like',
+    ILIKE: 'ilike',
+    IN: 'in',
+    NIN: 'nin',
+};
+export const AdminForthSortDirections = {
+    ASC: 'asc',
+    DESC: 'desc',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.1.50",
+  "version": "1.1.52",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/spa/src/App.vue

@@ -107,9 +107,9 @@
   </aside>
   
 
-  <div class="sm:ml-64 dark:bg-gray-800" v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady">
+  <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady">
     <div class="p-0 dark:border-gray-700 mt-14">
-      <RouterView/>     
+        <RouterView/>     
     </div>
   </div> 
 

package/spa/src/views/ResourceParent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4">
+  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`">
     <RouterView/>
   </div>
 </template>
@@ -11,6 +11,7 @@
 
 
 import { useCoreStore } from '@/stores/core';
+import { onMounted } from 'vue';
 
 const coreStore = useCoreStore()
 

package/dist/spa/src/components/CustomRangePicker.vue

@@ -1,148 +0,0 @@
-<template>
-  <div class="flex flex-wrap gap-2">
-    <input
-      type="number" aria-describedby="helper-text-explanation"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      placeholder="From"
-      v-model="start"
-    >
-
-    <input
-      type="number" aria-describedby="helper-text-explanation"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      placeholder="To"
-      v-model="end"
-    >
-
-    <button
-      v-if="isChanged"
-      type="button"
-      class="flex items-center p-0.5 ml-auto 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-blue-700 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 disabled:opacity-50 disabled:cursor-not-allowed"
-      @click="clear">Clear
-    </button>
-
-    <div class="w-full">
-      <vue-slider
-        class="custom-slider"
-        :dot-size="20"
-        height="7.99px"
-        :min="minFormatted"
-        :max="maxFormatted"
-        v-model="sliderValue"
-        @update:model-value="updateFromSlider($event)"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import VueSlider from 'vue-slider-component';
-import 'vue-slider-component/theme/antd.css'
-import {computed, onMounted, ref, watch} from "vue";
-import debounce from 'debounce'
-
-const props = defineProps({
-  valueStart: {
-    default: '',
-  },
-  valueEnd: {
-    default: '',
-  },
-  min: {
-    default: 0,
-  },
-  max: {
-    default: 10,
-  },
-});
-
-const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
-
-const minFormatted = computed(() => Math.floor(props.min));
-const maxFormatted = computed(() => Math.ceil(props.max));
-
-const isChanged = computed(() => {
-  return start.value && start.value !== minFormatted.value || end.value && end.value !== maxFormatted.value;
-});
-
-const start = ref(props.valueStart);
-const end = ref(props.valueEnd);
-
-const sliderValue = ref([minFormatted.value, maxFormatted.value]);
-
-const updateFromSlider =
-    debounce((value: [number, number]) => {
-      start.value = value[0] === minFormatted.value ? '': value[0];
-      end.value = value[1] === maxFormatted.value ? '': value[1];
-    }, 500);
-
-onMounted(() => {
-  updateStartFromProps();
-  updateEndFromProps();
-
-  watch(() => props.valueStart, (value) => {
-    updateStartFromProps();
-  });
-
-  watch(() => props.valueEnd, (value) => {
-    updateEndFromProps();
-  });
-})
-
-function updateStartFromProps() {
-  start.value = props.valueStart;
-  setSliderValues(start.value, end.value)
-}
-
-function updateEndFromProps() {
-  end.value = props.valueEnd;
-  setSliderValues(start.value, end.value)
-}
-
-watch(start, () => {
-  console.log('⚡ emit', start.value)
-  emit('update:valueStart', start.value)
-})
-
-watch(end, () => {
-  console.log('⚡ emit', end.value)
-  emit('update:valueEnd', end.value);
-})
-
-const clear = () => {
-  start.value = ''
-  end.value = ''
-  setSliderValues('', '')
-}
-
-function setSliderValues(start, end) {
-  sliderValue.value = [start || minFormatted.value, end || maxFormatted.value];
-}
-</script>
-
-<style lang="scss" scoped>
-.custom-slider {
-    &:deep(.vue-slider-rail) {
-        background-color: rgb(229 231 235);
-    }
-
-    &:deep(.vue-slider-dot-handle) {
-        background-color: #1c64f2;
-        border: none;
-        box-shadow: none;
-    }
-
-    &:deep(.vue-slider-dot-handle:hover) {
-        background-color: #1c64f2;
-        border: none;
-        box-shadow: none;
-    }
-
-    &:deep(.vue-slider-process) {
-        background-color: rgb(225 239 254);
-    }
-
-    &:deep(.vue-slider-process:hover) {
-        background-color: rgb(225 239 254);
-    }
-}
-</style>