Add self-serve status toggle to DepartmentModulesDisplay and API endpoints for enable/disable actions

openapi.yaml

@@ -1244,18 +1244,68 @@ paths:
         - Departments
       summary: Remove category from department
       operationId: removeDepartmentCategory
-      parameters:
-        - name: department_id
-          in: query
-          required: true
-          schema: {type: integer}
-        - name: category_id
-          in: query
-          required: true
-          schema: {type: integer}
       responses:
         '200': {description: Success}
 
+  /departments/self-serve/enabled:
+    get:
+      tags:
+        - Departments
+      summary: Get department self-serve status
+      description: Check if self-serve is enabled for a specific department
+      operationId: getDepartmentSelfServeEnabled
+      parameters:
+        - name: id
+          in: query
+          required: true
+          description: Department ID
+          schema:
+            type: integer
+      responses:
+        '200':
+          description: Successfully retrieved status
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  enabled:
+                    type: boolean
+        '404':
+          $ref: '#/components/responses/NotFound'
+    put:
+      tags:
+        - Departments
+      summary: Update department self-serve status
+      description: Enable or disable self-serve for a specific department
+      operationId: updateDepartmentSelfServeEnabled
+      parameters:
+        - name: id
+          in: query
+          required: true
+          description: Department ID
+          schema:
+            type: integer
+        - name: enabled
+          in: query
+          required: true
+          description: Enabled status (true/false)
+          schema:
+            type: string
+            enum: ['true', 'false']
+      responses:
+        '200':
+          description: Status updated successfully
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  message:
+                    type: string
+        '404':
+          $ref: '#/components/responses/NotFound'
+
   /departments/order/recommended:
     get:
       tags:

src/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue

@@ -3,8 +3,12 @@ import {ref, watch} from 'vue';
 import { useRouter } from 'vue-router';
 import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
 import {BSwitch} from "buefy";
+import {useToast} from 'vue-toast-notification';
 
 const router = useRouter();
+const toast = useToast();
+
+const selfServeEnabled = ref(false);
 
 const modules = [
   {
@@ -74,8 +78,21 @@ const modules = [
     },
     count: ref(0),
     hasSwitch: true,
-    onToggle: (newValue) => {
-      console.log("Toggle wash lanes to: " + newValue);
+    switchValue: selfServeEnabled,
+    onToggle: async (newValue) => {
+      const departmentId = getDepartmentId();
+      if (!departmentId) return;
+      
+      try {
+        await authenticatedRequest(`/departments/self-serve/enabled?id=${departmentId}&enabled=${newValue}`, 'PUT');
+        selfServeEnabled.value = newValue;
+        toast.success(`Selvvask er nu ${newValue ? 'aktiveret' : 'deaktiveret'}`);
+      } catch (error) {
+        console.error("Failed to update self-serve status", error);
+        // Revert switch value on error
+        selfServeEnabled.value = !newValue;
+        toast.error("Kunne ikke opdatere selvvask status");
+      }
     }
   }
   /**
@@ -138,9 +155,25 @@ const getTodaysBookings = async () => {
 // Get the bookings
 getTodaysBookings();
 
+// Get the self-serve status
+const getSelfServeStatus = async () => {
+  const departmentId = getDepartmentId();
+  if (!departmentId) return;
+
+  try {
+    const response = await authenticatedRequest(`/departments/self-serve/enabled?id=${departmentId}`, 'GET');
+    selfServeEnabled.value = response.data.enabled;
+  } catch (error) {
+    console.error("Failed to fetch self-serve status", error);
+  }
+};
+
+getSelfServeStatus();
+
 // Watch the departmentId
 watch(() => router.currentRoute.value.params.departmentId, () => {
   getTodaysBookings();
+  getSelfServeStatus();
 });
 
 // Update the bookings every 30 seconds
@@ -163,7 +196,7 @@ setInterval(() => {
           <div class="is-pulled-right card-header-title pr-0">
             <span class="button is-small is-dark" @click="module.onClickCount" v-if="module.count.value > 0">{{ module.count.value }}</span>
             <span class="button is-small is-outlined" v-else-if="module?.hasSwitch" @click.stop>
-              <b-switch size="is-small" @change="module.onToggle" type="is-link"></b-switch>
+              <b-switch size="is-small" @change="module.onToggle" type="is-link" v-model="module.switchValue.value"></b-switch>
             </span>
           </div>
         </header>