fix: fix foreign resource array display on edit page

adminforth/modules/configValidator.ts

@@ -515,8 +515,8 @@ export default class ConfigValidator implements IConfigValidator {
             if (col.masked) {
               errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray cannot be used for a masked column`);
             }
-            if (col.foreignResource) {
-              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray cannot be used for a foreignResource column`);
+            if (col.foreignResource && col.foreignResource.polymorphicResources) {
+              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray cannot be used for a polymorphic foreignResource column`);
             }
 
             if (!col.type || col.type !== AdminForthDataTypes.JSON) {

adminforth/modules/restApi.ts

@@ -675,13 +675,22 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
               const targetResource = this.adminforth.config.resources.find((res) => res.resourceId == col.foreignResource.resourceId);
               const targetConnector = this.adminforth.connectors[targetResource.dataSource];
               const targetResourcePkField = targetResource.columns.find((col) => col.primaryKey).name;
-              const pksUnique = [...new Set(data.data.map((item) => item[col.name]))];
+              const pksUnique = [...new Set(data.data.reduce((pks, item) => {
+                if (col.isArray?.enabled) {
+                  if (item[col.name]?.length) {
+                    pks = pks.concat(item[col.name]);
+                  }
+                } else {
+                  pks.push(item[col.name]);
+                }
+                return pks;
+              }, []))];
               if (pksUnique.length === 0) {
                 return;
               }
               const targetData = await targetConnector.getData({
                 resource: targetResource,
-                limit: limit,
+                limit: pksUnique.length,
                 offset: 0,
                 filters: [
                   {
@@ -755,7 +764,13 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
             }
 
             data.data.forEach((item) => {
-              item[col.name] = targetDataMap[item[col.name]];
+              if (col.isArray?.enabled) {
+                if (item[col.name]?.length) {
+                  item[col.name] = item[col.name].map((i) => targetDataMap[i]);
+                }
+              } else {
+                item[col.name] = targetDataMap[item[col.name]];
+              }
 
               if (!item[col.name]) {
                 if (col.foreignResource && col.foreignResource.polymorphicResources) {

adminforth/spa/src/components/ValueRenderer.vue

@@ -1,7 +1,23 @@
 <template>
   <div>
-    <span @click="(e)=>{e.stopPropagation()}" v-if="column.foreignResource">
-      <RouterLink v-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110 whitespace-nowrap"
+    <span
+      v-if="column.foreignResource"
+      :class="{'flex flex-wrap': column.isArray?.enabled}"
+      @click="(e)=>{e.stopPropagation()}"
+    >
+      <span
+        v-if="record[column.name] && column.isArray?.enabled"
+        v-for="foreignResource in record[column.name]"
+        class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
+      >
+        <RouterLink
+          class="font-medium text-lightSidebarText dark:text-darkSidebarText hover:brightness-110 whitespace-nowrap"
+          :to="{ name: 'resource-show', params: { primaryKey: foreignResource.pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }"
+        >
+          {{ foreignResource.label }}
+        </RouterLink>
+      </span>
+      <RouterLink v-else-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110 whitespace-nowrap"
         :to="{ name: 'resource-show', params: { primaryKey: record[column.name].pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }">
         {{ record[column.name].label }}
       </RouterLink>

adminforth/spa/src/views/EditView.vue

@@ -107,7 +107,11 @@ const editableRecord = computed(() => {
   }
   coreStore.resource.columns.forEach(column => {
     if (column.foreignResource) {
-      newRecord[column.name] = newRecord[column.name]?.pk
+      if (column.isArray?.enabled) {
+        newRecord[column.name] = newRecord[column.name]?.map(fr => fr.pk);
+      } else {
+        newRecord[column.name] = newRecord[column.name]?.pk;
+      }
     }
   });
   return newRecord;

dev-demo/resources/apartments.ts

@@ -223,9 +223,16 @@ export default {
     {
       name: "room_sizes",
       type: AdminForthDataTypes.JSON,
+      // isArray: {
+      //   enabled: true,
+      //   itemType: AdminForthDataTypes.FLOAT,
+      // },
       isArray: {
         enabled: true,
-        itemType: AdminForthDataTypes.FLOAT,
+        itemType: AdminForthDataTypes.STRING,
+      },
+      foreignResource: {
+        resourceId: "users",
       },
     },
     {