fixed small bugs and made comment fields bigger

backend/models/maintenanceVisitsModel.js

@@ -32,7 +32,7 @@ export const getSelectedMaintenanceVisitsByChecklistname = async (selected, resu
 export const getSelectedMaintenanceVisitsByTemplate = async (selected, result) => {
   try {
     let sql = `SELECT * FROM maintenancevisits WHERE templateID = ? ORDER BY name ASC`;
-    const results = await ownConn.execute(sql, [id])
+    const results = await ownConn.execute(sql, [selected])
     result(null, results);
   }
   catch (err) {

backend/models/maintenanceVisitsTodosModel.js

@@ -61,7 +61,7 @@ export const updateMaintenanceVisitTodoById = async (data, result) => {
   try {
     const id = data.primaryID;
     let sql = `UPDATE maintenancevisittodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE primaryID = ?`;
-    const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, id])
+    const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, data.done, id])
     results.insertId = results.insertId.toString();
     result(null, results);
   }

components/Dashboard.vue

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

components/server/Accounting.vue

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

components/server/InstanceChecklist.vue

@@ -14,12 +14,12 @@
                         :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
                         Task</th>
                     <th
-                        :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '',  !darkMode && !addBool ? 'Comments-lightmode' : '']">
                         Comments</th>
                     <th v-if="!addBool" :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
                 </tr>
                 <tr v-for="todo in poiTodos" :key="todo.primaryID"
-                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ todo.rowID }}</td>
@@ -29,12 +29,10 @@
                     <td
                         :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
                         {{ todo.task }}</td>
-                    <td v-if="!editable"
+                    <td
-                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '',  !darkMode && !addBool ? 'Comments-lightmode' : '']">
-                        {{ todo.comments }}</td>
+                        <textarea type="text" v-model="todo.comments" :readonly="!editable" @change="updatePOITodo(todo)"
-                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
-                            type="text" v-model="todo.comments" @change="updatePOITodo(todo)"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
                     <td v-if="!addBool" :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input
                             @change="toggleTodo(todo)" type="checkbox" v-model="todo.done"
@@ -231,6 +229,7 @@ const addPOI = async () => {
                 notes: newNotesPOI.value,
             });
         store.commit('resetStore');
+        store.commit('deactivateSearch');
         store.commit('changeToInstancelist');
         store.commit('seeAllIcon');
         poiTodos.value.forEach(async todo => {
@@ -328,6 +327,14 @@ export default {
     gap: 0.625rem;
 }
 
+.table-row-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
 .saveNewPOI-darkmode {
     background: #2c2c2c;
     color: #fff;
@@ -391,6 +398,10 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+td {
+    height: 5rem;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -501,4 +512,10 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+textarea {
+    resize: none;
+    width: 20rem;
+    height: 5rem;
+}
 </style>

components/server/InstanceChecklistMVI.vue

@@ -14,12 +14,12 @@
                         :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
                         Task</th>
                     <th
-                        :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '', !darkMode && !addBool ? 'Comments-lightmode' : '']">
                         Comments</th>
                     <th v-if="!addBool" :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
                 </tr>
                 <tr v-for="todo in mviTodos" :key="todo.primaryID"
-                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ todo.rowID }}</td>
@@ -29,12 +29,11 @@
                     <td
                         :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
                         {{ todo.task }}</td>
-                    <td v-if="!editable"
+                    <td
-                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '',  !darkMode && !addBool ? 'Comments-lightmode' : '']">
-                        {{ todo.comments }}</td>
+                        <textarea type="text" v-model="todo.comments" :readonly="!editable"
-                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
+                            @change="updateMVITodo(todo)"
-                            type="text" v-model="todo.comments" @change="updateMVITodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
                     <td v-if="!addBool" :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input
                             @change="toggleTodo(todo)" type="checkbox" v-model="todo.done"
@@ -74,7 +73,7 @@ const newCustomerMVI = computed(() => store.state.newCustomerMVI);
 const newTemplateNotesMVI = computed(() => store.state.newTemplateNotesMVI);
 const newTypeMVI = computed(() => store.state.newTypeMVI);
 const newTimeSpentMVI = computed(() => store.state.newTimeSpentMVI);
-const newNotesMVI = computed(() => store.state.newNotes);
+const newNotesMVI = computed(() => store.state.newNotesMVI);
 const editable = computed(() => store.state.editable);
 
 const darkMode = ref('');
@@ -97,7 +96,12 @@ const getMVITodosById = async () => {
             const response = await Axios.get(
                 `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitTemplate/${chosenMVTId.value}`
             );
-            mviTodos.value = response.data;
+            const mviTodosComment = response.data;
+            // change the commets to comments
+            mviTodos.value = mviTodosComment.map(obj => {
+                const { commets: comments, ...rest } = obj;
+                return { ...rest, comments };
+            });
             store.commit('updateMaintenanceVisitInstanceTemplateID', chosenMVTId.value)
         } catch (err) {
             console.log(err.response.statusText);
@@ -107,7 +111,12 @@ const getMVITodosById = async () => {
             const response = await Axios.get(
                 `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitTemplate/${newTemplateIDMVI.value}`
             );
-            mviTodos.value = response.data;
+            const mviTodosComment = response.data;
+            // change the commets to comments
+            mviTodos.value = mviTodosComment.map(obj => {
+                const { commets: comments, ...rest } = obj;
+                return { ...rest, comments };
+            });
         } catch (err) {
             console.log(err.response.statusText);
         }
@@ -117,7 +126,7 @@ const getMVITodosById = async () => {
                 `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitInstance/${chosenMVIId.value}`
             );
             const mviTodosComment = response.data;
-            // change the comment und step field name to comments and rowID
+            // change the comment and step field name to comments and rowID
             mviTodos.value = mviTodosComment.map(obj => {
                 const { step: rowID, comment: comments, ...rest } = obj;
                 return { ...rest, rowID, comments };
@@ -231,6 +240,7 @@ const addMVI = async () => {
                 notes: newNotesMVI.value,
             });
         store.commit('resetStore');
+        store.commit('deactivateSearch');
         store.commit('changeToInstancelist');
         store.commit('seeAllIcon');
         mviTodos.value.forEach(async todo => {
@@ -328,6 +338,14 @@ export default {
     gap: 0.625rem;
 }
 
+.table-row-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
 .saveNewMVI-darkmode {
     background: #2c2c2c;
     color: #fff;
@@ -391,6 +409,10 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+td {
+    height: 5rem;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -501,4 +523,10 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+textarea {
+    resize: none;
+    width: 20rem;
+    height: 5rem;
+}
 </style>

components/server/IssueSlip.vue

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

components/server/MaintenanceVisitsInstance.vue

@@ -308,6 +308,7 @@ const confirmDeleteMVI = async () => {
             }
             store.commit('undoDelete');
             store.commit('resetStore');
+            store.commit('deactivateSearch');
             store.commit('changeToInstancelist');
             store.commit('seeAllIcon');
         } else {
@@ -472,6 +473,7 @@ onMounted(async () => {
     getSession();
     await getMVIById();
     await getMVTById();
+    triggerBackendCallsWithDelay(getUsers);
     triggerBackendCallsWithDelay(getCustomers);
 });
 </script>
@@ -685,4 +687,8 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
+
+.templateNotes {
+    padding-left: 1.8rem;
+}
 </style>

components/server/MaintenanceVisitsInstanceTable.vue

@@ -1,7 +1,7 @@
 <template>
     <section v-if="searchable" :class="['mvi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">State</div>
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
-        <input v-model="stateSearchFilter" @change="filterMVIByState()"
+        <input v-model="nameSearchFilter" @change="filterMVIByName()"
             :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
     </section>
     <section v-if="filtered" :class="['mvi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
@@ -18,8 +18,8 @@
                         :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         ID</th>
                     <th
-                        :class="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        Maintenance type</th>
+                        Name</th>
                     <th
                         :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
                         State</th>
@@ -42,8 +42,13 @@
                         </nuxt-link>
                     </td>
                     <td
-                        :class="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        {{ instance.maintenanceType }}</td>
+                        <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenMVI(instance.primaryID)">
+                            {{ instance.name }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
                         {{ instance.state }}</td>
@@ -74,14 +79,15 @@ const chosenMVTId = computed(() => store.state.chosenMVTId);
 const searchable = computed(() => store.state.searchable);
 const filtered = computed(() => store.state.filtered);
 const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
+const filteredUserTerm = computed(() => store.state.filteredUserTerm);
 const userSearchFilter = ref('');
-const stateSearchFilter = ref('');
+const nameSearchFilter = ref('');
 const maintenanceVisitInstances = ref([]);
 
 const darkMode = ref('');
 const mvt = ref({});
 const MVIByUser = ref([]);
-const MVIByState = ref([]);
+const MVIByName = ref([]);
 
 const goToChosenMVI = (id) => {
     store.commit('setChosenMIT', id);
@@ -109,14 +115,22 @@ const getMaintenanceVisitInstances = async () => {
 
 // update search term
 const updateSearchTerm = async () => {
-    stateSearchFilter.value = '';
+    nameSearchFilter.value = '';
     await getMaintenanceVisitInstances();
 }
 
 // update filter term
 const updateFilterTerm = async () => {
-    userSearchFilter.value = '';
+    if (filteredUserTerm.value) {
+        store.commit('activateFiltered');
+        userSearchFilter.value = getItem('logged-in-user-username');
+    } else {
+        userSearchFilter.value = '';
+    }
     await getMaintenanceVisitInstances();
+    if (filteredUserTerm.value) {
+        await filterInstancesByUser();
+    }
 }
 
 // get maintenance visit template from id
@@ -135,14 +149,14 @@ const getMVTById = async () => {
 }
 
 //get all instances based on the searched state
-const filterMVIByState = async () => {
+const filterMVIByName = async () => {
-    if (stateSearchFilter.value === '') {
+    if (nameSearchFilter.value === '') {
         await getMaintenanceVisitInstances();
     } else {
         try {
-            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVIByState/${stateSearchFilter.value}`);
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVIByName/${nameSearchFilter.value}`);
-            MVIByState.value = response.data;
+            MVIByName.value = response.data;
-            maintenanceVisitInstances.value = filterObjectsWithMatchingIds(maintenanceVisitInstances.value, MVIByState.value);
+            maintenanceVisitInstances.value = filterObjectsWithMatchingIds(maintenanceVisitInstances.value, MVIByName.value);
         } catch (err) {
             console.log(err.response.statusText);
         }
@@ -179,6 +193,11 @@ const getSession = async () => {
     }
 }
 
+const getAll = async () => {
+    store.commit('resetFilterSearch');
+    await getMaintenanceVisitInstances();
+}
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -190,7 +209,7 @@ function getItem(item) {
 watch(modeChanged, getSession)
 watch(searchable, updateSearchTerm);
 watch(filtered, updateFilterTerm);
-watch(notAllInstancesIcon, getMaintenanceVisitInstances);
+watch(notAllInstancesIcon, getAll);
 
 onMounted(async () => {
     getSession();
@@ -319,15 +338,15 @@ th {
     border-right: 0.0625rem solid #8e8e8e;
 }
 
-.MaintenanceType {
+.Name {
     width: 15%;
 }
 
-.MaintenanceType-darkmode {
+.Name-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
-.MaintenanceType-lightmode {
+.Name-lightmode {
     border-right: 0.0625rem solid #8e8e8e;
 }
 

components/server/ProductionOrdersInstance.vue

@@ -330,6 +330,7 @@ const confirmDeletePOI = async () => {
             }
             store.commit('undoDelete');
             store.commit('resetStore');
+            store.commit('deactivateSearch');
             store.commit('changeToInstancelist');
             store.commit('seeAllIcon');
         } else {

components/server/ProductionOrdersInstanceTable.vue

@@ -1,7 +1,7 @@
 <template>
     <section v-if="searchable" :class="['poi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">State</div>
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
-        <input v-model="stateSearchFilter" @change="filterPOIByState()"
+        <input v-model="nameSearchFilter" @change="filterPOIByName()"
             :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
     </section>
     <section v-if="filtered" :class="['poi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
@@ -17,6 +17,9 @@
                     <th
                         :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
                         Ticket No.</th>
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
                     <th
                         :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
                         Asset</th>
@@ -41,6 +44,14 @@
                             {{ instance.ticketNumber }}
                         </nuxt-link>
                     </td>
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenPOI(instance.ticketNumber)">
+                            {{ instance.name }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
                         <nuxt-link to="/assets" id="nuxt-link" class="button"
@@ -80,14 +91,15 @@ const chosenPOTId = computed(() => store.state.chosenPOTId);
 const searchable = computed(() => store.state.searchable);
 const filtered = computed(() => store.state.filtered);
 const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
+const filteredUserTerm = computed(() => store.state.filteredUserTerm);
 const userSearchFilter = ref('');
-const stateSearchFilter = ref('');
+const nameSearchFilter = ref('');
 const productionOrderInstances = ref([]);
 
 const darkMode = ref('');
 const pot = ref({});
 const POIByUser = ref([]);
-const POIByState = ref([]);
+const POIByName = ref([]);
 
 const goToChosenPOI = (id) => {
     store.commit('setChosenPOI', id);
@@ -115,14 +127,22 @@ const getProductionOrderInstances = async () => {
 
 // update search term
 const updateSearchTerm = async () => {
-    stateSearchFilter.value = '';
+    nameSearchFilter.value = '';
     await getProductionOrderInstances();
 }
 
 // update filter term
 const updateFilterTerm = async () => {
-    userSearchFilter.value = '';
+    if (filteredUserTerm.value) {
+        store.commit('activateFiltered');
+        userSearchFilter.value = getItem('logged-in-user-username');
+    } else {
+        userSearchFilter.value = '';
+    }
     await getProductionOrderInstances();
+    if (filteredUserTerm.value) {
+        await filterInstancesByUser();
+    }
 }
 
 // get production order template from id
@@ -157,14 +177,14 @@ const goToChosenAsset = async (name) => {
 };
 
 //get all instances based on the searched state
-const filterPOIByState = async () => {
+const filterPOIByName = async () => {
-    if (stateSearchFilter.value === '') {
+    if (nameSearchFilter.value === '') {
         await getProductionOrderInstances();
     } else {
         try {
-            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByState/${stateSearchFilter.value}`);
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByName/${nameSearchFilter.value}`);
-            POIByState.value = response.data;
+            POIByName.value = response.data;
-            productionOrderInstances.value = filterObjectsWithMatchingIds(productionOrderInstances.value, POIByState.value);
+            productionOrderInstances.value = filterObjectsWithMatchingIds(productionOrderInstances.value, POIByName.value);
         } catch (err) {
             console.log(err.response.statusText);
         }
@@ -201,6 +221,11 @@ const getSession = async () => {
     }
 }
 
+const getAll = async () => {
+    store.commit('resetFilterSearch');
+    await getProductionOrderInstances();
+}
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -212,7 +237,7 @@ function getItem(item) {
 watch(modeChanged, getSession)
 watch(searchable, updateSearchTerm);
 watch(filtered, updateFilterTerm);
-watch(notAllInstancesIcon, getProductionOrderInstances);
+watch(notAllInstancesIcon, getAll);
 
 onMounted(async () => {
     getSession();
@@ -307,7 +332,7 @@ th {
 }
 
 .TicketNo {
-    width: 15.83%;
+    width: 12.83%;
 }
 
 .TicketNo-darkmode {
@@ -318,9 +343,20 @@ th {
     border-right: 0.0625rem solid #8e8e8e;
 }
 
+.Name {
+    width: 18.83%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
 
 .Asset {
-    width: 31.66%;
+    width: 15.83%;
 }
 
 .Asset-darkmode {

components/server/TemplateChecklist.vue

@@ -17,7 +17,7 @@
                     <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                 </tr>
                 <tr v-for="todo in potTodos" :key="todo.primaryID"
-                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ todo.rowID }}
@@ -42,22 +42,15 @@
                         <input type="text" v-model="todo.task" @change="updatePOTTodo(todo)"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
-        todo.comments
+                        <textarea type="text" v-model="todo.comments" :readonly="!editable"
-    }}</td>
-                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text" v-model="todo.comments"
                             @change="updatePOTTodo(todo)"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>                    
-
+                        <button v-if="editable" :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
-                        <!-- <p><span id="spanElement"
-                                :class="['data-span', 'textarea', 'input-span', darkMode ? 'data-darkmode' : 'data-lightmode']"
-                                role="textbox" contenteditable></span></p> -->
-
-                        <button :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
                             @click="deletePOTTodo(todo.primaryID)">-</button>
                     </td>
                 </tr>
-                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                <tr v-if="editable && addRow" :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
                     id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
@@ -77,10 +70,10 @@
                         <input type="text" v-model="newTaskTodo"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
-                            v-model="newCommentsTodo"
+                        <textarea type="text" v-model="newCommentsTodo"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
-                            :class="[darkMode ? 'savePOTTodos-darkmode' : 'savePOTTodos-lightmode']"
+                        <button :class="[darkMode ? 'savePOTTodos-darkmode' : 'savePOTTodos-lightmode']"
                             @click="addPOTTodo()">Save</button> <button
                             :class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
                             @click="deleteNewRow()">-</button>
@@ -111,7 +104,7 @@
                     <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                 </tr>
                 <tr v-for="(newT, index) in newTodos" :key="index"
-                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ newT.rowID }}
@@ -130,10 +123,10 @@
                         <input type="text" v-model="newT.task"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <textarea type="text"
                             v-model="newT.comments"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
-                        <button :class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
+                        <button :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
                             @click="deletePOTTodoFromNewTodos(index)">-</button>
                     </td>
                 </tr>
@@ -573,6 +566,14 @@ export default {
     gap: 0.625rem;
 }
 
+.table-row-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
@@ -594,13 +595,16 @@ export default {
 th,
 td {
     height: 1.875rem;
-    /* height: 1px; */
     text-align: left;
     padding: 0;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+td {
+    height: 5rem;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -702,9 +706,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 10rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .saveNewPOT-darkmode {
@@ -724,9 +730,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 6rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteLastPOTTodos-darkmode {
@@ -735,9 +743,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 
@@ -758,9 +768,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 10rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deletePOTTodos-lightmode {
@@ -769,9 +781,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 6rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteLastPOTTodos-lightmode {
@@ -780,9 +794,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 2rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .saveNewPOT-lightmode {
@@ -824,44 +840,9 @@ th {
     text-align: right;
 }
 
-
+textarea {
-/* .input-span {
+    resize: none;
-    border: none;
+    width: 20rem;
-} */
+    height: 5rem;
-
-/* .input,
-.textarea {
-    border: 1px solid #ccc;
-    font-family: inherit;
-    font-size: inherit;
-    padding: 1px 6px;
-} */
-
-/* .input-wrap {
-    position: relative;
 }
-
-.input-wrap .input {
-    position: absolute;
-    width: 100%;
-    left: 0;
-}
-
-.width-machine {
-    padding: 0 1rem;
-}
-
-.textarea {
-    display: block;
-    width: 100%;
-    overflow: hidden;
-    resize: both;
-    min-height: 40px;
-    line-height: 20px;
-}
-
-.textarea[contenteditable]:empty::before {
-    content: "Placeholder still possible";
-    color: gray;
-} */
 </style>

components/server/TemplateChecklistMVT.vue

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

components/server/UserRightsList.vue

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

layouts/Actionbar.vue

@@ -211,9 +211,11 @@ const toggleActionbar = () => {
   isExpanded.value = !isExpanded.value;
 };
 const toggleFiltered = () => {
+  store.commit('deactivateSearch');
   store.commit('toggleFiltered');
 };
 const toggleSearched = () => {
+  store.commit('deactivateSearch');
   store.commit('toggleSearchable');
 };
 const add = () => {
@@ -233,10 +235,12 @@ const changeToSolutions = () => {
 }
 
 const changeToInstancelist = () => {
+  store.commit('deactivateSearch');
   store.commit('changeToInstancelist');
 }
 
 const changeToAllInstances = () => {
+  store.commit('deactivateSearch');
   store.commit('changeToInstancelist');
   store.commit('seeAllIcon');
 }

plugins/vuex.js

@@ -12,6 +12,7 @@ const store = createStore({
             customerChanged: false,
             changedCustomerId: -1,
             filteredByCustomer: '',
+            filteredUserTerm: false,
 
             addIcon: false,
             addSolutionIcon: false,
@@ -882,6 +883,19 @@ const store = createStore({
         resetModeLayoutChanged(state) {
             state.modeLayout = false
         },
+        resetFilterSearch(state) {
+            state.filtered = false
+            state.searchable = false
+        },
+        activateFilteredUserTerm(state) {
+            state.filteredUserTerm = true
+        },
+        activateFiltered(state) {
+            state.filtered = true
+        },
+        deactivateSearch(state) {
+            state.filteredUserTerm = false
+        },
 
         // function to set the logged in user
         setLoggedInUser(state, user) {
@@ -971,6 +985,7 @@ const store = createStore({
             state.deleteBool = false
             state.chosenAssetId = -1
             state.filteredByCustomer = ''
+            state.filteredUserTerm = false
             state.new = false
             state.customerChanged = false
             state.changedCustomerId = -1

server/api/getSelectedMVIByName/[id].ts

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

server/api/getSelectedPOIsByName/[id].ts

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

server/middleware/maintenanceVisitInstances.ts

@@ -8,6 +8,7 @@ let selectedMITsByMVT = [];
 let selectedMITsByState = [];
 let selectedMITsByUser = [];
 let selectedMITsByCustomer = [];
+let selectedMITsByName = [];
 let mviTodosByTemplateId = [];
 let mvi = [];
 let insertId = -1;
@@ -176,7 +177,7 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    if (event.path.startsWith("/api/getSelectedMITsByMVT")) {
+    if (event.path.startsWith("/api/getSelectedMVIByMVT")) {
         // get selected maintenance visit instances object by mvt from backend
         let filteredMVT = null;
         const path = event._path;
@@ -241,7 +242,7 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    if (event.path.startsWith("/api/getSelectedMITsByUser")) {
+    if (event.path.startsWith("/api/getSelectedMVIByUser")) {
         // get selected maintenance visit instances object by user from backend
         let filteredUser = null;
         const path = event._path;
@@ -273,6 +274,38 @@ export default defineEventHandler(async (event) => {
         }
     }
 
+    if (event.path.startsWith("/api/getSelectedMVIByName")) {
+        // get selected maintenance visit instances object by name from backend
+        let filteredName = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredName = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMaintenanceVisitsByChecklistname/${filteredName}`);
+            selectedMITsByName = 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/getSelectedMITsByState")) {
         // get selected maintenance visit instances object by state from backend
         let filteredState = null;
@@ -522,4 +555,4 @@ export default defineEventHandler(async (event) => {
     }
 })
 
-export { maintenanceVisitInstances, selectedMITsByState, selectedMITsByUser, selectedMITsByMVT, selectedMITsByMIT, selectedMITsByCustomer, mviTodosByTemplateId, mvi, insertId, errorMsg };
+export { maintenanceVisitInstances, selectedMITsByState, selectedMITsByUser, selectedMITsByName, selectedMITsByMVT, selectedMITsByMIT, selectedMITsByCustomer, mviTodosByTemplateId, mvi, insertId, errorMsg };

server/middleware/productionOrders.ts

@@ -8,6 +8,7 @@ let selectedPOIsByPOT = [];
 let selectedPOIsByState = [];
 let selectedPOIsByUser = [];
 let selectedPOIsByCustomer = [];
+let selectedPOIsByName = [];
 let poiTodosByTemplateId = [];
 let poi = [];
 let insertId = -1;
@@ -241,6 +242,38 @@ export default defineEventHandler(async (event) => {
         }
     }
 
+    if (event.path.startsWith("/api/getSelectedPOIsByName")) {
+        // get selected production order instances object by name from backend
+        let filteredName = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredName = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedProductionOrdersByChecklistname/${filteredName}`);
+            selectedPOIsByName = 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/getSelectedPOIsByState")) {
         // get selected production order instances object by state from backend
         let filteredState = null;
@@ -458,4 +491,4 @@ export default defineEventHandler(async (event) => {
     }
 })
 
-export { productionOrderInstances, selectedPOIsByState, selectedPOIsByUser, selectedPOIsByPOT, selectedPOIsByPOI, selectedPOIsByCustomer, poiTodosByTemplateId, poi, insertId, errorMsg };
+export { productionOrderInstances, selectedPOIsByState, selectedPOIsByUser, selectedPOIsByPOT, selectedPOIsByPOI, selectedPOIsByName, selectedPOIsByCustomer, poiTodosByTemplateId, poi, insertId, errorMsg };