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
parent
77a8ffa6a9
commit
cbc44841d4
@ -1,160 +1,187 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="workouts-filters">
|
<div class="workouts-filters">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="form">
|
<form v-on:submit.prevent="onSubmit" class="form">
|
||||||
<div class="form-items-group">
|
<div class="form">
|
||||||
<div class="form-item">
|
<div class="form-items-group">
|
||||||
<label> {{ $t('workouts.FROM') }}: </label>
|
<div class="form-item">
|
||||||
<input
|
<label> {{ $t('workouts.FROM') }}: </label>
|
||||||
name="from"
|
<input
|
||||||
type="date"
|
name="from"
|
||||||
:value="$route.query.from"
|
type="date"
|
||||||
@change="handleFilterChange"
|
:value="$route.query.from"
|
||||||
/>
|
@change="handleFilterChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<label> {{ $t('workouts.TO') }}: </label>
|
||||||
|
<input
|
||||||
|
name="to"
|
||||||
|
type="date"
|
||||||
|
:value="$route.query.to"
|
||||||
|
@change="handleFilterChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-item">
|
|
||||||
<label> {{ $t('workouts.TO') }}: </label>
|
|
||||||
<input
|
|
||||||
name="to"
|
|
||||||
type="date"
|
|
||||||
:value="$route.query.to"
|
|
||||||
@change="handleFilterChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-items-group">
|
<div class="form-items-group">
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label> {{ $t('workouts.SPORT', 1) }}:</label>
|
<label> {{ $t('workouts.SPORT', 1) }}:</label>
|
||||||
<select
|
<select
|
||||||
name="sport_id"
|
name="sport_id"
|
||||||
:value="$route.query.sport_id"
|
:value="$route.query.sport_id"
|
||||||
@change="handleFilterChange"
|
@change="handleFilterChange"
|
||||||
>
|
|
||||||
<option value="" />
|
|
||||||
<option
|
|
||||||
v-for="sport in translatedSports.filter((s) =>
|
|
||||||
authUser.sports_list.includes(s.id)
|
|
||||||
)"
|
|
||||||
:value="sport.id"
|
|
||||||
:key="sport.id"
|
|
||||||
>
|
>
|
||||||
{{ sport.translatedLabel }}
|
<option value="" />
|
||||||
</option>
|
<option
|
||||||
</select>
|
v-for="sport in translatedSports.filter((s) =>
|
||||||
|
authUser.sports_list.includes(s.id)
|
||||||
|
)"
|
||||||
|
:value="sport.id"
|
||||||
|
:key="sport.id"
|
||||||
|
>
|
||||||
|
{{ sport.translatedLabel }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</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.TITLE', 1) }}:</label>
|
||||||
<div class="form-inputs-group">
|
<div class="form-inputs-group">
|
||||||
<input
|
<input
|
||||||
name="distance_from"
|
class="title"
|
||||||
type="number"
|
name="title"
|
||||||
min="0"
|
:value="$route.query.title"
|
||||||
step="0.1"
|
@change="handleFilterChange"
|
||||||
:value="$route.query.distance_from"
|
placeholder=""
|
||||||
@change="handleFilterChange"
|
type="text"
|
||||||
/>
|
@keyup.enter="submit"
|
||||||
<span>{{ $t('workouts.TO') }}</span>
|
/>
|
||||||
<input
|
</div>
|
||||||
name="distance_to"
|
</div>
|
||||||
type="number"
|
</div>
|
||||||
min="0"
|
|
||||||
step="0.1"
|
<div class="form-items-group">
|
||||||
:value="$route.query.distance_to"
|
<div class="form-item">
|
||||||
@change="handleFilterChange"
|
<label> {{ $t('workouts.DISTANCE') }} ({{ toUnit }}): </label>
|
||||||
/>
|
<div class="form-inputs-group">
|
||||||
|
<input
|
||||||
|
name="distance_from"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="0.1"
|
||||||
|
:value="$route.query.distance_from"
|
||||||
|
@change="handleFilterChange"
|
||||||
|
@keyup.enter="submit"
|
||||||
|
/>
|
||||||
|
<span>{{ $t('workouts.TO') }}</span>
|
||||||
|
<input
|
||||||
|
name="distance_to"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="0.1"
|
||||||
|
:value="$route.query.distance_to"
|
||||||
|
@change="handleFilterChange"
|
||||||
|
@keyup.enter="submit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-items-group">
|
||||||
|
<div class="form-item">
|
||||||
|
<label> {{ $t('workouts.DURATION') }}: </label>
|
||||||
|
<div class="form-inputs-group">
|
||||||
|
<input
|
||||||
|
name="duration_from"
|
||||||
|
:value="$route.query.duration_from"
|
||||||
|
@change="handleFilterChange"
|
||||||
|
pattern="^([0-9]*[0-9]):([0-5][0-9])$"
|
||||||
|
placeholder="hh:mm"
|
||||||
|
type="text"
|
||||||
|
@keyup.enter="submit"
|
||||||
|
/>
|
||||||
|
<span>{{ $t('workouts.TO') }}</span>
|
||||||
|
<input
|
||||||
|
name="duration_to"
|
||||||
|
:value="$route.query.duration_to"
|
||||||
|
@change="handleFilterChange"
|
||||||
|
pattern="^([0-9]*[0-9]):([0-5][0-9])$"
|
||||||
|
placeholder="hh:mm"
|
||||||
|
type="text"
|
||||||
|
@keyup.enter="submit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-items-group">
|
||||||
|
<div class="form-item">
|
||||||
|
<label> {{ $t('workouts.AVE_SPEED') }} ({{ toUnit }}/h): </label>
|
||||||
|
<div class="form-inputs-group">
|
||||||
|
<input
|
||||||
|
min="0"
|
||||||
|
name="ave_speed_from"
|
||||||
|
:value="$route.query.ave_speed_from"
|
||||||
|
@change="handleFilterChange"
|
||||||
|
step="0.1"
|
||||||
|
type="number"
|
||||||
|
@keyup.enter="submit"
|
||||||
|
/>
|
||||||
|
<span>{{ $t('workouts.TO') }}</span>
|
||||||
|
<input
|
||||||
|
min="0"
|
||||||
|
name="ave_speed_to"
|
||||||
|
:value="$route.query.ave_speed_to"
|
||||||
|
@change="handleFilterChange"
|
||||||
|
step="0.1"
|
||||||
|
type="number"
|
||||||
|
@keyup.enter="submit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-items-group">
|
||||||
|
<div class="form-item">
|
||||||
|
<label> {{ $t('workouts.MAX_SPEED') }} ({{ toUnit }}/h): </label>
|
||||||
|
|
||||||
|
<div class="form-inputs-group">
|
||||||
|
<input
|
||||||
|
min="0"
|
||||||
|
name="max_speed_from"
|
||||||
|
:value="$route.query.max_speed_from"
|
||||||
|
@change="handleFilterChange"
|
||||||
|
step="0.1"
|
||||||
|
type="number"
|
||||||
|
@keyup.enter="submit"
|
||||||
|
/>
|
||||||
|
<span>{{ $t('workouts.TO') }}</span>
|
||||||
|
<input
|
||||||
|
min="0"
|
||||||
|
name="max_speed_to"
|
||||||
|
:value="$route.query.max_speed_to"
|
||||||
|
@change="handleFilterChange"
|
||||||
|
step="0.1"
|
||||||
|
type="number"
|
||||||
|
@keyup.enter="submit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-items-group">
|
<div class="form-button">
|
||||||
<div class="form-item">
|
<button type="submit" class="confirm" @click="onFilter">
|
||||||
<label> {{ $t('workouts.DURATION') }}: </label>
|
{{ $t('buttons.FILTER') }}
|
||||||
<div class="form-inputs-group">
|
</button>
|
||||||
<input
|
<button class="confirm" @click="onClearFilter">
|
||||||
name="duration_from"
|
{{ $t('buttons.CLEAR_FILTER') }}
|
||||||
:value="$route.query.duration_from"
|
</button>
|
||||||
@change="handleFilterChange"
|
|
||||||
pattern="^([0-9]*[0-9]):([0-5][0-9])$"
|
|
||||||
placeholder="hh:mm"
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
<span>{{ $t('workouts.TO') }}</span>
|
|
||||||
<input
|
|
||||||
name="duration_to"
|
|
||||||
:value="$route.query.duration_to"
|
|
||||||
@change="handleFilterChange"
|
|
||||||
pattern="^([0-9]*[0-9]):([0-5][0-9])$"
|
|
||||||
placeholder="hh:mm"
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</form>
|
||||||
<div class="form-items-group">
|
|
||||||
<div class="form-item">
|
|
||||||
<label> {{ $t('workouts.AVE_SPEED') }} ({{ toUnit }}/h): </label>
|
|
||||||
<div class="form-inputs-group">
|
|
||||||
<input
|
|
||||||
min="0"
|
|
||||||
name="ave_speed_from"
|
|
||||||
:value="$route.query.ave_speed_from"
|
|
||||||
@change="handleFilterChange"
|
|
||||||
step="0.1"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
<span>{{ $t('workouts.TO') }}</span>
|
|
||||||
<input
|
|
||||||
min="0"
|
|
||||||
name="ave_speed_to"
|
|
||||||
:value="$route.query.ave_speed_to"
|
|
||||||
@change="handleFilterChange"
|
|
||||||
step="0.1"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-items-group">
|
|
||||||
<div class="form-item">
|
|
||||||
<label> {{ $t('workouts.MAX_SPEED') }} ({{ toUnit }}/h): </label>
|
|
||||||
|
|
||||||
<div class="form-inputs-group">
|
|
||||||
<input
|
|
||||||
min="0"
|
|
||||||
name="max_speed_from"
|
|
||||||
:value="$route.query.max_speed_from"
|
|
||||||
@change="handleFilterChange"
|
|
||||||
step="0.1"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
<span>{{ $t('workouts.TO') }}</span>
|
|
||||||
<input
|
|
||||||
min="0"
|
|
||||||
name="max_speed_to"
|
|
||||||
:value="$route.query.max_speed_to"
|
|
||||||
@change="handleFilterChange"
|
|
||||||
step="0.1"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-button">
|
|
||||||
<button class="confirm" @click="onFilter">
|
|
||||||
{{ $t('buttons.FILTER') }}
|
|
||||||
</button>
|
|
||||||
<button class="confirm" @click="onClearFilter">
|
|
||||||
{{ $t('buttons.CLEAR_FILTER') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</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