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

finished customer pages

Browse Source
This commit is contained in:
selina.mail
2024-04-07 14:14:02 +02:00
parent d0b867404e
commit a02cbbb187
49 changed files with 4392 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
components/server/CustomerDepartmentEmployeeList.vue
View File

@ -16,19 +16,30 @@
:class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
Pronouns</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<tr v-for="empl in employees" :key="empl.primaryID"
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
...</td>
<nuxt-link to="/customers" id="nuxt-link" class="button"
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
@click="goToChosenEmployee(empl.primaryID)">
{{ empl.primaryID }}
</nuxt-link>
</td>
<td
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
...</td>
<nuxt-link to="/customers" id="nuxt-link" class="button"
:class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
@click="goToChosenEmployee(empl.primaryID)">
{{ empl.name }}
</nuxt-link>
</td>
<td
:class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">
...</td>
{{ empl.jobTitle }}</td>
<td
:class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
...</td>
{{ empl.pronouns }}</td>
</tr>
</table>
</section>
@ -39,12 +50,35 @@
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 chosenCustomerId = computed(() => store.state.chosenCustomerId);
const chosenDepartmentId = computed(() => store.state.chosenDepartmentId);
const employeesByCustomer = ref([]);
const employees = ref([]);
const darkMode = ref('')
const goToChosenEmployee = (id) => {
store.commit('setChosenCustomerEmployee', id);
store.commit('changeToCustomerEmployee');
};
//get employees by the selected customer
const getEmployees = async () => {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedCustEmployeeByCustomer/${chosenCustomerId.value}`);
employeesByCustomer.value = response.data;
} catch (err) {
console.log(err.response.statusText);
}
// filter those with the chosen department id
employees.value = employeesByCustomer.value.filter(empl => empl.departmentID === chosenDepartmentId.value);
}
const getSession = async () => {
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
@ -65,7 +99,8 @@ function getItem(item) {
watch(modeChanged, getSession)
onMounted(async () => {
await getSession();
getSession();
await getEmployees();
});
</script>
@ -96,7 +131,17 @@ export default {
background-color: #ffffff;
}
#nuxt-link {
text-decoration: none;
}
.nuxt-link-darkmode {
color: white;
}
.nuxt-link-lightmode {
color: #000;
}
.label {
padding: 1.25rem 0;