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

implemented instance lists and pot, todos still missing

Browse Source
This commit is contained in:
selina.mail
2024-03-28 23:10:29 +01:00
parent 979768e52e
commit 3c063fddca
34 changed files with 2668 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
components/server/ProductionOrdersInstanceTable.vue
View File

@ -1,12 +1,19 @@
<template>
<section v-if="searchable" :class="['poi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
<div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">State</div>
<input v-model="stateSearchFilter" @change="filterPOIByState()"
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
</section>
<section v-if="filtered" :class="['poi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
<div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">User</div>
<input v-model="userSearchFilter" @change="filterInstancesByUser()"
: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']">Instances:</div>
<table class="data-table" name="production-orders-instance-table">
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
ID</th>
<th
:class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
Ticket No.</th>
@ -24,26 +31,29 @@
Completion date</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
...</td>
<tr v-for="instance in productionOrderInstances" :key="instance.ticketNumber"
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
...</td>
<nuxt-link to="/productionOrders" id="nuxt-link" class="button"
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
@click="goToChosenPOI(instance.ticketNumber)">
{{ instance.ticketNumber }}
</nuxt-link>
</td>
<td
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
...</td>
{{ instance.asset }}</td>
<td
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
...</td>
{{ instance.state }}</td>
<td
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
...</td>
{{ instance.creationDate }}</td>
<td
:class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
{{ instance.completionDate }}</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ instance.user }}</td>
</tr>
</tbody>
</table>
@ -55,11 +65,99 @@
import { ref, onMounted, watch } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
import Axios from '../axios.config.js';
import clientsideConfig from '../../clientsideConfig.js';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const chosenPOTId = computed(() => store.state.chosenPOTId);
const searchable = computed(() => store.state.searchable);
const filtered = computed(() => store.state.filtered);
const userSearchFilter = ref('');
const stateSearchFilter = ref('');
const productionOrderInstances = ref([]);
const darkMode = ref('');
const pot = ref({});
const POIByUser = ref([]);
const POIByState = ref([]);
const goToChosenPOI = (id) => {
store.commit('setChosenPOI', id);
store.commit('changeToInstance');
};
//get all production order instances
const getProductionOrderInstances = async () => {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByPOT/${pot.value.templateID}`);
productionOrderInstances.value = response.data;
} catch (err) {
console.log(err.response.statusText);
}
}
// update search term
const updateSearchTerm = async () => {
stateSearchFilter.value = '';
await getProductionOrderInstances();
}
// update filter term
const updateFilterTerm = async () => {
userSearchFilter.value = '';
await getProductionOrderInstances();
}
// get production order template from id
const getPOTById = async () => {
try {
const response = await Axios.get(
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
);
pot.value = response.data;
await getProductionOrderInstances();
} catch (err) {
console.log(err.response.statusText);
}
}
//get all instances based on the searched state
const filterPOIByState = async () => {
if (stateSearchFilter.value === '') {
await getProductionOrderInstances();
} else {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByState/${stateSearchFilter.value}`);
POIByState.value = response.data;
productionOrderInstances.value = filterObjectsWithMatchingIds(productionOrderInstances.value, POIByState.value);
} catch (err) {
console.log(err.response.statusText);
}
}
}
//get all instances based on the searched user
const filterInstancesByUser = async () => {
if (userSearchFilter.value === '') {
await getProductionOrderInstances();
} else {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByUser/${userSearchFilter.value}`);
POIByUser.value = response.data;
productionOrderInstances.value = filterObjectsWithMatchingIds(productionOrderInstances.value, POIByUser.value);
} catch (err) {
console.log(err.response.statusText);
}
}
}
const filterObjectsWithMatchingIds = (arr1, arr2) => {
return arr1.filter(obj1 => {
return arr2.some(obj2 => obj2.ticketNumber === obj1.ticketNumber);
});
};
const getSession = async () => {
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@ -79,9 +177,12 @@ function getItem(item) {
}
watch(modeChanged, getSession)
watch(searchable, updateSearchTerm);
watch(filtered, updateFilterTerm);
onMounted(async () => {
await getSession();
getSession();
await getPOTById();
});
</script>
@ -171,18 +272,6 @@ th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.ID {
width: 15.83%;
}
.ID-darkmode {
border-right: 0.0625rem solid #000000;
}
.ID-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.TicketNo {
width: 15.83%;
}
@ -197,7 +286,7 @@ th {
.Asset {
width: 15.83%;
width: 31.66%;
}
.Asset-darkmode {
@ -266,4 +355,73 @@ th {
.label-lightmode {
color: #000;
}
.data-darkmode {
background-color: #212121;
color: #fff;
}
.data-lightmode {
background-color: #EBEBEB;
color: #000;
}
.poi-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;
}
.input {
border: none;
}
#nuxt-link {
text-decoration: none;
}
.nuxt-link-darkmode {
color: white;
}
.nuxt-link-lightmode {
color: #000;
}
.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;
}
.instanceLabel {
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;
}
.section-darkmode {
background-color: #2c2c2c;
}
.section-lightmode {
background-color: #fff;
}
</style>