marzban-dev
81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import useGetAllAddress from "~/composables/api/account/useGetAllAddress";
|
|
|
|
// meta
|
|
|
|
useSeoMeta({
|
|
title : "پنل کاربری آدرس ها"
|
|
});
|
|
|
|
definePageMeta({
|
|
middleware: "check-is-logged-in",
|
|
layout: "profile",
|
|
});
|
|
|
|
// state
|
|
|
|
const selectedAddress = ref<Address | null>();
|
|
|
|
const modalIsShow = ref(false);
|
|
|
|
// queries
|
|
|
|
const { data: addresses, isLoading: addressesIsLoading } = useGetAllAddress();
|
|
|
|
// methods
|
|
|
|
const handleSelectAddress = (address: Address) => {
|
|
selectedAddress.value = { ...address };
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full flex flex-col gap-5">
|
|
<ProfilePageTitle title="آدرس های شما" icon="bi:map" />
|
|
|
|
<ProfileSection title="همه">
|
|
<template #button>
|
|
<AddressModal
|
|
:address="undefined"
|
|
v-model:is-show="modalIsShow"
|
|
/>
|
|
</template>
|
|
<ul
|
|
v-if="addressesIsLoading"
|
|
class="w-full grid grid-cols-1 lg:grid-cols-2 gap-5"
|
|
>
|
|
<Skeleton
|
|
v-for="i in 6"
|
|
:key="i"
|
|
class="w-full !h-[10rem] !rounded-xl"
|
|
/>
|
|
</ul>
|
|
|
|
<div v-else class="w-full h-max">
|
|
<div v-if="!addresses?.length" class="flex flex-grow w-full">
|
|
<Placeholder
|
|
title="آدرسی یافت نشد :("
|
|
icon="bi:map"
|
|
class="!py-[4rem] !border-none"
|
|
/>
|
|
</div>
|
|
|
|
<ul v-else class="w-full grid grid-cols-1 lg:grid-cols-2 gap-5">
|
|
<AddressItem
|
|
v-for="(address, index) in addresses"
|
|
:key="index"
|
|
:address="address"
|
|
@select="handleSelectAddress"
|
|
:selectable="false"
|
|
:isSelected="address.id == selectedAddress?.id"
|
|
/>
|
|
</ul>
|
|
</div>
|
|
</ProfileSection>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|