Skip to content

Commit

Permalink
Move walk systemicAnswer form field into own component #248
Browse files Browse the repository at this point in the history
  • Loading branch information
robertfausk committed Jan 7, 2025
1 parent 54adcf8 commit b136f16
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 129 deletions.
73 changes: 73 additions & 0 deletions web/assets/js/components/Common/Walk/WalkSystemicAnswerField.vue
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: 'Systemische Antwort',
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(['systemicAnswer'], props.error);
})
</script>

<template>
<div>
<v-textarea
v-model="value"
:disabled="isLoading || disabled"
minlength="1"
maxlength="2500"
:label="label"
placeholder="Systemische Antwort"
data-test="systemicAnswer"
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
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export {default as WalkInsightsField} from './WalkInsightsField.vue';
export {default as WalkIsResubmissionField} from './WalkIsResubmissionField.vue';
export {default as WalkNameField} from './WalkNameField.vue';
export {default as WalkStartTimeField} from './WalkStartTimeField.vue';
export {default as WalkSystemicAnswerField} from './WalkSystemicAnswerField.vue';
export {default as WalkTeamMembersField} from './WalkTeamMembersField.vue';
export {default as WalkWalkCreatorField} from './WalkWalkCreatorField.vue';
export {default as WalkWalkReflectionField} from './WalkWalkReflectionField.vue';
Expand Down
88 changes: 24 additions & 64 deletions web/assets/js/components/Walk/WalkForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -126,53 +126,22 @@
:is-loading="isLoading"
:error="error"
/>
<form-group
v-if="walk.isWithSystemicQuestion"
label="Systemische Frage"
>
<b-form-input
v-model="walk.systemicQuestion"
disabled
readonly
/>
</form-group>
<b-form-group
v-if="walk.isWithSystemicQuestion"
content-cols="12"
label-cols="12"
content-cols-lg="10"
label-cols-lg="2"
:description="walk.systemicQuestion"
:disabled="isLoading"
:state="systemicAnswerState"
>
<template v-slot:label>
<div class="d-flex justify-content-between flex-wrap">
<div :class="isWithoutSystemicAnswer ? `text-muted` : ``">
Systemische Antwort
</div>
<b-form-checkbox
v-model="isWithoutSystemicAnswer"
:disabled="isLoading"
class="font-weight-normal"
>
nicht benötigt
</b-form-checkbox>
</div>
</template>
<b-textarea
<template v-if="walk.isWithSystemicQuestion">
<walk-systemic-answer-field
v-model="walk.systemicAnswer"
:label="walk.systemicQuestion"
:description="walk.systemicQuestion"
:is-loading="isLoading"
:disabled="isLoading || isWithoutSystemicAnswer"
minlength="1"
maxlength="2500"
placeholder="Systemische Antwort"
:state="systemicAnswerState"
data-test="systemicAnswer"
rows="3"
trim
max-rows="15"
:error="error"
/>
</b-form-group>
<v-switch
v-model="isWithoutSystemicAnswer"
label="nicht benötigt"
class="mt-0 ml-auto"
dense
/>
</template>
<walk-walk-reflection-field
v-model="walk.walkReflection"
:is-loading="isLoading"
Expand All @@ -185,15 +154,14 @@
class="mt-0 ml-auto"
dense
/>
<form-group label="Rundenbewertung">
<walk-rating
v-if="walk.rating && walkClient"
:rating="walk.rating"
:client="walkClient"
:read-only="isLoading"
@select-rating="walk.rating = $event"
/>
</form-group>
Rundenbewertung
<walk-rating
v-if="walk.rating && walkClient"
:rating="walk.rating"
:client="walkClient"
:read-only="isLoading"
@select-rating="walk.rating = $event"
/>
<walk-commitments-field
v-model="walk.commitments"
:is-loading="isLoading"
Expand Down Expand Up @@ -256,6 +224,7 @@ import {
WalkInsightsField, WalkIsResubmissionField,
WalkNameField,
WalkStartTimeField,
WalkSystemicAnswerField,
WalkTeamMembersField,
WalkWalkCreatorField,
WalkWalkReflectionField,
Expand All @@ -276,6 +245,7 @@ export default {
},
},
components: {
WalkSystemicAnswerField,
WalkIsResubmissionField,
WalkInsightsField,
WalkCommitmentsField,
Expand Down Expand Up @@ -396,16 +366,6 @@ export default {
team() {
return this.teamStore.getTeamByTeamName(this.initialWalk.teamName);
},
systemicAnswerState() {
if (this.isWithoutSystemicAnswer) {
return true;
}
if (null === this.walk.systemicAnswer || undefined === this.walk.systemicAnswer) {
return;
}
return this.walk.systemicAnswer.length >= 1 && this.walk.systemicAnswer.length <= 2500;
},
walkReflectionState() {
if (this.isWithoutWalkReflection) {
return true;
Expand Down Expand Up @@ -458,7 +418,7 @@ export default {
|| !this.walk.insights && !this.isWithoutInsights
|| !this.walk.startTime
|| !this.walk.endTime
|| !this.systemicAnswerState
|| !this.walk.systemicAnswer && !this.isWithoutSystemicAnswer
|| !this.walkReflectionState
|| !this.walk.walkCreator
|| this.isLoading;
Expand Down
88 changes: 23 additions & 65 deletions web/assets/js/components/WalkEpilogue.vue
Original file line number Diff line number Diff line change
Expand Up @@ -122,44 +122,22 @@
:error="error"
description="Der Wert vom Rundenbeginn ist vorausgewählt."
/>
<b-form-group
v-if="walk.isWithSystemicQuestion"
content-cols="12"
label-cols="12"
content-cols-lg="10"
label-cols-lg="2"
:description="walk.systemicQuestion"
:disabled="isLoading"
:invalid-feedback="invalidSystemicAnswerFeedback"
:state="systemicAnswerState"
>
<template v-slot:label>
<div class="d-flex justify-content-between flex-wrap">
<div :class="isWithoutSystemicAnswer ? `text-muted` : ``">
Systemische Antwort
</div>
<b-form-checkbox
v-model="isWithoutSystemicAnswer"
:disabled="isLoading"
class="font-weight-normal"
>
nicht benötigt
</b-form-checkbox>
</div>
</template>
<b-textarea
<template v-if="walk.isWithSystemicQuestion">
<walk-systemic-answer-field
v-model="form.systemicAnswer"
minlength="1"
maxlength="2500"
:placeholder="walk.systemicQuestion"
label="Systemische Antwort"
:description="walk.systemicQuestion"
:is-loading="isLoading"
:disabled="isLoading || isWithoutSystemicAnswer"
:state="systemicAnswerState"
data-test="systemicAnswer"
rows="3"
trim
max-rows="15"
:error="error"
/>
<v-switch
v-model="isWithoutSystemicAnswer"
label="nicht benötigt"
class="mt-0 ml-auto"
dense
/>
</b-form-group>
</template>
<walk-walk-reflection-field
v-model="form.walkReflection"
:is-loading="isLoading"
Expand All @@ -172,23 +150,14 @@
class="mt-0 ml-auto"
dense
/>
<b-form-group
content-cols="12"
label-cols="12"
content-cols-lg="10"
label-cols-lg="2"
label="Rundenbewertung"
description=""
:disabled="isLoading"
>
<walk-rating
v-if="walkClient && form.rating"
:rating="form.rating"
:client="walkClient"
:read-only="isLoading"
@select-rating="form.rating = $event"
/>
</b-form-group>
Rundenbewertung
<walk-rating
v-if="walkClient && form.rating"
:rating="form.rating"
:client="walkClient"
:read-only="isLoading"
@select-rating="form.rating = $event"
/>
<walk-commitments-field
v-model="form.commitments"
:is-loading="isLoading"
Expand Down Expand Up @@ -267,6 +236,7 @@ import {
WalkIsResubmissionField,
WalkNameField,
WalkStartTimeField,
WalkSystemicAnswerField,
WalkWalkReflectionField,
WalkWeatherField
} from "./Common/Walk";
Expand All @@ -279,6 +249,7 @@ import {useAlertStore, useClientStore, useTeamStore, useWayPointStore, useWalkSt
export default {
name: 'WalkEpilogue',
components: {
WalkSystemicAnswerField,
WalkIsResubmissionField,
WalkInsightsField,
WalkCommitmentsField,
Expand Down Expand Up @@ -409,19 +380,6 @@ export default {
team() {
return this.teamStore.getTeamByTeamName(this.walk.teamName);
},
systemicAnswerState() {
if (this.isWithoutSystemicAnswer) {
return true;
}
if (!this.form.systemicAnswer && !this.invalidSystemicAnswerFeedback) {
return;
}
return !this.invalidSystemicAnswerFeedback;
},
invalidSystemicAnswerFeedback() {
return getViolationsFeedback(['systemicAnswer'], this.error);
},
isLoading() {
return this.walkStore.isLoading;
},
Expand Down

0 comments on commit b136f16

Please sign in to comment.