CampaignList.vue

<template>
  <div>
    <v-toolbar flat color="white">
      <v-spacer />
      <v-toolbar-title>
        <h2 class="mb-0">Mis Campañas</h2>
      </v-toolbar-title>
      <v-spacer />
      <template v-if="has_rendered_campaigns && campaigns_list"></template>
      <v-btn dark color="primary" @click="createCampaign" v-if="campaigns_list.length">
        Crear Campaña
        <!-- <v-icon right dark>add_circle</v-icon> -->
      </v-btn>
    </v-toolbar>
    <template v-if="has_rendered_campaigns">
      <v-layout wrap justify-center v-if="campaigns_list.length">
        <v-flex
          lg4
          md6
          sm6
          xs12
          pa-2
          v-for="(campaign, campaign_index) in campaigns_list"
          :key="campaign_index"
        >
          <CampaignDetails
            :is_enabled="campaign['enabled']"
            :campaign_details="campaign"
            :campaign_index="campaign_index+1"
            :styles="styles"
            @open-delete-dialog="openDeleteCampaignDialog"
          />
        </v-flex>
      </v-layout>
      <v-layout v-else row wrap align-center justfiy-center>
        <v-flex lg6 md6 sm6 offset-sm3 xs12 pa-2>
          <v-card class="mt-2">
            <v-card-title class="text-xs-center">
              <h2>Parece que no tienes campañas creadas</h2>
            </v-card-title>
            <v-card-text class="text-xs-center pt-0">
              <h3>
                Crea una campaña para visualizarla
                <v-btn dark color="primary" @click="createCampaign">
                  Crear Campaña
        
                </v-btn>
              </h3>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </template>
    <div v-else class="d-flex mt-5">
      <v-progress-circular 
        :size="70" 
        :width="7" 
        indeterminate 
        color="primary"
      >
      </v-progress-circular>
    </div>
    <ConfirmationDialog
      :dialog="delete_dialog"
      :texts_details="delete_dialog_text"
      :provided_extra="selected_campaign_id"
      @send-answer="deleteCampaign"
    />
  </div>
</template>

<script>
import authMixin from "@/mixins/authentication";
import Sortable from "sortablejs";
import {
  SET_IS_UPDATING_CAMPAIGN,
  SET_CAMPAIGN_DETAILS,
  SET_CURRENT_STEP,
  SET_DYNAMIC_ID,
  SET_UPDATING_SEGMENT_ID,
  RESET_CAMPAIGNS_MODULE,
  RESET_SEGMENT,
  UPDATE_CAMPAIGN_FROM_LIST
} from "@/store/mutations.type";
import { FETCH_CAMPAIGNS_LIST, DELETE_CAMPAIGN } from "@/store/actions.type";
import { mapState } from "vuex"
export default {
  name: "CampaignsList",
  mixins: [authMixin],
  components: {
    CampaignDetails: () => import("@/components/campaigns/CampaignDetails"),
    ConfirmationDialog: () => import("@/components/common/ConfirmationDialog")
  },
  data() {
    return {
      has_rendered_campaigns: false,
      pagination: {},
      currentPage: 0,
      url: "",
      rowsPerPageItems: [
        -1,
        25,
        { text: "$vuetify.dataIterator.rowsPerPageAll", value: -1 }
      ],
      itemKeys: new WeakMap(),
      currentItemKey: 0,
      delete_dialog: false,
      delete_dialog_text: {
        title: `Al borrar esta campaña, se eliminarán 
          todas las estadísticas asociadas a la misma.`,
        subtitle: `¿Realmente desea eliminarla?`,
        accept_action: "Eliminar Campaña",
        cancel_action: "No Eliminar"
      },
      selected_campaign_id: undefined,
    };
  },
  methods: {
    async fetchCampaignsList() {
      this.has_rendered_campaigns = false;
      const status = await this.$store
        .dispatch(FETCH_CAMPAIGNS_LIST)
      this.has_rendered_campaigns = Boolean(status);
    },
    // Esto de acá es lo que llama al componente de confirmación
    openDeleteCampaignDialog(campaign_id) {
    // selected_campaign_id es un valor que yo le envío al componente para tener una referencia al momento de eliminar
      this.selected_campaign_id = campaign_id;
      this.delete_dialog = true;
    },
    // 
    deleteCampaign([answer, campaign_id]) {
    // answer es un booleano, y el campaign_id es la referencia previamente enviada para tomar acción sobre ese.
      this.delete_dialog = false;
      if (answer)
        return this.$store
          .dispatch(DELETE_CAMPAIGN, campaign_id)
          .then(() => this.fetchCampaignsList())
    },
    createCampaign() {
      this.$store.commit(RESET_CAMPAIGNS_MODULE);
      this.$store.commit(RESET_SEGMENT);
      this.$router.push({ name: "CampaignCreationWizard" });
      this.$store.commit(SET_IS_UPDATING_CAMPAIGN, false);
      this.$store.commit(SET_CURRENT_STEP, 1);
    },
    changeEnableData(campaign) {
      this.$store.commit(UPDATE_CAMPAIGN_FROM_LIST, campaign)
    }
  },
  computed: {
    ...mapState({
      campaigns_list: state => state.Campaigns.campaigns_list || []
    })
  },
  mounted() {
    this.fetchCampaignsList();
  }
};
</script>

ConfirmationDialog.vue

<template>
  <v-dialog v-model="dialog" persistent width="600">
    <v-card>
      <v-card-text class="black--text pa-3 text-xs-center">
        <h3>{{texts_details.title}}</h3>
        <h2>{{texts_details.subtitle}}</h2>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn
          text
          depressed
          @click="answer(false)"
        >{{texts_details.cancel_action}}</v-btn>
        <v-btn
          text
          dark
          depressed
          color="error"
          @click="answer(true, provided_extra)"
        >{{texts_details.accept_action}}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "ConfirmationDialog",
  props: {
    dialog: {
      type: Boolean,
      required: true
    },
    texts_details: {
      type: Object,
      required: true
    },
    provided_extra: {
      required: false
    }
  },
  data() {
    return {};
  },
  methods: {
    answer(bool, provided_extra = null) {
      this.$emit("send-answer", [ bool, this.provided_extra]);
    }
  }
};
</script>