adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

add config item

Browse Source
This commit is contained in:
selina.mail
2024-02-26 12:31:58 +01:00
parent 13096ce679
commit 49fb1ef397
15 changed files with 940 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
components/server/Asset.vue
View File

@ -1,6 +1,7 @@
<template>
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
<h2 v-if="!editable" :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ item.assetName }}</h2>
<section v-if="!addAssetBool" :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()"
:class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
<div class="asset-data">
@ -9,8 +10,6 @@
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
<!-- <input v-if="editable" v-model="item.customer" @change="updateCustomerID()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> -->
<select v-if="editable" id="customersDropDownChosenCI" v-model="item.customer"
@change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
<option v-for="cust in customers" :key="cust.primaryID">
@ -77,7 +76,72 @@
</div>
</div>
</div>
</section>
<section v-if="addAssetBool" :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">
<div class="client-location">
<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="location">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
<input v-model="newLocation" @change="updateAsset()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
<div class="info">
<div class="id-type">
<div class="data-field" id="id">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> ... </pre>
</div>
<div class="data-field" id="type">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
<input v-model="newType" @change="updateAsset()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
<div class="remoteLocation-state">
<div class="data-field" id="remote-location">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
<input v-model="newRemoteLocation" @change="updateAsset()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
<div class="data-field" id="state">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
<input v-model="newState" @change="updateAsset()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
</div>
<div class="rectangle-container">
<div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
</div>
</div>
<div class="asset-data">
<div class="additional">
<div class="description">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
<input v-model="newDescription" @change="updateAsset()"
: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="newNotes" @change="updateAsset()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
</div>
</div>
</div>
</section>
</template>
@ -91,26 +155,55 @@ import { computed } from 'vue';
const store = useStore();
const editable = computed(() => store.state.assetEditable);
const chosenAssetId = computed(() => store.state.chosenAssetId);
const deleteAssetBool = computed(() => store.state.deleteAsset)
const deleteAssetBool = computed(() => store.state.deleteAsset);
const addAssetBool = computed(() => store.state.newAsset);
const darkMode = ref(true)
const darkMode = ref(true);
const item = ref({});
const customer = ref({});
const configItems = ref([]);
const customers = ref([]);
const newAssetName = ref('');
const newCustomerID = ref('');
const newCustomer = ref('');
const newLocation = ref('');
const newRemoteLocation = ref('');
const newType = ref('');
const newDescription = ref('');
const newNotes = ref('');
const newState = ref('');
// get config item from id
const getItemById = async () => {
try {
const response = await Axios.get(
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
);
item.value = response.data;
} catch (err) {
console.log(err.response.statusText);
if (!addAssetBool.value) {
try {
const response = await Axios.get(
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
);
item.value = response.data;
} catch (err) {
console.log(err.response.statusText);
}
}
}
// update asset fields in the store
const updateAsset = () => {
const asset = {
assetName: newAssetName.value,
customerId: newCustomerID.value,
customer: newCustomer.value,
location: newLocation.value,
remoteLocation: newRemoteLocation.value,
type: newType.value,
description: newDescription.value,
notes: newNotes.value,
state: newState.value
};
store.commit('updateAssetComponent', asset);
}
//update data
const updateConfigItem = async () => {
if (item.value.assetName.trim() === "") {
@ -124,8 +217,9 @@ const updateConfigItem = async () => {
counter += 1;
}
});
if (counter == 2) {
if (counter == 1) {
alert("This asset name already exists. Please choose an unique asset name or modify respectively delete the old one!");
item.value.assetName = '';
return;
}
try {
@ -218,12 +312,30 @@ const updateCustomerID = async () => {
await updateConfigItem();
}
// 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);
}
updateAsset();
}
// include delay to avoid 503 error
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
setTimeout(() => {
fetchDataFunc();
}, 1500);
}
watch(deleteAssetBool, confirmDeleteAsset);
onMounted(() => {
getItemById();
getConfigItems();
getCustomers();
triggerBackendCallsWithDelay(getCustomers);
});
</script>
@ -241,7 +353,6 @@ export default {
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
padding: 1.25rem 1.875rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);