Skip to content

Commit

Permalink
Merge pull request #48 from w3bdesign/frontend
Browse files Browse the repository at this point in the history 
Frontend
  • Loading branch information
@w3bdesign
w3bdesign authored Nov 21, 2024
2 parents 28b67b3 + 610b30a commit 6bbcf4e
Show file tree
Hide file tree
Showing 2 changed files with 172 additions and 27 deletions.
144 changes: 144 additions & 0 deletions frontend/admin/src/components/BookingDetailsModal.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<template>
<div v-if="isOpen" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity">
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
<div class="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
<button
type="button"
@click="closeModal"
class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span class="sr-only">Lukk</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>

<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
<h3 class="text-lg font-semibold leading-6 text-gray-900">
Bestillingsdetaljer
</h3>
<div class="mt-4 space-y-4">
<!-- Customer -->
<div>
<label class="block text-sm font-medium text-gray-700">Kunde</label>
<p class="mt-1 text-sm text-gray-900">{{ booking?.customerName }}</p>
</div>

<!-- Employee -->
<div>
<label class="block text-sm font-medium text-gray-700">Ansatt</label>
<p class="mt-1 text-sm text-gray-900">{{ booking?.employeeName }}</p>
</div>

<!-- Service -->
<div>
<label class="block text-sm font-medium text-gray-700">Tjeneste</label>
<p class="mt-1 text-sm text-gray-900">{{ booking?.serviceName }}</p>
</div>

<!-- Status -->
<div>
<label class="block text-sm font-medium text-gray-700">Status</label>
<p class="mt-1">
<span
:class="[
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
getStatusColor(booking?.status)
]"
>
{{ getStatusText(booking?.status) }}
</span>
</p>
</div>

<!-- Date and Time -->
<div>
<label class="block text-sm font-medium text-gray-700">Dato og tid</label>
<p class="mt-1 text-sm text-gray-900">{{ formatDateTime(booking?.startTime) }}</p>
</div>

<!-- Notes -->
<div v-if="booking?.notes">
<label class="block text-sm font-medium text-gray-700">Notater</label>
<p class="mt-1 text-sm text-gray-900">{{ booking?.notes }}</p>
</div>
</div>
</div>
</div>

<div class="mt-5 sm:mt-4 sm:flex sm:justify-end">
<button
type="button"
@click="closeModal"
class="inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:w-auto"
>
Lukk
</button>
</div>
</div>
</div>
</div>
</div>
</template>

<script setup lang="ts">
defineProps<{
isOpen: boolean;
booking: any | null;
}>();
const emit = defineEmits<{
(e: 'close'): void;
}>();
const getStatusColor = (status: string | undefined): string => {
switch (status?.toUpperCase()) {
case "CONFIRMED":
return "bg-green-100 text-green-800";
case "PENDING":
return "bg-yellow-100 text-yellow-800";
case "CANCELLED":
return "bg-red-100 text-red-800";
default:
return "bg-gray-100 text-gray-800";
}
};
const getStatusText = (status: string | undefined): string => {
switch (status?.toUpperCase()) {
case "CONFIRMED":
return "Bekreftet";
case "PENDING":
return "Venter";
case "CANCELLED":
return "Kansellert";
default:
return "Ukjent";
}
};
const formatDateTime = (dateString: string | undefined): string => {
if (!dateString) return '';
try {
const date = new Date(dateString);
return new Intl.DateTimeFormat('nb-NO', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
}).format(date);
} catch (error) {
console.error('Error formatting date:', error);
return 'Dato ikke tilgjengelig';
}
};
const closeModal = () => {
emit('close');
};
</script>
55 changes: 28 additions & 27 deletions frontend/admin/src/views/DashboardView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,63 +143,70 @@
<span
:class="[
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
getStatusColor(booking.status),
getStatusColor(booking.status)
]"
>
{{ getStatusText(booking.status) }}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button
class="text-indigo-600 hover:text-indigo-900 mr-4"
@click="handleView(booking.id)"
class="text-indigo-600 hover:text-indigo-900"
@click="handleView(booking)"
data-test="view-button"
>
Se
</button>
<button
class="text-red-600 hover:text-red-900"
@click="handleCancel(booking.id)"
data-test="cancel-button"
>
Kanseller
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<!-- Booking Details Modal -->
<BookingDetailsModal
:is-open="isModalOpen"
:booking="selectedBooking"
@close="closeModal"
/>
</div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { onMounted, ref } from "vue";
import { useBookingStore } from "../stores/bookings";
import { RouterLink } from 'vue-router';
import BookingDetailsModal from "../components/BookingDetailsModal.vue";
const bookingStore = useBookingStore();
const isModalOpen = ref(false);
const selectedBooking = ref(null);
const getStatusColor = (status: "CONFIRMED" | "PENDING" | "CANCELLED"): string => {
switch (status) {
const getStatusColor = (status: string | undefined): string => {
switch (status?.toUpperCase()) {
case "CONFIRMED":
return "bg-green-100 text-green-800";
case "PENDING":
return "bg-yellow-100 text-yellow-800";
case "CANCELLED":
return "bg-red-100 text-red-800";
default:
return "bg-gray-100 text-gray-800";
}
};
const getStatusText = (status: "CONFIRMED" | "PENDING" | "CANCELLED"): string => {
switch (status) {
const getStatusText = (status: string | undefined): string => {
switch (status?.toUpperCase()) {
case "CONFIRMED":
return "Bekreftet";
case "PENDING":
return "Venter";
case "CANCELLED":
return "Kansellert";
default:
return "Ukjent";
}
};
Expand All @@ -219,20 +226,14 @@ function formatDateTime(dateString: string): string {
}
}
const handleView = (id: string | number) => {
console.log("Se bestilling:", id);
// TODO: Implement view functionality
const handleView = (booking: any) => {
selectedBooking.value = booking;
isModalOpen.value = true;
};
const handleCancel = async (id: string | number) => {
if (!confirm("Er du sikker på at du vil kansellere denne bestillingen?")) {
return;
}
const success = await bookingStore.cancelBooking(id);
if (success) {
console.log('Bestilling kansellert');
}
const closeModal = () => {
isModalOpen.value = false;
selectedBooking.value = null;
};
onMounted(() => {
Expand Down

0 comments on commit 6bbcf4e

Please sign in to comment.