consumocuidado/pages/admin/cooperativas.vue

<template>
  <div v-if="!loading" class="container" >
    <BModal 
        id="modal-center" 
        v-model="activeModal" 
        centered 
        title="latienda.coop" 
        :ok-variant="modalColor"> {{ modalText }}
      </BModal>
    <div class="row">
      <div class="col-10">
        <h1 class="title">Administrar cooperativas</h1>
      </div>
    </div>
    <template v-if="companies">
      <v-data-table
        v-model="selectedItemsIndexes"
        show-select
        :single-select="false"
        :headers="headers"
        :search="search"
        :items="companies"
        :loading="loading"
        loading-text="Cargando cooperativas..."
      >
        <template #top>
          <v-toolbar flat color="white">
            <!-- Search -->
            <v-text-field
              v-model="search"
              append-icon="mdi-magnify"
              label="Buscar cooperativa"
              single-line
              hide-details
            />
            <!-- . Search -->
          </v-toolbar>
        </template>
        <template #[`item.company_name`]="item">
          <a :href="`/c/${item.item.id}`" target="_blank" class="mr-2">
            {{ item.item.company_name }}
          </a>
        </template>
        <template #[`item.is_validated`]="item">
          <v-icon v-if="item.item.is_validated" small class="mr-2 validated">
            mdi-check
          </v-icon>
          <v-icon v-else small class="mr-2 not-validated"> mdi-close </v-icon>
        </template>
      </v-data-table>
    </template>
    <div>
      <button class="submit-btn" @click="validateCompanies">Validar</button>
    </div>
  </div>
</template>

<script>
import { useAuthStore } from '@/stores/auth'
export default {
  setup() {
    definePageMeta({
      layout: 'admin',
      middleware: 'auth',
      auth: { authority: 'SITE_ADMIN' },
    })
    const auth = useAuthStore();
    return {
      auth
    }
  },
  data() {
    return {
      search: '',
      companies: [],
      selectedItemsIndexes: [],
      loading: true,
      headers: [
        { text: 'Nombre', value: 'company_name' },
        { text: 'C.I.F', value: 'cif' },
        { text: 'Ciudad', value: 'city' },
        { text: 'Email', value: 'email' },
        { text: 'Validada', value: 'is_validated' },
      ],
      modalText: '',
      modalColor: '',
      activeModal: false
    }
  },

  computed: {
    selectedItems() {
      const itemsArr = []
      this.selectedItemsIndexes.forEach(index => {
        this.companies.forEach(item => {
          if (item.id === index) {
            itemsArr.push(item)
          }
        })
      })
      return itemsArr
    }
  },

  async mounted() {
    try{
      const config = useRuntimeConfig()
      const data = await $fetch('admin_companies/', {
        baseURL: config.public.baseURL,
        method: 'GET',
        headers: {
          Authorization: `Bearer ${this.auth.access}`
        }
      })
      this.companies = data
      this.loading = false
    } catch (error) {
      console.error('Error fetching companies:', error)
      this.loading = false
    }
  },

  methods: {
    async validateCompanies() {
      const config = useRuntimeConfig()
      try {
        await this.selectedItems.forEach(async (item) => {
          await $fetch(`admin_companies/${item.id}/`, {
            baseURL: config.public.baseURL,
            method: 'PATCH',
            body: {
              is_validated: true,
            },
            headers: {
              Authorization: `Bearer ${this.auth.access}`
            },
          })
          const index = this.companies.indexOf(item)
          this.companies[index].is_validated = true
          this.selectedItemsIndexes = []
          this.modalText = 'Los productos han sido eliminados correctamente.'
          this.modalColor = 'success'
          this.activeModal = true
        })
      } catch (error) {
        console.error('Error validating companies:', error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 40px;
  margin-bottom: 80px;
}
.title {
  color: $color-navy;
  font-size: $xxl;
  margin-bottom: 2.5rem;
}

.submit-btn {
  background-color: $color-orange;
  color: $color-light;
  border: none;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 10px 15px;
  margin-top: 15px;
}

.validated {
  color: green;
}
.not-validated {
  color: red;
}
</style>