Only lead climbs

components/forms/AscentStatusInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-input
-      class="required-field"
+      :class="required ? 'required-field' : ''"
       hide-details
     >
       <fieldset class="full-width custom-fieldset border rounded mt-n1 pb-0 px-2">
@@ -13,6 +13,7 @@
             v-model="ascentStatus"
             active-class="primary--text"
             column
+            :multiple="multiple"
             @change="onChange"
           >
             <v-chip
@@ -33,7 +34,11 @@
           </v-chip-group>
         </div>
       </fieldset>
+      <v-chip v-if="multiple" class="ml-1" @click="selectAll()">
+        {{ $t('common.seeAll') }}
+      </v-chip>
     </v-input>
+
     <div class="mb-3">
       <div class="text-right pr-1">
         <span
@@ -90,15 +95,23 @@
 </template>
 
 <script>
-import { mdiCropSquare, mdiCheckboxMarkedCircle, mdiRecordCircle, mdiFlash, mdiEye, mdiAutorenew, mdiChevronUp } from '@mdi/js'
+import {
+  mdiCropSquare,
+  mdiCheckboxMarkedCircle,
+  mdiRecordCircle,
+  mdiFlash,
+  mdiEye,
+  mdiAutorenew,
+  mdiChevronUp
+} from '@mdi/js'
 import { InputHelpers } from '@/mixins/InputHelpers'
 
 export default {
   name: 'AscentStatusInput',
   mixins: [InputHelpers],
   props: {
     value: {
-      type: String,
+      type: [String, Array], // array if multipleChoices true
       default: null
     },
     withProject: {
@@ -112,12 +125,20 @@ export default {
     withRepetition: {
       type: Boolean,
       default: true
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    required: { // required input of the form and display the red * on top of the component
+      type: Boolean,
+      default: true
     }
   },
 
   data () {
     return {
-      ascentStatus: this.value,
+      ascentStatus: this.value, // string or array according to multipleChoices false or true
       showLegend: false,
 
       mdiChevronUp
@@ -143,9 +164,20 @@ export default {
     }
   },
 
+  mounted () {
+    // for multiple choices select all at mount if no list passed in initial v-model
+    if (this.multiple && this.value.length === 0) {
+      this.selectAll()
+    }
+  },
+
   methods: {
     onChange () {
       this.$emit('input', this.ascentStatus)
+    },
+    selectAll () {
+      this.ascentStatus = this.ascentStatuses.map(status => status.value)
+      this.onChange()
     }
   }
 }

components/forms/ClimbingTypeInput.vue

@@ -1,5 +1,6 @@
 <template>
   <v-select
+    v-if="inputType === 'select'"
     v-model="climbingTypes"
     :items="climbByEnvironment()"
     item-text="text"
@@ -13,13 +14,52 @@
     outlined
     @change="onChange"
   />
+  <v-input v-else-if="inputType === 'chips'">
+    <fieldset class="full-width custom-fieldset border rounded mt-n1 pb-0 px-2">
+      <legend class="v-label custom-fieldset-label">
+        {{ $t('components.input.climbing_type') }}
+      </legend>
+      <div>
+        <v-chip-group
+          v-model="climbingTypes"
+          active-class="primary--text"
+          column
+          :multiple="multiple"
+          @change="onChange"
+        >
+          <v-chip
+            v-for="(item, itemIndex) in climbByEnvironment()"
+            :key="`item-index-${itemIndex}`"
+            :value="item.value"
+            outlined
+          >
+            <v-icon
+              :class="`climbs-pastille ${item.value} mr-3`"
+              :color="climbingTypes === item.value ? 'green' : null"
+              small
+              left
+            >
+              {{ item.icon }}
+            </v-icon>
+            {{ item.text }}
+          </v-chip>
+        </v-chip-group>
+      </div>
+    </fieldset>
+    <v-chip v-if="multiple" class="ml-1" @click="selectAll()">
+      {{ $t('common.seeAll') }}
+    </v-chip>
+  </v-input>
 </template>
 
 <script>
 export default {
   name: 'ClimbingTypeInput',
   props: {
-    value: [Array, String],
+    value: {
+      type: [Array, String],
+      default: null
+    },
     environment: {
       type: String,
       default: 'crag'
@@ -43,6 +83,10 @@ export default {
     clearable: {
       type: Boolean,
       default: false
+    },
+    inputType: { // possible values: 'select', 'chips'
+      type: String,
+      default: 'select'
     }
   },
 
@@ -78,6 +122,13 @@ export default {
     }
   },
 
+  mounted () {
+    // for inputType=chips et multiple choices, select all at mount if no list passed in initial v-model
+    if (this.inputType === 'chips' && this.multiple && this.value.length === 0) {
+      this.selectAll()
+    }
+  },
+
   methods: {
     onChange () {
       this.$emit('input', this.climbingTypes)
@@ -91,6 +142,10 @@ export default {
       } else if (this.environment === 'user') {
         return this.climbingUserList
       }
+    },
+    selectAll () {
+      this.climbingTypes = this.climbByEnvironment().map(climb => climb.value)
+      this.onChange()
     }
   }
 }

components/forms/RopingStatusInput.vue

@@ -1,5 +1,7 @@
 <template>
-  <v-input class="required-field">
+  <v-input
+    :class="required ? 'required-field' : ''"
+  >
     <fieldset class="full-width custom-fieldset border rounded mt-n1 pb-0 px-2">
       <legend class="v-label custom-fieldset-label">
         {{ $t('components.input.ropingStatusQuestion') }}
@@ -9,6 +11,7 @@
           v-model="ropingStatus"
           active-class="primary--text"
           column
+          :multiple="multiple"
           @change="onChange"
         >
           <v-chip
@@ -29,6 +32,9 @@
         </v-chip-group>
       </div>
     </fieldset>
+    <v-chip v-if="multiple" class="ml-1" @click="selectAll()">
+      {{ $t('common.seeAll') }}
+    </v-chip>
   </v-input>
 </template>
 
@@ -45,7 +51,7 @@ export default {
   mixins: [InputHelpers],
   props: {
     value: {
-      type: String,
+      type: [String, Array],
       default: null
     },
     sportClimbingRopingStatuses: {
@@ -55,6 +61,14 @@ export default {
     multiPithRopingStatuses: {
       type: Boolean,
       default: true
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    required: { // required input of the form and display the red * on top of the component
+      type: Boolean,
+      default: true
     }
   },
 
@@ -68,21 +82,52 @@ export default {
     ropingStatuses () {
       const statuses = []
       if (this.sportClimbingRopingStatuses) {
-        statuses.push({ text: this.$t('models.ropingStatus.lead_climb'), value: 'lead_climb', icon: oblykRopingStatusLeadClimb })
-        statuses.push({ text: this.$t('models.ropingStatus.top_rope'), value: 'top_rope', icon: oblykRopingStatusTopRope })
+        statuses.push({
+          text: this.$t('models.ropingStatus.lead_climb'),
+          value: 'lead_climb',
+          icon: oblykRopingStatusLeadClimb
+        })
+        statuses.push({
+          text: this.$t('models.ropingStatus.top_rope'),
+          value: 'top_rope',
+          icon: oblykRopingStatusTopRope
+        })
       }
       if (this.multiPithRopingStatuses) {
-        statuses.push({ text: this.$t('models.ropingStatus.multi_pitch_leader'), value: 'multi_pitch_leader', icon: oblykRopingStatusMultiPitchLeader })
-        statuses.push({ text: this.$t('models.ropingStatus.multi_pitch_second'), value: 'multi_pitch_second', icon: oblykRopingStatusMultiPitchSecond })
-        statuses.push({ text: this.$t('models.ropingStatus.multi_pitch_alternate_lead'), value: 'multi_pitch_alternate_lead', icon: oblykRopingStatusLeadClimbMultiPitchAlternateLead })
+        statuses.push({
+          text: this.$t('models.ropingStatus.multi_pitch_leader'),
+          value: 'multi_pitch_leader',
+          icon: oblykRopingStatusMultiPitchLeader
+        })
+        statuses.push({
+          text: this.$t('models.ropingStatus.multi_pitch_second'),
+          value: 'multi_pitch_second',
+          icon: oblykRopingStatusMultiPitchSecond
+        })
+        statuses.push({
+          text: this.$t('models.ropingStatus.multi_pitch_alternate_lead'),
+          value: 'multi_pitch_alternate_lead',
+          icon: oblykRopingStatusLeadClimbMultiPitchAlternateLead
+        })
       }
       return statuses
     }
   },
 
+  mounted () {
+    // for multiple choices select all at mount if no list passed in initial v-model
+    if (this.multiple && this.value.length === 0) {
+      this.selectAll()
+    }
+  },
+
   methods: {
     onChange () {
       this.$emit('input', this.ropingStatus)
+    },
+    selectAll () {
+      this.ropingStatus = this.ropingStatuses.map(status => status.value)
+      this.onChange()
     }
   }
 }