adminforth 1.5.8-next.9 → 1.5.8

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

@@ -4,6 +4,7 @@
       <input
         ref="inputEl"
         type="text"
+        :readonly="isReadonly"
         v-model="search"
         @click="inputClick"
         @input="inputInput"
@@ -101,6 +102,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  isReadonly: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -141,6 +146,9 @@ function updateFromProps() {
 }
 
 function inputClick() {
+  if (props.isReadonly) {
+    return;
+  }
   if (!showDropdown.value) {
     showDropdown.value = true;
   } else {

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

@@ -6,7 +6,7 @@ const modalStore = useModalStore();
 
 <template>
   <Teleport to="body">
-    <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+    <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
         <div class="relative p-4 w-full max-w-md max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 " >
             <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black">
                 <button type="button"@click="modalStore.togleModal" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >

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

@@ -9,10 +9,10 @@
             <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
           </div>
 
-          <input ref="datepickerStartEl" type="text"
+          <input ref="datepickerStartEl"  type="text"
                  class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                :placeholder="$t('Select date')"
-          >
+                :placeholder="$t('Select date')" :disabled="isReadonly" />
+          
         </div>
       </div>
     </div>
@@ -27,7 +27,7 @@
 
             <input v-model="startTime" type="time" id="start-time" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
                    class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                   value="00:00" required/>
+                   value="00:00" :disabled="isReadonly" required/>
           </div>
         </div>
       </div>
@@ -71,7 +71,10 @@ const props = defineProps({
   },
   autoHide: {
     type: Boolean,
-  }
+  },
+  isReadonly: {
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['update:valueStart']);

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

@@ -34,7 +34,12 @@
               multiple
               class="w-full"
               v-else-if="c.type === 'boolean'"
-              :options="[{ label: 'Yes', value: true }, { label: 'No', value: false }, { label: 'Unset', value: undefined }]"
+              :options="[
+                { label: $t('Yes'), value: true }, 
+                { label: $t('No'), value: false }, 
+                // if field is not required, undefined might be there, and user might want to filter by it
+                ...(c.required ? [] : [ { label: $t('Unset'), value: undefined } ])
+              ]"
               @update:modelValue="setFilterItem({ column: c, operator: 'in', value: $event || undefined })"
               :modelValue="filtersStore.filters.find(f => f.field === c.name && f.operator === 'in')?.value || []"
             />

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

@@ -20,7 +20,7 @@
           :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, 'opacity-50 pointer-events-none': column.editReadonly && source === $t('edit')}"
+          :class="{ 'border-b': i !== group.columns.length - 1}"
         >
           <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-->
@@ -57,8 +57,9 @@
                 class="w-full"
                 v-if="column.foreignResource"
                 :options="columnOptions[column.name] || []"
-                :placeholder = "columnOptions[column.name]?.length ?'Select...': 'There are no options available'"
+                :placeholder = "columnOptions[column.name]?.length ?$t('Select...'): $t('There are no options available')"
                 :modelValue="currentValues[column.name]"
+                :isReadonly="column.editReadonly && source === 'edit'"
                 @update:modelValue="setCurrentValue(column.name, $event)"
               ></Select>
               <Select
@@ -66,6 +67,7 @@
                 v-else-if="column.enum"
                 :options="column.enum"
                 :modelValue="currentValues[column.name]"
+                :isReadonly="column.editReadonly && source === 'edit'"
                 @update:modelValue="setCurrentValue(column.name, $event)"
               ></Select>
               <Select
@@ -73,6 +75,7 @@
                 v-else-if="column.type === 'boolean'"
                 :options="getBooleanOptions(column)"
                 :modelValue="currentValues[column.name]"
+                :isReadonly="column.editReadonly && source === 'edit'"
                 @update:modelValue="setCurrentValue(column.name, $event)"
               ></Select>
               <input 
@@ -81,6 +84,7 @@
                   step="1"
                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-40 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="0"
+                  :isReadonly="column.editReadonly && source === 'edit'"
                   :value="currentValues[column.name]"
                   @input="setCurrentValue(column.name, $event.target.value)"
               >
@@ -90,6 +94,7 @@
                   :valueStart="currentValues[column.name]"
                   auto-hide
                   @update:valueStart="setCurrentValue(column.name, $event)"
+                  :isReadonly="column.editReadonly && source === 'edit'"
               />
               <input
                   v-else-if="['decimal', 'float'].includes(column.type)"
@@ -99,6 +104,7 @@
                   placeholder="0.0"
                   :value="currentValues[column.name]"
                   @input="setCurrentValue(column.name, $event.target.value)"
+                  :readonly="column.editReadonly && source === 'edit'"
               />
               <textarea
                   v-else-if="['text', 'richtext'].includes(column.type)"
@@ -106,6 +112,7 @@
                   :placeholder="$t('Text')"
                   :value="currentValues[column.name]"
                   @input="setCurrentValue(column.name, $event.target.value)"
+                  :readonly="column.editReadonly && source === 'edit'"
               >
               </textarea>
               <textarea
@@ -126,7 +133,8 @@
                   autocomplete="false"
                   data-lpignore="true"
                   readonly
-                  onfocus="this.removeAttribute('readonly');"
+                  ref="readonlyInputs"
+                  @focus="onFocusHandler($event, column, source)"
               >
 
               <button
@@ -155,6 +163,9 @@
   import { getCustomComponent } from '@/utils';
   import { Tooltip } from '@/afcl';
   import { ref, computed, watch, type Ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
 
   const props = defineProps<{
     source: 'create' | 'edit',
@@ -168,22 +179,33 @@
     columnOptions: any,
   }>();
 
+  const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
+  const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
+
   const getBooleanOptions = (column: any) => {
     const options: Array<{ label: string; value: boolean | null }> = [
-      { label: 'Yes', value: true },
-      { label: 'No', value: false },
+      { label: t('Yes'), value: true },
+      { label: t('No'), value: false },
     ];
     if (!column.required[props.mode]) {
-      options.push({ label: 'Unset', value: null });
+      options.push({ label: t('Unset'), value: null });
     }
     return options;
   };
+  function onFocusHandler(event:FocusEvent, column:any, source:string, ) {
+    const focusedInput = event.target as HTMLInputElement; 
+    if(!focusedInput) return;  
+    if (column.editReadonly && source === 'edit') return;  
+    else {
+      focusedInput.removeAttribute('readonly'); 
+    }
+  }
+
 
   const emit = defineEmits(['update:customComponentsInValidity', 'update:customComponentsEmptiness']);
 
 
-  const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
-  const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
+
 
   watch(customComponentsInValidity, (newVal) => {
     emit('update:customComponentsInValidity', newVal);

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

@@ -1,5 +1,7 @@
 <template>
   <div class="rounded-default">
+    <pre>
+  </pre>
     <form autocomplete="off" @submit.prevent>
       <div v-if="!groups || groups.length === 0">
         <GroupsTable
@@ -37,7 +39,7 @@
         <div v-if="otherColumns.length > 0">
           <GroupsTable
           :source="source"
-          :group="{groupName: 'Other', columns: otherColumns}"
+          :group="{groupName: $t('Other'), columns: otherColumns}"
           :currentValues="currentValues"
           :editableColumns="editableColumns"
           :mode="mode"
@@ -64,9 +66,11 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useCoreStore } from "@/stores/core";
 import GroupsTable from '@/components/GroupsTable.vue';
+import { useI18n } from 'vue-i18n';
 
-const coreStore = useCoreStore();
+const { t } = useI18n();
 
+const coreStore = useCoreStore();
 const router = useRouter();
 const route = useRoute();
 const props = defineProps({
@@ -78,7 +82,7 @@ const props = defineProps({
 
 const unmasked = ref({});
 
-const mode = computed(() => route.name === 'resource-create' ? $t('create') : $t('edit'));
+const mode = computed(() => route.name === 'resource-create' ? 'create' : 'edit');
 
 const emit = defineEmits(['update:record', 'update:isValid']);
 
@@ -103,18 +107,18 @@ const columnError = (column) => {
       (customComponentsEmptiness.value[column.name] !== false)
     
     ) {
-      return 'This field is required';
+      return t('This field is required');
     }
     if (column.type === 'json' && currentValues.value[column.name]) {
       try {
         JSON.parse(currentValues.value[column.name]);
       } catch (e) {
-        return 'Invalid JSON';
+        return t('Invalid JSON');
       }
     }
     if ( column.type === 'string' || column.type === 'text' ) {
       if ( column.maxLength && currentValues.value[column.name]?.length > column.maxLength ) {
-        return `This field must be shorter than ${column.maxLength} characters`;
+        return t('This field must be shorter than {maxLength} characters', { maxLength: column.maxLength });
       }
       
       if ( column.minLength && currentValues.value[column.name]?.length < column.minLength ) {
@@ -123,7 +127,7 @@ const columnError = (column) => {
         if (!needToCheckEmpty) {
           return null;
         }
-        return `This field must be longer than ${column.minLength} characters`;
+        return t('This field must be longer than {minLength} characters', { minLength: column.minLength });
       }
     }
     if ( ['integer', 'decimal', 'float'].includes(column.type) ) {
@@ -131,10 +135,10 @@ const columnError = (column) => {
         && currentValues.value[column.name] !== null 
         && currentValues.value[column.name] < column.minValue 
       ) {
-        return `This field must be greater than ${column.minValue}`;
+        return t('This field must be greater than {minValue}', { minValue: column.minValue });
       }
       if ( column.maxValue !== undefined && currentValues.value[column.name] > column.maxValue ) {
-        return `This field must be less than ${column.maxValue}`;
+        return t('This field must be less than {maxValue}', { maxValue: column.maxValue });
       }
     }
     if (currentValues.value[column.name] && column.validation) {

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

@@ -234,16 +234,33 @@
     <span class="text-sm text-gray-700 dark:text-gray-400">
         <span v-if="((page || 1) - 1) * pageSize + 1 > totalRows">{{ $t('Wrong Page') }} </span>
         <template v-else>
-          <span class="hidden sm:inline"
-            v-html="$t('Showing {from} to {to} of {total} Entries', {from: ((page || 1) - 1) * pageSize + 1, to: Math.min((page || 1) * pageSize, totalRows), total: totalRows})
-              .replace(/\d+/g, '<strong>$&</strong>')">
-          </span>
-          <span class="sm:hidden"
-            v-html="$t('{from} - {to} of {total}', {from: ((page || 1) - 1) * pageSize + 1, to: Math.min((page || 1) * pageSize, totalRows), total: totalRows})
-              .replace(/\d+/g, '<strong>$&</strong>')
-            ">
+          
+          <span class="hidden sm:inline">
+            <i18n-t keypath="Showing {from} to {to} of {total} Entries" tag="p"  >
+              <template v-slot:from>
+                <strong>{{ from }}</strong>
+              </template>
+              <template v-slot:to>
+                <strong>{{ to }}</strong>
+              </template>
+              <template v-slot:total>
+                <strong>{{ totalRows }}</strong>
+              </template>
+            </i18n-t>
           </span>
-
+          <span class="sm:hidden">
+            <i18n-t keypath="{from} - {to} of {total}" tag="p"  >
+              <template v-slot:from>
+                <strong>{{ from }}</strong>
+              </template>
+              <template v-slot:to>
+                <strong>{{ to }}</strong>
+              </template>
+              <template v-slot:total>
+                <strong>{{ totalRows }}</strong>
+              </template>
+            </i18n-t>
+          </span> 
         </template>
     </span>
   </div>
@@ -302,6 +319,8 @@ const page = ref(1);
 const sort = ref([]);
 
 
+const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
+const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.totalRows));
 
 watch(() => page.value, (newPage) => {
   emits('update:page', newPage);

package/dist/spa/src/i18n.ts

@@ -2,15 +2,53 @@ import { createI18n } from 'vue-i18n';
 import { createApp } from 'vue';
 
 
+// taken from here https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization
+function slavicPluralRule(choice, choicesLength, orgRule) {
+  if (choice === 0) {
+    return 0
+  }
+
+  const teen = choice > 10 && choice < 20
+  const endsWithOne = choice % 10 === 1
+
+  if (!teen && endsWithOne) {
+    return 1
+  }
+  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
+    return 2
+  }
+
+  return choicesLength < 4 ? 2 : 3
+}
+
 export function initI18n(app: ReturnType<typeof createApp>) {
   const i18n = createI18n({
+    legacy: false,
+
+    missingWarn: false,
+    fallbackWarn: false,
+
+    pluralRules: {
+      'uk': slavicPluralRule,
+      'bg': slavicPluralRule,
+      'cs': slavicPluralRule,
+      'hr': slavicPluralRule,
+      'mk': slavicPluralRule,
+      'pl': slavicPluralRule,
+      'sk': slavicPluralRule,
+      'sl': slavicPluralRule,
+      'sr': slavicPluralRule,
+      'be': slavicPluralRule,
+      'ru': slavicPluralRule,
+    },
+
     missing: (locale, key) => {
       // very very dirty hack to make work $t("a {key} b", { key: "c" }) as "a c b" when translation is missing
       // e.g. relevant for "Showing {from} to {to} of {total} entries" on list page
       return key + ' ';
     },
-  })
+  });
 
   app.use(i18n);
-
+  return i18n
 }

package/dist/spa/src/main.ts

@@ -13,7 +13,8 @@ export const app: ReturnType<typeof createApp> = createApp(App)
 app.use(createPinia())
 app.use(router)
 
-initI18n(app);
+// get access to i18n instance outside components
+window.i18n = initI18n(app);
 
 
 /* IMPORTANT:ADMINFORTH CUSTOM USES */

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

@@ -16,8 +16,14 @@ const router = createRouter({
         customLayout: true 
       },
       beforeEnter: async (to, from, next) => {
-        if(localStorage.getItem('isAuthorized') === 'true'){
-          next({name: 'home'})
+        if(localStorage.getItem('isAuthorized') === 'true') {
+          // check if url has next=... and redirect to it
+          console.log('to.query', to.query)
+          if (to.query.next) {
+            next(to.query.next.toString())
+          } else {
+            next({name: 'home'});
+          }
         } else {
           next()
         }

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

@@ -1,6 +1,8 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { callAdminForthApi } from '@/utils';
+import websocket from '@/websocket';
+
 import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, GetBaseConfigResponse, ResourceVeryShort, AdminUser, UserData, AdminForthConfigMenuItem, AdminForthConfigForFrontend } from '@/types/Common';
 import type { Ref } from 'vue'
 
@@ -64,19 +66,40 @@ export const useCoreStore = defineStore('core', () => {
     console.log('🌍 AdminForth v', resp.version);
   }
 
-  function findItemWithId(items: AdminForthConfigMenuItem[], _itemId: string): AdminForthConfigMenuItem | undefined {
+  function findItemWithId(items: AdminForthConfigMenuItem[], itemId: string): AdminForthConfigMenuItem | undefined {
     for (const item of items) {
-      if (item._itemId === _itemId) {
+      if (item.itemId === itemId) {
         return item;
       }
       if (item.children) {
-        const found = findItemWithId(item.children, _itemId);
+        const found = findItemWithId(item.children, itemId);
         if (found) {
           return found;
         }
       }
     }
   }
+  async function subscribeToMenuBadges() {
+    const processItem = (mi: AdminForthConfigMenuItem) => {
+      if (mi.badge) {
+        console.log('mi 🧪 subsc', mi)
+        websocket.subscribe(`/opentopic/update-menu-badge/${mi.itemId}`, ({ badge }) => {
+          mi.badge = badge;
+        });
+      }
+    }
+  
+    menu.value.forEach((mi) => {
+      processItem(mi);
+      if (mi.children) {
+        mi.children.forEach((child) => {
+          console.log('mi 🧪', JSON.stringify(child), mi.badge)
+  
+          processItem(child);
+        })
+      }
+    })
+  }
   async function fetchMenuBadges() {
     const resp: Record<string, string> = await callAdminForthApi({
       path: '/get_menu_badges',
@@ -85,12 +108,15 @@ export const useCoreStore = defineStore('core', () => {
     if (!resp) {
       return;
     }
-    Object.entries(resp).forEach(([_itemId, badge]: [string, string]) => {
-      const item: AdminForthConfigMenuItem | undefined = findItemWithId(menu.value, _itemId);
+    Object.entries(resp).forEach(([itemId, badge]: [string, string]) => {
+      const item: AdminForthConfigMenuItem | undefined = findItemWithId(menu.value, itemId);
       if (item) {
         item.badge = badge;
       }
     });
+
+    subscribeToMenuBadges();
+
   }
 
 

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

@@ -10,6 +10,7 @@ export const useUserStore = defineStore('user', () => {
     const isAuthorized = ref(false);
 
     function authorize() {
+        // syncing isAuthorized allows us to use navigation guards without waiting for user api response
         isAuthorized.value = true;
         localStorage.setItem('isAuthorized', 'true');
     }
@@ -21,9 +22,14 @@ export const useUserStore = defineStore('user', () => {
 
     async function finishLogin() {
         const coreStore = useCoreStore();
-        authorize(); // TODO not sure we need this approach with localStorage
+        authorize();
         reconnect();
-        await router.push('/');
+        // if next param in route, redirect to it
+        if (router.currentRoute.value.query.next) {
+            await router.push(router.currentRoute.value.query.next.toString());
+        } else {
+            await router.push('/');
+        }
         await router.isReady();
         await coreStore.fetchMenuAndResource();
     }

package/dist/spa/src/types/Adapters.ts

@@ -1,18 +1,23 @@
 export interface EmailAdapter {
+  validate(): Promise<void>;
+
   sendEmail(
     from: string,
     to: string,
     text: string,
     html: string,
     subject: string
-  );
+  ): Promise<void>;
 }
 
 export interface CompletionAdapter {
+
+  validate(): Promise<void>;
+
   complete(
     content: string,
     stop: string[],
-    maxTokens: number
+    maxTokens: number,
   ): Promise<{
     content?: string;
     finishReason?: string;