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

Merge branch 'main' of https://git.tueit.de/jo.kuehner/TueIT_App into main

Browse Source
This commit is contained in:
Johanna Kuehner
2024-03-04 19:31:17 +01:00
parent 6a4a53ce4b 3a1e468789
commit 889eb3571f
82 changed files with 5647 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
components/server/ProductionOrdersTemplateTable.vue
View File

@ -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']">Template:</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>