New-Thanasoft/thanasoft-front/src/components/molecules/SousTraitants/SousTraitantCommandeListControls.vue
2026-05-22 15:57:50 +03:00

69 lines
1.9 KiB
Vue

<template>
<div class="d-sm-flex justify-content-between align-items-center gap-3">
<div>
<h5 class="mb-1">Commandes sous-traitants</h5>
<p class="text-sm text-secondary mb-0">
Liste des devis associés à un sous-traitant.
</p>
</div>
<div class="d-flex">
<div class="dropdown d-inline">
<soft-button
id="sousTraitantCommandeFilter"
color="dark"
variant="outline"
class="dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Filtrer
</soft-button>
<ul
class="dropdown-menu dropdown-menu-lg-start px-2 py-3"
aria-labelledby="sousTraitantCommandeFilter"
>
<li v-for="option in filterOptions" :key="option.value ?? 'all'">
<a
class="dropdown-item border-radius-md"
:class="{ 'text-danger': option.value === null }"
href="javascript:;"
@click="$emit('filter', option.value)"
>
{{ option.label }}
</a>
</li>
</ul>
</div>
<soft-button
class="btn-icon ms-2 export"
color="dark"
variant="outline"
data-type="csv"
@click="$emit('export')"
>
<span class="btn-inner--icon">
<i class="ni ni-archive-2"></i>
</span>
<span class="btn-inner--text">Export CSV</span>
</soft-button>
</div>
</div>
</template>
<script setup>
import { defineEmits } from "vue";
import SoftButton from "@/components/SoftButton.vue";
defineEmits(["filter", "export"]);
const filterOptions = [
{ label: "Statut: Envoye", value: "envoye" },
{ label: "Statut: Accepte", value: "accepte" },
{ label: "Statut: Brouillon", value: "brouillon" },
{ label: "Statut: Refuse", value: "refuse" },
{ label: "Retirer Filtres", value: null },
];
</script>