config file + tooltips

src/components/InfobaseList.vue

@@ -77,7 +77,6 @@ export default {
     InfobaseListItem,
   },
   data: () => ({
-    url_base: "http://localhost:11111",
     is_loading: true,
     loading_error: false,
     infobases: [],

src/components/InfobaseListItem.vue

@@ -15,9 +15,9 @@
         <a
           class="text-break"
           v-if="!url_edit"
-          v-bind:href="url_base + url"
+          v-bind:href="url_full"
           target="blank"
-          >{{ infobase.url }}</a
+          >{{ url }}</a
         >
       </template>
     </td>
@@ -29,6 +29,7 @@
           class="btn btn-warning"
           @click="start_edit_url"
           title="Изменить URL"
+          v-tooltip:left
         >
           Изменить
         </button>
@@ -38,6 +39,7 @@
           class="btn btn-danger"
           @click="remove_publication"
           title="Снять с публикации"
+          v-tooltip:top
         >
           Отменить
         </button>
@@ -47,6 +49,7 @@
           class="btn btn-primary"
           @click="add_publication"
           title="Опубликовать базу"
+          v-tooltip:left
         >
           Публиковать
         </button>
@@ -57,11 +60,15 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations, mapActions } from "vuex";
+import { mapGetters, mapActions } from "vuex";
 
 import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
 import ItemLoading from "@/components/ItemLoading.vue";
 
+import config from "@/config.js";
+
+const url_base = config.publication.url_base;
+
 export default {
   name: "InfobaseListItem",
   components: {
@@ -69,7 +76,6 @@ export default {
     ItemLoading,
   },
   data: () => ({
-    url_base: "http://localhost:11111",
     url_edit: false,
   }),
   props: {
@@ -93,15 +99,14 @@ export default {
     url() {
       return this.infobase.url;
     },
+    url_full() {
+      return `${url_base}${this.infobase.url}`;
+    },
     is_locked() {
       return this.$store.getters.isInfobaseLocked(this.infobase.name);
     },
   },
   methods: {
-    ...mapMutations({
-      //set_url: "setInfobaseURL",
-      //set_publication: "setInfobasePublication",
-    }),
     ...mapActions({
       set_url: "updateInfobaseURL",
     }),

src/components/InfobaseURLEditor.vue

@@ -6,6 +6,7 @@
         type="submit"
         class="btn btn-sm btn-outline-primary"
         title="Принять"
+        v-tooltip:top
       >
         <svg width="16" height="16">
           <use xlink:href="#check-lg--sprite"></use>
@@ -16,6 +17,7 @@
         class="btn btn-sm btn-outline-secondary"
         @click="cancel"
         title="Отменить"
+        v-tooltip:top
       >
         <svg width="16" height="16"><use xlink:href="#x-lg--sprite"></use></svg>
       </button>

src/components/ItemLoading.vue

@@ -7,38 +7,7 @@
   </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(37, 192, 23);
-  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;
-}
+<style lang="less" scoped>
 @keyframes lds-ellipsis1 {
   0% {
     transform: scale(0);
@@ -63,4 +32,35 @@
     transform: translate(24px, 0);
   }
 }
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 30px;
+  div {
+    position: absolute;
+    top: 10px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: rgb(37, 192, 23);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    &:nth-child(1) {
+      left: 8px;
+      animation: lds-ellipsis1 0.6s infinite;
+    }
+    &:nth-child(2) {
+      left: 8px;
+      animation: lds-ellipsis2 0.6s infinite;
+    }
+    &:nth-child(3) {
+      left: 32px;
+      animation: lds-ellipsis2 0.6s infinite;
+    }
+    &:nth-child(4) {
+      left: 56px;
+      animation: lds-ellipsis3 0.6s infinite;
+    }
+  }
+}
 </style>