list item component

src/components/InfobaseList.vue

@@ -1,20 +1,25 @@
 <template>
   <div class="container-fluid">
     <div v-if="errorMessage" class="container">
-    <div class="alert alert-danger d-flex align-items-center" role="alert">
+      <div class="alert alert-danger d-flex align-items-center" role="alert">
-      <svg
+        <svg
-        class="bi flex-shrink-0 me-2"
+          class="bi flex-shrink-0 me-2"
-        width="24"
+          width="24"
-        height="24"
+          height="24"
-        role="img"
+          role="img"
-        aria-label="Danger:"
+          aria-label="Danger:"
-      >
+        >
-        <use xlink:href="#exclamation-triangle-fill--sprite" />
+          <use xlink:href="#exclamation-triangle-fill--sprite" />
-      </svg>
+        </svg>
-      <span v-text="errorMessage"></span>
+        <span v-text="errorMessage"></span>
-    </div> </div>
+      </div>
+    </div>
     <h2>Список баз</h2>
-    <div v-if="isLoadingError" class="m-4 alert alert-danger d-flex align-items-center" role="alert">
+    <div
+      v-if="isLoadingError"
+      class="m-4 alert alert-danger d-flex align-items-center"
+      role="alert"
+    >
       <svg
         class="bi flex-shrink-0 me-2"
         width="32"
@@ -49,64 +54,12 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(infobase, index) in allInfobases" :key="infobase.name">
+        <InfobaseListItem
-          <th class="text-end" scope="row">{{ index + 1 }}</th>
+          v-for="(infobase, index) in allInfobases"
-          <td class="text-center">{{ infobase.name }}</td>
+          :key="infobase.name"
-          <td class="text-start">
+          :infobase="infobase"
-            <template v-if="infobase.publicated">
+          :index="index"
-              <InfobaseURLEditor
+        />
-                v-if="is_edit_url_active(infobase.name)"
-                :infobase_name="infobase.name"
-                :key="infobase.name"
-                :init_url="infobase.url"
-                @submit="apply_edit_url"
-                @cancel="cancel_edit_url"
-              />
-              <a
-                class="text-break"
-                v-if="!is_edit_url_active(infobase.name)"
-                v-bind:href="url_base + infobase.url"
-                target="blank"
-                >{{ infobase.url }}</a
-              >
-            </template>
-          </td>
-          <td class="text-end">
-            <div
-              v-if="!is_edit_url_active(infobase.name)"
-              class="btn-group shadow"
-              role="group"
-            >
-              <button
-                v-if="infobase.publicated"
-                type="button"
-                class="btn btn-warning"
-                @click="start_edit_url(infobase.name)"
-                title="Изменить URL"
-              >
-                Изменить
-              </button>
-              <button
-                v-if="infobase.publicated"
-                type="button"
-                class="btn btn-danger"
-                @click="remove_publication(infobase.name)"
-                title="Снять с публикации"
-              >
-                Отменить
-              </button>
-              <button
-                v-if="!infobase.publicated"
-                type="button"
-                class="btn btn-primary"
-                @click="add_publication(infobase.name)"
-                title="Опубликовать базу"
-              >
-                Публиковать
-              </button>
-            </div>
-          </td>
-        </tr>
       </tbody>
     </table>
   </div>
@@ -114,21 +67,20 @@
 
 <script>
 import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite";
-import { mapGetters, mapMutations, mapActions } from "vuex";
+import { mapGetters } from "vuex";
 
-import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
+import InfobaseListItem from "@/components/InfobaseListItem.vue";
 
 export default {
   name: "InfobaseList",
   components: {
-    InfobaseURLEditor,
+    InfobaseListItem,
   },
   data: () => ({
     url_base: "http://localhost:11111",
     is_loading: true,
     loading_error: false,
     infobases: [],
-    url_editors: {},
   }),
   computed: mapGetters([
     "allInfobases",
@@ -137,37 +89,7 @@ export default {
     "isLoadingError",
     "errorMessage",
   ]),
-  methods: {
+  methods: {},
-    ...mapMutations({
-      set_url: "setInfobaseURL",
-      set_publication: "setInfobasePublication",
-    }),
-    ...mapActions({
-      set_url: "updateInfobaseURL",
-    }),
-    add_publication(name) {
-      this.set_publication({ name, publicated: true });
-    },
-    remove_publication(name) {
-      this.set_publication({ name, publicated: false });
-    },
-    start_edit_url(name) {
-      let infobase = this.getInfobaseByName(name);
-      if (infobase === undefined) return;
-
-      this.url_editors[name] = true;
-    },
-    cancel_edit_url({ name }) {
-      delete this.url_editors[name];
-    },
-    apply_edit_url({ name, url }) {
-      this.set_url({ name, url });
-      delete this.url_editors[name];
-    },
-    is_edit_url_active(name) {
-      return name in this.url_editors;
-    },
-  },
   async mounted() {
     this.$store.dispatch("fetchInfobases");
   },

src/components/InfobaseListItem.vue

@@ -0,0 +1,127 @@
+<template>
+  <tr>
+    <th class="text-end" scope="row">{{ index + 1 }}</th>
+    <td class="text-center">{{ name }}</td>
+    <td class="text-start">
+      <template v-if="publicated">
+        <InfobaseURLEditor
+          v-if="url_edit"
+          :infobase_name="name"
+          :key="name"
+          :init_url="url"
+          @submit="apply_edit_url"
+          @cancel="cancel_edit_url"
+        />
+        <a
+          class="text-break"
+          v-if="!url_edit"
+          v-bind:href="url_base + url"
+          target="blank"
+          >{{ infobase.url }}</a
+        >
+      </template>
+    </td>
+    <td class="text-end">
+      <div
+        v-if="!url_edit && !pending_operation"
+        class="btn-group shadow"
+        role="group"
+      >
+        <button
+          v-if="publicated"
+          type="button"
+          class="btn btn-warning"
+          @click="start_edit_url"
+          title="Изменить URL"
+        >
+          Изменить
+        </button>
+        <button
+          v-if="publicated"
+          type="button"
+          class="btn btn-danger"
+          @click="remove_publication"
+          title="Снять с публикации"
+        >
+          Отменить
+        </button>
+        <button
+          v-if="!publicated"
+          type="button"
+          class="btn btn-primary"
+          @click="add_publication"
+          title="Опубликовать базу"
+        >
+          Публиковать
+        </button>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+
+import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
+
+export default {
+  name: "InfobaseListItem",
+  components: {
+    InfobaseURLEditor,
+  },
+  data: () => ({
+    url_base: "http://localhost:11111",
+    url_edit: false,
+    pending_operation: false,
+  }),
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+    infobase: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters(["getInfobaseByName"]),
+    name() {
+      return this.infobase.name;
+    },
+    publicated() {
+      return this.infobase.publicated;
+    },
+    url() {
+      return this.infobase.url;
+    },
+  },
+  methods: {
+    ...mapMutations({
+      set_url: "setInfobaseURL",
+      set_publication: "setInfobasePublication",
+    }),
+    // ...mapActions({
+    //   set_url: "updateInfobaseURL",
+    // }),
+    add_publication() {
+      let name = this.name;
+      this.set_publication({ name, publicated: true });
+    },
+    remove_publication() {
+      let name = this.name;
+      this.set_publication({ name, publicated: false });
+    },
+    start_edit_url() {
+      this.url_edit = true;
+    },
+    cancel_edit_url() {
+      this.url_edit = false;
+    },
+    apply_edit_url({ name, url }) {
+      this.set_url({ name, url });
+      this.url_edit = false;
+    },
+  },
+};
+</script>