refactor remove redundant attributes prop from entity form, add nice …

…transition fade out on form close

frontend/src/components/Entity.vue

@@ -71,7 +71,7 @@ export default {
     bindArgs() {
       return [
         { schema: this.activeSchema, entity: this.entity },
-        { schema: this.activeSchema, attributes: this.entity },
+        { schema: this.activeSchema, entity: this.entity },
         { objectType: "Entity", objectId: this.entity?.id },
         { schema: this.activeSchema, entitySlug: this.$route.params.entitySlug },
       ]

frontend/src/components/EntityBulkAdd.vue

@@ -1,16 +1,16 @@
 <template>
-  <div v-for="(form, index) in entityForms" :key="form.ref">
+  <template v-for="(form, index) in entityForms" :key="form.ref">
     <div :id="`form-${index}`">
       <div :class="`${entityForms.length < 2 && 'd-none'} ${index > 0 && 'mt-5 border-top border-light'} row`">
         <div class="col">
           <button type="button" :class="`btn-close float-end ${index > 0 ? 'my-3': 'mb-3'}`"
-                  @click="closeForm(form.ref)"/>
+                  @click="closeForm(`form-${index}`, form.ref)"/>
         </div>
       </div>
       <component :is="form.component" @save-all="saveAll" v-bind="form.props"
                  :ref="el => { entityFormRefs[form.ref] = el }"/>
     </div>
-  </div>
+  </template>
   <div class="container mt-2">
     <button class="btn btn-outline-secondary w-100" @click="addNewItem">
       <i class='eos-icons'>add_circle</i>
@@ -22,18 +22,20 @@
 <script setup>
 import {markRaw, ref} from "vue";
 import EntityForm from "@/components/inputs/EntityForm.vue";
+import _cloneDeep from "lodash/cloneDeep";
 
 const props = defineProps({
   schema: {
     type: Object,
     required: true
   },
-  attributes: {
+  entity: {
     type: Object,
     required: true,
   }
 });
 
+const entityData = ref(prepEntity());
 const entityForms = ref([generateEntityForm(0)]);
 const entityFormRefs = ref([]);
 
@@ -42,27 +44,32 @@ function generateEntityForm(id) {
     component: markRaw(EntityForm),
     ref: `entity-form-${id}`,
     props: {
-      attributes: props.attributes,
+      entity: entityData,
       schema: props.schema,
       batchMode: true,
+      showAttributeCheckboxes: true,
     }
   }
 }
 
 async function saveAll() {
   let successfullySaved = [];
-  const promises = Object.entries(entityFormRefs.value).map(async ref => {
-    const response = await saveSingle(ref);
-    if (response?.id) {
-      successfullySaved.push(ref[0]);
-      clearEntityForm(ref);
-    }
-  });
+  const promises = Object.entries(entityFormRefs.value)
+      .filter(ref => ref[1] !== null).map(ref => saveSingle(ref));
+  Promise.all(promises).then(responses => {
+    responses.forEach(resp => {
+      if (resp?.id) {
+        const ref = Object.entries(entityFormRefs.value)
+            .find(ref => ref[1].editEntity.slug === resp.slug);
 
-  await Promise.all(promises);
-  entityFormRefs.value = [];
-  const forms = entityForms.value.filter(e => !successfullySaved.includes(e.ref));
-  entityForms.value = forms.length ? forms : [generateEntityForm(0)];
+        successfullySaved.push(ref[0]);
+        clearEntityForm(ref);
+      }
+    });
+    entityFormRefs.value = [];
+    const forms = entityForms.value.filter(e => !successfullySaved.includes(e.ref));
+    entityForms.value = forms.length ? forms : [generateEntityForm(0)];
+  });
 }
 
 async function saveSingle(entityFormComponentRef) {
@@ -92,7 +99,25 @@ function addNewItem() {
   });
 }
 
-function closeForm(formId) {
-  entityForms.value = entityForms.value.filter(e => formId !== e.ref);
+function closeForm(formId, refName) {
+  const form = document.getElementById(formId);
+  form.style.transition = "0.5s linear all";
+  form.style.opacity = "0";
+
+  setTimeout(() => {
+    entityForms.value = entityForms.value.filter(e => refName !== e.ref);
+    entityFormRefs.value = entityFormRefs.value.filter(ref => ref[0] !== refName);
+  }, 500);
 }
+
+function prepEntity() {
+  let entityCopy = _cloneDeep(props.entity);
+  entityCopy.name = null;
+  entityCopy.slug = null;
+  delete entityCopy.id;
+  delete entityCopy.deleted;
+
+  return entityCopy;
+}
+
 </script>

frontend/src/components/inputs/EntityForm.vue

@@ -7,19 +7,19 @@
                  :required="true"/>
       <div class="d-flex justify-content-between align-items-end mt-3">
         <h3 class="align-self-start">Attributes</h3>
-        <div v-if="attributes" class="ps-3 d-flex flex-column">
+        <div v-if="showAttributeCheckboxes" class="ps-3 d-flex flex-column">
           <span class="fw-bold me-2">Values to copy:</span>
           <div>
             <div v-for="attr in schema?.attributes || []" :key="`${attr.name}-${attr.id}`"
                  class="form-check form-check-inline">
-              <label :class="{'cursor-pointer': attributes[attr.name], 'form-check-label': true}">
+              <label :class="{'cursor-pointer': entity[attr.name], 'form-check-label': true}">
                 {{ 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' : ''} form-check-input`" />
+                       :disabled="!entity[attr.name]"
+                       :class="`${entity[attr.name] ? 'cursor-pointer' : ''} form-check-input`" />
               </label>
             </div>
           </div>
@@ -130,9 +130,9 @@ export default {
       type: Boolean,
       default: false
     },
-    attributes: {
-      type: Object,
-      required: false,
+    showAttributeCheckboxes: {
+      type: Boolean,
+      default: false,
     }
   },
   inject: ["updatePendingRequests"],
@@ -184,7 +184,7 @@ export default {
       if (!this.entity) {
         this.editEntity = {name: null, slug: null};
         for (const attr of this.schema?.attributes || []) {
-          this.editEntity[attr.name] = this.attributes ? this.attributes[attr.name] : null;
+          this.editEntity[attr.name] = null;
         }
       }
       for (const attr of listAttrs) {
@@ -204,7 +204,7 @@ export default {
       if (this.entity?.schema_id && this.entity?.schema_id !== this.schema.id) {
         await this.updateSchemaMeta();
       }
-      if (this.entity && this.editEntity?.id !== this.entity?.id) {
+      if (this.entity && this.editEntity?.slug !== this.entity?.slug) {
         this.editEntity = _cloneDeep(this.entity);
       } else if (!this.entity) {
         this.prepEntity();
@@ -286,7 +286,7 @@ export default {
       }
     },
     onAttributeCopyChange(isChecked, attrName) {
-      this.editEntity[attrName] = isChecked ? this.attributes[attrName] : null;
+      this.editEntity[attrName] = isChecked ? this.entity[attrName] : null;
     }
   },
 }