pub1c-web.frontend/src/components/InfobaseList.vue

<template>
  <div>
    <h2>Список баз</h2>
    <div v-if="loading_error" class="text-danger m-4">
      <span class="fs-1">&#9940;</span><br />
      <h3>Ошибка загрузки</h3>
    </div>
    <div v-else-if="is_loading">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
    <div v-else-if="0 == infobases.length">
      <div class="alert alert-warning" role="alert">
        <svg class="m-2" width="32" height="32"><use xlink:href="#exclamation-triangle-fill--sprite"></use></svg>
        <span>Нет ни одной базы</span>
      </div>
    </div>
    <table v-else class="table table-striped">
      <thead>
        <tr>
          <th scope="col" class="col">#</th>
          <th scope="col" class="col-lg-6">Имя</th>
          <th scope="col" class="col">Ссылка</th>
          <th scope="col" class="col">Действия</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(infobase, index) in infobases" :key="infobase.name">
          <th scope="row">{{ index + 1 }}</th>
          <td>{{ infobase.name }}</td>
          <td>
            <template v-if="infobase.publicated">
              <form
                v-if="is_edit_url_active(infobase.name)"
                @submit.prevent="apply_edit_url(infobase.name)"
              >
                <div class="btn-group shadow rounded-start" role="group">
                  <input
                    type="text"
                    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>
            </template>
          </td>
          <td>
            <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)"
                hint="Изменить URL"
              >
                Изменить
              </button>
              <button
                v-if="infobase.publicated"
                type="button"
                class="btn btn-danger"
                @click="remove_publication(infobase.name)"
                hint="Снять с публикации"
              >
                Отменить
              </button>
              <button
                v-else
                type="button"
                class="btn btn-primary"
                @click="publicate(infobase.name)"
                hint="Опубликовать базу"
              >
                Публиковать
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";

import "bootstrap-icons/icons/check-lg.svg?sprite"
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",
  data: () => ({
    url_base: "http://localhost:11111",
    is_loading: true,
    loading_error: false,
    infobases: [],
    url_edit: {},
  }),
  methods: {
    publicate(name) {
      let infobase = this.infobases.find((infobase) => name === infobase.name);
      if (infobase === undefined) return;

      infobase.publicated = true;
    },
    remove_publication(name) {
      let infobase = this.infobases.find((infobase) => name === infobase.name);
      if (infobase === undefined) return;

      infobase.publicated = false;
    },
    set_url(name, url) {
      let infobase = this.infobases.find((infobase) => name === infobase.name);
      if (infobase === undefined) return;

      infobase.url = url;
    },
    start_edit_url(name) {
      let infobase = this.infobases.find((infobase) => name === infobase.name);
      if (infobase === undefined) return;

      this.url_edit[name] = infobase.url;
    },
    cancel_edit_url(name) {
      delete this.url_edit[name];
    },
    apply_edit_url(name) {
      this.set_url(name, this.url_edit[name]);
      delete this.url_edit[name];
    },
    is_edit_url_active(name) {
      return name in this.url_edit;
    },
  },
  async mounted() {
    try {
      const res = await axios.get(`${api_base}/infobases`);
      if (!res) {
        return;
      }
      const names = res.data;
      if (!Array.isArray(names)) {
        this.loading_error = true;
        return;
      }

      if (0 < names.length) {
        if ("string" !== typeof names[0]) {
          this.loading_error = true;
          return;
        }
      }

      this.is_loading = false;
      this.loading_error = false;
      this.infobases = names.map((name) => {
        return { name: name, publicated: "bpdemo" === name, url: "/" };
      });
    } catch (err) {
      this.loading_error = true;
    }
  },
};
</script>