adminforth 1.1.65 → 1.1.67

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

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div class="rounded-default">
     
     <div 
-      class="relative shadow-resourse-form-shadow sm:rounded-lg dark:shadow-2xl dark:shadow-black"
+      class="relative shadow-resourse-form-shadow sm:rounded-lg dark:shadow-2xl dark:shadow-black rounded-default"
     >
       <form autocomplete="off" @submit.prevent>
-        <table class="w-full text-sm text-left rtl:text-right text-gray-500 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-form-view-heading dark:bg-gray-700 dark:text-gray-400">
               <tr>
                   <th scope="col" class="px-6 py-3">
@@ -30,28 +30,28 @@
                     />
                 </template>
                 <template v-else>
-                    <td class="px-6 py-4 whitespace-nowrap">
-                    {{ column.label }}
-                    <span :data-tooltip-target="`tooltip-show-${i}`" class="relative inline-block">
-                        <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'"
-                        />
-                    </span>
-                    <div :id="`tooltip-show-${i}`"
-                        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">
-                        Required field
-                        <div class="tooltip-arrow" data-popper-arrow></div>
-                    </div>
+                    <td class="px-6 py-4 whitespace-nowrap "> <!--align-top-->
+                      {{ column.label }}
+                      <span :data-tooltip-target="`tooltip-show-${i}`" class="relative inline-block">
+                          <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'"
+                          />
+                      </span>
+                      <div :id="`tooltip-show-${i}`"
+                          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">
+                          Required field
+                          <div class="tooltip-arrow" data-popper-arrow></div>
+                      </div>
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative">
-
                     <Dropdown
                         single
                         v-if="column.foreignResource"
                         :options="columnOptions[column.name] || []"
+                        :placeholder = "columnOptions[column.name]?.length || 'There are no options available'"
                         :modelValue="currentValues[column.name]"
                         @update:modelValue="setCurrentValue(column.name, $event)"
-                    />
+                    ></Dropdown>
                     <Dropdown
                         single
                         v-else-if="column.enum"
@@ -79,6 +79,7 @@
                         v-else-if="['datetime'].includes(column.type)"
                         :column="column"
                         :valueStart="currentValues[column.name]"
+                        auto-hide
                         @update:valueStart="setCurrentValue(column.name, $event)"
                     />
                     <input
@@ -120,9 +121,6 @@
                         <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked[column.name]" />
                         <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
                     </button>
-
-
-
                     <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
 
                     <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
@@ -154,7 +152,7 @@ const router = useRouter();
 
 const props = defineProps({
   loading: Boolean,
-  resourceColumns: Object,
+  resource: Object,
   record: Object,
   validating: Boolean,
   customComponentsPerColumn: Object,
@@ -196,7 +194,11 @@ const columnError = (column) => {
       for (let i = 0; i < validationArray.length; i++) {
         if (validationArray[i].regExp) {
           const regExp = new RegExp(validationArray[i].regExp);
-          if (!regExp.test(currentValues.value[column.name])) {
+          let value = currentValues.value[column.name];
+          if (value === undefined || value === null) {
+            value = '';
+          }
+          if (!regExp.test(value)) {
             return validationArray[i].message;
           }
         }
@@ -226,7 +228,7 @@ onMounted(() => {
 
 const columnOptions = computedAsync(async () => { 
   return (await Promise.all(
-    Object.values(props.resourceColumns).map(async (column) => {
+    Object.values(props.resource.columns).map(async (column) => {
       if (column.foreignResource) {
         const list = await callAdminForthApi({
           method: 'POST',
@@ -249,7 +251,7 @@ const coreStore = useCoreStore();
 
 const editableColumns = computed(() => {
   const mode = props.record ? 'edit' : 'create';
-  return props.resourceColumns?.filter(column => column.showIn.includes(mode));
+  return props.resource?.columns?.filter(column => column.showIn.includes(mode));
 });
 
 const isValid = computed(() => {

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

@@ -0,0 +1,419 @@
+<template>
+  <!-- table -->
+  <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	overflow-y-hidden rounded-default">
+
+    <!-- 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 class="flex items-center justify-between h-16">
+        <div>
+          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+          <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+        </div>
+        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+      </div>
+
+      <div class="flex items-center justify-between  h-16 pt-4" v-for="i in new Array(10)">
+        <div>
+          <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+          <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+        </div>
+        <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+      </div>
+      <span class="sr-only">Loading...</span>
+    </div>
+
+    <table v-else class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
+      <thead class="text-xs text-view-table-heading-text bg-list-view-table-heading dark:bg-gray-700 dark:text-gray-400">
+      <tr>
+        <th scope="col" class="p-4">
+          <div v-if="rows && rows.length" class="flex items-center">
+            <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
+                  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">
+            <label for="checkbox-all-search" class="sr-only">checkbox</label>
+          </div>
+        </th>
+
+        <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}">
+            {{ c.label }}
+
+            <div v-if="c.sortable"
+                :style="{ 'color':ascArr.includes(c.name)?'green':descArr.includes(c.name)?'red':'currentColor'}">
+              <svg v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3 h-3 ms-1.5"
+                  :class="{'rotate-180':descArr.includes(c.name)}" viewBox="0 0 24 24">
+                <path
+                  d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847"/>
+              </svg>
+              <svg v-else class="w-3 h-3 ms-1.5 opacity-30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                  fill='currentColor'
+                  viewBox="0 0 24 24">
+                <path
+                  d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
+              </svg>
+            </div>
+          </div>
+        </th>
+
+        <th scope="col" class="px-6 py-3">
+          Actions
+        </th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-if="!rows" class="bg-list-view-table-bg border-b dark:bg-gray-800 dark:border-gray-700">
+        <td :colspan="resource?.columns.length + 2">
+
+          <div role="status"
+              class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
+            <div class="flex items-center justify-between">
+              <div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+              </div>
+              <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+            </div>
+            <div class="flex items-center justify-between pt-4">
+              <div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+              </div>
+              <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+            </div>
+            <div class="flex items-center justify-between pt-4">
+              <div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+              </div>
+              <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+            </div>
+            <div class="flex items-center justify-between pt-4">
+              <div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+              </div>
+              <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+            </div>
+            <div class="flex items-center justify-between pt-4">
+              <div>
+                <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
+                <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+              </div>
+              <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
+            </div>
+            <span class="sr-only">Loading...</span>
+          </div>
+        </td>
+      </tr>
+      <tr v-else-if="rows.length === 0" class="bg-list-view-table-bg border-b dark:bg-gray-800 dark:border-gray-700">
+        <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 v-else v-for="(row, rowI) in rows" :key="row.id"
+          class="bg-list-view-table-bg border-b dark:bg-gray-800 border-list-view-border-color dark:border-gray-700 hover:bg-list-view-table-row-hover dark:hover:bg-gray-600">
+        <td class="w-4 p-4">
+          <div class="flex items center">
+            <input
+              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">
+            <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">
+          <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>
+
+          <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>
+      </tbody>
+    </table>
+  </div>
+  <!-- pagination -->
+  <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"
+  >
+    <!-- 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 }}
+          </span> to <span class="font-semibold text-gray-900 dark:text-white">
+            {{ Math.min(page * pageSize, totalRows) }}
+          </span> of <span class="font-semibold text-gray-900 dark:text-white">{{
+        totalRows
+      }}</span> Entries
+      </span>
+    <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"
+          @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">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M13 5H1m0 0 4 4M1 5l4-4"/>
+          </svg>
+          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"
+          @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"/>
+
+        <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"
+          @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"
+
+          @click="page++" :disabled="page >= totalPages">
+          Next
+          <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+              viewBox="0 0 14 10">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M1 5h12m0 0L9 1m4 4L9 9"/>
+          </svg>
+        </button>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+
+
+import { initFlowbite } from 'flowbite';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { callAdminForthApi, getIcon } from '@/utils';
+
+import ValueRenderer from '@/components/ValueRenderer.vue';
+import { getCustomComponent } from '@/utils';
+import { useCoreStore } from '@/stores/core';
+import { showSuccesTost } from '@/composables/useFrontendApi';
+
+import {
+IconInboxOutline,
+IconPlusOutline
+} from '@iconify-prerendered/vue-flowbite';
+
+import {
+IconBanOutline,
+IconEyeSolid,
+IconFilterOutline,
+IconPenSolid,
+IconTrashBinSolid
+} from '@iconify-prerendered/vue-flowbite';
+
+const coreStore = useCoreStore();
+
+const props = defineProps([
+  'resource', 
+  'rows',
+  'totalRows',
+  'pageSize',
+  'checkboxes'
+])
+
+// emits, update page
+const emits = defineEmits([
+  'update:page',
+  'update:sort',
+  'update:checkboxes',
+  'update:records'
+
+]);
+
+const checkboxesInternal = ref([]);
+const page = ref(1);
+const sort = ref([]);
+
+
+watch(() => page.value, (newPage) => {
+  emits('update:page', newPage);
+});
+
+watch(() => sort.value, (newSort) => {
+  emits('update:sort', newSort);
+});
+
+watch(() => checkboxesInternal.value, (newCheckboxes) => {
+  console.log('checkboxesInternal ch changed, emiting', newCheckboxes)
+
+  emits('update:checkboxes', newCheckboxes);
+});
+
+watch(() => props.checkboxes, (newCheckboxes) => {
+  console.log('Props ch changed', newCheckboxes)
+  checkboxesInternal.value = newCheckboxes;
+});
+
+function addToCheckedValues(id) {
+  if (checkboxesInternal.value.includes(id)) {
+    checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
+  } else {
+    checkboxesInternal.value.push(id);
+  }
+  checkboxesInternal.value = [ ...checkboxesInternal.value ]
+}
+
+const columnsListed = computed(() => props.resource?.columns?.filter(c => c.showIn.includes('list')));
+
+async function selectAll(value) {
+  props.rows.forEach((r) => {
+    if (!checkboxesInternal.value.includes(r.id)) {
+      checkboxesInternal.value.push(r.id)
+    } else {
+      checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== r.id)
+    }
+  });
+  checkboxesInternal.value = [ ...checkboxesInternal.value ]
+  // checkboxes.value = rows.value.map((v) => v.id);
+}
+
+const totalPages = computed(() => Math.ceil(props.totalRows / props.pageSize));
+
+
+
+
+const allFromThisPageChecked = computed(() => {
+  if (!props.rows) return false;
+  return props.rows.every((r) => props.checkboxes.includes(r.id));
+});
+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) {
+  const sortIndex = sort.value.findIndex((s) => s.field === field);
+  if (sortIndex === -1) {
+    sort.value = [{field, direction: 'asc'}, ...sort.value];
+  } else {
+    const sortField = sort.value[sortIndex];
+    if (sortField.direction === 'asc') {
+      sort.value[sortIndex].direction = 'desc';
+    } else {
+      sort.value.splice(sortIndex, 1);
+    }
+  }
+}
+
+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: props.resource.resourceId,
+        primaryKey: row._primaryKeyValue,
+      }});
+      if (!res.error){
+        emits('update:records', true)
+        showSuccesTost('Record deleted successfully')
+      } else {
+        console.error(res.error)
+      }
+
+    } catch (e) {
+      console.error(e);
+      };
+    }
+
+    
+}
+
+
+</script>

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

@@ -0,0 +1,66 @@
+<template>
+    
+
+<div id="toast-default" class="flex  items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
+    <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">
+        <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>
+        <span class="sr-only">Fire icon</span>
+    </div>
+    <div v-else-if="toast.variant == 'danger'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
+        </svg>
+        <span class="sr-only">Error icon</span>
+    </div>
+    <div v-else-if="toast.variant == 'warning'"class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
+        </svg>
+        <span class="sr-only">Warning icon</span>
+    </div>
+    <div v-else class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+        </svg>
+        <span class="sr-only">Check icon</span>
+    </div>
+    <div class="ms-3 text-sm font-normal">{{toast.message}}</div>
+    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" >
+        <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+        </svg>
+    </button>
+</div>
+
+
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useToastStore } from '@/stores/toast';
+const toastStore = useToastStore();
+const emit = defineEmits(['close']);
+const props = defineProps<{
+    toast:{message: string;
+    variant: string;
+    id: string;
+    timeout?: number|'unlimited';}
+}>();
+function closeToast() {
+    emit('close');
+}
+
+onMounted(() => {
+    if (props.toast.timeout === 'unlimited') return;
+    else { 
+      setTimeout(() => {emit('close');}, props.toast.timeout  || 10000 );
+    }
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -1,9 +1,10 @@
 <template>
   <div>
+    
     <span v-if="column.foreignResource">
-      <RouterLink v-if="row[column.name]" class="font-medium text-blue-600 dark:text-blue-500 hover:brightness-110"
-        :to="{ name: 'resource-show', params: { resourceId: column.foreignResource.resourceId, primaryKey: row[column.name].pk } }">
-        {{ row[column.name].label }}
+      <RouterLink v-if="record[column.name]" class="font-medium text-blue-600 dark:text-blue-500 hover:brightness-110"
+        :to="{ name: 'resource-show', params: { resourceId: column.foreignResource.resourceId, primaryKey: record[column.name].pk } }">
+        {{ record[column.name].label }}
       </RouterLink>
       <div v-else>
         <span class="text-gray-400">-</span>
@@ -11,18 +12,18 @@
     </span>
         
     <span v-else-if="column.type === 'boolean'">
-      <span v-if="row[column.name]" class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">Yes</span>
+      <span v-if="record[column.name]" class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">Yes</span>
       <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">
-      {{ column.enum.find(e => e.value === row[column.name])?.label }}
+      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label,route.meta.type) }}
     </span>
     <span v-else-if="column.type === 'datetime'">
-      {{ formatDate(row[column.name]) }}
+      {{ checkEmptyValues(formatDate(record[column.name]),route.meta.type) }}
       
     </span>
     <span v-else>
-      {{ row[column.name] }}
+      {{ checkEmptyValues(record[column.name],route.meta.type) }}
     </span>
   </div>
 </template>
@@ -33,17 +34,22 @@
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
+import {checkEmptyValues} from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+
 
 import { useCoreStore } from '@/stores/core';
 
 const coreStore = useCoreStore();
+const route = useRoute();
+
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
 const props = defineProps({
   column: Object,
-  row: Object
+  record: Object
 });