From 4c34986fb735cdfec9a94749f21a1e189a10c216 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 16 May 2023 21:50:50 +0200
Subject: [PATCH] Form overhaul: Reference Form

---
 .../library/methods/updateReferenceNode.js    | 22 ++---
 .../AddCreaturePropertyDialog.vue             |  3 +-
 .../client/ui/dialogStack/DialogStack.vue     |  2 +-
 .../client/ui/library/LibraryNodeDialog.vue   |  1 +
 .../ui/properties/forms/ReferenceForm.vue     | 93 ++++++++++++-------
 5 files changed, 77 insertions(+), 44 deletions(-)

diff --git a/app/imports/api/library/methods/updateReferenceNode.js b/app/imports/api/library/methods/updateReferenceNode.js
index f933d065..03d6d832 100644
--- a/app/imports/api/library/methods/updateReferenceNode.js
+++ b/app/imports/api/library/methods/updateReferenceNode.js
@@ -21,7 +21,7 @@ const updateReferenceNode = new ValidatedMethod({
     numRequests: 5,
     timeInterval: 5000,
   },
-  run({_id}) {
+  run({ _id }) {
     let userId = this.userId;
     let node = LibraryNodes.findOne(_id);
     assertDocEditPermission(node, userId);
@@ -29,15 +29,15 @@ const updateReferenceNode = new ValidatedMethod({
   },
 });
 
-function writeCache(_id, cache){
-  LibraryNodes.update(_id, {$set: {cache}}, {
-    selector: {type: 'reference'},
+function writeCache(_id, cache) {
+  LibraryNodes.update(_id, { $set: { cache } }, {
+    selector: { type: 'reference' },
   });
 }
 
-function updateReferenceNodeWork(node, userId){
+function updateReferenceNodeWork(node, userId) {
   let cache = {}
-  if (!node.ref){
+  if (!node.ref?.collection || !node.ref?.id) {
     writeCache(node._id, cache);
     return;
   }
@@ -45,20 +45,20 @@ function updateReferenceNodeWork(node, userId){
   try {
     doc = fetchDocByRef(node.ref);
     if (doc.removed) throw 'Property has been deleted';
-    if (doc.ancestors[0].id !== node.ancestors[0].id){
+    if (doc.ancestors[0].id !== node.ancestors[0].id) {
       library = fetchDocByRef(doc.ancestors[0]);
       assertViewPermission(library, userId)
     }
-  } catch(e){
-    cache = {error: e.reason || e.message || e.toString()}
+  } catch (e) {
+    cache = { error: e.reason || e.message || e.toString() }
     writeCache(node._id, cache);
     return;
   }
   cache = {
     node: doc,
   };
-  if (library){
-    cache.library = {name: library.name};
+  if (library) {
+    cache.library = { name: library.name };
   }
   writeCache(node._id, cache);
 }
diff --git a/app/imports/client/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue b/app/imports/client/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue
index a2f03794..fa21fffd 100644
--- a/app/imports/client/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue
+++ b/app/imports/client/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue
@@ -59,7 +59,7 @@
     >
       <v-tab-item :disabled="!!forcedType">
         <property-selector
-          no-library-only-props
+          :no-library-only-props="!showLibraryOnlyProps"
           :parent-type="parentDoc && parentDoc.type"
           @select="e => type = e"
         />
@@ -228,6 +228,7 @@ export default {
       default: undefined,
     },
     hideLibraryTab: Boolean,
+    showLibraryOnlyProps: Boolean,
   },
   reactiveProvide: {
     name: 'context',
diff --git a/app/imports/client/ui/dialogStack/DialogStack.vue b/app/imports/client/ui/dialogStack/DialogStack.vue
index bd08841e..d37b4476 100644
--- a/app/imports/client/ui/dialogStack/DialogStack.vue
+++ b/app/imports/client/ui/dialogStack/DialogStack.vue
@@ -88,7 +88,7 @@
 
         // If the top dialog can't be closed with the backdrop, shake shake
         const topDialog = this.dialogs[this.dialogs.length - 1];
-        if (topDialog.data.noBackdropClose) {
+        if (topDialog?.data?.noBackdropClose) {
           this.shakeTopDialog();
           return;
         }
diff --git a/app/imports/client/ui/library/LibraryNodeDialog.vue b/app/imports/client/ui/library/LibraryNodeDialog.vue
index ee47e4fa..4b99d661 100644
--- a/app/imports/client/ui/library/LibraryNodeDialog.vue
+++ b/app/imports/client/ui/library/LibraryNodeDialog.vue
@@ -307,6 +307,7 @@ export default {
           hideLibraryTab: true,
           suggestedType,
           noBackdropClose: true,
+          showLibraryOnlyProps: true,
         },
         callback(result){
           if (!result) return;
diff --git a/app/imports/client/ui/properties/forms/ReferenceForm.vue b/app/imports/client/ui/properties/forms/ReferenceForm.vue
index 88032c03..e4afe1da 100644
--- a/app/imports/client/ui/properties/forms/ReferenceForm.vue
+++ b/app/imports/client/ui/properties/forms/ReferenceForm.vue
@@ -1,34 +1,65 @@
 <template lang="html">
-  <div class="folder-form layout justify-start wrap">
-    <property-field
-      name="Linked Property"
-      data-id="change-ref"
-      style="cursor: pointer;"
-      @click="changeReference"
+  <div class="reference-form">
+    <v-row dense>
+      <v-col cols="12">
+        <outlined-input
+          v-ripple
+          name="Linked Property"
+          class="pa-4 mb-6"
+          data-id="change-ref"
+          style="cursor: pointer;"
+          @click="changeReference"
+        > 
+          <v-progress-circular
+            v-if="linkLoading"
+            indeterminate
+          />
+          <div
+            v-else
+            class="d-flex align-center"
+          >
+            <v-icon class="mr-4">
+              mdi-vector-link
+            </v-icon>
+            <div class="flex-grow-1">
+              <tree-node-view
+                v-if="model && model.cache && model.cache.node"
+                :model="model.cache.node"
+              />
+              <div v-else>
+                {{ model.cache.node && model.cache.node.name || model.ref && model.ref.id }}
+              </div>
+              <div
+                v-if="model.cache.library && model.cache.library.name"
+                class="text-caption"
+              >
+                {{ model.cache.library && model.cache.library.name }}
+              </div>
+              <div
+                v-if="model.cache.error || errors.ref"
+                class="error--text"
+              >
+                {{ model.cache.error || errors.ref }}
+              </div>
+            </div>
+            <v-btn
+              class="ml-4"
+              icon
+              @click.stop="updateReferenceNode"
+            >
+              <v-icon>
+                mdi-refresh
+              </v-icon>
+            </v-btn>
+          </div>
+        </outlined-input>
+      </v-col>
+    </v-row>
+    <form-sections
+      v-if="$slots.default"
     >
-      <v-input
-        :label="model.cache && model.cache.node ? '' : 'Linked Property'"
-        style="overflow: hidden;"
-        readonly
-        outlined
-        persistent-hint
-        :loading="linkLoading"
-        :value="
-          model.cache.node && model.cache.node.name ||
-            model.ref && model.ref.id
-        "
-        :hint="model.cache.library && model.cache.library.name"
-        :error-messages="model.cache.error || errors.ref"
-        prepend-icon="mdi-vector-link"
-        append-icon="mdi-refresh"
-        @click:append.stop="updateReferenceNode"
-      >
-        <tree-node-view
-          v-if="model && model.cache && model.cache.node"
-          :model="model.cache.node"
-        />
-      </v-input>
-    </property-field>
+      <slot />
+    </form-sections>
   </div>
 </template>
 
@@ -36,12 +67,12 @@
   import TreeNodeView from '/imports/client/ui/properties/treeNodeViews/TreeNodeView.vue';
   import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
   import updateReferenceNode from '/imports/api/library/methods/updateReferenceNode.js';
-  import PropertyField from '/imports/client/ui/properties/viewers/shared/PropertyField.vue';
+  import OutlinedInput from '/imports/client/ui/properties/viewers/shared/OutlinedInput.vue';
 
   export default {
     components: {
       TreeNodeView,
-      PropertyField,
+      OutlinedInput,
     },
     mixins: [propertyFormMixin],
     data(){return {