Merge pull request 'finished customer pages' (#26) from clientPages into main

Reviewed-on: jo.kuehner/TueIT_App#26

backend/controller/departments.js

@@ -0,0 +1,89 @@
+import {
+    getDepartmentById,
+    getDepartmentsByCustomerId,
+    updateDepartmentById,
+    insertDepartment,
+    getSelectedDepartmentsByName,
+    deleteDepartmentById,
+    getDepartmentByName
+} from "../models/departmentsModel.js";
+
+//get single department by id
+export const showDepartmentById = (req, res) => {
+    getDepartmentById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get single department by name
+export const showDepartmentByName = (req, res) => {
+    getDepartmentByName(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get departments by customer id
+export const showDepartmentByCustomerId = (req, res) => {
+    getDepartmentsByCustomerId(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update department
+export const updateDepartment = (req, res) => {
+    const data = req.body;
+    updateDepartmentById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new department
+export const createDepartment = (req, res) => {
+    const data = req.body;
+    insertDepartment(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected departments by name
+export const showSelectedDepartmentsByName = (req, res) => {
+    getSelectedDepartmentsByName(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete department
+export const deleteDepartment = (req, res) => {
+    const id = req.params.id;
+    deleteDepartmentById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/employees.js

@@ -0,0 +1,101 @@
+import {
+    getEmployeeById,
+    getEmployeesByCustomerId,
+    updateEmployeeById,
+    insertEmployee,
+    getSelectedEmployeesByName,
+    deleteEmployeeById,
+    getSelectedEmployeesByDepartment,
+    getSelectedEmployeesByDepartmentName,
+} from "../models/employeesModel.js";
+
+//get single employee by id
+export const showEmployeeById = (req, res) => {
+    getEmployeeById(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get employees by customer id
+export const showEmployeeByCustomerId = (req, res) => {
+    getEmployeesByCustomerId(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get employees by customer id
+export const showEmployeeByDepartmentId = (req, res) => {
+    getSelectedEmployeesByDepartment(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Update employee
+export const updateEmployee = (req, res) => {
+    const data = req.body;
+    updateEmployeeById(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//create new employee
+export const createEmployee = (req, res) => {
+    const data = req.body;
+    insertEmployee(data, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected employees by name
+export const showSelectedEmployeesByName = (req, res) => {
+    getSelectedEmployeesByName(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected employees by name
+export const showSelectedEmployeesByDepartmentName = (req, res) => {
+    getSelectedEmployeesByDepartmentName(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+// Delete employee
+export const deleteEmployee = (req, res) => {
+    const id = req.params.id;
+    deleteEmployeeById(id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};

backend/controller/maintenanceVisitTodos.js

@@ -5,6 +5,8 @@ import {
   getMaintenanceVisitTodosByAsset,
   updateMaintenanceVisitTodoById,
   deleteMaintenanceVisitTodosByPrimaryID,
+  deleteMaintenanceVisitTodosByTemplateID,
+  getMaintenanceVisitTodosByTemplate,
 } from "../models/maintenanceVisitsTodosModel.js";
 
 //create new maintenance visit todo
@@ -41,6 +43,17 @@ export const showMaintenanceVisitTodosByAsset = (req, res) => {
   });
 };
 
+//get maintenance visit todos by assetname
+export const showMaintenanceVisitTodosByTemplateId = (req, res) => {
+  getMaintenanceVisitTodosByTemplate(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
 // Update maintenance visit todo
 export const updateMaintenanceVisitTodo = (req, res) => {
   const data = req.body;
@@ -63,4 +76,16 @@ export const deleteMaintenanceVisitTodos = (req, res) => {
       res.json(results);
     }
   });
+};
+
+// Delete maintenance visit todos by template id
+export const deleteMaintenanceVisitTodosBytemplateId = (req, res) => {
+  const id = req.params.id;
+  deleteMaintenanceVisitTodosByTemplateID(id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
 };

backend/controller/maintenanceVisits.js

@@ -9,7 +9,9 @@ import {
   insertMaintenanceVisit,
   getMaintenanceVisitByName,
   getMaintenanceVisitById,
-  updateMaintenanceVisitStateById,
+  updateMaintenanceVisitById,
+  getSelectedMaintenanceVisitsByUser,
+  getSelectedMaintenanceVisitsByTemplate,
 } from "../models/maintenanceVisitsModel.js";
 
 //get all maintenance visits
@@ -34,6 +36,28 @@ export const showSelectedMaintenanceVisitsByChecklistname = (req, res) => {
   });
 };
 
+//get all selected maintenance visits by user
+export const showSelectedMaintenanceVisitsByUser = (req, res) => {
+  getSelectedMaintenanceVisitsByUser(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get all selected maintenance visits by template
+export const showSelectedMaintenanceVisitsByTemplate = (req, res) => {
+  getSelectedMaintenanceVisitsByTemplate(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
 //get all selected maintenance visits by customer
 export const showSelectedMaintenanceVisitsByCustomer = (req, res) => {
   getSelectedMaintenanceVisitsByCustomer(req.params.id, (err, results) => {
@@ -114,9 +138,9 @@ export const showMaintenanceVisitById = (req, res) => {
 };
 
 // Update maintenance visit
-export const updateMaintenanceVisitState = (req, res) => {
+export const updateMaintenanceVisit = (req, res) => {
   const data = req.body;
-  updateMaintenanceVisitStateById(data, (err, results) => {
+  updateMaintenanceVisitById(data, (err, results) => {
     if (err) {
       res.send(err);
     } else {

backend/controller/productionOrderTodos.js

@@ -5,6 +5,7 @@ import {
     getProductionOrderTodosByAsset,
     updateProductionOrderTodoById,
     deleteProductionOrderTodosChecklistID,
+    getProductionOrderTodosByTemplate,
 } from "../models/productionOrdersTodosModel.js";
 
 //create new production order todo
@@ -41,6 +42,18 @@ export const showProductionOrderTodosByAsset = (req, res) => {
     });
 };
 
+
+//get production order todos by template
+export const showProductionOrderTodosByTemplate = (req, res) => {
+    getProductionOrderTodosByTemplate(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
 // Update production order todo
 export const updateProductionOrderTodo = (req, res) => {
     const data = req.body;

backend/controller/productionOrders.js

@@ -10,7 +10,9 @@ import {
     getProductionOrderByName,
     deleteProductionOrderById,
     getProductionOrderById,
-    updateProductionOrderStateById,
+    updateProductionOrderById,
+    getSelectedProductionOrdersByTemplate,
+    getSelectedProductionOrdersByUser,
 } from "../models/productionOrdersModel.js";
 
 //get all production orders
@@ -46,6 +48,28 @@ export const showSelectedProductionOrdersByCustomer = (req, res) => {
     });
 };
 
+//get all selected production orders by user
+export const showSelectedProductionOrdersByUser = (req, res) => {
+    getSelectedProductionOrdersByUser(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected production orders by template
+export const showSelectedProductionOrdersByTemplate = (req, res) => {
+    getSelectedProductionOrdersByTemplate(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
 //get all selected production orders by ticketnumber
 export const showSelectedProductionOrdersByTicketnumber = (req, res) => {
     getSelectedProductionOrdersByTicketnumber(req.params.id, (err, results) => {
@@ -126,9 +150,9 @@ export const showProductionOrderById = (req, res) => {
 };
 
 // Update production order
-export const updateProductionOrderState = (req, res) => {
+export const updateProductionOrder = (req, res) => {
     const data = req.body;
-    updateProductionOrderStateById(data, (err, results) => {
+    updateProductionOrderById(data, (err, results) => {
         if (err) {
             res.send(err);
         } else {

backend/models/configItemsModel.js

@@ -56,7 +56,7 @@ export const getConfigItemByCustomerId = async (customerId, result) => {
   }
 };
 
-// Update customer to Database
+// Update config item to Database
 export const updateConfigItemById = async (data, result) => {
   const id = data.primaryID;
   try {

backend/models/customerModel.js

@@ -63,7 +63,8 @@ export const getCustomerByMaintenanceVisitId = async (id, result) => {
 //insert customer to databased
 export const insertCustomer = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO customers(customername, contactperson, EMail, phonenumber, address, postcode, city, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?)`, [data.customername, data.contactperson, data.EMail, data.phonenumber, data.address, data.postcode, data.city, data.notes])
+        const results = await ownConn.query(`INSERT INTO customers(customername, contactperson, EMail, secondEMail, thirdEMail, phonenumber, secondPhonenumber, thirdPhonenumber, street, no, postcode, city, secondStreet, secondNo, secondPostcode, secondCity, thirdStreet, thirdNo, thirdPostcode, thirdCity, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.customername, data.contactperson, data.EMail, data.secondEMail, data.thirdEMail, data.phonenumber, data.secondPhonenumber, data.thirdPhonenumber, data.street, data.no,  data.postcode, data.city, data.secondStreet, data.secondNo, data.secondPostcode, data.secondCity, data.thirdStreet, data.thirdNo, data.thirdPostcode, data.thirdCity, data.notes])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -105,8 +106,9 @@ export const getCustomerByName = async (id, result) => {
 export const updateCustomerById = async (data, result) => {
     const id = data.customerID;
     try {
-        let sql = `UPDATE customers SET customername = ?, contactperson = ?, EMail = ?, phonenumber = ?, address = ?,  postcode = ?, city = ?, notes = ? WHERE customerID = ?`;
-        const results = await ownConn.query(sql, [data.customername, data.contactperson, data.EMail, data.phonenumber, data.address, data.postcode, data.city, data.notes, id]);
+        let sql = `UPDATE customers SET customername = ?, contactperson = ?, EMail = ?, secondEMail = ?, thirdEMail = ?, phonenumber = ?, secondPhonenumber = ?, thirdPhonenumber = ?, street = ?, no = ?, postcode = ?, city = ?, secondStreet = ?, secondNo = ?, secondPostcode = ?, secondCity = ?, thirdStreet = ?, thirdNo = ?, thirdPostcode = ?, thirdCity = ?,  notes = ? WHERE customerID = ?`;
+        const results = await ownConn.query(sql, [data.customername, data.contactperson, data.EMail, data.secondEMail, data.thirdEMail, data.phonenumber, data.secondPhonenumber, data.thirdPhonenumber, data.street, data.no,  data.postcode, data.city, data.secondStreet, data.secondNo, data.secondPostcode, data.secondCity, data.thirdStreet, data.thirdNo, data.thirdPostcode, data.thirdCity, data.notes, id]);
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -122,6 +124,7 @@ export const deleteCustomerById = async (id, result) => {
     try {
         let sql = `DELETE FROM customers WHERE customerID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

backend/models/departmentsModel.js

@@ -0,0 +1,102 @@
+import ownConn from "../dbConfig.js";
+
+//get single department by id
+export const getDepartmentById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM customerdepartment WHERE primaryID = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get departments by customer id
+export const getDepartmentsByCustomerId = async (customerId, result) => {
+    try {
+        let sql = `SELECT * FROM customerdepartment WHERE customerID = ? ORDER BY name ASC`;
+        const results = await ownConn.query(sql, [customerId])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update department to Database
+export const updateDepartmentById = async (data, result) => {
+    const id = data.primaryID;
+    try {
+        let sql = `UPDATE customerdepartment SET name = ?, head = ?, notes = ? WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [data.name, data.head, data.notes, id]);
+        results.insertId = results.insertId.toString();
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert department to databased
+export const insertDepartment = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO customerdepartment(customerID, customername, name, head, notes) VALUES(?, ?, ?, ?, ?)`, [data.customerID, data.customername, data.name, data.head, data.notes])
+        results.insertId = results.insertId.toString();
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected departments by name
+export const getSelectedDepartmentsByName = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM customerdepartment WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete department to Database
+export const deleteDepartmentById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM customerdepartment WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get single department by name
+export const getDepartmentByName = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM customerdepartment  WHERE name = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/employeesModel.js

@@ -0,0 +1,116 @@
+import ownConn from "../dbConfig.js";
+
+//get single employee by id
+export const getEmployeeById = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM customeremployees WHERE primaryID = ?`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results[0]);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get employees by customer id
+export const getEmployeesByCustomerId = async (customerId, result) => {
+    try {
+        let sql = `SELECT * FROM customeremployees WHERE customerID = ? ORDER BY name ASC`;
+        const results = await ownConn.query(sql, [customerId])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Update employee to Database
+export const updateEmployeeById = async (data, result) => {
+    const id = data.primaryID;
+    try {
+        let sql = `UPDATE customeremployees SET name = ?, pronouns = ?, title = ?, firstName = ?, lastName = ?, preferredName = ?, department = ?, departmentID = ?, jobTitle = ?, phonenumber = ?, eMail = ?, notes = ? WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [data.name, data.pronouns, data.title, data.firstName, data.lastName, data.preferredName, data.department, data.departmentID, data.jobTitle, data.phonenumber, data.eMail, data.notes, id]);
+        results.insertId = results.insertId.toString();
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//insert employee to databased
+export const insertEmployee = async (data, result) => {
+    try {
+        const results = await ownConn.query(`INSERT INTO customeremployees(customerID, customername, name, pronouns, title, firstName, lastName, preferredName, department, departmentID, jobTitle, phonenumber, eMail, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.customerID, data.customername, data.name, data.pronouns, data.title, data.firstName, data.lastName, data.preferredName, data.department, data.departmentID, data.jobTitle, data.phonenumber, data.eMail, data.notes])
+        results.insertId = results.insertId.toString();
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected employees by name
+export const getSelectedEmployeesByName = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM customeremployees WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected employees by department name
+export const getSelectedEmployeesByDepartmentName = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM customeremployees WHERE LOWER(department) LIKE '%${selected.toLowerCase()}%' ORDER BY department ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected employees by departmentID
+export const getSelectedEmployeesByDepartment = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM customeremployees WHERE departmentID = ? ORDER BY name ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+// Delete employee to Database
+export const deleteEmployeeById = async (id, result) => {
+    try {
+        let sql = `DELETE FROM customeremployees WHERE primaryID = ?`;
+        const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};

backend/models/maintenanceVisitsModel.js

@@ -28,6 +28,34 @@ export const getSelectedMaintenanceVisitsByChecklistname = async (selected, resu
   }
 };
 
+//get all selected maintenance visits by template
+export const getSelectedMaintenanceVisitsByTemplate = async (selected, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisits WHERE templateID = ? ORDER BY name ASC`;
+    const results = await ownConn.execute(sql, [selected])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//get all selected maintenance visits by user
+export const getSelectedMaintenanceVisitsByUser = async (selected, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisits WHERE LOWER(user) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
+    const results = await ownConn.execute(sql)
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
 //get all selected maintenance visits by customer
 export const getSelectedMaintenanceVisitsByCustomer = async (selected, result) => {
   try {
@@ -75,6 +103,7 @@ export const deleteMaintenanceVisitById = async (id, result) => {
   try {
     let sql = `DELETE FROM maintenancevisits WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {
@@ -127,11 +156,11 @@ export const getMaintenanceVisitById = async (id, result) => {
 };
 
 // Update maintenance visit state to Database
-export const updateMaintenanceVisitStateById = async (data, result) => {
+export const updateMaintenanceVisitById = async (data, result) => {
   try {
     const id = data.primaryID;
-    let sql = `UPDATE maintenancevisits SET state = ? WHERE primaryID = ?`;
-    const results = await ownConn.query(sql, [data.state, id])
+    let sql = `UPDATE maintenancevisits SET primaryID = ?, name = ?, templateID = ?, maintenanceType = ?, state = ?, creationDate = ?, completionDate = ?, user = ?, customer = ?, customerID = ?, templateNotes = ?, type = ?, timeSpent = ?, notes = ? WHERE primaryID = ?`;
+    const results = await ownConn.query(sql, [data.primaryID, data.name, data.templateID, data.maintenanceType, data.state, data.creationDate, data.completionDate, data.user, data.customer, data.customerID, data.templateNotes, data.type, data.timeSpent, data.notes, id])
     results.insertId = results.insertId.toString();
     result(null, results);
   }

backend/models/maintenanceVisitsTodosModel.js

@@ -42,12 +42,26 @@ export const getMaintenanceVisitTodosByAsset = async (id, result) => {
   }
 };
 
+//get maintenance visit todo by template
+export const getMaintenanceVisitTodosByTemplate = async (id, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisittodos WHERE templateID = ? ORDER BY primaryID ASC`;
+    const results = await ownConn.execute(sql, [id])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
 // Update maintenance visit todo to Database
 export const updateMaintenanceVisitTodoById = async (data, result) => {
   try {
     const id = data.primaryID;
     let sql = `UPDATE maintenancevisittodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE primaryID = ?`;
-    const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, id])
+    const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, data.done, id])
     results.insertId = results.insertId.toString();
     result(null, results);
   }
@@ -63,6 +77,22 @@ export const deleteMaintenanceVisitTodosByPrimaryID = async (id, result) => {
   try {
     let sql = `DELETE FROM maintenancevisittodos WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+// Delete maintenance visit todos by template to Database
+export const deleteMaintenanceVisitTodosByTemplateID = async (id, result) => {
+  try {
+    let sql = `DELETE FROM maintenancevisittodos WHERE templateID = ?`;
+    const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {

backend/models/productionOrdersModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get all production orders
 export const getProductionOrders = async (result) => {
     try {
-        let sql = `SELECT * FROM productionorders ORDER BY name ASC`;
+        let sql = `SELECT * FROM productionorders ORDER BY ticketNumber ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -17,7 +17,7 @@ export const getProductionOrders = async (result) => {
 //get all selected production orders by ticketnumber
 export const getSelectedProductionOrdersByTicketnumber = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionorders WHERE ticketNumber LIKE '%${selected}%' ORDER BY ticketNumber ASC`;
+        let sql = `SELECT * FROM productionorders WHERE ticketNumber = ? ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -42,6 +42,34 @@ export const getSelectedProductionOrdersByCustomer = async (selected, result) =>
     }
 };
 
+//get all selected production orders by user
+export const getSelectedProductionOrdersByUser = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM productionorders WHERE LOWER(user) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected production orders by template
+export const getSelectedProductionOrdersByTemplate = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM productionorders WHERE templateID = ? ORDER BY name ASC`;
+        const results = await ownConn.execute(sql, [selected])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
 //get all selected production orders by state
 export const getSelectedProductionOrdersByState = async (selected, result) => {
     try {
@@ -89,6 +117,7 @@ export const deleteProductionOrderById = async (id, result) => {
     try {
         let sql = `DELETE FROM productionorders WHERE ticketNumber = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -141,11 +170,11 @@ export const getProductionOrderById = async (id, result) => {
 };
 
 // Update production order state to Database
-export const updateProductionOrderStateById = async (data, result) => {
+export const updateProductionOrderById = async (data, result) => {
     const id = data.ticketNumber;
     try {
-        let sql = `UPDATE productionorders SET state = ? WHERE ticketNumber = ?`;
-        const results = await ownConn.query(sql, [data.state, id])
+        let sql = `UPDATE productionorders SET name = ?, templateID = ?, customer = ?, customerID = ?, asset = ?, state = ?, creationDate = ?, completionDate = ?, user = ?, templateDescription = ?, templateNotes = ?, timeSpent = ?, notes = ? WHERE ticketNumber = ?`;
+        const results = await ownConn.query(sql, [data.name, data.templateID, data.customer, data.customerID, data.asset, data.state, data.creationDate, data.completionDate, data.user, data.templateDescription, data.templateNotes, data.timeSpent, data.notes, id])
         results.insertId = results.insertId.toString();
         result(null, results);
     }

backend/models/productionOrdersTodosModel.js

@@ -4,6 +4,7 @@ import ownConn from "../dbConfig.js";
 export const insertProductionOrderTodo = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO productionordertodos(templateID, step, asset, task, comment, done) VALUES(?, ?, ?, ?, ?, ?)`, [data.templateID, data.step, data.asset, data.task, data.comment, data.done]);
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -27,7 +28,7 @@ export const getProductionOrderTodosById = async (id, result) => {
     }
 };
 
-//get single production order todo by asset
+//get production order todo by asset
 export const getProductionOrderTodosByAsset = async (id, result) => {
     try {
         let sql = `SELECT * FROM productionordertodos WHERE asset = ? ORDER BY primaryID ASC`;
@@ -41,12 +42,27 @@ export const getProductionOrderTodosByAsset = async (id, result) => {
     }
 };
 
+//get production order todo by template
+export const getProductionOrderTodosByTemplate = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM productionordertodos WHERE templateID = ? ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
 // Update production order todo to Database
 export const updateProductionOrderTodoById = async (data, result) => {
     try {
         const id = data.primaryID;
         let sql = `UPDATE productionordertodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, data.done, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -61,6 +77,7 @@ export const deleteProductionOrderTodosChecklistID = async (id, result) => {
     try {
         let sql = `DELETE FROM productionordertodos WHERE templateID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

backend/routes/routes.js

@@ -19,11 +19,13 @@ import {
     showSelectedMaintenanceVisitsByCustomer,
     showSelectedMaintenanceVisitsByState,
     showSelectedMaintenanceVisitsByDate,
+    showSelectedMaintenanceVisitsByTemplate,
+    showSelectedMaintenanceVisitsByUser,
     deleteMaintenanceVisit,
     createMaintenanceVisit,
     showMaintenanceVisitByName,
     showMaintenanceVisitById,
-    updateMaintenanceVisitState,
+    updateMaintenanceVisit,
 } from "../controller/maintenanceVisits.js"
 
 import {
@@ -32,6 +34,8 @@ import {
     showMaintenanceVisitTodosByAsset,
     updateMaintenanceVisitTodo,
     deleteMaintenanceVisitTodos,
+    deleteMaintenanceVisitTodosBytemplateId,
+    showMaintenanceVisitTodosByTemplateId,
 } from "../controller/maintenanceVisitTodos.js"
 
 import {
@@ -60,17 +64,20 @@ import {
     showSelectedProductionOrdersByTicketnumber,
     showSelectedProductionOrdersByDate,
     showSelectedProductionOrdersByState,
+    showSelectedProductionOrdersByTemplate,
+    showSelectedProductionOrdersByUser,
     deleteProductionOrder,
     createProductionOrder,
     showProductionOrderByName,
     showProductionOrderById,
-    updateProductionOrderState,
+    updateProductionOrder,
 } from "../controller/productionOrders.js";
 
 import {
     createProductionOrderTodos,
     showProductionOrderTodosById,
     showProductionOrderTodosByAsset,
+    showProductionOrderTodosByTemplate,
     updateProductionOrderTodo,
     deleteProductionOrderTodos,
 } from "../controller/productionOrderTodos.js";
@@ -106,6 +113,27 @@ import {
     deleteCustomer,
 } from "../controller/customers.js";
 
+import {
+    showDepartmentById,
+    showDepartmentByCustomerId,
+    updateDepartment,
+    createDepartment,
+    showSelectedDepartmentsByName,
+    deleteDepartment,
+    showDepartmentByName
+} from "../controller/departments.js";
+
+import {
+    showEmployeeById,
+    showEmployeeByCustomerId,
+    showEmployeeByDepartmentId,
+    updateEmployee,
+    createEmployee,
+    showSelectedEmployeesByName,
+    showSelectedEmployeesByDepartmentName,
+    deleteEmployee,
+} from "../controller/employees.js";
+
 import {
     signUp,
     updatePasswordById,
@@ -363,6 +391,55 @@ router.post("/customers", createCustomer);
 
 
 
+// routes with departments:
+//get single department by id
+router.get("/department/:id", showDepartmentById);
+
+//get single department by name
+router.get("/departmentByName/:id", showSelectedDepartmentsByName);
+
+//get departments by customerid
+router.get("/departmentByCustomerID/:id", showDepartmentByCustomerId);
+
+// Update department
+router.put("/department", updateDepartment);
+
+// Create New department
+router.post("/departments", createDepartment);
+
+//get single department by name
+router.get("/departmentName/:id", showDepartmentByName);
+
+// Delete department
+router.delete("/departments/:id", deleteDepartment);
+
+
+// routes with employees:
+//get single employee by id
+router.get("/employee/:id", showEmployeeById);
+
+//get employees by name
+router.get("/employeeByName/:id", showSelectedEmployeesByName);
+
+//get employees by department name
+router.get("/employeeByDepartmentName/:id", showSelectedEmployeesByDepartmentName);
+
+//get employees by customerid
+router.get("/employeeByCustomerID/:id", showEmployeeByCustomerId);
+
+//get employees by departmentid
+router.get("/employeeByDeprtmentID/:id", showEmployeeByDepartmentId);
+
+// Update employee
+router.put("/employee", updateEmployee);
+
+// Create New employee
+router.post("/employees", createEmployee);
+
+// Delete employee
+router.delete("/employees/:id", deleteEmployee);
+
+
 // routes with config items:
 // get all config items
 router.get("/configItems", showConfigItems);
@@ -409,6 +486,12 @@ router.get("/selectedProductionOrdersByCustomer/:id", showSelectedProductionOrde
 //get all production orders by selected state
 router.get("/selectedProductionOrdersByState/:id", showSelectedProductionOrdersByState)
 
+//get all production orders by selected template
+router.get("/selectedProductionOrdersByTemplate/:id", showSelectedProductionOrdersByTemplate)
+
+//get all production orders by selected user
+router.get("/selectedProductionOrdersByUser/:id", showSelectedProductionOrdersByUser)
+
 //get all production orders by selected date
 router.get("/selectedProductionOrdersByDate/:id", showSelectedProductionOrdersByDate)
 
@@ -424,9 +507,8 @@ router.get("/productionOrderByName/:id", showProductionOrderByName);
 //get single production order by ticketNumber
 router.get("/productionOrder/:id", showProductionOrderById);
 
-// Update production order state
-router.put("/productionOrderState", updateProductionOrderState);
-
+// Update production order
+router.put("/productionOrder", updateProductionOrder);
 
 
 // routes with production order todos:
@@ -439,10 +521,13 @@ router.get("/productionOrderTodos/:id", showProductionOrderTodosById);
 //get all production order todos by assetname
 router.get("/productionOrderTodosByAsset/:id", showProductionOrderTodosByAsset);
 
+//get all production order todos by template id
+router.get("/productionOrderTodosByTemplateID/:id", showProductionOrderTodosByTemplate);
+
 // Update production order todo
 router.put("/productionOrderTodos", updateProductionOrderTodo);
 
-// Delete production order todos
+// Delete production order todo
 router.delete("/productionOrderTodos/:id", deleteProductionOrderTodos);
 
 
@@ -460,6 +545,12 @@ router.get("/selectedMaintenanceVisitsByDate/:id", showSelectedMaintenanceVisits
 //get all maintenance visits by selected customer
 router.get("/selectedMaintenanceVisitsByCustomer/:id", showSelectedMaintenanceVisitsByCustomer)
 
+//get all maintenance visits by selected user
+router.get("/selectedMaintenanceVisitsByUser/:id", showSelectedMaintenanceVisitsByUser)
+
+//get all maintenance visits by selected template
+router.get("/selectedMaintenanceVisitsByTemplate/:id", showSelectedMaintenanceVisitsByTemplate)
+
 //get all maintenance visits by selected state
 router.get("/selectedMaintenanceVisitsByState/:id", showSelectedMaintenanceVisitsByState)
 
@@ -475,8 +566,8 @@ router.get("/maintenanceVisitByName/:id", showMaintenanceVisitByName);
 //get single maintenance visit by primaryId
 router.get("/maintenanceVisit/:id", showMaintenanceVisitById);
 
-// Update maintenance visit state
-router.put("/maintenanceVisitState", updateMaintenanceVisitState);
+// Update maintenance visit
+router.put("/maintenanceVisit", updateMaintenanceVisit);
 
 
 
@@ -490,12 +581,18 @@ router.get("/maintenanceVisitTodos/:id", showMaintenanceVisitTodosById);
 //get all maintenance visit todos by assetname
 router.get("/maintenanceVisitTodosByAsset/:id", showMaintenanceVisitTodosByAsset);
 
+//get all maintenance visit todos by template id
+router.get("/maintenanceVisitTodosByTemplateId/:id", showMaintenanceVisitTodosByTemplateId);
+
 // Update maintenance visit todo
 router.put("/maintenanceVisitTodos", updateMaintenanceVisitTodo);
 
 // Delete maintenance visit todos
 router.delete("/maintenanceVisitTodos/:id", deleteMaintenanceVisitTodos);
 
+// Delete maintenance visit todos by template id
+router.delete("/maintenanceVisitTodosByTemplateID/:id", deleteMaintenanceVisitTodosBytemplateId);
+
 
 
 // routes with issue slips:

components/ClientSearch.vue

@@ -0,0 +1,127 @@
+<template>
+    <section :class="['fixed-customer-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customer:</div>
+        <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ customer.customername }}</pre>
+    </section>
+</template>
+
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const customer = ref({});
+const chosenCustomerId = computed(() => store.state.chosenCustomerId);
+
+const darkMode = ref('');
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+// get customer from id
+const getCustomerById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerById/${chosenCustomerId.value}`
+        );
+        customer.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getCustomerById();
+});
+</script>
+
+<script>
+export default {
+    name: "ClientSearch",
+};
+</script>
+
+
+<style scoped>
+.fixed-customer-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.label {
+    width: 4.188em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.pre-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+</style>

components/Dashboard.vue

@@ -2,14 +2,22 @@
   <section :class="['dashboard', darkMode ? 'section-darkmode' : 'section-lightmode']">
     <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">My tasks</h2>
     <div class="shortcuts">
-      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits"
-        value="My Maintenance Visits">
-      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
-        value="My Production Orders">
-      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions"
+      <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
+        :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+        @click="goToMVIList()">
+        <button :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits">My
+          Maintenance Visits</button>
+      </nuxt-link>
+      <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+        :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+        @click="goToPOIList()">
+        <button :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders">My
+          Production Orders</button>
+      </nuxt-link>
+      <!-- <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions"
         value="My Solutions">
       <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips"
-        value="My Issue Slips">
+        value="My Issue Slips"> -->
     </div>
   </section>
 </template>
@@ -24,6 +32,7 @@ const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 const modeChangedLocalstorage = computed(() => store.state.modeDashboard);
 const darkMode = ref('');
+const loggedInUsername = ref('');
 
 const getSession = async () => {
   if (modeChangedLocalstorage.value) {
@@ -37,6 +46,18 @@ const getSession = async () => {
   }
 }
 
+const goToMVIList = () => {
+  store.commit('activateFilteredUserTerm');
+  store.commit('activateFiltered');
+  store.commit('changeToInstancelist');
+};
+
+const goToPOIList = () => {
+  store.commit('activateFilteredUserTerm');
+  store.commit('activateFiltered'); 
+  store.commit('changeToInstancelist');
+};
+
 function getItem(item) {
   if (process.client) {
     return localStorage.getItem(item)
@@ -105,7 +126,8 @@ export default {
   gap: 2.5rem;
 }
 
-input {
+input,
+button {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -120,6 +142,10 @@ input {
   font: 400 0.875rem/2rem Overpass, sans-serif;
 }
 
+button:hover {
+  cursor: pointer;
+}
+
 .input-darkmode {
   color: #fff;
   background-color: #343434;

components/LoginForm.vue

@@ -42,7 +42,6 @@
     <div class="buttons">
       <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
         @click="handleLogin">
-      <!-- <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="signup-button" value="Signup" @click="testFunctionSignup"> -->
     </div>
   </form>
 </template>
@@ -90,21 +89,7 @@ const handleLogin = async () => {
   }
 
   try {
-    /*let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
-
-    const sessionToken = useCookie('token', {maxAge: 604800, sameSite: true});
-    sessionToken.value = res.data.token;
-    Axios.defaults.headers.common['Authorization'] = `${username}`;
-    const userToken = useCookie('user', {maxAge: 604800, sameSite: true});
-    userToken.value = username;
-    // something to do with the res?
-    console.log(sessionToken)
-    console.log(res.data.message)
-
-    // sucessfully logged in
-    router.push('/home')*/
     let resBody = await signIn(credentials, { callbackUrl: '/home' })
-    // let resBody = await signIn(credentials, { callbackUrl: await delayRedirect(callbackUrl, delayInSeconds * 1000) });
     try {
       const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`);
       setItem('logged-in-bool', true);
@@ -139,68 +124,6 @@ const handleLogin = async () => {
   }
 }
 
-// const testFunctionSignup = async () => {
-//   isError.value = false;
-//   errorMsg.value = '';
-
-//   const username = 'adm_tueit'
-//   const password = 'SvF=?bfEx7_hV,cMEu4m'
-//   const password_repeat = 'SvF=?bfEx7_hV,cMEu4m'
-//   const fullName = 'administrator'
-//   const email = 'support@tueit.de'
-//   const phonenumber = ''
-//   const address = ''
-//   const city = ''
-//   const postcode = ''
-//   const adminBool = true
-//   const technician1Bool = false
-//   const technician2Bool = false
-//   const technicianMonitoringBool = false
-//   const merchantBool = false
-//   const internBool = true
-
-//   const requestBody = {
-//     username: username,
-//     password: password,
-//     password_repeat: password_repeat,
-//     fullName: fullName,
-//     email: email,
-//     phonenumber: phonenumber,
-//     address: address,
-//     city: city,
-//     postcode: postcode,
-//     adminBool: adminBool,
-//     technician1Bool: technician1Bool,
-//     technician2Bool: technician2Bool,
-//     technicianMonitoringBool: technicianMonitoringBool,
-//     merchantBool: merchantBool,
-//     internBool: internBool,
-//   }
-
-//   try {
-
-//     let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/signup`, requestBody);
-
-//     // something to do with the res?
-//     // console.log(res)
-
-//   } catch (err) {
-//     // handle the error 
-//     console.log(err.response.statusText)
-//     isError.value = true;
-//     errorMsg.value = err.response.statusText;
-//   }
-// }
-
-const getSession = async () => {
-  // const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
-  // if (loggedInUserDarkModeBool == 1) {
-  //   darkMode.value = true;
-  // } else {
-  //   darkMode.value = false;
-  // }
-}
-
 function getItem(item) {
   if (process.client) {
     return localStorage.getItem(item)
@@ -210,7 +133,6 @@ function getItem(item) {
 }
 
 onMounted(() => {
-  getSession();
   document.addEventListener('keyup', handleKeyUp);
   document.getElementById('username-input').value = '';
   document.getElementById('password-input').value = '';
@@ -230,12 +152,6 @@ const handleKeyUp = (event) => {
 <script>
 export default {
   name: "LoginForm",
-  data() {
-    return {
-      // isError: false,
-      // errorMsg: '',
-    }
-  }
 }
 </script>
 

components/TemplateSearch.vue

@@ -1,7 +1,7 @@
 <template>
-  <section :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+  <section v-if="notAllInstancesIcon" :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
     <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
-    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
+    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ template.name }}</pre>
   </section>
 </template>
 
@@ -10,10 +10,19 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
+const route = useRoute()
+const id = computed(() => route)
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const template = ref({});
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
+
 const darkMode = ref('');
 
 const getSession = async () => {
@@ -25,6 +34,31 @@ const getSession = async () => {
   }
 }
 
+// get maintenance visit template from id
+const getTById = async () => {
+  if (notAllInstancesIcon.value) {
+    if (id.value.fullPath == '/maintenanceVisits') {
+      try {
+        const response = await Axios.get(
+          `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+        );
+        template.value = response.data;
+      } catch (err) {
+        console.log(err.response.statusText);
+      }
+    } else if (id.value.fullPath == '/productionOrders') {
+      try {
+        const response = await Axios.get(
+          `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+        );
+        template.value = response.data;
+      } catch (err) {
+        console.log(err.response.statusText);
+      }
+    }
+  }
+}
+
 function getItem(item) {
   if (process.client) {
     return localStorage.getItem(item)
@@ -36,7 +70,8 @@ function getItem(item) {
 watch(modeChanged, getSession)
 
 onMounted(async () => {
-  await getSession();
+  getSession();
+  await getTById();
 });
 </script>
 

components/server/Accounting.vue

@@ -487,12 +487,14 @@ const addIssueSlip = async () => {
     const time = today.getHours() + ":" + today.getMinutes();
     const dateTime = date + ' ' + time;
     let allFine = true;
-    newOIs.value.forEach(oi => {
-        if (oi.article.length === 0 && oi.amount.length === 0 && oi.price.length === 0 && oi.comment.length === 0) {
-            alert(`Please add data for all ordering info.`);
-            allFine = false
-        }
-    })
+    if (newOIs.value.length != 0) {
+        newOIs.value.forEach(oi => {
+            if (oi.article.length === 0 && oi.amount.length === 0 && oi.price.length === 0 && oi.comment.length === 0) {
+                alert(`Please add data for all ordering info.`);
+                allFine = false
+            }
+        })
+    }
     if (!allFine) {
         return
     }
@@ -526,22 +528,24 @@ const addIssueSlip = async () => {
                 egressBillDate: newEgressBillDate.value,
                 egressBill: newEgressBill.value,
             });
-        newOIs.value.forEach(async oi => {
-            try {
-                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addOrderingInfo`,
-                    {
-                        issueSlipID: response.data,
-                        article: oi.article,
-                        amount: oi.amount,
-                        price: oi.price,
-                        comment: oi.comment,
-                    });
-            } catch (err) {
-                console.log(err);
-            }
-            store.commit('resetStore');
-            store.commit('changeToIssueSliplist');
-        })
+        if (newOIs.value.length != 0) {
+            newOIs.value.forEach(async oi => {
+                try {
+                    const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addOrderingInfo`,
+                        {
+                            issueSlipID: response.data,
+                            article: oi.article,
+                            amount: oi.amount,
+                            price: oi.price,
+                            comment: oi.comment,
+                        });
+                } catch (err) {
+                    console.log(err);
+                }
+            })
+        }
+        store.commit('resetStore');
+        store.commit('changeToIssueSliplist');
     } catch (err) {
         console.log(err.response.statusText);
     }

components/server/Asset.vue

@@ -153,7 +153,6 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-
 const modeChanged = computed(() => store.state.updateDarkMode);
 
 const editable = computed(() => store.state.editable);
@@ -331,7 +330,14 @@ const updateNewCustomerID = async () => {
 const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     setTimeout(() => {
         fetchDataFunc();
-    }, 1500);
+    }, 2000);
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithSmallDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 500);
 }
 
 const getSession = async () => {
@@ -356,7 +362,7 @@ watch(modeChanged, getSession)
 
 onMounted(async () => {
     await getSession();
-    await getItemById();
+    triggerBackendCallsWithSmallDelay(getItemById);
     triggerBackendCallsWithDelay(getConfigItems);
     triggerBackendCallsWithDelay(getCustomers);
 });
@@ -388,7 +394,6 @@ export default {
     background-color: #fff;
 }
 
-
 .asset-name {
     align-self: stretch;
     padding: 1rem 0;

components/server/AssetSolutionList.vue

@@ -159,7 +159,7 @@ watch(modeChanged, getSession)
 
 onMounted(async () => {
     await getSession();
-    getItemById();
+    await getItemById();
 });
 </script>
 

components/server/AssetTable.vue

@@ -59,7 +59,6 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
-
 const modeChanged = computed(() => store.state.updateDarkMode);
 
 const goToChosenAsset = (id) => {

components/server/Customer.vue

@@ -1,65 +1,628 @@
 <template>
-  <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Customer name</pre>
+  <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <div>
+      <h2 v-if="!editable" :class="['customer-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ cust.customername }}
+      </h2>
+      <input v-if="editable" v-model="cust.customername" @change="updateCustomer()"
+        :class="['data', 'customer-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+    </div>
+    <div class="data-field" id="customer-id">
+      <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.customerID }}</pre>
+    </div>
+    <div class="customer-data">
+      <div class="contact">
+        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contacts:</pre>
+        <div class="data-field" id="contact-person">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
+          <pre v-if="!editable"
+            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.contactperson }}</pre>
+          <input v-if="editable" v-model="cust.contactperson" @change="updateCustomer()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        <div class="data-field" id="first-e-mail">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. E-Mail:</pre>
+          <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.EMail }}</pre>
+          <input v-if="editable" v-model="cust.EMail" @change="updateCustomer()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        <div class="data-field" id="first-phone">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Phone number:</pre>
+          <pre v-if="!editable"
+            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.phonenumber }}</pre>
+          <input v-if="editable" v-model="cust.phonenumber" @change="updateCustomer()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        &nbsp;
+        <div class="data-field" id="second-e-mail">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. E-Mail:</pre>
+          <pre v-if="!editable"
+            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondEMail }}</pre>
+          <input v-if="editable" v-model="cust.secondEMail" @change="updateCustomer()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        <div class="data-field" id="second-phone">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Phone number:</pre>
+          <pre v-if="!editable"
+            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondPhonenumber }}</pre>
+          <input v-if="editable" v-model="cust.secondPhonenumber" @change="updateCustomer()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        &nbsp;
+        <div class="data-field" id="third-e-mail">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. E-Mail:</pre>
+          <pre v-if="!editable"
+            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdEMail }}</pre>
+          <input v-if="editable" v-model="cust.thirdEMail" @change="updateCustomer()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        <div class="data-field" id="third-phone">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Phone number:</pre>
+          <pre v-if="!editable"
+            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdPhonenumber }}</pre>
+          <input v-if="editable" v-model="cust.thirdPhonenumber" @change="updateCustomer()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+      </div>
+      <div class="address">
+        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Addresses:</pre>
+        <div class="street-address">
+          <div class="data-field" id="street-name">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Street:</pre>
+            <pre v-if="!editable"
+              :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.street }}</pre>
+            <input v-if="editable" v-model="cust.street" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+          <div class="data-field" id="street-no">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. No.:</pre>
+            <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.no }}</pre>
+            <input v-if="editable" v-model="cust.no" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+        </div>
+        <div class="postcode-city">
+          <div class="data-field" id="postal-code">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Postcode:</pre>
+            <pre v-if="!editable"
+              :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.postcode }}</pre>
+            <input v-if="editable" v-model="cust.postcode" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+          <div class="data-field" id="city">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. City:</pre>
+            <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.city }}</pre>
+            <input v-if="editable" v-model="cust.city" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+        </div>
+        &nbsp;
+        <div class="street-address">
+          <div class="data-field" id="street-name">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Street:</pre>
+            <pre v-if="!editable"
+              :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondStreet }}</pre>
+            <input v-if="editable" v-model="cust.secondStreet" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+          <div class="data-field" id="street-no">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. No.:</pre>
+            <pre v-if="!editable"
+              :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondNo }}</pre>
+            <input v-if="editable" v-model="cust.secondNo" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+        </div>
+        <div class="postcode-city">
+          <div class="data-field" id="postal-code">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Postcode:</pre>
+            <pre v-if="!editable"
+              :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondPostcode }}</pre>
+            <input v-if="editable" v-model="cust.secondPostcode" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+          <div class="data-field" id="city">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. City:</pre>
+            <pre v-if="!editable"
+              :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.secondCity }}</pre>
+            <input v-if="editable" v-model="cust.secondCity" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+        </div>
+        &nbsp;
+        <div class="street-address">
+          <div class="data-field" id="street-name">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Street:</pre>
+            <pre v-if="!editable"
+              :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdStreet }}</pre>
+            <input v-if="editable" v-model="cust.thirdStreet" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+          <div class="data-field" id="street-no">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. No.:</pre>
+            <pre v-if="!editable"
+              :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdNo }}</pre>
+            <input v-if="editable" v-model="cust.thirdNo" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+        </div>
+        <div class="postcode-city">
+          <div class="data-field" id="postal-code">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Postcode:</pre>
+            <pre v-if="!editable"
+              :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdPostcode }}</pre>
+            <input v-if="editable" v-model="cust.thirdPostcode" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+          <div class="data-field" id="city">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. City:</pre>
+            <pre v-if="!editable"
+              :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ cust.thirdCity }}</pre>
+            <input v-if="editable" v-model="cust.thirdCity" @change="updateCustomer()"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="notes">
+      <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
+      <input v-model="cust.notes" :readonly="!editable" @change="updateCustomer()"
+        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+    </div>
+  </section>
+  <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <div>
+      <input v-model="newCustomername"
+        :class="['data', 'customer-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+    </div>
     <div class="data-field" id="customer-id">
       <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
       <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
     </div>
     <div class="customer-data">
       <div class="contact">
-        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</pre>
+        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contacts:</pre>
         <div class="data-field" id="contact-person">
           <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
-          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+          <input v-model="newContactperson" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
         </div>
-        <div class="data-field" id="e-mail">
-          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
-          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        <div class="data-field" id="first-e-mail">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. E-Mail:</pre>
+          <input v-model="newEMail" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
         </div>
-        <div class="data-field" id="phone">
-          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone number:</pre>
-          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        <div class="data-field" id="first-phone">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Phone number:</pre>
+          <input v-model="newPhonenumber" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        &nbsp;
+        <div class="data-field" id="second-e-mail">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. E-Mail:</pre>
+          <input v-model="newSecondEMail" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        <div class="data-field" id="second-phone">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Phone number:</pre>
+          <input v-model="newSecondPhonenumber"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        &nbsp;
+        <div class="data-field" id="third-e-mail">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. E-Mail:</pre>
+          <input v-model="newThirdEMail" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        <div class="data-field" id="third-phone">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Phone number:</pre>
+          <input v-model="newThirdPhonenumber"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
         </div>
       </div>
       <div class="address">
-        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</pre>
+        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Addresses:</pre>
         <div class="street-address">
           <div class="data-field" id="street-name">
-            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
-            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Street:</pre>
+            <input v-model="newStreet" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
           </div>
           <div class="data-field" id="street-no">
-            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">No.:</pre>
-            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. No.:</pre>
+            <input v-model="newNo" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
           </div>
         </div>
-        <div class="data-field" id="postal-code">
-          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
-          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        <div class="postcode-city">
+          <div class="data-field" id="postal-code">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. Postcode:</pre>
+            <input v-model="newPostcode" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+          <div class="data-field" id="city">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">1. City:</pre>
+            <input v-model="newCity" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
         </div>
-        <div class="data-field" id="city">
-          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
-          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        &nbsp;
+        <div class="street-address">
+          <div class="data-field" id="street-name">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Street:</pre>
+            <input v-model="newSecondStreet" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+          <div class="data-field" id="street-no">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. No.:</pre>
+            <input v-model="newSecondNo" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+        </div>
+        <div class="postcode-city">
+          <div class="data-field" id="postal-code">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. Postcode:</pre>
+            <input v-model="newSecondPostcode"
+              :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+          <div class="data-field" id="city">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">2. City:</pre>
+            <input v-model="newSecondCity" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+        </div>
+        &nbsp;
+        <div class="street-address">
+          <div class="data-field" id="street-name">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Street:</pre>
+            <input v-model="newThirdStreet" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+          <div class="data-field" id="street-no">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. No.:</pre>
+            <input v-model="newThirdNo" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+        </div>
+        <div class="postcode-city">
+          <div class="data-field" id="postal-code">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. Postcode:</pre>
+            <input v-model="newThirdPostcode" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
+          <div class="data-field" id="city">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">3. City:</pre>
+            <input v-model="newThirdCity" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+          </div>
         </div>
       </div>
     </div>
     <div class="notes">
       <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
-      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+      <input v-model="newNotes" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
     </div>
   </section>
+  <section v-if="addBool" id="saveNewItem">
+    <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addCustomer()">Save</button>
+  </section>
 </template>
 
 
 <script setup>
 import { ref, onMounted, watch } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const editable = computed(() => store.state.editable);
+const chosenCustomerId = computed(() => store.state.chosenCustomerId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
+
 const darkMode = ref('')
+const cust = ref({});
+const customers = ref([]);
+
+const newCustomername = ref('');
+const newCustomerID = ref('');
+const newContactperson = ref('');
+const newEMail = ref('');
+const newSecondEMail = ref('');
+const newThirdEMail = ref('');
+const newPhonenumber = ref('');
+const newSecondPhonenumber = ref('');
+const newThirdPhonenumber = ref('');
+const newStreet = ref('');
+const newNo = ref('');
+const newPostcode = ref('');
+const newCity = ref('');
+const newSecondStreet = ref('');
+const newSecondNo = ref('');
+const newSecondPostcode = ref('');
+const newSecondCity = ref('');
+const newThirdStreet = ref('');
+const newThirdNo = ref('');
+const newThirdPostcode = ref('');
+const newThirdCity = ref('');
+const newNotes = ref('');
+
+// get customer from id
+const getCustomerById = async () => {
+  if (!addBool.value) {
+    try {
+      const response = await Axios.get(
+        `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerById/${chosenCustomerId.value}`
+      );
+      cust.value = response.data;
+    } catch (err) {
+      console.log(err.response.statusText);
+    }
+  }
+}
+
+//update data
+const updateCustomer = async () => {
+  if (cust.value.customername.trim() === "") {
+    alert("Please add a customer name!");
+    return;
+  } else {
+    var counter = 0;
+    // check if customer name already exists
+    customers.value.forEach(c => {
+      if (c.customername === cust.value.customername) {
+        counter += 1;
+      }
+    });
+    if (counter == 2) {
+      alert("This customer name already exists. Please choose an unique customer name or modify respectively delete the old one!");
+      cust.value.customername = '';
+      return;
+    }
+    if (!validateEMail(cust.value.EMail)) {
+      alert("Please add a valid first email!");
+      return;
+    }
+    if (!validatePhonenumber(cust.value.phonenumber)) {
+      alert("Please add a valid first phonenumber!");
+      return;
+    }
+    if (!validateEMail(cust.value.secondEMail)) {
+      alert("Please add a valid second email!");
+      return;
+    }
+    if (!validatePhonenumber(cust.value.secondPhonenumber)) {
+      alert("Please add a valid second phonenumber!");
+      return;
+    }
+    if (!validateEMail(cust.value.thirdEMail)) {
+      alert("Please add a valid third email!");
+      return;
+    }
+    if (!validatePhonenumber(cust.value.thirdPhonenumber)) {
+      alert("Please add a valid third phonenumber!");
+      return;
+    }
+    if (!validatePostcode(cust.value.postcode)) {
+      alert("Please add a valid first postcode!");
+      return;
+    }
+    if (!validatePostcode(cust.value.secondPostcode)) {
+      alert("Please add a valid second postcode!");
+      return;
+    }
+    if (!validatePostcode(cust.value.thirdPostcode)) {
+      alert("Please add a valid third postcode!");
+      return;
+    }
+    if (cust.value.contactperson.trim() === "") {
+      alert("Please add a contactperson!");
+      return;
+    }
+    if (cust.value.street.trim() === "") {
+      alert("Please add a first street!");
+      return;
+    }
+    if (cust.value.no.trim() === "") {
+      alert("Please add a first number!");
+      return;
+    }
+    if (cust.value.city.trim() === "") {
+      alert("Please add a first city!");
+      return;
+    }
+    try {
+      await Axios.put(
+        `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateCustomer`,
+        {
+          customerID: cust.value.customerID,
+          customername: cust.value.customername,
+          contactperson: cust.value.contactperson,
+          EMail: cust.value.EMail,
+          secondEMail: cust.value.secondEMail,
+          thirdEMail: cust.value.thirdEMail,
+          phonenumber: cust.value.phonenumber,
+          secondPhonenumber: cust.value.secondPhonenumber,
+          thirdPhonenumber: cust.value.thirdPhonenumber,
+          street: cust.value.street,
+          no: cust.value.no,
+          postcode: cust.value.postcode,
+          city: cust.value.city,
+          secondStreet: cust.value.secondStreet,
+          secondNo: cust.value.secondNo,
+          secondPostcode: cust.value.secondPostcode,
+          secondCity: cust.value.secondCity,
+          thirdStreet: cust.value.thirdStreet,
+          thirdNo: cust.value.thirdNo,
+          thirdPostcode: cust.value.thirdPostcode,
+          thirdCity: cust.value.thirdCity,
+          notes: cust.value.notes,
+        }
+      )
+      await getCustomerById();
+    } catch (err) {
+      console.log(err.response.statusText);
+    }
+  }
+}
+
+// add new customer
+const addCustomer = async () => {
+  // check if all input data is valid
+  if (newCustomername.value.trim() === "") {
+    alert("Please add a customer name!");
+    return;
+  } else {
+    var counter = 0;
+    // check if customer name already exists
+    customers.value.forEach(c => {
+      if (c.customername === newCustomername.value) {
+        counter += 1;
+      }
+    });
+    if (counter == 1) {
+      alert("This customer name already exists. Please choose an unique customer name or modify respectively delete the old one!");
+      return;
+    }
+  }
+  if (!validateEMail(newEMail.value)) {
+    alert("Please add a valid first email!");
+    return;
+  }
+  if (!validatePhonenumber(newPhonenumber.value)) {
+    alert("Please add a valid first phonenumber!");
+    return;
+  }
+  if (!validateEMail(newSecondEMail.value)) {
+    alert("Please add a valid second email!");
+    return;
+  }
+  if (!validatePhonenumber(newSecondPhonenumber.value)) {
+    alert("Please add a valid second phonenumber!");
+    return;
+  }
+  if (!validateEMail(newThirdEMail.value)) {
+    alert("Please add a valid third email!");
+    return;
+  }
+  if (!validatePhonenumber(newThirdPhonenumber.value)) {
+    alert("Please add a valid third phonenumber!");
+    return;
+  }
+  if (!validatePostcode(newPostcode.value)) {
+    alert("Please add a valid first postcode!");
+    return;
+  }
+  if (!validatePostcode(newSecondPostcode.value)) {
+    alert("Please add a valid second postcode!");
+    return;
+  }
+  if (!validatePostcode(newThirdPostcode.value)) {
+    alert("Please add a valid third postcode!");
+    return;
+  }
+  if (newContactperson.value.trim() === "") {
+    alert("Please add a contactperson!");
+    return;
+  }
+  if (newStreet.value.trim() === "") {
+    alert("Please add a first street!");
+    return;
+  }
+  if (newNo.value.trim() === "") {
+    alert("Please add a first number!");
+    return;
+  }
+  if (newCity.value.trim() === "") {
+    alert("Please add a first city!");
+    return;
+  }
+  try {
+    const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addCustomer`,
+      {
+        customername: newCustomername.value,
+        contactperson: newContactperson.value,
+        EMail: newEMail.value,
+        secondEMail: newSecondEMail.value,
+        thirdEMail: newThirdEMail.value,
+        phonenumber: newPhonenumber.value,
+        secondPhonenumber: newSecondPhonenumber.value,
+        thirdPhonenumber: newThirdPhonenumber.value,
+        street: newStreet.value,
+        no: newNo.value,
+        postcode: newPostcode.value,
+        city: newCity.value,
+        secondStreet: newSecondStreet.value,
+        secondNo: newSecondNo.value,
+        secondPostcode: newSecondPostcode.value,
+        secondCity: newSecondCity.value,
+        thirdStreet: newThirdStreet.value,
+        thirdNo: newThirdNo.value,
+        thirdPostcode: newThirdPostcode.value,
+        thirdCity: newThirdCity.value,
+        notes: newNotes.value,
+      });
+    store.commit('resetStore');
+    store.commit('changeToCustomerlist');
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+}
+
+//get all customers
+const getCustomers = async () => {
+  try {
+    const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`);
+    customers.value = response.data;
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+}
+
+const confirmDeleteCustomer = async () => {
+  if (deleteBool.value === true) {
+    if (confirm("Do you really want to delete this customer? It cannot be undone!")) {
+      try {
+        await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteCustomer/${chosenCustomerId.value}`);
+        store.commit('undoDelete');
+        store.commit('resetStore');
+        store.commit('changeToCustomerlist');
+      } catch (err) {
+        console.log(err.response.statusText);
+      }
+    } else {
+      store.commit('undoDelete');
+    }
+  }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+  setTimeout(() => {
+    fetchDataFunc();
+  }, 1500);
+}
+
+// to validate the email address
+const validateEMail = (email) => {
+  const emailRegex = new RegExp(/^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/, "gm");
+  if (email === "") {
+    return true
+  }
+  return emailRegex.test(email);
+}
+
+// to validate the phonenumber
+const validatePhonenumber = (number) => {
+  const mobilephonenumberRegex = new RegExp(/^(((((00|\+){1,2})49([ \-/]?|[ \()/]?))|0)[1]([0-2]|[4-7])([0-9]{1})([ \-/]?|[ \()/]?)([0-9]{8}))$/, "gm");
+  const landlineRegex = new RegExp(/^0(30|40|69|89|20[12389]|21[24]|228|234|335|340|3[3-9][15]|906|[2-9][1-9]1|3(?:3(?:[0237][127]|0[3-6]|2[89]|3[458]|[46][1246]|7[589]|8[1256]|9[145])|4(?:[2347][135]|[34]7|[69][146]|48|62|76|93)|5(?:[04679][14]|[238][135]|[2469]2|[4789]6|[278]8|63|73|37|29)|6(?:[024689][13]|[03789]5|06|2[2489]|3[1246]|44|47|7[1279]|82|86)|7(?:[236][135]|2[2467]|37|4[145]|62|64|7[1-4])|8(?:[234678]1|3[468]|4[347]|6[035-9]|7[467]|83|86)|9(?:[236][135]|[04689]4|[04789]1|[03468]7|02|09|28|4[369]|6[2689]|73|76|96|98))|3[3-9][0-9]{3}|13[078]|180[235]|18[01]|19[0-9]{3}|[789]00|[2-9][0-9]{3})([0-9]{1,})$/, "gm");
+  if (number === "") {
+    return true
+  }
+  if (mobilephonenumberRegex.test(number)) {
+    return true
+  } else if (landlineRegex.test(number)) {
+    return true;
+  }
+  return false;
+}
+
+// to validate the postcode
+const validatePostcode = (postcode) => {
+  const postcodeRegex = new RegExp(/^\d{5}$/);
+  if (postcode === "") {
+    return true
+  }
+  return postcodeRegex.test(postcode);
+}
 
 const getSession = async () => {
   const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -78,10 +641,13 @@ function getItem(item) {
   }
 }
 
+watch(deleteBool, confirmDeleteCustomer);
 watch(modeChanged, getSession)
 
 onMounted(async () => {
-  await getSession();
+  getSession();
+  await getCustomerById();
+  triggerBackendCallsWithDelay(getCustomers);
 });
 </script>
 
@@ -93,14 +659,14 @@ export default {
 
 
 <style scoped>
-section {
+.information {
   display: flex;
   flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
   padding: 1.25rem 1.875rem;
   border-radius: 0.625rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-  align-items: stretch;
-  justify-content: center;
 }
 
 .section-darkmode {
@@ -111,39 +677,51 @@ section {
   background-color: #ffffff;
 }
 
-
-.title {
-  padding: 1.25rem 0;
-  letter-spacing: 0.05rem;
+.customer-name {
+  align-self: stretch;
+  padding: 1rem 0;
+  margin: 1rem;
+  letter-spacing: 5%;
   text-decoration-line: underline;
-  font: italic 400 1rem/1.875rem Overpass, sans-serif;
+  font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
 }
 
-.title-darkmode {
-  color: #ffffff;
+.customer-name-input {
+  padding: 1rem 0;
+  margin: 1rem;
+  font-size: initial;
+  letter-spacing: 5%;
+  text-decoration-line: underline;
+  font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
 }
 
-.title-lightmode {
-  color: #000000;
+.h2-darkmode {
+  color: #fff;
 }
 
+.h2-lightmode {
+  color: #000;
+}
 
 .data-field {
   display: flex;
-  flex: auto;
   flex-direction: row;
-  padding: 0.8rem 1.875rem;
   align-items: center;
   justify-content: flex-start;
+  width: 100%;
+  padding: 0.8rem 1.875rem;
   gap: 1.25rem;
+  border-radius: 0.625rem;
 }
 
 .data-field#customer-id {
   padding: 0.625rem 1.875rem;
 }
 
-.data-field#street-name {
-  flex: 3;
+.data-field#street-no {
+  padding-left: 3.2rem;
 }
 
 .label {
@@ -151,6 +729,14 @@ section {
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.h2-input-darkmode {
+  background-color: #212121;
+}
+
+.h2-input-lightmode {
+  background-color: #EBEBEB;
+}
+
 pre {
   margin: 0;
 }
@@ -163,6 +749,42 @@ pre {
   color: #000000;
 }
 
+.saveNewItem-darkmode {
+  background: #2c2c2c;
+  color: #fff;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  border: none;
+  padding: 1rem 1.875rem;
+  width: 8%;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewItem-lightmode {
+  background: #EBEBEB;
+  color: #212121;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  border: none;
+  padding: 1rem 1.875rem;
+  width: 8%;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewItem-darkmode:hover {
+  background-color: #444444;
+  cursor: pointer;
+}
+
+.saveNewItem-lightmode:hover {
+  background-color: #ACACAC;
+  cursor: pointer;
+}
+
+#saveNewItem {
+  text-align: center;
+}
+
 .data {
   display: flex;
   flex-direction: row;
@@ -186,7 +808,6 @@ pre {
   color: #000000;
 }
 
-
 .customer-data {
   display: flex;
   flex: auto;
@@ -221,7 +842,8 @@ pre {
 }
 
 
-.street-address {
+.street-address,
+.postcode-city {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -242,4 +864,8 @@ pre {
 #notes {
   align-self: stretch;
 }
+
+.input {
+  border: none;
+}
 </style>

components/server/CustomerDepartment.vue

@@ -1,25 +1,58 @@
 <template>
-  <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Department name</pre>
+  <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <h2 v-if="!editable" :class="['department-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ dep.name
+      }}</h2>
+    <input v-if="editable" v-model="dep.name" @change="updateDepartment()"
+      :class="['data', 'department-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+    <div class="data-group">
+      <div class="data-field" id="id">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ dep.primaryID }}</pre>
+      </div>
+      <div class="data-field" id="customer-id">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ dep.customername }}</pre>
+      </div>
+      <div class="data-field" id="head">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
+        <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ dep.head }}</pre>
+        <input v-if="editable" v-model="dep.head" @change="updateDepartment()"
+          :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+      </div>
+    </div>
+    <div class="notes">
+      <pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
+      <input v-model="dep.notes" :readonly="!editable" @change="updateDepartment()"
+        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+    </div>
+  </section>
+  <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <input v-model="newName"
+      :class="['data', 'department-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
     <div class="data-group">
       <div class="data-field" id="id">
         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
         <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
       </div>
       <div class="data-field" id="customer-id">
-        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
-        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ chosenCustomerId }}</pre>
       </div>
       <div class="data-field" id="head">
         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
-        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        <input v-model="newHead"
+          :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
       </div>
     </div>
     <div class="notes">
       <pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
-      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+      <input v-model="newNotes"
+        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
     </div>
   </section>
+  <section v-if="addBool" id="saveNewItem">
+    <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addDepartment()">Save</button>
+  </section>
 </template>
 
 
@@ -28,11 +61,156 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
-
+const editable = computed(() => store.state.editable);
+const chosenCustomerId = computed(() => store.state.chosenCustomerId);
+const chosenDepartmentId = computed(() => store.state.chosenDepartmentId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
 const darkMode = ref('')
+const dep = ref({});
+const departments = ref({});
+const customer = ref({});
+
+const newName = ref('');
+const newHead = ref('');
+const newNotes = ref('');
+
+// get department from id
+const getDepartmentById = async () => {
+  if (!addBool.value) {
+    try {
+      const response = await Axios.get(
+        `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getDepartment/${chosenDepartmentId.value}`
+      );
+      dep.value = response.data;
+    } catch (err) {
+      console.log(err.response.statusText);
+    }
+  }
+}
+
+//update data
+const updateDepartment = async () => {
+  if (dep.value.name.trim() === "") {
+    alert("Please add a department name!");
+    return;
+  } else {
+    var counter = 0;
+    // check if department name already exists
+    departments.value.forEach(d => {
+      if (d.name === dep.value.name) {
+        counter += 1;
+      }
+    });
+    if (counter == 2) {
+      alert("This department name already exists. Please choose an unique department name or modify respectively delete the old one!");
+      dep.value.name = '';
+      return;
+    }
+    try {
+      await Axios.put(
+        `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateDepartment`,
+        {
+          primaryID: dep.value.primaryID,
+          name: dep.value.name,
+          head: dep.value.head,
+          notes: dep.value.notes,
+        }
+      )
+      await getDepartmentById();
+    } catch (err) {
+      console.log(err.response.statusText);
+    }
+  }
+}
+
+// add new department
+const addDepartment = async () => {
+  // check if all input data is valid
+  if (newName.value.trim() === "") {
+    alert("Please add an department name!");
+    return;
+  } else {
+    var counter = 0;
+    // check if department name already exists
+    departments.value.forEach(c => {
+      if (c.name === newName.value) {
+        counter += 1;
+      }
+    });
+    if (counter == 1) {
+      alert("This department name already exists. Please choose an unique department name or modify respectively delete the old one!");
+      return;
+    }
+  }
+  try {
+    const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addDepartment`,
+      {
+        customerID: chosenCustomerId.value,
+        customername: customer.value.customername,
+        name: newName.value,
+        head: newHead.value,
+        notes: newNotes.value,
+      });
+    store.commit('resetStoreNotCustomer');
+    store.commit('changeToDepartmentlist');
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+}
+
+// get customer from id
+const getCustomerById = async () => {
+  try {
+    const response = await Axios.get(
+      `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerById/${chosenCustomerId.value}`
+    );
+    customer.value = response.data;
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+}
+
+
+//get all departments
+const getDepartments = async () => {
+  try {
+    const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedDepartmentByCustomer/${chosenCustomerId.value}`
+    );
+    departments.value = response.data;
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+}
+
+const confirmDeleteDepartment = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this department? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteDepartment/${chosenDepartmentId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            store.commit('undoDelete');
+            store.commit('resetStoreNotCustomer');
+            store.commit('changeToDepartmentlist');
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
 
 const getSession = async () => {
   const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -51,10 +229,14 @@ function getItem(item) {
   }
 }
 
-watch(modeChanged, getSession)
+watch(modeChanged, getSession);
+watch(deleteBool, confirmDeleteDepartment);
 
 onMounted(async () => {
-  await getSession();
+  getSession();
+  await getDepartmentById();
+  triggerBackendCallsWithDelay(getCustomerById);
+  triggerBackendCallsWithDelay(getDepartments);
 });
 </script>
 
@@ -72,15 +254,15 @@ export default {
   margin: 0;
 }
 
-
-section {
+.information {
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
   padding: 1.25rem 1.875rem;
   border-radius: 0.625rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-  align-items: stretch;
-  justify-content: center;
 }
 
 .section-darkmode {
@@ -91,23 +273,44 @@ section {
   background-color: #ffffff;
 }
 
+.input {
+  border: none;
+}
 
-.title {
-  padding: 1.25rem 0;
-  letter-spacing: 0.04rem;
+.department-name-input {
+  padding: 1rem 0;
+  margin: 1rem;
+  font-size: initial;
+  letter-spacing: 5%;
   text-decoration-line: underline;
-  font: italic 400 1rem/1.875rem Overpass, sans-serif;
+  font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
 }
 
-.title-darkmode {
-  color: #ffffff;
+.department-name {
+  align-self: stretch;
+  padding: 1rem 0;
+  letter-spacing: 5%;
+  text-decoration-line: underline;
+  font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
 }
 
-.title-lightmode {
-  color: #000000;
+.h2-darkmode {
+  color: #fff;
 }
 
+.h2-lightmode {
+  color: #000;
+}
 
+.h2-input-darkmode {
+  background-color: #212121;
+}
+
+.h2-input-lightmode {
+  background-color: #EBEBEB;
+}
 
 .data-group {
   display: flex;
@@ -180,6 +383,7 @@ section {
   align-items: flex-start;
   justify-content: center;
   gap: 0.625rem;
+  width: 50%;
 }
 
 .area-title {
@@ -190,4 +394,40 @@ section {
 #notes {
   align-self: stretch;
 }
+
+.saveNewItem-darkmode {
+  background: #2c2c2c;
+  color: #fff;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  border: none;
+  padding: 1rem 1.875rem;
+  width: 8%;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewItem-lightmode {
+  background: #EBEBEB;
+  color: #212121;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  border: none;
+  padding: 1rem 1.875rem;
+  width: 8%;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewItem-darkmode:hover {
+  background-color: #444444;
+  cursor: pointer;
+}
+
+.saveNewItem-lightmode:hover {
+  background-color: #ACACAC;
+  cursor: pointer;
+}
+
+#saveNewItem {
+  text-align: center;
+}
 </style>

components/server/CustomerDepartmentEmployeeList.vue

@@ -16,19 +16,30 @@
                     :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
                     Pronouns</th>
             </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+            <tr v-for="empl in employees" :key="empl.primaryID"
+                :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                 <td
                     :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ...</td>
+                    <nuxt-link to="/customers" id="nuxt-link" class="button"
+                        :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                        @click="goToChosenEmployee(empl.primaryID)">
+                        {{ empl.primaryID }}
+                    </nuxt-link>
+                </td>
                 <td
                     :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
+                    <nuxt-link to="/customers" id="nuxt-link" class="button"
+                        :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                        @click="goToChosenEmployee(empl.primaryID)">
+                        {{ empl.name }}
+                    </nuxt-link>
+                </td>
                 <td
                     :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">
-                    ...</td>
+                    {{ empl.jobTitle }}</td>
                 <td
                     :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
-                    ...</td>
+                    {{ empl.pronouns }}</td>
             </tr>
         </table>
     </section>
@@ -39,12 +50,35 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
+const chosenCustomerId = computed(() => store.state.chosenCustomerId);
+const chosenDepartmentId = computed(() => store.state.chosenDepartmentId);
+const employeesByCustomer = ref([]);
+const employees = ref([]);
 
 const darkMode = ref('')
 
+const goToChosenEmployee = (id) => {
+    store.commit('setChosenCustomerEmployee', id);
+    store.commit('changeToCustomerEmployee');
+};
+
+//get employees by the selected customer
+const getEmployees = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustEmployeeByCustomer/${chosenCustomerId.value}`);
+        employeesByCustomer.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    // filter those with the chosen department id
+    employees.value = employeesByCustomer.value.filter(empl => empl.departmentID === chosenDepartmentId.value);
+}
+
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
     if (loggedInUserDarkModeBool == 1) {
@@ -65,7 +99,8 @@ function getItem(item) {
 watch(modeChanged, getSession)
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getEmployees();
 });
 </script>
 
@@ -96,7 +131,17 @@ export default {
     background-color: #ffffff;
 }
 
+#nuxt-link {
+    text-decoration: none;
+}
 
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 
 .label {
     padding: 1.25rem 0;

components/server/CustomerDepartmentList.vue

@@ -1,31 +1,87 @@
 <template>
+    <section v-if="searchable" :class="['department-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
+        <input v-model="nameSearchFilter" @change="filterDepartmentsByName()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Departments:</div>
         <table class="data-table" id="customer-employee-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
-                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
-                <th :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">Head</th>
+                <th
+                    :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                    ID</th>
+                <th
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    Name</th>
+                <th
+                    :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">
+                    Head</th>
             </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
-                <td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
-                <td :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">...</td>
+            <tr v-for="dep in departments" :key="dep.primaryID"
+                :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td
+                    :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                    <nuxt-link to="/customers" id="nuxt-link" class="button"
+                        :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                        @click="goToChosenDepartment(dep.primaryID)">
+                        {{ dep.primaryID }}
+                    </nuxt-link>
+                </td>
+                <td
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    <nuxt-link to="/customers" id="nuxt-link" class="button"
+                        :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                        @click="goToChosenDepartment(dep.primaryID)">
+                        {{ dep.name }}
+                    </nuxt-link>
+                </td>
+                <td
+                    :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">
+                    {{ dep.head }}</td>
             </tr>
         </table>
     </section>
 </template>
-  
-  
+
+
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
+const chosenCustomerId = computed(() => store.state.chosenCustomerId);
+const searchable = computed(() => store.state.searchable);
+const nameSearchFilter = ref('');
+const departments = ref([]);
 
-const darkMode = ref('')
+const darkMode = ref('');
+const departmentByName = ref([]);
+
+const goToChosenDepartment = (id) => {
+    store.commit('setChosenCustomerDepartment', id);
+    store.commit('changeToDepartment');
+};
+
+//get department by the selected customer
+const getDepartments = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedDepartmentByCustomer/${chosenCustomerId.value}`);
+        departments.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    nameSearchFilter.value = '';
+    await getDepartments();
+}
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -36,6 +92,27 @@ const getSession = async () => {
     }
 }
 
+//get all departments based on the searched name
+const filterDepartmentsByName = async () => {
+    if (nameSearchFilter.value === '') {
+        await getDepartments();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedDepartmentByName/${nameSearchFilter.value}`);
+            departmentByName.value = response.data;
+            departments.value = filterObjectsWithMatchingIds(departments.value, departmentByName.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+const filterObjectsWithMatchingIds = (arr1, arr2) => {
+    return arr1.filter(obj1 => {
+        return arr2.some(obj2 => obj2.primaryID === obj1.primaryID);
+    });
+};
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -44,20 +121,22 @@ function getItem(item) {
     }
 }
 
+watch(searchable, updateSearchTerm);
 watch(modeChanged, getSession)
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getDepartments();
 });
 </script>
 
 <script>
 export default {
-  name: "CustomerDepartmentList",
+    name: "CustomerDepartmentList",
 };
-</script>   
+</script>
+
 
-  
 <style scoped>
 .data {
     display: flex;
@@ -69,10 +148,75 @@ export default {
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
-.section-darkmode { background-color: #2c2c2c; }
-.section-lightmode { background-color: #ffffff; }
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #ffffff;
+}
+
+.department-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+    box-sizing: border-box;
+}
 
 
+.input {
+    border: none;
+}
+
+#nuxt-link {
+    text-decoration: none;
+}
+
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.dataInput {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.instanceLabel {
+    width: 5.5625em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
 
 .label {
     padding: 1.25rem 0;
@@ -80,8 +224,14 @@ export default {
     text-decoration-line: underline;
     font: 400 1rem/1.875rem Overpass, sans-serif;
 }
-.label-darkmode { color: #ffffff; }
-.label-lightmode { color: #000000; }
+
+.label-darkmode {
+    color: #ffffff;
+}
+
+.label-lightmode {
+    color: #000000;
+}
 
 
 
@@ -106,14 +256,22 @@ export default {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
 }
+
 .tr-head-lightmode {
     border-top: none;
     border-bottom: 0.0625rem solid #8e8e8e;
 }
-.tr-darkmode { border-top: 0.0625rem solid #000000; }
-.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
 
-th, td {
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
     height: 1.875rem;
     width: 40%;
     padding: 0;
@@ -122,19 +280,28 @@ th, td {
     letter-spacing: 0.02rem;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
-th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
-.th-darkmode, .td-darkmode { 
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
     color: #ffffff;
     border-right: 0.0625rem solid #000000;
 }
-.th-lightmode, .td-lightmode { 
+
+.th-lightmode,
+.td-lightmode {
     color: #000000;
     border-right: 0.0625rem solid #8e8e8e;
 }
 
-.ID { width: 20%; }
-
-.DHead { border-right: none; }
-
+.ID {
+    width: 20%;
+}
 
+.DHead {
+    border-right: none;
+}
 </style>

components/server/CustomerEmployee.vue

@@ -1,19 +1,113 @@
 <template>
-  <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Employee name</pre>
+  <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <h2 v-if="!editable" :class="['customer-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ empl.name }}
+    </h2>
+    <input v-if="editable" v-model="empl.name" @change="updateEmployee()"
+      :class="['data', 'customer-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
     <div class="data-group" id="personal-data">
       <div class="data-group" id="full-name">
         <div class="data-field" id="ntitle">
           <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Title/-s:</pre>
-          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+          <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.title }}</pre>
+          <input v-if="editable" v-model="empl.title" @change="updateEmployee()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
         </div>
         <div class="data-field" id="first-name">
           <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">First Name/-s:</pre>
-          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+          <pre v-if="!editable"
+            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.firstName }}</pre>
+          <input v-if="editable" v-model="empl.firstName" @change="updateEmployee()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
         </div>
         <div class="data-field" id="last-name">
           <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last Name/-s:</pre>
-          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+          <pre v-if="!editable"
+            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.lastName }}</pre>
+          <input v-if="editable" v-model="empl.lastName" @change="updateEmployee()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+      </div>
+      <div class="data-group" id="other">
+        <div class="data-field" id="id">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.primaryID }}</pre>
+        </div>
+        <div class="data-field" id="pronouns">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Pronouns:</pre>
+          <pre v-if="!editable"
+            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.pronouns }}</pre>
+          <input v-if="editable" v-model="empl.pronouns" @change="updateEmployee()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        <div class="data-field" id="preferred-name">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Preferred Name:</pre>
+          <pre v-if="!editable"
+            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.preferredName }}</pre>
+          <input v-if="editable" v-model="empl.preferredName" @change="updateEmployee()"
+            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+      </div>
+    </div>
+    <div class="data-group" id="employment-data">
+      <div class="data-field" id="customer-id">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.customerID }}</pre>
+      </div>
+      <div class="data-field" id="department">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Department:</pre>
+        <pre v-if="!editable"
+          :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.department }}</pre>
+        <select v-if="editable" id="customersDropDownChosenCI" v-model="empl.department" @change="updateDepartmentID()"
+          :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+          <option v-for="depart in departments" :key="depart.primaryID">
+            {{ depart.name }}
+          </option>
+        </select>
+      </div>
+      <div class="data-field" id="job-title">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Job Title:</pre>
+        <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.jobTitle }}</pre>
+        <input v-if="editable" v-model="empl.jobTitle" @change="updateEmployee()"
+          :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+      </div>
+    </div>
+    <div class="data-group" id="contact-data">
+      <div class="data-field" id="phone">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone No.:</pre>
+        <pre v-if="!editable"
+          :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.phonenumber }}</pre>
+        <input v-if="editable" v-model="empl.phonenumber" @change="updateEmployee()"
+          :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+      </div>
+      <div class="data-field" id="mail">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
+        <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ empl.eMail }}</pre>
+        <input v-if="editable" v-model="empl.eMail" @change="updateEmployee()"
+          :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+      </div>
+    </div>
+    <div class="notes">
+      <pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
+      <input v-model="empl.notes" :readonly="!editable" @change="updateEmployee()"
+        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+    </div>
+  </section>
+  <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <input v-model="newName"
+      :class="['data', 'customer-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+    <div class="data-group" id="personal-data">
+      <div class="data-group" id="full-name">
+        <div class="data-field" id="ntitle">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Title/-s:</pre>
+          <input v-model="newTitle" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        <div class="data-field" id="first-name">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">First Name/-s:</pre>
+          <input v-model="newFirstName" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+        </div>
+        <div class="data-field" id="last-name">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last Name/-s:</pre>
+          <input v-model="newLastName" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
         </div>
       </div>
       <div class="data-group" id="other">
@@ -23,56 +117,302 @@
         </div>
         <div class="data-field" id="pronouns">
           <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Pronouns:</pre>
-          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+          <input v-model="newPronouns" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
         </div>
         <div class="data-field" id="preferred-name">
           <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Preferred Name:</pre>
-          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+          <input v-model="newPreferedName" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
         </div>
       </div>
     </div>
     <div class="data-group" id="employment-data">
       <div class="data-field" id="customer-id">
         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
-        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ chosenCustomerId }}</pre>
       </div>
       <div class="data-field" id="department">
         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Department:</pre>
-        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        <select id="customersDropDownChosenCI" v-model="newDepartment" @change="updateNewDepartmentID()"
+          :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+          <option v-for="depart in departments" :key="depart.primaryID">
+            {{ depart.name }}
+          </option>
+        </select>
       </div>
       <div class="data-field" id="job-title">
         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Job Title:</pre>
-        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        <input v-model="newJobTitle" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
       </div>
     </div>
     <div class="data-group" id="contact-data">
       <div class="data-field" id="phone">
         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone No.:</pre>
-        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        <input v-model="newPhonenumber" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
       </div>
       <div class="data-field" id="mail">
         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
-        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        <input v-model="newEMail" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
       </div>
     </div>
     <div class="notes">
       <pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
-      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+      <input v-model="newNotes" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
     </div>
   </section>
+  <section v-if="addBool" id="saveNewItem">
+    <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addEmployee()">Save</button>
+  </section>
 </template>
 
 
-
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const editable = computed(() => store.state.editable);
+const chosenCustomerId = computed(() => store.state.chosenCustomerId);
+const chosenCustomerEmployeeId = computed(() => store.state.chosenCustomerEmployeeId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
+
 const darkMode = ref('')
+const empl = ref({});
+const department = ref({});
+const customer = ref({});
+const employees = ref([]);
+const departments = ref([]);
+
+const newName = ref('');
+const newPronouns = ref('');
+const newTitle = ref('');
+const newFirstName = ref('');
+const newLastName = ref('');
+const newPreferedName = ref('');
+const newDepartment = ref('');
+const newDepartmentID = ref('');
+const newJobTitle = ref('');
+const newPhonenumber = ref('');
+const newEMail = ref('');
+const newNotes = ref('');
+
+// get employee from id
+const getEmployeeById = async () => {
+  if (!addBool.value) {
+    try {
+      const response = await Axios.get(
+        `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustEmployee/${chosenCustomerEmployeeId.value}`
+      );
+      empl.value = response.data;
+    } catch (err) {
+      console.log(err.response.statusText);
+    }
+  }
+}
+
+// get customer from id
+const getCustomerById = async () => {
+  try {
+    const response = await Axios.get(
+      `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerById/${chosenCustomerId.value}`
+    );
+    customer.value = response.data;
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+}
+
+//update data
+const updateEmployee = async () => {
+  if (empl.value.name.trim() === "") {
+    alert("Please add an employee name!");
+    return;
+  } else {
+    var counter = 0;
+    // check if employee name already exists
+    employees.value.forEach(e => {
+      if (e.name === empl.value.name) {
+        counter += 1;
+      }
+    });
+    if (counter == 2) {
+      alert("This employee name already exists. Please choose an unique employee name or modify respectively delete the old one!");
+      empl.value.name = '';
+      return;
+    }
+    if (empl.value.department.trim() === "") {
+      alert("Please choose an department!");
+      return;
+    }
+    if (!validateEMail(empl.value.eMail)) {
+      alert("Please add a valid email!");
+      return;
+    }
+    try {
+      await Axios.put(
+        `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateCustEmployee`,
+        {
+          primaryID: empl.value.primaryID,
+          name: empl.value.name,
+          pronouns: empl.value.pronouns,
+          title: empl.value.title,
+          firstName: empl.value.firstName,
+          lastName: empl.value.lastName,
+          preferredName: empl.value.preferredName,
+          department: empl.value.department,
+          departmentID: empl.value.departmentID,
+          jobTitle: empl.value.jobTitle,
+          phonenumber: empl.value.phonenumber,
+          eMail: empl.value.eMail,
+          notes: empl.value.notes,
+        }
+      )
+      await getEmployeeById();
+    } catch (err) {
+      console.log(err.response.statusText);
+    }
+  }
+}
+
+// add new employee
+const addEmployee = async () => {
+  // check if all input data is valid
+  if (newName.value.trim() === "") {
+    alert("Please add an employee name!");
+    return;
+  } else {
+    var counter = 0;
+    // check if employee name already exists
+    employees.value.forEach(c => {
+      if (c.name === newName.value) {
+        counter += 1;
+      }
+    });
+    if (counter == 1) {
+      alert("This employee name already exists. Please choose an unique employee name or modify respectively delete the old one!");
+      return;
+    }
+  }
+  if (!validateEMail(newEMail.value)) {
+    alert("Please add a valid email!");
+    return;
+  }
+  if (newDepartment.value.trim() === "") {
+    alert("Please choose a department!");
+    return;
+  }
+  try {
+    const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addCustEmployee`,
+      {
+        customerID: chosenCustomerId.value,
+        customername: customer.value.customername,
+        name: newName.value,
+        pronouns: newPronouns.value,
+        title: newTitle.value,
+        firstName: newFirstName.value,
+        lastName: newLastName.value,
+        preferredName: newPreferedName.value,
+        department: newDepartment.value,
+        departmentID: newDepartmentID.value,
+        jobTitle: newJobTitle.value,
+        phonenumber: newPhonenumber.value,
+        eMail: newEMail.value,
+        notes: newNotes.value,
+      });
+    store.commit('resetStoreNotCustomer');
+    store.commit('changeToCustomerEmployeelist');
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+}
+
+// to validate the email address
+const validateEMail = (email) => {
+  const emailRegex = new RegExp(/^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/, "gm");
+  if (email === "") {
+    return true
+  }
+  return emailRegex.test(email);
+}
+
+//get all employees
+const getEmployees = async () => {
+  try {
+    const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustEmployeeByCustomer/${chosenCustomerEmployeeId.value}`
+    );
+    employees.value = response.data;
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+}
+
+const confirmDeleteEmployee = async () => {
+  if (deleteBool.value === true) {
+    if (confirm("Do you really want to delete this employee? It cannot be undone!")) {
+      try {
+        await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteCustEmployee/${chosenCustomerEmployeeId.value}`);
+        store.commit('undoDelete');
+        store.commit('resetStoreNotCustomer');
+        store.commit('changeToCustomerEmployeelist');
+      } catch (err) {
+        console.log(err.response.statusText);
+      }
+    } else {
+      store.commit('undoDelete');
+    }
+  }
+}
+
+//get all departments
+const getDepartments = async () => {
+  try {
+    const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedDepartmentByCustomer/${chosenCustomerId.value}`);
+    departments.value = response.data;
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+}
+
+// update departmentid if department was changed
+const updateDepartmentID = async () => {
+  try {
+    const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getDprtmntByName/${empl.value.department}`);
+    department.value = response.data;
+    empl.value.departmentID = department.value.primaryID;
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+  await updateEmployee();
+}
+
+// update departmentid if department was changed
+const updateNewDepartmentID = async () => {
+  try {
+    const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getDprtmntByName/${newDepartment.value}`);
+    newDepartmentID.value = response.data.primaryID;
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+  setTimeout(() => {
+    fetchDataFunc();
+  }, 2000);
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithSmallDelay = async (fetchDataFunc) => {
+  setTimeout(() => {
+    fetchDataFunc();
+  }, 500);
+}
 
 const getSession = async () => {
   const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -92,9 +432,14 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(deleteBool, confirmDeleteEmployee);
 
 onMounted(async () => {
-  await getSession();
+  getSession();
+  await getEmployeeById();
+  triggerBackendCallsWithSmallDelay(getDepartments);
+  triggerBackendCallsWithDelay(getCustomerById);
+  triggerBackendCallsWithDelay(getEmployees);
 });
 </script>
 
@@ -112,15 +457,15 @@ export default {
   margin: 0;
 }
 
-
-section {
+.information {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  align-items: flex-start;
+  justify-content: center;
   padding: 1.25rem 1.875rem;
   border-radius: 0.625rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-  align-items: stretch;
-  justify-content: center;
 }
 
 .section-darkmode {
@@ -131,23 +476,97 @@ section {
   background-color: #ffffff;
 }
 
+.h2-input-darkmode {
+  background-color: #212121;
+}
 
-.title {
-  padding: 1.25rem 0;
-  letter-spacing: 0.04rem;
+.h2-input-lightmode {
+  background-color: #EBEBEB;
+}
+
+.customer-name {
+  align-self: stretch;
+  padding: 1rem 0;
+  margin: 1rem;
+  letter-spacing: 5%;
   text-decoration-line: underline;
-  font: italic 400 1rem/1.875rem Overpass, sans-serif;
+  font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
 }
 
-.title-darkmode {
-  color: #ffffff;
+.saveNewItem-darkmode {
+  background: #2c2c2c;
+  color: #fff;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  border: none;
+  padding: 1rem 1.875rem;
+  width: 8%;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
-.title-lightmode {
-  color: #000000;
+.saveNewItem-lightmode {
+  background: #EBEBEB;
+  color: #212121;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  border: none;
+  padding: 1rem 1.875rem;
+  width: 8%;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
+.saveNewItem-darkmode:hover {
+  background-color: #444444;
+  cursor: pointer;
+}
 
+.saveNewItem-lightmode:hover {
+  background-color: #ACACAC;
+  cursor: pointer;
+}
+
+#saveNewItem {
+  text-align: center;
+}
+
+.input {
+  border: none;
+}
+
+.customer-name-input {
+  padding: 1rem 0;
+  margin: 1rem;
+  font-size: initial;
+  letter-spacing: 5%;
+  text-decoration-line: underline;
+  font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
+}
+
+.h2-darkmode {
+  color: #fff;
+}
+
+.h2-lightmode {
+  color: #000;
+}
+
+.select-darkmode {
+  border: none;
+  color: white;
+  background: #212121;
+  padding: 0.4rem;
+  border-radius: 0.3125rem;
+}
+
+.select-lightmode {
+  border: none;
+  color: black;
+  background: #EBEBEB;
+  padding: 0.4rem;
+  border-radius: 0.3125rem;
+}
 
 .data-group {
   display: flex;
@@ -241,6 +660,7 @@ section {
   align-items: flex-start;
   justify-content: center;
   gap: 0.625rem;
+  width: 100%;
 }
 
 .area-title {

components/server/CustomerEmployeeList.vue

@@ -1,4 +1,14 @@
 <template>
+    <section v-if="searchable" :class="['employee-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
+        <input v-model="nameSearchFilter" @change="filterEmployeesByName()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
+    <section v-if="filtered" :class="['employee-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Department</div>
+        <input v-model="departmentSearchFilter" @change="filterEmployeesByDepartment()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
         <table class="data-table" id="customer-employee-table">
@@ -16,19 +26,35 @@
                     :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
                     Pronouns</th>
             </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+            <tr v-for="empl in employees" :key="empl.primaryID"
+                :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                 <td
                     :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ...</td>
+                    <nuxt-link to="/customers" id="nuxt-link" class="button"
+                        :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                        @click="goToChosenEmployee(empl.primaryID)">
+                        {{ empl.primaryID }}
+                    </nuxt-link>
+                </td>
                 <td
                     :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
+                    <nuxt-link to="/customers" id="nuxt-link" class="button"
+                        :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                        @click="goToChosenEmployee(empl.primaryID)">
+                        {{ empl.name }}
+                    </nuxt-link>
+                </td>
                 <td
                     :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">
-                    ...</td>
+                    <nuxt-link to="/customers" id="nuxt-link" class="button"
+                        :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                        @click="goToChosenDepartment(empl.departmentID)">
+                        {{ empl.department }}
+                    </nuxt-link>
+                </td>
                 <td
                     :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
-                    ...</td>
+                    {{ empl.pronouns }}</td>
             </tr>
         </table>
     </section>
@@ -39,11 +65,90 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
+const chosenCustomerId = computed(() => store.state.chosenCustomerId);
+const searchable = computed(() => store.state.searchable);
+const filtered = computed(() => store.state.filtered);
+const departmentSearchFilter = ref('');
+const nameSearchFilter = ref('');
+const employees = ref([]);
 
 const darkMode = ref('')
+const employeeByDepartment = ref([]);
+const employeeByName = ref([]);
+
+const goToChosenEmployee = (id) => {
+    store.commit('setChosenCustomerEmployee', id);
+    store.commit('changeToCustomerEmployee');
+};
+
+const goToChosenDepartment = (id) => {
+    store.commit('setChosenCustomerDepartment', id);
+    store.commit('changeToDepartment');
+};
+
+//get employees by the selected customer
+const getEmployees = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustEmployeeByCustomer/${chosenCustomerId.value}`);
+        employees.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    nameSearchFilter.value = '';
+    await getEmployees();
+}
+
+// update filter term
+const updateFilterTerm = async () => {
+    departmentSearchFilter.value = '';
+    await getEmployees();
+}
+
+//get all employees based on the searched name
+const filterEmployeesByName = async () => {
+    if (nameSearchFilter.value === '') {
+        await getEmployees();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustEmployeeByName/${nameSearchFilter.value}`);
+            employeeByName.value = response.data;
+            employees.value = filterObjectsWithMatchingIds(employees.value, employeeByName.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all employees based on the searched department
+const filterEmployeesByDepartment = async () => {
+    if (departmentSearchFilter.value === '') {
+        await getEmployees();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustEmployeeByDprtmntName/${departmentSearchFilter.value}`);
+            employeeByDepartment.value = response.data;
+            employees.value = filterObjectsWithMatchingIds(employees.value, employeeByDepartment.value);
+        } catch (err) {
+            // console.log(err.response.statusText);
+            console.log(err);
+        }
+    }
+}
+
+const filterObjectsWithMatchingIds = (arr1, arr2) => {
+    return arr1.filter(obj1 => {
+        return arr2.some(obj2 => obj2.primaryID === obj1.primaryID);
+    });
+};
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -63,9 +168,12 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(searchable, updateSearchTerm);
+watch(filtered, updateFilterTerm);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getEmployees();
 });
 </script>
 
@@ -113,7 +221,66 @@ export default {
     color: #000000;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
 
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.employee-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+    box-sizing: border-box;
+}
+
+
+.input {
+    border: none;
+}
+
+#nuxt-link {
+    text-decoration: none;
+}
+
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
+
+.dataInput {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.instanceLabel {
+    width: 5.5625em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
 
 .data-table {
     width: 100%;

components/server/CustomerTable.vue

@@ -1,4 +1,10 @@
 <template>
+    <section v-if="customerSearchable"
+        :class="['customer-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['customerLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
+        <input v-model="customerSearchFilter" @change="searchCustomer()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <table class="data-table" id="customer-table">
             <tbody>
@@ -11,13 +17,24 @@
                         :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         Name</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-for="cust in customerList" :key="cust.customerID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ...</td>
+                        <nuxt-link to="/customers" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenCustomer(cust.customerID)">
+                            {{ cust.customerID }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        ...</td>
+                        <nuxt-link to="/customers" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenCustomer(cust.customerID)">
+                            {{ cust.customername }}
+                        </nuxt-link>
+                    </td>
                 </tr>
             </tbody>
         </table>
@@ -27,13 +44,53 @@
 
 <script setup>
 import { ref, onMounted, watch } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const goToChosenCustomer = (id) => {
+    store.commit('setChosenCustomer', id);
+    store.commit('changeToCustomer');
+};
+
 const darkMode = ref('')
+const customerSearchable = computed(() => store.state.searchable);
+const customerSearchFilter = ref('');
+const customerList = ref([]);
+
+// update search term
+const updateSearchTerm = async () => {
+    customerSearchFilter.value = '';
+    await getCustomers();
+}
+
+//get all customers
+const getCustomers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`);
+        customerList.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all customers based on the searched customers name
+const searchCustomer = async () => {
+    if (customerSearchFilter.value === '') {
+        await getCustomers();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustomersByName/${customerSearchFilter.value}`);
+            customerList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -53,9 +110,11 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(customerSearchable, updateSearchTerm);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getCustomers();
 });
 </script>
 
@@ -88,6 +147,74 @@ export default {
     background-color: #ffffff;
 }
 
+.customer-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+    box-sizing: border-box;
+}
+
+.dataInput {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.input {
+    border: none;
+}
+
+.customerLabel {
+    width: 5.5625em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+#nuxt-link {
+    text-decoration: none;
+}
+
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;

components/server/InstanceChecklist.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+    <section :class="['instance-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="instance-checklist">
             <tbody>
@@ -14,40 +14,70 @@
                         :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
                         Task</th>
                     <th
-                        :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '',  !darkMode && !addBool ? 'Comments-lightmode' : '']">
                         Comments</th>
-                    <th :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
+                    <th v-if="!addBool" :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-for="todo in poiTodos" :key="todo.primaryID"
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
-                        ...</td>
+                        {{ todo.rowID }}</td>
                     <td
                         :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                        ...</td>
+                        {{ todo.asset }}</td>
                     <td
                         :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
-                        ...</td>
+                        {{ todo.task }}</td>
                     <td
-                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
-                        ...</td>
-                    <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
+                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '',  !darkMode && !addBool ? 'Comments-lightmode' : '']">
+                        <textarea type="text" v-model="todo.comments" :readonly="!editable" @change="updatePOITodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                    </td>
+                    <td v-if="!addBool" :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input
+                            @change="toggleTodo(todo)" type="checkbox" v-model="todo.done"
                             :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
                 </tr>
             </tbody>
         </table>
-    </div>
+    </section>
+    <section v-if="addBool" id="saveNewPOI">
+        <button :class="[darkMode ? 'saveNewPOI-darkmode' : 'saveNewPOI-lightmode']" @click="addPOI()">Save</button>
+    </section>
 </template>
 
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 import { computed } from 'vue';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
-const darkMode = ref('')
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const chosenPOIId = computed(() => store.state.chosenPOIId);
+
+const addBool = computed(() => store.state.new);
+const newNamePOI = computed(() => store.state.newNamePOI);
+const newTemplateIDPOI = computed(() => store.state.newTemplateIDPOI);
+const newCustomerIDPOI = computed(() => store.state.newCustomerIDPOI);
+const newCustomerPOI = computed(() => store.state.newCustomerPOI);
+const newAssetPOI = computed(() => store.state.newAssetPOI);
+const newStatePOI = computed(() => store.state.newStatePOI);
+const newCreationDatePOI = computed(() => store.state.newCreationDatePOI);
+const newCompletionDatePOI = computed(() => store.state.newCompletionDatePOI);
+const newUserPOI = computed(() => store.state.newUserPOI);
+const newTemplateDescriptionPOI = computed(() => store.state.newTemplateDescriptionPOI);
+const newTemplateNotesPOI = computed(() => store.state.newTemplateNotesPOI);
+const newTimeSpentPOI = computed(() => store.state.newTimeSpentPOI);
+const newNotesPOI = computed(() => store.state.newNotes);
+const editable = computed(() => store.state.editable);
+
+const darkMode = ref('');
+const poiTodos = ref([]);
+const productionOrderInstances = ref([]);
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -58,6 +88,81 @@ const getSession = async () => {
     }
 }
 
+// get production order template todos from id
+const getPOITodosById = async () => {
+    if (chosenPOTId.value != -1 && addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            poiTodos.value = response.data;
+            store.commit('updateProductionOrderInstanceTemplateID', chosenPOTId.value)
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else if (addBool.value && !(newTemplateIDPOI.value == '')) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosProductionOrderTemplate/${newTemplateIDPOI.value}`
+            );
+            poiTodos.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosProductionOrderInstance/${chosenPOIId.value}`
+            );
+            const poiTodosComment = response.data;
+            // change the comment und step field name to comments and rowID
+            poiTodos.value = poiTodosComment.map(obj => {
+                const { step: rowID, comment: comments, ...rest } = obj;
+                return { ...rest, rowID, comments };
+            });
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    poiTodos.value = poiTodos.value.map(obj => ({
+        // convert 'done' to boolean
+        ...obj,
+        done: obj.done === "1"
+    }));
+}
+
+const toggleTodo = (todo) => {
+    let doneInput = false;
+    doneInput = todo.done;
+    updatePOITodo(todo, true, doneInput);
+}
+
+//update data
+const updatePOITodo = async (todo, doneChanged = false, doneInput = false) => {
+    if (doneChanged) {
+        todo.done = doneInput;
+    }
+    if (todo.done) {
+        todo.done = 1;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updatePOITodo`,
+            {
+                primaryID: todo.primaryID,
+                step: todo.rowID,
+                asset: todo.asset,
+                task: todo.task,
+                comment: todo.comments,
+                done: todo.done,
+            }
+        );
+        await getPOITodosById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -66,10 +171,101 @@ function getItem(item) {
     }
 }
 
+//get all productionOrder instances
+const getProductionOrderInstances = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
+        productionOrderInstances.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new production order instance
+const addPOI = async () => {
+    // check if all input data is valid
+    if (newNamePOI.value.trim() === "") {
+        alert("Please add a production order instance name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(productionOrderInstances.value.length == null)) {
+            // check if production order instance name already exists
+            productionOrderInstances.value.forEach(p => {
+                if (p.name === newNamePOI.value) {
+                    counter += 1;
+                }
+            });
+            if (counter == 1) {
+                alert("This production order instance name already exists. Please choose an unique production order instance name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    if (newCustomerPOI.value.length === 0) {
+        alert("Please choose a customer!");
+        return;
+    }
+    // get the time and date
+    const today = new Date();
+    const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
+    const time = today.getHours() + ":" + today.getMinutes();
+    const dateTime = date + ' ' + time;
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addPOI`,
+            {
+                name: newNamePOI.value,
+                templateID: newTemplateIDPOI.value,
+                customerID: newCustomerIDPOI.value,
+                customer: newCustomerPOI.value,
+                asset: newAssetPOI.value,
+                state: newStatePOI.value,
+                creationDate: dateTime,
+                completionDate: newCompletionDatePOI.value,
+                user: newUserPOI.value,
+                templateDescription: newTemplateDescriptionPOI.value,
+                templateNotes: newTemplateNotesPOI.value,
+                timeSpent: newTimeSpentPOI.value,
+                notes: newNotesPOI.value,
+            });
+        store.commit('resetStore');
+        store.commit('deactivateSearch');
+        store.commit('changeToInstancelist');
+        store.commit('seeAllIcon');
+        poiTodos.value.forEach(async todo => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoPOI`,
+                    {
+                        templateID: response.data,
+                        step: todo.rowID,
+                        asset: todo.asset,
+                        task: todo.task,
+                        comment: todo.comments,
+                        done: false,
+                    });
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        })
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
 watch(modeChanged, getSession)
+watch(newTemplateIDPOI, getPOITodosById)
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getPOITodosById();
+    triggerBackendCallsWithDelay(getProductionOrderInstances);
 });
 </script>
 
@@ -84,15 +280,13 @@ export default {
 <style scoped>
 .data {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-start;
-    justify-content: center;
-    align-self: stretch;
-    width: 100%;
-    padding: 1.25rem 1.875rem;
-    gap: 1.25rem;
-    border-radius: 0.625rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
 .div-darkmode {
@@ -110,6 +304,20 @@ export default {
     border-collapse: collapse;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.input {
+    border: none;
+}
+
 .table-row {
     display: flex;
     flex-direction: row;
@@ -119,6 +327,50 @@ export default {
     gap: 0.625rem;
 }
 
+.table-row-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.saveNewPOI-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewPOI-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewPOI-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.saveNewPOI-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewPOI {
+    text-align: center;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
@@ -146,6 +398,10 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+td {
+    height: 5rem;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -164,11 +420,28 @@ th {
     filter: invert(100%);
 }
 
-
 .checkbox-lightmode {
     filter: invert(0%);
 }
 
+.instance-checklist-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
 .Step {
     width: 7%;
 }
@@ -239,4 +512,10 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+textarea {
+    resize: none;
+    width: 20rem;
+    height: 5rem;
+}
 </style>

components/server/InstanceChecklistMVI.vue

@@ -0,0 +1,532 @@
+<template>
+    <section :class="['instance-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
+        <table class="data-table" id="instance-checklist">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        Step</th>
+                    <th
+                        :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        Asset</th>
+                    <th
+                        :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        Task</th>
+                    <th
+                        :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '', !darkMode && !addBool ? 'Comments-lightmode' : '']">
+                        Comments</th>
+                    <th v-if="!addBool" :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
+                </tr>
+                <tr v-for="todo in mviTodos" :key="todo.primaryID"
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        {{ todo.rowID }}</td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        {{ todo.asset }}</td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        {{ todo.task }}</td>
+                    <td
+                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '',  !darkMode && !addBool ? 'Comments-lightmode' : '']">
+                        <textarea type="text" v-model="todo.comments" :readonly="!editable"
+                            @change="updateMVITodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                    </td>
+                    <td v-if="!addBool" :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input
+                            @change="toggleTodo(todo)" type="checkbox" v-model="todo.done"
+                            :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+    <section v-if="addBool" id="saveNewMVI">
+        <button :class="[darkMode ? 'saveNewMVI-darkmode' : 'saveNewMVI-lightmode']" @click="addMVI()">Save</button>
+    </section>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const chosenMVIId = computed(() => store.state.chosenMITId);
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+
+const addBool = computed(() => store.state.new);
+const newNameMVI = computed(() => store.state.newNameMVI);
+const newTemplateIDMVI = computed(() => store.state.newTemplateIDMVI);
+const newMaintenanceTypeMVI = computed(() => store.state.newMaintenanceTypeMVI);
+const newStateMVI = computed(() => store.state.newStateMVI);
+const newCreationDateMVI = computed(() => store.state.newCreationDateMVI);
+const newCompletionDateMVI = computed(() => store.state.newCompletionDateMVI);
+const newUserMVI = computed(() => store.state.newUserMVI);
+const newCustomerIDMVI = computed(() => store.state.newCustomerIDMVI);
+const newCustomerMVI = computed(() => store.state.newCustomerMVI);
+const newTemplateNotesMVI = computed(() => store.state.newTemplateNotesMVI);
+const newTypeMVI = computed(() => store.state.newTypeMVI);
+const newTimeSpentMVI = computed(() => store.state.newTimeSpentMVI);
+const newNotesMVI = computed(() => store.state.newNotesMVI);
+const editable = computed(() => store.state.editable);
+
+const darkMode = ref('');
+const mviTodos = ref([]);
+const maintenanceVisitInstances = ref([]);
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+// get maintenance visit template todos from id
+const getMVITodosById = async () => {
+    if (chosenMVTId.value != -1 && addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            const mviTodosComment = response.data;
+            // change the commets to comments
+            mviTodos.value = mviTodosComment.map(obj => {
+                const { commets: comments, ...rest } = obj;
+                return { ...rest, comments };
+            });
+            store.commit('updateMaintenanceVisitInstanceTemplateID', chosenMVTId.value)
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else if (addBool.value && !(newTemplateIDMVI.value == '')) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitTemplate/${newTemplateIDMVI.value}`
+            );
+            const mviTodosComment = response.data;
+            // change the commets to comments
+            mviTodos.value = mviTodosComment.map(obj => {
+                const { commets: comments, ...rest } = obj;
+                return { ...rest, comments };
+            });
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitInstance/${chosenMVIId.value}`
+            );
+            const mviTodosComment = response.data;
+            // change the comment and step field name to comments and rowID
+            mviTodos.value = mviTodosComment.map(obj => {
+                const { step: rowID, comment: comments, ...rest } = obj;
+                return { ...rest, rowID, comments };
+            });
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    mviTodos.value = mviTodos.value.map(obj => ({
+        // convert 'done' to boolean
+        ...obj,
+        done: obj.done === "1"
+    }));
+}
+
+const toggleTodo = (todo) => {
+    let doneInput = false;
+    doneInput = todo.done;
+    updateMVITodo(todo, true, doneInput);
+}
+
+//update data
+const updateMVITodo = async (todo, doneChanged = false, doneInput = false) => {
+    if (doneChanged) {
+        todo.done = doneInput;
+    }
+    if (todo.done) {
+        todo.done = 1;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateMVITodo`,
+            {
+                primaryID: todo.primaryID,
+                step: todo.rowID,
+                asset: todo.asset,
+                task: todo.task,
+                comment: todo.comments,
+                done: todo.done,
+            }
+        );
+        await getMVITodosById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+//get all maintenance visit instances
+const getMaintenanceVisitInstances = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitInstances`);
+        maintenanceVisitInstances.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new maintenance visit instance
+const addMVI = async () => {
+    // check if all input data is valid
+    if (newNameMVI.value.trim() === "") {
+        alert("Please add a maintenance visit instance name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(maintenanceVisitInstances.value.length == null)) {
+            // check if maintenance visit instance name already exists
+            maintenanceVisitInstances.value.forEach(m => {
+                if (m.name === newNameMVI.value) {
+                    counter += 1;
+                }
+            });
+            if (counter == 1) {
+                alert("This maintenance visit instance name already exists. Please choose an unique maintenance visit instance name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    if (newCustomerMVI.value.length === 0) {
+        alert("Please choose a customer!");
+        return;
+    }
+    // get the time and date
+    const today = new Date();
+    const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
+    const time = today.getHours() + ":" + today.getMinutes();
+    const dateTime = date + ' ' + time;
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addMVI`,
+            {
+                name: newNameMVI.value,
+                templateID: newTemplateIDMVI.value,
+                maintenanceType: newMaintenanceTypeMVI.value,
+                state: newStateMVI.value,
+                creationDate: dateTime,
+                completionDate: newCompletionDateMVI.value,
+                user: newUserMVI.value,
+                customerID: newCustomerIDMVI.value,
+                customer: newCustomerMVI.value,
+                templateNotes: newTemplateNotesMVI.value,
+                type: newTypeMVI.value,
+                timeSpent: newTimeSpentMVI.value,
+                notes: newNotesMVI.value,
+            });
+        store.commit('resetStore');
+        store.commit('deactivateSearch');
+        store.commit('changeToInstancelist');
+        store.commit('seeAllIcon');
+        mviTodos.value.forEach(async todo => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoMVI`,
+                    {
+                        templateID: response.data,
+                        step: todo.rowID,
+                        asset: todo.asset,
+                        task: todo.task,
+                        comment: todo.comments,
+                        done: false,
+                    });
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        })
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+watch(modeChanged, getSession)
+watch(newTemplateIDMVI, getMVITodosById)
+
+onMounted(async () => {
+    getSession();
+    await getMVITodosById();
+    triggerBackendCallsWithDelay(getMaintenanceVisitInstances);
+});
+</script>
+
+<script>
+export default {
+    name: "InstanceChecklistMVI",
+};
+</script>
+
+
+
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.input {
+    border: none;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.table-row-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.saveNewMVI-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewMVI-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewMVI-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.saveNewMVI-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewMVI {
+    text-align: center;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+td {
+    height: 5rem;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.checkbox-darkmode {
+    filter: invert(100%);
+}
+
+.checkbox-lightmode {
+    filter: invert(0%);
+}
+
+.instance-checklist-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.Step {
+    width: 7%;
+}
+
+.Step-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Step-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 28%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 30%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 30%;
+}
+
+.Comments-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Comments-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Done {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+textarea {
+    resize: none;
+    width: 20rem;
+    height: 5rem;
+}
+</style>

components/server/Issue.vue

@@ -106,6 +106,23 @@ const newState = ref('');
 const newAmount = ref('');
 const newProperties = ref('');
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
 //get all issue
 const getIssues = async () => {
     try {
@@ -211,23 +228,6 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
 watch(deleteBool, confirmDeleteIssue);
 watch(modeChanged, getSession)
 
-const getSession = async () => {
-    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
-    if (loggedInUserDarkModeBool == 1) {
-        darkMode.value = true;
-    } else {
-        darkMode.value = false;
-    }
-}
-
-function getItem(item) {
-    if (process.client) {
-        return localStorage.getItem(item)
-    } else {
-        return undefined
-    }
-}
-
 onMounted(async () => {
     await getSession();
     await getIssueById();

components/server/IssueSlip.vue

@@ -19,8 +19,12 @@
                 <div class="ticketNo-user">
                     <div class="data-field" id="ticketNo">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
-                        <pre
-                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueSlip.ticketNo }}</pre>
+                        <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenPOI(issueSlip.ticketNo)">
+                            <pre
+                                :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueSlip.ticketNo }}</pre>
+                        </nuxt-link>
                     </div>
                     <div class="data-field" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
@@ -67,14 +71,15 @@
             <div class="info">
                 <div class="ticketNo-user">
                     <div class="data-field" id="ticketNo">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Production order:</pre>
                         <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"></pre>
-                        <!-- <select id="ticketNoDropDownChosenCI" v-model="newTicketNo" @change="updateIS()"
+                        <select id="ticketNoDropDownChosenCI" v-model="chosenTemplate"
+                            @change="updateIS(chosenTemplate)"
                             :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
-                            <option v-for="po in productionOrders" :key="po.ticketNumber">
-                                {{ po.ticketNumber }}
+                            <option v-for="template in productionOrders" :key="template.templateID">
+                                {{ template.name }}
                             </option>
-                        </select> -->
+                        </select>
                     </div>
                     <div class="data-field" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
@@ -131,6 +136,7 @@ const newCustomer = ref('');
 const newUser = ref('');
 const newNotes = ref('');
 const newDeliveryAddress = ref('');
+const chosenTemplate = ref('');
 
 // get issue slip from id
 const getIssueSlipById = async () => {
@@ -146,13 +152,24 @@ const getIssueSlipById = async () => {
     }
 }
 
+const goToChosenPOI = (id) => {
+    store.commit('setChosenPOI', id);
+    store.commit('changeToInstance');
+};
+
 // update issue slip fields in the store
-const updateIS = () => {
-    const is = {
+const updateIS = async (newPoiId = -1) => {
+    let is = {};
+    if (!(newPoiId == '-1')) {
+        // Find the object with the selected Name
+        const selectedObject = productionOrders.value.find(obj => obj.name === newPoiId);
+        // Get the ticketNumber
+        newTicketNo.value = selectedObject ? selectedObject.ticketNumber : null;
+    }
+    is = {
         customerId: newCustomerID.value,
         customer: newCustomer.value,
-        // ticketNo: newTicketNo.value,
-        ticketNo: 1,
+        ticketNo: newTicketNo.value,
         notes: newNotes.value,
         user: newUser.value,
         deliveryAddress: newDeliveryAddress.value,
@@ -218,15 +235,14 @@ const getCustomers = async () => {
     }
 }
 
-//get all production orders
+//get all productionOrder instances
 const getProductionOrders = async () => {
-    // try {
-    //     const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
-    //     );
-    // customers.value = response.data;
-    // } catch (err) {
-    //     console.log(err.response.statusText);
-    // }
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
+        productionOrders.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
 }
 
 const confirmDeleteIssueSlip = async () => {
@@ -498,4 +514,16 @@ export default {
     padding: 0.4rem;
     border-radius: 0.3125rem;
 }
+
+#nuxt-link {
+    text-decoration: none;
+}
+
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>

components/server/IssueTable.vue

@@ -67,6 +67,23 @@ const issueSearchFilter = ref('');
 const darkMode = ref('');
 const issues = ref([]);
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
 // update search term
 const updateSearchTerm = async () => {
     issueSearchFilter.value = '';
@@ -114,24 +131,6 @@ const searchIssue = async () => {
 
 watch(stateFilter, getIssues);
 watch(searchable, updateSearchTerm);
-
-const getSession = async () => {
-    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
-    if (loggedInUserDarkModeBool == 1) {
-        darkMode.value = true;
-    } else {
-        darkMode.value = false;
-    }
-}
-
-function getItem(item) {
-    if (process.client) {
-        return localStorage.getItem(item)
-    } else {
-        return undefined
-    }
-}
-
 watch(modeChanged, getSession)
 
 onMounted(async () => {

components/server/MaintenanceVisitsInstance.vue

@@ -1,29 +1,38 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['maintenance-visits-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 v-if="!editable" :class="['maintenance-visits-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+        mvi.name }}</h2>
+        <input v-if="editable" v-model="mvi.name" @change="updateMVI()"
+            :class="['data', 'mvi-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="maintenance-visits-instance-data">
             <div class="instanceInfo">
                 <div class="data-field" id="info">
                     <div class="templateId-customer-type" id="templateID">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.templateID }}</pre>
                     </div>
                     <div class="templateId-customer-type" id="customer">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.customer }}</pre>
                     </div>
                     <div class="templateId-customer-type" id="type">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.type }}</pre>
+                        <input v-if="editable" v-model="mvi.type" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
             </div>
         </div>
         <div class="maintenance-visits-instance-data">
-            <div class="additional">
+            <div class="additionaFl">
                 <div class="templateNotes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">...</pre>
+                    <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="templateNotes">{{ mvi.templateNotes }}</pre>
+                    <input v-if="editable" v-model="mvi.templateNotes" @change="updateMVI()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
         </div>
@@ -32,15 +41,126 @@
                 <div class="data-field" id="info">
                     <div class="maintenanceType-state-user" id="maintenanceType">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Maintenance type:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.maintenanceType }}</pre>
+                        <input v-if="editable" v-model="mvi.maintenanceType" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="maintenanceType-state-user" id="state">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.state }}</pre>
+                        <input v-if="editable" v-model="mvi.state" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="maintenanceType-state-user" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.user }}</pre>
+                        <select v-if="editable" id="assetsDropDownChosenCI" v-model="mvi.user" @change="updateMVI()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+                <div class="data-field" id="info">
+                    <div class="creationDate-completionDate-timeSpent" id="creationDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Creation date:</pre>
+                        <pre
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.creationDate }}</pre>
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="completionDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.completionDate }}</pre>
+                        <input v-if="editable" v-model="mvi.completionDate" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="timeSpent">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.timeSpent }}</pre>
+                        <input v-if="editable" v-model="mvi.timeSpent" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <input v-model="mvi.notes" :readonly="!editable" @change="updateMVI()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <input v-model="newName" @change="updateMaintenanceVisitInstance()"
+            :class="['data', 'mvi-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="maintenance-visits-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="templateId-customer-type" id="templateID">
+                        <pre v-if="mvtSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
+                        <pre v-if="!mvtSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name:</pre>
+                        <pre v-if="mvtSelected"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ chosenMVTId }}</pre>
+                        <select v-if="!mvtSelected" id="assetsDropDownChosenCI" v-model="chosenTemplate"
+                            @change="updateMaintenanceVisitInstance(chosenTemplate)"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="template in maintenanceVisitTemplates" :key="template.checklistID">
+                                {{ template.name }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="templateId-customer-type" id="customer">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.customer }}</pre>
+                    </div>
+                    <div class="templateId-customer-type" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <input v-model="newType" @change="updateMaintenanceVisitInstance()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="additionaFl">
+                <div class="templateNotes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
+                    <input v-model="newTemplateNotes" @change="updateMaintenanceVisitInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="maintenanceType-state-user" id="maintenanceType">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Maintenance type:</pre>
+                        <input v-model="newMaintenanceType" @change="updateMaintenanceVisitInstance()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="maintenanceType-state-user" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <input v-model="newState" @change="updateMaintenanceVisitInstance()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="maintenanceType-state-user" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <select id="assetsDropDownChosenCI" v-model="newUser" @change="updateMaintenanceVisitInstance()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
                     </div>
                 </div>
                 <div class="data-field" id="info">
@@ -63,7 +183,8 @@
             <div class="additional">
                 <div class="notes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                    <input v-model="newNotes" @change="updateMaintenanceVisitInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
@@ -75,11 +196,258 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const editable = computed(() => store.state.editable);
+const chosenMVIId = computed(() => store.state.chosenMITId);
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
+
 const darkMode = ref('');
+const mvtSelected = ref('');
+
+const mvi = ref({});
+const mvt = ref({});
+const customers = ref([]);
+
+const newName = ref('');
+const newTemplateID = ref('');
+const chosenTemplate = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newMaintenanceType = ref('');
+const newUser = ref('');
+const newState = ref('');
+const newNotes = ref('');
+const newTemplateNotes = ref('');
+const newType = ref('');
+const newCreationDate = ref('');
+const newCompletionDate = ref('');
+const newTimeSpent = ref('');
+const maintenanceVisitInstances = ref([]);
+const maintenanceVisitTemplates = ref([]);
+const userList = ref([]);
+
+//get all customers
+const getCustomers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
+        );
+        customers.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all maintenance visit templates
+const getMaintenanceVisitTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
+        maintenanceVisitTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// get maintenance visit template from id
+const getMVTById = async () => {
+    if (chosenMVTId.value == '-1') {
+        mvtSelected.value = false;
+        await getMaintenanceVisitTemplates();
+    } else {
+        mvtSelected.value = true;
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            mvt.value = response.data;
+            mvi.value.customer = mvt.value.customer;
+            mvi.value.customerID = mvt.value.customerID;
+            newCustomer.value = mvt.value.customer;
+            newCustomerID.value = mvt.value.customerID;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getMaintenanceVisitInstances();
+}
+
+// get maintenance visit template from id
+const getChosenMVTById = async (newMvtId) => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${newMvtId}`
+        );
+        mvt.value = response.data;
+        mvi.value.customer = mvt.value.customer;
+        mvi.value.customerID = mvt.value.customerID;
+        newCustomer.value = mvt.value.customer;
+        newCustomerID.value = mvt.value.customerID;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const confirmDeleteMVI = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this maintenance visit instance? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteMaintenanceVisitInstance/${chosenMVIId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosMVI/${chosenMVIId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            store.commit('undoDelete');
+            store.commit('resetStore');
+            store.commit('deactivateSearch');
+            store.commit('changeToInstancelist');
+            store.commit('seeAllIcon');
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//get all users
+const getUsers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllEmployees`);
+        userList.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//update data
+const updateMVI = async () => {
+    if (mvi.value.name.trim() === "") {
+        alert("Please add a maintenance visit instance name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if maintenance visit instance name already exists
+        maintenanceVisitInstances.value.forEach(m => {
+            if (m.name === mvi.value.name) {
+                counter += 1;
+            }
+        });
+        if (counter == 2) {
+            alert("This maintenance visit instance name already exists. Please choose an unique maintenance visit instance name or modify respectively delete the old one!");
+            mvi.value.name = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateMaintenanceVisitInstance`,
+                {
+                    primaryID: mvi.value.primaryID,
+                    name: mvi.value.name,
+                    templateID: mvi.value.templateID,
+                    maintenanceType: mvi.value.maintenanceType,
+                    state: mvi.value.state,
+                    creationDate: mvi.value.creationDate,
+                    completionDate: mvi.value.completionDate,
+                    user: mvi.value.user,
+                    customerID: mvi.value.customerID,
+                    customer: mvi.value.customer,
+                    type: mvi.value.type,
+                    templateNotes: mvi.value.templateNotes,
+                    timeSpent: mvi.value.timeSpent,
+                    notes: mvi.value.notes,
+                }
+            )
+            await getMVIById();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all maintenance visit instances
+const getMaintenanceVisitInstances = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitInstances`);
+        maintenanceVisitInstances.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update maintenance visit instance fields in the store
+const updateMaintenanceVisitInstance = async (newMvtId = -1) => {
+    let maintenanceVisitInstance = {};
+    if (mvtSelected.value) {
+        maintenanceVisitInstance = {
+            name: newName.value,
+            templateID: chosenMVTId.value,
+            maintenanceType: newMaintenanceType.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            templateNotes: newTemplateNotes.value,
+            type: newType.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    } else {
+        if (!(newMvtId == '-1')) {
+            // Find the object with the selected Name
+            const selectedObject = maintenanceVisitTemplates.value.find(obj => obj.name === newMvtId);
+            // Get the templateID
+            newTemplateID.value = selectedObject ? selectedObject.checklistID : null;
+            await getChosenMVTById(newTemplateID.value);
+        }
+        maintenanceVisitInstance = {
+            name: newName.value,
+            templateID: newTemplateID.value,
+            maintenanceType: newMaintenanceType.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            templateNotes: newTemplateNotes.value,
+            type: newType.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    }
+    store.commit('updateMaintenanceVisitInstanceComponent', maintenanceVisitInstance);
+}
+
+// get maintenance visit instance from id
+const getMVIById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitInstance/${chosenMVIId.value}`
+            );
+            mvi.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -99,9 +467,14 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(deleteBool, confirmDeleteMVI);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getMVIById();
+    await getMVTById();
+    triggerBackendCallsWithDelay(getUsers);
+    triggerBackendCallsWithDelay(getCustomers);
 });
 </script>
 
@@ -143,6 +516,22 @@ export default {
         sans-serif;
 }
 
+.select-lightmode {
+    border: none;
+    color: black;
+    background: #EBEBEB;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
+.select-darkmode {
+    border: none;
+    color: white;
+    background: #212121;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
 .h2-darkmode {
     color: #fff;
 }
@@ -199,6 +588,36 @@ export default {
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
+.input {
+    border: none;
+}
+
+.mvi-name-input {
+    /* padding: 1rem 0; */
+    margin: 1rem;
+    font-size: initial;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
 .data-darkmode {
     background-color: #212121;
     color: #fff;
@@ -268,4 +687,8 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
+
+.templateNotes {
+    padding-left: 1.8rem;
+}
 </style>

components/server/MaintenanceVisitsInstanceTable.vue

@@ -1,4 +1,14 @@
 <template>
+    <section v-if="searchable" :class="['mvi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
+        <input v-model="nameSearchFilter" @change="filterMVIByName()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
+    <section v-if="filtered" :class="['mvi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">User</div>
+        <input v-model="userSearchFilter" @change="filterInstancesByUser()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
         <table class="data-table" name="maintenance-visits-instance-table">
@@ -8,8 +18,8 @@
                         :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         ID</th>
                     <th
-                        :class="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
-                        Maintenance type</th>
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
                     <th
                         :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
                         State</th>
@@ -21,39 +31,158 @@
                         Completion date</th>
                     <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-for="instance in maintenanceVisitInstances" :key="instance.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ...</td>
+                        <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenMVI(instance.primaryID)">
+                            {{ instance.primaryID }}
+                        </nuxt-link>
+                    </td>
                     <td
-                        :class="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
-                        ...</td>
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenMVI(instance.primaryID)">
+                            {{ instance.name }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                        ...</td>
+                        {{ instance.state }}</td>
                     <td
                         :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                        ...</td>
+                        {{ instance.creationDate }}</td>
                     <td
                         :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
-                        ...</td>
-                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        {{ instance.completionDate }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ instance.user }}</td>
                 </tr>
             </tbody>
         </table>
     </div>
 </template>
 
-
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+const searchable = computed(() => store.state.searchable);
+const filtered = computed(() => store.state.filtered);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
+const filteredUserTerm = computed(() => store.state.filteredUserTerm);
+const userSearchFilter = ref('');
+const nameSearchFilter = ref('');
+const maintenanceVisitInstances = ref([]);
+
 const darkMode = ref('');
+const mvt = ref({});
+const MVIByUser = ref([]);
+const MVIByName = ref([]);
+
+const goToChosenMVI = (id) => {
+    store.commit('setChosenMIT', id);
+    store.commit('changeToInstance');
+};
+
+//get all maintenance visit instances
+const getMaintenanceVisitInstances = async () => {
+    if (notAllInstancesIcon.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVIByMVT/${mvt.value.checklistID}`);
+            maintenanceVisitInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitInstances`);
+            maintenanceVisitInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    nameSearchFilter.value = '';
+    await getMaintenanceVisitInstances();
+}
+
+// update filter term
+const updateFilterTerm = async () => {
+    if (filteredUserTerm.value) {
+        store.commit('activateFiltered');
+        userSearchFilter.value = getItem('logged-in-user-username');
+    } else {
+        userSearchFilter.value = '';
+    }
+    await getMaintenanceVisitInstances();
+    if (filteredUserTerm.value) {
+        await filterInstancesByUser();
+    }
+}
+
+// get maintenance visit template from id
+const getMVTById = async () => {
+    if (notAllInstancesIcon.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            mvt.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getMaintenanceVisitInstances();
+}
+
+//get all instances based on the searched state
+const filterMVIByName = async () => {
+    if (nameSearchFilter.value === '') {
+        await getMaintenanceVisitInstances();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVIByName/${nameSearchFilter.value}`);
+            MVIByName.value = response.data;
+            maintenanceVisitInstances.value = filterObjectsWithMatchingIds(maintenanceVisitInstances.value, MVIByName.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all instances based on the searched user
+const filterInstancesByUser = async () => {
+    if (userSearchFilter.value === '') {
+        await getMaintenanceVisitInstances();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVIByUser/${userSearchFilter.value}`);
+            MVIByUser.value = response.data;
+            maintenanceVisitInstances.value = filterObjectsWithMatchingIds(maintenanceVisitInstances.value, MVIByUser.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+const filterObjectsWithMatchingIds = (arr1, arr2) => {
+    return arr1.filter(obj1 => {
+        return arr2.some(obj2 => obj2.primaryID === obj1.primaryID);
+    });
+};
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -64,6 +193,11 @@ const getSession = async () => {
     }
 }
 
+const getAll = async () => {
+    store.commit('resetFilterSearch');
+    await getMaintenanceVisitInstances();
+}
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -73,9 +207,13 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(searchable, updateSearchTerm);
+watch(filtered, updateFilterTerm);
+watch(notAllInstancesIcon, getAll);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getMVTById();
 });
 </script>
 
@@ -162,6 +300,28 @@ td {
     color: #000;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.mvi-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+    box-sizing: border-box;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -178,15 +338,15 @@ th {
     border-right: 0.0625rem solid #8e8e8e;
 }
 
-.MaintenanceType {
+.Name {
     width: 15%;
 }
 
-.MaintenanceType-darkmode {
+.Name-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
-.MaintenanceType-lightmode {
+.Name-lightmode {
     border-right: 0.0625rem solid #8e8e8e;
 }
 
@@ -249,4 +409,50 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+.input {
+    border: none;
+}
+
+#nuxt-link {
+    text-decoration: none;
+}
+
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
+
+.dataInput {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.instanceLabel {
+    width: 5.5625em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
 </style>

components/server/ProductionOrdersInstance.vue

@@ -1,16 +1,19 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['production-orders-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 v-if="!editable" :class="['production-orders-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+        poi.name }}</h2>
+        <input v-if="editable" v-model="poi.name" @change="updatePOI()"
+            :class="['data', 'poi-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="production-orders-instance-data">
             <div class="instanceInfo">
                 <div class="data-field" id="info">
                     <div class="templateId-customer" id="templateID">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.templateID }}</pre>
                     </div>
                     <div class="templateId-customer" id="customer">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ poi.customer }}</pre>
                     </div>
                 </div>
             </div>
@@ -19,14 +22,132 @@
             <div class="additional">
                 <div class="templateDescription">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template description:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
-                        id="templateDescription">...</pre>
+                    <input v-model="poi.templateDescription" :readonly="!editable" @change="updatePOI()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="templateDescription">
                 </div>
             </div>
             <div class="additional">
                 <div class="templateNotes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">...</pre>
+                    <input v-model="poi.templateNotes" :readonly="!editable" @change="updatePOI()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field-four" id="infoFour">
+                    <div class="ticketNo-asset-state-user" id="ticketNo">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
+                        <pre
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.ticketNumber }}</pre>
+                    </div>
+                    <div class="ticketNo-asset-state-user" id="asset">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ poi.asset }}</pre>
+                        <select v-if="editable" id="assetsDropDownChosenCI" v-model="poi.asset" @change="updatePOI()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="asset in assets" :key="asset.primaryID">
+                                {{ asset.assetName }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="ticketNo-asset-state-user" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.state }}</pre>
+                        <input v-if="editable" v-model="poi.state" @change="updatePOI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="ticketNo-asset-state-user" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.user }}</pre>
+                        <select v-if="editable" id="assetsDropDownChosenCI" v-model="poi.user" @change="updatePOI()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+                <div class="data-field" id="info">
+                    <div class="creationDate-completionDate-timeSpent" id="creationDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Creation date:</pre>
+                        <pre
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.creationDate }}</pre>
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="completionDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.completionDate }}</pre>
+                        <input v-if="editable" v-model="poi.completionDate" @change="updatePOI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="timeSpent">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.timeSpent }}</pre>
+                        <input v-if="editable" v-model="poi.timeSpent" @change="updatePOI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <input v-model="poi.notes" :readonly="!editable" @change="updatePOI()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <input v-model="newName" @change="updateProductionOrderInstance()"
+            :class="['data', 'poi-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="production-orders-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="templateId-customer" id="templateID">
+                        <pre v-if="potSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
+                        <pre v-if="!potSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name:</pre>
+                        <pre v-if="potSelected"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ chosenPOTId }}</pre>
+                        <select v-if="!potSelected" id="assetsDropDownChosenCI" v-model="chosenTemplate"
+                            @change="updateProductionOrderInstance(chosenTemplate)"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="template in productionOrderTemplates" :key="template.templateID">
+                                {{ template.name }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="templateId-customer" id="customer">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ poi.customer }}</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-data">
+            <div class="additional">
+                <div class="templateDescription">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template description:</h3>
+                    <input v-model="newTemplateDescription" @change="updateProductionOrderInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="templateDescription">
+                </div>
+            </div>
+            <div class="additional">
+                <div class="templateNotes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
+                    <input v-model="newTemplateNotes" @change="updateProductionOrderInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">
                 </div>
             </div>
         </div>
@@ -39,15 +160,26 @@
                     </div>
                     <div class="ticketNo-asset-state-user" id="asset">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <select id="assetsDropDownChosenCI" v-model="newAsset" @change="updateProductionOrderInstance()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="asset in assets" :key="asset.primaryID">
+                                {{ asset.assetName }}
+                            </option>
+                        </select>
                     </div>
                     <div class="ticketNo-asset-state-user" id="state">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <input v-model="newState" @change="updateProductionOrderInstance()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="ticketNo-asset-state-user" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <select id="assetsDropDownChosenCI" v-model="newUser" @change="updateProductionOrderInstance()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
                     </div>
                 </div>
                 <div class="data-field" id="info">
@@ -70,7 +202,8 @@
             <div class="additional">
                 <div class="notes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                    <input v-model="newNotes" @change="updateProductionOrderInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
@@ -82,11 +215,261 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const editable = computed(() => store.state.editable);
+const chosenPOIId = computed(() => store.state.chosenPOIId);
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
+
 const darkMode = ref('');
+const potSelected = ref('');
+
+const poi = ref({});
+const pot = ref({});
+const customers = ref([]);
+const assets = ref([]);
+
+const newName = ref('');
+const newTemplateID = ref('');
+const chosenTemplate = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newUser = ref('');
+const newState = ref('');
+const newNotes = ref('');
+const newTemplateDescription = ref('');
+const newTemplateNotes = ref('');
+const newAsset = ref('');
+const newCreationDate = ref('');
+const newCompletionDate = ref('');
+const newTimeSpent = ref('');
+const productionOrderInstances = ref([]);
+const productionOrderTemplates = ref([]);
+const userList = ref([]);
+
+//get all customers
+const getCustomers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
+        );
+        customers.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all productionOrder templates
+const getProductionOrderTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
+        productionOrderTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// get production order template from id
+const getPOTById = async () => {
+    if (chosenPOTId.value == '-1') {
+        potSelected.value = false;
+        await getProductionOrderTemplates();
+    } else {
+        potSelected.value = true;
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            pot.value = response.data;
+            poi.value.customer = pot.value.customer;
+            poi.value.customerID = pot.value.customerID;
+            newCustomer.value = pot.value.customer;
+            newCustomerID.value = pot.value.customerID;
+            await getConfigItemsFromCustomer();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getProductionOrderInstances();
+}
+
+// get production order template from id
+const getChosenPOTById = async (newPotId) => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${newPotId}`
+        );
+        pot.value = response.data;
+        poi.value.customer = pot.value.customer;
+        poi.value.customerID = pot.value.customerID;
+        newCustomer.value = pot.value.customer;
+        newCustomerID.value = pot.value.customerID;
+        await getConfigItemsFromCustomer();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const confirmDeletePOI = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this production order instance? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteProductionOrderInstance/${chosenPOIId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosPOI/${chosenPOIId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            store.commit('undoDelete');
+            store.commit('resetStore');
+            store.commit('deactivateSearch');
+            store.commit('changeToInstancelist');
+            store.commit('seeAllIcon');
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//get all users
+const getUsers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllEmployees`);
+        userList.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//update data
+const updatePOI = async () => {
+    if (poi.value.name.trim() === "") {
+        alert("Please add a production order instance name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if production order instance name already exists
+        productionOrderInstances.value.forEach(p => {
+            if (p.name === poi.value.name) {
+                counter += 1;
+            }
+        });
+        if (counter == 2) {
+            alert("This production order instance name already exists. Please choose an unique production order instance name or modify respectively delete the old one!");
+            poi.value.name = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateProductionOrderInstance`,
+                {
+                    ticketNumber: poi.value.ticketNumber,
+                    name: poi.value.name,
+                    templateID: poi.value.templateID,
+                    customerID: poi.value.customerID,
+                    customer: poi.value.customer,
+                    asset: poi.value.asset,
+                    state: poi.value.state,
+                    creationDate: poi.value.creationDate,
+                    completionDate: poi.value.completionDate,
+                    user: poi.value.user,
+                    templateDescription: poi.value.templateDescription,
+                    templateNotes: poi.value.templateNotes,
+                    timeSpent: poi.value.timeSpent,
+                    notes: poi.value.notes,
+                }
+            )
+            await getPOIById();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all productionOrder instances
+const getProductionOrderInstances = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
+        productionOrderInstances.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update production order instance fields in the store
+const updateProductionOrderInstance = async (newPotId = -1) => {
+    let productionOrderInstance = {};
+    if (potSelected.value) {
+        productionOrderInstance = {
+            name: newName.value,
+            templateID: chosenPOTId.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            asset: newAsset.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            templateDescription: newTemplateDescription.value,
+            templateNotes: newTemplateNotes.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    } else {
+        if (!(newPotId == '-1')) {
+            // Find the object with the selected Name
+            const selectedObject = productionOrderTemplates.value.find(obj => obj.name === newPotId);
+            // Get the templateID
+            newTemplateID.value = selectedObject ? selectedObject.templateID : null;
+            await getChosenPOTById(newTemplateID.value);
+        }
+        productionOrderInstance = {
+            name: newName.value,
+            templateID: newTemplateID.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            asset: newAsset.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            templateDescription: newTemplateDescription.value,
+            templateNotes: newTemplateNotes.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    }
+    store.commit('updateProductionOrderInstanceComponent', productionOrderInstance);
+}
+
+// get production order instance from id
+const getPOIById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderInstance/${chosenPOIId.value}`
+            );
+            poi.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -97,6 +480,25 @@ const getSession = async () => {
     }
 }
 
+//get all config items from the selected customer
+const getConfigItemsFromCustomer = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromCustomer/${poi.value.customerID}`);
+            assets.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else if (!(newCustomerID.value == '')) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromCustomer/${newCustomerID.value}`);
+            assets.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -105,10 +507,16 @@ function getItem(item) {
     }
 }
 
-watch(modeChanged, getSession)
+watch(modeChanged, getSession);
+watch(deleteBool, confirmDeletePOI);
+watch(editable, getConfigItemsFromCustomer);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getPOIById();
+    await getPOTById();
+    triggerBackendCallsWithDelay(getCustomers);
+    triggerBackendCallsWithDelay(getUsers);
 });
 </script>
 
@@ -131,6 +539,17 @@ export default {
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
 .section-darkmode {
     background-color: #2c2c2c;
 }
@@ -139,7 +558,13 @@ export default {
     background-color: #fff;
 }
 
+.h2-input-darkmode {
+    background-color: #212121;
+}
 
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
 
 .production-orders-instance-name {
     align-self: stretch;
@@ -158,6 +583,16 @@ export default {
     color: #000;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .data-field {
     display: flex;
     flex-direction: row;
@@ -216,17 +651,6 @@ export default {
     color: #000;
 }
 
-.data {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    padding: 0 0.625rem;
-    border-radius: 0.3125rem;
-    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-    letter-spacing: 5%;
-    font: 400 0.75rem/250% Overpass, sans-serif;
-}
-
 .data-darkmode {
     background-color: #212121;
     color: #fff;
@@ -268,6 +692,28 @@ export default {
     border-radius: 0.3125rem;
 }
 
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.input {
+    border: none;
+}
+
+.poi-name-input {
+    /* padding: 1rem 0; */
+    margin: 1rem;
+    font-size: initial;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
 .additional {
     display: flex;
     flex-direction: column;
@@ -280,7 +726,7 @@ export default {
 }
 
 div#customer {
-    padding-left: 2.9em;
+    padding-left: 4.4em;
 }
 
 .area-title {
@@ -314,4 +760,20 @@ div#customer {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
+
+.select-lightmode {
+    border: none;
+    color: black;
+    background: #EBEBEB;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
+.select-darkmode {
+    border: none;
+    color: white;
+    background: #212121;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
 </style>

components/server/ProductionOrdersInstanceTable.vue

@@ -1,15 +1,25 @@
 <template>
+    <section v-if="searchable" :class="['poi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
+        <input v-model="nameSearchFilter" @change="filterPOIByName()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
+    <section v-if="filtered" :class="['poi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">User</div>
+        <input v-model="userSearchFilter" @change="filterInstancesByUser()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
         <table class="data-table" name="production-orders-instance-table">
             <tbody>
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                    <th
-                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ID</th>
                     <th
                         :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
                         Ticket No.</th>
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
                     <th
                         :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
                         Asset</th>
@@ -24,26 +34,42 @@
                         Completion date</th>
                     <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                    <td
-                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ...</td>
+                <tr v-for="instance in productionOrderInstances" :key="instance.ticketNumber"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
-                        ...</td>
+                        <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenPOI(instance.ticketNumber)">
+                            {{ instance.ticketNumber }}
+                        </nuxt-link>
+                    </td>
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenPOI(instance.ticketNumber)">
+                            {{ instance.name }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                        ...</td>
+                        <nuxt-link to="/assets" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenAsset(instance.asset)">
+                            {{ instance.asset }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                        ...</td>
+                        {{ instance.state }}</td>
                     <td
                         :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                        ...</td>
+                        {{ instance.creationDate }}</td>
                     <td
                         :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
-                        ...</td>
-                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        {{ instance.completionDate }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ instance.user }}</td>
                 </tr>
             </tbody>
         </table>
@@ -55,11 +81,136 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const searchable = computed(() => store.state.searchable);
+const filtered = computed(() => store.state.filtered);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
+const filteredUserTerm = computed(() => store.state.filteredUserTerm);
+const userSearchFilter = ref('');
+const nameSearchFilter = ref('');
+const productionOrderInstances = ref([]);
+
 const darkMode = ref('');
+const pot = ref({});
+const POIByUser = ref([]);
+const POIByName = ref([]);
+
+const goToChosenPOI = (id) => {
+    store.commit('setChosenPOI', id);
+    store.commit('changeToInstance');
+};
+
+//get all production order instances
+const getProductionOrderInstances = async () => {
+    if (notAllInstancesIcon.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByPOT/${pot.value.templateID}`);
+            productionOrderInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
+            productionOrderInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    nameSearchFilter.value = '';
+    await getProductionOrderInstances();
+}
+
+// update filter term
+const updateFilterTerm = async () => {
+    if (filteredUserTerm.value) {
+        store.commit('activateFiltered');
+        userSearchFilter.value = getItem('logged-in-user-username');
+    } else {
+        userSearchFilter.value = '';
+    }
+    await getProductionOrderInstances();
+    if (filteredUserTerm.value) {
+        await filterInstancesByUser();
+    }
+}
+
+// get production order template from id
+const getPOTById = async () => {
+    if (notAllInstancesIcon.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            pot.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getProductionOrderInstances();
+}
+
+const goToChosenAsset = async (name) => {
+    let ci = {}
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedConfigItemsByAsset/${name}`
+        );
+        ci = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    store.commit('setChosenAsset', ci[0].primaryID);
+    setTimeout(() => {
+    }, 1000);
+    store.commit('changeToAsset');
+};
+
+//get all instances based on the searched name
+const filterPOIByName = async () => {
+    if (nameSearchFilter.value === '') {
+        await getProductionOrderInstances();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByName/${nameSearchFilter.value}`);
+            POIByName.value = response.data;
+            productionOrderInstances.value = filterObjectsWithMatchingIds(productionOrderInstances.value, POIByName.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all instances based on the searched user
+const filterInstancesByUser = async () => {
+    if (userSearchFilter.value === '') {
+        await getProductionOrderInstances();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByUser/${userSearchFilter.value}`);
+            POIByUser.value = response.data;
+            productionOrderInstances.value = filterObjectsWithMatchingIds(productionOrderInstances.value, POIByUser.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+const filterObjectsWithMatchingIds = (arr1, arr2) => {
+    return arr1.filter(obj1 => {
+        return arr2.some(obj2 => obj2.ticketNumber === obj1.ticketNumber);
+    });
+};
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -70,6 +221,11 @@ const getSession = async () => {
     }
 }
 
+const getAll = async () => {
+    store.commit('resetFilterSearch');
+    await getProductionOrderInstances();
+}
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -79,9 +235,13 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(searchable, updateSearchTerm);
+watch(filtered, updateFilterTerm);
+watch(notAllInstancesIcon, getAll);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getPOTById();
 });
 </script>
 
@@ -171,20 +331,8 @@ th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.ID {
-    width: 15.83%;
-}
-
-.ID-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.ID-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
 .TicketNo {
-    width: 15.83%;
+    width: 12.83%;
 }
 
 .TicketNo-darkmode {
@@ -195,6 +343,17 @@ th {
     border-right: 0.0625rem solid #8e8e8e;
 }
 
+.Name {
+    width: 18.83%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
 
 .Asset {
     width: 15.83%;
@@ -266,4 +425,73 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.poi-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+    box-sizing: border-box;
+}
+
+
+.input {
+    border: none;
+}
+
+#nuxt-link {
+    text-decoration: none;
+}
+
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
+
+.dataInput {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.instanceLabel {
+    width: 5.5625em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
 </style>

components/server/ProductionOrdersTemplate.vue

@@ -429,14 +429,6 @@ export default {
     align-self: stretch;
 }
 
-.select-darkmode {
-    border: none;
-    color: white;
-    background: #212121;
-    padding: 0.4rem;
-    border-radius: 0.3125rem;
-}
-
 .select-lightmode {
     border: none;
     color: black;
@@ -453,14 +445,6 @@ export default {
     border-radius: 0.3125rem;
 }
 
-.select-lightmode {
-    border: none;
-    color: black;
-    background: #EBEBEB;
-    padding: 0.4rem;
-    border-radius: 0.3125rem;
-}
-
 .customer-ID,
 .user {
     display: flex;

components/server/TemplateChecklist.vue

@@ -17,7 +17,7 @@
                     <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                 </tr>
                 <tr v-for="todo in potTodos" :key="todo.primaryID"
-                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ todo.rowID }}
@@ -42,17 +42,15 @@
                         <input type="text" v-model="todo.task" @change="updatePOTTodo(todo)"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{
-        todo.comments
-    }}</td>
-                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
-                            type="text" v-model="todo.comments" @change="updatePOTTodo(todo)"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
-                            :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                        <textarea type="text" v-model="todo.comments" :readonly="!editable"
+                            @change="updatePOTTodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>                    
+                        <button v-if="editable" :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
                             @click="deletePOTTodo(todo.primaryID)">-</button>
                     </td>
                 </tr>
-                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                <tr v-if="editable && addRow" :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
                     id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
@@ -72,10 +70,10 @@
                         <input type="text" v-model="newTaskTodo"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
-                            v-model="newCommentsTodo"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
-                            :class="[darkMode ? 'savePOTTodos-darkmode' : 'savePOTTodos-lightmode']"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                        <textarea type="text" v-model="newCommentsTodo"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                        <button :class="[darkMode ? 'savePOTTodos-darkmode' : 'savePOTTodos-lightmode']"
                             @click="addPOTTodo()">Save</button> <button
                             :class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
                             @click="deleteNewRow()">-</button>
@@ -106,7 +104,7 @@
                     <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                 </tr>
                 <tr v-for="(newT, index) in newTodos" :key="index"
-                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ newT.rowID }}
@@ -125,10 +123,10 @@
                         <input type="text" v-model="newT.task"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <textarea type="text"
                             v-model="newT.comments"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
-                            :class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                        <button :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
                             @click="deletePOTTodoFromNewTodos(index)">-</button>
                     </td>
                 </tr>
@@ -436,6 +434,43 @@ function getItem(item) {
     }
 }
 
+// const inputValue = ref('');
+// const widthMachine = computed(() => inputValue.value);
+
+// function handleInput(event) {
+//     inputValue.value = event.target.value;
+// }
+
+// // Textarea height handling
+// const textareaValue = ref('');
+// const textareaHeight = computed(() => calcHeight(textareaValue.value));
+
+// function handleTextareaInput(event) {
+//     textareaValue.value = event.target.value;
+// }
+
+// function calcHeight(value) {
+//     const numberOfLineBreaks = (value.match(/\n/g) || []).length;
+//     // min-height + lines x line-height + padding + border
+//     const newHeight = 20 + numberOfLineBreaks * 20 + 12 + 2;
+//     return newHeight;
+// }
+
+// const spanElement = ref(null);
+// const computedHeight = ref('auto'); // Default height is 'auto'
+
+// // Compute the height of the span element
+// const computeSpanHeight = () => {
+//     if (spanElement.value) {
+//         computedHeight.value = spanElement.value.offsetHeight + 'px';
+//     }
+// };
+
+// // Watch for changes in the content of the span element
+// watch(() => textareaValue.value, () => {
+//     computeSpanHeight();
+// });
+
 watch(customerChanged, getPOTById);
 watch(modeChanged, getSession)
 
@@ -466,6 +501,17 @@ export default {
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+/* .data-span {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+} */
+
 .section-darkmode {
     background-color: #2c2c2c;
 }
@@ -520,6 +566,14 @@ export default {
     gap: 0.625rem;
 }
 
+.table-row-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
@@ -547,6 +601,10 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+td {
+    height: 5rem;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -648,9 +706,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 10rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .saveNewPOT-darkmode {
@@ -670,9 +730,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 6rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteLastPOTTodos-darkmode {
@@ -681,9 +743,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 
@@ -704,9 +768,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 10rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deletePOTTodos-lightmode {
@@ -715,9 +781,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 6rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteLastPOTTodos-lightmode {
@@ -726,9 +794,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 2rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .saveNewPOT-lightmode {
@@ -769,4 +839,10 @@ th {
 #editPOTTodos {
     text-align: right;
 }
+
+textarea {
+    resize: none;
+    width: 20rem;
+    height: 5rem;
+}
 </style>

components/server/TemplateChecklistMVT.vue

@@ -17,7 +17,7 @@
                     <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                 </tr>
                 <tr v-for="todo in mvtTodos" :key="todo.primaryID"
-                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ todo.rowID }}
@@ -42,17 +42,15 @@
                         <input type="text" v-model="todo.task" @change="updateMVTTodo(todo)"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{
-        todo.commets
-    }}</td>
-                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
-                            type="text" v-model="todo.commets" @change="updateMVTTodo(todo)"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                        <textarea type="text" v-model="todo.commets" :readonly="!editable" @change="updateMVTTodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                        <button v-if="editable"
                             :class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteMvtTodos-lightmode']"
                             @click="deleteMVTTodo(todo.primaryID)">-</button>
                     </td>
                 </tr>
-                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                <tr v-if="editable && addRow" :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
                     id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
@@ -72,10 +70,10 @@
                         <input type="text" v-model="newTaskTodo"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
-                            v-model="newCommentsTodo"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
-                            :class="[darkMode ? 'saveMvtTodos-darkmode' : 'saveMvtTodos-lightmode']"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                        <textarea type="text" v-model="newCommentsTodo"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                        <button :class="[darkMode ? 'saveMvtTodos-darkmode' : 'saveMvtTodos-lightmode']"
                             @click="addMVTTodo()">Save</button> <button
                             :class="[darkMode ? 'deleteLastMvtTodos-darkmode' : 'deleteLastMvtTodos-lightmode']"
                             @click="deleteNewRow()">-</button>
@@ -106,7 +104,7 @@
                     <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                 </tr>
                 <tr v-for="(newT, index) in newTodos" :key="index"
-                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ newT.rowID }}
@@ -125,10 +123,10 @@
                         <input type="text" v-model="newT.task"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
-                            v-model="newT.comments"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
-                            :class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteLastMvtTodos-lightmode']"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                        <textarea type="text" v-model="newT.comments"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                        <button :class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteMvtTodos-lightmode']"
                             @click="deleteMVTTodoFromNewTodos(index)">-</button>
                     </td>
                 </tr>
@@ -522,6 +520,14 @@ export default {
     gap: 0.625rem;
 }
 
+.table-row-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
@@ -549,6 +555,10 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+td {
+    height: 5rem;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -651,9 +661,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 10rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .saveNewMVT-darkmode {
@@ -673,9 +685,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 6rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteLastMvtTodos-darkmode {
@@ -684,9 +698,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 2rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 
@@ -707,9 +723,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 10rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteMvtTodos-lightmode {
@@ -718,9 +736,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 6rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteLastMvtTodos-lightmode {
@@ -729,9 +749,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 2rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .saveNewMVT-lightmode {
@@ -772,4 +794,10 @@ th {
 #editMvtTodos {
     text-align: right;
 }
+
+textarea {
+    resize: none;
+    width: 20rem;
+    height: 5rem;
+}
 </style>

components/server/UserAccount.vue

@@ -54,7 +54,7 @@ import clientsideConfig from '../../clientsideConfig.js';
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
-const editable = computed(() => store.state.editable);
+const editable = computed(() => store.state.editableUser);
 const changePasswordBool = ref(false);
 
 const loggedInUserId = ref('');

components/server/UserProfile.vue

@@ -81,7 +81,7 @@ import clientsideConfig from '../../clientsideConfig.js';
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
-const editable = computed(() => store.state.editable);
+const editable = computed(() => store.state.editableUser);
 const loggedInUserId = ref('');
 const loggedInUserUsername = ref('');
 const loggedInUserRegistered = ref('');

components/server/UserRightsList.vue

@@ -1,215 +0,0 @@
-<!-- <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Rights:</div>
-        <table class="data-table" id="user-rights-list">
-            <tbody>
-                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                    <th
-                        :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
-                        User</th>
-                    <th
-                        :class="['Admin', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
-                        Admin</th>
-                    <th
-                        :class="['Edit-Delete', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
-                        Edit/Delete</th>
-                    <th
-                        :class="['Create', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
-                        Create</th>
-                    <th :class="['View', darkMode ? 'th-darkmode' : 'th-lightmode']">View</th>
-                </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                    <td
-                        :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
-                        ...</td>
-                    <td
-                        :class="['Admin', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
-                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
-                    </td>
-                    <td
-                        :class="['Edit-Delete', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
-                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
-                    </td>
-                    <td
-                        :class="['Create', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
-                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
-                    </td>
-                    <td :class="['View', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
-                            :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
-  
-<script setup>
-import { ref } from 'vue';
-
-const darkMode = ref(true)
-</script>
-
-<script>
-export default {
-    name: "UserRightsList",
-};
-</script>  
-        
-<style scoped>
-.data {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    align-self: stretch;
-    width: 100%;
-    padding: 1.25rem 1.875rem;
-    gap: 1.25rem;
-    border-radius: 0.625rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-}
-
-.div-darkmode {
-    background-color: #2c2c2c;
-}
-
-.div-lightmode {
-    background-color: #fff;
-}
-
-.data-table {
-    width: 100%;
-    padding: 0 0.625rem;
-    table-layout: fixed;
-    border-collapse: collapse;
-}
-
-.table-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 3.125rem;
-    padding: 0.625rem;
-    gap: 0.625rem;
-}
-
-.tr-head-darkmode {
-    border-top: none;
-    border-bottom: 0.0625rem solid #000000;
-}
-
-.tr-head-lightmode {
-    border-top: none;
-    border-bottom: 0.0625rem solid #8e8e8e;
-}
-
-.tr-darkmode {
-    border-top: 0.0625rem solid #000000;
-}
-
-.tr-lightmode {
-    border-top: 0.0625rem solid #8e8e8e;
-}
-
-th,
-td {
-    height: 1.875rem;
-    text-align: left;
-    padding: 0;
-    letter-spacing: 5%;
-    font: 400 0.875rem/1.875rem Overpass, sans-serif;
-}
-
-th {
-    font: 700 0.875rem/1.875rem Overpass, sans-serif;
-}
-
-.th-darkmode,
-.td-darkmode {
-    color: #ffffff;
-}
-
-.th-lightmode,
-.td-lightmode {
-    color: #000;
-}
-
-.checkbox-darkmode {
-    filter: invert(100%);
-}
-
-
-.checkbox-lightmode {
-    filter: invert(0%);
-}
-
-.User {
-    width: 50%;
-}
-
-.User-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.User-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.Admin {
-    width: 12.5%;
-}
-
-.Admin-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Admin-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.Edit-Delete {
-    width: 12.5%;
-}
-
-.Edit-Delete-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Edit-Delete-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.Create {
-    width: 12.5%;
-}
-
-.Create-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Create-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.View {
-    width: 12.5%;
-}
-
-.label {
-    width: 6.0625em;
-    height: 1.875em;
-    font-family: 'Overpass';
-    font-style: normal;
-    font-weight: 400;
-    font-size: 1em;
-    line-height: 1.875em;
-    letter-spacing: 0.05em;
-}
-
-.label-darkmode {
-    color: #FFFFFF;
-}
-
-.label-lightmode {
-    color: #000;
-}
-</style> -->

documentation/.$Datenbankmodell.drawio.bkp

@@ -1,11 +1,11 @@
-<mxfile host="Electron" modified="2024-03-11T18:43:59.748Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="Ub9Iakw2VLrdzjhM2iAH" version="22.0.3" type="device" pages="2">
+<mxfile host="Electron" modified="2024-03-26T21:49:41.086Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="AqTSSHc8H4ak1GACwEHF" version="22.0.3" type="device" pages="2">
   <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
-    <mxGraphModel dx="409" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+    <mxGraphModel dx="411" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
         <mxCell id="DauqCNUrC7Z9yIe88X-r-1" value="customers" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#94FF4D;" parent="1" vertex="1">
-          <mxGeometry x="1060" y="-1240" width="120" height="300" as="geometry" />
+          <mxGeometry x="1060" y="-1240" width="120" height="600" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-126" value="customerID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="30" width="120" height="30" as="geometry" />
@@ -19,21 +19,51 @@
         <mxCell id="g533v6kp8f2wI3S2lvbX-2" value="EMail" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="120" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="g533v6kp8f2wI3S2lvbX-1" value="phonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-7" value="secondEMail" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="150" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-4" value="&lt;div&gt;address&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-8" value="thirdEMail" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="180" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-16" value="postcode" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="g533v6kp8f2wI3S2lvbX-1" value="phonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="210" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-15" value="city" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-10" value="secondPhonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="240" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="jym2pQnfcZ--NBFUidHV-1" value="notes" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-9" value="thirdPhonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="270" width="120" height="30" as="geometry" />
         </mxCell>
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-4" value="&lt;div&gt;address&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="300" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-16" value="postcode" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="330" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-15" value="city" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="360" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="jym2pQnfcZ--NBFUidHV-1" value="notes" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="390" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-1" value="&lt;div&gt;secondAddress&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="420" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-2" value="&lt;div&gt;secondPostcode&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="450" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-3" value="&lt;div&gt;secondCity&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="480" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-4" value="thirdAddress" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="510" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-5" value="&lt;div&gt;thirdPostcode&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="540" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-6" value="&lt;div&gt;thirdCity&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="570" width="120" height="30" as="geometry" />
+        </mxCell>
         <mxCell id="DauqCNUrC7Z9yIe88X-r-18" value="masterMaintenanceVisits" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="470" y="-560" width="140" height="270" as="geometry" />
         </mxCell>
@@ -341,7 +371,7 @@
           <mxGeometry y="300" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="-K6vikdffkJQkB35vOLp-1" value="users" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry y="-1570" width="150" height="540" as="geometry" />
+          <mxGeometry y="-1570" width="150" height="510" as="geometry" />
         </mxCell>
         <mxCell id="-K6vikdffkJQkB35vOLp-2" value="id" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="30" width="150" height="30" as="geometry" />
@@ -379,21 +409,18 @@
         <mxCell id="ioDwbpDVXUhE7vu6D29p-8" value="adminBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="360" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-9" value="technician1Bool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-10" value="technicianBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="390" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-10" value="technician2Bool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-12" value="readerBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="420" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-11" value="technicianMonitoringBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="YxEx8JsSJKZlR_KfoIc3-1" value="darkModeBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="450" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-12" value="merchantBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ESQ1TkVnqClHsEl95Prr-1" value="language" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="-K6vikdffkJQkB35vOLp-1">
           <mxGeometry y="480" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="UjUgOsnL5tA5fsC7Xk2_-1" value="internBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
-          <mxGeometry y="510" width="150" height="30" as="geometry" />
-        </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-15" value="issueSlips" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="2040" y="-560" width="140" height="840" as="geometry" />
         </mxCell>

documentation/Datenbankmodell.drawio

@@ -1,11 +1,11 @@
-<mxfile host="Electron" modified="2024-03-26T21:49:41.086Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="AqTSSHc8H4ak1GACwEHF" version="22.0.3" type="device" pages="2">
+<mxfile host="Electron" modified="2024-04-06T12:57:42.412Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="LeSh1zP1QTatGoux1_Wi" version="22.0.3" type="device" pages="2">
   <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
-    <mxGraphModel dx="411" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+    <mxGraphModel dx="1020" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
         <mxCell id="DauqCNUrC7Z9yIe88X-r-1" value="customers" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#94FF4D;" parent="1" vertex="1">
-          <mxGeometry x="1060" y="-1240" width="120" height="600" as="geometry" />
+          <mxGeometry x="1060" y="-1240" width="120" height="690" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-126" value="customerID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="30" width="120" height="30" as="geometry" />
@@ -34,36 +34,45 @@
         <mxCell id="EQ1vHiXafF4bEUqPIK37-9" value="thirdPhonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="270" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-4" value="&lt;div&gt;address&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-4" value="&lt;div&gt;street&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="300" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-16" value="postcode" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="8YviqBC1L0ecwHDw8wwW-1" value="&lt;div&gt;no&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="330" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-15" value="city" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-16" value="postcode" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="360" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="jym2pQnfcZ--NBFUidHV-1" value="notes" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-15" value="city" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="390" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="EQ1vHiXafF4bEUqPIK37-1" value="&lt;div&gt;secondAddress&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="8YviqBC1L0ecwHDw8wwW-2" value="&lt;div&gt;secondStreet&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="420" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="EQ1vHiXafF4bEUqPIK37-2" value="&lt;div&gt;secondPostcode&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="8YviqBC1L0ecwHDw8wwW-3" value="&lt;div&gt;secondNo&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="450" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="EQ1vHiXafF4bEUqPIK37-3" value="&lt;div&gt;secondCity&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-2" value="&lt;div&gt;secondPostcode&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="480" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="EQ1vHiXafF4bEUqPIK37-4" value="thirdAddress" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-3" value="&lt;div&gt;secondCity&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="510" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="EQ1vHiXafF4bEUqPIK37-5" value="&lt;div&gt;thirdPostcode&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-1" value="&lt;div&gt;thirdStreet&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="540" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="EQ1vHiXafF4bEUqPIK37-6" value="&lt;div&gt;thirdCity&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-4" value="thirdNo" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="570" width="120" height="30" as="geometry" />
         </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-5" value="&lt;div&gt;thirdPostcode&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="600" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-6" value="&lt;div&gt;thirdCity&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="630" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="jym2pQnfcZ--NBFUidHV-1" value="notes" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="660" width="120" height="30" as="geometry" />
+        </mxCell>
         <mxCell id="DauqCNUrC7Z9yIe88X-r-18" value="masterMaintenanceVisits" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="470" y="-560" width="140" height="270" as="geometry" />
         </mxCell>
@@ -418,7 +427,7 @@
         <mxCell id="YxEx8JsSJKZlR_KfoIc3-1" value="darkModeBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="450" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ESQ1TkVnqClHsEl95Prr-1" value="language" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="-K6vikdffkJQkB35vOLp-1">
+        <mxCell id="ESQ1TkVnqClHsEl95Prr-1" value="language" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="480" width="150" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-15" value="issueSlips" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
@@ -922,6 +931,94 @@
         <mxCell id="MZUjV4dI-UfRvC4hdJyc-36" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-49" target="WukdXvazNq34soQIU5Al-58" edge="1">
           <mxGeometry relative="1" as="geometry" />
         </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-1" value="customeremployees" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#94FF4D;" parent="1" vertex="1">
+          <mxGeometry x="2140" y="-1380" width="120" height="480" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-24" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="30" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-2" value="customerID" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="60" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-3" value="customername" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="90" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-5" value="name" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="120" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-6" value="pronouns" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="150" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-8" value="title" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="180" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-9" value="firstName" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="210" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-10" value="lastName" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="240" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-11" value="&lt;div&gt;preferredName&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="270" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-26" value="&lt;div&gt;department&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="300" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-45" value="&lt;div&gt;departmentID&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="330" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-12" value="&lt;div&gt;jobTitle&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="360" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-13" value="phonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="390" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-7" value="eMail" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="420" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-14" value="notes" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-1" vertex="1">
+          <mxGeometry y="450" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="WukdXvazNq34soQIU5Al-126" target="ZQnjGdimb5Qvt3okSkAT-2" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="1380" y="-1195" />
+              <mxPoint x="1380" y="-1305" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-27" value="customerdepartment" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#94FF4D;" parent="1" vertex="1">
+          <mxGeometry x="2330" y="-1380" width="120" height="210" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-28" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-27" vertex="1">
+          <mxGeometry y="30" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-29" value="customerID" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-27" vertex="1">
+          <mxGeometry y="60" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-30" value="customername" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-27" vertex="1">
+          <mxGeometry y="90" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-31" value="name" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-27" vertex="1">
+          <mxGeometry y="120" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-32" value="head" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-27" vertex="1">
+          <mxGeometry y="150" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-41" value="notes" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="ZQnjGdimb5Qvt3okSkAT-27" vertex="1">
+          <mxGeometry y="180" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="ZQnjGdimb5Qvt3okSkAT-44" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" target="ZQnjGdimb5Qvt3okSkAT-29" edge="1">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="1190" y="-1185" as="sourcePoint" />
+            <mxPoint x="2150" y="-1295" as="targetPoint" />
+            <Array as="points">
+              <mxPoint x="1390" y="-1185" />
+              <mxPoint x="1390" y="-1295" />
+              <mxPoint x="2330" y="-1295" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
       </root>
     </mxGraphModel>
   </diagram>

layouts/Actionbar.vue

@@ -30,7 +30,7 @@
         </Transition>
       </button>
       <button v-if="instancesIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
-        id="instances">
+        id="instances" @click="changeToInstancelist">
         <div class="icon" id="instances-icon">
           <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Instances-Icon.svg" />
@@ -51,8 +51,8 @@
             :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
         </Transition>
       </button>
-      <button v-if="attachmentsIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
-        id="attachments">
+      <button v-if="attachmentsIcon && false"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="attachments">
         <div class="icon" id="attachments-icon">
           <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Attachments-Icon.svg" />
@@ -62,7 +62,8 @@
             :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
         </Transition>
       </button>
-      <button v-if="sellIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="sell">
+      <button v-if="sellIcon && false" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+        id="sell">
         <div class="icon" id="sell-icon">
           <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Sell-Icon.svg" />
@@ -72,8 +73,8 @@
             :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
         </Transition>
       </button>
-      <button v-if="archiveIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
-        id="archive">
+      <button v-if="archiveIcon && false"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
           <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Archive-Icon.svg" />
@@ -95,7 +96,8 @@
         </Transition>
       </button>
       <button v-if="addInstanceIcon && !loggedInUserReaderBool"
-        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance"
+        @click="addInstance">
         <div class="icon" id="new-icon">
           <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Add-New-Icon.svg" />
@@ -105,6 +107,30 @@
             :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
         </Transition>
       </button>
+      <button v-if="addEmployeeIcon && !loggedInUserReaderBool"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-employee"
+        @click="addEmployee">
+        <div class="icon" id="new-icon">
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Add-New-Icon.svg" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
+        </Transition>
+      </button>
+      <button v-if="addDepartmentIcon && !loggedInUserReaderBool"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-department"
+        @click="addDepartment">
+        <div class="icon" id="new-icon">
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Add-New-Icon.svg" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
+        </Transition>
+      </button>
       <router-link v-if="addSolutionIcon && !loggedInUserReaderBool" to="/solutions" class="button"
         :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
         <button :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-solution"
@@ -119,6 +145,42 @@
           </Transition>
         </button>
       </router-link>
+      <button v-if="notAllInstancesIcon && !addIcon"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="allInstances"
+        @click="changeToAllInstances">
+        <div class="icon" id="instances-icon">
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Instances-Icon.svg" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">See all</pre>
+        </Transition>
+      </button>
+      <button v-if="departmentsIcon && !loggedInUserReaderBool"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="departments"
+        @click="changeToDepartments">
+        <div class="icon" id="departments-icon">
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Departments-Icon.svg" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Departments</pre>
+        </Transition>
+      </button>
+      <button v-if="employeesIcon && !loggedInUserReaderBool"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="employees"
+        @click="changeToEmployees">
+        <div class="icon" id="employees-icon">
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Employees-Icon.svg" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Employees</pre>
+        </Transition>
+      </button>
       <button v-if="editIcon && !loggedInUserReaderBool"
         :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
         @click="toggleEditable">
@@ -131,6 +193,17 @@
             :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
+      <button v-if="editUserIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+        id="editUser" @click="toggleEditableUser">
+        <div class="icon" id="edit-icon">
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Edit-Icon.svg" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
+        </Transition>
+      </button>
       <button v-if="deleteIcon && !loggedInUserReaderBool"
         :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
         <div class="icon" id="delete-icon">
@@ -154,6 +227,8 @@ import { computed } from 'vue';
 const changeToSet = computed(() => store.state.changeToSet);
 const addIcon = computed(() => store.state.addIcon);
 const addInstanceIcon = computed(() => store.state.addInstanceIcon);
+const addEmployeeIcon = computed(() => store.state.addEmployeeIcon);
+const addDepartmentIcon = computed(() => store.state.addDepartmentIcon);
 const addSolutionIcon = computed(() => store.state.addSolutionIcon);
 const solutionIcon = computed(() => store.state.solutionIcon);
 const filterIcon = computed(() => store.state.filterIcon);
@@ -163,7 +238,11 @@ const attachmentsIcon = computed(() => store.state.attachmentsIcon);
 const sellIcon = computed(() => store.state.sellIcon);
 const archiveIcon = computed(() => store.state.archiveIcon);
 const editIcon = computed(() => store.state.editIcon);
+const departmentsIcon = computed(() => store.state.departmentsIcon);
+const employeesIcon = computed(() => store.state.employeesIcon);
+const editUserIcon = computed(() => store.state.editUserIcon);
 const deleteIcon = computed(() => store.state.deleteIcon);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
 
 const loggedInUserDarkModeBoolean = ref('');
 const isExpanded = ref(true);
@@ -175,6 +254,9 @@ const store = useStore()
 const toggleEditable = () => {
   store.commit('toggleEditable');
 };
+const toggleEditableUser = () => {
+  store.commit('toggleEditableUser');
+};
 const deleteFunc = () => {
   store.commit('doDelete');
 };
@@ -183,9 +265,11 @@ const toggleActionbar = () => {
   isExpanded.value = !isExpanded.value;
 };
 const toggleFiltered = () => {
+  store.commit('deactivateSearch');
   store.commit('toggleFiltered');
 };
 const toggleSearched = () => {
+  store.commit('deactivateSearch');
   store.commit('toggleSearchable');
 };
 const add = () => {
@@ -196,8 +280,39 @@ const addSolution = () => {
   store.commit('add');
 };
 
+const addInstance = () => {
+  store.commit('addInstance');
+};
+
+const addDepartment = () => {
+  store.commit('addDepartment');
+};
+
+const addEmployee = () => {
+  store.commit('addEmployee');
+};
+
 const changeToSolutions = () => {
   store.commit('changeToSolutionlistAsset');
+};
+
+const changeToDepartments = () => {
+  store.commit('changeToDepartmentlist');
+};
+
+const changeToEmployees = () => {
+  store.commit('changeToCustomerEmployeelist');
+};
+
+const changeToInstancelist = () => {
+  store.commit('deactivateSearch');
+  store.commit('changeToInstancelist');
+}
+
+const changeToAllInstances = () => {
+  store.commit('deactivateSearch');
+  store.commit('changeToInstancelist');
+  store.commit('seeAllIcon');
 }
 
 // const changeToSettingsPage = () => {

layouts/Navigationbar.vue

@@ -2,11 +2,11 @@
   <aside
     :class="['navbar', loggedInUserDarkModeBoolean ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
     <div class="toggleNavbar">
-      <div v-if="isExpanded" :class="['icon', loggedInUserDarkModeBoolean ? 'back-darkmode' : 'back-lightmode']"
+      <!-- <div v-if="isExpanded" :class="['icon', loggedInUserDarkModeBoolean ? 'back-darkmode' : 'back-lightmode']"
         id="back-icon">
         <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
           src="/icons/Back-Icon.svg" />
-      </div>
+      </div> -->
       <div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']"
         id="indicator-icon" @click="ToggleSidebar">
         <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
@@ -77,7 +77,8 @@
           </Transition>
         </router-link>
         <router-link to="/customers" class="button"
-          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="customers-button">
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" @click="defaultCustomerPage()"
+          id="customers-button">
           <div class="icon" id="customers-icon">
             <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="/icons/navbar-icons/Customers-Icon.svg" />
@@ -143,6 +144,11 @@ const defaultEmployeesPage = () => {
   store.commit('changeToEmployeelist')
 }
 
+const defaultCustomerPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToCustomerlist')
+}
+
 const ToggleSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };

pages/customers.vue

@@ -1,17 +1,20 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
+      <router-link to="/customers" class="button" id="customers-button" @click="defaultCustomerPage()">
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
+      </router-link>
     </div>
     <div id="content-body">
       <CustomerTable v-if="onCustomerlist" />
       <Customer v-if="onCustomer" />
-      <CustomerQuickAccess v-if="onCustomer" />
-      <CustomerEmployeeList v-if="onEmployeelist" />
-      <CustomerEmployee v-if="onEmployee" />
+      <!-- <CustomerQuickAccess v-if="onCustomer" /> -->
+      <ClientSearch v-if="onCustomerEmployeelist || onDepartmentlist" />
+      <CustomerEmployeeList v-if="onCustomerEmployeelist" />
+      <CustomerEmployee v-if="onCustomerEmployee" />
       <CustomerDepartmentList v-if="onDepartmentlist" />
       <CustomerDepartment v-if="onDepartment" />
-      <CustomerDepartmentEmployeeList v-if="onDepartment" />
+      <CustomerDepartmentEmployeeList v-if="onDepartment && !addBool" />
     </div>
   </section>
 </template>
@@ -22,6 +25,7 @@ import { ref, onMounted, watch } from 'vue';
 import CustomerTable from "../components/server/CustomerTable.vue";
 import Customer from "../components/server/Customer.vue";
 import CustomerQuickAccess from "../components/server/CustomerQuickAccess.vue";
+import ClientSearch from "../components/ClientSearch.vue";
 import CustomerEmployeeList from "../components/server/CustomerEmployeeList.vue";
 import CustomerEmployee from "../components/server/CustomerEmployee.vue";
 import CustomerDepartmentList from '~/components/server/CustomerDepartmentList.vue';
@@ -31,6 +35,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const addBool = computed(() => store.state.new);
+
+const onCustomerlist = computed(() => store.state.onCustomerlist);
+const onCustomer = computed(() => store.state.onCustomer);
+const onCustomerEmployeelist = computed(() => store.state.onCustomerEmployeelist);
+const onCustomerEmployee = computed(() => store.state.onCustomerEmployee);
+const onDepartmentlist = computed(() => store.state.onDepartmentlist);
+const onDepartment = computed(() => store.state.onDepartment);
 const modeChanged = computed(() => store.state.updateDarkMode);
 
 definePageMeta({
@@ -38,15 +50,12 @@ definePageMeta({
   title: 'Customers'
 })
 
-const loggedInUserDarkModeBoolean = ref('');
+const defaultCustomerPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToCustomerlist')
+}
 
-// to render the right components
-const onCustomerlist = ref(true)
-const onCustomer = ref(true)
-const onEmployeelist = ref(true)
-const onEmployee = ref(true)
-const onDepartmentlist = ref(true)
-const onDepartment = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
 
 const getSession = async () => {
   const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -106,9 +115,14 @@ export default {
   height: 3.125rem;
 }
 
+.button {
+  text-decoration: none;
+}
+
 #page-name {
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
+  text-decoration: underline;
 }
 
 .h1-darkmode {

pages/home.vue

@@ -6,7 +6,7 @@
     </div>
     <div id="content-body">
       <Dashboard />
-      <QuickAccess />
+      <!-- <QuickAccess /> -->
     </div>
   </section>
 </template>

pages/maintenanceVisits.vue

@@ -51,7 +51,7 @@ import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.vue"
 import TemplateSearch from "../components/TemplateSearch.vue";
 import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
 import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
-import InstanceChecklist from "../components/server/InstanceChecklist.vue";
+import InstanceChecklist from "../components/server/InstanceChecklistMVI.vue";
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 

plugins/vuex.js

@@ -4,6 +4,7 @@ const store = createStore({
     state() {
         return {
             editable: false,
+            editableUser: false,
             filtered: false,
             searchable: false,
             deleteBool: false,
@@ -11,6 +12,7 @@ const store = createStore({
             customerChanged: false,
             changedCustomerId: -1,
             filteredByCustomer: '',
+            filteredUserTerm: false,
 
             addIcon: false,
             addSolutionIcon: false,
@@ -22,8 +24,14 @@ const store = createStore({
             attachmentsIcon: false,
             sellIcon: false,
             archiveIcon: false,
+            departmentsIcon: false,
+            addEmployeeIcon: false,
+            addDepartmentIcon: false,
+            employeesIcon: false,
             editIcon: false,
+            editUserIcon: false,
             deleteIcon: false,
+            notAllInstancesIcon: false,
 
             onAssetlist: true,
             onAsset: false,
@@ -76,6 +84,9 @@ const store = createStore({
             newNotesMVT: '',
             chosenMVTId: -1,
 
+            chosenMITId: -1,
+            chosenPOIId: -1,
+
             onSolutionlist: true,
             onSolution: false,
             chosenSolutionId: -1,
@@ -142,6 +153,16 @@ const store = createStore({
             newCityEmp: '',
             newPostcodeEmp: '',
 
+            onCustomerlist: true,
+            onCustomer: false,
+            onCustomerEmployeelist: false,
+            onCustomerEmployee: false,
+            onDepartmentlist: false,
+            onDepartment: false,
+            chosenCustomerId: -1,
+            chosenCustomerEmployeeId: -1,
+            chosenDepartmentId: -1,
+
             loggedInUserId: '',
             loggedInUserUsername: '',
             loggedInUserRegistered: '',
@@ -164,6 +185,34 @@ const store = createStore({
 
             changeToSet: false,
             updateDarkMode: false,
+
+            newNamePOI: '',
+            newTemplateIDPOI: '',
+            newCustomerIDPOI: '',
+            newCustomerPOI: '',
+            newAssetPOI: '',
+            newStatePOI: '',
+            newCreationDatePOI: '',
+            newCompletionDatePOI: '',
+            newUserPOI: '',
+            newTemplateDescriptionPOI: '',
+            newTemplateNotesPOI: '',
+            newTimeSpentPOI: '',
+            newNotesPOI: '',
+
+            newNameMVI: '',
+            newTemplateIDMVI: '',
+            newMaintenanceTypeMVI: '',
+            newStateMVI: '',
+            newCreationDateMVI: '',
+            newCompletionDateMVI: '',
+            newUserMVI: '',
+            newCustomerIDMVI: '',
+            newCustomerMVI: '',
+            newTemplateNotesMVI: '',
+            newTypeMVI: '',
+            newTimeSpentMVI: '',
+            newNotesMVI: '',
         };
     },
     mutations: {
@@ -171,6 +220,9 @@ const store = createStore({
         toggleEditable(state) {
             state.editable = !state.editable
         },
+        toggleEditableUser(state) {
+            state.editableUser = !state.editableUser
+        },
         toggleChangeToSet(state) {
             state.changeToSet = !state.changeToSet
         },
@@ -224,7 +276,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerAssetlist(state) {
             state.onAssetlist = false
@@ -242,7 +300,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToAsset(state) {
             state.onAssetlist = false
@@ -260,7 +324,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
         changeToSolutionlistAsset(state) {
             state.onAssetlist = false
@@ -278,7 +348,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the production order and maintenance visit pages
@@ -299,7 +375,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerTemplatelist(state) {
             state.onTemplatelist = false
@@ -318,7 +400,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToTemplate(state) {
             state.onTemplatelist = false
@@ -337,7 +425,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
         changeToInstancelist(state) {
             state.onTemplatelist = false
@@ -356,11 +450,48 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = true
+        },
+        changeToInstance(state) {
+            state.onTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = true
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = true
+            state.sellIcon = false
+            state.archiveIcon = true
+            state.editIcon = true
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
+            state.deleteIcon = true
+            state.notAllInstancesIcon = true
+        },
+        seeAllIcon(state) {
+            state.notAllInstancesIcon = false
+            state.chosenPOTId = -1
+            state.chosenMVTId = -1
         },
         addNewAsset(state) {
             state.newAsset = true
             state.editable = false
+            state.editableUser = false
             state.filtered = false
             state.searchable = false
             state.onAssetlist = false
@@ -384,7 +515,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.departmentsIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerSolutionlist(state) {
             state.onSolutionlist = false
@@ -401,7 +538,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToSolution(state) {
             state.onSolutionlist = false
@@ -418,7 +561,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the issue slip pages
@@ -437,7 +586,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerIssueSliplist(state) {
             state.onIssueSliplist = false
@@ -454,7 +609,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToIssueSlip(state) {
             state.onIssueSliplist = false
@@ -471,7 +632,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the issue pages
@@ -491,7 +658,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToIssueItem(state) {
             state.onIssueItemList = false
@@ -509,7 +682,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = true
             state.editIcon = true
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
         changeToIssueItemVariant(state) {
             state.onIssueItemList = false
@@ -527,7 +706,13 @@ const store = createStore({
             state.sellIcon = true
             state.archiveIcon = true
             state.editIcon = true
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the user pages
@@ -546,7 +731,13 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToEmployee(state) {
             state.onEmployeelist = false
@@ -563,7 +754,177 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
+        },
+
+        // functions to change the customer pages
+        changeToCustomerlist(state) {
+            state.onCustomerlist = true
+            state.onCustomer = false
+            state.onCustomerEmployeelist = false
+            state.onCustomerEmployee = false
+            state.onDepartmentlist = false
+            state.onDepartment = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
+            state.deleteIcon = false
+            state.notAllInstancesIcon = false
+        },
+        changeToCustomer(state) {
+            state.onCustomerlist = false
+            state.onCustomer = true
+            state.onCustomerEmployeelist = false
+            state.onCustomerEmployee = false
+            state.onDepartmentlist = false
+            state.onDepartment = false
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.departmentsIcon = true
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = true
+            state.editUserIcon = false
+            state.deleteIcon = true
+            state.notAllInstancesIcon = false
+        },
+        changeToCustomerEmployeelist(state) {
+            state.onCustomerlist = false
+            state.onCustomer = false
+            state.onCustomerEmployeelist = true
+            state.onCustomerEmployee = false
+            state.onDepartmentlist = false
+            state.onDepartment = false
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = true
+            state.employeesIcon = false
+            state.editUserIcon = false
+            state.deleteIcon = false
+            state.notAllInstancesIcon = false
+        },
+        changeToCustomerEmployee(state) {
+            state.onCustomerlist = false
+            state.onCustomer = false
+            state.onCustomerEmployeelist = false
+            state.onCustomerEmployee = true
+            state.onDepartmentlist = false
+            state.onDepartment = false
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
+            state.deleteIcon = true
+            state.notAllInstancesIcon = false
+        },
+        changeToDepartmentlist(state) {
+            state.onCustomerlist = false
+            state.onCustomer = false
+            state.onCustomerEmployeelist = false
+            state.onCustomerEmployee = false
+            state.onDepartmentlist = true
+            state.onDepartment = false
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = true
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
+            state.deleteIcon = false
+            state.notAllInstancesIcon = false
+        },
+        changeToDepartment(state) {
+            state.onCustomerlist = false
+            state.onCustomer = false
+            state.onCustomerEmployeelist = false
+            state.onCustomerEmployee = false
+            state.onDepartmentlist = false
+            state.onDepartment = true
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = false
+            state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         changeToSettings(state) {
@@ -577,8 +938,14 @@ const store = createStore({
             state.attachmentsIcon = false
             state.sellIcon = false
             state.archiveIcon = false
-            state.editIcon = true
+            state.editIcon = false
+            state.departmentsIcon = false
+            state.addDepartmentIcon = false
+            state.addEmployeeIcon = false
+            state.employeesIcon = false
+            state.editUserIcon = true
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
 
         // functions to update the asset
@@ -701,6 +1068,47 @@ const store = createStore({
             state.newPostcodeEmp = employee.postcode
         },
 
+        // function to update production order instance component
+        updateProductionOrderInstanceComponent(state, productionOrderInstance) {
+            state.newNamePOI = productionOrderInstance.name
+            state.newTemplateIDPOI = productionOrderInstance.templateID
+            state.newCustomerIDPOI = productionOrderInstance.customerID
+            state.newCustomerPOI = productionOrderInstance.customer
+            state.newAssetPOI = productionOrderInstance.asset
+            state.newStatePOI = productionOrderInstance.state
+            state.newCreationDatePOI = productionOrderInstance.creationDate
+            state.newCompletionDatePOI = productionOrderInstance.completionDate
+            state.newUserPOI = productionOrderInstance.user
+            state.newTemplateDescriptionPOI = productionOrderInstance.templateDescription
+            state.newTemplateNotesPOI = productionOrderInstance.templateNotes
+            state.newTimeSpentPOI = productionOrderInstance.timeSpent
+            state.newNotesPOI = productionOrderInstance.notes
+        },
+        updateProductionOrderInstanceTemplateID(state, id) {
+            state.newTemplateIDPOI = id
+        },
+
+        // function to update maintenance visit instance component
+        updateMaintenanceVisitInstanceComponent(state, maintenanceVisitInstance) {
+            state.newNameMVI = maintenanceVisitInstance.name
+            state.newTemplateIDMVI = maintenanceVisitInstance.templateID
+            state.newMaintenanceTypeMVI = maintenanceVisitInstance.maintenanceType
+            state.newStateMVI = maintenanceVisitInstance.state
+            state.newCreationDateMVI = maintenanceVisitInstance.creationDate
+            state.newCompletionDateMVI = maintenanceVisitInstance.completionDate
+            state.newUserMVI = maintenanceVisitInstance.user
+            state.newCustomerIDMVI = maintenanceVisitInstance.customerID
+            state.newCustomerMVI = maintenanceVisitInstance.customer
+            state.newTemplateNotesMVI = maintenanceVisitInstance.templateNotes
+            state.newTypeMVI = maintenanceVisitInstance.type
+            state.newTimeSpentMVI = maintenanceVisitInstance.timeSpent
+            state.newNotesMVI = maintenanceVisitInstance.notes
+        },
+        updateMaintenanceVisitInstanceTemplateID(state, id) {
+            state.newTemplateIDMVI = id
+        },
+
+
         setLocalStorageChanged(state) {
             state.localStorageChanged = !state.localStorageChanged
         },
@@ -737,6 +1145,19 @@ const store = createStore({
         resetModeLayoutChanged(state) {
             state.modeLayout = false
         },
+        resetFilterSearch(state) {
+            state.filtered = false
+            state.searchable = false
+        },
+        activateFilteredUserTerm(state) {
+            state.filteredUserTerm = true
+        },
+        activateFiltered(state) {
+            state.filtered = true
+        },
+        deactivateSearch(state) {
+            state.filteredUserTerm = false
+        },
 
         // function to set the logged in user
         setLoggedInUser(state, user) {
@@ -782,6 +1203,16 @@ const store = createStore({
             state.chosenMVTId = id
         },
 
+        // function to set the chosen maintenance visit instance
+        setChosenMIT(state, id) {
+            state.chosenMITId = id
+        },
+
+        // function to set the chosen production order instance
+        setChosenPOI(state, id) {
+            state.chosenPOIId = id
+        },
+
         // function to set the chosen solution
         setChosenSolution(state, id) {
             state.chosenSolutionId = id
@@ -807,14 +1238,27 @@ const store = createStore({
             state.chosenEmployeeId = id
         },
 
+        // function to set the chosen customer and its employees and departments
+        setChosenCustomer(state, id) {
+            state.chosenCustomerId = id
+        },
+        setChosenCustomerEmployee(state, id) {
+            state.chosenCustomerEmployeeId = id
+        },
+        setChosenCustomerDepartment(state, id) {
+            state.chosenDepartmentId = id
+        },
+
         // function to reset the pages
         resetStore(state) {
             state.editable = false
+            state.editableUser = false
             state.filtered = false
             state.searchable = false
             state.deleteBool = false
             state.chosenAssetId = -1
             state.filteredByCustomer = ''
+            state.filteredUserTerm = false
             state.new = false
             state.customerChanged = false
             state.changedCustomerId = -1
@@ -863,6 +1307,10 @@ const store = createStore({
             state.newLastViewMVT = ''
             state.chosenMVTId = -1
 
+            // reset the maintenance visit and production order instance page variables
+            state.chosenMITId = -1
+            state.chosenPOIId = -1
+
             // reset the solution page variables
             state.newSolutionNameSol = ''
             state.newCustomerIDSol = ''
@@ -923,6 +1371,199 @@ const store = createStore({
             state.newAddressEmp = ''
             state.newCityEmp = ''
             state.newPostcodeEmp = ''
+
+            // reset the poi page variables
+            state.newNamePOI = ''
+            state.newTemplateIDPOI = ''
+            state.newCustomerIDPOI = ''
+            state.newCustomerPOI = ''
+            state.newAssetPOI = ''
+            state.newStatePOI = ''
+            state.newCreationDatePOI = ''
+            state.newCompletionDatePOI = ''
+            state.newUserPOI = ''
+            state.newTemplateDescriptionPOI = ''
+            state.newTemplateNotesPOI = ''
+            state.newTimeSpentPOI = ''
+            state.newNotesPOI = ''
+
+            // reset the mvi page variables
+            state.newNameMVI = ''
+            state.newTemplateIDMVI = ''
+            state.newMaintenanceTypeMVI = ''
+            state.newStateMVI = ''
+            state.newCreationDateMVI = '' 
+            state.newCompletionDateMVI = ''
+            state.newUserMVI = ''
+            state.newCustomerIDMVI = '' 
+            state.newCustomerMVI = ''
+            state.newTemplateNotesMVI = ''
+            state.newTypeMVI = ''
+            state.newTimeSpentMVI = ''
+            state.newNotesMVI = ''
+
+            // reset the customer page variables
+            state.chosenCustomerId = -1
+            state.chosenCustomerEmployeeId = -1
+            state.chosenDepartmentId = -1
+        },
+
+         // function to reset the pages except chosen customer id
+         resetStoreNotCustomer(state) {
+            state.editable = false
+            state.editableUser = false
+            state.filtered = false
+            state.searchable = false
+            state.deleteBool = false
+            state.chosenAssetId = -1
+            state.filteredByCustomer = ''
+            state.filteredUserTerm = false
+            state.new = false
+            state.customerChanged = false
+            state.changedCustomerId = -1
+
+            // reset the asset page variables
+            state.newAssetName = ''
+            state.newCustomerID = ''
+            state.newCustomer = ''
+            state.newLocation = ''
+            state.newRemoteLocation = ''
+            state.newType = ''
+            state.newDescription = ''
+            state.newNotes = ''
+            state.newState = ''
+            state.newLastView = ''
+            state.newUser = ''
+            state.hardwareBool = false
+            state.newModel = ''
+            state.newSerialnumber = ''
+            state.newCPU = ''
+            state.newRAM = ''
+            state.newStorageConfiguration = ''
+            state.newMiscellaneous = ''
+            state.softwareBool = false
+            state.newSoftware = ''
+            state.newVersion = ''
+            state.newLicense = ''
+
+            // reset the production order template page variables
+            state.newNamePOT = ''
+            state.newCustomerIDPOT = ''
+            state.newCustomerPOT = ''
+            state.newUserPOT = ''
+            state.newDescriptionPOT = ''
+            state.newNotesPOT = ''
+            state.newLastViewPOT = ''
+            state.chosenPOTId = -1
+
+            // reset the maintenance visit template page variables
+            state.newNameMVT = ''
+            state.newCustomerIDMVT = ''
+            state.newCustomerMVT = ''
+            state.newUserMVT = ''
+            state.newTypeMVT = ''
+            state.newNotesMVT = ''
+            state.newLastViewMVT = ''
+            state.chosenMVTId = -1
+
+            // reset the maintenance visit and production order instance page variables
+            state.chosenMITId = -1
+            state.chosenPOIId = -1
+
+            // reset the solution page variables
+            state.newSolutionNameSol = ''
+            state.newCustomerIDSol = ''
+            state.newCustomerSol = ''
+            state.newAssetNameSol = ''
+            state.newLastViewSol = ''
+            state.newTypeSol = ''
+            state.newDescriptionSol = ''
+            state.newNotesSol = ''
+            state.newUserSol = ''
+            state.chosenSolutionId = -1
+
+            // reset the issue slip page variables
+            state.chosenIssueSlipId = -1
+            state.newCustomerIdIS = ''
+            state.newCustomerIS = ''
+            state.newTicketNoIS = ''
+            state.newNotesIS = ''
+            state.newUserIS = ''
+            state.newOIs = []
+            state.newDeliveryAddressIS = ''
+            state.newSupplierRequestIS = ''
+            state.newSupplierOfferIS = ''
+            state.newClientOfferIS = ''
+            state.newClientOrderIS = ''
+            state.newSupplierOrderIS = ''
+            state.newIngressIS = ''
+            state.newEgressIS = ''
+            state.newIngressBillIS = ''
+            state.newEgressBillIS = ''
+            state.newSupplierRequestDateIS = ''
+            state.newSupplierOfferDateIS = ''
+            state.newClientOfferDateIS = ''
+            state.newClientOrderDateIS = ''
+            state.newSupplierOrderDateIS = ''
+            state.newIngressDateIS = ''
+            state.newEgressDateIS = ''
+            state.newIngressBillDateIS = ''
+            state.newEgressBillDateIS = ''
+
+            // reset the issue page variables
+            state.chosenIssueId = -1
+            state.chosenIssueVariantId = -1
+            state.newNameII = ''
+            state.newTypeII = ''
+            state.newStateII = ''
+            state.newAmountII = ''
+            state.newPropertiesII = ''
+
+            // reset the employee page variables
+            state.chosenEmployeeId = -1
+            state.newUsernameEmp = ''
+            state.newPasswordEmp = ''
+            state.newPasswordRepeatedEmp = ''
+            state.newFullNameEmp = ''
+            state.newEmailEmp = ''
+            state.newPhonenumberEmp = ''
+            state.newAddressEmp = ''
+            state.newCityEmp = ''
+            state.newPostcodeEmp = ''
+
+            // reset the poi page variables
+            state.newNamePOI = ''
+            state.newTemplateIDPOI = ''
+            state.newCustomerIDPOI = ''
+            state.newCustomerPOI = ''
+            state.newAssetPOI = ''
+            state.newStatePOI = ''
+            state.newCreationDatePOI = ''
+            state.newCompletionDatePOI = ''
+            state.newUserPOI = ''
+            state.newTemplateDescriptionPOI = ''
+            state.newTemplateNotesPOI = ''
+            state.newTimeSpentPOI = ''
+            state.newNotesPOI = ''
+
+            // reset the mvi page variables
+            state.newNameMVI = ''
+            state.newTemplateIDMVI = ''
+            state.newMaintenanceTypeMVI = ''
+            state.newStateMVI = ''
+            state.newCreationDateMVI = '' 
+            state.newCompletionDateMVI = ''
+            state.newUserMVI = ''
+            state.newCustomerIDMVI = '' 
+            state.newCustomerMVI = ''
+            state.newTemplateNotesMVI = ''
+            state.newTypeMVI = ''
+            state.newTimeSpentMVI = ''
+            state.newNotesMVI = ''
+
+            // reset the customer page variables
+            state.chosenCustomerEmployeeId = -1
+            state.chosenDepartmentId = -1
         },
 
         // function to logout 
@@ -959,6 +1600,7 @@ const store = createStore({
         add(state) {
             state.new = true
             state.editable = false
+            state.editableUser = false
             state.filtered = false
             state.searchable = false
 
@@ -989,6 +1631,63 @@ const store = createStore({
             // set the employee variables
             state.onEmployeelist = false
             state.onEmployee = true
+
+            //set the customers variables
+            state.onCustomerlist = false
+            state.onCustomer = true
+            state.onCustomerEmployeelist = false
+            state.onCustomerEmployee = false
+            state.onDepartmentlist = false
+            state.onDepartment = false
+        },
+
+        // function to get to the add page of instances
+        addInstance(state) {
+            state.new = true
+            state.editable = false
+            state.editableUser = false
+            state.filtered = false
+            state.searchable = false
+
+            // set the production order and maintenance visit variables
+            state.onTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = true
+        },
+
+        // function to get to the add page of customer employees
+        addEmployee(state) {
+            state.new = true
+            state.editable = false
+            state.editableUser = false
+            state.filtered = false
+            state.searchable = false
+
+            // set the customer employees variables
+            state.onCustomerlist = false
+            state.onCustomer = false
+            state.onCustomerEmployeelist = false
+            state.onCustomerEmployee = true
+            state.onDepartmentlist = false
+            state.onDepartment = false
+        },
+
+        // function to get to the add page of customer departments
+        addDepartment(state) {
+            state.new = true
+            state.editable = false
+            state.editableUser = false
+            state.filtered = false
+            state.searchable = false
+
+            // set the customer departments variables
+            state.onCustomerlist = false
+            state.onCustomer = false
+            state.onCustomerEmployeelist = false
+            state.onCustomerEmployee = false
+            state.onDepartmentlist = false
+            state.onDepartment = true
         },
     },
 });

server/api/addCustEmployee.ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../middleware/customerEmployees";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})

server/api/addCustomer.ts

@@ -0,0 +1,23 @@
+import { insertId, errorMsg } from "../middleware/customers";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return insertId
+})

server/api/addDepartment.ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../middleware/departments";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})

server/api/addMVI.ts

@@ -0,0 +1,23 @@
+import { insertId, errorMsg } from "../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return insertId
+})

server/api/addPOI.ts

@@ -0,0 +1,23 @@
+import { insertId, errorMsg } from "../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return insertId
+})

server/api/addTodoMVI.ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})

server/api/addTodoPOI.ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})

server/api/deleteCustEmployee/[id].ts

@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/customerEmployees";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteCustomer/[id].ts

@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/customers";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteDepartment/[id].ts

@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/departments";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteMaintenanceVisitInstance/[id].ts

@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteProductionOrderInstance/[id].ts

@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteTodosMVI/[id].ts

@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteTodosPOI/[id].ts

@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/getAllMaintenanceVisitInstances.ts

@@ -0,0 +1,23 @@
+import { maintenanceVisitInstances, errorMsg } from "../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return maintenanceVisitInstances
+})

server/api/getAllProductionOrderInstances.ts

@@ -0,0 +1,23 @@
+import { productionOrderInstances, errorMsg } from "../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return productionOrderInstances
+})

server/api/getCustEmployee/[id].ts

@@ -0,0 +1,23 @@
+import { customerEmployee, errorMsg } from "../../middleware/customerEmployees";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return customerEmployee
+})

server/api/getCustomerById/[id].ts

@@ -0,0 +1,23 @@
+import { customerById, errorMsg } from "../../middleware/customers";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return customerById
+})

server/api/getDepartment/[id].ts

@@ -0,0 +1,23 @@
+import { department, errorMsg } from "../../middleware/departments";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return department
+})

server/api/getDprtmntByName/[id].ts

@@ -0,0 +1,23 @@
+import { departmentObject, errorMsg } from "../../middleware/departments";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return departmentObject
+})

server/api/getMaintenanceVisitInstance/[id].ts

@@ -0,0 +1,23 @@
+import { mvi, errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return mvi
+})

server/api/getProductionOrderInstance/[id].ts

@@ -0,0 +1,23 @@
+import { poi, errorMsg } from "../../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return poi
+})

server/api/getSelectedCustEmployeeByCustomer/[id].ts

@@ -0,0 +1,23 @@
+import { selectedCustomerEmployeesByCustomer, errorMsg } from "../../middleware/customerEmployees";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedCustomerEmployeesByCustomer
+})

server/api/getSelectedCustEmployeeByDepartment/[id].ts

@@ -0,0 +1,23 @@
+import { selectedCustomerEmployeesByDepartment, errorMsg } from "../../middleware/customerEmployees";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedCustomerEmployeesByDepartment
+})

server/api/getSelectedCustEmployeeByDprtmntName/[id].ts

@@ -0,0 +1,23 @@
+import { selectedCustomerEmployeesByDepartmentName, errorMsg } from "../../middleware/customerEmployees";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedCustomerEmployeesByDepartmentName
+})

server/api/getSelectedCustEmployeeByName/[id].ts

@@ -0,0 +1,23 @@
+import { selectedCustomerEmployeesByName, errorMsg } from "../../middleware/customerEmployees";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedCustomerEmployeesByName
+})

server/api/getSelectedCustomersByName/[id].ts

@@ -0,0 +1,23 @@
+import { selectedCustomersByName, errorMsg } from "../../middleware/customers";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedCustomersByName
+})

server/api/getSelectedDepartmentByCustomer/[id].ts

@@ -0,0 +1,23 @@
+import { selectedDepartmentsByCustomer, errorMsg } from "../../middleware/departments";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedDepartmentsByCustomer
+})

server/api/getSelectedDepartmentByName/[id].ts

@@ -0,0 +1,23 @@
+import { selectedDepartmentsByName, errorMsg } from "../../middleware/departments";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedDepartmentsByName
+})

server/api/getSelectedMITsByCustomer/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByCustomer, errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByCustomer
+})

server/api/getSelectedMITsByMIT/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByMIT, errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByMIT
+})

server/api/getSelectedMVIByMVT/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByMVT, errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByMVT
+})

server/api/getSelectedMVIByName/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByName, errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByName
+})

server/api/getSelectedMVIByState/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByState, errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByState
+})

server/api/getSelectedMVIByUser/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByUser, errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByUser
+})

server/api/getSelectedPOIsByName/[id].ts

@@ -0,0 +1,23 @@
+import { selectedPOIsByName, errorMsg } from "../../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOIsByName
+})

server/api/getSelectedPOIsByPOI/[id].ts

@@ -0,0 +1,23 @@
+import { selectedPOIsByPOT, errorMsg } from "../../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOIsByPOT
+})

server/api/getSelectedPOIsByPOT/[id].ts

@@ -0,0 +1,23 @@
+import { selectedPOIsByPOT, errorMsg } from "../../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOIsByPOT
+})

server/api/getSelectedPOIsByState/[id].ts

@@ -0,0 +1,23 @@
+import { selectedPOIsByState, errorMsg } from "../../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOIsByState
+})

server/api/getSelectedPOIsByUser/[id].ts

@@ -0,0 +1,23 @@
+import { selectedPOIsByUser, errorMsg } from "../../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOIsByUser
+})

server/api/getTodosMaintenanceVisitInstance/[id].ts

@@ -0,0 +1,23 @@
+import { mviTodosByTemplateId, errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return mviTodosByTemplateId
+})

server/api/getTodosProductionOrderInstance/[id].ts

@@ -0,0 +1,23 @@
+import { poiTodosByTemplateId, errorMsg } from "../../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return poiTodosByTemplateId
+})

server/api/updateCustEmployee.ts

@@ -0,0 +1,14 @@
+import { errorMsg } from "../middleware/customerEmployees";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return errorMsg
+})

server/api/updateCustomer.ts

@@ -0,0 +1,14 @@
+import { errorMsg } from "../middleware/customers";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return errorMsg
+})

server/api/updateDepartment.ts

@@ -0,0 +1,14 @@
+import { errorMsg } from "../middleware/departments";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return errorMsg
+})

server/api/updateMVITodo.ts

@@ -0,0 +1,14 @@
+import { errorMsg } from "../middleware/maintenanceVisitInstances";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return errorMsg
+})

server/api/updateMaintenanceVisitInstance.ts

@@ -0,0 +1,14 @@
+import { errorMsg } from "../middleware/maintenanceVisitInstances";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return errorMsg
+})