Merge branch 'AccountingPages'

backend/controller/issues.js

@@ -5,6 +5,8 @@ import {
     deleteIssueById,
     insertIssue,
     getAllIssues,
+    getSelectedIssuesByState,
+    getSelectedIssuesByIssueName,
 } from "../models/issuesModel.js";
 
 //get all issues
@@ -18,6 +20,28 @@ export const showIssues = (req, res) => {
     });
 };
 
+//get all selected issues by name
+export const showSelectedIssuesByIssueName = (req, res) => {
+    getSelectedIssuesByIssueName(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected issues by state
+export const showSelectedIssuesByState = (req, res) => {
+    getSelectedIssuesByState(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
 // Delete issue
 export const deleteIssue = (req, res) => {
     const id = req.params.id;

backend/models/issueSlipsModel.js

@@ -61,6 +61,7 @@ export const deleteIssueSlipById = async (id, result) => {
     try {
         let sql = `DELETE FROM issueslips WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -75,6 +76,7 @@ export const deleteIssueSlipByTicketNo = async (id, result) => {
     try {
         let sql = `DELETE FROM issueslips WHERE ticketNo = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -87,7 +89,8 @@ export const deleteIssueSlipByTicketNo = async (id, result) => {
 //insert issue slip to database
 export const insertIssueSlip = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO issueslips(customerID, customer, ticketNo, creationDate, lastView, user, notes, supplierRequest, supplierOffer, clientOffer, clientOrder, supplierOrder, ingress, egress, ingressBill, egressBill) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.customerID, data.customer, data.ticketNo, data.creationDate, data.lastView, data.user, data.notes, data.supplierRequest, data.supplierOffer, data.clientOffer, data.clientOrder, data.supplierOrder, data.ingress, data.egress, data.ingressBill, data.egressBill])
+        const results = await ownConn.query(`INSERT INTO issueslips(customerID, customer, ticketNo, creationDate, lastView, user, notes, deliveryAddress, supplierRequestDate, supplierRequest, supplierOfferDate, supplierOffer, clientOfferDate, clientOffer, clientOrderDate, clientOrder, supplierOrderDate, supplierOrder, ingressDate, ingress, egressDate, egress, ingressBillDate, ingressBill, egressBillDate, egressBill) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.customerID, data.customer, data.ticketNo, data.creationDate, data.lastView, data.user, data.notes, data.deliveryAddress, data.supplierRequestDate, data.supplierRequest, data.supplierOfferDate, data.supplierOffer, data.clientOfferDate, data.clientOffer, data.clientOrderDate, data.clientOrder, data.supplierOrderDate, data.supplierOrder, data.ingressDate, data.ingress, data.egressDate, data.egress, data.ingressBillDate, data.ingressBill, data.egressBillDate, data.egressBill])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -129,8 +132,9 @@ export const getIssueSlipById = async (id, result) => {
 export const updateIssueSlipById = async (data, result) => {
     const id = data.primaryID;
     try {
-        let sql = `UPDATE issueslips SET customerID = ?, customer = ?, ticketNo = ?, creationDate = ?, lastView = ?, user = ?, notes = ?, supplierRequest = ?, supplierOffer = ?, clientOffer = ?, clientOrder = ?, supplierOrder = ?, ingress = ?, egress = ?, ingressBill = ?, egressBill = ? WHERE primaryID = ?`;
+        let sql = `UPDATE issueslips SET customerID = ?, customer = ?, ticketNo = ?, creationDate = ?, lastView = ?, user = ?, notes = ?, deliveryAddress = ?, supplierRequestDate = ?, supplierRequest = ?, supplierOfferDate = ?, supplierOffer = ?, clientOfferDate = ?, clientOffer = ?, clientOrderDate = ?, clientOrder = ?, supplierOrderDate = ?, supplierOrder = ?, ingressDate = ?, ingress = ?, egressDate = ?, egress = ?, ingressBillDate = ?, ingressBill = ?, egressBillDate = ?, egressBill = ? WHERE primaryID = ?`;
-        const results = await ownConn.query(sql, [data.customerID, data.customer, data.ticketNo, data.creationDate, data.lastView, data.user, data.notes, data.supplierRequest, data.supplierOffer, data.clientOffer, data.clientOrder, data.supplierOrder, data.ingress, data.egress, data.ingressBill, data.egressBill, id])
+        const results = await ownConn.query(sql, [data.customerID, data.customer, data.ticketNo, data.creationDate, data.lastView, data.user, data.notes, data.deliveryAddress, data.supplierRequestDate, data.supplierRequest, data.supplierOfferDate, data.supplierOffer, data.clientOfferDate, data.clientOffer, data.clientOrderDate, data.clientOrder, data.supplierOrderDate, data.supplierOrder, data.ingressDate, data.ingress, data.egressDate, data.egress, data.ingressBillDate, data.ingressBill, data.egressBillDate, data.egressBill, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

backend/models/issueVariantsModel.js

@@ -19,7 +19,7 @@ export const getIssueVariantById = async (id, result) => {
     try {
         let sql = `SELECT * FROM issuevariants WHERE primaryID = ? ORDER BY primaryID ASC`;
         const results = await ownConn.execute(sql, [id])
-        result(null, results);
+        result(null, results[0]);
     }
     catch (err) {
         // Manage Errors
@@ -62,6 +62,7 @@ export const updateIssueVariantById = async (data, result) => {
         const id = data.primaryID;
         let sql = `UPDATE issuevariants SET issueID = ?, name = ? , properties = ?, state = ?, amount = ?, price = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.issueID, data.name, data.properties, data.state, data.amount, data.price, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -77,6 +78,7 @@ export const deleteIssueVariantById = async (id, result) => {
     try {
         let sql = `DELETE FROM issuevariants WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -91,6 +93,7 @@ export const deleteIssueVariantByIssueSlipId = async (id, result) => {
     try {
         let sql = `DELETE FROM issuevariants WHERE issueID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -104,6 +107,7 @@ export const deleteIssueVariantByIssueSlipId = async (id, result) => {
 export const insertIssueVariant = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO issuevariants(issueID, name, properties, state, amount, price) VALUES(?, ?, ?, ?, ?, ?)`, [data.issueID, data.name, data.properties, data.state, data.amount, data.price])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

backend/models/issuesModel.js

@@ -14,12 +14,40 @@ export const getAllIssues = async (result) => {
     }
 };
 
+//get all selected issues by state
+export const getSelectedIssuesByState = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM issues WHERE state LIKE '%${selected}%' ORDER BY state 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 issues by issue name
+export const getSelectedIssuesByIssueName = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM issues WHERE name LIKE '%${selected}%' 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 single issue 
 export const getIssueById = async (id, result) => {
     try {
         let sql = `SELECT * FROM issues WHERE primaryID = ? ORDER BY primaryID ASC`;
         const results = await ownConn.execute(sql, [id])
-        result(null, results);
+        result(null, results[0]);
     }
     catch (err) {
         // Manage Errors
@@ -34,6 +62,7 @@ export const updateIssueById = async (data, result) => {
         const id = data.primaryID;
         let sql = `UPDATE issues SET name = ?, type = ? , state = ?, amount = ?, properties = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.name, data.type, data.state, data.amount, data.properties, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -48,6 +77,7 @@ export const deleteIssueById = async (id, result) => {
     try {
         let sql = `DELETE FROM issues WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -61,6 +91,7 @@ export const deleteIssueById = async (id, result) => {
 export const insertIssue = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO issues(name, type, state, amount, properties) VALUES(?, ?, ?, ?, ?)`, [data.name, data.type, data.state, data.amount, data.properties])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

backend/models/orderingInfoIssueSlipsModel.js

@@ -20,6 +20,7 @@ export const updateOrderingInfoIssueSlipById = async (data, result) => {
         const id = data.primaryID;
         let sql = `UPDATE orderinginfoissueslips SET issueSlipID = ?, article = ? , amount = ?, price = ?, comment = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.issueSlipID, data.article, data.amount, data.price, data.comment, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -35,6 +36,7 @@ export const deleteOrderingInfoIssueSlipById = async (id, result) => {
     try {
         let sql = `DELETE FROM orderinginfoissueslips WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -49,6 +51,7 @@ export const deleteOrderingInfoIssueSlipByIssueSlipId = async (id, result) => {
     try {
         let sql = `DELETE FROM orderinginfoissueslips WHERE issueSlipID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -62,6 +65,7 @@ export const deleteOrderingInfoIssueSlipByIssueSlipId = async (id, result) => {
 export const insertOrderingInfoIssueSlip = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO orderinginfoissueslips(issueSlipID, article, amount, price, comment) VALUES(?, ?, ?, ?, ?)`, [data.issueSlipID, data.article, data.amount, data.price, data.comment])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

backend/routes/routes.js

@@ -166,6 +166,8 @@ import {
     showIssueById,
     updateIssue,
     showIssues,
+    showSelectedIssuesByIssueName,
+    showSelectedIssuesByState,
 } from "../controller/issues.js";
 
 import {
@@ -552,6 +554,12 @@ router.get("/issues", showIssues);
 //get issue by id
 router.get("/issues/:id", showIssueById);
 
+//get all issues by selected name
+router.get("/selectedIssuesByIssueName/:id", showSelectedIssuesByIssueName)
+
+//get all issues by selected state
+router.get("/selectedIssuesByState/:id", showSelectedIssuesByState)
+
 // Update issue
 router.put("/issues", updateIssue);
 

components/CustomerSearch.vue

@@ -1,9 +1,9 @@
 <template>
   <section :class="['customer-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
     <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customer</div>
-    <pre v-if="!filtered" :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ customerFilter }}</pre>
+    <pre v-if="!filtered" :class="['data', 'pre-customer', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ clientFilter }}</pre>
-    <input v-if="filtered" v-model="customerFilter" @change="filterConfigItemList()"
+    <input v-if="filtered" v-model="clientFilter" @change="filterList()"
-      :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+      :class="['data', 'input-customer', darkMode ? 'data-darkmode' : 'data-lightmode']">
   </section>
 </template>
 
@@ -24,12 +24,20 @@ const updateFilterTerm = () => {
   customerFilter.value = filteredTerm.value
 }
 
+const checkFiltered = () => {
+  if (!filtered.value) {
+    clientFilter.value = ''
+    filterList();
+  }
+}
+
 // update the filtered term in the store
-const filterConfigItemList = () => {
+const filterList = () => {
-  store.commit('updateAssetFilterbyCustomer', customerFilter.value);
+  store.commit('updateFilterbyClient', clientFilter.value);
 }
 
 watch(filteredTerm, updateFilterTerm)
+watch(filtered, checkFiltered)
 </script>
 
 <script>
@@ -102,6 +110,10 @@ export default {
   border: none;
 }
 
+.pre-customer {
+  margin-left: 1rem;
+}
+
 .data-darkmode {
   background-color: #212121;
   color: #fff;

components/IssueStateSearch.vue

@@ -0,0 +1,128 @@
+<template>
+    <section :class="['issue-state-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue state</div>
+        <pre v-if="!filtered"
+            :class="['data', 'pre-issue', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ issueStateFilter }}</pre>
+        <input v-if="filtered" v-model="issueStateFilter" @change="filterList()"
+            :class="['data', 'input-state', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const filtered = computed(() => store.state.filtered);
+const filteredTerm = computed(() => store.state.filteredByClient);
+const issueStateFilter = ref(store.state.filteredByClient);
+
+const darkMode = ref(true)
+
+// update filtered term
+const updateFilterTerm = () => {
+    issueStateFilter.value = filteredTerm.value
+}
+
+const checkFiltered = () => {
+    if (!filtered.value) {
+        issueStateFilter.value = ''
+        filterList();
+    }
+}
+
+// update the filtered term in the store
+const filterList = () => {
+    store.commit('updateFilterbyClient', issueStateFilter.value);
+}
+
+watch(filteredTerm, updateFilterTerm)
+watch(filtered, checkFiltered)
+</script>
+
+<script>
+export default {
+    name: "IssueStateSearch",
+};
+</script>
+
+<style scoped>
+.issue-state-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: 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;
+}
+
+.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;
+}
+
+.input-state {
+    border: none;
+    margin-left: 1rem;
+}
+
+.pre-issue {
+    margin-left: 1rem;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+</style>

components/LoginForm.vue

@@ -43,7 +43,6 @@
   </form>
 </template>
 
-
 <script setup>
 import { useRouter } from 'vue-router';
 import { ref } from 'vue';

components/server/Accounting.vue

@@ -1,5 +1,204 @@
 <template>
-    <section :class="['accounting-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="!addBool" :class="['accounting-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="accounting">Accounting:
+            <div class="asset-data">
+                <table class="data-table" id="asset-table-no-client">
+                    <tbody>
+                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                            <th
+                                :class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Action</th>
+                            <th
+                                :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                Date</th>
+                            <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Supplier request</td>
+                            <td v-if="!editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                {{
+        issueSlip.supplierRequestDate }}</td>
+                            <td v-if="editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                <input type="text" v-model="issueSlip.supplierRequestDate" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
+        issueSlip.supplierRequest }}</td>
+                            <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="issueSlip.supplierRequest" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Supplier offer</td>
+                            <td v-if="!editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                {{
+        issueSlip.supplierOfferDate }}</td>
+                            <td v-if="editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                <input type="text" v-model="issueSlip.supplierOfferDate" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
+        issueSlip.supplierOffer }}</td>
+                            <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="issueSlip.supplierOffer" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Customer offer</td>
+                            <td v-if="!editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                {{
+        issueSlip.clientOfferDate }}</td>
+                            <td v-if="editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                <input type="text" v-model="issueSlip.clientOfferDate" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
+        issueSlip.clientOffer }}</td>
+                            <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="issueSlip.clientOffer" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Customer order</td>
+                            <td v-if="!editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                {{
+        issueSlip.clientOrderDate }}</td>
+                            <td v-if="editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                <input type="text" v-model="issueSlip.clientOrderDate" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
+        issueSlip.clientOrder }}</td>
+                            <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="issueSlip.clientOrder" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Supplier order</td>
+                            <td v-if="!editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                {{
+        issueSlip.supplierOrderDate }}</td>
+                            <td v-if="editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                <input type="text" v-model="issueSlip.supplierOrderDate" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
+        issueSlip.supplierOrder }}</td>
+                            <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="issueSlip.supplierOrder" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Ingress</td>
+                            <td v-if="!editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                {{
+        issueSlip.ingressDate }}</td>
+                            <td v-if="editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                <input type="text" v-model="issueSlip.ingressDate" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
+        issueSlip.ingress }}</td>
+                            <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="issueSlip.ingress" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Egress</td>
+                            <td v-if="!editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                {{
+        issueSlip.egressDate }}</td>
+                            <td v-if="editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                <input type="text" v-model="issueSlip.egressDate" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
+        issueSlip.egress }}</td>
+                            <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="issueSlip.egress" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Ingress bill</td>
+                            <td v-if="!editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                {{
+        issueSlip.ingressBillDate }}</td>
+                            <td v-if="editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                <input type="text" v-model="issueSlip.ingressBillDate" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
+        issueSlip.ingressBill }}</td>
+                            <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="issueSlip.ingressBill" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Egress bill</td>
+                            <td v-if="!editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                {{
+        issueSlip.egressBillDate }}</td>
+                            <td v-if="editable"
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                <input type="text" v-model="issueSlip.egressBillDate" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
+        issueSlip.egressBill }}</td>
+                            <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="issueSlip.egressBill" @change="updateIssueSlip()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" :class="['accounting-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="accounting">Accounting:
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-customer">
@@ -19,8 +218,13 @@
                                 Supplier request</td>
                             <td
                                 :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newSupplierRequestDate" @change="updateIS()"
-                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newSupplierRequest" @change="updateIS()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
                         </tr>
                         <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                             <td
@@ -28,8 +232,13 @@
                                 Supplier offer</td>
                             <td
                                 :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newSupplierOfferDate" @change="updateIS()"
-                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newSupplierOffer" @change="updateIS()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
                         </tr>
                         <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                             <td
@@ -37,8 +246,13 @@
                                 Customer offer</td>
                             <td
                                 :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newClientOfferDate" @change="updateIS()"
-                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newClientOffer" @change="updateIS()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
                         </tr>
                         <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                             <td
@@ -46,8 +260,13 @@
                                 Customer order</td>
                             <td
                                 :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newClientOrderDate" @change="updateIS()"
-                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newClientOrder" @change="updateIS()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
                         </tr>
                         <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                             <td
@@ -55,8 +274,13 @@
                                 Supplier order</td>
                             <td
                                 :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newSupplierOrderDate" @change="updateIS()"
-                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newSupplierOrder" @change="updateIS()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
                         </tr>
                         <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                             <td
@@ -64,8 +288,13 @@
                                 Ingress</td>
                             <td
                                 :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newIngressDate" @change="updateIS()"
-                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newIngress" @change="updateIS()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
                         </tr>
                         <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                             <td
@@ -73,8 +302,13 @@
                                 Egress</td>
                             <td
                                 :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newEgressDate" @change="updateIS()"
-                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newEgress" @change="updateIS()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
                         </tr>
                         <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
                             <td
@@ -82,8 +316,13 @@
                                 Ingress bill</td>
                             <td
                                 :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newIngressBillDate" @change="updateIS()"
-                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newIngressBill" @change="updateIS()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
                         </tr>
                         <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
                             <td
@@ -91,20 +330,224 @@
                                 Egress bill</td>
                             <td
                                 :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newEgressBillDate" @change="updateIS()"
-                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newEgressBill" @change="updateIS()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
                         </tr>
                     </tbody>
                 </table>
             </div>
         </div>
     </section>
+    <section v-if="addBool" id="saveNewItem">
+        <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']"
+            @click="addIssueSlip()">Save</button>
+    </section>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } 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 editable = computed(() => store.state.editable);
+const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
+const addBool = computed(() => store.state.new);
+const newTicketNoIS = computed(() => store.state.newTicketNoIS);
+const newCustomerIdIS = computed(() => store.state.newCustomerIdIS);
+const newCustomerIS = computed(() => store.state.newCustomerIS);
+const newNotesIS = computed(() => store.state.newNotesIS);
+const newUserIS = computed(() => store.state.newUserIS);
+const newDeliveryAddressIS = computed(() => store.state.newDeliveryAddressIS);
+const newAddRowOI = computed(() => store.state.newAddRowOI);
+const newOIs = computed(() => store.state.newOIs);
+
+const newClientOffer = ref('');
+const newClientOrder = ref('');
+const newSupplierOffer = ref('');
+const newSupplierOrder = ref('');
+const newSupplierRequest = ref('');
+const newIngress = ref('');
+const newIngressBill = ref('');
+const newEgress = ref('');
+const newEgressBill = ref('');
+const newClientOfferDate = ref('');
+const newClientOrderDate = ref('');
+const newSupplierOfferDate = ref('');
+const newSupplierOrderDate = ref('');
+const newSupplierRequestDate = ref('');
+const newIngressDate = ref('');
+const newIngressBillDate = ref('');
+const newEgressDate = ref('');
+const newEgressBillDate = ref('');
 
 const darkMode = ref(true)
+const issueSlip = ref({});
+
+// get issue slip from id
+const getIssueSlipById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueSlip/${chosenIssueSlipId.value}`
+        );
+        issueSlip.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update accounting fields in the store
+const updateIS = () => {
+    const is = {
+        supplierRequestDate: newSupplierRequestDate.value,
+        supplierRequest: newSupplierRequest.value,
+        supplierOfferDate: newSupplierOfferDate.value,
+        supplierOffer: newSupplierOffer.value,
+        clientOfferDate: newClientOfferDate.value,
+        clientOffer: newClientOffer.value,
+        clientOrderDate: newClientOrderDate.value,
+        clientOrder: newClientOrder.value,
+        supplierOrderDate: newSupplierOrderDate.value,
+        supplierOrder: newSupplierOrder.value,
+        ingressDate: newIngressDate.value,
+        ingress: newIngress.value,
+        egressDate: newEgressDate.value,
+        egress: newEgress.value,
+        ingressBillDate: newIngressBillDate.value,
+        ingressBill: newIngressBill.value,
+        egressBillDate: newEgressBillDate.value,
+        egressBill: newEgressBill.value,
+    };
+    store.commit('updateAccountingComponent', is);
+}
+
+//update data
+const updateIssueSlip = async () => {
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateIssueSlip`,
+            {
+                primaryID: issueSlip.value.primaryID,
+                customerID: issueSlip.value.customerID,
+                customer: issueSlip.value.customer,
+                ticketNo: issueSlip.value.ticketNo,
+                creationDate: issueSlip.value.creationDate,
+                lastView: issueSlip.value.lastView,
+                user: issueSlip.value.user,
+                notes: issueSlip.value.notes,
+                deliveryAddress: issueSlip.value.deliveryAddress,
+                supplierRequestDate: issueSlip.value.supplierRequestDate,
+                supplierRequest: issueSlip.value.supplierRequest,
+                supplierOfferDate: issueSlip.value.supplierOfferDate,
+                supplierOffer: issueSlip.value.supplierOffer,
+                clientOfferDate: issueSlip.value.clientOfferDate,
+                clientOffer: issueSlip.value.clientOffer,
+                clientOrderDate: issueSlip.value.clientOrderDate,
+                clientOrder: issueSlip.value.clientOrder,
+                supplierOrder: issueSlip.value.supplierOrder,
+                supplierOrderDate: issueSlip.value.supplierOrderDate,
+                ingressDate: issueSlip.value.ingressDate,
+                ingress: issueSlip.value.ingress,
+                egressDate: issueSlip.value.egressDate,
+                egress: issueSlip.value.egress,
+                ingressBillDate: issueSlip.value.ingressBillDate,
+                ingressBill: issueSlip.value.ingressBill,
+                egressBillDate: issueSlip.value.egressBillDate,
+                egressBill: issueSlip.value.egressBill,
+            }
+        )
+        await getIssueSlipById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new issue slip
+const addIssueSlip = async () => {
+    if (newTicketNoIS.value.length === 0) {
+        alert("Please add a ticket number!");
+        return;
+    }
+    if (newCustomerIS.value.length === 0) {
+        alert("Please choose a customer!");
+        return;
+    }
+    // get the time and date
+    const today = new Date();
+    const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
+    const time = today.getHours() + ":" + today.getMinutes();
+    const dateTime = date + ' ' + time;
+    let allFine = true;
+    newOIs.value.forEach(oi => {
+        if (oi.article.length === 0 && oi.amount.length === 0 && oi.price.length === 0 && oi.comment.length === 0) {
+            alert(`Please add data for all ordering info.`);
+            allFine = false
+        }
+    })
+    if (!allFine) {
+        return
+    }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addIssueSlip`,
+            {
+                customerID: newCustomerIdIS.value,
+                customer: newCustomerIS.value,
+                ticketNo: newTicketNoIS.value,
+                creationDate: dateTime,
+                lastView: '',
+                user: newUserIS.value,
+                notes: newNotesIS.value,
+                deliveryAddress: newDeliveryAddressIS.value,
+                supplierRequestDate: newSupplierRequestDate.value,
+                supplierRequest: newSupplierRequest.value,
+                supplierOfferDate: newSupplierOfferDate.value,
+                supplierOffer: newSupplierOffer.value,
+                clientOfferDate: newClientOfferDate.value,
+                clientOffer: newClientOffer.value,
+                clientOrderDate: newClientOrderDate.value,
+                clientOrder: newClientOrder.value,
+                supplierOrderDate: newClientOrderDate.value,
+                supplierOrder: newSupplierOrder.value,
+                ingressDate: newIngressDate.value,
+                ingress: newIngress.value,
+                egressDate: newEgressDate.value,
+                egress: newEgress.value,
+                ingressBillDate: newIngressBillDate.value,
+                ingressBill: newIngressBill.value,
+                egressBillDate: newEgressBillDate.value,
+                egressBill: newEgressBill.value,
+            });
+        newOIs.value.forEach(async oi => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addOrderingInfo`,
+                    {
+                        issueSlipID: response.data,
+                        article: oi.article,
+                        amount: oi.amount,
+                        price: oi.price,
+                        comment: oi.comment,
+                    });
+            } catch (err) {
+                console.log(err);
+            }
+            store.commit('resetStore');
+            store.commit('changeToIssueSliplist');
+        })
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getIssueSlipById();
+});
 </script>
 
 <script>
@@ -134,6 +577,31 @@ export default {
     background-color: #fff;
 }
 
+.input {
+    border: none;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    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;
+}
+
 .label {
     letter-spacing: 5%;
     font: 400 1rem/1.875rem Overpass, sans-serif;
@@ -204,6 +672,41 @@ export default {
     background-color: #EBEBEB;
 }
 
+.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;
+}
 
 th,
 td {

components/server/Asset.vue

@@ -280,6 +280,7 @@ const confirmDeleteAsset = async () => {
             try {
                 await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteConfigItem/${chosenAssetId.value}`);
                 store.commit('undoDelete');
+                store.commit('resetStore');
                 store.commit('changeToAssetlist');
             } catch (err) {
                 console.log(err.response.statusText);

components/server/Customer.vue

@@ -94,7 +94,7 @@ section {
   display: flex;
   flex: auto;
   flex-direction: row;
-  padding: 0 1.875rem;
+  padding: 0.8rem 1.875rem;
   align-items: center;
   justify-content: flex-start;
   gap: 1.25rem;

components/server/CustomerDepartment.vue

@@ -86,7 +86,7 @@ display: flex;
 flex: auto;
 width: 30%;
 flex-direction: row;
-padding: 0.625rem 1.875rem;
+padding: 0.8rem 1.875rem;
 align-items: center;
 justify-content: flex-start;
 gap: 1.25rem;

components/server/CustomerEmployee.vue

@@ -133,7 +133,7 @@ section {
   flex: auto;
   width: 20%;
   flex-direction: row;
-  padding: 0 1.875rem;
+  padding: 0.8rem 1.875rem;
   align-items: center;
   justify-content: flex-start;
   gap: 1.25rem;

components/server/Issue.vue

@@ -1,22 +1,33 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['issue-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Name</h2>
+        <h2 v-if="!editable" :class="['issue-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ issue.name }}</h2>
+        <input v-if="editable" v-model="issue.name" @change="updateIssueItem()"
+            :class="['data', 'issue-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="issue-data">
             <div class="type">
                 <div class="data-field" id="type">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issue.type }}</pre>
+                    <input v-if="editable" v-model="issue.type" @change="updateIssueItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
             <div class="info">
                 <div class="state-amount">
                     <div class="data-field" id="state">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issue.state }}</pre>
+                        <input v-if="editable" v-model="issue.state" @change="updateIssueItem()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="data-field" id="amount">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issue.amount }}</pre>
+                        <input v-if="editable" v-model="issue.amount" @change="updateIssueItem()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
             </div>
@@ -25,7 +36,44 @@
             <div class="additional">
                 <div class="properties">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">...</pre>
+                    <input v-model="issue.properties" :readonly="!editable" @change="updateIssueItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <input v-model="newName" @change="updateII()"
+            :class="['data', 'issue-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="issue-data">
+            <div class="type">
+                <div class="data-field" id="type">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                    <input v-model="newType" @change="updateII()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+            <div class="info">
+                <div class="state-amount">
+                    <div class="data-field" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <input v-model="newState" @change="updateII()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="amount">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
+                        <input v-model="newAmount" @change="updateII()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="issue-data">
+            <div class="additional">
+                <div class="properties">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
+                    <input v-model="newProperties" @change="updateII()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">
                 </div>
             </div>
         </div>
@@ -34,9 +82,136 @@
 
 
 <script setup>
-import { ref } from 'vue';
+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 editable = computed(() => store.state.editable);
+const chosenIssueId = computed(() => store.state.chosenIssueId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
 
 const darkMode = ref(true)
+const issue = ref({});
+const issues = ref([]);
+
+const newName = ref('');
+const newType = ref('');
+const newState = ref('');
+const newAmount = ref('');
+const newProperties = ref('');
+
+//get all issue
+const getIssues = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssues`);
+        issues.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const confirmDeleteIssue = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this issue? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteIssueItem/${chosenIssueId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteIV/${chosenIssueId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            store.commit('undoDelete');
+            store.commit('resetStore');
+            store.commit('changeToIssueItemList');
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//update data
+const updateIssueItem = async () => {
+    if (issue.value.name.trim() === "") {
+        alert("Please add an issue name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if the issue name already exists
+        issues.value.forEach(i => {
+            if (i.name === issue.value.name) {
+                counter += 1;
+            }
+        });
+        if (counter == 2) {
+            alert("This issue name already exists. Please choose an unique issue name or modify respectively delete the old one!");
+            issue.value.name = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateIssueItem`,
+                {
+                    primaryID: issue.value.primaryID,
+                    name: issue.value.name,
+                    type: issue.value.type,
+                    state: issue.value.state,
+                    amount: issue.value.amount,
+                    properties: issue.value.properties,
+                }
+            )
+            await getIssueById();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// get issue from id
+const getIssueById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueItem/${chosenIssueId.value}`
+            );
+            issue.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update issue fields in the store
+const updateII = () => {
+    const ii = {
+        name: newName.value,
+        type: newType.value,
+        state: newState.value,
+        amount: newAmount.value,
+        properties: newProperties.value,
+    };
+    store.commit('updateIssueComponent', ii);
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+watch(deleteBool, confirmDeleteIssue);
+
+onMounted(() => {
+    getIssueById();
+    triggerBackendCallsWithDelay(getIssues);
+});
 </script>
 
 <script>
@@ -67,7 +242,27 @@ export default {
     background-color: #fff;
 }
 
+.issue-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-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
+.input {
+    border: none;
+}
 
 .issue-name {
     align-self: stretch;
@@ -92,7 +287,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
 }

components/server/IssueSlip.vue

@@ -1,22 +1,33 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['issueSlip-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">ID issue slips</h2>
+        <h2 :class="['issueSlip-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ issueSlip.primaryID }}</h2>
         <div class="issueSlip-data">
             <div class="customer">
                 <div class="data-field" id="customer">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueSlip.customer }}</pre>
+                    <select v-if="editable" id="customersDropDownChosenCI" v-model="issueSlip.customer"
+                        @change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                        <option v-for="cust in customers" :key="cust.primaryID">
+                            {{ cust.customername }}
+                        </option>
+                    </select>
                 </div>
             </div>
             <div class="info">
                 <div class="ticketNo-user">
                     <div class="data-field" id="ticketNo">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueSlip.ticketNo }}</pre>
                     </div>
                     <div class="data-field" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueSlip.user }}</pre>
+                        <input v-if="editable" v-model="issueSlip.user" @change="updateIssueSlip()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
             </div>
@@ -25,18 +36,256 @@
             <div class="additional">
                 <div class="notes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                    <input v-model="issueSlip.notes" :readonly="!editable" @change="updateIssueSlip()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+                </div>
+            </div>
+            <div class="additional">
+                <div class="deliveryAddress">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Different delivery address:
+                    </h3>
+                    <input v-model="issueSlip.deliveryAddress" :readonly="!editable" @change="updateIssueSlip()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="deliveryAddress">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['issueSlip-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Issue slip ID</h2>
+        <div class="issueSlip-data">
+            <div class="client">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                    <select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
+                        :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                        <option v-for="cust in customers" :key="cust.primaryID">
+                            {{ cust.customername }}
+                        </option>
+                    </select>
+                </div>
+            </div>
+            <div class="info">
+                <div class="ticketNo-user">
+                    <div class="data-field" id="ticketNo">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"></pre>
+                        <!-- <select id="ticketNoDropDownChosenCI" v-model="newTicketNo" @change="updateIS()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="po in productionOrders" :key="po.ticketNumber">
+                                {{ po.ticketNumber }}
+                            </option>
+                        </select> -->
+                    </div>
+                    <div class="data-field" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <input v-model="newUser" @change="updateIS()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="issueSlip-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <input v-model="newNotes" @change="updateIS()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+                </div>
+            </div>
+            <div class="additional">
+                <div class="deliveryAddress">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Different delivery address:
+                    </h3>
+                    <input v-model="newDeliveryAddress" @change="updateIS()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="deliveryAddress">
                 </div>
             </div>
         </div>
     </section>
 </template>
 
-    
 <script setup>
-import { ref } from 'vue';
+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 editable = computed(() => store.state.editable);
+const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
 
 const darkMode = ref(true)
+const issueSlip = ref({});
+const customer = ref({});
+const productionOrders = ref([]);
+const customers = ref([]);
+
+const newTicketNo = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newUser = ref('');
+const newNotes = ref('');
+const newDeliveryAddress = ref('');
+
+// get issue slip from id
+const getIssueSlipById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueSlip/${chosenIssueSlipId.value}`
+            );
+            issueSlip.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update issue slip fields in the store
+const updateIS = () => {
+    const is = {
+        customerId: newCustomerID.value,
+        customer: newCustomer.value,
+        // ticketNo: newTicketNo.value,
+        ticketNo: 1,
+        notes: newNotes.value,
+        user: newUser.value,
+        deliveryAddress: newDeliveryAddress.value,
+    };
+    store.commit('updateIssueSlipComponent', is);
+}
+
+//update data
+const updateIssueSlip = async () => {
+    // delete later
+    issueSlip.value.ticketNo = 1;
+    if (issueSlip.value.ticketNo.length === 0) {
+        alert("Please add a ticket Number!");
+        return;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateIssueSlip`,
+            {
+                primaryID: issueSlip.value.primaryID,
+                customerID: issueSlip.value.customerID,
+                customer: issueSlip.value.customer,
+                ticketNo: issueSlip.value.ticketNo,
+                creationDate: issueSlip.value.creationDate,
+                lastView: issueSlip.value.lastView,
+                user: issueSlip.value.user,
+                notes: issueSlip.value.notes,
+                deliveryAddress: issueSlip.value.deliveryAddress,
+                supplierRequestDate: issueSlip.value.supplierRequestDate,
+                supplierRequest: issueSlip.value.supplierRequest,
+                supplierOfferDate: issueSlip.value.supplierOfferDate,
+                supplierOffer: issueSlip.value.supplierOffer,
+                clientOfferDate: issueSlip.value.clientOfferDate,
+                clientOffer: issueSlip.value.clientOffer,
+                clientOrderDate: issueSlip.value.clientOrderDate,
+                clientOrder: issueSlip.value.clientOrder,
+                supplierOrder: issueSlip.value.supplierOrder,
+                supplierOrderDate: issueSlip.value.supplierOrderDate,
+                ingressDate: issueSlip.value.ingressDate,
+                ingress: issueSlip.value.ingress,
+                egressDate: issueSlip.value.egressDate,
+                egress: issueSlip.value.egress,
+                ingressBillDate: issueSlip.value.ingressBillDate,
+                ingressBill: issueSlip.value.ingressBill,
+                egressBillDate: issueSlip.value.egressBillDate,
+                egressBill: issueSlip.value.egressBill,
+            }
+        )
+        await getIssueSlipById();
+    } 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);
+    }
+}
+
+//get all production orders
+const getProductionOrders = async () => {
+    // try {
+    //     const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
+    //     );
+    // customers.value = response.data;
+    // } catch (err) {
+    //     console.log(err.response.statusText);
+    // }
+}
+
+const confirmDeleteIssueSlip = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this issue slip? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteIssueSlip/${chosenIssueSlipId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosOI/${chosenIssueSlipId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            store.commit('undoDelete');
+            store.commit('resetStore');
+            store.commit('changeToIssueSliplist');
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+// update customerid if customer was changed
+const updateCustomerID = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${issueSlip.value.customer}`);
+        customer.value = response.data;
+        issueSlip.value.customerID = customer.value.customerID;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    await updateIssueSlip();
+}
+
+// update customerid if customer was changed
+const updateNewCustomerID = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${newCustomer.value}`);
+        newCustomerID.value = response.data.customerID;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    updateIS();
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+watch(deleteBool, confirmDeleteIssueSlip);
+
+onMounted(() => {
+    getIssueSlipById();
+    getProductionOrders();
+    triggerBackendCallsWithDelay(getCustomers);
+});
 </script>
 
 <script>
@@ -92,7 +341,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
 }
@@ -129,6 +378,10 @@ export default {
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.input {
+    border: none;
+}
+
 .data-darkmode {
     background-color: #212121;
     color: #fff;
@@ -165,7 +418,7 @@ export default {
     align-items: flex-start;
     justify-content: center;
     line-height: normal;
-    width: 100%;
+    width: 50%;
     padding: 0rem 0.625rem;
     border-radius: 0.3125rem;
 }
@@ -193,10 +446,12 @@ export default {
     gap: 0.625rem;
 }
 
-.data#notes {
+.data#notes,
+.data#deliveryAddress {
     align-self: stretch;
 }
 
+.deliveryAddress,
 .notes {
     display: flex;
     flex-direction: column;
@@ -206,4 +461,20 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
+
+.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;
+}
 </style>

components/server/IssueSlipTable.vue

@@ -1,4 +1,9 @@
 <template>
+    <section v-if="searchable" :class="['issue-slip-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Ticket No</div>
+        <input v-model="issueSlipSearchFilter" @change="searchIssueSlip()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="asset-table">
@@ -26,7 +31,12 @@
                         {{ issueSlip.customer }}</td>
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        {{ issueSlip.primaryID }}</td>
+                        <nuxt-link to="/issueSlips" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenIssueSlip(issueSlip.primaryID)">
+                            {{ issueSlip.primaryID }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
                         {{ issueSlip.ticketNo }}</td>
@@ -42,15 +52,37 @@
 
 
 <script setup>
-import { ref, onMounted } from 'vue';
+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';
 
+// get accesss to the store
+const store = useStore()
+const goToChosenIssueSlip = (id) => {
+    store.commit('setChosenIssueSlip', id);
+    store.commit('changeToIssueSlip');
+};
+
+const clientFilter = computed(() => store.state.filteredByClient);
+const searchable = computed(() => store.state.searchable);
+
+const issueSlipSearchFilter = ref('');
 const darkMode = ref(true)
 const issueSlips = ref([]);
 
+// update search term
+const updateSearchTerm = async () => {
+    issueSlipSearchFilter.value = '';
+    await getIssueSlips();
+}
+
 //get all issueSlips
 const getIssueSlips = async () => {
+    if (!(clientFilter.value === '')) {
+        await getFilteredIssueSlipsByClient();
+    } else {
         try {
             const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssueSlips`);
             issueSlips.value = response.data;
@@ -58,9 +90,38 @@ const getIssueSlips = async () => {
             console.log(err.response.statusText);
         }
     }
+}
 
-onMounted(() => {
+//get all issue slips based on the searched client
-    getIssueSlips();
+const getFilteredIssueSlipsByClient = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedIssueSlipsByClient/${clientFilter.value}`);
+        issueSlips.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all issue slips based on the searched issue slip id
+const searchIssueSlip = async () => {
+    if (issueSlipSearchFilter.value === '') {
+        await getIssueSlips();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedIssueSlipsByTicketNo/${issueSlipSearchFilter.value}`);
+            issueSlips.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+watch(clientFilter, getIssueSlips);
+watch(searchable, updateSearchTerm);
+
+
+onMounted(async () => {
+    await getIssueSlips();
 });
 </script>
 
@@ -77,7 +138,6 @@ export default {
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    width: 100%;
     padding: 1.25rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
@@ -92,6 +152,46 @@ export default {
     background-color: #fff;
 }
 
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+
+.issue-slip-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;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.input {
+    border: none;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -118,6 +218,27 @@ export default {
     border-bottom: 0.0625rem solid #8e8e8e;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.clientLabel {
+    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;
+}
+
 .tr-darkmode {
     border-top: 0.0625rem solid #000000;
 }
@@ -218,4 +339,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/IssueTable.vue

@@ -1,4 +1,9 @@
 <template>
+    <section v-if="searchable" :class="['issue-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue name</div>
+        <input v-model="issueSearchFilter" @change="searchIssue()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issues:</div>
         <table class="data-table" id="asset-table">
@@ -19,7 +24,12 @@
                     :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        {{ issue.name }}</td>
+                        <nuxt-link to="/issues" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenIssue(issue.primaryID)">
+                            {{ issue.name }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
                         {{ issue.type }}</td>
@@ -35,15 +45,38 @@
 
 
 <script setup>
-import { ref, onMounted } from 'vue';
+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';
 
+// get accesss to the store
+const store = useStore()
+const goToChosenIssue = (id) => {
+    store.commit('setChosenIssue', id);
+    store.commit('changeToIssueItem');
+};
+
+const stateFilter = computed(() => store.state.filteredByClient);
+const searchable = computed(() => store.state.searchable);
+
+const issueSearchFilter = ref('');
 const darkMode = ref(true)
 const issues = ref([]);
 
+// update search term
+const updateSearchTerm = async () => {
+    issueSearchFilter.value = '';
+    await getIssues();
+}
+
+
 //get all issue
 const getIssues = async () => {
+    if (!(stateFilter.value === '')) {
+        await getFilteredIssuesByState();
+    } else {
         try {
             const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssues`);
             issues.value = response.data;
@@ -51,9 +84,37 @@ const getIssues = async () => {
             console.log(err.response.statusText);
         }
     }
+}
 
-onMounted(() => {
+//get all issues based on the searched state
-    getIssues();
+const getFilteredIssuesByState = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedIssuesByState/${stateFilter.value}`);
+        issues.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all issues based on the searched issue name
+const searchIssue = async () => {
+    if (issueSearchFilter.value === '') {
+        await getIssues();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedIssuesByIssueName/${issueSearchFilter.value}`);
+            issues.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+watch(stateFilter, getIssues);
+watch(searchable, updateSearchTerm);
+
+onMounted(async () => {
+    await getIssues();
 });
 </script>
 
@@ -87,6 +148,27 @@ export default {
     background-color: #fff;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.clientLabel {
+    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%;
     padding: 0 0.625rem;
@@ -94,6 +176,46 @@ export default {
     border-collapse: collapse;
 }
 
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+
+.issue-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;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.input {
+    border: none;
+}
+
 .table-row {
     display: flex;
     flex-direction: row;

components/server/IssueVariant.vue

@@ -1,26 +1,40 @@
 <template>
     <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['issue-variant-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Name</h2>
+        <h2 v-if="!editable" :class="['issue-variant-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+        issueVariant.name }}</h2>
+        <input v-if="editable" v-model="issueVariant.name" @change="updateIssueVariant()"
+            :class="['data', 'issue-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="issue-variant-data">
             <div class="variantOf">
                 <div class="data-field" id="variantOf">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Variant of:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"><nuxt-link to="/issues" id="nuxt-link" class="button" @click="goToChosenIssue(issue.primaryID)">{{ nameOfVariant }}</nuxt-link></pre>
                 </div>
             </div>
             <div class="info">
                 <div class="state-amount-price">
                     <div class="data-field" id="state">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueVariant.state }}</pre>
+                        <input v-if="editable" v-model="issueVariant.state" @change="updateIssueVariant()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+
                     </div>
                     <div class="data-field" id="amount">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueVariant.amount }}</pre>
+                        <input v-if="editable" v-model="issueVariant.amount" @change="updateIssueVariant()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="data-field" id="price">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Price:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueVariant.price }}</pre>
+                        <input v-if="editable" v-model="issueVariant.price" @change="updateIssueVariant()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
             </div>
@@ -29,18 +43,143 @@
             <div class="additional">
                 <div class="properties">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">...</pre>
+                    <input v-model="issueVariant.properties" :readonly="!editable" @change="updateIssueVariant()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">
                 </div>
             </div>
         </div>
     </section>
 </template>
 
-    
 <script setup>
-import { ref } from 'vue';
+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 editable = computed(() => store.state.editable);
+const chosenIssueId = computed(() => store.state.chosenIssueId);
+const chosenIssueVariantId = computed(() => store.state.chosenIssueVariantId);
+const deleteBool = computed(() => store.state.deleteBool);
 
 const darkMode = ref(true)
+const issue = ref({});
+const issueVariant = ref({});
+const issueVariants = ref([]);
+const nameOfVariant = ref('');
+
+//get all issue variants
+const getIssueVariants = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssueVariants`);
+        issueVariants.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const goToChosenIssue = (id) => {
+    store.commit('setChosenIssue', id);
+    store.commit('changeToIssueItem');
+};
+
+const confirmDeleteIssueVariant = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this issue variant? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteIssueVariant/${chosenIssueVariantId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            store.commit('undoDelete');
+            store.commit('resetStore');
+            store.commit('changeToIssueItemList');
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//update data
+const updateIssueVariant = async () => {
+    if (issueVariant.value.name.trim() === "") {
+        alert("Please add an issue variant name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if the issue variant name already exists
+        issueVariants.value.forEach(i => {
+            if (i.name === issueVariant.value.name) {
+                counter += 1;
+            }
+        });
+        if (counter == 2) {
+            alert("This issue variant name already exists. Please choose an unique issue variant name or modify respectively delete the old one!");
+            issueVariant.value.name = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateIssueVariant`,
+                {
+                    primaryID: issueVariant.value.primaryID,
+                    issueID: issueVariant.value.issueID,
+                    name: issueVariant.value.name,
+                    state: issueVariant.value.state,
+                    amount: issueVariant.value.amount,
+                    properties: issueVariant.value.properties,
+                    price: issueVariant.value.price,
+                }
+            )
+            await getIssueVariantById();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+// get issue variant from id
+const getIssueVariantById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueVariant/${chosenIssueVariantId.value}`
+        );
+        issueVariant.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// get issue from id
+const getIssueById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueItem/${chosenIssueId.value}`
+        );
+        issue.value = response.data;
+        nameOfVariant.value = issue.value.name;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+watch(deleteBool, confirmDeleteIssueVariant);
+
+onMounted(() => {
+    getIssueVariantById();
+    getIssueById();
+    triggerBackendCallsWithDelay(getIssueVariants);
+});
+
 </script>
 
 <script>
@@ -71,8 +210,6 @@ export default {
     background-color: #fff;
 }
 
-
-
 .issue-variant-name {
     align-self: stretch;
     padding: 1rem 0;
@@ -96,7 +233,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
 }
@@ -151,18 +288,46 @@ export default {
     align-self: stretch;
 }
 
-.variantOf,
+.variantOf {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 30%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
 .info {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     line-height: normal;
-    width: 50%;
+    width: 70%;
     padding: 0 0;
     border-radius: 0.3125rem;
 }
 
+.issue-name-input {
+    margin: 1rem;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+}
+
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
+.input {
+    border: none;
+}
+
 .additional {
     display: flex;
     flex-direction: column;
@@ -210,4 +375,9 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
+
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
 </style>

components/server/IssueVariants.vue

@@ -1,5 +1,6 @@
 <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+    <section v-if="!addBool"
+        :class="['issue-variant-list-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
         <table class="data-table" id="issue-variants-table">
             <tbody>
@@ -18,30 +19,403 @@
                         Amount</th>
                     <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-for="issueVar in issueVariants" :key="issueVar.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td v-if="!editable"
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        <nuxt-link to="/issues" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenIssueVariant(issueVar.primaryID)">
+                            {{ issueVar.name }}
+                        </nuxt-link>
+                    </td>
+                    <td v-if="editable"
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        <input type="text" v-model="issueVar.name" @change="updateIssueVariant(issueVar)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td v-if="!editable"
+                        :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                        {{ issueVar.properties }}</td>
+                    <td v-if="editable"
+                        :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                        <input type="text" v-model="issueVar.properties" @change="updateIssueVariant(issueVar)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td v-if="!editable"
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        {{ issueVar.state }}</td>
+                    <td v-if="editable"
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        <input type="text" v-model="issueVar.state" @change="updateIssueVariant(issueVar)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td v-if="!editable"
+                        :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                        {{ issueVar.amount }}</td>
+                    <td v-if="editable"
+                        :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                        <input type="text" v-model="issueVar.amount" @change="updateIssueVariant(issueVar)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td v-if="!editable" :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ issueVar.price
+                        }}</td>
+                    <td v-if="editable" :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
+                            v-model="issueVar.price" @change="updateIssueVariant(issueVar)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"><button
+                            :class="[darkMode ? 'deleteIssueVariant-darkmode' : 'deleteIssueVariant-lightmode']"
+                            @click="deleteIssueVariant(issueVar.primaryID)">-</button>
+                    </td>
+                </tr>
+                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                    id="row-1">
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        ...</td>
+                        <input type="text" v-model="newNameIV"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
                     <td
                         :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
-                        ...</td>
+                        <input type="text" v-model="newPropertiesIV"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
                     <td
                         :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                        ...</td>
+                        <input type="text" v-model="newStateIV"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
                     <td
                         :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
-                        ...</td>
+                        <input type="text" v-model="newAmountIV"
-                    <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
+                            v-model="newPriceIV"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="[darkMode ? 'saveIssueVariant-darkmode' : 'saveIssueVariant-lightmode']"
+                            @click="addIssueVariant()">Save</button> <button
+                            :class="[darkMode ? 'deleteLastIssueVariant-darkmode' : 'deleteLastIssueVariant-lightmode']"
+                            @click="deleteNewRow()">-</button>
+                    </td>
                 </tr>
             </tbody>
         </table>
-    </div>
+    </section>
+    <section v-if="editable && !addBool" id="editIssueVariant">
+        <button :class="[darkMode ? 'editIssueVariant-darkmode' : 'editIssueVariant-lightmode']"
+            @click="addChecklistRow()">+</button>
+    </section>
+    <section v-if="addBool"
+        :class="['issue-variant-list-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
+        <table class="data-table" id="issue-variants-table">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                        Properties</th>
+                    <th
+                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        State</th>
+                    <th
+                        :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                        Amount</th>
+                    <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
+                </tr>
+                <tr v-for="(newIV, index) in newVariants" :key="index"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        <input type="text" v-model="newIV.name"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td
+                        :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                        <input type="text" v-model="newIV.properties"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        <input type="text" v-model="newIV.state"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td
+                        :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                        <input type="text" v-model="newIV.amount"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
+                            v-model="newIV.price"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="[darkMode ? 'deleteLastIssueVariant-darkmode' : 'deleteLastIssueVariant-lightmode']"
+                            @click="deleteIssueVariantFromNewTodos(index)">-</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+    <section v-if="addBool" id="editIssueVariant">
+        <button :class="[darkMode ? 'editIssueVariant-darkmode' : 'editIssueVariant-lightmode']"
+            @click="addRowForNewIVs()">+</button>
+    </section>
+    <section v-if="addBool" id="saveNewIssueVariant">
+        <button :class="[darkMode ? 'saveNewIssueVariant-darkmode' : 'saveNewIssueVariant-lightmode']"
+            @click="addIV()">Save</button>
+    </section>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } 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 addBool = computed(() => store.state.new);
+const editable = computed(() => store.state.editable);
+
+const newName = computed(() => store.state.newNameII);
+const newType = computed(() => store.state.newTypeII);
+const newState = computed(() => store.state.newStateII);
+const newAmount = computed(() => store.state.newAmountII);
+const newProperties = computed(() => store.state.newPropertiesII);
+const chosenIssueId = computed(() => store.state.chosenIssueId);
 
 const darkMode = ref(true)
+const addRow = ref(false);
+const issueVariants = ref([])
+const issue = ref({})
+const issues = ref([])
+const newNameIV = ref('');
+const newAmountIV = ref('');
+const newStateIV = ref('');
+const newPropertiesIV = ref('');
+const newPriceIV = ref('');
+const newVariants = reactive([]);
+
+// delete new todo row
+const deleteNewRow = () => {
+    newNameIV.value = '';
+    newAmountIV.value = '';
+    newPropertiesIV.value = '';
+    newStateIV.value = '';
+    newPriceIV.value = '';
+    addRow.value = false;
+}
+
+const goToChosenIssueVariant = (id) => {
+    store.commit('setChosenIssueVariant', id);
+    store.commit('changeToIssueItemVariant');
+};
+
+const deleteIssueVariantFromNewTodos = (index) => {
+    newVariants.splice(index, 1);
+}
+
+// add issue variant
+const addIV = async () => {
+    // check if all input data is valid
+    if (newName.value.trim() === "") {
+        alert("Please add an issue name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(issues.value.length == null)) {
+            // check if issue name already exists
+            issues.value.forEach(i => {
+                if (i.name === newName.value) {
+                    counter += 1;
+                }
+            });
+            if (counter >= 1) {
+                alert("This issue name already exists. Please choose an unique issue name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    let allFine = true;
+    newVariants.forEach(variant => {
+        if (variant.name.length === 0) {
+            alert(`Please choose a name for all variants.`);
+            allFine = false
+        }
+    })
+    if (!allFine) {
+        return
+    }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addII`,
+            {
+                name: newName.value,
+                type: newType.value,
+                state: newState.value,
+                amount: newAmount.value,
+                properties: newProperties.value,
+            });
+        store.commit('resetStore');
+        store.commit('changeToIssueItemList');
+        newVariants.forEach(async variant => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addIssueVariant`,
+                    {
+                        issueID: response.data,
+                        name: variant.name,
+                        properties: variant.properties,
+                        state: variant.state,
+                        amount: variant.amount,
+                        price: variant.price,
+                    });
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        })
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new row of variant for the new issue
+const addRowForNewIVs = async () => {
+    newVariants.push({
+        issueID: chosenIssueId.value,
+        name: '',
+        properties: '',
+        state: '',
+        amount: '',
+        price: ''
+    });
+}
+
+//update data
+const updateIssueVariant = async (todo) => {
+    if (todo.name.length === 0) {
+        alert(`Please add the missing variant name!`);
+        return;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateIssueVariant`,
+            {
+                primaryID: todo.primaryID,
+                issueID: todo.issueID,
+                name: todo.name,
+                properties: todo.properties,
+                asset: todo.asset,
+                state: todo.state,
+                amount: todo.amount,
+                price: todo.price,
+            }
+        );
+        await getIssueById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new issue variant
+const addIssueVariant = async () => {
+    // check if all input data is valid
+    if (newNameIV.value.length === 0) {
+        alert("Please choose a name for the new issue variant!");
+        return;
+    }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addIssueVariant`,
+            {
+                issueID: chosenIssueId.value,
+                name: newNameIV.value,
+                properties: newPropertiesIV.value,
+                state: newStateIV.value,
+                amount: newAmountIV.value,
+                price: newPriceIV.value,
+            });
+        addRow.value = false;
+        await getIssueVariantsById();
+        newNameIV.value = '';
+        newPropertiesIV.value = '';
+        newStateIV.value = '';
+        newAmountIV.value = '';
+        newPriceIV.value = '';
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new row for the issue variant
+const addChecklistRow = async () => {
+    if (addRow.value) {
+        alert('Please confirm the last added row first.')
+        return
+    }
+    addRow.value = true
+}
+
+// get issue variants from id
+const getIssueVariantsById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIVs/${chosenIssueId.value}`
+            );
+            issueVariants.value = response.data;
+        } catch (err) {
+            // console.log(err.response.statusText);
+            console.log(err.response);
+        }
+    }
+}
+
+// get issue from id
+const getIssueById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueItem/${chosenIssueId.value}`
+            );
+            issue.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+const deleteIssueVariant = async (id) => {
+    if (confirm("Do you really want to delete this issue variant? It cannot be undone!")) {
+        try {
+            await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteIssueVariant/${id}`);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getIssueVariantsById();
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1000);
+}
+
+//get all issue
+const getAllIssues = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssues`);
+        issues.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getIssueVariantsById();
+    getIssueById();
+    triggerBackendCallsWithDelay(getAllIssues);
+});
 </script>
 
 <script>
@@ -55,22 +429,42 @@ export default {
 <style scoped>
 .data {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-start;
-    justify-content: center;
+    padding: 0 0.625rem;
-    align-self: stretch;
+    border-radius: 0.3125rem;
-    width: 100%;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-    padding: 1.25rem 1.875rem;
+    letter-spacing: 5%;
-    gap: 1.25rem;
+    font: 400 0.75rem/250% Overpass, sans-serif;
-    border-radius: 0.625rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
-.div-darkmode {
+.saveIssueVariant-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 3.25rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.saveIssueVariant-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 3.25rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.section-darkmode {
     background-color: #2c2c2c;
 }
 
-.div-lightmode {
+.section-lightmode {
     background-color: #fff;
 }
 
@@ -90,6 +484,64 @@ export default {
     gap: 0.625rem;
 }
 
+.deleteLastIssueVariant-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 8rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deleteLastIssueVariant-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 8rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.editIssueVariant-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 0.825rem 0.7rem;
+    width: 4%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.editIssueVariant-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    margin-left: 15rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+    border-radius: 0.625rem;
+}
+
+.input {
+    border: none;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
@@ -108,6 +560,38 @@ export default {
     border-top: 0.0625rem solid #8e8e8e;
 }
 
+.deleteIssueVariant-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 8rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deleteIssueVariant-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 8rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.issue-variant-list-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
 th,
 td {
     height: 1.875rem;
@@ -131,8 +615,58 @@ th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.deleteIssueVariant-darkmode:hover,
+.deleteLastIssueVariant-darkmode:hover,
+
+.saveIssueVariant-darkmode:hover,
+.editIssueVariant-darkmode:hover,
+.saveNewIssueVariant-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.deleteIssueVariant-lightmode:hover,
+.deleteLastIssueVariant-lightmode:hover,
+
+.saveIssueVariant-lightmode:hover,
+.editIssueVariant-lightmode:hover,
+.saveNewIssueVariant-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+.saveNewIssueVariant-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);
+}
+
+.saveNewIssueVariant-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);
+}
+
+#saveNewIssueVariant {
+    text-align: center;
+}
+
+#editIssueVariant {
+    text-align: right;
+}
+
 .Properties {
-    width: 30%;
+    width: 25%;
 }
 
 .Properties-darkmode {
@@ -144,7 +678,7 @@ th {
 }
 
 .Name {
-    width: 30%;
+    width: 20%;
 }
 
 .Name-darkmode {
@@ -180,7 +714,8 @@ th {
 }
 
 .Price {
-    width: 10%;
+    width: 25%;
+    display: flex;
 }
 
 .label {
@@ -201,4 +736,9 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
 </style>

components/server/MaintenanceVisitsInstance.vue

@@ -129,7 +129,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 95%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
 }

components/server/MaintenanceVisitsTemplate.vue

@@ -138,6 +138,7 @@ const confirmDeleteMVT = async () => {
             try {
                 await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteMaintenanceVisitTemplate/${chosenMVTId.value}`);
                 store.commit('undoDelete');
+                store.commit('resetStore');
                 store.commit('changeToTemplatelist');
             } catch (err) {
                 console.log(err.response.statusText);

components/server/NetworkSpecifications.vue

@@ -67,7 +67,7 @@
         </div>
     </section>
     <section v-if="addBool" id="saveNewItem">
-        <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Safe</button>
+        <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Save</button>
     </section>
 </template>
     

components/server/OrderingInformation.vue

@@ -1,5 +1,5 @@
 <template>
-    <section :class="['ordering-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="!addBool" :class="['ordering-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="ordering">Ordering information:
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-customer">
@@ -16,30 +16,271 @@
                                 Price</th>
                             <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                         </tr>
-                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <tr v-for="info in orderingInfo" :key="info.primaryID"
+                            :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td v-if="!editable"
+                                :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
+                                {{ info.article }}</td>
+                            <td v-if="editable"
+                                :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
+                                <input type="text" v-model="info.article" @change="updateOrderingInfo(info)"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable"
+                                :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                                {{ info.amount }}</td>
+                            <td v-if="editable"
+                                :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                                <input type="text" v-model="info.amount" @change="updateOrderingInfo(info)"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable"
+                                :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                                {{ info.price }}</td>
+                            <td v-if="editable"
+                                :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                                <input type="text" v-model="info.price" @change="updateOrderingInfo(info)"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
+        info.comment }}</td>
+                            <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="info.comment" @change="updateOrderingInfo(info)"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                                    :class="[darkMode ? 'deleteOrderingInfo-darkmode' : 'deleteOrderingInfo-lightmode']"
+                                    @click="deleteOrderingInfo(info.primaryID)">-</button>
+                            </td>
+                        </tr>
+                        <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                            id="row-1">
                             <td
                                 :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newArticle"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
                             <td
                                 :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newAmount"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
                             <td
                                 :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
-                                ...</td>
+                                <input type="text" v-model="newPrice"
-                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
+                                    v-model="newComment"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                                    :class="[darkMode ? 'saveOrderingInfo-darkmode' : 'saveOrderingInfo-lightmode']"
+                                    @click="addOrderingInfo()">Save</button> <button
+                                    :class="[darkMode ? 'deleteLastOrderingInfo-darkmode' : 'deleteLastOrderingInfo-lightmode']"
+                                    @click="deleteNewRow()">-</button>
+                            </td>
                         </tr>
                     </tbody>
                 </table>
             </div>
         </div>
     </section>
+    <section v-if="editable && !addBool" id="editOrderingInfo">
+        <button :class="[darkMode ? 'editOrderingInfo-darkmode' : 'editOrderingInfo-lightmode']"
+            @click="addChecklistRow()">+</button>
+    </section>
+    <section v-if="addBool" :class="['ordering-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="ordering">Ordering information:
+            <div class="asset-data">
+                <table class="data-table" id="asset-table-no-client">
+                    <tbody>
+                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                            <th
+                                :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
+                                Article</th>
+                            <th
+                                :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                                Amount</th>
+                            <th
+                                :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                                Price</th>
+                            <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                        </tr>
+                        <tr v-for="(newOI, index) in newOIs" :key="index"
+                            :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
+                                <input type="text" v-model="newOI.article" @change="updateOI()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td
+                                :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                                <input type="text" v-model="newOI.amount" @change="updateOI()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td
+                                :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                                <input type="text" v-model="newOI.price" @change="updateOI()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newOI.comment" @change="updateOI()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                                    :class="[darkMode ? 'deleteOrderingInfo-darkmode' : 'deleteOrderingInfo-lightmode']"
+                                    @click="deleteOIFromNewTodos(index)">-</button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" id="editOrderingInfo">
+        <button :class="[darkMode ? 'editOrderingInfo-darkmode' : 'editOrderingInfo-lightmode']"
+            @click="addRowForNewOI()">+</button>
+    </section>
 </template>
 
 
 <script setup>
-import { ref } from 'vue';
+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 addBool = computed(() => store.state.new);
+const editable = computed(() => store.state.editable);
+const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
+
+const addRow = ref(false);
+const orderingInfo = ref([])
+const newArticle = ref('');
+const newAmount = ref('');
+const newPrice = ref('');
+const newComment = ref('');
+
+const newOIs = reactive([]);
 const darkMode = ref(true)
+
+// delete new todo row
+const deleteNewRow = () => {
+    newArticle.value = '';
+    newAmount.value = '';
+    newPrice.value = '';
+    newComment.value = '';
+    addRow.value = false;
+}
+
+const deleteOIFromNewTodos = (index) => {
+    newOIs.splice(index, 1);
+}
+
+// add new ordering info
+const addOrderingInfo = async () => {
+    // check if all input data is valid
+    if (newAmount.value.length === 0 && newArticle.value.length === 0 && newPrice.value.length === 0 && newComment.value.length === 0) {
+        alert(`Please add some data in the ordering info row!`);
+        return;
+    }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addOrderingInfo`,
+            {
+                issueSlipID: chosenIssueSlipId.value,
+                article: newArticle.value,
+                amount: newAmount.value,
+                price: newPrice.value,
+                comment: newComment.value,
+            });
+        addRow.value = false;
+        await getOIById();
+        newArticle.value = '';
+        newAmount.value = '';
+        newPrice.value = '';
+        newComment.value = '';
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update ordering info fields in the store
+const updateOI = () => {
+    const infos = {
+        ois: newOIs,
+    };
+    store.commit('updateOrderingInfoComponent', infos);
+}
+
+// add new row of ordering info
+const addRowForNewOI = async () => {
+    newOIs.push({
+        issueSlipID: -1,
+        article: '',
+        amount: '',
+        price: '',
+        comment: ''
+    });
+}
+
+//update data
+const updateOrderingInfo = async (info) => {
+    if (info.amount.length === 0 && info.article.length === 0 && info.price.length === 0 && info.comment.length === 0) {
+        alert(`Please add some data in the ordering info row!`);
+        return;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateOrderingInfo`,
+            {
+                primaryID: info.primaryID,
+                issueSlipID: info.issueSlipID,
+                article: info.article,
+                amount: info.amount,
+                price: info.price,
+                comment: info.comment,
+            }
+        );
+        await getOIById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new row for the ordering info
+const addChecklistRow = async () => {
+    if (addRow.value) {
+        alert('Please confirm the last added row first.')
+        return
+    }
+    addRow.value = true
+}
+
+// get ordering info from id
+const getOIById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getOrderingInfo/${chosenIssueSlipId.value}`
+            );
+            orderingInfo.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+const deleteOrderingInfo = async (id) => {
+    if (confirm("Do you really want to delete this ordering info? It cannot be undone!")) {
+        try {
+            await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteOrderingInfo/${id}`);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } 
+    await getOIById();
+}
+
+onMounted(() => {
+    getOIById();
+});
 </script>
 
 <script>
@@ -70,6 +311,31 @@ export default {
     background-color: #fff;
 }
 
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.input {
+    border: none;
+}
+
 .label {
     letter-spacing: 5%;
     font: 400 1rem/1.875rem Overpass, sans-serif;
@@ -194,5 +460,116 @@ th {
 
 .Comments {
     width: 50%;
+    display: flex;
+}
+
+.deleteOrderingInfo-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 24.8rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deleteLastOrderingInfo-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 2rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.editOrderingInfo-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 0.825rem 0.7rem;
+    width: 4%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.editOrderingInfo-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    margin-left: 15rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+    border-radius: 0.625rem;
+}
+
+.saveOrderingInfo-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 19rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.saveOrderingInfo-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 19rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deleteOrderingInfo-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 24.8rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deleteLastOrderingInfo-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 2rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deleteOrderingInfo-darkmode:hover,
+.deleteLastOrderingInfo-darkmode:hover,
+
+.saveOrderingInfo-darkmode:hover,
+.editOrderingInfo-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.deleteOrderingInfo-lightmode:hover,
+.deleteLastOrderingInfo-lightmode:hover,
+
+.saveOrderingInfo-lightmode:hover,
+.editOrderingInfo-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#editOrderingInfo {
+    text-align: right;
 }
 </style>

components/server/ProductionOrdersInstance.vue

@@ -135,7 +135,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 95%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
 }

components/server/ProductionOrdersTemplate.vue

@@ -144,6 +144,7 @@ const confirmDeletePOT = async () => {
             try {
                 await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteProductionOrderTemplate/${chosenPOTId.value}`);
                 store.commit('undoDelete');
+                store.commit('resetStore');
                 store.commit('changeToTemplatelist');
             } catch (err) {
                 console.log(err.response.statusText);

components/server/Solution.vue

@@ -277,6 +277,7 @@ const confirmDeleteSolution = async () => {
             try {
                 await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteSolution/${chosenSolutionId.value}`);
                 store.commit('undoDelete');
+                store.commit('resetStore');
                 store.commit('changeToSolutionlist');
             } catch (err) {
                 console.log(err.response.statusText);

components/server/SolutionChecklist.vue

@@ -137,7 +137,7 @@
             @click="addRowForNewSol()">+</button>
     </section>
     <section v-if="addBool" id="saveNewSol">
-        <button :class="[darkMode ? 'saveNewSol-darkmode' : 'saveNewSol-lightmode']" @click="addSol()">Safe</button>
+        <button :class="[darkMode ? 'saveNewSol-darkmode' : 'saveNewSol-lightmode']" @click="addSol()">Save</button>
     </section>
 </template>
 

components/server/TemplateChecklist.vue

@@ -126,7 +126,7 @@
                     <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
                             v-model="newT.comments"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
-                            :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
+                            :class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
                             @click="deletePOTTodoFromNewTodos(index)">-</button>
                     </td>
                 </tr>
@@ -138,7 +138,7 @@
             @click="addRowForNewPOT()">+</button>
     </section>
     <section v-if="addBool" id="saveNewPOT">
-        <button :class="[darkMode ? 'saveNewPOT-darkmode' : 'saveNewPOT-lightmode']" @click="addPOT()">Safe</button>
+        <button :class="[darkMode ? 'saveNewPOT-darkmode' : 'saveNewPOT-lightmode']" @click="addPOT()">Save</button>
     </section>
 </template>
   
@@ -619,7 +619,6 @@ th {
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
-
 .savePOTTodos-darkmode {
     background: #212121;
     color: #fff;

components/server/TemplateChecklistMVT.vue

@@ -138,7 +138,7 @@
             @click="addRowForNewMVT()">+</button>
     </section>
     <section v-if="addBool" id="saveNewMVT">
-        <button :class="[darkMode ? 'saveNewMVT-darkmode' : 'saveNewMVT-lightmode']" @click="addMVT()">Safe</button>
+        <button :class="[darkMode ? 'saveNewMVT-darkmode' : 'saveNewMVT-lightmode']" @click="addMVT()">Save</button>
     </section>
 </template>
   

components/server/UserAccount.vue

@@ -99,7 +99,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     border-radius: 0.625rem;
     gap: 1.25rem;
 }

components/server/UserAppearance.vue

@@ -70,7 +70,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     border-radius: 0.625rem;
     gap: 1.25rem;
 }

components/server/UserProfile.vue

@@ -100,7 +100,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     border-radius: 0.625rem;
     gap: 1.25rem;
 }

documentation/.$Datenbankmodell.drawio.bkp

@@ -1,6 +1,6 @@
-<mxfile host="Electron" modified="2024-02-14T10:28:35.536Z" 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="_zOGEdVgp7g5JHBy-mYE" version="22.0.3" type="device" pages="2">
+<mxfile host="Electron" modified="2024-02-27T19:18:30.556Z" 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="pTIMz7977P7LLgTl7RJZ" version="22.0.3" type="device" pages="2">
   <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
-    <mxGraphModel dx="393" dy="2849" 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="395" 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" />
@@ -580,7 +580,7 @@
         <mxCell id="WukdXvazNq34soQIU5Al-108" value="task" 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="WukdXvazNq34soQIU5Al-103" vertex="1">
           <mxGeometry y="150" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-109" value="comment" 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="WukdXvazNq34soQIU5Al-103" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-109" value="comments" 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="WukdXvazNq34soQIU5Al-103" vertex="1">
           <mxGeometry y="180" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-128" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-126" target="DauqCNUrC7Z9yIe88X-r-22" edge="1">

documentation/Datenbankmodell.drawio

@@ -1,6 +1,6 @@
-<mxfile host="Electron" modified="2024-02-27T19:18:30.556Z" 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="pTIMz7977P7LLgTl7RJZ" version="22.0.3" type="device" pages="2">
+<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">
   <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
-    <mxGraphModel dx="395" 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="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">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
@@ -395,7 +395,7 @@
           <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="540" as="geometry" />
+          <mxGeometry x="2040" y="-560" width="140" height="840" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-16" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
@@ -421,33 +421,63 @@
         <mxCell id="WukdXvazNq34soQIU5Al-21" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="240" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-23" value="supplierRequest" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-14" value="deliveryAddress" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="270" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-32" value="supplierOffer" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-23" value="supplierRequestDate" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="300" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-33" value="customerOffer" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-5" value="supplierRequest" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="330" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-34" value="customerOrder" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-32" value="supplierOfferDate" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="360" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-35" value="supplierOrder" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-6" value="supplierOffer" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="390" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-36" value="ingress" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-33" value="clientOfferDate" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="420" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-37" value="egress" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-7" value="clientOffer" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="450" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-38" value="ingressBill" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-34" value="clientOrderDate" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="480" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-39" value="egressBill" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-8" value="clientOrder" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="510" width="140" height="30" as="geometry" />
         </mxCell>
+        <mxCell id="WukdXvazNq34soQIU5Al-35" value="supplierOrderDate" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="540" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-9" value="supplierOrder" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="570" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="WukdXvazNq34soQIU5Al-36" value="ingressDate" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="600" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-10" value="ingress" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="630" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-11" value="egressDate" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="660" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="WukdXvazNq34soQIU5Al-37" value="egress" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="690" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-12" value="ingressBillDate" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="720" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="WukdXvazNq34soQIU5Al-38" value="ingressBill" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="750" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-13" value="egressBillDate" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="780" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="WukdXvazNq34soQIU5Al-39" value="egressBill" 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="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="810" width="140" height="30" as="geometry" />
+        </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-40" value="orderingInfoIssueSlips" 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="2220" y="-440" width="140" height="210" as="geometry" />
         </mxCell>
@@ -470,7 +500,7 @@
           <mxGeometry y="180" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-48" value="issues" 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="120" width="140" height="210" as="geometry" />
+          <mxGeometry x="2040" y="400" width="140" height="210" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-49" 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="WukdXvazNq34soQIU5Al-48" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
@@ -491,7 +521,7 @@
           <mxGeometry y="180" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-56" value="issueVariants" 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="2220" y="180" width="140" height="240" as="geometry" />
+          <mxGeometry x="2220" y="460" width="140" height="240" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-57" 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="WukdXvazNq34soQIU5Al-56" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />

pages/issueItems.vue

@@ -1,7 +1,7 @@
 <template>
     <section id="content">
         <div id="content-header">
-            <router-link to="/issueSlips" class="button" id="issueSlips-button">
+            <router-link to="/issueSlips" class="button" id="issueSlips-button" @click="defaultIssueSlipPage()">
                 <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue slips</h1>
             </router-link>
             &nbsp;
@@ -20,11 +20,12 @@
             &nbsp;
             &nbsp;
             &nbsp;
-            <router-link to="/issueItems" class="button" id="issues-button">
+            <router-link to="/issueItems" class="button" id="issues-button" @click="defaultIssuePage()">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue Items</h1>
+                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
             </router-link>
         </div>
         <div id="content-body">
+            <IssueStateSearch v-if="onIssueItemList" />
             <IssueTable v-if="onIssueItemList"/>
             <Issue v-if="onIssueItem"/>
             <IssueVariants v-if="onIssueItem"/>
@@ -37,10 +38,18 @@
 <script setup>
 import { ref } from 'vue';
 
+import IssueStateSearch from "../components/IssueStateSearch.vue";
 import IssueTable from "../components/server/IssueTable.vue";
 import Issue from "../components/server/Issue.vue";
 import IssueVariants from "../components/server/IssueVariants.vue";
 import IssueVariant from "../components/server/IssueVariant.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const onIssueItemList = computed(() => store.state.onIssueItemList);
+const onIssueItem = computed(() => store.state.onIssueItem);
+const onIssueItemVariant = computed(() => store.state.onIssueItemVariant);
 
 definePageMeta({
     layout: 'default',
@@ -49,10 +58,15 @@ definePageMeta({
 
 const darkMode = ref(true)
 
-// to render the right components
+const defaultIssueSlipPage = () => {
-const onIssueItem = ref(false)
+  store.commit('resetStore');
-const onIssueItemList = ref(true)
+  store.commit('changeToIssueSliplist')
-const onIssueItemVariant = ref(false)
+}
+
+const defaultIssuePage = () => {
+  store.commit('resetStore');
+  store.commit('changeToIssueItemList')
+}
 </script>
   
 <script>
@@ -124,4 +138,4 @@ export default {
     margin-bottom: 0.625rem;
     border-radius: 0.625rem;
 }
-</style>
+</style>../components/IssueStateSearch.vue

pages/issueSlips.vue

@@ -1,7 +1,7 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <router-link to="/issueSlips" class="button" id="issueSlips-button">
+      <router-link to="/issueSlips" class="button" id="issueSlips-button" @click="defaultIssueSlipPage()">
         <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue slips</h1>
       </router-link>
       &nbsp;
@@ -20,8 +20,8 @@
       &nbsp;
       &nbsp;
       &nbsp;
-      <router-link to="/issueItems" class="button" id="issues-button">
+      <router-link to="/issueItems" class="button" id="issues-button" @click="defaultIssuePage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue Items</h1>
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
       </router-link>
     </div>
     <div id="content-body">
@@ -45,6 +45,13 @@ import IssueSlipTableNoCustomer from "../components/server/IssueSlipTableNoCusto
 import IssueSlip from "../components/server/IssueSlip.vue";
 import OrderingInformation from "../components/server/OrderingInformation.vue";
 import Accounting from "../components/server/Accounting.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const onIssueSliplist = computed(() => store.state.onIssueSliplist);
+const onCustomerIssueSliplist = computed(() => store.state.onCustomerIssueSliplist);
+const onIssueSlip = computed(() => store.state.onIssueSlip);
 
 definePageMeta({
   layout: 'default',
@@ -53,10 +60,15 @@ definePageMeta({
 
 const darkMode = ref(true)
 
-// to render the right components
+const defaultIssueSlipPage = () => {
-const onIssueSliplist = ref(true)
+  store.commit('resetStore');
-const onCustomerIssueSliplist = ref(false)
+  store.commit('changeToIssueSliplist')
-const onIssueSlip = ref(false)
+}
+
+const defaultIssuePage = () => {
+  store.commit('resetStore');
+  store.commit('changeToIssueItemList')
+}
 </script>
 
 <script>

plugins/vuex.js

@@ -79,6 +79,47 @@ const store = createStore({
             newUserSol: '',
             newDescriptionSol: '',
             newNotesSol: '',
+
+            onIssueSliplist: true,
+            onCustomerIssueSliplist: false,
+            onIssueSlip: false,
+            chosenIssueSlipId: -1,
+            newTicketNoIS: '',
+            newCustomerIdIS: '',
+            newCustomerIS: '',
+            newNotesIS: '',
+            newUserIS: '',
+            newDeliveryAddressIS: '',
+            newOIs: [],
+            newSupplierRequestDateIS: '',
+            newSupplierRequestIS: '',
+            newSupplierOfferDateIS: '',
+            newSupplierOfferIS: '',
+            newClientOfferDateIS: '',
+            newClientOfferIS: '',
+            newClientOrderDateIS: '',
+            newClientOrderIS: '',
+            newSupplierOrderDateIS: '',
+            newSupplierOrderIS: '',
+            newIngressDateIS: '',
+            newIngressIS: '',
+            newEgressDateIS: '',
+            newEgressIS: '',
+            newIngressBillDateIS: '',
+            newIngressBillIS: '',
+            newEgressBillDateIS: '',
+            newEgressBillIS: '',
+
+            onIssueItemList: true,
+            onIssueItem: false,
+            onIssueItemVariant: false,
+            chosenIssueId: -1,
+            newNameII: '',
+            newTypeII: '',
+            newStateII: '',
+            newAmountII: '',
+            newPropertiesII: '',
+            chosenIssueVariantId: -1,
         };
     },
     mutations: {
@@ -275,6 +316,40 @@ const store = createStore({
             state.onSolution = true
         },
 
+        // functions to change the issue slip pages
+        changeToIssueSliplist(state) {
+            state.onIssueSliplist = true
+            state.onCustomerIssueSliplist = false
+            state.onIssueSlip = false
+        },
+        changeToCustomerIssueSliplist(state) {
+            state.onIssueSliplist = false
+            state.onCustomerIssueSliplist = true
+            state.onIssueSlip = false
+        },
+        changeToIssueSlip(state) {
+            state.onIssueSliplist = false
+            state.onCustomerIssueSliplist = false
+            state.onIssueSlip = true
+        },
+
+        // functions to change the issue pages
+        changeToIssueItemList(state) {
+            state.onIssueItemList = true
+            state.onIssueItem = false
+            state.onIssueItemVariant = false
+        },
+        changeToIssueItem(state) {
+            state.onIssueItemList = false
+            state.onIssueItem = true
+            state.onIssueItemVariant = false
+        },
+        changeToIssueItemVariant(state) {
+            state.onIssueItemList = false
+            state.onIssueItem = false
+            state.onIssueItemVariant = true
+        },
+
         // functions to update the asset
         updateAssetComponent(state, asset) {
             state.newAssetName = asset.assetName
@@ -336,6 +411,52 @@ const store = createStore({
             state.newUserSol = sol.user
         },
 
+        // functions to update the issue slip component
+        updateIssueSlipComponent(state, is) {
+            state.newTicketNoIS = is.ticketNo
+            state.newCustomerIdIS = is.customerId
+            state.newCustomerIS = is.customer
+            state.newNotesIS = is.notes
+            state.newUserIS = is.user
+            state.newDeliveryAddressIS = is.deliveryAddress
+        },
+        
+        // functions to update the accounting info component
+        updateOrderingInfoComponent(state, o) {
+            state.newOIs = o.ois
+        },
+
+        // functions to update the accounting component
+        updateAccountingComponent(state, is) {
+            state.newSupplierRequestDateIS = is.supplierRequestDate
+            state.newSupplierRequestIS = is.supplierRequest
+            state.newSupplierOfferDateIS = is.supplierOfferDate
+            state.newSupplierOfferIS = is.supplierOffer
+            state.newClientOfferDateIS = is.clientOfferDate
+            state.newClientOfferIS = is.clientOffer
+            state.newClientOrderDateIS = is.clientOrderDate
+            state.newClientOrderIS = is.clientOrder
+            state.newSupplierOrderDateIS = is.supplierOrderDate
+            state.newSupplierOrderIS = is.supplierOrder
+            state.newIngressDateIS = is.ingressDate
+            state.newIngressIS = is.ingress
+            state.newEgressDateIS = is.egressDate
+            state.newEgressIS = is.egress
+            state.newIngressBillDateIS = is.ingressBillDate
+            state.newIngressBillIS = is.ingressBill
+            state.newEgressBillDateIS = is.egressBillDate
+            state.newEgressBillIS = is.egressBill
+        },
+
+        // functions to update the issue component
+        updateIssueComponent(state, is) {
+            state.newNameII = is.name
+            state.newTypeII = is.type
+            state.newStateII = is.state
+            state.newAmountII = is.amount
+            state.newPropertiesII = is.properties
+        },
+
         // function to set the chosen asset
         setChosenAsset(state, id) {
             state.chosenAssetId = id
@@ -356,6 +477,21 @@ const store = createStore({
             state.chosenSolutionId = id
         },
 
+        // function to set the chosen issue slip
+        setChosenIssueSlip(state, id) {
+            state.chosenIssueSlipId = id
+        },
+
+        // function to set the chosen issue
+        setChosenIssue(state, id) {
+            state.chosenIssueId = id
+        },
+
+         // function to set the chosen issue variant
+         setChosenIssueVariant(state, id) {
+            state.chosenIssueVariantId = id
+        },
+
         // function to reset the pages
         resetStore(state) {
             state.editable = false
@@ -423,6 +559,43 @@ const store = createStore({
             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 = ''
         },
 
         // functions to (undo) delete an asset
@@ -462,6 +635,16 @@ const store = createStore({
             state.onSolutionlist = false
             state.onCustomerSolutionlist = false
             state.onSolution = true
+
+            // set the issue slips variables
+            state.onIssueSliplist = false
+            state.onCustomerIssueSliplist = false
+            state.onIssueSlip = true
+
+            // set the issue variables
+            state.onIssueItemList = false
+            state.onIssueItemVariant = false
+            state.onIssueItem = true
         },
     },
 });

server/api/addII.ts

@@ -0,0 +1,22 @@
+import { insertId, errorMsg } from "../middleware/issues";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return insertId
+})

server/api/addIssueSlip.ts

@@ -0,0 +1,22 @@
+import { insertId, errorMsg } from "../middleware/issueSlips";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return insertId
+})

server/api/addIssueVariant.ts

@@ -0,0 +1,21 @@
+import { errorMsg } from "../middleware/issues";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})

server/api/addOrderingInfo.ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../middleware/issueSlips";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteIV/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/issues";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteIssueItem/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/issues";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteIssueSlip/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/issueSlips";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteIssueVariant/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/issues";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteOrderingInfo/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/issueSlips";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return 
+})

server/api/deleteTodosOI/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/issueSlips";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/getAllIssueVariants.ts

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

server/api/getIVs/[id].ts

@@ -0,0 +1,22 @@
+import { issueVariants, errorMsg } from "../../middleware/issues";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return issueVariants
+})

server/api/getIssueItem/[id].ts

@@ -0,0 +1,22 @@
+import { issue, errorMsg } from "../../middleware/issues";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return issue
+})

server/api/getIssueSlip/[id].ts

@@ -0,0 +1,22 @@
+import { issueSlip, errorMsg } from "../../middleware/issueSlips";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return issueSlip
+})

server/api/getIssueVariant/[id].ts

@@ -0,0 +1,22 @@
+import { issueVariant, errorMsg } from "../../middleware/issues";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return issueVariant
+})

server/api/getOrderingInfo/[id].ts

@@ -0,0 +1,22 @@
+import { orderingInfo, errorMsg } from "../../middleware/issueSlips";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return orderingInfo
+})

server/api/getSelectedIssueSlipsByClient/[id].ts

@@ -0,0 +1,22 @@
+import { selectedIssueSlipsByClient, errorMsg } from "../../middleware/issueSlips";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedIssueSlipsByClient
+})

server/api/getSelectedIssueSlipsByTicketNo/[id].ts

@@ -0,0 +1,22 @@
+import { selectedIssueSlipsByTicketNo, errorMsg } from "../../middleware/issueSlips";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedIssueSlipsByTicketNo
+})

server/api/getSelectedIssuesByIssueName/[id].ts

@@ -0,0 +1,22 @@
+import { selectedIssuesByIssueName, errorMsg } from "../../middleware/issues";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedIssuesByIssueName
+})

server/api/getSelectedIssuesByState/[id].ts

@@ -0,0 +1,22 @@
+import { selectedIssuesByState, errorMsg } from "../../middleware/issues";
+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',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedIssuesByState
+})

server/api/updateConfigItem.ts

@@ -10,4 +10,5 @@ export default defineEventHandler(async (event) => {
     }
 
     setResponseStatus(event, 200)
+    return errorMsg
 })

server/api/updateIssueItem.ts

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

server/api/updateIssueSlip.ts

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

server/api/updateIssueVariant.ts

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

server/api/updateMVTTodo.ts

@@ -10,4 +10,5 @@ export default defineEventHandler(async (event) => {
     }
 
     setResponseStatus(event, 200)
+    return errorMsg
 })

server/api/updateMaintenanceVisitTemplate.ts

@@ -10,4 +10,5 @@ export default defineEventHandler(async (event) => {
     }
 
     setResponseStatus(event, 200)
+    return errorMsg
 })

server/api/updateOrderingInfo.ts

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

server/api/updatePOTTodo.ts

@@ -10,4 +10,5 @@ export default defineEventHandler(async (event) => {
     }
 
     setResponseStatus(event, 200)
+    return errorMsg
 })

server/api/updateProductionOrderTemplate.ts

@@ -10,4 +10,5 @@ export default defineEventHandler(async (event) => {
     }
 
     setResponseStatus(event, 200)
+    return errorMsg
 })

server/api/updateSolTodo.ts

@@ -10,4 +10,5 @@ export default defineEventHandler(async (event) => {
     }
 
     setResponseStatus(event, 200)
+    return errorMsg
 })

server/api/updateSolution.ts

@@ -10,4 +10,5 @@ export default defineEventHandler(async (event) => {
     }
 
     setResponseStatus(event, 200)
+    return errorMsg
 })

server/middleware/issueSlips.ts

@@ -3,12 +3,15 @@ import serversideConfig from '../../serversideConfig';
 import https from 'https';
 
 let issueSlips = [];
+let issueSlip = [];
+let selectedIssueSlipsByTicketNo = [];
+let selectedIssueSlipsByClient = [];
+let orderingInfo = [];
+let insertId = -1;
 let errorMsg = '';
 
 export default defineEventHandler(async (event) => {
 
-    if (event.path.startsWith("/api/getAllIssueSlips")) {
-
     const agent = new https.Agent({
         rejectUnauthorized: false,
     });
@@ -21,6 +24,8 @@ export default defineEventHandler(async (event) => {
         httpsAgent: agent
     });
 
+    if (event.path.startsWith("/api/getAllIssueSlips")) {
+
         // get all issue slips object from backend
         try {
             let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/issueSlips`);
@@ -46,6 +51,343 @@ export default defineEventHandler(async (event) => {
             }
         }
     }
+
+    if (event.path.startsWith("/api/getSelectedIssueSlipsByClient")) {
+        // get selected issue slips object by client from backend
+        let filteredClient = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredClient = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedIssueSlipsByCustomer/${filteredClient}`);
+            selectedIssueSlipsByClient = 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/getSelectedIssueSlipsByTicketNo")) {
+        // get selected issue slip object by issue slip from backend
+        let filteredIssueSlip = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredIssueSlip = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedIssueSlipsByTicketNumber/${filteredIssueSlip}`);
+            selectedIssueSlipsByTicketNo = 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/getIssueSlip")) {
+        // get issue slip object from backend
+        let issueSlipId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        issueSlipId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/issueSlip/${issueSlipId}`);
+            issueSlip = 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/deleteIssueSlip")) {
+        let issueSlipId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        issueSlipId = pathSegments[pathSegments.length - 1];
+
+        // delete the issue slip in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/issueSlip/${issueSlipId}`);
+        } 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/updateIssueSlip")) {
+        const body = await readBody(event)
+        // update the issue slip in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/issueSlip`, 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/addIssueSlip")) {
+        const body = await readBody(event)
+        // add the issue slip in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/issueSlip`, 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);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updateOrderingInfo")) {
+        const body = await readBody(event)
+        // update the ordering info in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/orderingInfoIssueSlips`, 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/getOrderingInfo")) {
+        // get ordering info 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}/orderingInfoIssueSlips/${itemId}`);
+            orderingInfo = 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/deleteOrderingInfo")) {
+        let oiId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        oiId = pathSegments[pathSegments.length - 1];
+
+        // delete the ordering info in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/orderingInfoIssueSlips/${oiId}`);
+        } 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/addOrderingInfo")) {
+        const body = await readBody(event)
+        // add the ordering info in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/orderingInfoIssueSlips`, 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/deleteTodosOI")) {
+        let oiId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        oiId = pathSegments[pathSegments.length - 1];
+
+        // delete the ordering info in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/orderingInfoIssueSlipsByIssueSlipId/${oiId}`);
+        } 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 { issueSlips, errorMsg };
+export { issueSlips, issueSlip, selectedIssueSlipsByClient, selectedIssueSlipsByTicketNo, insertId, orderingInfo, errorMsg };

server/middleware/issues.ts

@@ -3,12 +3,17 @@ import serversideConfig from '../../serversideConfig';
 import https from 'https';
 
 let issues = [];
+let allIssueVariants = [];
+let issue = {};
+let selectedIssuesByIssueName = [];
+let selectedIssuesByState = [];
+let issueVariants = [];
+let issueVariant = [];
+let insertId = -1;
 let errorMsg = '';
 
 export default defineEventHandler(async (event) => {
 
-    if (event.path.startsWith("/api/getAllIssues")) {
-
     const agent = new https.Agent({
         rejectUnauthorized: false,
     });
@@ -21,6 +26,8 @@ export default defineEventHandler(async (event) => {
         httpsAgent: agent
     });
 
+    if (event.path.startsWith("/api/getAllIssues")) {
+
         // get all issues object from backend
         try {
             let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/issues`);
@@ -46,6 +53,403 @@ export default defineEventHandler(async (event) => {
             }
         }
     }
+
+    if (event.path.startsWith("/api/getAllIssueVariants")) {
+
+        // get all issue variants object from backend
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/issueVariants`);
+            allIssueVariants = 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/getSelectedIssuesByIssueName")) {
+        // get selected issues object by issue name from backend
+        let filteredIssue = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredIssue = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedIssuesByIssueName/${filteredIssue}`);
+            selectedIssuesByIssueName = 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/getSelectedIssuesByState")) {
+        // get selected issues object by state from backend
+        let filteredIssue = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredIssue = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedIssuesByState/${filteredIssue}`);
+            selectedIssuesByState = 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/deleteIssueItem")) {
+        let issueId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        issueId = pathSegments[pathSegments.length - 1];
+
+        // delete the issue in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/issues/${issueId}`);
+        } 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/updateIssueItem")) {
+        const body = await readBody(event)
+        // update the issue in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/issues`, 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/getIssueItem")) {
+        // get issue object from backend
+        let issueId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        issueId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/issues/${issueId}`);
+            issue = 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/getIssueVariant")) {
+        // get issue variant object from backend
+        let issueVariantId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        issueVariantId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/issueVariants/${issueVariantId}`);
+            issueVariant = 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/addII")) {
+        const body = await readBody(event)
+        // add the issue in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/issues`, 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);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/addIssueVariant")) {
+        const body = await readBody(event)
+        // add the issue variant in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/issueVariants`, 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/updateIssueVariant")) {
+        const body = await readBody(event)
+        // update the issue variant in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/issueVariants`, 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/getIVs")) {
+        // get issue variants object from backend
+        let issueId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        issueId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedIssueVariantsByIssueId/${issueId}`);
+            issueVariants = 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/deleteIV")) {
+        let issueId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        issueId = pathSegments[pathSegments.length - 1];
+
+        // delete the issue variant in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/issueVariantsByIssueSlipId/${issueId}`);
+        } 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/deleteIssueVariant")) {
+        let issueId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        issueId = pathSegments[pathSegments.length - 1];
+
+        // delete the issue variant in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/issueVariants/${issueId}`);
+        } 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 { issues, errorMsg };
+export { issues, issueVariant, allIssueVariants, issueVariants, selectedIssuesByIssueName, selectedIssuesByState, issue, insertId, errorMsg };