feat: add ability to set readonlyColumns for create form

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md

@@ -360,6 +360,30 @@ const coreStore = useCoreStore();
 </script>
 ```
 
+ALso if you want to disable ability to change such fields (but keep them as readonly) you can add `readonlyColumns` to the link:
+
+```html title="./resources/Dashboard.vue
+<template>
+  ...
+  <LinkButton
+    :to="{
+      name: 'resource-create',
+      params: {
+        resourceId: 'aparts',
+      },
+      query: {
+        values: encodeURIComponent(JSON.stringify({
+          realtor_id: coreStore?.adminUser.dbUser.id 
+        })),
+        //diff-add
+        readonlyColumns: encodeURIComponent(JSON.stringify(['realtor_id'])),
+      },
+    }"
+  >
+    {{$t('Create new apartment')}}
+  </LinkButton>
+  ...
+```
 
 ## Editing
 

adminforth/modules/restApi.ts

@@ -29,9 +29,9 @@ export async function interpretResource(
   source: ActionCheckSource, 
   adminforth: IAdminForth
 ): Promise<{allowedActions: AllowedActionsResolved}> {
-  // if (process.env.HEAVY_DEBUG) {
-  //   console.log('🪲Interpreting resource', resource.resourceId, source, 'adminUser', adminUser);
-  // }
+  if (process.env.HEAVY_DEBUG) {
+    console.log('🪲Interpreting resource', resource.resourceId, source, 'adminUser', adminUser);
+  }
   const allowedActions = {} as AllowedActionsResolved;
 
   // we need to compute only allowed actions for this source:
@@ -53,6 +53,8 @@ export async function interpretResource(
     [ActionCheckSource.CustomActionRequest]: ['show', 'edit', 'delete', 'create', 'filter'],
   }[source];
 
+  console.log('🎉🎉🎉 ', JSON.stringify(resource.options.allowedActions, null, 2));
+
   await Promise.all(
     Object.entries(resource.options.allowedActions).map(
       async ([key, value]: [string, AllowedActionValue]) => {
@@ -67,6 +69,7 @@ export async function interpretResource(
         // if callable then call
         if (typeof value === 'function') {
           allowedActions[key] = await value({ adminUser, resource, meta, source, adminforth });
+          console.log(`🪲🚥🚥${resource.resourceId}: allowed ${key} (function): ${allowedActions[key]}`);
         } else {
           allowedActions[key] = value;
         }

adminforth/spa/src/afcl/Input.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="flex z-0">
+  <div class="flex z-0" :class="{'opacity-50' : readonly}">
     <span
         v-if="$slots.prefix || prefix"
         class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
@@ -18,6 +18,7 @@
       class="inline-flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
       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 translate-y-0"
       :class="{'rounded-l-md': !$slots.prefix && !prefix, 'rounded-r-md': !$slots.suffix && !suffix, 'w-full': fullWidth}"
+      :disabled="readonly"
     >
 
 
@@ -34,13 +35,14 @@
 
 import { ref } from 'vue';
 
-const props = defineProps({
-  type: String,
-  fullWidth: Boolean,
-  modelValue: String,
-  suffix: String,
-  prefix: String,
-})
+const props = defineProps<{
+  type: string,
+  fullWidth: boolean,
+  modelValue: string,
+  suffix: string,
+  prefix: string,
+  readonly?: boolean,
+}>()
 
 const input = ref<HTMLInputElement | null>(null)
 

adminforth/spa/src/afcl/Select.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="relative inline-block afcl-select" ref="internalSelect">
+  <div class="relative inline-block afcl-select" ref="internalSelect" 
+    :class="{'opacity-50': readonly}"
+  >
     <div class="relative">
       <input
         ref="inputEl"

adminforth/spa/src/components/ColumnValueInput.vue

@@ -10,6 +10,7 @@
       :record="currentValues"
       :resource="coreStore.resource"
       :adminUser="coreStore.adminUser"
+      :readonly="(column.editReadonly && source === 'edit') || readonly"
       @update:inValidity="$emit('update:inValidity', $event)"
       @update:emptiness="$emit('update:emptiness', $event)"
     />
@@ -21,7 +22,7 @@
       teleportToBody
       :placeholder = "columnOptions[column.name]?.length ?$t('Select...'): $t('There are no options available')"
       :modelValue="value"
-      :readonly="column.editReadonly && source === 'edit'"
+      :readonly="(column.editReadonly && source === 'edit') || readonly"
       @update:modelValue="$emit('update:modelValue', $event)"
     />
     <Select
@@ -31,7 +32,7 @@
       :options="column.enum"
       teleportToBody
       :modelValue="value"
-      :readonly="column.editReadonly && source === 'edit'"
+      :readonly="(column.editReadonly && source === 'edit') || readonly"
       @update:modelValue="$emit('update:modelValue', $event)"
     />
     <Select
@@ -41,7 +42,7 @@
       :options="getBooleanOptions(column)"
       teleportToBody
       :modelValue="value"
-      :readonly="column.editReadonly && source === 'edit'"
+      :readonly="(column.editReadonly && source === 'edit') || readonly"
       @update:modelValue="$emit('update:modelValue', $event)"
     />
     <Input
@@ -55,7 +56,7 @@
       :max="![undefined, null].includes(column.maxValue) ? column.maxValue : ''"
       :prefix="column.inputPrefix"
       :suffix="column.inputSuffix"
-      :readonly="column.editReadonly && source === 'edit'"
+      :readonly="(column.editReadonly && source === 'edit') || readonly"
       :modelValue="value"
       @update:modelValue="$emit('update:modelValue', $event)"
     />
@@ -66,7 +67,7 @@
       :valueStart="value"
       auto-hide
       @update:valueStart="$emit('update:modelValue', $event)"
-      :readonly="column.editReadonly && source === 'edit'"
+      :readonly="(column.editReadonly && source === 'edit') || readonly"
     />
     <Input
       v-else-if="['decimal', 'float'].includes(type || column.type)"
@@ -81,7 +82,7 @@
       :suffix="column.inputSuffix"
       :modelValue="value"
       @update:modelValue="$emit('update:modelValue', $event)"
-      :readonly="column.editReadonly && source === 'edit'"
+      :readonly="(column.editReadonly && source === 'edit') || readonly"
     />
     <textarea
       v-else-if="['text', 'richtext'].includes(type || column.type)"
@@ -90,7 +91,7 @@
       :placeholder="$t('Text')"
       :value="value"
       @input="$emit('update:modelValue', $event.target.value)"
-      :readonly="column.editReadonly && source === 'edit'"
+      :readonly="(column.editReadonly && source === 'edit') || readonly"
     />
     <textarea
       v-else-if="['json'].includes(type || column.type)"
@@ -112,7 +113,7 @@
       @update:modelValue="$emit('update:modelValue', $event)"
       autocomplete="false"
       data-lpignore="true"
-      readonly
+      :readonly="(column.editReadonly && source === 'edit') || readonly"
       @focus="onFocusHandler($event, column, source)"
     />
 
@@ -161,10 +162,12 @@
       columnOptions: any,
       unmasked: any,
       deletable?: boolean,
+      readonly?: boolean,
     }>(),
     {
       type: undefined,
       deletable: false,
+      readonly: false,
     }
   );
 

adminforth/spa/src/components/ColumnValueInputWrapper.vue

@@ -34,8 +34,10 @@
       </button>
     </div>
   </template>
+  
   <ColumnValueInput
     v-else
+    :readonly="props.readonly"
     :source="source"
     :column="column"
     :value="currentValues[column.name]"
@@ -62,7 +64,8 @@
     mode: string,
     columnOptions: any,
     unmasked: any,
-    setCurrentValue: Function
+    setCurrentValue: Function,
+    readonly?: boolean,
   }>();
   
   const emit = defineEmits(['update:unmasked', 'update:inValidity', 'update:emptiness', 'focus-last-input']);

adminforth/spa/src/components/GroupsTable.vue

@@ -53,6 +53,7 @@
               @update:unmasked="unmasked[$event] = !unmasked[$event]"
               @update:inValidity="customComponentsInValidity[$event.name] = $event.value"
               @update:emptiness="customComponentsEmptiness[$event.name] = $event.value"
+              :readonly="readonlyColumns?.includes(column.name)"
             />
             <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>
@@ -82,6 +83,7 @@
     columnError: (column: any) => string,
     setCurrentValue: (columnName: string, value: any) => void,
     columnOptions: any,
+    readonlyColumns?: string[],
   }>();
 
   const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});

adminforth/spa/src/components/ResourceForm.vue

@@ -5,6 +5,7 @@
     <form autocomplete="off" @submit.prevent>
       <div v-if="!groups || groups.length === 0">
         <GroupsTable
+        :readonlyColumns="props.readonlyColumns"
         :source="source"
         :group="{groupName: '', columns: editableColumns}"
         :currentValues="currentValues"
@@ -22,6 +23,7 @@
       <div v-else class="flex flex-col gap-4">
         <template v-for="group in groupedColumns" :key="group.groupName"> 
           <GroupsTable
+          :readonlyColumns="props.readonlyColumns"
           :source="source"
           :group="group"
           :currentValues="currentValues"
@@ -36,8 +38,9 @@
           @update:customComponentsEmptiness="(data) => customComponentsEmptiness = { ...customComponentsEmptiness, ...data }"
           />
         </template>
-        <div v-if="otherColumns.length > 0">
+        <div v-if="otherColumns?.length || 0 > 0">
           <GroupsTable
+          :readonlyColumns="props.readonlyColumns"
           :source="source"
           :group="{groupName: $t('Other'), columns: otherColumns}"
           :currentValues="currentValues"
@@ -58,7 +61,7 @@
 
 </template>
 
-<script setup>
+<script setup lang="ts">
 
 import { applyRegexValidation, callAdminForthApi} from '@/utils';
 import { computedAsync } from '@vueuse/core';
@@ -67,18 +70,20 @@ import { useRouter, useRoute } from 'vue-router';
 import { useCoreStore } from "@/stores/core";
 import GroupsTable from '@/components/GroupsTable.vue';
 import { useI18n } from 'vue-i18n';
+import { type AdminForthResourceCommon } from '@/types/Common';
 
 const { t } = useI18n();
 
 const coreStore = useCoreStore();
 const router = useRouter();
 const route = useRoute();
-const props = defineProps({
-  resource: Object,
-  record: Object,
-  validating: Boolean,
-  source: String,
-});
+const props = defineProps<{
+  resource: AdminForthResourceCommon,
+  record: any,
+  validating: boolean,
+  source: 'create' | 'edit',
+  readonlyColumns?: string[],
+}>();
 
 const unmasked = ref({});
 

adminforth/spa/src/views/CreateView.vue

@@ -56,6 +56,7 @@
       @update:isValid="isValid = $event"
       :validating="validating"
       :source="'create'"
+      :readonlyColumns="readonlyColumns"
     >
     </ResourceForm>
 
@@ -105,6 +106,8 @@ const { t } = useI18n();
 
 const initialValues = ref({});
 
+const readonlyColumns = ref([]);
+
 
 async function onUpdateRecord(newRecord) {
   console.log('newRecord', newRecord);
@@ -125,6 +128,9 @@ onMounted(async () => {
   if (route.query.values) {
     initialValues.value = { ...initialValues.value, ...JSON.parse(decodeURIComponent(route.query.values)) };
   }
+  if (route.query.readonlyColumns) {
+    readonlyColumns.value = JSON.parse(decodeURIComponent(route.query.readonlyColumns));
+  }
   record.value = initialValues.value;
   loading.value = false;
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'create');

dev-demo/index.ts

@@ -341,7 +341,7 @@ const port = process.env.PORT || 3000;
 (async () => {
     console.log('🅿️  Bundling AdminForth...');
     // needed to compile SPA. Call it here or from a build script e.g. in Docker build time to reduce downtime
-    await admin.bundleNow({ hotReload: process.env.NODE_ENV === 'development1'});
+    await admin.bundleNow({ hotReload: process.env.NODE_ENV === 'development'});
     console.log('Bundling AdminForth SPA done.');
 })();