infobase lock

src/components/InfobaseListItem.vue

@@ -22,11 +22,7 @@
       </template>
     </td>
     <td class="text-end">
-      <div
+      <div v-if="!url_edit && !is_locked" class="btn-group shadow" role="group">
-        v-if="!url_edit && !pending_operation"
-        class="btn-group shadow"
-        role="group"
-      >
         <button
           v-if="publicated"
           type="button"
@@ -55,24 +51,26 @@
           Публиковать
         </button>
       </div>
+      <ItemLoading v-if="is_locked" />
     </td>
   </tr>
 </template>
 
 <script>
-import { mapGetters, mapMutations } from "vuex";
+import { mapGetters, mapMutations, mapActions } from "vuex";
 
 import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
+import ItemLoading from "@/components/ItemLoading.vue";
 
 export default {
   name: "InfobaseListItem",
   components: {
     InfobaseURLEditor,
+    ItemLoading,
   },
   data: () => ({
     url_base: "http://localhost:11111",
     url_edit: false,
-    pending_operation: false,
   }),
   props: {
     index: {
@@ -95,15 +93,18 @@ export default {
     url() {
       return this.infobase.url;
     },
+    is_locked() {
+      return this.$store.getters.isInfobaseLocked(this.infobase.name);
+    },
   },
   methods: {
     ...mapMutations({
-      set_url: "setInfobaseURL",
+      //set_url: "setInfobaseURL",
       set_publication: "setInfobasePublication",
     }),
-    // ...mapActions({
+    ...mapActions({
-    //   set_url: "updateInfobaseURL",
+      set_url: "updateInfobaseURL",
-    // }),
+    }),
     add_publication() {
       let name = this.name;
       this.set_publication({ name, publicated: true });

src/components/ItemLoading.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="lds-ellipsis">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</template>
+
+<style scoped>
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 30px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 10px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: rgb(95, 54, 247);
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+</style>

src/store/modules/infobases.js

@@ -15,6 +15,17 @@ let new_infobase = (name) => ({
   publicated: false,
 });
 
+function setInfobaseLock(state, { name, lock }) {
+  let locked = state.locked_bases.includes(name);
+  if (locked === lock) return;
+  if (lock) {
+    state.locked_bases.push(name);
+  } else {
+    let idx = state.locked_bases.findIndex((x) => name === x);
+    delete state.locked_bases[idx];
+  }
+}
+
 export default {
   state: {
     publicated: [],
@@ -23,6 +34,7 @@ export default {
     error_message: "",
     loading_error: false,
     is_loading: false,
+    locked_bases: [],
   },
   mutations: {
     setLoadingStatus(state, { loading, error }) {
@@ -35,8 +47,17 @@ export default {
     setErrorMessage(state, message) {
       state.error_message = message;
     },
+    setInfobaseLock(state, { name, lock }) {
+      setInfobaseLock(state, { name, lock });
+    },
+    lockInfobase(state, name) {
+      setInfobaseLock(state, { name, lock: true });
+    },
+    unlockInfobase(state, name) {
+      setInfobaseLock(state, { name, lock: false });
+    },
     setInfobase(state, { name, infobase_new }) {
-      let idx = state.infobases.findindex((infobase) => name === infobase.name);
+      let idx = state.infobases.findIndex((infobase) => name === infobase.name);
       if (-1 === idx) {
         state.infobases.push(infobase_new);
       } else {
@@ -79,6 +100,7 @@ export default {
       }
     },
     async fetchInfobaseAvailable(ctx, { name }) {
+      ctx.commit("lockInfobase", name);
       try {
         const list = await axios.get(`${api_base}/infobases-available`);
         if (!list) {
@@ -95,9 +117,12 @@ export default {
         ctx.commit("setInfobase", { name, infobase });
       } catch (err) {
         console.error(err);
+      } finally {
+        ctx.commit("unlockInfobase", name);
       }
     },
     async fetchPublication(ctx, { name }) {
+      ctx.commit("lockInfobase", name);
       try {
         const res = await axios.get(`${api_base}/publications`);
         if (!res) {
@@ -105,6 +130,7 @@ export default {
         }
         const infobase = res.data;
         ctx.commit("setInfobase", { name, infobase });
+        ctx.commit("unlockInfobase", name);
       } catch (err) {
         if (err.response && err.response.status === 404) {
           ctx.dispatch("fetchInfobaseAvailable", { name });
@@ -117,11 +143,16 @@ export default {
         url,
         publicated: true,
       };
+
+      ctx.commit("lockInfobase", name);
+
       try {
         await axios.post(`${api_base}/publications`, data);
         ctx.commit("setInfobaseURL", { name, url });
       } catch (err) {
         ctx.commit("setErrorMessage", `Ошибка обновления URL для базы ${name}`);
+      } finally {
+        ctx.commit("unlockInfobase", name);
       }
     },
   },
@@ -132,6 +163,10 @@ export default {
     allInfobases(state) {
       return state.infobases;
     },
+    getLockedInfobases(state) {
+      return state.locked_bases;
+    },
+    isInfobaseLocked: (state) => (name) => state.locked_bases.includes(name),
     getInfobaseByName: (state) => (name) =>
       state.infobases.find((infobase) => name === infobase.name),
     isLoading(state) {

test/mock/api/db.json

@@ -1,21 +1,62 @@
 {
-    "index": ["infobases-all", "infobases-available", "publications", "module", "config", "config-test", "apache-restart"],
+  "index": [
-    "infobases-available":["test1", "accounting", "bpdemo", "hrm31", "Trade-2021"],
+    "infobases-all",
+    "infobases-available",
+    "publications",
+    "module",
+    "config",
+    "config-test",
+    "apache-restart"
+  ],
+  "infobases-available": [
+    "test1",
+    "accounting",
+    "bpdemo",
+    "hrm31",
+    "Trade-2021"
+  ],
   "infobases-all": [
-        {"name": "test1", "url": "", "publicated": false},
+    {
-        {"name": "accounting", "url": "/acc", "publicated": true},
+      "name": "test1",
-        {"name": "bpdemo", "url": "", "publicated": false},
+      "url": "",
-        {"name": "hrm31", "url": "/hrm", "publicated": true},
+      "publicated": false
-        {"name": "Trade-2021", "url": "", "publicated": false}
+    },
+    {
+      "name": "accounting",
+      "url": "/acc",
+      "publicated": true
+    },
+    {
+      "name": "bpdemo",
+      "url": "",
+      "publicated": false
+    },
+    {
+      "name": "hrm31",
+      "url": "/hrm",
+      "publicated": true
+    },
+    {
+      "name": "Trade-2021",
+      "url": "",
+      "publicated": false
+    }
   ],
   "publications": [
-        {"name": "accounting", "url": "/acc", "publicated": true},
+    {
-        {"name": "hrm31", "url": "/hrm", "publicated": true}
+      "name": "accounting",
+      "url": "/acc",
+      "publicated": true
+    },
+    {
+      "name": "hrm31",
+      "url": "/hrm",
+      "publicated": true
+    }
   ],
   "module": {},
   "config": {
     "url_prefix": "http://localhost"
-
   },
   "config-test": {
     "is_apache_cfg_valid": true,