resolve suggestions

SUSE · Apr 17, 2024 · 6712fb3 · 6712fb3
1 parent 8185a8c
commit 6712fb3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 30 deletions.
diff --git 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
@@ -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>
diff --git 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"],