fix: c-admin-editor more elegantly handles shared-key one-to-one relationships.

Author: ascott18

CHANGELOG.md

@@ -1,12 +1,14 @@
 # 6.0.2
 - Fix error in c-select when keypress event has no key.
 - Accept problem details error messages in API Callers.
-- Fix `c-list-page` not correctly handling `noCount: true` lists.
-- Fix `c-admin-editor-page` briefly showing editors while the item is initially loading.
+- `c-list-page` once again correctly handles `noCount: true` lists.
 - `c-input` no longer wraps default slot fallback content in a superfluous div.
-- `c-input` no longer attempts to delegate shared-key one-to-one properties to `c-select`, a scenario that is not possible to select values for.
+- `c-table` no longer attempts to render input fields for server-generated PK fields in edit mode.
+- `c-admin-editor` has better support for shared-key one-to-one relationships.
+- `c-admin-editor`: added `props` prop to control listed fields.
+- `c-admin-editor-page` no longer briefly shows editors while the item is initially loading.
 - DTOs no longer generate MapToNew methods with unsatisfied `required` constraints.
-- Fix results from `useResponseCaching` in `ViewModel`/`ListViewModel` `$load` results would get treated as dirty data.
+- Fix results from `useResponseCaching` on `ViewModel`/`ListViewModel` `$load` callers getting flagged as dirty.
 - Separate-key one-to-one relationships, which already weren't supported by Coalesce, will no longer emit incorrect metadata for the navigation prop on the principal side of the relationship. These properties now emit as "value" properties instead of as "referenceNavigation" properties.
 
 # 6.0.1

docs/stacks/vue/coalesce-vue-vuetify/components/c-admin-editor.md

@@ -20,5 +20,9 @@ Does not automatically enable [auto-save](/stacks/vue/layers/viewmodels.md) - if
 
 The [ViewModel](/stacks/vue/layers/viewmodels.md) to render an editor for.
 
+<Prop def="props?: string[]" lang="ts" />
+
+An array of property names to include. If provided, only these properties will be shown. If omitted, all non-hidden properties will be shown.
+
 
 

playground/Coalesce.Web.Vue3/src/css/site.scss

@@ -1,7 +1,39 @@
+a {
+  text-decoration: none;
+}
 
-@media (max-width: 767px) {
-    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
-    body {
-        padding-top: 50px;
-    }
-}
+// Vuetify3 lost the padding for ul/ol that Vuetify2 had. Restore it.
+.v-application {
+  ul,
+  ol {
+    padding-left: 24px;
+  }
+}
+
+// Details under inputs are bottom-aligned by default. Undo that.
+.v-input__details {
+  align-items: normal;
+  padding-top: 3px;
+  overflow: visible;
+}
+
+.v-icon {
+  // Vuetify v-icon expects to be inline-flex,
+  // but fontawesome defaults to inline-block through this var.
+  // Without setting this, icon appearance can vary with CSS load order
+  --fa-display: inline-flex;
+}
+
+// Visually distinguish readonly inputs
+.v-input--readonly {
+  .v-switch__track,
+  .v-switch__thumb {
+    border: 1px dashed rgba(var(--v-theme-on-surface), 0.7);
+  }
+  .v-field__outline__start,
+  .v-field__outline__end,
+  .v-field__outline__notch::before,
+  .v-field__outline__notch::after {
+    border-style: dashed !important;
+  }
+}

playground/Coalesce.Web.Vue3/src/metadata.g.ts

@@ -341,6 +341,7 @@ public void OneToOne_ParentNavigations_HasCorrectMetadata(PropertyViewModelData
         Assert.Equal(PropertyRole.ReferenceNavigation, vm.Role);
         Assert.Equal(vm.Parent.PropertyByName(nameof(OneToOneParent.Id)), vm.ForeignKeyProperty);
         Assert.Equal(nameof(OneToOneSharedKeyChild1.Parent), vm.InverseProperty.Name);
+        Assert.False(vm.EffectiveParent.PrimaryKey.IsCreateOnly);
     }
 
     [Theory]
@@ -352,6 +353,7 @@ public void OneToOne_ChildNavigations_HasCorrectMetadata(PropertyViewModelData d
         Assert.Equal(PropertyRole.ReferenceNavigation, vm.Role);
         Assert.Equal(vm.Parent.PropertyByName("ParentId"), vm.ForeignKeyProperty);
         Assert.Equal(inverse, vm.InverseProperty.Name);
+        Assert.True(vm.EffectiveParent.PrimaryKey.IsCreateOnly);
     }
 
     [Theory]

src/IntelliTect.Coalesce.Tests/Tests/TypeDefinition/PropertyViewModelTests.cs

@@ -459,6 +459,10 @@ public DatabaseGeneratedOption DatabaseGenerated
             {
                 if (Type.IsEnum) return DatabaseGeneratedOption.None;
 
+                // If the PK is also an FK, it can't be database generated.
+                // This happens for shared-key one-to-one relationships.
+                if (this.HasAttribute<ForeignKeyAttribute>()) return DatabaseGeneratedOption.None;
+
                 return DatabaseGeneratedOption.Identity;
             }
 

src/IntelliTect.Coalesce/TypeDefinition/PropertyViewModel.cs

@@ -3,7 +3,10 @@ import { CAdminEditor } from "..";
 import {
   PersonViewModel,
   PersonListViewModel,
+  OneToOneParentViewModel,
+  OneToOneSharedKeyChild1ViewModel,
 } from "@test-targets/viewmodels.g";
+import { mockEndpoint, mount } from "@test/util";
 
 describe("CAdminEditor", () => {
   test("types", () => {
@@ -17,4 +20,119 @@ describe("CAdminEditor", () => {
     //@ts-expect-error list not allowed
     () => <CAdminEditor model={list} />;
   });
+
+  describe("shared-key one-to-one parent", () => {
+    mockEndpoint(
+      "/OneToOneSharedKeyChild1/get/42",
+      vitest.fn(() => ({ wasSuccessful: true })),
+    );
+    mockEndpoint(
+      "/OneToOneSharedKeyChild1/list",
+      vitest.fn(() => ({ wasSuccessful: true, list: [] })),
+    );
+
+    test("without value renders readonly c-select and link to create", () => {
+      const vm = new OneToOneParentViewModel();
+      vm.$loadCleanData({ id: 42 });
+      vm.$load.wasSuccessful = true;
+      const wrapper = mount(() => (
+        <CAdminEditor model={vm} props={["sharedKeyChild1"]} />
+      ));
+
+      // Find the row for SharedKeyChild1
+      const row = wrapper.find(".prop-sharedKeyChild1");
+      expect(row.exists()).toBeTruthy();
+
+      // Should contain a readonly c-select
+      const select = row.find(".c-select");
+      expect(select.exists()).toBeTruthy();
+      expect(select.classes()).toContain("v-input--readonly");
+
+      // Should contain a link to the child item with filter for parent's id
+      // to allow for creation of the child item
+      const link = row.find(".c-admin-editor--ref-nav-link");
+      expect(link.exists()).toBeTruthy();
+      expect(link.attributes("href")).toBe(
+        "/admin/OneToOneSharedKeyChild1/item?filter.parentId=42",
+      );
+    });
+
+    test("with value renders readonly c-select and link to edit", () => {
+      const vm = new OneToOneParentViewModel();
+      vm.$loadCleanData({ id: 42, sharedKeyChild1: { parentId: 42 } });
+      vm.$load.wasSuccessful = true;
+      const wrapper = mount(() => (
+        <CAdminEditor model={vm} props={["sharedKeyChild1"]} />
+      ));
+
+      // Find the row for SharedKeyChild1
+      const row = wrapper.find(".prop-sharedKeyChild1");
+      expect(row.exists()).toBeTruthy();
+
+      // Should contain a readonly c-select
+      const select = row.find(".c-select");
+      expect(select.exists()).toBeTruthy();
+      expect(select.classes()).toContain("v-input--readonly");
+
+      // Should contain a link to the child item
+      const link = row.find(".c-admin-editor--ref-nav-link");
+      expect(link.exists()).toBeTruthy();
+      expect(link.attributes("href")).toBe(
+        "/admin/OneToOneSharedKeyChild1/item/42",
+      );
+    });
+  });
+
+  describe("shared-key one-to-one child", () => {
+    mockEndpoint(
+      "/OneToOneParent/get/42",
+      vitest.fn(() => ({ wasSuccessful: true, object: { id: 42 } })),
+    );
+    mockEndpoint(
+      "/OneToOneParent/list",
+      vitest.fn(() => ({ wasSuccessful: true, list: [] })),
+    );
+
+    test.each([
+      // Simulate being rendered by c-admin-editor-page with `filter.parentId=42`
+      { parentId: 42 },
+      // Simulate direct navigation to create page
+      {},
+    ])("unsaved item renders selectable PK", (initialData) => {
+      const vm = new OneToOneSharedKeyChild1ViewModel();
+      vm.$loadDirtyData(initialData);
+
+      const wrapper = mount(() => <CAdminEditor model={vm} />);
+
+      // Find the row for Parent
+      const row = wrapper.find(".prop-parent");
+      expect(row.exists()).toBeTruthy();
+
+      // Should contain an editable c-select
+      const select = row.find(".c-select");
+      expect(select.exists()).toBeTruthy();
+      expect(select.classes()).not.toContain("v-input--readonly");
+    });
+
+    test("saved item renders readonly c-select and link to edit", () => {
+      const vm = new OneToOneSharedKeyChild1ViewModel();
+      vm.$loadCleanData({ parentId: 42, parent: { id: 42 } });
+
+      const wrapper = mount(() => <CAdminEditor model={vm} />);
+
+      // Find the row for Parent
+      const row = wrapper.find(".prop-parent");
+      expect(row.exists()).toBeTruthy();
+
+      // Should contain a readonly c-select
+      const select = row.find(".c-select");
+      expect(select.exists()).toBeTruthy();
+      expect(select.classes()).toContain("v-input--readonly");
+
+      // Should contain a link to the parent item
+      const link = row.find(".c-admin-editor--ref-nav-link");
+      expect(link.exists()).toBeTruthy();
+      expect(link.attributes("href")).toBe("/admin/OneToOneParent/item/42");
+    });
+  });
 });

src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor.spec.tsx

@@ -212,6 +212,8 @@ const props = withDefaults(
     color?: string;
     /** Whether or not a delete button is shown. Default true if the provided model allows deletes. */
     deletable?: boolean;
+    /** An array of property names to display. If provided, only these properties will be shown. If omitted, all non-hidden properties will be shown. */
+    props?: string[];
   }>(),
   {
     deletable: true,
@@ -293,11 +295,17 @@ const canDelete = computed(() => {
 const showProps = computed(() => {
   if (!props.model) return [];
 
-  return Object.values(metadata.value.props).filter(
+  let filtered = Object.values(metadata.value.props).filter(
     (p: Property) =>
       p.hidden === undefined || (p.hidden & HiddenAreas.Edit) == 0,
     // && (!p.dontSerialize || p.role == "referenceNavigation" || p.role == "collectionNavigation")
   );
+
+  if (props.props) {
+    filtered = filtered.filter((p) => props.props!.includes(p.name));
+  }
+
+  return filtered;
 });
 
 const isBulkSaveDirty = computed(() => {

src/coalesce-vue-vuetify3/src/components/admin/c-admin-editor.vue

@@ -6,6 +6,7 @@ import {
   ModelReferenceNavigationProperty,
   ViewModel,
   ModelValueProperty,
+  ModelType,
 } from "coalesce-vue";
 import { Router } from "vue-router";
 
@@ -20,14 +21,29 @@ export function getRefNavRoute(
       ? (owner as any)[prop.foreignKey?.name]
       : undefined) ?? item?.[prop.typeDef.keyProp.name];
 
-  if (!fk) return;
+  const meta: ModelType = item?.$metadata ?? prop.typeDef;
 
-  // Resolve to an href to allow overriding of admin routes in userspace.
-  // If we just gave a named raw location, it would always use the coalesce admin route
-  // instead of the user-overridden one (that the user overrides by declaring another
-  // route with the same path).
   try {
-    const meta = item?.$metadata ?? prop.typeDef;
+    if (!item && "foreignKey" in prop && prop.foreignKey.role == "primaryKey") {
+      // This is a shared-key one-to-one, and the model isn't loaded.
+      // That most likely means that the model doesn't exist
+      // (or it failed to be .Included() in the response).
+      // We want to route to a create editor, not an edit editor.
+      return router.resolve({
+        name: "coalesce-admin-item",
+        params: {
+          type: meta.name,
+        },
+        query: { ["filter." + meta.keyProp.name]: fk },
+      }).fullPath;
+    }
+
+    if (!fk) return;
+
+    // Resolve to an href to allow overriding of admin routes in userspace.
+    // If we just gave a named raw location, it would always use the coalesce admin route
+    // instead of the user-overridden one (that the user overrides by declaring another
+    // route with the same path).
     return router.resolve({
       name: "coalesce-admin-item",
       params: {

src/coalesce-vue-vuetify3/src/components/admin/util.ts

@@ -296,17 +296,6 @@ function render() {
       return h(CDatetimePicker, data, vuetifySlots);
 
     case "model":
-      if (
-        valueMeta.role == "referenceNavigation" &&
-        "foreignKey" in valueMeta &&
-        valueMeta.foreignKey.role == "primaryKey"
-      ) {
-        // This is a shared-key one-to-one. Its not possible to select values with c-select,
-        // since doing so would mean changing the PK of the child, which is nonsensical.
-        // The only thing we could *maybe* do here is show a "create" button if the prop is null
-        // (but if the prop is null because the object wasn't loaded, then that's wrong).
-        break;
-      }
       data.model = props.model;
       data.for = props.for;
       addHandler(data, "update:modelValue", (v: any) =>