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:
parent
77a8ffa6a9
commit
cbc44841d4
@ -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;
|
||||
}
|
||||
|
@ -66,6 +66,7 @@ export const workoutsPayloadKeys = [
|
||||
'duration_from',
|
||||
'duration_to',
|
||||
'sport_id',
|
||||
'title'
|
||||
]
|
||||
|
||||
const getRange = (stop: number, start = 1): number[] => {
|
||||
|
Loading…
Reference in New Issue
Block a user