adminforth 1.2.99 → 1.2.100

package/spa/src/components/ResourceListTable.vue

@@ -3,11 +3,13 @@
   <div class="relative overflow-x-auto shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-y-hidden"
     :class="{'rounded-default': !noRoundings}"
   >
-
     <!-- skelet loader -->
     <div role="status" v-if="!resource || !resource.columns"
         class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
-      
+
+        <div role="status" class="max-w-sm animate-pulse">
+            <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
+        </div>      
     </div>
 
     <table v-else class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
@@ -23,9 +25,9 @@
 
         <th v-for="c in columnsListed" scope="col" class="px-6 py-3">
          
-          <div @click="() => c.sortable && onSortButtonClick(c.name)" class="flex items-center " :class="{'cursor-pointer':c.sortable}">
+          <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
+              class="flex items-center " :class="{'cursor-pointer':c.sortable}">
             {{ c.label }}
-            
 
             <div v-if="c.sortable"
                 :style="{ 'color':ascArr.includes(c.name)?'green':descArr.includes(c.name)?'red':'currentColor'}">
@@ -56,109 +58,113 @@
       </tr>
       </thead>
       <tbody>
-        <SkeleteLoader v-if="!rows" :columns="3" :rows="resource?.columns.length + 2"/>  
-      <tr v-else-if="rows.length === 0" class="bg-lightListTable dark:bg-darkListTable dark:border-darkListTableBorder">
-        <td :colspan="resource?.columns.length + 2">
-
-          <div id="toast-simple"
-              class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 divide-x rtl:divide-x-reverse divide-gray-200  dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
-              role="alert">
-            <IconInboxOutline class="w-6 h-6 text-gray-500 dark:text-gray-400"/>
-            <div class="ps-4 text-sm font-normal">No items here yet</div>
-          </div>
-
-        </td>
-      </tr>
+        <SkeleteLoader 
+          v-if="!rows" 
+          :columns="resource?.columns.filter(c => c.showIn.includes('list')).length + 2"
+          :rows="3"
+        />
+        <tr v-else-if="rows.length === 0" class="bg-lightListTable dark:bg-darkListTable dark:border-darkListTableBorder">
+          <td :colspan="resource?.columns.length + 2">
+
+            <div id="toast-simple"
+                class=" mx-auto my-5 flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 divide-x rtl:divide-x-reverse divide-gray-200  dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800"
+                role="alert">
+              <IconInboxOutline class="w-6 h-6 text-gray-500 dark:text-gray-400"/>
+              <div class="ps-4 text-sm font-normal">No items here yet</div>
+            </div>
 
-      <tr @click="onClick($event,row)"   v-else v-for="(row, rowI) in rows" :key="row.id"
-          class="bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover cursor-pointer"
-        :class="{'border-b': rowI !== rows.length - 1}"
-      >
-        <td class="w-4 p-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
-          <div class="flex items center ">
-            <input
-              @click="(e)=>{e.stopPropagation()}"
-              id="checkbox-table-search-1"
-              type="checkbox"
-              :checked="checkboxesInternal.includes(row.id)"
-              @change="(e)=>{addToCheckedValues(row.id)}"
-              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer">
-            <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
-          </div>
-        </td>
-        <td v-for="c in columnsListed" class="px-6 py-4">
-          <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
-          <component
-            :is="c?.components?.list ? getCustomComponent(c.components.list) : ValueRenderer"
-            :meta="c?.components?.list?.meta"
-            :column="c"
-            :record="row"
-            :adminUser="coreStore.adminUser"
-            :resource="resource"
-          />
-        </td>
-        <td class=" items-center px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
-          <div class="flex">
-          <RouterLink
-            v-if="resource.options?.allowedActions.show"
-            :to="{ 
-              name: 'resource-show', 
-              params: { 
-                resourceId: resource.resourceId, 
-                primaryKey: row._primaryKeyValue,
-              }
-            }"
-            class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline"
-            :data-tooltip-target="`tooltip-show-${rowI}`"
-          >
-            <IconEyeSolid class="w-5 h-5 me-2"/>
-          </RouterLink>
-
-          <div :id="`tooltip-show-${rowI}`"
-              role="tooltip"
-              class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-            Show item
-            <div class="tooltip-arrow" data-popper-arrow></div>
-          </div>
+          </td>
+        </tr>
+
+        <tr @click="onClick($event,row)"   v-else v-for="(row, rowI) in rows" :key="`row_${row._primaryKeyValue}`"
+            class="bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover cursor-pointer"
+          :class="{'border-b': rowI !== rows.length - 1}"
+        >
+          <td class="w-4 p-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
+            <div class="flex items center ">
+              <input
+                @click="(e)=>{e.stopPropagation()}"
+                id="checkbox-table-search-1"
+                type="checkbox"
+                :checked="checkboxesInternal.includes(row._primaryKeyValue)"
+                @change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
+                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer">
+              <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
+            </div>
+          </td>
+          <td v-for="c in columnsListed" class="px-6 py-4">
+            <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
+            <component
+              :is="c?.components?.list ? getCustomComponent(c.components.list) : ValueRenderer"
+              :meta="c?.components?.list?.meta"
+              :column="c"
+              :record="row"
+              :adminUser="coreStore.adminUser"
+              :resource="resource"
+            />
+          </td>
+          <td class=" items-center px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
+            <div class="flex">
+            <RouterLink
+              v-if="resource.options?.allowedActions.show"
+              :to="{ 
+                name: 'resource-show', 
+                params: { 
+                  resourceId: resource.resourceId, 
+                  primaryKey: row._primaryKeyValue,
+                }
+              }"
+              class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline"
+              :data-tooltip-target="`tooltip-show-${rowI}`"
+            >
+              <IconEyeSolid class="w-5 h-5 me-2"/>
+            </RouterLink>
+
+            <div :id="`tooltip-show-${rowI}`"
+                role="tooltip"
+                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+              Show item
+              <div class="tooltip-arrow" data-popper-arrow></div>
+            </div>
 
-          <RouterLink v-if="resource.options?.allowedActions.edit"
-            :to="{
-              name: 'resource-edit',
-              params: { 
-                resourceId: resource.resourceId,
-                primaryKey: row._primaryKeyValue 
-              } 
-            }"
-            class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
-            :data-tooltip-target="`tooltip-edit-${rowI}`"
-          >
-            <IconPenSolid class="w-5 h-5 me-2"/>
-          </RouterLink>
-
-          <div :id="`tooltip-edit-${rowI}`"
-              role="tooltip"
-              class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-            Edit
-            <div class="tooltip-arrow" data-popper-arrow></div>
-          </div>
+            <RouterLink v-if="resource.options?.allowedActions.edit"
+              :to="{
+                name: 'resource-edit',
+                params: { 
+                  resourceId: resource.resourceId,
+                  primaryKey: row._primaryKeyValue 
+                } 
+              }"
+              class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
+              :data-tooltip-target="`tooltip-edit-${rowI}`"
+            >
+              <IconPenSolid class="w-5 h-5 me-2"/>
+            </RouterLink>
+
+            <div :id="`tooltip-edit-${rowI}`"
+                role="tooltip"
+                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+              Edit
+              <div class="tooltip-arrow" data-popper-arrow></div>
+            </div>
 
-          <button v-if="resource.options?.allowedActions.delete"
-                  class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
-                  :data-tooltip-target="`tooltip-delete-${rowI}`"
-                  @click="deleteRecord(row)"
-          >
-            <IconTrashBinSolid class="w-5 h-5 me-2"/>
-          </button>
-
-          <div :id="`tooltip-delete-${rowI}`"
-              role="tooltip"
-              class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-            Delete
-            <div class="tooltip-arrow" data-popper-arrow></div>
+            <button v-if="resource.options?.allowedActions.delete"
+                    class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
+                    :data-tooltip-target="`tooltip-delete-${rowI}`"
+                    @click="deleteRecord(row)"
+            >
+              <IconTrashBinSolid class="w-5 h-5 me-2"/>
+            </button>
+
+            <div :id="`tooltip-delete-${rowI}`"
+                role="tooltip"
+                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+              Delete
+              <div class="tooltip-arrow" data-popper-arrow></div>
+            </div>
           </div>
-        </div>
-        </td>
-      </tr>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
@@ -237,13 +243,10 @@ import SkeleteLoader from '@/components/SkeleteLoader.vue';
 
 import {
 IconInboxOutline,
-IconPlusOutline
 } from '@iconify-prerendered/vue-flowbite';
 
 import {
-IconBanOutline,
 IconEyeSolid,
-IconFilterOutline,
 IconPenSolid,
 IconTrashBinSolid
 } from '@iconify-prerendered/vue-flowbite';
@@ -299,6 +302,7 @@ watch(() => props.sort, (newSort) => {
 });
 
 function addToCheckedValues(id) {
+  console.log('checking', checkboxesInternal.value, 'id', id)
   if (checkboxesInternal.value.includes(id)) {
     checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
   } else {
@@ -312,13 +316,13 @@ const columnsListed = computed(() => props.resource?.columns?.filter(c => c.show
 async function selectAll(value) {
   if (!allFromThisPageChecked.value) {
     props.rows.forEach((r) => {
-      if (!checkboxesInternal.value.includes(r.id)) {
-        checkboxesInternal.value.push(r.id)
+      if (!checkboxesInternal.value.includes(r._primaryKeyValue)) {
+        checkboxesInternal.value.push(r._primaryKeyValue)
       } 
     });
   } else {
     props.rows.forEach((r) => {
-      checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== r.id);
+      checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== r._primaryKeyValue);
     });
   }
   checkboxesInternal.value = [ ...checkboxesInternal.value ];
@@ -328,16 +332,24 @@ const totalPages = computed(() => Math.ceil(props.totalRows / props.pageSize));
 
 const allFromThisPageChecked = computed(() => {
   if (!props.rows) return false;
-  return props.rows.every((r) => checkboxesInternal.value.includes(r.id));
+  return props.rows.every((r) => checkboxesInternal.value.includes(r._primaryKeyValue));
 });
 const ascArr = computed(() => sort.value.filter((s) => s.direction === 'asc').map((s) => s.field));
 const descArr = computed(() => sort.value.filter((s) => s.direction === 'desc').map((s) => s.field));
 
 
-function onSortButtonClick(field) {
+function onSortButtonClick(event, field) {
+  // if ctrl key is pressed, add to sort otherwise sort by this field
+  // in any case if field is already in sort, toggle direction
+  
   const sortIndex = sort.value.findIndex((s) => s.field === field);
   if (sortIndex === -1) {
-    sort.value = [...sort.value,{field, direction: 'asc'}];
+    // field is not in sort, add it
+    if (event.ctrlKey) {
+      sort.value = [...sort.value,{field, direction: 'asc'}];
+    } else {
+      sort.value = [{field, direction: 'asc'}];
+    }
   } else {
     const sortField = sort.value[sortIndex];
     if (sortField.direction === 'asc') {

package/spa/src/components/SkeleteLoader.vue

@@ -1,6 +1,6 @@
 <template>
-    <tr v-for="c in new Array(props.columns)" class="bg-lightListTable border-b dark:bg-darkListTable dark:border-darkListBorder">
-         <td v-for="r in new Array(props.rows)" class="items-center px-6 py-8 cursor-default" >
+    <tr v-for="c in new Array(props.rows)" class="bg-lightListTable border-b dark:bg-darkListTable dark:border-darkListBorder">
+        <td v-for="r in new Array(props.columns)" class="items-center px-6 py-8 cursor-default" >
             <div role="status" class="max-w-sm animate-pulse">
                 <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
             </div>
@@ -11,8 +11,8 @@
 <script setup>
 
 const props = defineProps({
-    columns:Number,
-    rows:Number
+    columns: Number,
+    rows: Number
 });
 
 

package/spa/src/components/ValueRenderer.vue

@@ -15,7 +15,7 @@
       <span v-else class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">No</span>
     </span>
     <span v-else-if="column.enum">
-      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label,route.meta.type) }}
+      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label || record[column.name], route.meta.type) }}
     </span>
     <span v-else-if="column.type === 'datetime'" class="whitespace-nowrap">
       {{ checkEmptyValues(formatDate(record[column.name]),route.meta.type) }}

package/spa/src/router/index.ts

@@ -56,12 +56,4 @@ const router = createRouter({
   ]
 })
 
-router.beforeEach((to, from, next) => {
-  const filterStore = useFiltersStore();
-  if (to.path.startsWith('/resource/')) {
-    filterStore.clearFilters();
-  }
-  next()
-})
-
 export default router

package/spa/src/spa_types/core.ts

@@ -32,6 +32,7 @@ export type CoreConfig = {
         usernameField: string,
         passwordHashField: string,
         loginBackgroundImage: string,
+        loginBackgroundPosition: string,
         userFullnameField: string,
     },
     emptyFieldPlaceholder?: {

package/spa/src/stores/filters.ts

@@ -3,11 +3,12 @@ import { defineStore } from 'pinia';
 
 export const useFiltersStore = defineStore('filters', () => {
     const filters: Ref<any[]> = ref([]);
+    
     const setFilter = (filter: any) => {
-        filters.value = [...filters.value, filter];
+        filters.value.push(filter);
     }
     const setFilters = (f: any) => {
-        filters.value = [...f];
+        filters.value = f;
     }
     const getFilters = () => {
         return filters.value;

package/spa/src/views/ListView.vue

@@ -117,8 +117,6 @@ import { initFlowbite } from 'flowbite';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi'
-
-import ValueRenderer from '@/components/ValueRenderer.vue';
 import { getCustomComponent } from '@/utils';
 
 
@@ -151,20 +149,7 @@ const DEFAULT_PAGE_SIZE = 10;
 const pageSize = computed(() => coreStore.resource?.options?.listPageSize || DEFAULT_PAGE_SIZE);
 
 
-watch([page], async () => {
-  await getList();
-});
-
-watch(()=>filtersStore.filters, async () => {
-  page.value = 1;
-  checkboxes.value = [];
-
-  await getList();
-}, {deep: true});
 
-watch([sort], async () => {
-  await getList();
-}, {deep: true});
 
 
 async function getList() {
@@ -222,6 +207,8 @@ async function init() {
     resourceId: route.params.resourceId
   });
 
+  // !!! clear filters should be in same tick with sort assignment so that watch can catch it
+  filtersStore.clearFilters();
   if (coreStore.resource.options?.defaultSort) {
     sort.value = [{
         field: coreStore.resource.options.defaultSort.columnName,
@@ -230,8 +217,8 @@ async function init() {
   } else {
     sort.value = [];
   }
-
-  await getList();
+  console.log('↘️init fired');
+  // await getList();
   columnsMinMax.value = await callAdminForthApi({
     path: '/get_min_max_for_columns',
     method: 'POST',
@@ -241,18 +228,22 @@ async function init() {
   });
 }
 
+watch([page, sort, () => filtersStore.filters], async () => {
+  console.log('↘️watch fired getList');
+  await getList();
+}, { deep: true });
+
+watch(() => filtersStore.filters, async (to, from) => {
+  page.value = 1;
+  checkboxes.value = [];
+}, {deep: true});
+
 onMounted(async () => {
+  console.log('🧱onMounted fired');
   initFlowbite(); 
- 
   await init();
-
 });
 
-// on route param change 
-watch(() => route.params.resourceId, async () => {
-  filtersStore.setFilters([]);
-  checkboxes.value = [];
-  await init();
-});
+
 
 </script>

package/spa/src/views/LoginView.vue

@@ -1,24 +1,38 @@
 <template>
-  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800"
-    :style="coreStore.config?.loginBackgroundImage ? {
+  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 relative w-screen h-screen"
+    :style="coreStore.config?.loginBackgroundImage && backgroundPosition === 'over' ? {
       'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
       'background-size': 'cover',
       'background-position': 'center',
       'background-blend-mode': 'darken'
     }: {}"
-    >
+  >
+    
+    <img v-if="coreStore.config?.loginBackgroundImage && backgroundPosition !== 'over'"
+      :src="loadFile(coreStore.config?.loginBackgroundImage)"
+      class="position-absolute top-0 left-0 h-screen object-cover w-0"
+      :class="{
+        '1/2': 'md:w-1/2',
+        '1/3': 'md:w-1/3',
+        '2/3': 'md:w-2/3',
+        '3/4': 'md:w-3/4',
+        '2/5': 'md:w-2/5',
+        '3/5': 'md:w-3/5',
+      }[backgroundPosition]"
+    />
 
     <!-- Main modal -->
-    <div id="authentication-modal" tabindex="-1" class=" overflow-y-auto overflow-x-hidden z-50 min-w-[400px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
-        <div class="relative p-4 w-full max-w-md max-h-full">
+    <div id="authentication-modal" tabindex="-1" 
+      class="overflow-y-auto flex flex-grow
+      overflow-x-hidden z-50 min-w-[350px]  justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
+        <div class="relative p-4 w-full max-h-full max-w-[400px]">
             <!-- Modal content -->
             <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
                 <!-- Modal header -->
                 <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                     <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-                        Sign in to {{ coreStore.config?.brandName }}
+                      Sign in to {{ coreStore.config?.brandName }}
                     </h3>
-                   
                 </div>
                 <!-- Modal body -->
                 <div class="p-4 md:p-5">
@@ -87,7 +101,7 @@
 
 <script setup>
 
-import { onMounted, ref, watchEffect } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
@@ -103,11 +117,14 @@ const inProgress = ref(false);
 const coreStore = useCoreStore();
 const user = useUserStore();
 
-
 const showPw = ref(false);
 
 const error = ref(null);
 
+const backgroundPosition = computed(() => {
+  return coreStore.config?.loginBackgroundPosition || '1/2';
+});
+
 onMounted(async () => {
     await coreStore.getPublicConfig();
     if (coreStore.config?.demoCredentials) {