Add field for title filter on Workouts page in client;

allow for filter submission by pressing "enter" in any of the text inputs
This commit is contained in:
Joshua Taillon 2023-03-18 11:52:17 -06:00
parent 77a8ffa6a9
commit cbc44841d4
2 changed files with 175 additions and 144 deletions

View File

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

View File

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