implemented instance lists and pot, todos still missing
This commit is contained in:
@ -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>
|
||||
Reference in New Issue
Block a user