url editor component

src/components/InfobaseList.vue

@@ -5,14 +5,16 @@
       <span class="fs-1">&#9940;</span><br />
       <h3>Ошибка загрузки</h3>
     </div>
-    <div v-else-if="is_loading">
+    <div v-else-if="is_loading" class="container">
       <div class="spinner-border text-primary" role="status">
         <span class="visually-hidden">Loading...</span>
       </div>
     </div>
-    <div v-else-if="0 == infobases.length">
+    <div v-else-if="0 == infobases.length" class="container">
       <div class="alert alert-warning" role="alert">
-        <svg class="m-2" width="32" height="32"><use xlink:href="#exclamation-triangle-fill--sprite"></use></svg>
+        <svg class="m-2" width="32" height="32">
+          <use xlink:href="#exclamation-triangle-fill--sprite"></use>
+        </svg>
         <span>Нет ни одной базы</span>
       </div>
     </div>
@@ -31,33 +33,14 @@
           <td>{{ infobase.name }}</td>
           <td>
             <template v-if="infobase.publicated">
-              <form
+              <InfobaseURLEditor
                 v-if="is_edit_url_active(infobase.name)"
-                @submit.prevent="apply_edit_url(infobase.name)"
+                :infobase_name="infobase.name"
-              >
+                :key="infobase.name"
-                <div class="btn-group shadow rounded-start" role="group">
+                :init_url="infobase.url"
-                  <input
+                @submit="apply_edit_url"
-                    type="text"
+                @cancel="cancel_edit_url"
-                    v-model="url_edit[infobase.name]"
-                    class="rounded-start"
               />
-                  <button
-                    type="submit"
-                    class="btn btn-sm btn-primary"
-                    hint="Принять"
-                  >
-                    <svg width="16" height="16"><use xlink:href="#check-lg--sprite"></use></svg>
-                  </button>
-                  <button
-                    type="button"
-                    class="btn btn-sm btn-outline-secondary"
-                    @click="cancel_edit_url(infobase.name)"
-                    hint="Отменить"
-                  >
-                    <svg width="16" height="16"><use xlink:href="#x-lg--sprite"></use></svg>
-                  </button>
-                </div>
-              </form>
               <a v-else v-bind:href="url_base + infobase.url" target="blank">{{
                 infobase.url
               }}</a>
@@ -105,22 +88,24 @@
 </template>
 
 <script>
+import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite";
 import axios from "axios";
 
-import "bootstrap-icons/icons/check-lg.svg?sprite"
+import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
-import "bootstrap-icons/icons/x-lg.svg?sprite"
-import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite"
 
 const api_base = "http://localhost:17653/api/v1";
 
 export default {
   name: "InfobaseList",
+  components: {
+    InfobaseURLEditor,
+  },
   data: () => ({
     url_base: "http://localhost:11111",
     is_loading: true,
     loading_error: false,
     infobases: [],
-    url_edit: {},
+    url_editors: {},
   }),
   methods: {
     publicate(name) {
@@ -145,17 +130,17 @@ export default {
       let infobase = this.infobases.find((infobase) => name === infobase.name);
       if (infobase === undefined) return;
 
-      this.url_edit[name] = infobase.url;
+      this.url_editors[name] = true;
     },
-    cancel_edit_url(name) {
+    cancel_edit_url({name}) {
-      delete this.url_edit[name];
+      delete this.url_editors[name];
     },
-    apply_edit_url(name) {
+    apply_edit_url({name, url}) {
-      this.set_url(name, this.url_edit[name]);
+      this.set_url(name, url);
-      delete this.url_edit[name];
+      delete this.url_editors[name];
     },
     is_edit_url_active(name) {
-      return name in this.url_edit;
+      return name in this.url_editors;
     },
   },
   async mounted() {

src/components/InfobaseURLEditor.vue

@@ -0,0 +1,71 @@
+<template>
+  <form @submit.prevent="submit">
+    <div class="btn-group shadow rounded-start" role="group">
+      <input
+        type="text"
+        v-model="url"
+        class="rounded-start"
+      />
+      <button type="submit" class="btn btn-sm btn-primary" hint="Принять">
+        <svg width="16" height="16">
+          <use xlink:href="#check-lg--sprite"></use>
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="btn btn-sm btn-outline-secondary"
+        @click="cancel"
+        hint="Отменить"
+      >
+        <svg width="16" height="16"><use xlink:href="#x-lg--sprite"></use></svg>
+      </button>
+    </div>
+  </form>
+</template>
+
+<script>
+import "bootstrap-icons/icons/check-lg.svg?sprite";
+import "bootstrap-icons/icons/x-lg.svg?sprite";
+
+export default {
+  name: "InfobaseURLEditor",
+  data() {
+    return {
+      url: this.init_url,
+    };
+  },
+  props: {
+    infobase_name: {
+      type: String,
+      required: true,
+    },
+    init_url: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: {
+    submit: ({ name, url }) => {
+      if (name && url ) {
+        return true;
+      } else {
+        console.warn("Invalid submit event payload!");
+        return false;
+      }
+    },
+    cancel: null,
+  },
+  methods: {
+    submit() {
+      if (this.url === this.init_url) {
+          this.cancel()
+          return;
+      }
+      this.$emit("submit", { name: this.infobase_name, url: this.url });
+    },
+    cancel() {
+      this.$emit("cancel", { name: this.infobase_name });
+    },
+  },
+};
+</script>