adminforth 1.3.54-next.9 → 1.3.55-next.2

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

@@ -1,11 +1,15 @@
 <template>
   <!-- table -->
-  <div class="relative overflow-x-auto shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-y-hidden rounded-default">
-
+  <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">
@@ -19,11 +23,11 @@
           </div>
         </th>
 
-        <th v-for="c in columnsListed" scope="col" class="px-6 py-3">
+        <th v-for="c in columnsListed" scope="col" class="px-2 md:px-3 lg: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'}">
@@ -54,122 +58,142 @@
       </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>
-
-      <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-blue-600 dark:text-blue-500 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-blue-600 dark:text-blue-500 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>
+        <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>
 
-          <button v-if="resource.options?.allowedActions.delete"
-                  class="font-medium text-red-600 dark:text-red-500 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>
-        </td>
-      </tr>
+          </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"
+
+          :class="{'border-b': rowI !== rows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
+        >
+          <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-2 md:px-3 lg: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-2 md:px-3 lg: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>
+
+              <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>
+
+                
+              <template v-if="coreStore.resourceOptions?.pageInjections?.list?.customActionIcons">
+                <component 
+                  v-for="c in coreStore.resourceOptions?.pageInjections?.list?.customActionIcons"
+                  :is="getCustomComponent(c)" 
+                  :meta="c.meta"
+                  :resource="coreStore.resource" 
+                  :adminUser="coreStore.adminUser"
+                  :record="row"
+                />
+              </template>
+            </div>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
-  <!-- pagination -->
+  <!-- pagination
+  totalRows in v-if is used to not hide page input during loading when user puts cursor into it and edit directly (rows gets null there during edit)
+  -->
   <div class="flex flex-col items-center mt-4 mb-4 xs:flex-row xs:justify-between xs:items-center"
-    v-if="rows && totalRows >= pageSize && totalRows > 0"
+    v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
   >
     <!-- Help text -->
     <span class="text-sm text-gray-700 dark:text-gray-400">
           Showing <span class="font-semibold text-gray-900 dark:text-white">
-            {{ (page - 1) * pageSize + 1 }}
+            {{ ((page || 1) - 1) * pageSize + 1 }}
           </span> to <span class="font-semibold text-gray-900 dark:text-white">
-            {{ Math.min(page * pageSize, totalRows) }}
+            {{ Math.min((page || 1) * pageSize, totalRows) }}
           </span> of <span class="font-semibold text-gray-900 dark:text-white">{{
         totalRows
       }}</span> Entries
@@ -177,7 +201,7 @@
     <div class="inline-flex mt-2 xs:mt-0">
         <!-- Buttons -->
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s 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"
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s 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 disabled:opacity-50"
           @click="page--" :disabled="page <= 1">
           <svg class="w-3.5 h-3.5 me-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
               viewBox="0 0 14 10">
@@ -187,24 +211,28 @@
           Prev
         </button>
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  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"
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  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 disabled:opacity-50"
           @click="page = 1" :disabled="page <= 1">
           <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
           1
         </button>
-        <input type="text"
-              class="w-10 py-1.5  px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
-              v-model="page"/>
+        <div 
+          contenteditable="true" 
+          class="min-w-10 outline-none inline-block w-auto min-w-10 py-1.5 px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
+          @input="page = parseInt($event.target.innerText) || ''"
+        >
+          {{ page }}
+        </div>
 
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0  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"
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0  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 disabled:opacity-50"
           @click="page = totalPages" :disabled="page >= totalPages">
           {{ totalPages }}
 
           <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
         </button>
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e 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"
+          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e 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 disabled:opacity-50"
 
           @click="page++" :disabled="page >= totalPages">
           Next
@@ -222,10 +250,8 @@
 <script setup>
 
 
-import { initFlowbite } from 'flowbite';
 import { computed, onMounted, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { callAdminForthApi, getIcon } from '@/utils';
+import { callAdminForthApi } from '@/utils';
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { getCustomComponent } from '@/utils';
@@ -234,28 +260,27 @@ import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
 import SkeleteLoader from '@/components/SkeleteLoader.vue';
 
 import {
-IconInboxOutline,
-IconPlusOutline
+  IconInboxOutline,
 } from '@iconify-prerendered/vue-flowbite';
 
 import {
-IconBanOutline,
-IconEyeSolid,
-IconFilterOutline,
-IconPenSolid,
-IconTrashBinSolid
+  IconEyeSolid,
+  IconPenSolid,
+  IconTrashBinSolid
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 
 const coreStore = useCoreStore();
 
 const props = defineProps([
+  'page',
   'resource', 
   'rows',
   'totalRows',
   'pageSize',
   'checkboxes',
-  'sort'
+  'sort',
+  'noRoundings'
 ])
 
 // emits, update page
@@ -272,6 +297,7 @@ const page = ref(1);
 const sort = ref([]);
 
 
+
 watch(() => page.value, (newPage) => {
   emits('update:page', newPage);
 });
@@ -295,7 +321,12 @@ watch(() => props.sort, (newSort) => {
   sort.value = newSort;
 });
 
+watch(() => props.page, (newPage) => {
+  page.value = newPage;
+});
+
 function addToCheckedValues(id) {
+  console.log('checking', checkboxesInternal.value, 'id', id)
   if (checkboxesInternal.value.includes(id)) {
     checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
   } else {
@@ -309,13 +340,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 ];
@@ -325,16 +356,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') {
@@ -347,18 +386,51 @@ function onSortButtonClick(field) {
 
 
 const clickTarget = ref(null);
+
 async function onClick(e,row) {
   if(clickTarget.value === e.target) return;
   clickTarget.value = e.target;
-  await new Promise((resolve) => setTimeout(resolve, 300));
+  await new Promise((resolve) => setTimeout(resolve, 100));
   if (window.getSelection().toString()) return;
-  else {router.push({
-    name: 'resource-show',
-    params: {
-      resourceId: props.resource.resourceId,
-      primaryKey: row._primaryKeyValue,
-    },
-  })}
+  else {
+    if (row._clickUrl === null) {
+      // user asked to nothing on click
+      return;
+    }
+    if (e.ctrlKey || e.metaKey || row._clickUrl?.includes('target=_blank')) {
+      
+      if (row._clickUrl) {
+        window.open(row._clickUrl, '_blank');
+      } else {
+        window.open(
+          router.resolve({
+            name: 'resource-show',
+            params: {
+              resourceId: props.resource.resourceId,
+              primaryKey: row._primaryKeyValue,
+            },
+          }).fullPath,
+          '_blank'
+        );
+      }
+    } else {
+      if (row._clickUrl) {
+        if (row._clickUrl.startsWith('http')) {
+          document.location.href = row._clickUrl;
+        } else {
+          router.push(row._clickUrl);
+        }
+      } else {
+        router.push({
+          name: 'resource-show',
+          params: {
+            resourceId: props.resource.resourceId,
+            primaryKey: row._primaryKeyValue,
+          },
+        });
+      }
+    }
+  }
 }
 
 async function deleteRecord(row) {

package/dist/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/dist/spa/src/components/Toast.vue

@@ -1,14 +1,15 @@
 <template>
     
 
-<div id="toast-default" class="flex  items-center w-full p-4 text-gray-500 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert"
+<div class="flex items-center w-full p-4 text-gray-500 rounded-lg shadow-lg dark:text-gray-400 dark:bg-gray-800 bg-white"
+    role="alert"
     :class="
         {
             'danger': 'bg-red-100',
         }[toast.variant]
     "
 >
-    <div v-if="toast.variant == 'info'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
+    <div v-if="toast.variant == 'info'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-lightPrimary dark:text-darkPrimary bg-lightPrimaryOpacity rounded-lg dark:bg-blue-800 dark:text-blue-200">
         <svg class="w-4 h-4"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
         </svg>