136 lines
3.0 KiB
Vue
136 lines
3.0 KiB
Vue
<template>
|
|
<div class="location-display">
|
|
<div v-if="location" class="location-info">
|
|
<div class="d-flex align-items-center">
|
|
<div class="location-icon me-3">
|
|
<i class="fas fa-map-marker-alt text-primary"></i>
|
|
</div>
|
|
<div class="location-details flex-grow-1">
|
|
<h6 class="location-name mb-1">{{ location.name }}</h6>
|
|
<p v-if="location.address" class="location-address mb-0 text-muted">
|
|
{{ location.address }}
|
|
</p>
|
|
<p v-if="location.phone" class="location-phone mb-0 text-muted small">
|
|
<i class="fas fa-phone me-1"></i>
|
|
{{ location.phone }}
|
|
</p>
|
|
</div>
|
|
<div v-if="showActions && editable" class="location-actions">
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-outline-secondary"
|
|
@click="$emit('edit', location)"
|
|
:disabled="disabled"
|
|
>
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-outline-danger ms-1"
|
|
@click="$emit('remove')"
|
|
:disabled="disabled"
|
|
>
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Info -->
|
|
<div v-if="location.description" class="location-description mt-2">
|
|
<small class="text-muted">{{ location.description }}</small>
|
|
</div>
|
|
|
|
<!-- New Location Badge -->
|
|
<div v-if="location.isNew" class="new-location-badge mt-2">
|
|
<span class="badge bg-warning">
|
|
<i class="fas fa-plus me-1"></i>
|
|
Nouveau lieu
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else class="location-empty text-center py-3">
|
|
<i class="fas fa-map-marker-alt text-muted fa-2x mb-2"></i>
|
|
<p class="text-muted mb-0">{{ emptyMessage }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from "vue";
|
|
|
|
const props = defineProps({
|
|
location: {
|
|
type: Object,
|
|
default: () => null,
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showActions: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
emptyMessage: {
|
|
type: String,
|
|
default: "Aucun lieu sélectionné",
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["edit", "remove"]);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.location-display {
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.location-info {
|
|
min-height: 60px;
|
|
}
|
|
|
|
.location-icon {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.location-name {
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
.location-address,
|
|
.location-phone {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.location-actions .btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.location-empty {
|
|
color: #6c757d;
|
|
}
|
|
|
|
.location-empty i {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.new-location-badge .badge {
|
|
font-size: 0.75rem;
|
|
}
|
|
</style>
|