Merge branch 'AccountingPages'
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section :class="['ordering-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<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">
|
||||
@ -16,30 +16,271 @@
|
||||
Price</th>
|
||||
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<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']">
|
||||
...</td>
|
||||
<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']">
|
||||
...</td>
|
||||
<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']">
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
<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 } from 'vue';
|
||||
|
||||
|
||||
<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>
|
||||
@ -47,9 +288,9 @@ export default {
|
||||
name: "OrderingInformation",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.ordering-information {
|
||||
display: flex;
|
||||
@ -70,6 +311,31 @@ export default {
|
||||
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;
|
||||
@ -194,5 +460,116 @@ th {
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user