Entity Bulk Add (copy Attributes) (#196)

frontend/src/components/Entity.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import {shallowRef} from "vue";
+import {shallowRef, markRaw} from "vue";
 import BaseLayout from "@/components/layout/BaseLayout";
 import EntityForm from "@/components/inputs/EntityForm";
 import Changes from "@/components/change_review/Changes";
@@ -45,7 +45,7 @@ export default {
         },
         {
           name: "Bulk Add (copy Attributes)",
-          component: EntityBulkAdd,
+          component: markRaw(EntityBulkAdd),
           icon: "add_circle",
           tooltip: "Copy over entity attributes to new entities"
         },

frontend/src/components/EntityBulkAdd.vue

@@ -1,10 +1,16 @@
 <template>
-  <div v-for="num in entityFormComponentsCountRange" :key="`ef-${num}`">
-    <EntityForm :ref="`entity-form-${num}`" :schema="schema"
-                :attributes="attributes" :batch-mode="true" @save-all="saveAll"/>
+  <div v-for="(form, index) in entityForms" :key="form.props.id">
+    <div :id="`form-${index}`">
+      <div v-if="index > 0" class="row mt-5 border-top border-light">
+        <div class="col">
+          <button type="button" class="btn-close float-end mt-2" @click="closeForm(form.props.id)"/>
+        </div>
+      </div>
+      <component :is="form.component" @save-all="saveAll" v-bind="form.props" :ref="form.props.id"/>
+    </div>
   </div>
   <div class="container mt-2">
-    <button class="btn btn-outline-secondary w-100" @click="addEntityForm">
+    <button class="btn btn-outline-secondary w-100" @click="addNewItem">
       <i class='eos-icons'>add_circle</i>
       Add more
     </button>
@@ -13,6 +19,7 @@
 
 <script>
 import EntityForm from "@/components/inputs/EntityForm.vue";
+import {markRaw} from "vue";
 
 export default {
   name: "EntityBulkAdd",
@@ -29,24 +36,45 @@ export default {
   },
   data() {
     return {
-      entityFormComponentCount: 1,
+      entityForms: [this.generateEntityForm()]
     }
   },
-  computed: {
-    entityFormComponentsCountRange() {
-      return [...Array(this.entityFormComponentCount).keys()];
-    },
-  },
   methods: {
     async saveAll() {
+      let successIds = [];
       const promises = Object.entries(this.$refs)
           .filter(x => x[0].startsWith("entity-form-"))
-          .map(x => x[1][0].createEntity());
+          .map(async x => {
+            const resp = await x[1][0].createEntity();
+            if (resp?.id) {
+              successIds.push(x[0]);
+            }
+          });
       await Promise.all(promises);
+      this.entityForms = this.entityForms.filter(e => !successIds.includes(e.props.id));
+    },
+    async addEntityForm() {
+      this.entityForms.push(this.generateEntityForm());
     },
-    addEntityForm() {
-      ++this.entityFormComponentCount;
+    addNewItem() {
+      this.addEntityForm().then(() => {
+        document.getElementById(`form-${this.entityForms.length - 1}`).scrollIntoView();
+      });
     },
+    generateEntityForm() {
+      return {
+        component: markRaw(EntityForm),
+        props: {
+          id: `entity-form-${(this.entityForms && this.entityForms.length) || 0}`,
+          attributes: this.attributes,
+          schema: this.schema,
+          batchMode: true,
+        }
+      }
+    },
+    closeForm(formId) {
+      this.entityForms = this.entityForms.filter(e => formId !== e.props.id);
+    }
   }
 }
 

frontend/src/components/inputs/EntityForm.vue

@@ -9,14 +9,14 @@
       <div v-if="attributes" class="border-bottom border-top border-light my-2">
         <div class="fw-bold my-2">Values to copy:</div>
         <div v-for="attr in schema?.attributes || []" :key="`${attr.name}-${attr.id}`" class="mb-1">
-          <label :class="`${attributes[attr.name] ? 'cursor-pointer' : ''}`">
+          <label :class="attributes[attr.name] ? 'cursor-pointer' : ''">
             {{ attr.name }}
             <sup v-if="requiredAttrs.includes(attr.name)" class="text-danger me-1"
                  data-bs-toggle="tooltip" title="This value is required">*</sup>
             <input type="checkbox" @change="onAttributeCopyChange($event.target.checked, attr.name)"
                    :checked="editEntity[attr.name]"
                    :disabled="!attributes[attr.name]"
-                   :class="`${attributes[attr.name] ? 'cursor-pointer' : ''}`" />
+                   :class="attributes[attr.name] ? 'cursor-pointer' : ''" />
           </label>
         </div>
       </div>
@@ -128,6 +128,10 @@ export default {
     attributes: {
       type: Object,
       required: false,
+    },
+    id: {
+      type: String,
+      required: false
     }
   },
   inject: ["updatePendingRequests"],