118 lines
2.7 KiB
Vue
118 lines
2.7 KiB
Vue
<template>
|
|
<Modal v-model:visible="showModal" :options="modalOptions" @confirm="handleClose">
|
|
<template #title>Meeting Details</template>
|
|
<div v-if="meeting" class="meeting-details">
|
|
<div class="detail-row">
|
|
<v-icon class="mr-2">mdi-map-marker</v-icon>
|
|
<strong>Addresss:</strong> {{ meeting.address.fullAddress }}
|
|
</div>
|
|
<div class="detail-row" v-if="meeting.client">
|
|
<v-icon class="mr-2">mdi-account</v-icon>
|
|
<strong>Client:</strong> {{ meeting.client }}
|
|
</div>
|
|
<div class="detail-row">
|
|
<v-icon class="mr-2">mdi-calendar</v-icon>
|
|
<strong>Date:</strong> {{ formatDate(meeting.date) }}
|
|
</div>
|
|
<div class="detail-row">
|
|
<v-icon class="mr-2">mdi-clock</v-icon>
|
|
<strong>Time:</strong> {{ formatTimeDisplay(meeting.scheduledTime) }}
|
|
</div>
|
|
<div class="detail-row" v-if="meeting.duration">
|
|
<v-icon class="mr-2">mdi-timer</v-icon>
|
|
<strong>Duration:</strong> {{ meeting.duration }} minutes
|
|
</div>
|
|
<div class="detail-row" v-if="meeting.notes">
|
|
<v-icon class="mr-2">mdi-note-text</v-icon>
|
|
<strong>Notes:</strong> {{ meeting.notes }}
|
|
</div>
|
|
<div class="detail-row" v-if="meeting.status">
|
|
<v-icon class="mr-2">mdi-check-circle</v-icon>
|
|
<strong>Status:</strong> {{ meeting.status }}
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
import Modal from "../common/Modal.vue";
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
meeting: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
// Emits
|
|
const emit = defineEmits(["update:visible", "close"]);
|
|
|
|
// Local state
|
|
const showModal = computed({
|
|
get() {
|
|
return props.visible;
|
|
},
|
|
set(value) {
|
|
emit("update:visible", value);
|
|
},
|
|
});
|
|
|
|
// Modal options
|
|
const modalOptions = computed(() => ({
|
|
maxWidth: "600px",
|
|
showCancelButton: false,
|
|
confirmButtonText: "Close",
|
|
confirmButtonColor: "primary",
|
|
}));
|
|
|
|
// Methods
|
|
const handleClose = () => {
|
|
emit("close");
|
|
};
|
|
|
|
const formatTimeDisplay = (time) => {
|
|
if (!time) return "";
|
|
const [hours, minutes] = time.split(":").map(Number);
|
|
const displayHour = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
|
|
const ampm = hours >= 12 ? "PM" : "AM";
|
|
return `${displayHour}:${minutes.toString().padStart(2, "0")} ${ampm}`;
|
|
};
|
|
|
|
const formatDate = (dateStr) => {
|
|
if (!dateStr) return "";
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString("en-US", {
|
|
weekday: "long",
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.meeting-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.detail-row strong {
|
|
margin-right: 8px;
|
|
color: #333;
|
|
}
|
|
</style>
|