575 lines
19 KiB
Vue
575 lines
19 KiB
Vue
<template>
|
|
<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">
|
|
<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="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']">
|
|
<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']">
|
|
<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']">
|
|
<input type="text" v-model="newPrice"
|
|
: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, 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>
|
|
export default {
|
|
name: "OrderingInformation",
|
|
};
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
.ordering-information {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: 1.25rem 1.875rem;
|
|
border-radius: 0.625rem;
|
|
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.section-darkmode {
|
|
background-color: #2c2c2c;
|
|
}
|
|
|
|
.section-lightmode {
|
|
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;
|
|
}
|
|
|
|
.label-darkmode {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.label-lightmode {
|
|
color: #000;
|
|
}
|
|
|
|
.label#ordering {
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.asset-data {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
align-self: stretch;
|
|
padding-left: 0.625rem;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.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-darkmode,
|
|
.td-darkmode {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.th-lightmode,
|
|
.td-lightmode {
|
|
color: #000;
|
|
}
|
|
|
|
th {
|
|
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
|
}
|
|
|
|
|
|
.Article {
|
|
width: 30%;
|
|
}
|
|
|
|
.Article-darkmode {
|
|
border-right: 0.0625rem solid #000000;
|
|
}
|
|
|
|
.Article-lightmode {
|
|
border-right: 0.0625rem solid #8e8e8e;
|
|
}
|
|
|
|
.Amount {
|
|
width: 15%;
|
|
}
|
|
|
|
.Amount-darkmode {
|
|
border-right: 0.0625rem solid #000000;
|
|
}
|
|
|
|
.Amount-lightmode {
|
|
border-right: 0.0625rem solid #8e8e8e;
|
|
}
|
|
|
|
.Price {
|
|
width: 15%;
|
|
}
|
|
|
|
.Price-darkmode {
|
|
border-right: 0.0625rem solid #000000;
|
|
}
|
|
|
|
.Price-lightmode {
|
|
border-right: 0.0625rem solid #8e8e8e;
|
|
}
|
|
|
|
.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> |