fix: #385 display doesn't handle many-to-many collections

src/coalesce-vue/src/model.ts

@@ -21,6 +21,7 @@ import type {
   BooleanValue,
   NumberValue,
   StringValue,
+  ModelCollectionNavigationProperty,
 } from "./metadata.js";
 import { resolvePropMeta } from "./metadata.js";
 import {
@@ -743,7 +744,7 @@ class DisplayVisitor extends Visitor<
 
   protected visitCollection(
     value: any[] | null,
-    meta: CollectionValue
+    meta: CollectionValue | ModelCollectionNavigationProperty
   ): string | null {
     if (value == null) return null;
     value = parseValue(value, meta);
@@ -756,9 +757,17 @@ class DisplayVisitor extends Visitor<
       this.options?.collection ?? {};
 
     if (value.length <= enumeratedItemsMax) {
+      let itemMeta = meta.itemType;
+      if ("manyToMany" in meta) {
+        itemMeta = meta.manyToMany!.farNavigationProp;
+        value = value.map(
+          (i) => i[meta.manyToMany!.farNavigationProp.name as any]
+        );
+      }
+
       return value
         .map<string>(
-          (childItem) => this.visitValue(childItem, meta.itemType) || "???" // TODO: what should this be for un-displayable members of a collection?
+          (childItem) => this.visitValue(childItem, itemMeta) || "???" // TODO: what should this be for un-displayable members of a collection?
         )
         .join(enumeratedItemsSeparator);
     }

src/coalesce-vue/test/model.display.spec.ts

@@ -5,6 +5,9 @@ import { shortStringify } from "./test-utils";
 import { format, subYears } from "date-fns";
 import { toDate } from "date-fns-tz";
 
+import { Case as CaseMeta } from "@test-targets/metadata.g";
+import { Case } from "@test-targets/models.g";
+
 const studentProps = $metadata.Student.props;
 
 const basicStudent = {
@@ -203,6 +206,22 @@ describe.each(<DisplayData[]>[
   },
   ...undisplayable(studentProps.courses, "abc", 123, {}, true, new Date()),
 
+  // Many-to-many collection
+  {
+    meta: CaseMeta.props.caseProducts,
+    model: new Case({
+      caseProducts: ["Foo", "Bar", "Baz"].map((name) => {
+        return {
+          product: {
+            name,
+          },
+        };
+      }),
+    }).caseProducts,
+    display: "Foo, Bar, Baz",
+  },
+
+  // Model/Object
   { meta: studentProps.advisor, model: null, display: null },
   {
     meta: studentProps.advisor,

src/coalesce-vue/vitest.config.ts

@@ -15,6 +15,10 @@ export default defineConfig({
     alias: [
       // Imports inside the generated test targets:
       { find: "coalesce-vue/lib", replacement: path.resolve(__dirname, "src") },
+      {
+        find: "@test-targets",
+        replacement: path.resolve(__dirname, "../test-targets"),
+      },
     ],
   },
 }) as UserConfig;