Kevin
124 lines
4.4 KiB
Vue
124 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { noImagePlaceholder } from '~/assets/images'
|
|
import { usePage } from '@inertiajs/vue3'
|
|
import Computer from '#models/computer'
|
|
import ComputerCard from '~/pages/widgets/ComputerCard.vue'
|
|
import { computed, reactive, ref } from 'vue'
|
|
|
|
const { computers } = usePage<{ computers: Computer[] }>().props
|
|
const stateDropdownOpen = ref(false)
|
|
|
|
function toggleDropdown() {
|
|
stateDropdownOpen.value = !stateDropdownOpen.value
|
|
}
|
|
|
|
const filters = reactive({
|
|
onGoing: true,
|
|
finished: true,
|
|
sold: false,
|
|
})
|
|
const filteredComputers = computed(() => {
|
|
return computers.filter((computer) => {
|
|
const isOnGoing = filters.onGoing && computer.state.name == 'ON_GOING'
|
|
const isFinished = filters.finished && computer.state.name == 'FINISHED'
|
|
const isSold = filters.sold && computer.state.name == 'SOLD'
|
|
return isOnGoing || isFinished || isSold
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- Dropdown pour les filtres -->
|
|
<div class="relative">
|
|
<h4 class="text-xl underline">Filters</h4>
|
|
<div class="flex gap-2">
|
|
<!-- Usage Dropdown -->
|
|
<div id="usage-selector" class="relative" style="width: fit-content">
|
|
<button
|
|
@click="toggleDropdown()"
|
|
class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition text-center inline-flex items-center"
|
|
type="button"
|
|
>
|
|
Usage
|
|
<svg
|
|
class="w-4 h-4 ml-2"
|
|
aria-hidden="true"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 9l-7 7-7-7"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Dropdown menu -->
|
|
<div
|
|
v-show="stateDropdownOpen"
|
|
class="absolute right-0 z-20 py-2 mt-2 bg-white rounded-md shadow-xl"
|
|
>
|
|
<ul class="space-y-2 text-sm px-4 py-2">
|
|
<li class="flex items-center">
|
|
<input
|
|
id="unused"
|
|
type="checkbox"
|
|
v-model="filters.onGoing"
|
|
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
|
|
/>
|
|
<label
|
|
for="unused"
|
|
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100"
|
|
>
|
|
On Going
|
|
</label>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<input
|
|
id="used"
|
|
type="checkbox"
|
|
v-model="filters.finished"
|
|
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
|
|
/>
|
|
<label for="used" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
Finished
|
|
</label>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<input
|
|
id="used"
|
|
type="checkbox"
|
|
v-model="filters.sold"
|
|
class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
|
|
/>
|
|
<label for="used" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
Sold
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 mb-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
<ComputerCard
|
|
v-for="computer in filteredComputers"
|
|
:key="computer.id"
|
|
:computerId="computer.id"
|
|
:image-src="computer.pictures.find((p) => p.order === 1)?.link || noImagePlaceholder"
|
|
image-alt="Computer Image"
|
|
:title="computer.title"
|
|
:cost="computer.cost"
|
|
:price="computer.sellPrice"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|