NUXT_FRONTEND/pages/admin/publications/containers/index.vue

<template>
  <div>
    <v-expansion-panels multiple>
      <v-expansion-panel v-for="container in containers" :key="container.id">
        <v-expansion-panel-header>
          <client-only>
            <v-col>{{ container.name }}</v-col>
            <v-col> Начало: {{ container.start_activity }} </v-col>
            <v-col> Конец: {{ container.end_activity }} </v-col>
            <v-col xl="auto">
              <v-btn fab small color="success" @click.stop="addNews(container.id)">
                <v-icon dark> mdi-plus </v-icon>
              </v-btn>
            </v-col>
          </client-only>
        </v-expansion-panel-header>
        <v-expansion-panel-content class="text" max-width="500">
          <AdminModule @update="loadModules" :module="container" />
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>

<script>
export default {
  layout: "admin",
  data() {
    return {
      containers: [],
    };
  },

  async fetch() {
    await this.loadModules();
  },

  methods: {
    async addNews(containerId) {
      const { value: text } = await this.$swal.fire({
        title: "Вставьте инжект новости",
        input: "text",
        inputPlaceholder: "Инжект",
      });

      if (!text) return;

      const newsId = text.replaceAll("##", "").replaceAll("news_", "");

      await this.$axios.post("admin/containers/add/news", {
        news_id: newsId,
        news_container_id: containerId,
      });

      this.loadModules();
      this.$swal.fire(`Новость добавлена!`);
    },

    async loadModules() {
      this.containers = await this.$axios
        .get("https://api.amic.ru/api/v1/admin/containers/type_module")
        .then((res) => {
          console.log(res);
          return res.data.data;
        })
        .catch((e) => console.log(e));
    },
  },
};
</script>

<style>
</style>