adminforth 1.1.20 → 1.1.21

package/spa/src/views/CreateView.vue

@@ -78,6 +78,7 @@ import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { computed } from 'vue';
+import { showErrorTost } from '@/composables/useFrontendApi';
 
 
 const isValid = ref(false);
@@ -141,11 +142,8 @@ async function saveRecord() {
     },
   });
   if (response.error) {
-    window.adminforth.alert({
-      message: response.error,
-      variant: 'danger',
-      timeout: 'unlimited',
-    })
+    showErrorTost(response.error);
+    
   }
   saving.value = false;
   if (route.query.returnTo) {

package/spa/src/views/EditView.vue

@@ -73,6 +73,7 @@ import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { showErrorTost } from '@/composables/useFrontendApi';
 
 const coreStore = useCoreStore();
 
@@ -155,11 +156,7 @@ async function saveRecord() {
     },
   });
   if (resp.error) {
-    window.adminforth.alert({
-      message: resp.error,
-      variant: 'danger',
-      timeout: 'unlimited',
-    })
+    showErrorTost(resp.error);
   }
   saving.value = false;
   router.push({ name: 'resource-show', params: { resourceId: route.params.resourceId, primaryKey: coreStore.record[coreStore.primaryKey] } });

package/spa/src/views/ListView.vue

@@ -87,6 +87,7 @@
       @update:page="page = $event"
       @update:sort="sort = $event"
       @update:checkboxes="checkboxes = $event"
+      @update:records="getList"
       :pageSize="pageSize"
       :totalRows="totalRows"
       :checkboxes="checkboxes"
@@ -113,6 +114,7 @@ import { callAdminForthApi, getIcon } from '@/utils';
 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';
@@ -184,11 +186,7 @@ async function getList() {
     }
   });
   if (data.error) {
-    window.adminforth.alert({
-      message: data.error,
-      variant: 'danger',
-      timeout: 'unlimited',
-    });
+    showErrorTost(data.error);
     rows.value = [];
     totalRows.value = 0;
     return;
@@ -201,36 +199,9 @@ async function getList() {
 }
 
 
-function showDeleteModal(row) {
-  if (!coreStore.config?.deleteConfirmation) {
-    return deleteRecord(row);
-  }
-  modalStore.setModalContent({
-    content: 'Are you sure you want to delete this item?',
-    acceptText: 'Delete',
-    cancelText: 'Cancel',
-  });
-  modalStore.setOnAcceptFunction(() => {
-    return deleteRecord(row)
-  })
-  console.log('row', row);
-  modalStore.togleModal();
 
-}
 
-async function deleteRecord(row) {
-  await callAdminForthApi({
-    path: '/delete_record',
-    method: 'POST',
-    body: {
-      resourceId: route.params.resourceId,
-      primaryKey: row._primaryKeyValue,
-      recordId: row.id
-    }
-  });
-  await getList();
-  modalStore.resetmodalState()
-}
+
 
 async function startBulkAction(actionId) {
   const data = await callAdminForthApi({

package/types/AdminForthConfig.ts

@@ -833,9 +833,20 @@ export enum AllowedActionsEnum {
   filter = 'filter',
 }
 
+/**
+ * Defines whether user has access to an action, can statically be Boolean
+ * or function which returns Boolean or string with error message
+ * 
+ */
+export type AllowedActionValue = boolean | ((adminUser: AdminUser, resource: AdminForthResource, meta: any) => Promise<boolean | string>);
 
+/**
+ * Object which describes allowed actions for user.
+ */
 export type AllowedActions = {
-  [key in AllowedActionsEnum]?: boolean
+  [key in AllowedActionsEnum]?: AllowedActionValue
+} & {
+  all?: AllowedActionValue;
 }
   
 export type ValidationObject = {

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

@@ -1,148 +0,0 @@
-<template>
-  <div class="flex flex-wrap gap-2">
-    <input
-      type="number" aria-describedby="helper-text-explanation"
-      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-20 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="From"
-      v-model="start"
-    >
-
-    <input
-      type="number" aria-describedby="helper-text-explanation"
-      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-20 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="To"
-      v-model="end"
-    >
-
-    <button
-      v-if="isChanged"
-      type="button"
-      class="flex items-center p-0.5 ml-auto 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-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 disabled:cursor-not-allowed"
-      @click="clear">Clear
-    </button>
-
-    <div class="w-full">
-      <vue-slider
-        class="custom-slider"
-        :dot-size="20"
-        height="7.99px"
-        :min="minFormatted"
-        :max="maxFormatted"
-        v-model="sliderValue"
-        @update:model-value="updateFromSlider($event)"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import VueSlider from 'vue-slider-component';
-import 'vue-slider-component/theme/antd.css'
-import {computed, onMounted, ref, watch} from "vue";
-import debounce from 'debounce'
-
-const props = defineProps({
-  valueStart: {
-    default: '',
-  },
-  valueEnd: {
-    default: '',
-  },
-  min: {
-    default: 0,
-  },
-  max: {
-    default: 10,
-  },
-});
-
-const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
-
-const minFormatted = computed(() => Math.floor(props.min));
-const maxFormatted = computed(() => Math.ceil(props.max));
-
-const isChanged = computed(() => {
-  return start.value && start.value !== minFormatted.value || end.value && end.value !== maxFormatted.value;
-});
-
-const start = ref(props.valueStart);
-const end = ref(props.valueEnd);
-
-const sliderValue = ref([minFormatted.value, maxFormatted.value]);
-
-const updateFromSlider =
-    debounce((value: [number, number]) => {
-      start.value = value[0] === minFormatted.value ? '': value[0];
-      end.value = value[1] === maxFormatted.value ? '': value[1];
-    }, 500);
-
-onMounted(() => {
-  updateStartFromProps();
-  updateEndFromProps();
-
-  watch(() => props.valueStart, (value) => {
-    updateStartFromProps();
-  });
-
-  watch(() => props.valueEnd, (value) => {
-    updateEndFromProps();
-  });
-})
-
-function updateStartFromProps() {
-  start.value = props.valueStart;
-  setSliderValues(start.value, end.value)
-}
-
-function updateEndFromProps() {
-  end.value = props.valueEnd;
-  setSliderValues(start.value, end.value)
-}
-
-watch(start, () => {
-  console.log('⚡ emit', start.value)
-  emit('update:valueStart', start.value)
-})
-
-watch(end, () => {
-  console.log('⚡ emit', end.value)
-  emit('update:valueEnd', end.value);
-})
-
-const clear = () => {
-  start.value = ''
-  end.value = ''
-  setSliderValues('', '')
-}
-
-function setSliderValues(start, end) {
-  sliderValue.value = [start || minFormatted.value, end || maxFormatted.value];
-}
-</script>
-
-<style lang="scss" scoped>
-.custom-slider {
-    &:deep(.vue-slider-rail) {
-        background-color: rgb(229 231 235);
-    }
-
-    &:deep(.vue-slider-dot-handle) {
-        background-color: #1c64f2;
-        border: none;
-        box-shadow: none;
-    }
-
-    &:deep(.vue-slider-dot-handle:hover) {
-        background-color: #1c64f2;
-        border: none;
-        box-shadow: none;
-    }
-
-    &:deep(.vue-slider-process) {
-        background-color: rgb(225 239 254);
-    }
-
-    &:deep(.vue-slider-process:hover) {
-        background-color: rgb(225 239 254);
-    }
-}
-</style>