Rooms is using Hotels from core.

Author: smack0007

apps/backend/src/data.ts

@@ -0,0 +1,33 @@
+import { Hotel, Room } from "hotel-management-shared";
+
+export type BackendHotel = Hotel & {
+  updateCount: number;
+};
+
+export const hotels: BackendHotel[] = [
+  { id: 1, name: "City Centre", updateCount: 0 },
+  { id: 2, name: "Messe", updateCount: 0 },
+  { id: 3, name: "Westend", updateCount: 0 },
+];
+
+export type BackendRoom = Room & {
+  updateCount: number;
+};
+
+export const rooms: Record<Hotel["id"], BackendRoom[]> = {
+  1: [
+    { hotelId: 1, id: 1, name: "Left", updateCount: 0 },
+    { hotelId: 1, id: 2, name: "Middle", updateCount: 0 },
+    { hotelId: 1, id: 3, name: "Center", updateCount: 0 },
+  ],
+  2: [
+    { hotelId: 2, id: 1, name: "Party", updateCount: 0 },
+    { hotelId: 2, id: 2, name: "Press", updateCount: 0 },
+    { hotelId: 2, id: 3, name: "Wedding", updateCount: 0 },
+  ],
+  3: [
+    { hotelId: 3, id: 1, name: "California", updateCount: 0 },
+    { hotelId: 3, id: 2, name: "Oregon", updateCount: 0 },
+    { hotelId: 3, id: 3, name: "Washington", updateCount: 0 },
+  ],
+};

apps/backend/src/main.ts

@@ -1,7 +1,7 @@
 import * as fs from "node:fs/promises";
 import cors from "cors";
 import express from "express";
-import { type Hotel } from "hotel-management-shared";
+import { hotels, rooms } from "./data";
 
 const packageJson = JSON.parse(await fs.readFile("./package.json", "utf-8"));
 
@@ -11,20 +11,14 @@ const PORT = 3000;
 const app = express();
 app.use(cors());
 
-export type BackendHotel = Hotel & {
-  updateCount: number;
-};
-
-const hotels: BackendHotel[] = [
-  { id: 1, name: "City Centre", updateCount: 0 },
-  { id: 2, name: "Messe", updateCount: 0 },
-  { id: 3, name: "Westend", updateCount: 0 },
-];
-
 app.get("/hotels", (request, response) => {
   response.send(JSON.stringify(hotels));
 });
 
+app.get("/rooms/:hotelId", (request, response) => {
+  response.send(JSON.stringify(rooms[+request.params.hotelId]));
+});
+
 app.listen(PORT, () => {
   console.info(`${APP_NAME} Listening on port ${PORT}...`);
 });

apps/frontend/core/src/components/HotelList.vue

@@ -8,6 +8,8 @@ const props = defineProps<{
 
 <template>
   <ul>
-    <li v-for="hotel of props.hotels" :key="hotel.id">{{ hotel.name }}</li>
+    <li v-for="hotel of props.hotels" :key="hotel.id">
+      <slot name="hotel" v-bind="hotel">{{ hotel.name }}</slot>
+    </li>
   </ul>
 </template>

apps/frontend/core/src/main.ts

@@ -1,6 +1,10 @@
 import "./assets/main.scss";
 import { routes } from "./routes";
+import HotelList from "./components/HotelList.vue";
+import { useHotelsStore } from "./stores/hotels.js";
 
-export default {
+export {
   routes,
+  HotelList,
+  useHotelsStore
 };

apps/frontend/core/src/stores/hotels.ts

@@ -1,4 +1,3 @@
-import { ref } from "vue";
 import { defineStore } from "pinia";
 
 export const useHotelsStore = defineStore('hotels', () => {
@@ -7,4 +6,4 @@ export const useHotelsStore = defineStore('hotels', () => {
   };
 
   return { fetchHotels };
-});
+});

apps/frontend/luggage/src/main.ts

@@ -1,6 +1,6 @@
 import "./assets/main.scss";
 import { routes } from "./routes";
 
-export default {
+export {
   routes,
 };

apps/frontend/rooms/package.json

@@ -17,6 +17,7 @@
     "lint": "run -T eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "hotel-management-frontend-core": "workspace:apps/frontend/core",
     "hotel-management-shared": "workspace:libs/shared"
   }
 }

apps/frontend/rooms/src/main.ts

@@ -1,6 +1,6 @@
 import "./assets/main.scss";
 import { routes } from "./routes";
 
-export default {
+export {
   routes,
 };

apps/frontend/rooms/src/pages/RoomsPage.vue

@@ -1,7 +1,37 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+import type { Hotel, Room } from "hotel-management-shared";
+import { HotelList, useHotelsStore } from "hotel-management-frontend-core";
+import { useRoomsStore } from "../stores/rooms.js";
+
+const loading = ref(true);
+
+const hotelsStore = useHotelsStore();
+const hotels = await hotelsStore.fetchHotels();
+
+const roomsStore = useRoomsStore();
+const rooms: Record<Hotel["id"], Room[]> = {};
+
+for (const hotel of hotels) {
+  rooms[hotel.id] = await roomsStore.fetchRoomsForHotel(hotel.id);
+}
+
+loading.value = false;
+</script>
 
 <template>
-  <div class="rooms">
-    <h1>Rooms</h1>
+  <div class="rooms" :aria-busy="loading">
+    <HotelList :hotels="hotels">
+      <template #hotel="hotel">
+        <li class="hotel">
+          <h3 class="hotel-name">{{ hotel.name }}</h3>
+          <ul>
+            <li class="room" v-for="room of rooms[hotel.id]" :key="room.id">
+              <h4>{{ room.name }}</h4>
+            </li>
+          </ul>
+        </li>
+      </template>
+    </HotelList>
   </div>
 </template>

apps/frontend/rooms/src/stores/rooms.ts

@@ -0,0 +1,10 @@
+import type { Hotel } from "hotel-management-shared";
+import { defineStore } from "pinia";
+
+export const useRoomsStore = defineStore('rooms', () => {
+  const fetchRoomsForHotel = async (hotelId: Hotel["id"]) => {
+    return await (await fetch(`http://localhost:3000/rooms/${hotelId}`)).json();
+  };
+
+  return { fetchRoomsForHotel };
+});