120 lines
3.6 KiB
Vue
120 lines
3.6 KiB
Vue
<script setup>
|
|
const {makes} = useCars();
|
|
|
|
const modal = ref({
|
|
make: false,
|
|
location: false,
|
|
price: false,
|
|
});
|
|
|
|
const city = ref("");
|
|
const priceRange = ref({
|
|
min:"",
|
|
max:""
|
|
});
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const priceRangeText = computed(() => {
|
|
const minPrice = route.query.minPrice;
|
|
const maxPrice = route.query.maxPrice;
|
|
|
|
if(!minPrice && !maxPrice) {
|
|
return "Any";
|
|
} else if(!minPrice && maxPrice)
|
|
return `< ${maxPrice}`
|
|
else if (minPrice && !maxPrice)
|
|
return `> ${minPrice}`
|
|
else
|
|
return `$${minPrice} - $${maxPrice}`
|
|
});
|
|
|
|
const updateModal = (key) => {
|
|
modal.value[key] = !modal.value[key];
|
|
};
|
|
|
|
const onChangeLocation = () => {
|
|
if (!city.value) {
|
|
return;
|
|
}
|
|
|
|
if (!isNaN(parseInt(city.value))) {
|
|
throw createError({
|
|
statusCode:400,
|
|
message:"invalid city"
|
|
});
|
|
}
|
|
updateModal('location');
|
|
navigateTo(`/city/${city.value}/car/${route.params.make}`);
|
|
city.value = "";
|
|
};
|
|
|
|
const onChangeMake = (make) => {
|
|
updateModal("make");
|
|
navigateTo(`/city/${route.params.city}/car/${make}`)
|
|
};
|
|
|
|
const onChangePrice = () => {
|
|
updateModal("price");
|
|
if (priceRangeText.value.max && priceRange.value.min) {
|
|
if (priceRangeText.min > priceRange.value.max)
|
|
return;
|
|
}
|
|
|
|
// navigateTo(`/city/${route.params.city}/car/${route.params.make}?minPrice=${minPrice}&maxPrice=${maxPrice}`)
|
|
router.push({
|
|
query: {
|
|
minPrice : priceRange.value.min,
|
|
maxPrice : priceRange.value.max,
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="shadow border w-64 mr-10 z-30 h-[190px]">
|
|
<!-- LOCATION START -->
|
|
<div class="p-5 flex justify-between relative cursor-pointer border-b">
|
|
<h3>Location</h3>
|
|
<h3 @click="updateModal('location')" class="text-blue-400 capitalize">
|
|
{{ route.params.city }}
|
|
</h3>
|
|
<div v-if="modal.location"
|
|
class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
|
|
<input type="text" name="" id="" class="border p-1 rounded" v-model="city"/>
|
|
<button class="bg-blue-400 w-full mt-2 rounded text-white p-1" @click="onChangeLocation">Apply</button>
|
|
</div>
|
|
</div>
|
|
<!-- LOCATION END -->
|
|
|
|
<!-- MAKES START -->
|
|
<div class="p-5 flex justify-between relative cursor-pointer border-b">
|
|
<h3>Make</h3>
|
|
<h3 @click="updateModal('make')" class="text-blue-400 capitalize">{{ route.params.make || "Any" }}</h3>
|
|
<div v-if="modal.make" class="absolute border shadow left-56 p-5 top-1 -m-1 w-[600px] flex justify-between flex-wrap bg-white">
|
|
<h4 v-for="make in makes" :key="make" class="w-1/3"
|
|
@click="onChangeMake(make)"
|
|
>{{ make }}</h4>
|
|
<!-- <input type="text" name="" id="" class="border p-1 rounded"/>
|
|
<button class="bg-blue-400 w-full mt-2 rounded text-white p-1">Apply</button> -->
|
|
</div>
|
|
</div>
|
|
<!-- MAKES END -->
|
|
|
|
<!-- START PRICE -->
|
|
<div class="p-5 flex justify-between relative cursor-pointer border-b">
|
|
<h3>Price</h3>
|
|
<h3 @click="updateModal('price')" class="text-blue-400 capitalize">{{priceRangeText}}</h3>
|
|
<div v-if="modal.price" class="absolute border shadow left-56 p-5 top-1 -m-1 bg-white">
|
|
<input type="number" name="" id="" class="border p-1 rounded" placeholder="Min" v-model="priceRange.min"/>
|
|
<input type="number" name="" id="" class="border p-1 rounded" placeholder="Max" v-model="priceRange.max"/>
|
|
<button class="bg-blue-400 w-full mt-2 rounded text-white p-1" @click="onChangePrice()">Apply</button>
|
|
</div>
|
|
</div>
|
|
<!-- END PRICE -->
|
|
|
|
</div>
|
|
|
|
</template> |