Add field for title filter on Workouts page in client;

allow for filter submission by pressing "enter" in any of the text inputs

fittrackee_client/src/components/Workouts/WorkoutsFilters.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="workouts-filters">
     <div class="box">
+      <form v-on:submit.prevent="onSubmit" class="form">
         <div class="form">
           <div class="form-items-group">
             <div class="form-item">
@@ -45,6 +46,23 @@
             </div>
           </div>
 
+          <div class="form-items-group">
+            <div class="form-item">
+              <label> {{ $t('workouts.TITLE', 1) }}:</label>
+              <div class="form-inputs-group">
+                <input
+                  class="title"
+                  name="title"
+                  :value="$route.query.title"
+                  @change="handleFilterChange"
+                  placeholder=""
+                  type="text"
+                  @keyup.enter="submit"
+                />
+                </div>
+            </div>
+          </div>
+
           <div class="form-items-group">
             <div class="form-item">
               <label> {{ $t('workouts.DISTANCE') }} ({{ toUnit }}): </label>
@@ -56,6 +74,7 @@
                   step="0.1"
                   :value="$route.query.distance_from"
                   @change="handleFilterChange"
+                  @keyup.enter="submit"
                 />
                 <span>{{ $t('workouts.TO') }}</span>
                 <input
@@ -65,6 +84,7 @@
                   step="0.1"
                   :value="$route.query.distance_to"
                   @change="handleFilterChange"
+                  @keyup.enter="submit"
                 />
               </div>
             </div>
@@ -81,6 +101,7 @@
                   pattern="^([0-9]*[0-9]):([0-5][0-9])$"
                   placeholder="hh:mm"
                   type="text"
+                  @keyup.enter="submit"
                 />
                 <span>{{ $t('workouts.TO') }}</span>
                 <input
@@ -90,6 +111,7 @@
                   pattern="^([0-9]*[0-9]):([0-5][0-9])$"
                   placeholder="hh:mm"
                   type="text"
+                  @keyup.enter="submit"
                 />
               </div>
             </div>
@@ -106,6 +128,7 @@
                   @change="handleFilterChange"
                   step="0.1"
                   type="number"
+                  @keyup.enter="submit"
                 />
                 <span>{{ $t('workouts.TO') }}</span>
                 <input
@@ -115,6 +138,7 @@
                   @change="handleFilterChange"
                   step="0.1"
                   type="number"
+                  @keyup.enter="submit"
                 />
               </div>
             </div>
@@ -132,6 +156,7 @@
                   @change="handleFilterChange"
                   step="0.1"
                   type="number"
+                  @keyup.enter="submit"
                 />
                 <span>{{ $t('workouts.TO') }}</span>
                 <input
@@ -141,6 +166,7 @@
                   @change="handleFilterChange"
                   step="0.1"
                   type="number"
+                  @keyup.enter="submit"
                 />
               </div>
             </div>
@@ -148,13 +174,14 @@
         </div>
 
         <div class="form-button">
-        <button class="confirm" @click="onFilter">
+          <button type="submit" class="confirm" @click="onFilter">
             {{ $t('buttons.FILTER') }}
           </button>
           <button class="confirm" @click="onClearFilter">
             {{ $t('buttons.CLEAR_FILTER') }}
           </button>
         </div>
+      </form>
     </div>
   </div>
 </template>
@@ -245,6 +272,9 @@
             input {
               width: 34%;
             }
+            input.title {
+              width: 100%;
+            }
             span {
               padding: $default-padding * 0.5;
             }

fittrackee_client/src/utils/api.ts

@@ -66,6 +66,7 @@ export const workoutsPayloadKeys = [
   'duration_from',
   'duration_to',
   'sport_id',
+  'title'
 ]
 
 const getRange = (stop: number, start = 1): number[] => {