actions & errors

src/components/InfobaseList.vue

@@ -1,9 +1,30 @@
 <template>
   <div class="container-fluid">
+    <div v-if="errorMessage" class="container">
+    <div class="alert alert-danger d-flex align-items-center" role="alert">
+      <svg
+        class="bi flex-shrink-0 me-2"
+        width="24"
+        height="24"
+        role="img"
+        aria-label="Danger:"
+      >
+        <use xlink:href="#exclamation-triangle-fill--sprite" />
+      </svg>
+      <span v-text="errorMessage"></span>
+    </div> </div>
     <h2>Список баз</h2>
-    <div v-if="isLoadingError" class="text-danger m-4">
-      <span class="fs-1">&#9940;</span><br />
-      <h3>Ошибка загрузки</h3>
+    <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"
+        height="32"
+        role="img"
+        aria-label="Danger:"
+      >
+        <use xlink:href="#exclamation-triangle-fill--sprite" />
+      </svg>
+      <span>Ошибка загрузки</span>
     </div>
     <div v-else-if="isLoading" class="container">
       <div class="spinner-border text-primary" role="status">
@@ -93,7 +114,7 @@
 
 <script>
 import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite";
-import { mapGetters, mapMutations } from "vuex";
+import { mapGetters, mapMutations, mapActions } from "vuex";
 
 import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
 
@@ -114,12 +135,16 @@ export default {
     "getInfobaseByName",
     "isLoading",
     "isLoadingError",
+    "errorMessage",
   ]),
   methods: {
     ...mapMutations({
       set_url: "setInfobaseURL",
       set_publication: "setInfobasePublication",
     }),
+    ...mapActions({
+      set_url: "updateInfobaseURL",
+    }),
     add_publication(name) {
       this.set_publication({ name, publicated: true });
     },