send basemaps synchronously to keep creation order in backend

src/store/modules/map.store.js

@@ -121,25 +121,29 @@ const map = {
     },
 
     async SAVE_BASEMAPS({ state, rootState, dispatch }, newBasemapIds) {
-      const DJANGO_API_BASE = this.state.configuration.VUE_APP_DJANGO_API_BASE;
-      function postOrPut(basemap) {
-        basemap['project'] = rootState.projects.project.slug;
-        if (newBasemapIds.includes(basemap.id)) {
-          return axios
-            .post(`${DJANGO_API_BASE}base-maps/`, basemap)
-            .then((response) => response)
-            .catch((error) => {
-              console.error(error);
-              return error;
-            });
-        } else {
-          return axios
-            .put(`${DJANGO_API_BASE}base-maps/${basemap.id}/`, basemap)
-            .then((response) => response)
-            .catch((error) => {
-              console.error(error);
-              return error;
-            });
+      //* send new basemaps synchronously to create their ids in the order they were created in the form
+      let promisesResult = [];
+      function postOrPut(basemapsToSend) {
+        if (basemapsToSend.length > 0) {
+          let basemap = basemapsToSend.shift(); //* remove and return first item in array
+          basemap['project'] = rootState.projects.project.slug;
+          let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}base-maps/`;
+          if (!newBasemapIds.includes(basemap.id)) url += `${basemap.id}/`;
+          promisesResult.push(
+            axios({
+              url,
+              method: newBasemapIds.includes(basemap.id) ? 'POST' : 'PUT',
+              data: basemap,
+            })
+              .then((response) => {
+                postOrPut(basemapsToSend);
+                return response;
+              })
+              .catch((error) => {
+                postOrPut(basemapsToSend);
+                return error;
+              })
+          );
         }
       }
 
@@ -149,14 +153,11 @@ const map = {
           .then((response) => response);
       }
 
-      const promisesResult = await Promise.all(
-        [
-          ...state.basemaps.map((basemap) => postOrPut(basemap)),
-          ...state.basemapsToDelete.map((basemapId) => deleteBMap(basemapId))
-        ]
-      );
+      postOrPut([...state.basemaps]);
+      //* delete basemaps
+      const deletedResult = await Promise.all(state.basemapsToDelete.map((basemapId) => deleteBMap(basemapId)));
       state.basemapsToDelete = [];
-      return promisesResult;
+      return [...promisesResult, ...deletedResult];
     },
 
     DELETE_BASEMAP({ commit }, basemapId) {