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

package/dist/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">
@@ -41,15 +55,26 @@
                               <IconEyeSlashSolid class="w-5 h-5" v-else />
                             </button>
                         </div>
-                        <!-- <div class="flex justify-between">
-                           <div class="flex items-start"> -->
-                                <!-- <div class="flex items-center h-5">
-                                    <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-600 dark:border-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required />
-                                </div>
-                                <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label> -->
-                            <!-- </div> -->
-                            <!-- <a href="#" class="text-sm text-blue-700 hover:underline dark:text-blue-500">Lost Password?</a> -->
-                        <!-- </div> -->
+
+                        <div v-if="coreStore.config.rememberMeDays" 
+                            class="flex items-start mb-5"
+                            :title="`Stay logged in for ${coreStore.config.rememberMeDays} days`"
+                        >
+                          <div class="flex items-center h-5">
+                            <input id="remember" 
+                              ref="rememberInput"
+                              type="checkbox" 
+                              value="" 
+                              class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" />
+                          </div>
+                          <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
+                        </div>
+                        
+                        <component 
+                          v-for="c in coreStore?.config?.loginPageInjections?.underInputs || []"
+                          :is="getCustomComponent(c)"
+                          :meta="c.meta"
+                        />
 
                         <div v-if="error" class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
                           <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
@@ -61,6 +86,7 @@
                           </div>
                         </div>
                         
+                        
 
                         <div v-if="coreStore.config?.loginPromptHTML"
                           class="flex items-center p-4 mb-4 text-sm text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-400" role="alert"
@@ -96,7 +122,8 @@
 
 <script setup>
 
-import { onMounted, ref, watchEffect } from 'vue';
+import { getCustomComponent } from '@/utils';
+import { onMounted, ref, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
@@ -105,6 +132,7 @@ import { useRouter } from 'vue-router';
 
 const passwordInput = ref(null);
 const usernameInput = ref(null);
+const rememberInput = ref(null);
 
 const router = useRouter();
 const inProgress = ref(false);
@@ -112,11 +140,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) {
@@ -143,6 +174,7 @@ async function login() {
     body: {
       username,
       password,
+      rememberMe: rememberInput.value?.checked,
     }
   });
   inProgress.value = false;

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

@@ -1,6 +1,7 @@
 <template>
   <div class="relative">
     <component 
+      v-if="!loading"
       v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.beforeBreadcrumbs || []"
       :is="getCustomComponent(c)"
       :meta="c.meta"
@@ -9,8 +10,16 @@
       :adminUser="coreStore.adminUser"
     />
     <BreadcrumbsWithButtons>
+      <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
+        :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
+        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-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 rounded-default"
+      >
+        <IconPlusOutline class="w-4 h-4 me-2"/>
+        Add new
+      </RouterLink>
+
       <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-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"
       >
         <IconPenSolid class="w-4 h-4" />
         Edit
@@ -22,6 +31,10 @@
         <IconTrashBinSolid class="w-4 h-4" />
         Delete
       </button>
+
+      <ThreeDotsMenu 
+        :threeDotsDropdownItems="coreStore.resourceOptions?.pageInjections?.show?.threeDotsDropdownItems"
+      ></ThreeDotsMenu>
     </BreadcrumbsWithButtons>
 
     <component 
@@ -58,8 +71,9 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="column in coreStore.resource?.columns.filter(c => c.showIn.includes('show'))" :key="column.name"
-                class="bg-lightForm bg-darkForm odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
+            <tr v-for="column,i in coreStore.resource?.columns.filter(c => c.showIn.includes('show'))" :key="column.name"
+              class="bg-lightForm bg-darkForm odd:dark:bg-gray-900 even:dark:bg-gray-800 dark:border-gray-700"
+              :class="{ 'border-b': i !== coreStore.resource.columns.filter(c => c.showIn.includes('show')).length - 1 }"
             >
               <component
                 v-if="column.components?.showRow"
@@ -73,7 +87,7 @@
                 <td class="px-6 py-4 whitespace-nowrap "> <!--align-top-->
                   {{ column.label }}
                 </td>
-                <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
+                <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap" :data-af-column="column.name">
                   <component
                     v-if="column?.components?.show"
                     :is="getCustomComponent(column?.components?.show)"
@@ -98,6 +112,7 @@
     </div>
 
     <component 
+      v-if="!loading"
       v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.bottom || []"
       :is="getCustomComponent(c)"
       :meta="c.meta"
@@ -118,31 +133,27 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
-import { useModalStore } from '@/stores/modal';
-import { getCustomComponent, checkAcessByAllowedActions } from '@/utils';
-import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
+import { getCustomComponent, checkAcessByAllowedActions, initThreeDotsDropdown } from '@/utils';
+import { IconPenSolid, IconTrashBinSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
 import { useRoute,useRouter } from 'vue-router';
 import {callAdminForthApi} from '@/utils';
 import { showSuccesTost, showErrorTost } from '@/composables/useFrontendApi';
+import ThreeDotsMenu from '@/components/ThreeDotsMenu.vue';
 
 
-const item = ref(null);
 const route = useRoute();
 const router = useRouter();
 const loading = ref(true);
 
-console.log(route.params,'showWiev');
-
-
 const coreStore = useCoreStore();
-const modalStore = useModalStore();
 
 onMounted(async () => {
   loading.value = true;
   await coreStore.fetchResourceFull({
     resourceId: route.params.resourceId
   });
+  initThreeDotsDropdown();
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
@@ -175,9 +186,8 @@ async function deleteRecord(row) {
 
     } catch (e) {
       console.error(e);
-      };
-    }
-
+    };
+  }
     
 }