basic functionality pot implemented
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section v-if="!addAssetBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 v-if="!editable" :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
|
||||
item.assetName }}</h2>
|
||||
<input v-if="editable" v-model="item.assetName" @change="updateConfigItem()"
|
||||
@ -77,7 +77,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addAssetBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<input v-model="newAssetName" @change="updateAsset()"
|
||||
:class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="asset-data">
|
||||
@ -153,10 +153,10 @@ import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.assetEditable);
|
||||
const editable = computed(() => store.state.editable);
|
||||
const chosenAssetId = computed(() => store.state.chosenAssetId);
|
||||
const deleteAssetBool = computed(() => store.state.deleteAsset);
|
||||
const addAssetBool = computed(() => store.state.newAsset);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
const addBool = computed(() => store.state.new);
|
||||
|
||||
const darkMode = ref(true);
|
||||
const item = ref({});
|
||||
@ -176,7 +176,7 @@ const newState = ref('');
|
||||
|
||||
// get config item from id
|
||||
const getItemById = async () => {
|
||||
if (!addAssetBool.value) {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
|
||||
@ -200,7 +200,7 @@ const updateAsset = () => {
|
||||
description: newDescription.value,
|
||||
notes: newNotes.value,
|
||||
state: newState.value
|
||||
};
|
||||
};
|
||||
store.commit('updateAssetComponent', asset);
|
||||
}
|
||||
|
||||
@ -275,17 +275,17 @@ const getCustomers = async () => {
|
||||
}
|
||||
|
||||
const confirmDeleteAsset = async () => {
|
||||
if (deleteAssetBool.value === true) {
|
||||
if (deleteBool.value === true) {
|
||||
if (confirm("Do you really want to delete this config item? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteConfigItem/${chosenAssetId.value}`);
|
||||
store.commit('undoDeleteAsset');
|
||||
store.commit('undoDelete');
|
||||
store.commit('changeToAssetlist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
} else {
|
||||
store.commit('undoDeleteAsset');
|
||||
store.commit('undoDelete');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -330,7 +330,7 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
watch(deleteAssetBool, confirmDeleteAsset);
|
||||
watch(deleteBool, confirmDeleteAsset);
|
||||
|
||||
onMounted(() => {
|
||||
getItemById();
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section v-if="assetSearchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="searchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
|
||||
<input v-model="assetSearchFilter" @change="searchConfigItem()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
@ -31,9 +31,6 @@
|
||||
</td>
|
||||
<td
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
<!-- <router-link to="/assets" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']" > {{
|
||||
item.assetName }} </router-link> -->
|
||||
<nuxt-link to="/assets" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
@click="goToChosenAsset(item.primaryID)">
|
||||
@ -66,8 +63,8 @@ const goToChosenAsset = (id) => {
|
||||
store.commit('setChosenAsset', id);
|
||||
store.commit('changeToAsset');
|
||||
};
|
||||
const clientFilter = computed(() => store.state.filteredAssetbyClient);
|
||||
const assetSearchable = computed(() => store.state.assetSearchable);
|
||||
const clientFilter = computed(() => store.state.filteredByClient);
|
||||
const searchable = computed(() => store.state.searchable);
|
||||
|
||||
const assetSearchFilter = ref('');
|
||||
const darkMode = ref(true)
|
||||
@ -118,7 +115,7 @@ const searchConfigItem = async () => {
|
||||
}
|
||||
|
||||
watch(clientFilter, getConfigItems);
|
||||
watch(assetSearchable, updateSearchTerm);
|
||||
watch(searchable, updateSearchTerm);
|
||||
|
||||
onMounted(async () => {
|
||||
await getConfigItems();
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section v-if="hardwareBoolean && !addAssetBool"
|
||||
<section v-if="hardwareBoolean && !addBool"
|
||||
:class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
|
||||
<div class="asset-data">
|
||||
@ -54,7 +54,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addAssetBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="addBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
|
||||
<div class="asset-data">
|
||||
<div class="model-CPU">
|
||||
@ -111,9 +111,9 @@ import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.assetEditable);
|
||||
const editable = computed(() => store.state.editable);
|
||||
const chosenAssetId = computed(() => store.state.chosenAssetId);
|
||||
const addAssetBool = computed(() => store.state.newAsset);
|
||||
const addBool = computed(() => store.state.new);
|
||||
|
||||
const newHardwareBool = ref(true);
|
||||
const newModel = ref('');
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section v-if="networkBoolean && !addAssetBool"
|
||||
<section v-if="networkBoolean && !addBool"
|
||||
:class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
|
||||
<div class="asset-data">
|
||||
@ -37,7 +37,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addAssetBool" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="addBool" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
|
||||
<div class="asset-data">
|
||||
<div class="IPv4-MAC">
|
||||
@ -66,7 +66,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addAssetBool" id="saveNewItem">
|
||||
<section v-if="addBool" id="saveNewItem">
|
||||
<button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Safe</button>
|
||||
</section>
|
||||
</template>
|
||||
@ -80,9 +80,9 @@ import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.assetEditable);
|
||||
const editable = computed(() => store.state.editable);
|
||||
const chosenAssetId = computed(() => store.state.chosenAssetId);
|
||||
const addAssetBool = computed(() => store.state.newAsset);
|
||||
const addBool = computed(() => store.state.new);
|
||||
const newAssetName = computed(() => store.state.newAssetName);
|
||||
const newCustomerID = computed(() => store.state.newCustomerID);
|
||||
const newCustomer = computed(() => store.state.newCustomer);
|
||||
@ -120,7 +120,7 @@ const configItems = ref([]);
|
||||
|
||||
// get config item from id
|
||||
const getItemById = async () => {
|
||||
if (!addAssetBool.value) {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
|
||||
@ -332,7 +332,7 @@ const addItem = async () => {
|
||||
MAC: newMAC.value,
|
||||
subnetmask: newSubnetmask.value,
|
||||
});
|
||||
store.commit('resetAssetStore');
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToAssetlist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
|
||||
@ -1,11 +1,70 @@
|
||||
<template>
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
|
||||
<section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 v-if="!editable" :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
|
||||
pot.name }}</h2>
|
||||
<input v-if="editable" v-model="pot.name" @change="updatePOT()"
|
||||
:class="['data', 'pot-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="production-orders-template-data">
|
||||
<div class="client-ID">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Client:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ pot.customer }}</pre>
|
||||
<select v-if="editable" id="customersDropDownChosenCI" v-model="pot.customer"
|
||||
@change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
{{ cust.customername }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="data-field" id="ID">
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ pot.templateID }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user">
|
||||
<div class="data-field" id="empty">
|
||||
|
||||
</div>
|
||||
<div class="data-field" id="user">
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ pot.user }}</pre>
|
||||
<input v-if="editable" v-model="pot.user" @change="updatePOT()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="production-orders-template-data">
|
||||
<div class="additional">
|
||||
<div class="description">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
|
||||
<input v-model="pot.description" :readonly="!editable" @change="updatePOT()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
|
||||
</div>
|
||||
</div>
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<input v-model="pot.notes" :readonly="!editable" @change="updatePOT()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<input v-model="newName" @change="updateProductionOrder()"
|
||||
:class="['data', 'production-orders-template-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="production-orders-template-data">
|
||||
<div class="client-ID">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</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 class="data-field" id="ID">
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
|
||||
@ -18,7 +77,8 @@
|
||||
</div>
|
||||
<div class="data-field" id="user">
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
<input v-model="newUser" @change="updateProductionOrder()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -26,24 +86,190 @@
|
||||
<div class="additional">
|
||||
<div class="description">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
|
||||
<input v-model="newDescription" @change="updateProductionOrder()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
|
||||
</div>
|
||||
</div>
|
||||
<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="newNotes" @change="updateProductionOrder()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
|
||||
</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 darkMode = ref(true)
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.editable);
|
||||
const chosenPOTId = computed(() => store.state.chosenPOTId);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
const addBool = computed(() => store.state.new);
|
||||
|
||||
const darkMode = ref(true);
|
||||
const pot = ref({});
|
||||
const customers = ref([]);
|
||||
const customer = ref({});
|
||||
const productionOrderTemplates = ref([]);
|
||||
|
||||
const newName = ref('');
|
||||
const newCustomerID = ref('');
|
||||
const newCustomer = ref('');
|
||||
const newUser = ref('');
|
||||
const newDescription = ref('');
|
||||
const newNotes = ref('');
|
||||
|
||||
//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);
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDeletePOT = async () => {
|
||||
if (deleteBool.value === true) {
|
||||
if (confirm("Do you really want to delete this production order template? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteProductionOrderTemplate/${chosenPOTId.value}`);
|
||||
store.commit('undoDelete');
|
||||
store.commit('changeToTemplatelist');
|
||||
} catch (err) {
|
||||
// console.log(err.response.statusText);
|
||||
console.log(err);
|
||||
}
|
||||
} else {
|
||||
store.commit('undoDelete');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all productionOrder templates todos
|
||||
const getProductionOrderTemplates = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
|
||||
productionOrderTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
// console.log(err.response.statusText);
|
||||
console.log(err);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//update data
|
||||
const updatePOT = async () => {
|
||||
if (pot.value.name.trim() === "") {
|
||||
alert("Please add a production order template name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if production order template name already exists
|
||||
productionOrderTemplates.value.forEach(p => {
|
||||
if (p.name === pot.value.name) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 2) {
|
||||
alert("This production order template name already exists. Please choose an unique production order template name or modify respectively delete the old one!");
|
||||
pot.value.name = '';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateProductionOrderTemplate`,
|
||||
{
|
||||
templateID: pot.value.templateID,
|
||||
name: pot.value.name,
|
||||
customerID: pot.value.customerID,
|
||||
customer: pot.value.customer,
|
||||
lastView: pot.value.lastView,
|
||||
user: pot.value.user,
|
||||
description: pot.value.description,
|
||||
notes: pot.value.notes,
|
||||
}
|
||||
)
|
||||
await getPOTById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update customerid if customer was changed
|
||||
const updateCustomerID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${pot.value.customer}`);
|
||||
customer.value = response.data;
|
||||
pot.value.customerID = customer.value.customerID;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
await updatePOT();
|
||||
}
|
||||
|
||||
// get production order template from id
|
||||
const getPOTById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
|
||||
);
|
||||
pot.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
updateProductionOrder();
|
||||
}
|
||||
|
||||
// update production order template fields in the store
|
||||
const updateProductionOrder = () => {
|
||||
const productionOrderTemplate = {
|
||||
name: newName.value,
|
||||
customerId: newCustomerID.value,
|
||||
customer: newCustomer.value,
|
||||
user: newUser.value,
|
||||
description: newDescription.value,
|
||||
notes: newNotes.value
|
||||
};
|
||||
store.commit('updateProductionOrderTemplateComponent', productionOrderTemplate);
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
watch(deleteBool, confirmDeletePOT);
|
||||
|
||||
onMounted(() => {
|
||||
getPOTById();
|
||||
getProductionOrderTemplates();
|
||||
triggerBackendCallsWithDelay(getCustomers);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -73,7 +299,15 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.pot-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;
|
||||
}
|
||||
|
||||
.production-orders-template-name {
|
||||
align-self: stretch;
|
||||
@ -84,6 +318,16 @@ export default {
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.production-orders-template-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-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
@ -98,7 +342,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;
|
||||
}
|
||||
@ -137,6 +381,18 @@ export default {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.h2-input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.h2-input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.production-orders-template-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -145,6 +401,22 @@ export default {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.client-ID,
|
||||
.user {
|
||||
display: flex;
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
<template>
|
||||
<section v-if="searchable" :class="['pot-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
|
||||
<input v-model="potSearchFilter" @change="searchPOT()"
|
||||
: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" name="production-orders-template-table">
|
||||
@ -23,7 +28,12 @@
|
||||
{{ template.customer }}</td>
|
||||
<td
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
{{ template.name }}</td>
|
||||
<nuxt-link to="/productionOrders" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
@click="goToChosenPOT(template.templateID)">
|
||||
{{ template.name }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
<td
|
||||
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||
{{ template.templateID }}</td>
|
||||
@ -36,25 +46,75 @@
|
||||
|
||||
|
||||
<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';
|
||||
|
||||
const darkMode = ref(true)
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
const goToChosenPOT = (id) => {
|
||||
store.commit('setChosenPOT', id);
|
||||
store.commit('changeToTemplate');
|
||||
};
|
||||
|
||||
const clientFilter = computed(() => store.state.filteredByClient);
|
||||
const searchable = computed(() => store.state.searchable);
|
||||
|
||||
const potSearchFilter = ref('');
|
||||
const darkMode = ref(true);
|
||||
const productionOrderTemplates = ref([]);
|
||||
|
||||
//get all productionOrder templates
|
||||
const getProductionOrderTemplates = async () => {
|
||||
if (!(clientFilter.value === '')) {
|
||||
await getFilteredPOTByClient();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
|
||||
productionOrderTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all productionOrder templates based on the searched pot name
|
||||
const searchPOT = async () => {
|
||||
if (potSearchFilter.value === '') {
|
||||
await getProductionOrderTemplates();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOTsByPOT/${potSearchFilter.value}`);
|
||||
productionOrderTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update search term
|
||||
const updateSearchTerm = async () => {
|
||||
potSearchFilter.value = '';
|
||||
await getProductionOrderTemplates();
|
||||
}
|
||||
|
||||
//get all productionOrder templates based on the searched client
|
||||
const getFilteredPOTByClient = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOTsByClient/${clientFilter.value}`);
|
||||
productionOrderTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getProductionOrderTemplates();
|
||||
watch(clientFilter, getProductionOrderTemplates);
|
||||
watch(searchable, updateSearchTerm);
|
||||
|
||||
onMounted(async () => {
|
||||
await getProductionOrderTemplates();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -66,6 +126,18 @@ export default {
|
||||
|
||||
|
||||
<style scoped>
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -79,6 +151,17 @@ export default {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
@ -94,6 +177,11 @@ export default {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -108,6 +196,16 @@ export default {
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
@ -130,6 +228,19 @@ td {
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.pot-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;
|
||||
}
|
||||
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
@ -201,4 +312,16 @@ th {
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}</style>
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section v-if="softwareBoolean && !addAssetBool"
|
||||
<section v-if="softwareBoolean && !addBool"
|
||||
:class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
|
||||
<div class="asset-data">
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addAssetBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="addBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
|
||||
<div class="asset-data">
|
||||
<table class="data-table" id="asset-table-no-client">
|
||||
@ -89,9 +89,9 @@ import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.assetEditable);
|
||||
const editable = computed(() => store.state.editable);
|
||||
const chosenAssetId = computed(() => store.state.chosenAssetId);
|
||||
const addAssetBool = computed(() => store.state.newAsset);
|
||||
const addBool = computed(() => store.state.new);
|
||||
|
||||
const newSoftwareBool = ref(true);
|
||||
const newSoftware = ref('');
|
||||
|
||||
@ -30,13 +30,97 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<section v-if="addBool" id="saveNewPOT">
|
||||
<button :class="[darkMode ? 'saveNewPOT-darkmode' : 'saveNewPOT-lightmode']" @click="addPOT()">Safe</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 newNamePOT = computed(() => store.state.newNamePOT);
|
||||
const newCustomerIDPOT = computed(() => store.state.newCustomerIDPOT);
|
||||
const newCustomerPOT = computed(() => store.state.newCustomerPOT);
|
||||
const newLastViewPOT = computed(() => store.state.newLastViewPOT);
|
||||
const newUserPOT = computed(() => store.state.newUserPOT);
|
||||
const newDescriptionPOT = computed(() => store.state.newDescriptionPOT);
|
||||
const newNotesPOT = computed(() => store.state.newNotesPOT);
|
||||
|
||||
const darkMode = ref(true)
|
||||
const productionOrderTemplates = ref([]);
|
||||
|
||||
// add new production order template
|
||||
const addPOT = async () => {
|
||||
// check if all input data is valid
|
||||
if (newNamePOT.value.trim() === "") {
|
||||
alert("Please add a production order template name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
if (!(productionOrderTemplates.value.length == null)) {
|
||||
// check if production order template name already exists
|
||||
productionOrderTemplates.value.forEach(pot => {
|
||||
if (pot.name === newNamePOT.value) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 1) {
|
||||
alert("This production order template name already exists. Please choose an unique production order template name or modify respectively delete the old one!");
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (newCustomerPOT.value.length === 0) {
|
||||
alert("Please choose a client!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addPOT`,
|
||||
{
|
||||
name: newNamePOT.value,
|
||||
customerID: newCustomerIDPOT.value,
|
||||
customer: newCustomerPOT.value,
|
||||
lastView: newLastViewPOT.value,
|
||||
user: newUserPOT.value,
|
||||
description: newDescriptionPOT.value,
|
||||
notes: newNotesPOT.value,
|
||||
});
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToTemplatelist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
//get all production order templates
|
||||
const getProductionOrderTemplates = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
|
||||
productionOrderTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
triggerBackendCallsWithDelay(getProductionOrderTemplates);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -183,4 +267,40 @@ th {
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.saveNewPOT-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);
|
||||
}
|
||||
|
||||
.saveNewPOT-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);
|
||||
}
|
||||
|
||||
.saveNewPOT-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.saveNewPOT-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#saveNewPOT {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user