111 lines
3.0 KiB
Vue
111 lines
3.0 KiB
Vue
<template>
|
|
<fournisseur-template>
|
|
|
|
|
|
<template #summary-cards>
|
|
<div class="col-12 col-md-6 col-xl-3">
|
|
<div class="card stat-card border-0">
|
|
<div class="card-body py-3">
|
|
<p class="text-sm text-secondary mb-1">Fournisseurs</p>
|
|
<h5 class="mb-0">{{ totalFournisseurs }}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-xl-3">
|
|
<div class="card stat-card border-0">
|
|
<div class="card-body py-3">
|
|
<p class="text-sm text-secondary mb-1">Actifs</p>
|
|
<h5 class="mb-0 text-success">{{ activeFournisseurs }}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-xl-3">
|
|
<div class="card stat-card border-0">
|
|
<div class="card-body py-3">
|
|
<p class="text-sm text-secondary mb-1">Inactifs</p>
|
|
<h5 class="mb-0 text-danger">{{ inactiveFournisseurs }}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #fournisseur-new-action>
|
|
<add-button text="Ajouter" @click="goToFournisseur" />
|
|
</template>
|
|
<template #select-filter>
|
|
<filter-table />
|
|
</template>
|
|
<template #fournisseur-other-action>
|
|
<table-action />
|
|
</template>
|
|
<template #fournisseur-table>
|
|
<fournisseur-table
|
|
:data="fournisseurData"
|
|
:loading="loadingData"
|
|
@view="goToDetails"
|
|
@delete="deleteFournisseur"
|
|
/>
|
|
</template>
|
|
</fournisseur-template>
|
|
</template>
|
|
<script setup>
|
|
import FournisseurTemplate from "@/components/templates/CRM/FournisseurTemplate.vue";
|
|
import FournisseurTable from "@/components/molecules/Tables/CRM/FournisseurTable.vue";
|
|
import addButton from "@/components/molecules/new-button/addButton.vue";
|
|
import FilterTable from "@/components/molecules/Tables/FilterTable.vue";
|
|
import TableAction from "@/components/molecules/Tables/TableAction.vue";
|
|
import { computed, defineProps, defineEmits } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
|
|
const router = useRouter();
|
|
|
|
const emit = defineEmits(["pushDetails", "deleteFournisseur"]);
|
|
|
|
const props = defineProps({
|
|
fournisseurData: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
loadingData: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const totalFournisseurs = computed(() => props.fournisseurData?.length || 0);
|
|
const activeFournisseurs = computed(
|
|
() => props.fournisseurData?.filter((f) => f?.is_active).length || 0
|
|
);
|
|
const inactiveFournisseurs = computed(
|
|
() => totalFournisseurs.value - activeFournisseurs.value
|
|
);
|
|
const fournisseursWithEmail = computed(
|
|
() => props.fournisseurData?.filter((f) => !!f?.email).length || 0
|
|
);
|
|
|
|
const goToFournisseur = () => {
|
|
router.push({
|
|
name: "Creation fournisseur",
|
|
});
|
|
};
|
|
|
|
const goToDetails = (fournisseurId) => {
|
|
router.push({
|
|
name: "Fournisseur details",
|
|
params: {
|
|
id: fournisseurId,
|
|
},
|
|
});
|
|
};
|
|
|
|
const deleteFournisseur = (fournisseur) => {
|
|
emit("deleteFournisseur", fournisseur);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.stat-card {
|
|
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
|
|
}
|
|
</style>
|