NUXT_FRONTEND/components/SectionNews.vue

<template lang="html">
  <div class="component-wrapper">
    <v-card elevation="2" v-bind:class="!news.is_show ? 'disable_item_list' : ''  + ' ' + news.news_timing">
      <v-card-title>
        <span v-html="news.title"></span>
      </v-card-title>
      <v-card-subtitle placeholder="Значение сортировки">
        {{ news.sorting ? ('сортировка: ' + news.sorting) : "сортировка не задана" }}
      </v-card-subtitle>
      <v-card-text>
        {{ news.start_activity }}
      </v-card-text>
      <v-text-field
        type="nubmer"
        v-model="sortValue"
        filled
        placeholder="сортировка"
        class="sort-input"
        v-if="sortingInput"
        >Значение сортировки</v-text-field
      >
      <v-card-actions>
        <div class="mx-auto">
          <v-btn small link block class="mb-2" :href="link" target="_blank">Редактировать</v-btn>
          
          <v-btn small block v-if="!sortingInput" @click="openSorting">Задать сортировку</v-btn>
          <v-btn small block v-if="sortingInput" @click="saveSorting">Сохранить сортировку</v-btn>
          <v-btn small block class="mt-2" color="primary" @click="copy(news)">Инжект</v-btn>
        </div>
      </v-card-actions>
      <v-btn
      fab
      dark
      small
      color="error"
      class="delete-button mx-2"
      @click="deleteNews()"
    >
      <v-icon dark>
        mdi-close
      </v-icon>
    </v-btn>
    </v-card>
  </div>
</template>

<script>
export default {
  props: {
    news: {
      type: Object,
      requied: true
    },
    news_container_id: {
      type: String
    }
  },
  data() {
    return {
      sortingInput: false,
      sortValue: ""
    };
  },
  methods: {
    copy(item) {
      let res = "##news_" + item.id + "##";
      this.$clipboard(res);
    },
    openSorting() {
      this.sortingInput = true;
    },
    saveSorting() {
      console.log(this.ContainerId);
      this.$axios.post("admin/containers/add/news", {
        news_container_id: this.news_container_id,
        news_id: this.news.id,
        sorting: Number(this.sortValue)
      });
    },
    deleteNews() {
      this.$axios.post("admin/containers/remove/news", {
        news_container_id: this.news_container_id,
        news_id: this.news.id
      }).then(() => {
        this.$emit('update')
        return true
      })
    }
   },

   computed: {
     link() {
       return '/admin/publications/' + this.news.id
     }
   }
};
</script>

<style lang="scss" scoped>
.delete-button {
  position: absolute;
  top: 0;
  right: -40px;
  z-index: 11;
}
.disable_item_list{
  opacity: 0.5;
}
.v-card__title {
  font-size: 1rem;
  line-height: 1.5rem;
}
.yesterday, .today, .tomorrow{
  position: relative;
}
.yesterday::before, .today::before, .tomorrow::before{
  width: 100%;
  height: 7px;
  z-index: 1;
}
.yesterday::before{
  background-color: purple;
}
.today::before{
  background-color: #4caf50;
}
.tomorrow::before{
  background-color: orange;
}
</style>