implemented instance lists and pot, todos still missing

This commit is contained in:
2024-03-28 23:10:29 +01:00
parent 979768e52e
commit 3c063fddca
34 changed files with 2668 additions and 105 deletions

View File

@ -45,10 +45,15 @@
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{
todo.comments
}}</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']"> <button
:class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
<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']">
<!-- <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>
@ -127,8 +132,8 @@
</td>
<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 ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
<button :class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
@click="deletePOTTodoFromNewTodos(index)">-</button>
</td>
</tr>
@ -436,6 +441,43 @@ function getItem(item) {
}
}
// const inputValue = ref('');
// const widthMachine = computed(() => inputValue.value);
// function handleInput(event) {
// inputValue.value = event.target.value;
// }
// // Textarea height handling
// const textareaValue = ref('');
// const textareaHeight = computed(() => calcHeight(textareaValue.value));
// function handleTextareaInput(event) {
// textareaValue.value = event.target.value;
// }
// function calcHeight(value) {
// const numberOfLineBreaks = (value.match(/\n/g) || []).length;
// // min-height + lines x line-height + padding + border
// const newHeight = 20 + numberOfLineBreaks * 20 + 12 + 2;
// return newHeight;
// }
// const spanElement = ref(null);
// const computedHeight = ref('auto'); // Default height is 'auto'
// // Compute the height of the span element
// const computeSpanHeight = () => {
// if (spanElement.value) {
// computedHeight.value = spanElement.value.offsetHeight + 'px';
// }
// };
// // Watch for changes in the content of the span element
// watch(() => textareaValue.value, () => {
// computeSpanHeight();
// });
watch(customerChanged, getPOTById);
watch(modeChanged, getSession)
@ -466,6 +508,17 @@ export default {
font: 400 0.75rem/250% Overpass, sans-serif;
}
/* .data-span {
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;
}
@ -541,6 +594,7 @@ export default {
th,
td {
height: 1.875rem;
/* height: 1px; */
text-align: left;
padding: 0;
letter-spacing: 5%;
@ -769,4 +823,45 @@ th {
#editPOTTodos {
text-align: right;
}
/* .input-span {
border: none;
} */
/* .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>