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>
|
<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;
|
||||||
}
|
}
|
||||||
|
@ -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[] => {
|
||||||
|
Loading…
Reference in New Issue
Block a user