diff --git a/backend/controller/departments.js b/backend/controller/departments.js new file mode 100644 index 0000000..a7d8efd --- /dev/null +++ b/backend/controller/departments.js @@ -0,0 +1,89 @@ +import { + getDepartmentById, + getDepartmentsByCustomerId, + updateDepartmentById, + insertDepartment, + getSelectedDepartmentsByName, + deleteDepartmentById, + getDepartmentByName +} from "../models/departmentsModel.js"; + +//get single department by id +export const showDepartmentById = (req, res) => { + getDepartmentById(req.params.id, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +//get single department by name +export const showDepartmentByName = (req, res) => { + getDepartmentByName(req.params.id, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +//get departments by customer id +export const showDepartmentByCustomerId = (req, res) => { + getDepartmentsByCustomerId(req.params.id, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +// Update department +export const updateDepartment = (req, res) => { + const data = req.body; + updateDepartmentById(data, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +//create new department +export const createDepartment = (req, res) => { + const data = req.body; + insertDepartment(data, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +//get all selected departments by name +export const showSelectedDepartmentsByName = (req, res) => { + getSelectedDepartmentsByName(req.params.id, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +// Delete department +export const deleteDepartment = (req, res) => { + const id = req.params.id; + deleteDepartmentById(id, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; \ No newline at end of file diff --git a/backend/controller/employees.js b/backend/controller/employees.js new file mode 100644 index 0000000..dce9b2b --- /dev/null +++ b/backend/controller/employees.js @@ -0,0 +1,101 @@ +import { + getEmployeeById, + getEmployeesByCustomerId, + updateEmployeeById, + insertEmployee, + getSelectedEmployeesByName, + deleteEmployeeById, + getSelectedEmployeesByDepartment, + getSelectedEmployeesByDepartmentName, +} from "../models/employeesModel.js"; + +//get single employee by id +export const showEmployeeById = (req, res) => { + getEmployeeById(req.params.id, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +//get employees by customer id +export const showEmployeeByCustomerId = (req, res) => { + getEmployeesByCustomerId(req.params.id, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +//get employees by customer id +export const showEmployeeByDepartmentId = (req, res) => { + getSelectedEmployeesByDepartment(req.params.id, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +// Update employee +export const updateEmployee = (req, res) => { + const data = req.body; + updateEmployeeById(data, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +//create new employee +export const createEmployee = (req, res) => { + const data = req.body; + insertEmployee(data, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +//get all selected employees by name +export const showSelectedEmployeesByName = (req, res) => { + getSelectedEmployeesByName(req.params.id, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +//get all selected employees by name +export const showSelectedEmployeesByDepartmentName = (req, res) => { + getSelectedEmployeesByDepartmentName(req.params.id, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; + +// Delete employee +export const deleteEmployee = (req, res) => { + const id = req.params.id; + deleteEmployeeById(id, (err, results) => { + if (err) { + res.send(err); + } else { + res.json(results); + } + }); +}; \ No newline at end of file diff --git a/backend/models/configItemsModel.js b/backend/models/configItemsModel.js index 373efc5..188c687 100644 --- a/backend/models/configItemsModel.js +++ b/backend/models/configItemsModel.js @@ -56,7 +56,7 @@ export const getConfigItemByCustomerId = async (customerId, result) => { } }; -// Update customer to Database +// Update config item to Database export const updateConfigItemById = async (data, result) => { const id = data.primaryID; try { diff --git a/backend/models/customerModel.js b/backend/models/customerModel.js index a0ec0a9..23a591f 100644 --- a/backend/models/customerModel.js +++ b/backend/models/customerModel.js @@ -63,7 +63,8 @@ export const getCustomerByMaintenanceVisitId = async (id, result) => { //insert customer to databased export const insertCustomer = async (data, result) => { try { - const results = await ownConn.query(`INSERT INTO customers(customername, contactperson, EMail, phonenumber, address, postcode, city, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?)`, [data.customername, data.contactperson, data.EMail, data.phonenumber, data.address, data.postcode, data.city, data.notes]) + const results = await ownConn.query(`INSERT INTO customers(customername, contactperson, EMail, secondEMail, thirdEMail, phonenumber, secondPhonenumber, thirdPhonenumber, street, no, postcode, city, secondStreet, secondNo, secondPostcode, secondCity, thirdStreet, thirdNo, thirdPostcode, thirdCity, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.customername, data.contactperson, data.EMail, data.secondEMail, data.thirdEMail, data.phonenumber, data.secondPhonenumber, data.thirdPhonenumber, data.street, data.no, data.postcode, data.city, data.secondStreet, data.secondNo, data.secondPostcode, data.secondCity, data.thirdStreet, data.thirdNo, data.thirdPostcode, data.thirdCity, data.notes]) + results.insertId = results.insertId.toString(); result(null, results); } catch (err) { @@ -105,8 +106,9 @@ export const getCustomerByName = async (id, result) => { export const updateCustomerById = async (data, result) => { const id = data.customerID; try { - let sql = `UPDATE customers SET customername = ?, contactperson = ?, EMail = ?, phonenumber = ?, address = ?, postcode = ?, city = ?, notes = ? WHERE customerID = ?`; - const results = await ownConn.query(sql, [data.customername, data.contactperson, data.EMail, data.phonenumber, data.address, data.postcode, data.city, data.notes, id]); + let sql = `UPDATE customers SET customername = ?, contactperson = ?, EMail = ?, secondEMail = ?, thirdEMail = ?, phonenumber = ?, secondPhonenumber = ?, thirdPhonenumber = ?, street = ?, no = ?, postcode = ?, city = ?, secondStreet = ?, secondNo = ?, secondPostcode = ?, secondCity = ?, thirdStreet = ?, thirdNo = ?, thirdPostcode = ?, thirdCity = ?, notes = ? WHERE customerID = ?`; + const results = await ownConn.query(sql, [data.customername, data.contactperson, data.EMail, data.secondEMail, data.thirdEMail, data.phonenumber, data.secondPhonenumber, data.thirdPhonenumber, data.street, data.no, data.postcode, data.city, data.secondStreet, data.secondNo, data.secondPostcode, data.secondCity, data.thirdStreet, data.thirdNo, data.thirdPostcode, data.thirdCity, data.notes, id]); + results.insertId = results.insertId.toString(); result(null, results); } catch (err) { @@ -122,6 +124,7 @@ export const deleteCustomerById = async (id, result) => { try { let sql = `DELETE FROM customers WHERE customerID = ?`; const results = await ownConn.query(sql, [id]) + results.insertId = results.insertId.toString(); result(null, results); } catch (err) { diff --git a/backend/models/departmentsModel.js b/backend/models/departmentsModel.js new file mode 100644 index 0000000..775beee --- /dev/null +++ b/backend/models/departmentsModel.js @@ -0,0 +1,102 @@ +import ownConn from "../dbConfig.js"; + +//get single department by id +export const getDepartmentById = async (id, result) => { + try { + let sql = `SELECT * FROM customerdepartment WHERE primaryID = ?`; + const results = await ownConn.execute(sql, [id]) + result(null, results[0]); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +//get departments by customer id +export const getDepartmentsByCustomerId = async (customerId, result) => { + try { + let sql = `SELECT * FROM customerdepartment WHERE customerID = ? ORDER BY name ASC`; + const results = await ownConn.query(sql, [customerId]) + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +// Update department to Database +export const updateDepartmentById = async (data, result) => { + const id = data.primaryID; + try { + let sql = `UPDATE customerdepartment SET name = ?, head = ?, notes = ? WHERE primaryID = ?`; + const results = await ownConn.query(sql, [data.name, data.head, data.notes, id]); + results.insertId = results.insertId.toString(); + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +//insert department to databased +export const insertDepartment = async (data, result) => { + try { + const results = await ownConn.query(`INSERT INTO customerdepartment(customerID, customername, name, head, notes) VALUES(?, ?, ?, ?, ?)`, [data.customerID, data.customername, data.name, data.head, data.notes]) + results.insertId = results.insertId.toString(); + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +//get all selected departments by name +export const getSelectedDepartmentsByName = async (selected, result) => { + try { + let sql = `SELECT * FROM customerdepartment WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`; + const results = await ownConn.execute(sql) + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +// Delete department to Database +export const deleteDepartmentById = async (id, result) => { + try { + let sql = `DELETE FROM customerdepartment WHERE primaryID = ?`; + const results = await ownConn.query(sql, [id]) + results.insertId = results.insertId.toString(); + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +//get single department by name +export const getDepartmentByName = async (id, result) => { + try { + let sql = `SELECT * FROM customerdepartment WHERE name = ?`; + const results = await ownConn.execute(sql, [id]) + result(null, results[0]); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; \ No newline at end of file diff --git a/backend/models/employeesModel.js b/backend/models/employeesModel.js new file mode 100644 index 0000000..4a7c887 --- /dev/null +++ b/backend/models/employeesModel.js @@ -0,0 +1,116 @@ +import ownConn from "../dbConfig.js"; + +//get single employee by id +export const getEmployeeById = async (id, result) => { + try { + let sql = `SELECT * FROM customeremployees WHERE primaryID = ?`; + const results = await ownConn.execute(sql, [id]) + result(null, results[0]); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +//get employees by customer id +export const getEmployeesByCustomerId = async (customerId, result) => { + try { + let sql = `SELECT * FROM customeremployees WHERE customerID = ? ORDER BY name ASC`; + const results = await ownConn.query(sql, [customerId]) + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +// Update employee to Database +export const updateEmployeeById = async (data, result) => { + const id = data.primaryID; + try { + let sql = `UPDATE customeremployees SET name = ?, pronouns = ?, title = ?, firstName = ?, lastName = ?, preferredName = ?, department = ?, departmentID = ?, jobTitle = ?, phonenumber = ?, eMail = ?, notes = ? WHERE primaryID = ?`; + const results = await ownConn.query(sql, [data.name, data.pronouns, data.title, data.firstName, data.lastName, data.preferredName, data.department, data.departmentID, data.jobTitle, data.phonenumber, data.eMail, data.notes, id]); + results.insertId = results.insertId.toString(); + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +//insert employee to databased +export const insertEmployee = async (data, result) => { + try { + const results = await ownConn.query(`INSERT INTO customeremployees(customerID, customername, name, pronouns, title, firstName, lastName, preferredName, department, departmentID, jobTitle, phonenumber, eMail, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.customerID, data.customername, data.name, data.pronouns, data.title, data.firstName, data.lastName, data.preferredName, data.department, data.departmentID, data.jobTitle, data.phonenumber, data.eMail, data.notes]) + results.insertId = results.insertId.toString(); + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +//get all selected employees by name +export const getSelectedEmployeesByName = async (selected, result) => { + try { + let sql = `SELECT * FROM customeremployees WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`; + const results = await ownConn.execute(sql) + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +//get all selected employees by department name +export const getSelectedEmployeesByDepartmentName = async (selected, result) => { + try { + let sql = `SELECT * FROM customeremployees WHERE LOWER(department) LIKE '%${selected.toLowerCase()}%' ORDER BY department ASC`; + const results = await ownConn.execute(sql) + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +//get all selected employees by departmentID +export const getSelectedEmployeesByDepartment = async (selected, result) => { + try { + let sql = `SELECT * FROM customeremployees WHERE departmentID = ? ORDER BY name ASC`; + const results = await ownConn.execute(sql) + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; + +// Delete employee to Database +export const deleteEmployeeById = async (id, result) => { + try { + let sql = `DELETE FROM customeremployees WHERE primaryID = ?`; + const results = await ownConn.query(sql, [id]) + results.insertId = results.insertId.toString(); + result(null, results); + } + catch (err) { + // Manage Errors + console.log("SQL error : ", err); + result(err, null); + } +}; diff --git a/backend/routes/routes.js b/backend/routes/routes.js index e180fb2..133ab5d 100644 --- a/backend/routes/routes.js +++ b/backend/routes/routes.js @@ -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); diff --git a/components/ClientSearch.vue b/components/ClientSearch.vue new file mode 100644 index 0000000..718de32 --- /dev/null +++ b/components/ClientSearch.vue @@ -0,0 +1,127 @@ + + + + + + + + + \ No newline at end of file diff --git a/components/LoginForm.vue b/components/LoginForm.vue index 872201d..cb58968 100644 --- a/components/LoginForm.vue +++ b/components/LoginForm.vue @@ -42,7 +42,6 @@
-
@@ -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) => { diff --git a/components/server/Asset.vue b/components/server/Asset.vue index 9f17d2c..c0a661e 100644 --- a/components/server/Asset.vue +++ b/components/server/Asset.vue @@ -153,7 +153,6 @@ import { useStore } from 'vuex'; import { computed } from 'vue'; const store = useStore(); - const modeChanged = computed(() => store.state.updateDarkMode); const editable = computed(() => store.state.editable); @@ -395,7 +394,6 @@ export default { background-color: #fff; } - .asset-name { align-self: stretch; padding: 1rem 0; diff --git a/components/server/AssetTable.vue b/components/server/AssetTable.vue index f2e5432..e506608 100644 --- a/components/server/AssetTable.vue +++ b/components/server/AssetTable.vue @@ -59,7 +59,6 @@ import { computed } from 'vue'; // get accesss to the store const store = useStore() - const modeChanged = computed(() => store.state.updateDarkMode); const goToChosenAsset = (id) => { diff --git a/components/server/Customer.vue b/components/server/Customer.vue index c85b37a..22fb225 100644 --- a/components/server/Customer.vue +++ b/components/server/Customer.vue @@ -1,65 +1,628 @@ @@ -93,14 +659,14 @@ export default { \ No newline at end of file diff --git a/components/server/CustomerDepartment.vue b/components/server/CustomerDepartment.vue index d5d01dc..20fc77a 100644 --- a/components/server/CustomerDepartment.vue +++ b/components/server/CustomerDepartment.vue @@ -1,25 +1,58 @@ @@ -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); }); @@ -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; +} \ No newline at end of file diff --git a/components/server/CustomerDepartmentEmployeeList.vue b/components/server/CustomerDepartmentEmployeeList.vue index 44b56cb..925aaca 100644 --- a/components/server/CustomerDepartmentEmployeeList.vue +++ b/components/server/CustomerDepartmentEmployeeList.vue @@ -16,19 +16,30 @@ :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']"> Pronouns - + - ... + + {{ empl.primaryID }} + + - ... + + {{ empl.name }} + + - ... + {{ empl.jobTitle }} - ... + {{ empl.pronouns }} @@ -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(); }); @@ -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; diff --git a/components/server/CustomerDepartmentList.vue b/components/server/CustomerDepartmentList.vue index 404047e..627af0c 100644 --- a/components/server/CustomerDepartmentList.vue +++ b/components/server/CustomerDepartmentList.vue @@ -1,31 +1,87 @@ - - + + + + - \ No newline at end of file diff --git a/components/server/CustomerEmployee.vue b/components/server/CustomerEmployee.vue index c07ed9f..ba8815c 100644 --- a/components/server/CustomerEmployee.vue +++ b/components/server/CustomerEmployee.vue @@ -1,19 +1,113 @@ - @@ -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 { diff --git a/components/server/CustomerEmployeeList.vue b/components/server/CustomerEmployeeList.vue index 122be9e..42b9152 100644 --- a/components/server/CustomerEmployeeList.vue +++ b/components/server/CustomerEmployeeList.vue @@ -1,4 +1,14 @@