copenhagentruckwash/pleno-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor MyWashStart.vue and SelfServeTryModal.vue to optimize rule fetching logic

Browse Source 
- Replaced pre-fetching of all condition rules with conditional fetching based on relevant condition IDs.
- Updated question rendering in `MyWashStart.vue` to use `WhiteBoxCard` for improved UI structure.
This commit is contained in:
Jeppe Bundgaard
2026-01-15 12:40:48 +01:00
parent 52529fec3e
commit 40884fc9e6
2 changed files with 43 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/displays/department/tables/SelfServeTryModal.vue
+8 -3
View File
@@ -35,7 +35,7 @@ const fetchData = async () => {
const vTypeId = parseInt(props.vehicleTypeId);
const lId = props.laneId ? parseInt(props.laneId) : null;
const [q, c, r, t] = await Promise.all([
const [q, c, t] = await Promise.all([
SessionUser.objects.self_serve_questions.get.all({
department: deptId,
product: vTypeId,
@@ -46,7 +46,6 @@ const fetchData = async () => {
product: vTypeId,
...(lId !== null ? { lane: lId } : {})
}),
SessionUser.objects.self_serve_condition_rules.get.all(),
SessionUser.objects.self_serve_tasks.get.all({
department: deptId,
product: vTypeId,
@@ -68,7 +67,13 @@ const fetchData = async () => {
// Rules are linked to conditions, so we filter by whether the condition belongs to us
const conditionIds = conditions.value.map(item => item.id);
rules.value = (r || []).filter(item => conditionIds.includes(parseInt(item.condition_id)));
if (conditionIds.length > 0) {
rules.value = await SessionUser.objects.self_serve_condition_rules.get.all({
condition_id: conditionIds
});
} else {
rules.value = [];
}
tasks.value = (t || []).filter(item =>
parseInt(item.department) === deptId &&
src/views/dashboards/userDashboard/wash/MyWashStart.vue
+35 -18
View File
@@ -282,7 +282,7 @@ const onStartWash = (laneId, licensePlate, customerNumber) => {
return SessionUser.objects.self_serve_vehicle_conditions.add(
nearestDepartment.value.id,
laneId,
SessionUser.user.id.value,
SessionUser.user.customer_number.value,
licensePlate.trim().toUpperCase(),
question.id,
value
@@ -522,7 +522,7 @@ const fetchSelfServeData = async () => {
const vTypeId = parseInt(vehicleTypeSelect.value);
const lId = (radioLaneOption.value !== null && radioLaneOption.value !== 'Any') ? parseInt(radioLaneOption.value) : null;
const [q, c, r, t] = await Promise.all([
const [q, c, t] = await Promise.all([
SessionUser.objects.self_serve_questions.get.all({
department: deptId,
product: vTypeId,
@@ -533,7 +533,6 @@ const fetchSelfServeData = async () => {
product: vTypeId,
...(lId !== null ? { lane: lId } : {})
}),
SessionUser.objects.self_serve_condition_rules.get.all(),
SessionUser.objects.self_serve_tasks.get.all({
department: deptId,
product: vTypeId,
@@ -554,7 +553,16 @@ const fetchSelfServeData = async () => {
);
const conditionIds = conditions.value.map(item => item.id);
rules.value = (r || []).filter(item => conditionIds.includes(parseInt(item.condition_id)));
if (conditionIds.length > 0) {
// condition_id:['1','2','3']
rules.value = await SessionUser.objects.self_serve_condition_rules.get.all({
filters: {
condition_id: conditionIds.map(id => id.toString()),
}
});
} else {
rules.value = [];
}
tasks.value = (t || []).filter(item =>
parseInt(item.department) === deptId &&
@@ -1025,20 +1033,29 @@ watch(() => currentStep.value, () => {
</div>
<div v-for="question in visibleQuestions" :key="question.id" class="box mb-4">
<p class="title is-5">{{ question.question }}</p>
<p class="subtitle is-6" v-if="question.description">{{ question.description }}</p>
<div class="buttons">
<b-button
:type="answers[question.id] === true ? 'is-success' : 'is-light'"
@click="answers[question.id] = true"
expanded
>JA</b-button>
<b-button
:type="answers[question.id] === false ? 'is-danger' : 'is-light'"
@click="answers[question.id] = false"
expanded
>NEJ</b-button>
</div>
<WhiteBoxCard :hideHeader="true" :toggleable="false" :default-open="true" :force-state="true" :force-state-footer="true">
<template #content>
<p class="title is-5">{{ question.question }}</p>
<p class="subtitle is-6" v-if="question.description">{{ question.description }}</p>
</template>
<template #footer>
<!-- YES/NO answer Buttons -->
<div class="card-footer-item">
<b-button
:type="answers[question.id] === true ? 'is-success' : 'is-light'"
@click="answers[question.id] = true"
expanded
>JA</b-button>
</div>
<div class="card-footer-item">
<b-button
:type="answers[question.id] === false ? 'is-danger' : 'is-light'"
@click="answers[question.id] = false"
expanded
>NEJ</b-button>
</div>
</template>
</WhiteBoxCard>
</div>
<div v-for="task in activeTasks" :key="task.id" class="notification is-warning is-light mb-4">