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">
+    <div v-if="isLoadingError" class="m-4 alert alert-danger d-flex align-items-center" role="alert">
-      <span class="fs-1">&#9940;</span><br />
+      <svg
-      <h3>Ошибка загрузки</h3>
+        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 });
     },

src/store/modules/infobases.js

@@ -9,11 +9,18 @@ const LoadingStatus = Object.freeze({
   Error: { loading: false, error: true },
 });
 
+let new_infobase = (name) => ({
+  name,
+  url: "",
+  publicated: false,
+});
+
 export default {
   state: {
     publicated: [],
     available: [],
     infobases: [],
+    error_message: "",
     loading_error: false,
     is_loading: false,
   },
@@ -25,10 +32,20 @@ export default {
     setInfobases(state, infobases) {
       state.infobases = infobases;
     },
-    setInfobase(state, { name, infobase }) {
+    setErrorMessage(state, message) {
+      state.error_message = message;
+    },
+    setInfobase(state, { name, infobase_new }) {
       let idx = state.infobases.findindex((infobase) => name === infobase.name);
-      if (-1 === idx) return;
+      if (-1 === idx) {
-      state.infobases[idx] = infobase;
+        state.infobases.push(infobase_new);
+      } else {
+        if (null == infobase_new) {
+          delete state.infobases[idx];
+        } else {
+          state.infobases[idx] = infobase_new;
+        }
+      }
     },
     setInfobaseURL(state, { name, url }) {
       let infobase = state.infobases.find((infobase) => name === infobase.name);
@@ -61,8 +78,57 @@ export default {
         ctx.commit("setLoadingStatus", LoadingStatus.Error);
       }
     },
+    async fetchInfobaseAvailable(ctx, { name }) {
+      try {
+        const list = await axios.get(`${api_base}/infobases-available`);
+        if (!list) {
+          return;
+        }
+        if (!Array.isArray(list)) {
+          return;
+        }
+        const available = name in list;
+        let infobase = null;
+        if (available) {
+          infobase = new_infobase(name);
+        }
+        ctx.commit("setInfobase", { name, infobase });
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    async fetchPublication(ctx, { name }) {
+      try {
+        const res = await axios.get(`${api_base}/publications`);
+        if (!res) {
+          return;
+        }
+        const infobase = res.data;
+        ctx.commit("setInfobase", { name, infobase });
+      } catch (err) {
+        if (err.response && err.response.status === 404) {
+          ctx.dispatch("fetchInfobaseAvailable", { name });
+        }
+      }
+    },
+    async updateInfobaseURL(ctx, { name, url }) {
+      let data = {
+        ...new_infobase(name),
+        url,
+        publicated: true,
+      };
+      try {
+        await axios.post(`${api_base}/publications`, data);
+        ctx.commit("setInfobaseURL", { name, url });
+      } catch (err) {
+        ctx.commit("setErrorMessage", `Ошибка обновления URL для базы ${name}`);
+      }
+    },
   },
   getters: {
+    errorMessage(state) {
+      return state.error_message;
+    },
     allInfobases(state) {
       return state.infobases;
     },