NUXT_FRONTEND/pages/admin/sliders/index.vue

<template lang="html">
  <div class="component-wrapper">
    <v-tabs>
      <v-tab link to="sliders/slider-create">
          Создать слайдер
      </v-tab>
    </v-tabs>
    <v-expansion-panels multiple v-if="sliders">
      <v-expansion-panel v-for="slider in sliders" :key="slider.id" class="section__wrapper">
         <v-btn
          color="primary"
          @click="copy(slider.id)"
          class="inject-button"
          fab
          dark
          small
        >
          <v-icon class="mx-auto" left> mdi-content-copy </v-icon>
        </v-btn>
        <v-btn
          color="warning"
          @click="deleteSlider(slider.id)"
          class="delete-button"
          fab
          dark
          small
        >
          <v-icon class="mx-auto" left> mdi-delete </v-icon>
        </v-btn>
        <v-btn
        fab
        dark
        small
        color="success"
        class="add-button mx-2"
        @click="addNews(slider.id)"
      >
        <v-icon dark>
          mdi-plus
        </v-icon>
      </v-btn>
      <v-expansion-panel-header>
          {{slider.name }}
        </v-expansion-panel-header>
        <v-expansion-panel-content  max-width="500">
          <div v-for="news in slider.news" >
          <SectionNews @update="update" :news="news" :news_container_id="slider.id" />
          </div>
        </v-expansion-panel-content>

      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$axios.get("admin/containers/type_slider").then((res) => {
      console.log(res.data);
      this.sliders = res.data.data;
      return res.data.data;
    });
  },
  data() {
    return {
      sliders: false,
    };
  },
  methods: {
    copy(id) {
      this.$clipboard(id)
    },
    async deleteSlider(id) {
      await this.$axios.$post("admin/containers/remove", {id: id}).then(() => {
        this.$axios.get("admin/containers/type_slider").then((res) => {
          this.sliders = res.data.data;
          return res.data.data;
        });
      })
    },
    async addNews(container_id) {
      // const newsReplace1 = news.replaceAll('##', '')
      // const newsReplace2 = newsReplace1.replaceAll('news_', '')
      // console.log(newsReplace2)
      const { value: text } = await this.$swal.fire({
        title: "Вставьте инжект новости",
        input: "text",
        inputPlaceholder: "Инжект",
      });
      if (text) {
        const newsReplace1 = text.replaceAll("##", "");
        const newsReplace2 = newsReplace1.replaceAll("news_", "");
        this.$axios
          .post("admin/containers/add/news", {
            news_id: newsReplace2,
            news_container_id: container_id,
          })
          .then(() => {
            this.$swal.fire(`Новость добавлена!`);
            this.update();
            return;
          }).then(() => {
            this.$axios.get("admin/containers/type_slider").then((res) => {
              this.sliders = res.data.data;
              return res.data.data;
            });
          });
      }
    },
    update() {
      this.$axios.get("admin/containers/type_slider").then((res) => {
        console.log(res.data);
        this.sliders = res.data.data;
        return res.data.data;
      }).then(() => {
        this.$axios.get("admin/containers/type_slider").then((res) => {
          this.sliders = res.data.data;
          return res.data.data;
        });
      })
    },
  },
  layout: "admin",
};
</script>

<style lang="scss" scope>
.v-sheet.v-card {
  width: 200px;
  margin-bottom: 55px;
  margin-right: 55px;
}
.v-expansion-panel-content__wrap {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.v-card__actions > .v-btn.v-btn {
  padding: 0 8px;
  margin: 0 auto;
}
.add-button {
  position: absolute;
  right: 50px;
  z-index: 10;
}
.inject-button {
  position: absolute;
  right: 120px;
  z-index: 10;
}
.delete-button {
  position: absolute;
  right: 190px;
  z-index: 10;
}
</style>