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
@@ -146,6 +167,11 @@ export default {
   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'
     }
   },
 
@@ -91,6 +135,11 @@ 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,13 +82,33 @@ 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
     }
@@ -83,6 +117,10 @@ export default {
   methods: {
     onChange () {
       this.$emit('input', this.ropingStatus)
+    },
+    selectAll () {
+      this.ropingStatus = this.ropingStatuses.map(status => status.value)
+      this.onChange()
     }
   }
 }

components/logBooks/outdoors/AscentFiltersForm.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <v-btn v-if="!showForm" @click="showForm =! showForm">
+      {{ $t('components.logBook.filterTheLogBook') }}
+    </v-btn>
+    <v-form v-if="showForm" @submit.prevent="onSubmit()">
+      <ascent-status-input
+        v-if="!onlyClimbingFilter"
+        v-model="filters.ascentStatusList"
+        multiple
+        with-repetition
+        with-sent
+        :with-project="false"
+        :required="false"
+      />
+
+      <roping-status-input
+        v-if="!onlyClimbingFilter"
+        v-model="filters.ropingStatusList"
+        multiple
+        :required="false"
+      />
+
+      <climbing-type-input
+        v-model="filters.climbingTypeList"
+        multiple
+        environment="crag"
+        input-type="chips"
+      />
+
+      <submit-form
+        :overlay="false"
+        :submit-local-key="'actions.apply'"
+        :go-back-btn="false"
+      />
+    </v-form>
+  </div>
+</template>
+
+<script>
+import AscentStatusInput from '~/components/forms/AscentStatusInput'
+import RopingStatusInput from '~/components/forms/RopingStatusInput'
+import SubmitForm from '~/components/forms/SubmitForm'
+import ClimbingTypeInput from '~/components/forms/ClimbingTypeInput'
+
+export default {
+  name: 'AscentFiltersForm',
+  components: { ClimbingTypeInput, SubmitForm, RopingStatusInput, AscentStatusInput },
+
+  props: {
+    onlyClimbingFilter: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      showForm: false,
+      filters: {
+        ascentStatusList: [],
+        ropingStatusList: [],
+        climbingTypeList: []
+      }
+    }
+  },
+
+  mounted () {
+    if (this.onlyClimbingFilter) {
+      // no local storage. Use default filters each time.
+      this.filters = {
+        ascentStatusList: this.getAllAscentStatus(),
+        ropingStatusList: this.getAllRopingStatus(),
+        climbingTypeList: this.getAllClimbingTypes()
+      }
+    } else {
+      // recover from local storage and reset if one key is missing in the stored filters (to keep the app working if we change filters)
+      let storedFilters = localStorage.getItem('filters')
+      if (storedFilters) {
+        storedFilters = JSON.parse(storedFilters) || {}
+        this.filters = {
+          ascentStatusList: Array.isArray(storedFilters.ascentStatusList) ? storedFilters.ascentStatusList : this.getAllAscentStatus(),
+          ropingStatusList: Array.isArray(storedFilters.ropingStatusList) ? storedFilters.ropingStatusList : this.getAllRopingStatus(),
+          climbingTypeList: Array.isArray(storedFilters.climbingTypeList) ? storedFilters.climbingTypeList : this.getAllClimbingTypes()
+        }
+      }
+    }
+    this.$emit('input', this.filters)
+  },
+
+  methods: {
+    onSubmit () {
+      this.$emit('input', { ...this.filters }) // Emit fresh copy of changes
+      this.showForm = false
+      localStorage.setItem('filters', JSON.stringify(this.filters))
+    },
+    getAllAscentStatus () {
+      return ['onsight', 'flash', 'red_point', 'project', 'sent', 'repetition']
+    },
+    getAllRopingStatus () {
+      return ['lead_climb', 'top_rope', 'multi_pitch_leader', 'multi_pitch_second', 'multi_pitch_alternate_lead']
+    },
+    getAllClimbingTypes () {
+      return ['sport_climbing', 'bouldering', 'multi_pitch', 'trad_climbing', 'aid_climbing', 'deep_water', 'via_ferrata']
+    }
+  }
+}
+</script>

components/logBooks/outdoors/LogBookClimbingTypeChart.vue

@@ -29,7 +29,10 @@ export default {
   name: 'LogBookClimbingTypeChart',
   components: { DoughnutChart },
   props: {
-    data: Object,
+    data: {
+      type: Object,
+      default: () => ({ labels: [], datasets: [] })
+    },
     legend: Boolean,
     heightClass: {
       type: String,