From 6712fb32300567b1a045b792d721442a3a428a8e Mon Sep 17 00:00:00 2001
From: Teodora Pavlova <27234545+TeodoraPavlova@users.noreply.github.com>
Date: Wed, 17 Apr 2024 13:59:47 +0300
Subject: [PATCH] resolve suggestions

---
 frontend/src/components/Entity.vue            |  2 +-
 frontend/src/components/EntityBulkAdd.vue     | 56 ++++++++++---------
 frontend/src/components/inputs/EntityForm.vue |  4 --
 3 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/Entity.vue b/frontend/src/components/Entity.vue
index ab2e112..08f7737 100644
--- a/frontend/src/components/Entity.vue
+++ b/frontend/src/components/Entity.vue
@@ -26,7 +26,7 @@ import EntityForm from "@/components/inputs/EntityForm";
 import Changes from "@/components/change_review/Changes";
 import Tabbing from "@/components/layout/Tabbing";
 import PermissionList from "@/components/auth/PermissionList";
-import EntityBulkAdd from "@/components/EntityBulkAdd.vue";
+import EntityBulkAdd from "@/components/EntityBulkAdd";
 
 export default {
   name: "Entity",
diff --git a/frontend/src/components/EntityBulkAdd.vue b/frontend/src/components/EntityBulkAdd.vue
index d513191..4fed7e4 100644
--- a/frontend/src/components/EntityBulkAdd.vue
+++ b/frontend/src/components/EntityBulkAdd.vue
@@ -1,14 +1,14 @@
 <template>
-  <div v-for="(form, index) in entityForms" :key="form.props.id">
+  <div 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.props.id)"/>
+                  @click="closeForm(form.ref)"/>
         </div>
       </div>
       <component :is="form.component" @save-all="saveAll" v-bind="form.props"
-                 :ref="el => { refs[`entity-form-${index}`] = el }"/>
+                 :ref="el => { entityFormRefs[form.ref] = el }"/>
     </div>
   </div>
   <div class="container mt-2">
@@ -19,12 +19,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'EntityBulkAdd'
-}
-</script>
-
 <script setup>
 import {markRaw, ref} from "vue";
 import EntityForm from "@/components/inputs/EntityForm.vue";
@@ -41,13 +35,13 @@ const props = defineProps({
 });
 
 const entityForms = ref([generateEntityForm(0)]);
-const refs = ref([]);
+const entityFormRefs = ref([]);
 
 function generateEntityForm(id) {
   return {
     component: markRaw(EntityForm),
+    ref: `entity-form-${id}`,
     props: {
-      id: `entity-form-${id}`,
       attributes: props.attributes,
       schema: props.schema,
       batchMode: true,
@@ -56,26 +50,38 @@ function generateEntityForm(id) {
 }
 
 async function saveAll() {
-  let successIds = [];
-  const promises = Object.entries(refs.value).map(async x => {
-    const refName = x[0];
-    const component = x[1];
-
-    if (refName && component) {
-      const resp = await component.createEntity();
-      if (resp?.id) {
-        successIds.push(refName);
-        component.editEntity.name = null;
-        component.editEntity.slug = null;
-      }
+  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);
     }
   });
 
   await Promise.all(promises);
-  const forms = entityForms.value.filter(e => !successIds.includes(e.props.id));
+  entityFormRefs.value = [];
+  const forms = entityForms.value.filter(e => !successfullySaved.includes(e.ref));
   entityForms.value = forms.length ? forms : [generateEntityForm(0)];
 }
 
+async function saveSingle(entityFormComponentRef) {
+  const entityForm = entityFormComponentRef[1];
+
+  if (entityForm) {
+    return await entityForm.createEntity();
+  }
+}
+
+function clearEntityForm(entityFormComponentRef) {
+  const entityForm = entityFormComponentRef[1];
+
+  if (entityForm) {
+    entityForm.editEntity.name = null;
+    entityForm.editEntity.slug = null;
+  }
+}
+
 async function addEntityForm() {
   entityForms.value.push(generateEntityForm(entityForms.value.length));
 }
@@ -87,6 +93,6 @@ function addNewItem() {
 }
 
 function closeForm(formId) {
-  entityForms.value = entityForms.value.filter(e => formId !== e.props.id);
+  entityForms.value = entityForms.value.filter(e => formId !== e.ref);
 }
 </script>
\ No newline at end of file
diff --git a/frontend/src/components/inputs/EntityForm.vue b/frontend/src/components/inputs/EntityForm.vue
index 96aad97..446487f 100644
--- a/frontend/src/components/inputs/EntityForm.vue
+++ b/frontend/src/components/inputs/EntityForm.vue
@@ -128,10 +128,6 @@ export default {
     attributes: {
       type: Object,
       required: false,
-    },
-    id: {
-      type: String,
-      required: false
     }
   },
   inject: ["updatePendingRequests"],