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>
<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;
}

View File

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