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

added functionality for mvt table

Browse Source
This commit is contained in:
selina.mail
2024-02-29 09:31:05 +01:00
parent df60461a53
commit 1e001bb4a1
10 changed files with 374 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
components/server/MaintenanceVisitsTemplateTable.vue
View File

@ -1,4 +1,9 @@
<template>
<section v-if="searchable" :class="['mvt-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
<div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
<input v-model="mvtSearchFilter" @change="searchMVT()"
: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="maintenance-visits-template-table">
@ -26,7 +31,11 @@
{{ template.customer }}</td>
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
{{ template.name }}</td>
<nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
@click="goToChosenMVT(template.checklistID)">
{{ template.name }}
</nuxt-link></td>
<td
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
{{ template.checklistID }}</td>
@ -42,25 +51,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';
// get accesss to the store
const store = useStore()
const goToChosenMVT = (id) => {
store.commit('setChosenPOT', id);
store.commit('changeToTemplate');
};
const clientFilter = computed(() => store.state.filteredByClient);
const searchable = computed(() => store.state.searchable);
const mvtSearchFilter = ref('');
const darkMode = ref(true)
const maintenanceVisitTemplates = ref([]);
//get all maintenance visit templates
const getMaintenanceVisitTemplates = async () => {
if (!(clientFilter.value === '')) {
await getFilteredMVTByClient();
} else {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
maintenanceVisitTemplates.value = response.data;
} catch (err) {
console.log(err.response.statusText);
}
}
}
//get all maintenance visit templates based on the searched mvt name
const searchMVT = async () => {
if (mvtSearchFilter.value === '') {
await getMaintenanceVisitTemplates();
} else {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVTsByMVT/${mvtSearchFilter.value}`);
maintenanceVisitTemplates.value = response.data;
} catch (err) {
console.log(err.response.statusText);
}
}
}
// update search term
const updateSearchTerm = async () => {
mvtSearchFilter.value = '';
await getMaintenanceVisitTemplates();
}
//get all maintenance visit templates based on the searched client
const getFilteredMVTByClient = async () => {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVTsByClient/${clientFilter.value}`);
maintenanceVisitTemplates.value = response.data;
} catch (err) {
console.log(err.response.statusText);
}
}
onMounted(() => {
getMaintenanceVisitTemplates();
watch(searchable, updateSearchTerm);
watch(clientFilter, getMaintenanceVisitTemplates);
onMounted(async () => {
await getMaintenanceVisitTemplates();
});
</script>
@ -79,13 +138,30 @@ 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;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.section-darkmode {
background-color: #2c2c2c;
}
.section-lightmode {
background-color: #fff;
}
.data-darkmode {
background-color: #212121;
color: #fff;
}
.data-lightmode {
background-color: #EBEBEB;
color: #000;
}
.div-darkmode {
background-color: #2c2c2c;
}
@ -94,6 +170,37 @@ export default {
background-color: #fff;
}
.input {
border: none;
}
#nuxt-link {
text-decoration: none;
color: white;
}
.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;
}
.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;
}
.data-table {
width: 100%;
padding: 0 0.625rem;
@ -101,6 +208,18 @@ export default {
border-collapse: collapse;
}
.mvt-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;
}
.table-row {
display: flex;
flex-direction: row;
@ -220,4 +339,5 @@ th {
.label-lightmode {
color: #000;
}</style>
}
</style>