MeasureLevelChooser.vue 2.99 KB
Newer Older
Jonathan Foucher's avatar
Jonathan Foucher committed
1
<template>
Jonathan Foucher's avatar
lint    
Jonathan Foucher committed
2
3
    <div class="mb-2">
        <p :class="{ 'text-danger': submitted && $v.levelSelected.$invalid }"><strong>{{ measure.name }}</strong> <i class="text-muted small">(Obligatoire)</i></p>
4

Jonathan Foucher's avatar
lint    
Jonathan Foucher committed
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
        <div class="row" role="radiogroup">
            <div class="col-xl-3 col-md-6">
                <MeasureLevelSelector
                    :measure="measure" :level="0"
                    :level-selected="levelSelected" :is-editable="isEditable"
                    color="black"
                    @setLevel="setLevel($event)"/>
            </div>
            <div class="col-xl-3 col-md-6">
                <MeasureLevelSelector
                    :measure="measure" :level="1"
                    :level-selected="levelSelected" :is-editable="isEditable"
                    color="red"
                    @setLevel="setLevel($event)"/>
            </div>
            <div class="col-xl-3 col-md-6">
                <MeasureLevelSelector
                    :measure="measure" :level="2"
                    :level-selected="levelSelected" :is-editable="isEditable"
                    color="#09759B"
                    @setLevel="setLevel($event)"/>
            </div>
            <div class="col-xl-3 col-md-6">
                <MeasureLevelSelector
                    :measure="measure" :level="3"
                    :level-selected="levelSelected" :is-editable="isEditable"
                    color="green"
                    @setLevel="setLevel($event)"/>
            </div>
34
        </div>
35
    </div>
Jonathan Foucher's avatar
Jonathan Foucher committed
36
37
38
</template>

<script>
Jonathan Foucher's avatar
Jonathan Foucher committed
39
import { requiredIf } from 'vuelidate/lib/validators'
Aurore Chayrouse's avatar
Aurore Chayrouse committed
40
import MeasureLevelSelector from './MeasureLevelSelector'
Aurore Chayrouse's avatar
Aurore Chayrouse committed
41

Jonathan Foucher's avatar
Jonathan Foucher committed
42
43
44
export default {
    name: 'MeasureLevelChooser',
    components: {
Aurore Chayrouse's avatar
Aurore Chayrouse committed
45
46
        MeasureLevelSelector
    },
47
    props: ['evaluation', 'measure', 'submitted', 'isEditable'],
48
49
50
51
52
    data () {
        return {
            levelSelected : null,
        }
    },
Aurore Chayrouse's avatar
Aurore Chayrouse committed
53
    validations: {
Jonathan Foucher's avatar
Jonathan Foucher committed
54
        levelSelected: { required: requiredIf((level)=> { return level !== null }) }
Aurore Chayrouse's avatar
Aurore Chayrouse committed
55
    },
56
57
    computed : {
        measureLevel () {
58
59
            return this.evaluation.measure_levels.find(level => level.measure_id === this.measure.id)
        },
60
    },
Aurore Chayrouse's avatar
Aurore Chayrouse committed
61
62
    watch : {
        levelSelected () {
Jonathan Foucher's avatar
Jonathan Foucher committed
63
            const evaluation = { ...this.evaluation }
Aurore Chayrouse's avatar
Aurore Chayrouse committed
64

Jonathan Foucher's avatar
Jonathan Foucher committed
65
66
            evaluation.measure_levels = this.evaluation.measure_levels.map(m => m.measure_id === this.measure.id ? ({...m, actual_level : this.levelSelected }) : m)
            this.$store.commit('updateEvaluation', evaluation)
Aurore Chayrouse's avatar
Aurore Chayrouse committed
67
68
        },
        evaluation () {
69
70
            this.levelSelected = this.measureLevel ? this.measureLevel.actual_level : null
        },
71
72
73
74
75
76
77
78
79
80
81
82
83
    },
    mounted() {
        console.log('mounted 2')
        this.levelSelected = this.measureLevel ? this.measureLevel.actual_level : null
    },
    methods: {
        setLevel (num) {
            if (this.isEditable) {
                this.levelSelected = num
            }
        },
        checkValidation () {
            this.$v.$touch()
Jonathan Foucher's avatar
Jonathan Foucher committed
84
            return !this.$v.$invalid;
85
        }
Aurore Chayrouse's avatar
Aurore Chayrouse committed
86
    }
Jonathan Foucher's avatar
Jonathan Foucher committed
87
88
}
</script>