fixed small bugs and made comment fields bigger

This commit is contained in:
2024-04-02 14:53:14 +02:00
parent 423ff7e48b
commit aaa3bba79f
20 changed files with 502 additions and 412 deletions

View File

@ -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"
:class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
{{ todo.comments }}</td>
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
type="text" v-model="todo.comments" @change="updateMVITodo(todo)"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
<td
:class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '', !darkMode && !addBool ? 'Comments-lightmode' : '']">
<textarea type="text" v-model="todo.comments" :readonly="!editable"
@change="updateMVITodo(todo)"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
</td>
<td v-if="!addBool" :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input
@change="toggleTodo(todo)" type="checkbox" v-model="todo.done"
@ -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>