adminforth 1.4.3-next.8 → 1.5.1

package/dist/spa/src/afcl/LinkButton.vue

@@ -0,0 +1,23 @@
+<template>
+  <router-link 
+    v-bind="$attrs"
+    type="submit" 
+    class="flex items-center justify-center gap-1 text-lightPrimaryContrast bg-lightPrimary dark:bg-darkPrimary hover:brightness-110 
+      focus:ring-4 focus:outline-none focus:ring-lightPrimary focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkPrimary dark:focus:ring-opacity-50"
+    :class="{
+      'cursor-default': props.disabled,
+      'opacity-50': props.disabled,
+      'pointer-events-none': props.disabled,
+    }"
+  >
+    <slot></slot>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps({
+  disabled: Boolean,
+});
+
+</script>

package/dist/spa/src/afcl/Select.vue

@@ -6,7 +6,7 @@
         v-model="search"
         @click="inputClick"
         @input="inputInput"
-        class="block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+        class="block w-full pl-3 pr-10 py-2.5 border border-gray-300 rounded-md leading-5 bg-gray-50 placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
         :placeholder="
           selectedItems.length && !multiple ? '' :  (showDropdown ? 'Search' : placeholder || 'Select...') 
         "
@@ -24,11 +24,12 @@
 
       <div class="absolute inset-y-0 right-2 flex items-center pointer-events-none">
         <!-- triangle icon -->
-        <IconCaretDownSolid v-if="!showDropdown" class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50" />
-        <IconCaretUpSolid v-else class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50" />
+        <IconCaretDownSolid class="h-5 w-5 text-lightPrimary dark:text-gray-400 opacity-50 transition duration-150 ease-in"
+          :class="{ 'transform rotate-180': showDropdown }"
+        />
       </div>
     </div>
-    <div v-if="showDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+    <div v-if="showDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-96">
       <div
         v-for="item in filteredItems"
         :key="item.value"
@@ -74,8 +75,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { IconCaretDownSolid, IconCaretUpSolid } from '@iconify-prerendered/vue-flowbite';
+import { ref, computed, onMounted, onUnmounted, watch, type Ref } from 'vue';
+import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 
 
 const props = defineProps({
@@ -98,7 +99,7 @@ const emit = defineEmits(['update:modelValue']);
 const search = ref('');
 const showDropdown = ref(false);
 
-const selectedItems = ref([]);
+const selectedItems: Ref<any[]> = ref([]);
 
 function inputInput() {
   if (!props.multiple && selectedItems.value.length) {

package/dist/spa/src/afcl/index.ts

@@ -3,3 +3,6 @@
 export { default as Select } from './Select.vue';
 export { default as Link } from './Link.vue';
 export { default as Button } from './Button.vue';
+export { default as Input } from './Input.vue';
+export { default as Tooltip } from './Tooltip.vue';
+export { default as LinkButton } from './LinkButton.vue';

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

@@ -121,7 +121,6 @@
 
 <script setup>
 import { watch, computed } from 'vue'
-import Dropdown from '@/components/Dropdown.vue';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
 import { callAdminForthApi } from '@/utils';
 import { useRouter } from 'vue-router';

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

@@ -20,13 +20,13 @@
           :key="column.name"
           v-if="currentValues !== null"
           class="bg-ligftForm dark:bg-gray-800 dark:border-gray-700 block md:table-row"
-          :class="{ 'border-b': i !== group.columns.length - 1 }"
+          :class="{ 'border-b': i !== group.columns.length - 1, 'opacity-50 pointer-events-none': column.editReadonly && source === 'edit'}"
         >
           <td class="px-6 py-4 flex items-center block md:table-cell pb-0 md:pb-4" 
               :class="{'rounded-bl-lg border-b-none': i === group.columns.length - 1}"> <!--align-top-->
             <span class="flex items-center gap-1">                     
               {{ column.label }}
-              <AfTooltip v-if="column.required[mode]">
+              <Tooltip v-if="column.required[mode]">
 
                 <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
                   :class="(columnError(column) && validating) ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'"
@@ -35,7 +35,7 @@
                 <template #tooltip>
                   Required field
                 </template>
-              </AfTooltip>
+              </Tooltip>
             </span>
             
             
@@ -154,8 +154,8 @@
   import { IconExclamationCircleSolid, IconEyeSlashSolid, IconEyeSolid } from '@iconify-prerendered/vue-flowbite';
   import CustomDatePicker from "@/components/CustomDatePicker.vue";
   import Select from '@/afcl/Select.vue';
-  import AfTooltip from "./AfTooltip.vue";
   import { getCustomComponent } from '@/utils';
+  import { Tooltip } from '@/afcl';
 
 
   const props = defineProps({

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

@@ -109,7 +109,7 @@
           </td>
           <td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
             <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
-              <AfTooltip>
+              <Tooltip>
                 <RouterLink
                   v-if="resource.options?.allowedActions.show"
                   :to="{ 
@@ -127,9 +127,9 @@
                 <template v-slot:tooltip>
                   Show item
                 </template>
-              </AfTooltip>
+              </Tooltip>
 
-              <AfTooltip>
+              <Tooltip>
                 <RouterLink
                   v-if="resource.options?.allowedActions.edit"
                   :to="{ 
@@ -145,9 +145,9 @@
                 <template v-slot:tooltip>
                   Edit item
                 </template>
-              </AfTooltip>
+              </Tooltip>
 
-              <AfTooltip>
+              <Tooltip>
                 <button
                   v-if="resource.options?.allowedActions.delete"
                   @click="deleteRecord(row)"
@@ -158,11 +158,11 @@
                 <template v-slot:tooltip>
                   Delete item
                 </template>
-              </AfTooltip>
+              </Tooltip>
                 
-              <template v-if="coreStore.resourceOptions?.pageInjections?.list?.customActionIcons">
+              <template v-if="customActionsInjection">
                 <component 
-                  v-for="c in coreStore.resourceOptions?.pageInjections?.list?.customActionIcons"
+                  v-for="c in customActionsInjection"
                   :is="getCustomComponent(c)" 
                   :meta="c.meta"
                   :resource="coreStore.resource" 
@@ -244,7 +244,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 
 
 import { computed, onMounted, ref, watch } from 'vue';
@@ -266,21 +266,21 @@ import {
   IconTrashBinSolid
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
-import AfTooltip from './AfTooltip.vue';
+import { Tooltip } from '@/afcl';
 
 const coreStore = useCoreStore();
 
-
-const props = defineProps([
-  'page',
-  'resource', 
-  'rows',
-  'totalRows',
-  'pageSize',
-  'checkboxes',
-  'sort',
-  'noRoundings'
-])
+const props = defineProps<{
+  page: number,
+  resource: any,
+  rows: any[] | null,
+  totalRows: number,
+  pageSize: number,
+  checkboxes: any[],
+  sort: any[],
+  noRoundings?: boolean,
+  customActionsInjection?: any[],
+}>();
 
 // emits, update page
 const emits = defineEmits([

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

@@ -29,9 +29,11 @@
     <span v-else-if="column.type === 'richtext'">
       <div v-html="protectAgainstXSS(record[column.name])" class="allow-lists"></div>
     </span>
+    <span v-else-if="column.type === 'decimal'">
+      {{ checkEmptyValues(record[column.name] && parseFloat(record[column.name]), route.meta.type) }}
+    </span>
     <span v-else-if="column.type === 'json'">
       <JsonViewer :value="record[column.name]" :expandDepth="column.extra?.jsonCollapsedLevel" copyable sort :theme="coreStore.theme" />
-
     </span>
     <span v-else>
       {{ checkEmptyValues(record[column.name],route.meta.type) }}

package/dist/spa/src/composables/useStores.ts

@@ -50,7 +50,10 @@ export class FrontendAPI {
         setFilter: () => this.setListFilter.bind(this),
         updateFilter: () => this.updateListFilter.bind(this),
         clearFilters: () => this.clearListFilters.bind(this),
-      }
+      },
+      menu: {
+        refreshMenuBadges: () => {/* will be redefined */}
+      },
     };
   }
 

package/dist/spa/src/renderers/CompactField.vue

@@ -1,19 +1,19 @@
 <template>
-  <AfTooltip>
+  <Tooltip>
     <span class="flex items-center">
       {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
     </span>
     <template #tooltip v-if="visualValue">
       {{ props.record[props.column.name] }}
     </template>
-  </AfTooltip>
+  </Tooltip>
   
 </template>
 
 <script setup>  
 import { computed, ref, onMounted, nextTick } from 'vue';
 import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
-import AfTooltip from '@/components/AfTooltip.vue';
+import Tooltip from '@/afcl/Tooltip.vue';
 
 
 const visualValue = computed(() => {
@@ -25,7 +25,7 @@ const visualValue = computed(() => {
   return val;
 });
 
-const props = defineProps(['column', 'record', 'meta']);
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
 
 const id = ref();
 

package/dist/spa/src/renderers/CompactUUID.vue

@@ -1,19 +1,19 @@
 <template>
-  <AfTooltip>
+  <Tooltip>
     <span class="flex items-center">
       {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
     </span>
     <template #tooltip v-if="visualValue">
       {{ props.record[props.column.name] }}
     </template>
-  </AfTooltip>
+  </Tooltip>
   
 </template>
 
 <script setup>  
 import { computed, ref, onMounted, nextTick } from 'vue';
 import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
-import AfTooltip from '@/components/AfTooltip.vue';
+import Tooltip from '@/afcl/Tooltip.vue';
 
 
 const visualValue = computed(() => {
@@ -25,7 +25,7 @@ const visualValue = computed(() => {
   return val;
 });
 
-const props = defineProps(['column', 'record', 'meta']);
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
 
 const id = ref();
 

package/dist/spa/src/renderers/CountryFlag.vue

@@ -1,5 +1,5 @@
 <template>
-    <AfTooltip>
+    <Tooltip>
       <span class="flex items-center">
         <span 
           :class="{[`fi-${countryIsoLow}`]: true, 'flag-icon': countryName}"
@@ -10,7 +10,7 @@
       <template v-if="shouldShowTooltip" #tooltip>
         {{ countryName }}
       </template>
-    </AfTooltip>
+    </Tooltip>
 </template>
 
 <script setup>  
@@ -19,7 +19,7 @@ import { computed, ref, onMounted } from 'vue';
 import 'flag-icons/css/flag-icons.min.css';
 import isoCountries from 'i18n-iso-countries';
 import enLocal from 'i18n-iso-countries/langs/en.json';
-import AfTooltip from '@/components/AfTooltip.vue';
+import Tooltip from '@/afcl/Tooltip.vue';
 
 isoCountries.registerLocale(enLocal);
 

package/dist/spa/src/renderers/HumanNumber.vue

@@ -1,17 +1,18 @@
 <template>
-    <AfTooltip class="flex items-center" >
+    <Tooltip>
       {{ formattedValue }} 
       <template #tooltip v-if="formattedValue">
         {{ formattedTooltipValue }}
       </template>
-    </AfTooltip>
+    </Tooltip>
   </template>
   
   <script setup>
   import { computed, ref, onMounted, nextTick } from 'vue';
-  import AfTooltip from '@/components/AfTooltip.vue';
+  import Tooltip from '@/afcl/Tooltip.vue';
   
-  const props = defineProps(['column', 'record']);
+  const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+
   const id = ref();
   const userLocale = ref(navigator.language || 'en-US'); 
 

package/dist/spa/src/renderers/RelativeTime.vue

@@ -1,24 +1,25 @@
 <template>
-  <AfTooltip class="flex items-center">
+  <Tooltip>
     {{ relativeTime }}
     <template #tooltip v-if="relativeTime">
         {{ fullTime }}
     </template>
-  </AfTooltip>
+  </Tooltip>
 </template>
 
 <script setup>
 import { computed, ref, onMounted } from 'vue';
-import AfTooltip from '@/components/AfTooltip.vue';
+import Tooltip from '@/afcl/Tooltip.vue';
 import en from 'javascript-time-ago/locale/en';
 import TimeAgo from 'javascript-time-ago';
 import dayjs from 'dayjs';
 
+
 const id = ref();
 
 TimeAgo.addLocale(en);
 
-const props = defineProps(['column', 'record']);
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
 
 const userLocale = ref(navigator.language || 'en-US');
 const timeAgoFormatter = new TimeAgo(userLocale.value);

package/dist/spa/src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import ResourceParent from '@/views/ResourceParent.vue';
+import PageNotFound from '@/views/PageNotFound.vue';
 
 /* IMPORTANT:ADMINFORTH ROUTES IMPORTS */
 
@@ -53,6 +54,7 @@ const router = createRouter({
       ]
     },
     /* IMPORTANT:ADMINFORTH ROUTES */
+    { path: "/:pathMatch(.*)*", component: PageNotFound },
   ]
 })
 

package/dist/spa/src/stores/core.ts

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 import { callAdminForthApi } from '@/utils';
 import type { AdminForthResourceCommon, AdminForthResourceColumnCommon } from '@/types/Common';
 import type { Ref } from 'vue'
+import type { AdminForthConfigMenuItem } from '@/types/Back';
 
 export const useCoreStore = defineStore('core', () => {
   const resourceById: Ref<Object> = ref({});
@@ -12,6 +13,7 @@ export const useCoreStore = defineStore('core', () => {
   const config = ref({});
   const record: Ref<any | null> = ref({});
   const resource: Ref<AdminForthResourceCommon | null> = ref(null);
+  const userData = ref(null);
 
   const resourceColumnsWithFilters = computed(() => {
     if (!resource.value) {
@@ -52,11 +54,42 @@ export const useCoreStore = defineStore('core', () => {
       return acc;
     }, {});
     config.value = resp.config;
-    adminUser.value = resp.user;
+    adminUser.value = resp.adminUser;
+    userData.value = resp.user;
     console.log('🌍 AdminForth v', resp.version);
   }
 
-  async function fetchRecord({ resourceId, primaryKey }) {
+  function findItemWithId(items: AdminForthConfigMenuItem[], _itemId: string): AdminForthConfigMenuItem | undefined {
+    for (const item of items) {
+      if (item._itemId === _itemId) {
+        return item;
+      }
+      if (item.children) {
+        const found = findItemWithId(item.children, _itemId);
+        if (found) {
+          return found;
+        }
+      }
+    }
+  }
+  async function fetchMenuBadges() {
+    const resp: Record<string, string> = await callAdminForthApi({
+      path: '/get_menu_badges',
+      method: 'GET',
+    });
+    if (!resp) {
+      return;
+    }
+    Object.entries(resp).forEach(([_itemId, badge]: [string, string]) => {
+      const item: AdminForthConfigMenuItem | undefined = findItemWithId(menu.value, _itemId);
+      if (item) {
+        item.badge = badge;
+      }
+    });
+  }
+
+
+  async function fetchRecord({ resourceId, primaryKey, source }: { resourceId: string, primaryKey: string, source: string }) {
     record.value = null;
     
     if (!resource.value) {
@@ -71,7 +104,7 @@ export const useCoreStore = defineStore('core', () => {
       path: '/get_resource_data',
       method: 'POST',
       body: {
-        source: 'show',
+        source: source,
         resourceId: resourceId,
         filters: [
           {
@@ -130,16 +163,15 @@ export const useCoreStore = defineStore('core', () => {
     config.value = {...config.value, ...res};
   }
 
- 
 
   const username = computed(() => {
     const usernameField = config.value.usernameField;
-    return adminUser.value && adminUser.value[usernameField];
+    return userData.value && userData.value[usernameField];
   });
 
   const userFullname = computed(() => {
     const userFullnameField = config.value.userFullnameField;
-    return adminUser.value && adminUser.value[userFullnameField];
+    return userData.value && userData.value[userFullnameField];
   })
 
 
@@ -161,5 +193,6 @@ export const useCoreStore = defineStore('core', () => {
     resourceColumnsWithFilters,
     toggleTheme,
     theme,
+    fetchMenuBadges,
   }
 })