Merge branch 'AccountingPages'
This commit is contained in:
@ -1,5 +1,204 @@
|
||||
<template>
|
||||
<section :class="['accounting-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="!addBool" :class="['accounting-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="accounting">Accounting:
|
||||
<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="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Action</th>
|
||||
<th
|
||||
:class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
Date</th>
|
||||
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Supplier request</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
{{
|
||||
issueSlip.supplierRequestDate }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
<input type="text" v-model="issueSlip.supplierRequestDate" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
|
||||
issueSlip.supplierRequest }}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="issueSlip.supplierRequest" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Supplier offer</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
{{
|
||||
issueSlip.supplierOfferDate }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
<input type="text" v-model="issueSlip.supplierOfferDate" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
|
||||
issueSlip.supplierOffer }}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="issueSlip.supplierOffer" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Customer offer</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
{{
|
||||
issueSlip.clientOfferDate }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
<input type="text" v-model="issueSlip.clientOfferDate" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
|
||||
issueSlip.clientOffer }}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="issueSlip.clientOffer" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Customer order</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
{{
|
||||
issueSlip.clientOrderDate }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
<input type="text" v-model="issueSlip.clientOrderDate" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
|
||||
issueSlip.clientOrder }}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="issueSlip.clientOrder" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Supplier order</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
{{
|
||||
issueSlip.supplierOrderDate }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
<input type="text" v-model="issueSlip.supplierOrderDate" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
|
||||
issueSlip.supplierOrder }}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="issueSlip.supplierOrder" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Ingress</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
{{
|
||||
issueSlip.ingressDate }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
<input type="text" v-model="issueSlip.ingressDate" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
|
||||
issueSlip.ingress }}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="issueSlip.ingress" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Egress</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
{{
|
||||
issueSlip.egressDate }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
<input type="text" v-model="issueSlip.egressDate" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
|
||||
issueSlip.egress }}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="issueSlip.egress" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
|
||||
<td
|
||||
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Ingress bill</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
{{
|
||||
issueSlip.ingressBillDate }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
<input type="text" v-model="issueSlip.ingressBillDate" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
|
||||
issueSlip.ingressBill }}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="issueSlip.ingressBill" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Egress bill</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
{{
|
||||
issueSlip.egressBillDate }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
<input type="text" v-model="issueSlip.egressBillDate" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
|
||||
issueSlip.egressBill }}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="issueSlip.egressBill" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['accounting-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="accounting">Accounting:
|
||||
<div class="asset-data">
|
||||
<table class="data-table" id="asset-table-no-customer">
|
||||
@ -19,8 +218,13 @@
|
||||
Supplier request</td>
|
||||
<td
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
<input type="text" v-model="newSupplierRequestDate" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="newSupplierRequest" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
@ -28,8 +232,13 @@
|
||||
Supplier offer</td>
|
||||
<td
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
<input type="text" v-model="newSupplierOfferDate" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="newSupplierOffer" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
@ -37,8 +246,13 @@
|
||||
Customer offer</td>
|
||||
<td
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
<input type="text" v-model="newClientOfferDate" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="newClientOffer" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
@ -46,8 +260,13 @@
|
||||
Customer order</td>
|
||||
<td
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
<input type="text" v-model="newClientOrderDate" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="newClientOrder" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
@ -55,8 +274,13 @@
|
||||
Supplier order</td>
|
||||
<td
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
<input type="text" v-model="newSupplierOrderDate" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="newSupplierOrder" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
@ -64,8 +288,13 @@
|
||||
Ingress</td>
|
||||
<td
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
<input type="text" v-model="newIngressDate" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="newIngress" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
@ -73,8 +302,13 @@
|
||||
Egress</td>
|
||||
<td
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
<input type="text" v-model="newEgressDate" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="newEgress" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
|
||||
<td
|
||||
@ -82,8 +316,13 @@
|
||||
Ingress bill</td>
|
||||
<td
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
<input type="text" v-model="newIngressBillDate" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="newIngressBill" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
|
||||
<td
|
||||
@ -91,29 +330,233 @@
|
||||
Egress bill</td>
|
||||
<td
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
<input type="text" v-model="newEgressBillDate" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="newEgressBill" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewItem">
|
||||
<button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']"
|
||||
@click="addIssueSlip()">Save</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, onMounted } 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 editable = computed(() => store.state.editable);
|
||||
const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
|
||||
const addBool = computed(() => store.state.new);
|
||||
const newTicketNoIS = computed(() => store.state.newTicketNoIS);
|
||||
const newCustomerIdIS = computed(() => store.state.newCustomerIdIS);
|
||||
const newCustomerIS = computed(() => store.state.newCustomerIS);
|
||||
const newNotesIS = computed(() => store.state.newNotesIS);
|
||||
const newUserIS = computed(() => store.state.newUserIS);
|
||||
const newDeliveryAddressIS = computed(() => store.state.newDeliveryAddressIS);
|
||||
const newAddRowOI = computed(() => store.state.newAddRowOI);
|
||||
const newOIs = computed(() => store.state.newOIs);
|
||||
|
||||
const newClientOffer = ref('');
|
||||
const newClientOrder = ref('');
|
||||
const newSupplierOffer = ref('');
|
||||
const newSupplierOrder = ref('');
|
||||
const newSupplierRequest = ref('');
|
||||
const newIngress = ref('');
|
||||
const newIngressBill = ref('');
|
||||
const newEgress = ref('');
|
||||
const newEgressBill = ref('');
|
||||
const newClientOfferDate = ref('');
|
||||
const newClientOrderDate = ref('');
|
||||
const newSupplierOfferDate = ref('');
|
||||
const newSupplierOrderDate = ref('');
|
||||
const newSupplierRequestDate = ref('');
|
||||
const newIngressDate = ref('');
|
||||
const newIngressBillDate = ref('');
|
||||
const newEgressDate = ref('');
|
||||
const newEgressBillDate = ref('');
|
||||
|
||||
const darkMode = ref(true)
|
||||
const issueSlip = ref({});
|
||||
|
||||
// get issue slip from id
|
||||
const getIssueSlipById = async () => {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueSlip/${chosenIssueSlipId.value}`
|
||||
);
|
||||
issueSlip.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// update accounting fields in the store
|
||||
const updateIS = () => {
|
||||
const is = {
|
||||
supplierRequestDate: newSupplierRequestDate.value,
|
||||
supplierRequest: newSupplierRequest.value,
|
||||
supplierOfferDate: newSupplierOfferDate.value,
|
||||
supplierOffer: newSupplierOffer.value,
|
||||
clientOfferDate: newClientOfferDate.value,
|
||||
clientOffer: newClientOffer.value,
|
||||
clientOrderDate: newClientOrderDate.value,
|
||||
clientOrder: newClientOrder.value,
|
||||
supplierOrderDate: newSupplierOrderDate.value,
|
||||
supplierOrder: newSupplierOrder.value,
|
||||
ingressDate: newIngressDate.value,
|
||||
ingress: newIngress.value,
|
||||
egressDate: newEgressDate.value,
|
||||
egress: newEgress.value,
|
||||
ingressBillDate: newIngressBillDate.value,
|
||||
ingressBill: newIngressBill.value,
|
||||
egressBillDate: newEgressBillDate.value,
|
||||
egressBill: newEgressBill.value,
|
||||
};
|
||||
store.commit('updateAccountingComponent', is);
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateIssueSlip = async () => {
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateIssueSlip`,
|
||||
{
|
||||
primaryID: issueSlip.value.primaryID,
|
||||
customerID: issueSlip.value.customerID,
|
||||
customer: issueSlip.value.customer,
|
||||
ticketNo: issueSlip.value.ticketNo,
|
||||
creationDate: issueSlip.value.creationDate,
|
||||
lastView: issueSlip.value.lastView,
|
||||
user: issueSlip.value.user,
|
||||
notes: issueSlip.value.notes,
|
||||
deliveryAddress: issueSlip.value.deliveryAddress,
|
||||
supplierRequestDate: issueSlip.value.supplierRequestDate,
|
||||
supplierRequest: issueSlip.value.supplierRequest,
|
||||
supplierOfferDate: issueSlip.value.supplierOfferDate,
|
||||
supplierOffer: issueSlip.value.supplierOffer,
|
||||
clientOfferDate: issueSlip.value.clientOfferDate,
|
||||
clientOffer: issueSlip.value.clientOffer,
|
||||
clientOrderDate: issueSlip.value.clientOrderDate,
|
||||
clientOrder: issueSlip.value.clientOrder,
|
||||
supplierOrder: issueSlip.value.supplierOrder,
|
||||
supplierOrderDate: issueSlip.value.supplierOrderDate,
|
||||
ingressDate: issueSlip.value.ingressDate,
|
||||
ingress: issueSlip.value.ingress,
|
||||
egressDate: issueSlip.value.egressDate,
|
||||
egress: issueSlip.value.egress,
|
||||
ingressBillDate: issueSlip.value.ingressBillDate,
|
||||
ingressBill: issueSlip.value.ingressBill,
|
||||
egressBillDate: issueSlip.value.egressBillDate,
|
||||
egressBill: issueSlip.value.egressBill,
|
||||
}
|
||||
)
|
||||
await getIssueSlipById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new issue slip
|
||||
const addIssueSlip = async () => {
|
||||
if (newTicketNoIS.value.length === 0) {
|
||||
alert("Please add a ticket number!");
|
||||
return;
|
||||
}
|
||||
if (newCustomerIS.value.length === 0) {
|
||||
alert("Please choose a customer!");
|
||||
return;
|
||||
}
|
||||
// get the time and date
|
||||
const today = new Date();
|
||||
const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
|
||||
const time = today.getHours() + ":" + today.getMinutes();
|
||||
const dateTime = date + ' ' + time;
|
||||
let allFine = true;
|
||||
newOIs.value.forEach(oi => {
|
||||
if (oi.article.length === 0 && oi.amount.length === 0 && oi.price.length === 0 && oi.comment.length === 0) {
|
||||
alert(`Please add data for all ordering info.`);
|
||||
allFine = false
|
||||
}
|
||||
})
|
||||
if (!allFine) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addIssueSlip`,
|
||||
{
|
||||
customerID: newCustomerIdIS.value,
|
||||
customer: newCustomerIS.value,
|
||||
ticketNo: newTicketNoIS.value,
|
||||
creationDate: dateTime,
|
||||
lastView: '',
|
||||
user: newUserIS.value,
|
||||
notes: newNotesIS.value,
|
||||
deliveryAddress: newDeliveryAddressIS.value,
|
||||
supplierRequestDate: newSupplierRequestDate.value,
|
||||
supplierRequest: newSupplierRequest.value,
|
||||
supplierOfferDate: newSupplierOfferDate.value,
|
||||
supplierOffer: newSupplierOffer.value,
|
||||
clientOfferDate: newClientOfferDate.value,
|
||||
clientOffer: newClientOffer.value,
|
||||
clientOrderDate: newClientOrderDate.value,
|
||||
clientOrder: newClientOrder.value,
|
||||
supplierOrderDate: newClientOrderDate.value,
|
||||
supplierOrder: newSupplierOrder.value,
|
||||
ingressDate: newIngressDate.value,
|
||||
ingress: newIngress.value,
|
||||
egressDate: newEgressDate.value,
|
||||
egress: newEgress.value,
|
||||
ingressBillDate: newIngressBillDate.value,
|
||||
ingressBill: newIngressBill.value,
|
||||
egressBillDate: newEgressBillDate.value,
|
||||
egressBill: newEgressBill.value,
|
||||
});
|
||||
newOIs.value.forEach(async oi => {
|
||||
try {
|
||||
const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addOrderingInfo`,
|
||||
{
|
||||
issueSlipID: response.data,
|
||||
article: oi.article,
|
||||
amount: oi.amount,
|
||||
price: oi.price,
|
||||
comment: oi.comment,
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToIssueSliplist');
|
||||
})
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getIssueSlipById();
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Accounting",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.accounting-information {
|
||||
display: flex;
|
||||
@ -134,6 +577,31 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.label {
|
||||
letter-spacing: 5%;
|
||||
font: 400 1rem/1.875rem Overpass, sans-serif;
|
||||
@ -204,6 +672,41 @@ export default {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
.saveNewItem-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.saveNewItem-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.saveNewItem-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.saveNewItem-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#saveNewItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
|
||||
@ -280,6 +280,7 @@ const confirmDeleteAsset = async () => {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteConfigItem/${chosenAssetId.value}`);
|
||||
store.commit('undoDelete');
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToAssetlist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
|
||||
@ -94,7 +94,7 @@ section {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: row;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 1.25rem;
|
||||
|
||||
@ -86,7 +86,7 @@ display: flex;
|
||||
flex: auto;
|
||||
width: 30%;
|
||||
flex-direction: row;
|
||||
padding: 0.625rem 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 1.25rem;
|
||||
|
||||
@ -133,7 +133,7 @@ section {
|
||||
flex: auto;
|
||||
width: 20%;
|
||||
flex-direction: row;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 1.25rem;
|
||||
|
||||
@ -1,22 +1,33 @@
|
||||
<template>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['issue-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Name</h2>
|
||||
<section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 v-if="!editable" :class="['issue-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ issue.name }}</h2>
|
||||
<input v-if="editable" v-model="issue.name" @change="updateIssueItem()"
|
||||
:class="['data', 'issue-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="issue-data">
|
||||
<div class="type">
|
||||
<div class="data-field" id="type">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issue.type }}</pre>
|
||||
<input v-if="editable" v-model="issue.type" @change="updateIssueItem()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="state-amount">
|
||||
<div class="data-field" id="state">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issue.state }}</pre>
|
||||
<input v-if="editable" v-model="issue.state" @change="updateIssueItem()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="amount">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issue.amount }}</pre>
|
||||
<input v-if="editable" v-model="issue.amount" @change="updateIssueItem()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -25,28 +36,192 @@
|
||||
<div class="additional">
|
||||
<div class="properties">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">...</pre>
|
||||
<input v-model="issue.properties" :readonly="!editable" @change="updateIssueItem()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<input v-model="newName" @change="updateII()"
|
||||
:class="['data', 'issue-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="issue-data">
|
||||
<div class="type">
|
||||
<div class="data-field" id="type">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||
<input v-model="newType" @change="updateII()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="state-amount">
|
||||
<div class="data-field" id="state">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
|
||||
<input v-model="newState" @change="updateII()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="amount">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
|
||||
<input v-model="newAmount" @change="updateII()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="issue-data">
|
||||
<div class="additional">
|
||||
<div class="properties">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
|
||||
<input v-model="newProperties" @change="updateII()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
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 editable = computed(() => store.state.editable);
|
||||
const chosenIssueId = computed(() => store.state.chosenIssueId);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
const addBool = computed(() => store.state.new);
|
||||
|
||||
const darkMode = ref(true)
|
||||
const issue = ref({});
|
||||
const issues = ref([]);
|
||||
|
||||
const newName = ref('');
|
||||
const newType = ref('');
|
||||
const newState = ref('');
|
||||
const newAmount = ref('');
|
||||
const newProperties = ref('');
|
||||
|
||||
//get all issue
|
||||
const getIssues = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssues`);
|
||||
issues.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDeleteIssue = async () => {
|
||||
if (deleteBool.value === true) {
|
||||
if (confirm("Do you really want to delete this issue? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteIssueItem/${chosenIssueId.value}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteIV/${chosenIssueId.value}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
store.commit('undoDelete');
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToIssueItemList');
|
||||
} else {
|
||||
store.commit('undoDelete');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateIssueItem = async () => {
|
||||
if (issue.value.name.trim() === "") {
|
||||
alert("Please add an issue name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if the issue name already exists
|
||||
issues.value.forEach(i => {
|
||||
if (i.name === issue.value.name) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 2) {
|
||||
alert("This issue name already exists. Please choose an unique issue name or modify respectively delete the old one!");
|
||||
issue.value.name = '';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateIssueItem`,
|
||||
{
|
||||
primaryID: issue.value.primaryID,
|
||||
name: issue.value.name,
|
||||
type: issue.value.type,
|
||||
state: issue.value.state,
|
||||
amount: issue.value.amount,
|
||||
properties: issue.value.properties,
|
||||
}
|
||||
)
|
||||
await getIssueById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// get issue from id
|
||||
const getIssueById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueItem/${chosenIssueId.value}`
|
||||
);
|
||||
issue.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update issue fields in the store
|
||||
const updateII = () => {
|
||||
const ii = {
|
||||
name: newName.value,
|
||||
type: newType.value,
|
||||
state: newState.value,
|
||||
amount: newAmount.value,
|
||||
properties: newProperties.value,
|
||||
};
|
||||
store.commit('updateIssueComponent', ii);
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
watch(deleteBool, confirmDeleteIssue);
|
||||
|
||||
onMounted(() => {
|
||||
getIssueById();
|
||||
triggerBackendCallsWithDelay(getIssues);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Issue",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.information {
|
||||
display: flex;
|
||||
@ -67,7 +242,27 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.issue-name-input {
|
||||
padding: 1rem 0;
|
||||
margin: 1rem;
|
||||
font-size: initial;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.h2-input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.h2-input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.issue-name {
|
||||
align-self: stretch;
|
||||
@ -92,7 +287,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
@ -1,22 +1,33 @@
|
||||
<template>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['issueSlip-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">ID issue slips</h2>
|
||||
<section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['issueSlip-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ issueSlip.primaryID }}</h2>
|
||||
<div class="issueSlip-data">
|
||||
<div class="customer">
|
||||
<div class="data-field" id="customer">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueSlip.customer }}</pre>
|
||||
<select v-if="editable" id="customersDropDownChosenCI" v-model="issueSlip.customer"
|
||||
@change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
{{ cust.customername }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="ticketNo-user">
|
||||
<div class="data-field" id="ticketNo">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueSlip.ticketNo }}</pre>
|
||||
</div>
|
||||
<div class="data-field" id="user">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueSlip.user }}</pre>
|
||||
<input v-if="editable" v-model="issueSlip.user" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -25,28 +36,266 @@
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
<input v-model="issueSlip.notes" :readonly="!editable" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</div>
|
||||
<div class="additional">
|
||||
<div class="deliveryAddress">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Different delivery address:
|
||||
</h3>
|
||||
<input v-model="issueSlip.deliveryAddress" :readonly="!editable" @change="updateIssueSlip()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="deliveryAddress">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['issueSlip-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Issue slip ID</h2>
|
||||
<div class="issueSlip-data">
|
||||
<div class="client">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
{{ cust.customername }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="ticketNo-user">
|
||||
<div class="data-field" id="ticketNo">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"></pre>
|
||||
<!-- <select id="ticketNoDropDownChosenCI" v-model="newTicketNo" @change="updateIS()"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="po in productionOrders" :key="po.ticketNumber">
|
||||
{{ po.ticketNumber }}
|
||||
</option>
|
||||
</select> -->
|
||||
</div>
|
||||
<div class="data-field" id="user">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
|
||||
<input v-model="newUser" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="issueSlip-data">
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<input v-model="newNotes" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</div>
|
||||
<div class="additional">
|
||||
<div class="deliveryAddress">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Different delivery address:
|
||||
</h3>
|
||||
<input v-model="newDeliveryAddress" @change="updateIS()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="deliveryAddress">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
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 editable = computed(() => store.state.editable);
|
||||
const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
const addBool = computed(() => store.state.new);
|
||||
|
||||
const darkMode = ref(true)
|
||||
const issueSlip = ref({});
|
||||
const customer = ref({});
|
||||
const productionOrders = ref([]);
|
||||
const customers = ref([]);
|
||||
|
||||
const newTicketNo = ref('');
|
||||
const newCustomerID = ref('');
|
||||
const newCustomer = ref('');
|
||||
const newUser = ref('');
|
||||
const newNotes = ref('');
|
||||
const newDeliveryAddress = ref('');
|
||||
|
||||
// get issue slip from id
|
||||
const getIssueSlipById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueSlip/${chosenIssueSlipId.value}`
|
||||
);
|
||||
issueSlip.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update issue slip fields in the store
|
||||
const updateIS = () => {
|
||||
const is = {
|
||||
customerId: newCustomerID.value,
|
||||
customer: newCustomer.value,
|
||||
// ticketNo: newTicketNo.value,
|
||||
ticketNo: 1,
|
||||
notes: newNotes.value,
|
||||
user: newUser.value,
|
||||
deliveryAddress: newDeliveryAddress.value,
|
||||
};
|
||||
store.commit('updateIssueSlipComponent', is);
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateIssueSlip = async () => {
|
||||
// delete later
|
||||
issueSlip.value.ticketNo = 1;
|
||||
if (issueSlip.value.ticketNo.length === 0) {
|
||||
alert("Please add a ticket Number!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateIssueSlip`,
|
||||
{
|
||||
primaryID: issueSlip.value.primaryID,
|
||||
customerID: issueSlip.value.customerID,
|
||||
customer: issueSlip.value.customer,
|
||||
ticketNo: issueSlip.value.ticketNo,
|
||||
creationDate: issueSlip.value.creationDate,
|
||||
lastView: issueSlip.value.lastView,
|
||||
user: issueSlip.value.user,
|
||||
notes: issueSlip.value.notes,
|
||||
deliveryAddress: issueSlip.value.deliveryAddress,
|
||||
supplierRequestDate: issueSlip.value.supplierRequestDate,
|
||||
supplierRequest: issueSlip.value.supplierRequest,
|
||||
supplierOfferDate: issueSlip.value.supplierOfferDate,
|
||||
supplierOffer: issueSlip.value.supplierOffer,
|
||||
clientOfferDate: issueSlip.value.clientOfferDate,
|
||||
clientOffer: issueSlip.value.clientOffer,
|
||||
clientOrderDate: issueSlip.value.clientOrderDate,
|
||||
clientOrder: issueSlip.value.clientOrder,
|
||||
supplierOrder: issueSlip.value.supplierOrder,
|
||||
supplierOrderDate: issueSlip.value.supplierOrderDate,
|
||||
ingressDate: issueSlip.value.ingressDate,
|
||||
ingress: issueSlip.value.ingress,
|
||||
egressDate: issueSlip.value.egressDate,
|
||||
egress: issueSlip.value.egress,
|
||||
ingressBillDate: issueSlip.value.ingressBillDate,
|
||||
ingressBill: issueSlip.value.ingressBill,
|
||||
egressBillDate: issueSlip.value.egressBillDate,
|
||||
egressBill: issueSlip.value.egressBill,
|
||||
}
|
||||
)
|
||||
await getIssueSlipById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
//get all customers
|
||||
const getCustomers = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
|
||||
);
|
||||
customers.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
//get all production orders
|
||||
const getProductionOrders = async () => {
|
||||
// try {
|
||||
// const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
|
||||
// );
|
||||
// customers.value = response.data;
|
||||
// } catch (err) {
|
||||
// console.log(err.response.statusText);
|
||||
// }
|
||||
}
|
||||
|
||||
const confirmDeleteIssueSlip = async () => {
|
||||
if (deleteBool.value === true) {
|
||||
if (confirm("Do you really want to delete this issue slip? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteIssueSlip/${chosenIssueSlipId.value}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosOI/${chosenIssueSlipId.value}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
store.commit('undoDelete');
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToIssueSliplist');
|
||||
} else {
|
||||
store.commit('undoDelete');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update customerid if customer was changed
|
||||
const updateCustomerID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${issueSlip.value.customer}`);
|
||||
customer.value = response.data;
|
||||
issueSlip.value.customerID = customer.value.customerID;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
await updateIssueSlip();
|
||||
}
|
||||
|
||||
// update customerid if customer was changed
|
||||
const updateNewCustomerID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${newCustomer.value}`);
|
||||
newCustomerID.value = response.data.customerID;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
updateIS();
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
watch(deleteBool, confirmDeleteIssueSlip);
|
||||
|
||||
onMounted(() => {
|
||||
getIssueSlipById();
|
||||
getProductionOrders();
|
||||
triggerBackendCallsWithDelay(getCustomers);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "IssueSlip",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.information {
|
||||
display: flex;
|
||||
@ -92,7 +341,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
@ -129,6 +378,10 @@ export default {
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
@ -165,7 +418,7 @@ export default {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
line-height: normal;
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
padding: 0rem 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
@ -193,10 +446,12 @@ export default {
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.data#notes {
|
||||
.data#notes,
|
||||
.data#deliveryAddress {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.deliveryAddress,
|
||||
.notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -206,4 +461,20 @@ export default {
|
||||
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
.select-darkmode {
|
||||
border: none;
|
||||
color: white;
|
||||
background: #212121;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.select-lightmode {
|
||||
border: none;
|
||||
color: black;
|
||||
background: #EBEBEB;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,9 @@
|
||||
<template>
|
||||
<section v-if="searchable" :class="['issue-slip-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Ticket No</div>
|
||||
<input v-model="issueSlipSearchFilter" @change="searchIssueSlip()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</section>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
|
||||
<table class="data-table" id="asset-table">
|
||||
@ -26,7 +31,12 @@
|
||||
{{ issueSlip.customer }}</td>
|
||||
<td
|
||||
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||
{{ issueSlip.primaryID }}</td>
|
||||
<nuxt-link to="/issueSlips" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
@click="goToChosenIssueSlip(issueSlip.primaryID)">
|
||||
{{ issueSlip.primaryID }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td
|
||||
:class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
|
||||
{{ issueSlip.ticketNo }}</td>
|
||||
@ -39,28 +49,79 @@
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
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';
|
||||
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
const goToChosenIssueSlip = (id) => {
|
||||
store.commit('setChosenIssueSlip', id);
|
||||
store.commit('changeToIssueSlip');
|
||||
};
|
||||
|
||||
const clientFilter = computed(() => store.state.filteredByClient);
|
||||
const searchable = computed(() => store.state.searchable);
|
||||
|
||||
const issueSlipSearchFilter = ref('');
|
||||
const darkMode = ref(true)
|
||||
const issueSlips = ref([]);
|
||||
|
||||
// update search term
|
||||
const updateSearchTerm = async () => {
|
||||
issueSlipSearchFilter.value = '';
|
||||
await getIssueSlips();
|
||||
}
|
||||
|
||||
//get all issueSlips
|
||||
const getIssueSlips = async () => {
|
||||
if (!(clientFilter.value === '')) {
|
||||
await getFilteredIssueSlipsByClient();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssueSlips`);
|
||||
issueSlips.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all issue slips based on the searched client
|
||||
const getFilteredIssueSlipsByClient = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssueSlips`);
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedIssueSlipsByClient/${clientFilter.value}`);
|
||||
issueSlips.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getIssueSlips();
|
||||
//get all issue slips based on the searched issue slip id
|
||||
const searchIssueSlip = async () => {
|
||||
if (issueSlipSearchFilter.value === '') {
|
||||
await getIssueSlips();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedIssueSlipsByTicketNo/${issueSlipSearchFilter.value}`);
|
||||
issueSlips.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(clientFilter, getIssueSlips);
|
||||
watch(searchable, updateSearchTerm);
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
await getIssueSlips();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -69,7 +130,7 @@ export default {
|
||||
name: "IssueSlipTable",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.data {
|
||||
display: flex;
|
||||
@ -77,7 +138,6 @@ export default {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
padding: 1.25rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
@ -92,6 +152,46 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.issue-slip-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.625em 1.875em;
|
||||
gap: 1.25em;
|
||||
width: 30.125em;
|
||||
height: 3.125em;
|
||||
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0.625em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dataInput {
|
||||
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;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
@ -118,6 +218,27 @@ export default {
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.clientLabel {
|
||||
width: 5.5625em;
|
||||
height: 1.875em;
|
||||
font-family: "Overpass";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.875;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
@ -218,4 +339,5 @@ th {
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,9 @@
|
||||
<template>
|
||||
<section v-if="searchable" :class="['issue-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue name</div>
|
||||
<input v-model="issueSearchFilter" @change="searchIssue()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</section>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issues:</div>
|
||||
<table class="data-table" id="asset-table">
|
||||
@ -19,7 +24,12 @@
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
{{ issue.name }}</td>
|
||||
<nuxt-link to="/issues" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
@click="goToChosenIssue(issue.primaryID)">
|
||||
{{ issue.name }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td
|
||||
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
|
||||
{{ issue.type }}</td>
|
||||
@ -32,28 +42,79 @@
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
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';
|
||||
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
const goToChosenIssue = (id) => {
|
||||
store.commit('setChosenIssue', id);
|
||||
store.commit('changeToIssueItem');
|
||||
};
|
||||
|
||||
const stateFilter = computed(() => store.state.filteredByClient);
|
||||
const searchable = computed(() => store.state.searchable);
|
||||
|
||||
const issueSearchFilter = ref('');
|
||||
const darkMode = ref(true)
|
||||
const issues = ref([]);
|
||||
|
||||
// update search term
|
||||
const updateSearchTerm = async () => {
|
||||
issueSearchFilter.value = '';
|
||||
await getIssues();
|
||||
}
|
||||
|
||||
|
||||
//get all issue
|
||||
const getIssues = async () => {
|
||||
if (!(stateFilter.value === '')) {
|
||||
await getFilteredIssuesByState();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssues`);
|
||||
issues.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all issues based on the searched state
|
||||
const getFilteredIssuesByState = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssues`);
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedIssuesByState/${stateFilter.value}`);
|
||||
issues.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getIssues();
|
||||
//get all issues based on the searched issue name
|
||||
const searchIssue = async () => {
|
||||
if (issueSearchFilter.value === '') {
|
||||
await getIssues();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedIssuesByIssueName/${issueSearchFilter.value}`);
|
||||
issues.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(stateFilter, getIssues);
|
||||
watch(searchable, updateSearchTerm);
|
||||
|
||||
onMounted(async () => {
|
||||
await getIssues();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -61,10 +122,10 @@ onMounted(() => {
|
||||
export default {
|
||||
name: "IssueTable",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.data {
|
||||
display: flex;
|
||||
@ -87,6 +148,27 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.clientLabel {
|
||||
width: 5.5625em;
|
||||
height: 1.875em;
|
||||
font-family: "Overpass";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.875;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
@ -94,6 +176,46 @@ export default {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.issue-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.625em 1.875em;
|
||||
gap: 1.25em;
|
||||
width: 30.125em;
|
||||
height: 3.125em;
|
||||
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0.625em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dataInput {
|
||||
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;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -1,26 +1,40 @@
|
||||
<template>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['issue-variant-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Name</h2>
|
||||
<h2 v-if="!editable" :class="['issue-variant-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
|
||||
issueVariant.name }}</h2>
|
||||
<input v-if="editable" v-model="issueVariant.name" @change="updateIssueVariant()"
|
||||
:class="['data', 'issue-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="issue-variant-data">
|
||||
<div class="variantOf">
|
||||
<div class="data-field" id="variantOf">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Variant of:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"><nuxt-link to="/issues" id="nuxt-link" class="button" @click="goToChosenIssue(issue.primaryID)">{{ nameOfVariant }}</nuxt-link></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="state-amount-price">
|
||||
<div class="data-field" id="state">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueVariant.state }}</pre>
|
||||
<input v-if="editable" v-model="issueVariant.state" @change="updateIssueVariant()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
|
||||
</div>
|
||||
<div class="data-field" id="amount">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Amount:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueVariant.amount }}</pre>
|
||||
<input v-if="editable" v-model="issueVariant.amount" @change="updateIssueVariant()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="price">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Price:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueVariant.price }}</pre>
|
||||
<input v-if="editable" v-model="issueVariant.price" @change="updateIssueVariant()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -29,28 +43,153 @@
|
||||
<div class="additional">
|
||||
<div class="properties">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Properties:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">...</pre>
|
||||
<input v-model="issueVariant.properties" :readonly="!editable" @change="updateIssueVariant()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="properties">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
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 editable = computed(() => store.state.editable);
|
||||
const chosenIssueId = computed(() => store.state.chosenIssueId);
|
||||
const chosenIssueVariantId = computed(() => store.state.chosenIssueVariantId);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
|
||||
const darkMode = ref(true)
|
||||
const issue = ref({});
|
||||
const issueVariant = ref({});
|
||||
const issueVariants = ref([]);
|
||||
const nameOfVariant = ref('');
|
||||
|
||||
//get all issue variants
|
||||
const getIssueVariants = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssueVariants`);
|
||||
issueVariants.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
const goToChosenIssue = (id) => {
|
||||
store.commit('setChosenIssue', id);
|
||||
store.commit('changeToIssueItem');
|
||||
};
|
||||
|
||||
const confirmDeleteIssueVariant = async () => {
|
||||
if (deleteBool.value === true) {
|
||||
if (confirm("Do you really want to delete this issue variant? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteIssueVariant/${chosenIssueVariantId.value}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
store.commit('undoDelete');
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToIssueItemList');
|
||||
} else {
|
||||
store.commit('undoDelete');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateIssueVariant = async () => {
|
||||
if (issueVariant.value.name.trim() === "") {
|
||||
alert("Please add an issue variant name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if the issue variant name already exists
|
||||
issueVariants.value.forEach(i => {
|
||||
if (i.name === issueVariant.value.name) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 2) {
|
||||
alert("This issue variant name already exists. Please choose an unique issue variant name or modify respectively delete the old one!");
|
||||
issueVariant.value.name = '';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateIssueVariant`,
|
||||
{
|
||||
primaryID: issueVariant.value.primaryID,
|
||||
issueID: issueVariant.value.issueID,
|
||||
name: issueVariant.value.name,
|
||||
state: issueVariant.value.state,
|
||||
amount: issueVariant.value.amount,
|
||||
properties: issueVariant.value.properties,
|
||||
price: issueVariant.value.price,
|
||||
}
|
||||
)
|
||||
await getIssueVariantById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// get issue variant from id
|
||||
const getIssueVariantById = async () => {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueVariant/${chosenIssueVariantId.value}`
|
||||
);
|
||||
issueVariant.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// get issue from id
|
||||
const getIssueById = async () => {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueItem/${chosenIssueId.value}`
|
||||
);
|
||||
issue.value = response.data;
|
||||
nameOfVariant.value = issue.value.name;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
watch(deleteBool, confirmDeleteIssueVariant);
|
||||
|
||||
onMounted(() => {
|
||||
getIssueVariantById();
|
||||
getIssueById();
|
||||
triggerBackendCallsWithDelay(getIssueVariants);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "IssueVariant",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.information {
|
||||
display: flex;
|
||||
@ -71,8 +210,6 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.issue-variant-name {
|
||||
align-self: stretch;
|
||||
padding: 1rem 0;
|
||||
@ -96,7 +233,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
@ -151,18 +288,46 @@ export default {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.variantOf,
|
||||
.variantOf {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
line-height: normal;
|
||||
width: 30%;
|
||||
padding: 0 0;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
line-height: normal;
|
||||
width: 50%;
|
||||
width: 70%;
|
||||
padding: 0 0;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.issue-name-input {
|
||||
margin: 1rem;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.h2-input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.h2-input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.additional {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -210,4 +375,9 @@ export default {
|
||||
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<section v-if="!addBool"
|
||||
:class="['issue-variant-list-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
|
||||
<table class="data-table" id="issue-variants-table">
|
||||
<tbody>
|
||||
@ -18,59 +19,452 @@
|
||||
Amount</th>
|
||||
<th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
|
||||
</tr>
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<tr v-for="issueVar in issueVariants" :key="issueVar.primaryID"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td v-if="!editable"
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
<nuxt-link to="/issues" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
@click="goToChosenIssueVariant(issueVar.primaryID)">
|
||||
{{ issueVar.name }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td v-if="editable"
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
<input type="text" v-model="issueVar.name" @change="updateIssueVariant(issueVar)"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
|
||||
{{ issueVar.properties }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
|
||||
<input type="text" v-model="issueVar.properties" @change="updateIssueVariant(issueVar)"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable"
|
||||
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
|
||||
{{ issueVar.state }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
|
||||
<input type="text" v-model="issueVar.state" @change="updateIssueVariant(issueVar)"
|
||||
: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']">
|
||||
{{ issueVar.amount }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
|
||||
<input type="text" v-model="issueVar.amount" @change="updateIssueVariant(issueVar)"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ issueVar.price
|
||||
}}</td>
|
||||
<td v-if="editable" :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
|
||||
v-model="issueVar.price" @change="updateIssueVariant(issueVar)"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"><button
|
||||
:class="[darkMode ? 'deleteIssueVariant-darkmode' : 'deleteIssueVariant-lightmode']"
|
||||
@click="deleteIssueVariant(issueVar.primaryID)">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
|
||||
id="row-1">
|
||||
<td
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
...</td>
|
||||
<input type="text" v-model="newNameIV"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td
|
||||
:class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
|
||||
...</td>
|
||||
<input type="text" v-model="newPropertiesIV"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td
|
||||
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
|
||||
...</td>
|
||||
<input type="text" v-model="newStateIV"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td
|
||||
:class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
|
||||
...</td>
|
||||
<td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
<input type="text" v-model="newAmountIV"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
|
||||
v-model="newPriceIV"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
|
||||
:class="[darkMode ? 'saveIssueVariant-darkmode' : 'saveIssueVariant-lightmode']"
|
||||
@click="addIssueVariant()">Save</button> <button
|
||||
:class="[darkMode ? 'deleteLastIssueVariant-darkmode' : 'deleteLastIssueVariant-lightmode']"
|
||||
@click="deleteNewRow()">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="editable && !addBool" id="editIssueVariant">
|
||||
<button :class="[darkMode ? 'editIssueVariant-darkmode' : 'editIssueVariant-lightmode']"
|
||||
@click="addChecklistRow()">+</button>
|
||||
</section>
|
||||
<section v-if="addBool"
|
||||
:class="['issue-variant-list-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
|
||||
<table class="data-table" id="issue-variants-table">
|
||||
<tbody>
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th
|
||||
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
Name</th>
|
||||
<th
|
||||
:class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
|
||||
Properties</th>
|
||||
<th
|
||||
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
|
||||
State</th>
|
||||
<th
|
||||
:class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
|
||||
Amount</th>
|
||||
<th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
|
||||
</tr>
|
||||
<tr v-for="(newIV, index) in newVariants" :key="index"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
<input type="text" v-model="newIV.name"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td
|
||||
:class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
|
||||
<input type="text" v-model="newIV.properties"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td
|
||||
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
|
||||
<input type="text" v-model="newIV.state"
|
||||
: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="newIV.amount"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
|
||||
v-model="newIV.price"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
|
||||
:class="[darkMode ? 'deleteLastIssueVariant-darkmode' : 'deleteLastIssueVariant-lightmode']"
|
||||
@click="deleteIssueVariantFromNewTodos(index)">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section v-if="addBool" id="editIssueVariant">
|
||||
<button :class="[darkMode ? 'editIssueVariant-darkmode' : 'editIssueVariant-lightmode']"
|
||||
@click="addRowForNewIVs()">+</button>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewIssueVariant">
|
||||
<button :class="[darkMode ? 'saveNewIssueVariant-darkmode' : 'saveNewIssueVariant-lightmode']"
|
||||
@click="addIV()">Save</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, onMounted } 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 newName = computed(() => store.state.newNameII);
|
||||
const newType = computed(() => store.state.newTypeII);
|
||||
const newState = computed(() => store.state.newStateII);
|
||||
const newAmount = computed(() => store.state.newAmountII);
|
||||
const newProperties = computed(() => store.state.newPropertiesII);
|
||||
const chosenIssueId = computed(() => store.state.chosenIssueId);
|
||||
|
||||
const darkMode = ref(true)
|
||||
const addRow = ref(false);
|
||||
const issueVariants = ref([])
|
||||
const issue = ref({})
|
||||
const issues = ref([])
|
||||
const newNameIV = ref('');
|
||||
const newAmountIV = ref('');
|
||||
const newStateIV = ref('');
|
||||
const newPropertiesIV = ref('');
|
||||
const newPriceIV = ref('');
|
||||
const newVariants = reactive([]);
|
||||
|
||||
// delete new todo row
|
||||
const deleteNewRow = () => {
|
||||
newNameIV.value = '';
|
||||
newAmountIV.value = '';
|
||||
newPropertiesIV.value = '';
|
||||
newStateIV.value = '';
|
||||
newPriceIV.value = '';
|
||||
addRow.value = false;
|
||||
}
|
||||
|
||||
const goToChosenIssueVariant = (id) => {
|
||||
store.commit('setChosenIssueVariant', id);
|
||||
store.commit('changeToIssueItemVariant');
|
||||
};
|
||||
|
||||
const deleteIssueVariantFromNewTodos = (index) => {
|
||||
newVariants.splice(index, 1);
|
||||
}
|
||||
|
||||
// add issue variant
|
||||
const addIV = async () => {
|
||||
// check if all input data is valid
|
||||
if (newName.value.trim() === "") {
|
||||
alert("Please add an issue name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
if (!(issues.value.length == null)) {
|
||||
// check if issue name already exists
|
||||
issues.value.forEach(i => {
|
||||
if (i.name === newName.value) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter >= 1) {
|
||||
alert("This issue name already exists. Please choose an unique issue name or modify respectively delete the old one!");
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
let allFine = true;
|
||||
newVariants.forEach(variant => {
|
||||
if (variant.name.length === 0) {
|
||||
alert(`Please choose a name for all variants.`);
|
||||
allFine = false
|
||||
}
|
||||
})
|
||||
if (!allFine) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addII`,
|
||||
{
|
||||
name: newName.value,
|
||||
type: newType.value,
|
||||
state: newState.value,
|
||||
amount: newAmount.value,
|
||||
properties: newProperties.value,
|
||||
});
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToIssueItemList');
|
||||
newVariants.forEach(async variant => {
|
||||
try {
|
||||
const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addIssueVariant`,
|
||||
{
|
||||
issueID: response.data,
|
||||
name: variant.name,
|
||||
properties: variant.properties,
|
||||
state: variant.state,
|
||||
amount: variant.amount,
|
||||
price: variant.price,
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new row of variant for the new issue
|
||||
const addRowForNewIVs = async () => {
|
||||
newVariants.push({
|
||||
issueID: chosenIssueId.value,
|
||||
name: '',
|
||||
properties: '',
|
||||
state: '',
|
||||
amount: '',
|
||||
price: ''
|
||||
});
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateIssueVariant = async (todo) => {
|
||||
if (todo.name.length === 0) {
|
||||
alert(`Please add the missing variant name!`);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateIssueVariant`,
|
||||
{
|
||||
primaryID: todo.primaryID,
|
||||
issueID: todo.issueID,
|
||||
name: todo.name,
|
||||
properties: todo.properties,
|
||||
asset: todo.asset,
|
||||
state: todo.state,
|
||||
amount: todo.amount,
|
||||
price: todo.price,
|
||||
}
|
||||
);
|
||||
await getIssueById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new issue variant
|
||||
const addIssueVariant = async () => {
|
||||
// check if all input data is valid
|
||||
if (newNameIV.value.length === 0) {
|
||||
alert("Please choose a name for the new issue variant!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addIssueVariant`,
|
||||
{
|
||||
issueID: chosenIssueId.value,
|
||||
name: newNameIV.value,
|
||||
properties: newPropertiesIV.value,
|
||||
state: newStateIV.value,
|
||||
amount: newAmountIV.value,
|
||||
price: newPriceIV.value,
|
||||
});
|
||||
addRow.value = false;
|
||||
await getIssueVariantsById();
|
||||
newNameIV.value = '';
|
||||
newPropertiesIV.value = '';
|
||||
newStateIV.value = '';
|
||||
newAmountIV.value = '';
|
||||
newPriceIV.value = '';
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new row for the issue variant
|
||||
const addChecklistRow = async () => {
|
||||
if (addRow.value) {
|
||||
alert('Please confirm the last added row first.')
|
||||
return
|
||||
}
|
||||
addRow.value = true
|
||||
}
|
||||
|
||||
// get issue variants from id
|
||||
const getIssueVariantsById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIVs/${chosenIssueId.value}`
|
||||
);
|
||||
issueVariants.value = response.data;
|
||||
} catch (err) {
|
||||
// console.log(err.response.statusText);
|
||||
console.log(err.response);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// get issue from id
|
||||
const getIssueById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getIssueItem/${chosenIssueId.value}`
|
||||
);
|
||||
issue.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const deleteIssueVariant = async (id) => {
|
||||
if (confirm("Do you really want to delete this issue variant? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteIssueVariant/${id}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
await getIssueVariantsById();
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
//get all issue
|
||||
const getAllIssues = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssues`);
|
||||
issues.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getIssueVariantsById();
|
||||
getIssueById();
|
||||
triggerBackendCallsWithDelay(getAllIssues);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "IssueVariants",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
padding: 1.25rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
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;
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
.saveIssueVariant-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 3.25rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.saveIssueVariant-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 3.25rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.div-lightmode {
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@ -90,6 +484,64 @@ export default {
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.deleteLastIssueVariant-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 8rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.deleteLastIssueVariant-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 8rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.editIssueVariant-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);
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.editIssueVariant-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;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
@ -108,6 +560,38 @@ export default {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.deleteIssueVariant-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 8rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.deleteIssueVariant-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 8rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.issue-variant-list-information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 1.875rem;
|
||||
@ -131,8 +615,58 @@ th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.deleteIssueVariant-darkmode:hover,
|
||||
.deleteLastIssueVariant-darkmode:hover,
|
||||
|
||||
.saveIssueVariant-darkmode:hover,
|
||||
.editIssueVariant-darkmode:hover,
|
||||
.saveNewIssueVariant-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.deleteIssueVariant-lightmode:hover,
|
||||
.deleteLastIssueVariant-lightmode:hover,
|
||||
|
||||
.saveIssueVariant-lightmode:hover,
|
||||
.editIssueVariant-lightmode:hover,
|
||||
.saveNewIssueVariant-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.saveNewIssueVariant-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.saveNewIssueVariant-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
#saveNewIssueVariant {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#editIssueVariant {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.Properties {
|
||||
width: 30%;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.Properties-darkmode {
|
||||
@ -144,7 +678,7 @@ th {
|
||||
}
|
||||
|
||||
.Name {
|
||||
width: 30%;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.Name-darkmode {
|
||||
@ -180,7 +714,8 @@ th {
|
||||
}
|
||||
|
||||
.Price {
|
||||
width: 10%;
|
||||
width: 25%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -201,4 +736,9 @@ th {
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@ -129,7 +129,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 95%;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
@ -138,6 +138,7 @@ const confirmDeleteMVT = async () => {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteMaintenanceVisitTemplate/${chosenMVTId.value}`);
|
||||
store.commit('undoDelete');
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToTemplatelist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewItem">
|
||||
<button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Safe</button>
|
||||
<button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Save</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -135,7 +135,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 95%;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
@ -144,6 +144,7 @@ const confirmDeletePOT = async () => {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteProductionOrderTemplate/${chosenPOTId.value}`);
|
||||
store.commit('undoDelete');
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToTemplatelist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
|
||||
@ -277,6 +277,7 @@ const confirmDeleteSolution = async () => {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteSolution/${chosenSolutionId.value}`);
|
||||
store.commit('undoDelete');
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToSolutionlist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
|
||||
@ -137,7 +137,7 @@
|
||||
@click="addRowForNewSol()">+</button>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewSol">
|
||||
<button :class="[darkMode ? 'saveNewSol-darkmode' : 'saveNewSol-lightmode']" @click="addSol()">Safe</button>
|
||||
<button :class="[darkMode ? 'saveNewSol-darkmode' : 'saveNewSol-lightmode']" @click="addSol()">Save</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@ -126,7 +126,7 @@
|
||||
<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 ? 'deletePOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
|
||||
:class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
|
||||
@click="deletePOTTodoFromNewTodos(index)">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
@ -138,7 +138,7 @@
|
||||
@click="addRowForNewPOT()">+</button>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewPOT">
|
||||
<button :class="[darkMode ? 'saveNewPOT-darkmode' : 'saveNewPOT-lightmode']" @click="addPOT()">Safe</button>
|
||||
<button :class="[darkMode ? 'saveNewPOT-darkmode' : 'saveNewPOT-lightmode']" @click="addPOT()">Save</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -619,7 +619,6 @@ th {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
|
||||
.savePOTTodos-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
|
||||
@ -138,7 +138,7 @@
|
||||
@click="addRowForNewMVT()">+</button>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewMVT">
|
||||
<button :class="[darkMode ? 'saveNewMVT-darkmode' : 'saveNewMVT-lightmode']" @click="addMVT()">Safe</button>
|
||||
<button :class="[darkMode ? 'saveNewMVT-darkmode' : 'saveNewMVT-lightmode']" @click="addMVT()">Save</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
@ -100,7 +100,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0 1.875rem;
|
||||
padding: 0.8rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user