fix:#5 updated packages and added table filter for

backend/service/addRoute.go

@@ -34,7 +34,7 @@ func AddRoutes(app *pocketbase.PocketBase) {
 			},
 			Middlewares: []echo.MiddlewareFunc{
 				apis.ActivityLogger(app),
-				// apis.RequireAdminAuth(),
+				apis.RequireAdminAuth(),
 			},
 		})
 		if err != nil {

frontend/package-lock.json

@@ -17,7 +17,7 @@
         "pinia": "^2.1.7",
         "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
-        "primevue": "^3.47.1",
+        "primevue": "^3.47.2",
         "source-sans": "^3.46.0",
         "vue": "^3.4.11",
         "vue-i18n": "^9.9.0",
@@ -1957,9 +1957,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001579",
+      "version": "1.0.30001580",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001580.tgz",
-      "integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==",
+      "integrity": "sha512-mtj5ur2FFPZcCEpXFy8ADXbDACuNFXg6mxVDqp7tqooX6l3zwm+d8EPoeOSIFRDvHs8qu7/SLFOGniULkcH2iA==",
       "dev": true,
       "funding": [
         {
@@ -2215,9 +2215,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.643",
+      "version": "1.4.645",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.643.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.645.tgz",
-      "integrity": "sha512-QHscvvS7gt155PtoRC0dR2ilhL8E9LHhfTQEq1uD5AL0524rBLAwpAREFH06f87/e45B9XkR6Ki5dbhbCsVEIg==",
+      "integrity": "sha512-EeS1oQDCmnYsRDRy2zTeC336a/4LZ6WKqvSaM1jLocEk5ZuyszkQtCpsqvuvaIXGOUjwtvF6LTcS8WueibXvSw==",
       "dev": true,
       "peer": true
     },
@@ -3685,9 +3685,9 @@
       "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
     },
     "node_modules/primevue": {
-      "version": "3.47.1",
+      "version": "3.47.2",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.47.1.tgz",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.47.2.tgz",
-      "integrity": "sha512-khBr3xu63dlsJDnLISlplMuS/2R1mqjEArpHQE1jpw8+S3dI5MTabnL6Q/RM+o6SYbknafMH/8mjwkO+m8Cvjw==",
+      "integrity": "sha512-/vgIhc2vxNW8amBGBJX/NMBgWi/THOwT0DIPgy/aswJ86x+uwLwGtjNz22c/uSE5UkHu4E5rpktWOJtFvTbRPg==",
       "peerDependencies": {
         "vue": "^3.0.0"
       }

frontend/package.json

@@ -22,7 +22,7 @@
     "pinia": "^2.1.7",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primevue": "^3.47.1",
+    "primevue": "^3.47.2",
     "source-sans": "^3.46.0",
     "vue": "^3.4.11",
     "vue-i18n": "^9.9.0",

frontend/src/view/FreeRooms.vue

@@ -1,35 +1,3 @@
-<script setup lang="ts">
-import { computed, Ref, ref } from "vue";
-import DynamicPage from "@/view/DynamicPage.vue";
-import { requestFreeRooms } from "@/api/requestFreeRooms.ts";
-
-const date: Ref<Date> = ref(new Date(Date.now()));
-const start: Ref<Date> = ref(new Date(Date.now()));
-const end: Ref<Date> = ref(new Date(Date.now() + 3600000));
-
-async function loadFreeRooms(): Promise<void> {
-  availableRooms.value = [];
-  const startDate = new Date(date.value.getTime());
-  startDate.setHours(start.value.getHours());
-  startDate.setMinutes(start.value.getMinutes());
-  const endDate = new Date(date.value.getTime());
-  endDate.setHours(end.value.getHours());
-  endDate.setMinutes(end.value.getMinutes());
-  await requestFreeRooms(startDate.toISOString(), endDate.toISOString()).then((data) => {
-    availableRooms.value = data.map((room, index) => {
-      return { id: index, room: room };
-    });
-  });
-}
-
-const isLater = computed(() => {
-  return start.value > end.value;
-});
-
-const availableRooms: Ref<{id: number, room: string}[]> = ref([]);
-
-</script>
-
 <template>
   <DynamicPage
     :hide-content="availableRooms.length === 0"
@@ -69,14 +37,55 @@ const availableRooms: Ref<{id: number, room: string}[]> = ref([]);
             />
     </template>
     <template #content>
-      <DataTable :value="availableRooms">
+      <DataTable v-model:filters="filters" :value="availableRooms" data-key="id" filter-display="row" paginator :rows="10" :global-filter-fields="['room']" >
         <Column field="id" header="ID"></Column>
-        <Column field="room" header="Room"></Column>
+        <Column field="room" sortable header="Room">
+          <template #filter="{ filterModel, filterCallback }">
+            <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by Room" @input="filterCallback()" />
+          </template>
+        </Column>
       </DataTable>
     </template>
   </DynamicPage>
 </template>
 
+<script setup lang="ts">
+import { computed, Ref, ref } from "vue";
+import DynamicPage from "@/view/DynamicPage.vue";
+import { requestFreeRooms } from "@/api/requestFreeRooms.ts";
+import { FilterMatchMode } from "primevue/api";
+
+const filters = ref({
+  room: { value: null, matchMode: FilterMatchMode.CONTAINS },
+});
+
+const date: Ref<Date> = ref(new Date(Date.now()));
+const start: Ref<Date> = ref(new Date(Date.now()));
+const end: Ref<Date> = ref(new Date(Date.now() + 3600000));
+
+async function loadFreeRooms(): Promise<void> {
+  availableRooms.value = [];
+  const startDate = new Date(date.value.getTime());
+  startDate.setHours(start.value.getHours());
+  startDate.setMinutes(start.value.getMinutes());
+  const endDate = new Date(date.value.getTime());
+  endDate.setHours(end.value.getHours());
+  endDate.setMinutes(end.value.getMinutes());
+  await requestFreeRooms(startDate.toISOString(), endDate.toISOString()).then((data) => {
+    availableRooms.value = data.map((room, index) => {
+      return { id: index, room: room };
+    });
+  });
+}
+
+const isLater = computed(() => {
+  return start.value > end.value;
+});
+
+const availableRooms: Ref<{id: number, room: string}[]> = ref([]);
+
+</script>
+
 <style scoped>
 .break {
   flex-basis: 100%;