|
4 | 4 | <SectionTitle title="Договоры" /> |
5 | 5 | <UBadge |
6 | 6 | v-if="filteredAgreements.length" |
7 | | - size="sm" |
| 7 | + size="md" |
8 | 8 | color="primary" |
9 | | - variant="soft" |
10 | | - class="min-w-6 justify-center" |
11 | | - > |
12 | | - {{ filteredAgreements.length }} |
13 | | - </UBadge> |
| 9 | + variant="subtle" |
| 10 | + :label="filteredAgreements.length" |
| 11 | + class="min-w-8 justify-center" |
| 12 | + /> |
| 13 | + </div> |
| 14 | + |
| 15 | + <div class="grid grid-cols-1 gap-2.5 items-center"> |
| 16 | + <USelect |
| 17 | + v-model="sortedBy" |
| 18 | + size="xl" |
| 19 | + trailing-icon="i-lucide-arrow-down-wide-narrow" |
| 20 | + :items="[ |
| 21 | + { label: 'По дате заключения (убывание)', value: 'concludedAtDesc' }, |
| 22 | + { label: 'По дате заключения (возрастание)', value: 'concludedAtAsc' }, |
| 23 | + { label: 'По дате окончания (убывание)', value: 'willEndAtDesc' }, |
| 24 | + { label: 'По дате окончания (возрастание)', value: 'willEndAtAsc' }, |
| 25 | + ]" |
| 26 | + /> |
| 27 | + |
| 28 | + <USelect |
| 29 | + v-model="filteredBy" |
| 30 | + size="xl" |
| 31 | + trailing-icon="i-lucide-funnel" |
| 32 | + :items="[ |
| 33 | + { label: 'Все', value: 'all' }, |
| 34 | + { label: 'Только активные', value: 'active' }, |
| 35 | + { label: 'Скоро окончатся (6 месяцев) ', value: 'willEndSoon' }, |
| 36 | + ]" |
| 37 | + /> |
14 | 38 | </div> |
15 | 39 |
|
16 | 40 | <div class="flex flex-col gap-2.5"> |
|
31 | 55 | <script setup lang="ts"> |
32 | 56 | const partnerStore = usePartnerStore() |
33 | 57 |
|
34 | | -const filteredAgreements = computed(() => partnerStore.agreements.toSorted((a, b) => new Date(b.concludedAt ?? '').getTime() - new Date(a.concludedAt ?? '').getTime())) |
| 58 | +const sortedBy = ref<'concludedAtDesc' | 'concludedAtAsc' | 'willEndAtDesc' | 'willEndAtAsc'>('concludedAtDesc') |
| 59 | +
|
| 60 | +function sortByConcludedAtDesc(a: PartnerAgreementWithAllData, b: PartnerAgreementWithAllData) { |
| 61 | + const aTime = a.concludedAt ? new Date(a.concludedAt).getTime() : 0 |
| 62 | + const bTime = b.concludedAt ? new Date(b.concludedAt).getTime() : 0 |
| 63 | + return bTime - aTime |
| 64 | +} |
| 65 | +
|
| 66 | +function sortByConcludedAtAsc(a: PartnerAgreementWithAllData, b: PartnerAgreementWithAllData) { |
| 67 | + const aTime = a.concludedAt ? new Date(a.concludedAt).getTime() : 0 |
| 68 | + const bTime = b.concludedAt ? new Date(b.concludedAt).getTime() : 0 |
| 69 | + return aTime - bTime |
| 70 | +} |
| 71 | +
|
| 72 | +function sortByWillEndAtDesc(a: PartnerAgreementWithAllData, b: PartnerAgreementWithAllData) { |
| 73 | + const aTime = a.willEndAt ? new Date(a.willEndAt).getTime() : 0 |
| 74 | + const bTime = b.willEndAt ? new Date(b.willEndAt).getTime() : 0 |
| 75 | + return bTime - aTime |
| 76 | +} |
| 77 | +
|
| 78 | +function sortByWillEndAtAsc(a: PartnerAgreementWithAllData, b: PartnerAgreementWithAllData) { |
| 79 | + const aTime = a.willEndAt ? new Date(a.willEndAt).getTime() : 0 |
| 80 | + const bTime = b.willEndAt ? new Date(b.willEndAt).getTime() : 0 |
| 81 | + return aTime - bTime |
| 82 | +} |
| 83 | +
|
| 84 | +function chooseSortFunction() { |
| 85 | + switch (sortedBy.value) { |
| 86 | + case 'concludedAtDesc': |
| 87 | + return sortByConcludedAtDesc |
| 88 | + case 'concludedAtAsc': |
| 89 | + return sortByConcludedAtAsc |
| 90 | + case 'willEndAtDesc': |
| 91 | + return sortByWillEndAtDesc |
| 92 | + case 'willEndAtAsc': |
| 93 | + return sortByWillEndAtAsc |
| 94 | + } |
| 95 | +} |
| 96 | +
|
| 97 | +const filteredBy = ref<'all' | 'active' | 'willEndSoon'>('all') |
| 98 | +
|
| 99 | +function filterByAll() { |
| 100 | + return true |
| 101 | +} |
| 102 | +
|
| 103 | +function filterByActive(agreement: PartnerAgreementWithAllData) { |
| 104 | + return agreement.concludedAt && agreement.isActive |
| 105 | +} |
| 106 | +
|
| 107 | +function filterByWillEndSoon(agreement: PartnerAgreementWithAllData) { |
| 108 | + const SIX_MONTHS = 6 * 30 * 24 * 60 * 60 * 1000 |
| 109 | + return ( |
| 110 | + agreement.isActive |
| 111 | + && agreement.willEndAt |
| 112 | + && new Date(agreement.willEndAt).getTime() - new Date().getTime() < SIX_MONTHS |
| 113 | + ) |
| 114 | +} |
| 115 | +
|
| 116 | +function chooseFilterFunction() { |
| 117 | + switch (filteredBy.value) { |
| 118 | + case 'all': |
| 119 | + return filterByAll |
| 120 | + case 'active': |
| 121 | + return filterByActive |
| 122 | + case 'willEndSoon': |
| 123 | + return filterByWillEndSoon |
| 124 | + } |
| 125 | +} |
| 126 | +
|
| 127 | +const filteredAgreements = computed(() => { |
| 128 | + const sorted = partnerStore.agreements.toSorted(chooseSortFunction()) |
| 129 | + const filtered = sorted.filter(chooseFilterFunction()) |
| 130 | +
|
| 131 | + return filtered |
| 132 | +}) |
35 | 133 | </script> |
0 commit comments