115 lines
3.3 KiB
Vue
115 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import type { StoreData } from '@/models/storeData'
|
|
import UserProfileHeaderBg from '@images/pages/user-profile-header-bg.png'
|
|
|
|
interface Props {
|
|
storeData: StoreData
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
</script>
|
|
|
|
<template>
|
|
<VCard v-if="props">
|
|
<VImg
|
|
:src="UserProfileHeaderBg"
|
|
min-height="80"
|
|
max-height="120"
|
|
cover
|
|
/>
|
|
<VCardText class="d-flex align-bottom flex-sm-row flex-column justify-center gap-x-5">
|
|
<div class="d-flex h-0">
|
|
<VAvatar
|
|
rounded
|
|
size="120"
|
|
:image="props.storeData.store.photoLink"
|
|
class="user-profile-avatar mx-auto"
|
|
/>
|
|
</div>
|
|
|
|
<div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0">
|
|
<div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4 mb-3">
|
|
<div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-4">
|
|
<span class="d-flex">
|
|
<span class="text-h5">
|
|
{{ props.storeData.store.id_structure }} - {{ props.storeData.store.nom }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="d-flex align-center gap-4">
|
|
<div class="d-flex flex-column">
|
|
<span class="text-h6 font-weight-medium">{{ props.storeData.store.date_migration }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4">
|
|
<div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-4">
|
|
<span class="d-flex">
|
|
<VIcon
|
|
size="20"
|
|
icon="tabler-color-swatch"
|
|
class="me-1"
|
|
/>
|
|
<span class="text-body-1">
|
|
{{ props.storeData.store.enseigne }}
|
|
</span>
|
|
</span>
|
|
|
|
<span class="d-flex">
|
|
<VIcon
|
|
size="20"
|
|
icon="tabler-phone-call"
|
|
class="me-1"
|
|
/>
|
|
<span class="text-body-1">
|
|
{{ props.storeData.store.telephone }}
|
|
</span>
|
|
</span>
|
|
|
|
<span class="d-flex">
|
|
<VIcon
|
|
size="20"
|
|
icon="tabler-map-pin"
|
|
class="me-1"
|
|
/>
|
|
<span class="text-body-1">
|
|
{{ props.storeData.store.adresse }} - ({{ props.storeData.store.pays }})
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="d-flex align-center gap-4">
|
|
<VAvatar
|
|
color="primary"
|
|
variant="tonal"
|
|
size="42"
|
|
>
|
|
<VIcon icon="tabler-http-post" />
|
|
</VAvatar>
|
|
|
|
<div class="d-flex flex-column">
|
|
<span class="text-h5 font-weight-medium">{{ props.storeData.store.nbcaisses }}</span>
|
|
<span class="text-sm">
|
|
Caisses
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.user-profile-avatar {
|
|
border: 5px solid rgb(var(--v-theme-surface));
|
|
background-color: rgb(var(--v-theme-surface)) !important;
|
|
inset-block-start: -3rem;
|
|
|
|
.v-img__img {
|
|
border-radius: 0.125rem;
|
|
}
|
|
}
|
|
</style>
|