finished customer pages
This commit is contained in:
89
backend/controller/departments.js
Normal file
89
backend/controller/departments.js
Normal file
@ -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);
|
||||
}
|
||||
});
|
||||
};
|
||||
101
backend/controller/employees.js
Normal file
101
backend/controller/employees.js
Normal file
@ -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);
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -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 {
|
||||
|
||||
@ -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) {
|
||||
|
||||
102
backend/models/departmentsModel.js
Normal file
102
backend/models/departmentsModel.js
Normal file
@ -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);
|
||||
}
|
||||
};
|
||||
116
backend/models/employeesModel.js
Normal file
116
backend/models/employeesModel.js
Normal file
@ -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);
|
||||
}
|
||||
};
|
||||
@ -113,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,
|
||||
@ -370,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);
|
||||
|
||||
127
components/ClientSearch.vue
Normal file
127
components/ClientSearch.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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);
|
||||
@ -395,7 +394,6 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.asset-name {
|
||||
align-self: stretch;
|
||||
padding: 1rem 0;
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@ -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>
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
@ -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 {
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -176,7 +176,7 @@ const goToChosenAsset = async (name) => {
|
||||
store.commit('changeToAsset');
|
||||
};
|
||||
|
||||
//get all instances based on the searched state
|
||||
//get all instances based on the searched name
|
||||
const filterPOIByName = async () => {
|
||||
if (nameSearchFilter.value === '') {
|
||||
await getProductionOrderInstances();
|
||||
|
||||
@ -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="<div>address</div>" 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="<div>address</div>" 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="<div>secondAddress</div>" 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="<div>secondPostcode</div>" 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="<div>secondCity</div>" 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="<div>thirdPostcode</div>" 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="<div>thirdCity</div>" 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>
|
||||
|
||||
@ -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="<div>address</div>" 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="<div>street</div>" 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="<div>no</div>" 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="<div>secondAddress</div>" 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="<div>secondStreet</div>" 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="<div>secondPostcode</div>" 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="<div>secondNo</div>" 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="<div>secondCity</div>" 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="<div>secondPostcode</div>" 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="<div>secondCity</div>" 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="<div>thirdPostcode</div>" 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="<div>thirdStreet</div>" 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="<div>thirdCity</div>" 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="<div>thirdPostcode</div>" 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="<div>thirdCity</div>" 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="<div>preferredName</div>" 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="<div>department</div>" 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="<div>departmentID</div>" 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="<div>jobTitle</div>" 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>
|
||||
|
||||
@ -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" />
|
||||
@ -106,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"
|
||||
@ -120,8 +145,9 @@
|
||||
</Transition>
|
||||
</button>
|
||||
</router-link>
|
||||
<button v-if="notAllInstancesIcon && !addIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
|
||||
id="allInstances" @click="changeToAllInstances">
|
||||
<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" />
|
||||
@ -131,6 +157,30 @@
|
||||
: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">
|
||||
@ -177,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);
|
||||
@ -186,6 +238,8 @@ 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);
|
||||
@ -230,9 +284,25 @@ 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');
|
||||
|
||||
@ -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;
|
||||
};
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<Dashboard />
|
||||
<QuickAccess />
|
||||
<!-- <QuickAccess /> -->
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
478
plugins/vuex.js
478
plugins/vuex.js
@ -24,6 +24,10 @@ const store = createStore({
|
||||
attachmentsIcon: false,
|
||||
sellIcon: false,
|
||||
archiveIcon: false,
|
||||
departmentsIcon: false,
|
||||
addEmployeeIcon: false,
|
||||
addDepartmentIcon: false,
|
||||
employeesIcon: false,
|
||||
editIcon: false,
|
||||
editUserIcon: false,
|
||||
deleteIcon: false,
|
||||
@ -149,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: '',
|
||||
@ -262,6 +276,10 @@ 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
|
||||
@ -282,6 +300,10 @@ 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
|
||||
@ -302,6 +324,10 @@ 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
|
||||
@ -322,6 +348,10 @@ 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
|
||||
@ -345,6 +375,10 @@ 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
|
||||
@ -366,6 +400,10 @@ 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
|
||||
@ -387,6 +425,10 @@ 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
|
||||
@ -408,6 +450,10 @@ 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
|
||||
@ -429,6 +475,10 @@ 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 = true
|
||||
@ -465,6 +515,10 @@ 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
|
||||
@ -484,6 +538,10 @@ 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
|
||||
@ -503,6 +561,10 @@ 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
|
||||
@ -524,6 +586,10 @@ 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
|
||||
@ -543,6 +609,10 @@ 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
|
||||
@ -562,6 +632,10 @@ 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
|
||||
@ -584,6 +658,10 @@ 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
|
||||
@ -604,6 +682,10 @@ 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
|
||||
@ -624,6 +706,10 @@ 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
|
||||
@ -645,6 +731,10 @@ 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
|
||||
@ -664,6 +754,174 @@ 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
|
||||
@ -681,6 +939,10 @@ 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 = true
|
||||
state.deleteIcon = false
|
||||
state.notAllInstancesIcon = false
|
||||
@ -976,6 +1238,17 @@ 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
|
||||
@ -1128,6 +1401,169 @@ const store = createStore({
|
||||
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
|
||||
@ -1195,6 +1631,14 @@ 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
|
||||
@ -1211,6 +1655,40 @@ const store = createStore({
|
||||
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
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
22
server/api/addCustEmployee.ts
Normal file
22
server/api/addCustEmployee.ts
Normal file
@ -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)
|
||||
})
|
||||
23
server/api/addCustomer.ts
Normal file
23
server/api/addCustomer.ts
Normal file
@ -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
|
||||
})
|
||||
22
server/api/addDepartment.ts
Normal file
22
server/api/addDepartment.ts
Normal file
@ -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)
|
||||
})
|
||||
23
server/api/deleteCustEmployee/[id].ts
Normal file
23
server/api/deleteCustEmployee/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/deleteCustomer/[id].ts
Normal file
23
server/api/deleteCustomer/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/deleteDepartment/[id].ts
Normal file
23
server/api/deleteDepartment/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/getCustEmployee/[id].ts
Normal file
23
server/api/getCustEmployee/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/getCustomerById/[id].ts
Normal file
23
server/api/getCustomerById/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/getDepartment/[id].ts
Normal file
23
server/api/getDepartment/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/getDprtmntByName/[id].ts
Normal file
23
server/api/getDprtmntByName/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/getSelectedCustEmployeeByCustomer/[id].ts
Normal file
23
server/api/getSelectedCustEmployeeByCustomer/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/getSelectedCustEmployeeByDepartment/[id].ts
Normal file
23
server/api/getSelectedCustEmployeeByDepartment/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/getSelectedCustEmployeeByDprtmntName/[id].ts
Normal file
23
server/api/getSelectedCustEmployeeByDprtmntName/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/getSelectedCustEmployeeByName/[id].ts
Normal file
23
server/api/getSelectedCustEmployeeByName/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/getSelectedCustomersByName/[id].ts
Normal file
23
server/api/getSelectedCustomersByName/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/getSelectedDepartmentByCustomer/[id].ts
Normal file
23
server/api/getSelectedDepartmentByCustomer/[id].ts
Normal file
@ -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
|
||||
})
|
||||
23
server/api/getSelectedDepartmentByName/[id].ts
Normal file
23
server/api/getSelectedDepartmentByName/[id].ts
Normal file
@ -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
|
||||
})
|
||||
14
server/api/updateCustEmployee.ts
Normal file
14
server/api/updateCustEmployee.ts
Normal file
@ -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
|
||||
})
|
||||
14
server/api/updateCustomer.ts
Normal file
14
server/api/updateCustomer.ts
Normal file
@ -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
|
||||
})
|
||||
14
server/api/updateDepartment.ts
Normal file
14
server/api/updateDepartment.ts
Normal file
@ -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
|
||||
})
|
||||
277
server/middleware/customerEmployees.ts
Normal file
277
server/middleware/customerEmployees.ts
Normal file
@ -0,0 +1,277 @@
|
||||
import axios, { AxiosError } from 'axios';
|
||||
import serversideConfig from '../../serversideConfig';
|
||||
import https from 'https';
|
||||
|
||||
let customerEmployee = {};
|
||||
let errorMsg = '';
|
||||
let selectedCustomerEmployeesByCustomer = [];
|
||||
let selectedCustomerEmployeesByName = [];
|
||||
let selectedCustomerEmployeesByDepartment = [];
|
||||
let selectedCustomerEmployeesByDepartmentName = [];
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const agent = new https.Agent({
|
||||
rejectUnauthorized: false,
|
||||
});
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: "*",
|
||||
},
|
||||
httpsAgent: agent
|
||||
});
|
||||
|
||||
|
||||
if (event.path.startsWith("/api/getCustEmployee")) {
|
||||
// get customer employee object from backend
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
try {
|
||||
let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/employee/${itemId}`);
|
||||
customerEmployee = res.data;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/getSelectedCustEmployeeByName")) {
|
||||
// get all customer employees by name from backend
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
try {
|
||||
let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/employeeByName/${itemId}`);
|
||||
selectedCustomerEmployeesByName = res.data;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/getSelectedCustEmployeeByDprtmntName")) {
|
||||
// get all customer employees by department name from backend
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
try {
|
||||
let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/employeeByDepartmentName/${itemId}`);
|
||||
selectedCustomerEmployeesByDepartmentName = res.data;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/getSelectedCustEmployeeByCustomer")) {
|
||||
// get all customer employees from a customer from backend
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
try {
|
||||
let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/employeeByCustomerID/${itemId}`);
|
||||
selectedCustomerEmployeesByCustomer = res.data;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/getSelectedCustEmployeeByDepartment")) {
|
||||
// get all customer employees by department from backend
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
try {
|
||||
let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/employeeByDeprtmentID/${itemId}`);
|
||||
selectedCustomerEmployeesByDepartment = res.data;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/updateCustEmployee")) {
|
||||
const body = await readBody(event)
|
||||
// update the customer employee in the backend
|
||||
try {
|
||||
let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/employee`, body);
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
console.log(err)
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/addCustEmployee")) {
|
||||
const body = await readBody(event)
|
||||
// add the customer employee in the backend
|
||||
try {
|
||||
let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/employees`, body);
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
console.log(err)
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/deleteCustEmployee")) {
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
// delete the customer employee in the backend
|
||||
try {
|
||||
let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/employees/${itemId}`);
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
console.log(err)
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
export { customerEmployee, selectedCustomerEmployeesByDepartmentName, selectedCustomerEmployeesByCustomer, selectedCustomerEmployeesByName, selectedCustomerEmployeesByDepartment, errorMsg };
|
||||
@ -4,6 +4,9 @@ import https from 'https';
|
||||
|
||||
let customers = [];
|
||||
let customerObject = [];
|
||||
let selectedCustomersByName = [];
|
||||
let customerById = {};
|
||||
let insertId = -1;
|
||||
let errorMsg = '';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
@ -79,6 +82,159 @@ export default defineEventHandler(async (event) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/getCustomerById")) {
|
||||
// get customer object from backend
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
try {
|
||||
let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/customer/${itemId}`);
|
||||
customerById = res.data;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/getSelectedCustomersByName")) {
|
||||
// get selected custoemrs object by customer from backend
|
||||
let filteredCustomer = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
filteredCustomer = pathSegments[pathSegments.length - 1];
|
||||
|
||||
try {
|
||||
let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedCustomers/${filteredCustomer}`);
|
||||
selectedCustomersByName = res.data;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/updateCustomer")) {
|
||||
const body = await readBody(event)
|
||||
// update the customer in the backend
|
||||
try {
|
||||
let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/customers`, body);
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
console.log(err)
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/deleteCustomer")) {
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
// delete the customer in the backend
|
||||
try {
|
||||
let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/customers/${itemId}`);
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
console.log(err)
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/addCustomer")) {
|
||||
const body = await readBody(event)
|
||||
// add the customer in the backend
|
||||
try {
|
||||
let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/customers`, body);
|
||||
insertId = res.data.insertId
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
console.log(err)
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export { customers, customerObject, errorMsg };
|
||||
export { customers, selectedCustomersByName, insertId, customerById, customerObject, errorMsg };
|
||||
244
server/middleware/departments.ts
Normal file
244
server/middleware/departments.ts
Normal file
@ -0,0 +1,244 @@
|
||||
import axios, { AxiosError } from 'axios';
|
||||
import serversideConfig from '../../serversideConfig';
|
||||
import https from 'https';
|
||||
|
||||
let department = {};
|
||||
let errorMsg = '';
|
||||
let selectedDepartmentsByCustomer = [];
|
||||
let selectedDepartmentsByName = [];
|
||||
let departmentObject = {};
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const agent = new https.Agent({
|
||||
rejectUnauthorized: false,
|
||||
});
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: "*",
|
||||
},
|
||||
httpsAgent: agent
|
||||
});
|
||||
|
||||
|
||||
if (event.path.startsWith("/api/getDepartment")) {
|
||||
// get department object from backend
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
try {
|
||||
let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/department/${itemId}`);
|
||||
department = res.data;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/getSelectedDepartmentByCustomer")) {
|
||||
// get all departments from a customer from backend
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
try {
|
||||
let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/departmentByCustomerID/${itemId}`);
|
||||
selectedDepartmentsByCustomer = res.data;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/getDprtmntByName")) {
|
||||
// get department object from backend
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
try {
|
||||
let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/departmentName/${itemId}`);
|
||||
departmentObject = res.data;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/getSelectedDepartmentByName")) {
|
||||
// get all departments by name from backend
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
try {
|
||||
let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/departmentByName/${itemId}`);
|
||||
selectedDepartmentsByName = res.data;
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/updateDepartment")) {
|
||||
const body = await readBody(event)
|
||||
// update the department in the backend
|
||||
try {
|
||||
let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/department`, body);
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
console.log(err)
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/addDepartment")) {
|
||||
const body = await readBody(event)
|
||||
// add the department in the backend
|
||||
try {
|
||||
let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/departments`, body);
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
console.log(err)
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.path.startsWith("/api/deleteDepartment")) {
|
||||
let itemId = null;
|
||||
const path = event._path;
|
||||
const pathSegments = path.split('/');
|
||||
itemId = pathSegments[pathSegments.length - 1];
|
||||
|
||||
// delete the department in the backend
|
||||
try {
|
||||
let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/departments/${itemId}`);
|
||||
} catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
console.error(axiosError.response.data.message);
|
||||
errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
console.log(err)
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
export { department, departmentObject, selectedDepartmentsByCustomer, selectedDepartmentsByName, errorMsg };
|
||||
Reference in New Issue
Block a user