infobase lock

src/components/InfobaseListItem.vue

@@ -22,11 +22,7 @@
       </template>
     </td>
     <td class="text-end">
-      <div
-        v-if="!url_edit && !pending_operation"
-        class="btn-group shadow"
-        role="group"
-      >
+      <div v-if="!url_edit && !is_locked" 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({
-    //   set_url: "updateInfobaseURL",
-    // }),
+    ...mapActions({
+      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>