Skip to content

Commit

Permalink
Move walk insights form field into own component #248
Browse files Browse the repository at this point in the history
  • Loading branch information
@robertfausk
robertfausk committed Jan 7, 2025
1 parent 9a7d172 commit 4e2a38d
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 113 deletions.
73 changes: 73 additions & 0 deletions web/assets/js/components/Common/Walk/WalkInsightsField.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<script setup lang="ts">
import {computed} from "vue";
import {getViolationsFeedback} from "../../../utils";
// const props = defineProps(['modelValue', 'value']); // vue3
// const emit = defineEmits(['update:modelValue']); // vue3
const emit = defineEmits(['input']);
export interface Props {
value: string,
label?: string,
description?: string,
error?: any,
isLoading?: boolean
disabled?: boolean
}
const props = withDefaults(defineProps<Props>(), {
label: 'Erkenntnisse, Überlegungen, Zielsetzungen',
description: '',
error: false,
isLoading: false,
disabled: false,
});
const value = computed({
get() {
// return props.modelValue // vue3
return props.value
},
set(value) {
// emit('update:modelValue', value); // vue3
emit('input', value)
}
});
const errorMessages = computed(() => {
if (!props.error) {
return ''
}
return getViolationsFeedback(['insights'], props.error);
})
</script>

<template>
<div>
<v-textarea
v-model="value"
:disabled="isLoading || disabled"
minlength="1"
maxlength="2500"
:label="label"
placeholder="Erkenntnisse, Überlegungen, Zielsetzungen"
data-test="insights"
rows="3"
trim
max-rows="15"
outlined
dense
:hint="description"
:persistent-hint="!!description"
:hide-details="!description"
:error-messages="errorMessages"
:error="!!errorMessages?.length"
/>
</div>
</template>

<style scoped>
</style>
1 change: 1 addition & 0 deletions web/assets/js/components/Common/Walk/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export {default as WalkConceptOfDayField} from './WalkConceptOfDayField.vue';
export {default as WalkEndTimeField} from './WalkEndTimeField.vue';
export {default as WalkGuestNamesField} from './WalkGuestNamesField.vue';
export {default as WalkHolidaysField} from './WalkHolidaysField.vue';
export {default as WalkInsightsField} from './WalkInsightsField.vue';
export {default as WalkNameField} from './WalkNameField.vue';
export {default as WalkStartTimeField} from './WalkStartTimeField.vue';
export {default as WalkTeamMembersField} from './WalkTeamMembersField.vue';
Expand Down
60 changes: 15 additions & 45 deletions web/assets/js/components/Walk/WalkForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,40 +206,18 @@
class="mt-0 ml-auto"
dense
/>
<b-form-group
content-cols="12"
label-cols="12"
content-cols-lg="10"
label-cols-lg="2"
:state="insightsState"
>
<template v-slot:label>
<div class="d-flex justify-content-between flex-wrap">
<div :class="isWithoutInsights ? `text-muted` : ``">
Erkenntnisse, Überlegungen, Zielsetzungen
</div>
<b-form-checkbox
v-model="isWithoutInsights"
:disabled="isLoading"
class="font-weight-normal"
>
nicht benötigt
</b-form-checkbox>
</div>
</template>
<b-textarea
v-model="walk.insights"
:disabled="isLoading || isWithoutInsights"
minlength="1"
maxlength="2500"
placeholder="Erkenntnisse, Überlegungen, Zielsetzungen"
:state="insightsState"
data-test="insights"
rows="3"
trim
max-rows="15"
/>
</b-form-group>
<walk-insights-field
v-model="walk.insights"
:is-loading="isLoading"
:disabled="isLoading || isWithoutInsights"
:error="error"
/>
<v-switch
v-model="isWithoutInsights"
label="nicht benötigt"
class="mt-0 ml-auto"
dense
/>
<form-group label="">
<b-form-checkbox
v-model="walk.isResubmission"
Expand Down Expand Up @@ -277,6 +255,7 @@ import {
WalkEndTimeField,
WalkGuestNamesField,
WalkHolidaysField,
WalkInsightsField,
WalkNameField,
WalkStartTimeField,
WalkTeamMembersField,
Expand All @@ -299,6 +278,7 @@ export default {
},
},
components: {
WalkInsightsField,
WalkCommitmentsField,
WalkWalkReflectionField,
WalkEndTimeField,
Expand Down Expand Up @@ -417,16 +397,6 @@ export default {
team() {
return this.teamStore.getTeamByTeamName(this.initialWalk.teamName);
},
insightsState() {
if (this.isWithoutInsights) {
return true;
}
if (null === this.walk.insights || undefined === this.walk.insights) {
return;
}
return this.walk.insights.length >= 1 && this.walk.insights.length <= 2500;
},
systemicAnswerState() {
if (this.isWithoutSystemicAnswer) {
return true;
Expand Down Expand Up @@ -486,7 +456,7 @@ export default {
return !this.walk.name
|| !this.walk.commitments && !this.isWithoutCommitments
|| !this.walk.conceptOfDay
|| !this.insightsState
|| !this.walk.insights && !this.isWithoutInsights
|| !this.walk.startTime
|| !this.walk.endTime
|| !this.systemicAnswerState
Expand Down
104 changes: 36 additions & 68 deletions web/assets/js/components/WalkEpilogue.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
cols="12"
class="d-md-none"
>
<div class="mt-2 border-left-0 border-bottom-0 border-right-0 border-secondary border-dashed border-top" />
<div class="mt-2 border-left-0 border-bottom-0 border-right-0 border-secondary border-dashed border-top"/>
</v-col>
<v-col
cols="12"
Expand Down Expand Up @@ -107,7 +107,8 @@
class="mb-0"
color="warning"
>
Hinweis: Die gewählte Ankunftszeit ist <b>{{ diffLastWayPointOrRound }}</b> nach dem {{ hasLastWayPoint ? 'letzten Wegpunkt' : 'Rundenstart' }} vom {{ lastWayPointOrRoundTimeAsCalendar }}.
Hinweis: Die gewählte Ankunftszeit ist <b>{{ diffLastWayPointOrRound }}</b> nach dem {{ hasLastWayPoint ? 'letzten Wegpunkt' : 'Rundenstart' }} vom
{{ lastWayPointOrRoundTimeAsCalendar }}.
</v-alert>
<walk-holidays-field
v-model="form.holidays"
Expand Down Expand Up @@ -200,42 +201,18 @@
class="mt-0 ml-auto"
dense
/>
<b-form-group
content-cols="12"
label-cols="12"
content-cols-lg="10"
label-cols-lg="2"
:invalid-feedback="invalidInsightsFeedback"
:state="insightsState"
>
<template v-slot:label>
<div class="d-flex justify-content-between flex-wrap">
<div :class="isWithoutInsights ? `text-muted` : ``">
Erkenntnisse, Überlegungen, Zielsetzungen
</div>
<b-form-checkbox
v-model="isWithoutInsights"
:disabled="isLoading"
class="font-weight-normal"
>
nicht benötigt
</b-form-checkbox>
</div>
</template>
<b-textarea
v-model="form.insights"
minlength="1"
maxlength="2500"
placeholder="Erkenntnisse, Überlegungen, Zielsetzungen"
:disabled="isLoading || isWithoutInsights"
description=""
:state="insightsState"
data-test="insights"
rows="3"
trim
max-rows="15"
/>
</b-form-group>
<walk-insights-field
v-model="form.insights"
:is-loading="isLoading"
:disabled="isLoading || isWithoutInsights"
:error="error"
/>
<v-switch
v-model="isWithoutInsights"
label="nicht benötigt"
class="mt-0 ml-auto"
dense
/>
<b-form-group
content-cols="12"
label-cols="12"
Expand Down Expand Up @@ -290,16 +267,27 @@
'use strict';
import ContentCollapse from './ContentCollapse.vue';
import GlobalFormError from './Common/GlobalFormError.vue';
import {WalkCommitmentsField, WalkConceptOfDayField, WalkEndTimeField, WalkHolidaysField, WalkNameField, WalkStartTimeField, WalkWalkReflectionField, WalkWeatherField} from "./Common/Walk";
import {
WalkCommitmentsField,
WalkConceptOfDayField,
WalkEndTimeField,
WalkHolidaysField,
WalkInsightsField,
WalkNameField,
WalkStartTimeField,
WalkWalkReflectionField,
WalkWeatherField
} from "./Common/Walk";
import WayPointList from './Walk/WayPointList.vue';
import WalkRating from './Walk/WalkRating.vue';
import dayjs from 'dayjs';
import { getViolationsFeedback } from '../utils';
import {getViolationsFeedback} from '../utils';
import {useAlertStore, useClientStore, useTeamStore, useWayPointStore, useWalkStore} from '../stores';
export default {
name: 'WalkEpilogue',
components: {
WalkInsightsField,
WalkCommitmentsField,
WalkWalkReflectionField,
WalkEndTimeField,
Expand Down Expand Up @@ -361,7 +349,7 @@ export default {
},
wayPointsOfWalk() {
let wayPoints = [];
this.walk.wayPoints.forEach(wayPointIri =>{
this.walk.wayPoints.forEach(wayPointIri => {
const wayPoint = this.getWayPointByIri(wayPointIri);
if (wayPoint) {
wayPoints.push(wayPoint);
Expand All @@ -382,11 +370,11 @@ export default {
},
)
.every(wayPoint => {
time = dayjs(wayPoint.visitedAt);
time = dayjs(wayPoint.visitedAt);
return false;
}
);
return false;
}
);
if (time) {
return time;
Expand Down Expand Up @@ -441,19 +429,6 @@ export default {
invalidSystemicAnswerFeedback() {
return getViolationsFeedback(['systemicAnswer'], this.error);
},
insightsState() {
if (this.isWithoutInsights) {
return true;
}
if (!this.form.insights && !this.invalidInsightsFeedback) {
return;
}
return !this.invalidInsightsFeedback;
},
invalidInsightsFeedback() {
return getViolationsFeedback(['insights'], this.error);
},
isLoading() {
return this.walkStore.isLoading;
},
Expand All @@ -476,7 +451,7 @@ export default {
await this.refreshWalk();
}
if (!this.walk) {
this.$router.push({ name: 'Dashboard', params: { redirect: 'Diese Runde existiert nicht. Du wurdest auf das Dashboard weitergeleitet.' } });
this.$router.push({name: 'Dashboard', params: {redirect: 'Diese Runde existiert nicht. Du wurdest auf das Dashboard weitergeleitet.'}});
return;
}
if (!this.team) {
Expand Down Expand Up @@ -511,7 +486,7 @@ export default {
}
this.form.endTime = time.format();
},
refreshWalk: async function() {
refreshWalk: async function () {
await this.walkStore.fetchById(this.walkId);
},
async handleSubmit() {
Expand All @@ -523,7 +498,7 @@ export default {
left: 0,
behavior: 'smooth'
});
this.$router.push({ name: 'Dashboard' });
this.$router.push({name: 'Dashboard'});
} else {
this.alertStore.error('Runde abschließen fehlgeschlagen', 'Upps! :-(');
}
Expand All @@ -533,11 +508,4 @@ export default {
</script>

<style lang="scss">
.b-form-datepicker.form-control.is-valid, .b-form-timepicker.form-control {
padding-right: 0 !important;
label.form-control.is-valid {
padding-right: 0.25rem !important;
}
}
</style>

0 comments on commit 4e2a38d

Please sign in to comment.