Skip to content
GitLab
Commit c4e47d16 authored by Jonathan Foucher's avatar Jonathan Foucher
Browse files

Pre-fill recommended level for first 4 actions.

parent 59107021
Pipeline #31670 passed with stages
in 13 minutes and 49 seconds
Hide whitespace changes
Inline Side-by-side
resources/js/components/Evaluations/Single/Components/MeasureLevelCircle.vue
View file @ c4e47d16
......@@ -5,10 +5,14 @@
<span class="text-muted text-uppercase small">Niveau</span> <br/>
<span class="h1">{{level}}</span>
<span v-if="expectedLevel > level">
<span v-if="expectedLevel > level && !nextLevel">
<i id="circle-arrow" class="fas fa-angle-double-right"></i>
<span class="h1">{{expectedLevel}}</span>
</span>
<span v-if="nextLevel && nextLevel > level">
<i id="circle-arrow" class="fas fa-angle-double-right"></i>
<span class="h1">{{nextLevel}}</span>
</span>
</p>
<div v-if="isResult && level === 3">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="#468355" viewBox="0 0 16 16">
......@@ -44,7 +48,7 @@
<!-- EXPECTED LEVEL -->
<!-- -->
<svg
v-if="expectedColor && expectedProgress"
v-if="expectedLevel && expectedColor && expectedProgress && !nextLevel"
:height="radius * 2"
:width="radius * 2"
>
......@@ -59,6 +63,22 @@
:cy="radius"
/>
</svg>
<svg
v-if="nextLevel && nextColor && nextProgress"
:height="radius * 2"
:width="radius * 2"
>
<circle
:stroke="nextColor"
:stroke-dasharray="circumference + ' ' + circumference"
:style="{ strokeDashoffset: strokeDashoffsetNext }"
:stroke-width="stroke"
fill="transparent"
:r="normalizedRadius"
:cx="radius"
:cy="radius"
/>
</svg>
<!-- ACTUAL LEVEL -->
<svg
:height="radius * 2"
......@@ -82,7 +102,7 @@
<script>
export default {
name: 'MeasureLevelCircle',
props: ['radius', 'stroke', 'level', 'expectedLevel', 'isResult'],
props: ['radius', 'stroke', 'level', 'expectedLevel', 'isResult', 'nextLevel'],
data () {
return {
......@@ -117,6 +137,20 @@ export default {
return 'transparent'
}
},
nextColor () {
switch (this.nextLevel) {
case 0:
return '#454545'
case 1:
return '#D63F49'
case 2:
return '#FFC107'
case 3:
return '#468355'
default:
return 'transparent'
}
},
progress () {
switch (this.level) {
......@@ -146,6 +180,20 @@ export default {
return 0
}
},
nextProgress () {
switch (this.nextLevel){
case 0:
return 15
case 1:
return 33
case 2:
return 66
case 3:
return 100
default:
return 0
}
},
normalizedRadius () {
return this.radius - this.stroke * 2;
......@@ -162,6 +210,9 @@ export default {
strokeDashoffsetExpected() {
return this.circumference - this.expectedProgress / 100 * this.circumference;
},
strokeDashoffsetNext() {
return this.circumference - this.nextProgress / 100 * this.circumference;
},
},
}
</script>
......
resources/js/components/Evaluations/Single/Components/Step4/MeasureActionForm.vue
View file @ c4e47d16
......@@ -2,7 +2,7 @@
<div>
<label class="mt-2" :for="`expected_level${measure.id}`"> Choisir le niveau visé</label>
<select :id="`expected_level${measure.id}`" v-model="expected_level" class="form-select form-control-sm" :disabled="!isEditable || level == 3"> <!-- v-model="measure.expected_level" -->
<option value=""> </option>
<option :value="0"> </option>
<option v-for="level in expectedLevelAvailable" :key="level" :value="level">{{ level }}</option>
</select>
......@@ -46,7 +46,7 @@ export default {
components: {
DateRangePicker,
},
props: ['evaluation', 'measure', 'measureInformations', 'measureLevel', 'level', 'submitted', 'index'],
props: ['evaluation', 'measure', 'measureInformations', 'measureLevel', 'level', 'submitted', 'index', 'nextLevel'],
data () {
return {
localeData: {
......@@ -73,13 +73,16 @@ export default {
},
expected_level: {
get() {
return this.measureLevel.expected_level
return this.measureLevel.expected_level || this.nextLevel
},
set(newValue) {
console.log('setting new value', newValue)
const evaluation = { ...this.evaluation }
evaluation.measure_levels = this.evaluation.measure_levels.map(m => m.measure_id === this.measure.id ? ({...m, expected_level : parseInt(newValue) }) : m)
evaluation.measure_levels = this.evaluation.measure_levels.map(m => m.measure_id === this.measure.id ? ({...m, expected_level : parseInt(newValue, 10) }) : m)
console.log(' evaluation.measure_levels', evaluation.measure_levels)
this.$store.dispatch('saveDraftEvaluation', evaluation).then(() => {
this.$store.dispatch('getGraphForEvaluation', {name: 'risks', id:evaluation.id})
this.$store.dispatch('getGraphForEvaluation', {name: 'futurerisks', id:evaluation.id})
......
resources/js/components/Evaluations/Single/Components/Step4/MeasureLevelSelector.vue
View file @ c4e47d16
......@@ -15,6 +15,7 @@
stroke="7"
:level="level"
:expected-level="measureLevel.expected_level"
:next-level="nextLevel"
/>
<!-- EN ATTENTE RETOUR CLIENT -->
<!-- <p class="text-center my-4">Efficacité <i class="fas fa-angle-double-right px-2"></i> Efficacité</p>-->
......@@ -28,6 +29,7 @@
:level="level"
:evaluation="evaluation"
:index="index"
:next-level="nextLevel"
/>
<button type="button" class="btn btn-primary btn-block btn-sm mt-3" data-toggle="modal" data-target="#exampleModal" @click="showModal = !showModal">
Afficher le détail de la mesure
......@@ -49,7 +51,7 @@ export default {
MeasureActionForm,
MeasureLevelDetails,
},
props: ['evaluation', 'measure', 'level', 'submitted', 'index'],
props: ['evaluation', 'measure', 'level', 'submitted', 'index', 'nextLevel'],
data () {
return {
showModal : false,
......@@ -76,23 +78,41 @@ export default {
return 'transparent'
}
},
nextColor () {
switch (this.nextLevel) {
case 0:
return '#454545' // black
case 1:
return '#D63F49' // red
case 2:
return '#FFC107' // yellow
case 3:
return '#468355' // green
default:
return 'transparent'
}
},
cssProps () {
return this.measureLevel.expected_level > this.level ? {
'--border-hover-color': this.expectedColor,
'--border-selected-color': this.expectedColor,
'--text-selected-color': 'white',
'--background-selected-color': this.expectedColor,
} : {}
if (this.measureLevel.expected_level && this.measureLevel.expected_level > this.level) {
return {
'--border-hover-color': this.expectedColor,
'--border-selected-color': this.expectedColor,
'--text-selected-color': 'white',
'--background-selected-color': this.expectedColor,
}
}
if (this.nextLevel && this.nextLevel > this.level) {
return {
'--border-hover-color': this.nextColor,
'--border-selected-color': this.nextColor,
'--text-selected-color': 'white',
'--background-selected-color': this.nextColor,
}
}
return {}
},
},
methods : {
expectedLevelUpdate (value) {
console.log('expectedLevelUpdated', value)
const evaluation = { ...this.evaluation }
evaluation.measure_levels = this.evaluation.measure_levels.map(m => m.measure_id === this.measure.id ? ({...m, expected_level : parseInt(value) }) : m)
this.$store.commit('updateEvaluation', evaluation)
},
checkValidation () {
return this.$refs.MeasureActionForm.checkValidation()
},
......
resources/js/components/Evaluations/Single/Components/Step4/PlanAction.vue
View file @ c4e47d16
......@@ -18,6 +18,7 @@
:measure="measure"
:index="index"
:submitted="submitted"
:next-level="measureLevelSelected(measure).expected_level === 0 ||index >= 4 ? false : measureLevelSelected(measure).actual_level + 1"
:level="measureLevelSelected(measure).actual_level"
/>
</div>
......@@ -76,14 +77,8 @@ export default {
return isOneMeasureAvailable ? this.evaluation.measure_levels.find(ml => ml.expected_level > ml.actual_level) : true
},
loading () {
if (
!this.$store.state.graphs[this.evaluation.id]
|| !this.$store.state.graphs[this.evaluation.id].bestMeasures
) {
return true;
}
return false;
return !this.$store.state.graphs[this.evaluation.id]
|| !this.$store.state.graphs[this.evaluation.id].bestMeasures;
},
bestMeasures () {
if (
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment