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

141
components/server/SolutionTable.vue
View File

@ -1,4 +1,9 @@
<template>
<section v-if="searchable" :class="['solution-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
<div :class="['customerLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</div>
<input v-model="solutionSearchFilter" @change="searchSolution()"
: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="solution-table">
@ -25,7 +30,12 @@
{{ sol.customer }}</td>
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
{{ sol.solutionName }}</td>
<nuxt-link to="/solutions" id="nuxt-link" class="button"
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
@click="goToChosenSolution(sol.primaryID)">
{{ sol.solutionName }}
</nuxt-link>
</td>
<td
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
{{ sol.assetName }}</td>
@ -38,28 +48,79 @@
</table>
</div>
</template>
<script setup>
import { ref, onMounted } 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 goToChosenSolution = (id) => {
store.commit('setChosenSolution', id);
store.commit('changeToSolution');
};
const clientFilter = computed(() => store.state.filteredByClient);
const searchable = computed(() => store.state.searchable);
const solutionSearchFilter = ref('');
const darkMode = ref(true)
const solutions = ref([]);
// update search term
const updateSearchTerm = async () => {
solutionSearchFilter.value = '';
await getSolutions();
}
//get all solutions
const getSolutions = async () => {
if (!(clientFilter.value === '')) {
await getFilteredSolutionsByClient();
} else {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
solutions.value = response.data;
} catch (err) {
console.log(err.response.statusText);
}
}
}
//get all solutions based on the searched client
const getFilteredSolutionsByClient = async () => {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByClient/${clientFilter.value}`);
solutions.value = response.data;
} catch (err) {
console.log(err.response.statusText);
}
}
onMounted(() => {
getSolutions();
//get all solutions based on the searched solution name
const searchSolution = async () => {
if (solutionSearchFilter.value === '') {
await getSolutions();
} else {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsBySolution/${solutionSearchFilter.value}`);
solutions.value = response.data;
} catch (err) {
console.log(err.response.statusText);
}
}
}
watch(clientFilter, getSolutions);
watch(searchable, updateSearchTerm);
onMounted(async () => {
await getSolutions();
});
</script>
@ -67,9 +128,9 @@ onMounted(() => {
export default {
name: "SolutionTable",
};
</script>
</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;
@ -118,6 +178,32 @@ export default {
border-bottom: 0.0625rem solid #8e8e8e;
}
.input {
border: none;
}
.data-darkmode {
background-color: #212121;
color: #fff;
}
.data-lightmode {
background-color: #EBEBEB;
color: #000;
}
.solution-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;
}
.tr-darkmode {
border-top: 0.0625rem solid #000000;
}
@ -126,6 +212,17 @@ export default {
border-top: 0.0625rem solid #8e8e8e;
}
.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;
}
th,
td {
height: 1.875rem;
@ -135,6 +232,14 @@ td {
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.section-darkmode {
background-color: #2c2c2c;
}
.section-lightmode {
background-color: #fff;
}
.th-darkmode,
.td-darkmode {
color: #ffffff;
@ -149,6 +254,22 @@ th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
#nuxt-link {
text-decoration: none;
color: white;
}
.customerLabel {
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;
}
.Customer {
width: 33.3%;
}