Skip to content

Commit

Permalink
Replace unnecessary nested routes to fix their page transitions
Browse files Browse the repository at this point in the history
  • Loading branch information
@francoispluchino
francoispluchino committed Mar 16, 2020
1 parent 05eb905 commit 81921cb
Show file tree
Hide file tree
Showing 7 changed files with 201 additions and 263 deletions.
2 changes: 1 addition & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ file that was distributed with this source code.

<v-content>
<transition :name="transitionName" mode="out-in">
<router-view></router-view>
<router-view :key="$route.fullPath"></router-view>
</transition>
</v-content>

Expand Down
84 changes: 32 additions & 52 deletions src/router.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,69 +48,49 @@ export default new Router({
},
},
{
path: '/bib-labels',
path: '/bib-labels/print-one',
name: 'bib-labels-print-one',
meta: {requiresAuth: true},
components: {
default: () => import(/* webpackChunkName: "bib-labels" */ '@/views/BibLabels/BibLabels.vue'),
default: () => import(/* webpackChunkName: "bib-labels" */ '@/views/BibLabels/PrintOne.vue'),
toolbar: () => import(/* webpackChunkName: "bib-labels" */'@/components/Toolbar.vue'),
},
children: [
{
path: 'print-one',
name: 'bib-labels-print-one',
meta: {requiresAuth: true},
components: {
default: () => import(/* webpackChunkName: "bib-labels" */ '@/views/BibLabels/PrintOne.vue'),
toolbar: () => import(/* webpackChunkName: "bib-labels" */'@/components/Toolbar.vue'),
},
},
{
path: 'print-mass',
name: 'bib-labels-print-mass',
meta: {requiresAuth: true},
components: {
default: () => import(/* webpackChunkName: "bib-labels" */ '@/views/BibLabels/PrintMass.vue'),
toolbar: () => import(/* webpackChunkName: "bib-labels" */'@/components/Toolbar.vue'),
},
},
],
},
{
path: '/bib-labels/print-mass',
name: 'bib-labels-print-mass',
meta: {requiresAuth: true},
components: {
default: () => import(/* webpackChunkName: "bib-labels" */ '@/views/BibLabels/PrintMass.vue'),
toolbar: () => import(/* webpackChunkName: "bib-labels" */'@/components/Toolbar.vue'),
},
},
{
path: '/participants/results',
name: 'participants-results',
meta: {requiresAuth: true, transitionName: 'slide'},
components: {
default: () => import(/* webpackChunkName: "participants" */ '@/views/Participants/Results.vue'),
toolbar: () => import(/* webpackChunkName: "participants" */'@/components/Toolbar.vue'),
},
},
{
path: '/participants/:id',
name: 'participants-details',
meta: {requiresAuth: true, transitionName: 'slide'},
components: {
default: () => import(/* webpackChunkName: "participants" */ '@/views/Participants/Details.vue'),
toolbar: () => import(/* webpackChunkName: "participants" */'@/components/Toolbar.vue'),
},
},
{
path: '/participants',
name: 'participants',
meta: {requiresAuth: true},
components: {
default: () => import(/* webpackChunkName: "participants" */ '@/views/Participants/Participants.vue'),
default: () => import(/* webpackChunkName: "participants" */ '@/views/Participants/Search.vue'),
toolbar: () => import(/* webpackChunkName: "participants" */'@/components/Toolbar.vue'),
},
children: [
{
path: 'results',
name: 'participants-results',
meta: {requiresAuth: true},
components: {
default: () => import(/* webpackChunkName: "participants" */ '@/views/Participants/Results.vue'),
toolbar: () => import(/* webpackChunkName: "participants" */'@/components/Toolbar.vue'),
},
},
{
path: ':id',
name: 'participants-details',
meta: {requiresAuth: true},
components: {
default: () => import(/* webpackChunkName: "participants" */ '@/views/Participants/Details.vue'),
toolbar: () => import(/* webpackChunkName: "participants" */'@/components/Toolbar.vue'),
},
},
{
path: '',
name: 'participants',
meta: {requiresAuth: true},
components: {
default: () => import(/* webpackChunkName: "participants" */ '@/views/Participants/Search.vue'),
toolbar: () => import(/* webpackChunkName: "participants" */'@/components/Toolbar.vue'),
},
},
],
},
{
path: '/settings',
Expand Down
27 changes: 0 additions & 27 deletions src/views/BibLabels/BibLabels.vue
View file

This file was deleted.

42 changes: 24 additions & 18 deletions src/views/Participants/Details.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,30 @@ file that was distributed with this source code.
-->

<template>
<transition name="fade" mode="out-in">
<error-message :message="previousError.message" v-if="!loading && !!previousError">
<v-btn depressed ripple color="accent" class="mt-3" @click.prevent="requestContent">
{{ $t('retry') }}
</v-btn>
</error-message>

<participant-card :registration="registration" v-else-if="!loading && !!registration">
</participant-card>

<error-message :message="$t('error.404-page-not-found')" v-else-if="!loading && !previousError">
<v-btn depressed ripple color="accent" class="mt-3" @click.prevent="$routerBack.back()">
{{ $t('views.participants.retry-search') }}
</v-btn>
</error-message>

<loading v-else-if="loading"></loading>
</transition>
<v-container fill-height>
<v-row no-gutters justify="center" class="fill-height">
<v-col cols="12" sm="10" md="8" lg="6" xl="4">
<transition name="fade" mode="out-in">
<error-message :message="previousError.message" v-if="!loading && !!previousError">
<v-btn depressed ripple color="accent" class="mt-3" @click.prevent="requestContent">
{{ $t('retry') }}
</v-btn>
</error-message>

<participant-card :registration="registration" v-else-if="!loading && !!registration">
</participant-card>

<error-message :message="$t('error.404-page-not-found')" v-else-if="!loading && !previousError">
<v-btn depressed ripple color="accent" class="mt-3" @click.prevent="$routerBack.back()">
{{ $t('views.participants.retry-search') }}
</v-btn>
</error-message>

<loading v-else-if="loading"></loading>
</transition>
</v-col>
</v-row>
</v-container>
</template>

<script lang="ts">
Expand Down
33 changes: 0 additions & 33 deletions src/views/Participants/Participants.vue
View file

This file was deleted.

158 changes: 82 additions & 76 deletions src/views/Participants/Results.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,83 +8,89 @@ file that was distributed with this source code.
-->

<template>
<transition name="fade" mode="out-in">
<error-message :message="previousError.message" v-if="!loading && !!previousError">
<v-btn outlined color="accent" class="mt-3" @click.prevent="requestContent">{{ $t('retry') }}</v-btn>
</error-message>

<v-card flat v-else-if="!loading">
<v-card-title primary-title>
<div :class="$store.state.darkMode.enabled ? 'headline' : 'headline primary--text'">
{{ $t('views.participants.title') }}
</div>
</v-card-title>

<v-data-table
:headers="headers"
:items="cacheResults ? cacheResults.results : []"
:server-items-length="cacheResults ? cacheResults.total : 0"
:options.sync="tableOptions"
:no-data-text="$t('views.participants.search-not-found')"
:footer-props.sync="tableFooterProps"
item-key="id"
class="d-block">
<template v-slot:item="{index, item}">
<tr>
<td class="participant-item pt-2 pb-2" @click="itemSelection(index)">
<div>
<span class="primary--text">
{{ $store.getters['edition/getCompetitionName'](item.competition_id) }}
</span>
<v-container fill-height>
<v-row no-gutters justify="center" class="fill-height">
<v-col cols="12" sm="10" md="8" lg="6" xl="4">
<transition name="fade" mode="out-in">
<error-message :message="previousError.message" v-if="!loading && !!previousError">
<v-btn outlined color="accent" class="mt-3" @click.prevent="requestContent">{{ $t('retry') }}</v-btn>
</error-message>

<v-card flat v-else-if="!loading">
<v-card-title primary-title>
<div :class="$store.state.darkMode.enabled ? 'headline' : 'headline primary--text'">
{{ $t('views.participants.title') }}
</div>
<div class="subtitle-1">
<span>{{ item.firstname }}</span>
&nbsp;
<strong class="text-uppercase">{{ item.lastname }}</strong>
</div>
<div>
<span>{{ $t('views.participants.bib-label') }}</span>
&nbsp;
<span v-if="item.bib && item.bib.code">{{ item.bib.code }}</span>
<span v-else class="warning--text">{{ $t('views.participants.no-bib') }}</span>
</div>
<div>
<v-chip small :color="item.isRegistered ? 'teal' : 'red'" text-color="white" class="ma-1">
{{ $t('views.participants.choices.registered.' + item.isRegistered) }}
</v-chip>

<v-chip small :color="0 === item.status ? 'teal' : 'red'" text-color="white" class="ma-1">
{{ $t('views.participants.choices.status.' + item.status) }}
</v-chip>
</div>
</td>
<td class="participant-item" @click="itemSelection(item.index)">
<v-tooltip left v-if="item.bib && item.bib.code && item.bibRetrieved" eager>
<template v-slot:activator="{on}">
<v-icon color="green" v-on="on">directions_run</v-icon>
</template>
<span>{{ $t('views.participants.bib-retrieved') }}</span>
</v-tooltip>

<v-tooltip left v-else-if="item.bib && item.bib.code" eager>
<template v-slot:activator="{on}">
<v-icon color="grey" v-on="on">inbox</v-icon>
</template>
<span>{{ $t('views.participants.bib-not-retrieved') }}</span>
</v-tooltip>
</td>
</tr>
</template>
</v-data-table>

<v-card-actions v-if="0 === cacheResults.total">
<v-btn depressed block ripple color="accent" @click.prevent="$routerBack.back()">
{{ $t('views.participants.retry-search') }}
</v-btn>
</v-card-actions>
</v-card>
<loading v-if="loading"></loading>
</transition>
</v-card-title>

<v-data-table
:headers="headers"
:items="cacheResults ? cacheResults.results : []"
:server-items-length="cacheResults ? cacheResults.total : 0"
:options.sync="tableOptions"
:no-data-text="$t('views.participants.search-not-found')"
:footer-props.sync="tableFooterProps"
item-key="id"
class="d-block">
<template v-slot:item="{index, item}">
<tr>
<td class="participant-item pt-2 pb-2" @click="itemSelection(index)">
<div>
<span class="primary--text">
{{ $store.getters['edition/getCompetitionName'](item.competition_id) }}
</span>
</div>
<div class="subtitle-1">
<span>{{ item.firstname }}</span>
&nbsp;
<strong class="text-uppercase">{{ item.lastname }}</strong>
</div>
<div>
<span>{{ $t('views.participants.bib-label') }}</span>
&nbsp;
<span v-if="item.bib && item.bib.code">{{ item.bib.code }}</span>
<span v-else class="warning--text">{{ $t('views.participants.no-bib') }}</span>
</div>
<div>
<v-chip small :color="item.isRegistered ? 'teal' : 'red'" text-color="white" class="ma-1">
{{ $t('views.participants.choices.registered.' + item.isRegistered) }}
</v-chip>

<v-chip small :color="0 === item.status ? 'teal' : 'red'" text-color="white" class="ma-1">
{{ $t('views.participants.choices.status.' + item.status) }}
</v-chip>
</div>
</td>
<td class="participant-item" @click="itemSelection(item.index)">
<v-tooltip left v-if="item.bib && item.bib.code && item.bibRetrieved" eager>
<template v-slot:activator="{on}">
<v-icon color="green" v-on="on">directions_run</v-icon>
</template>
<span>{{ $t('views.participants.bib-retrieved') }}</span>
</v-tooltip>

<v-tooltip left v-else-if="item.bib && item.bib.code" eager>
<template v-slot:activator="{on}">
<v-icon color="grey" v-on="on">inbox</v-icon>
</template>
<span>{{ $t('views.participants.bib-not-retrieved') }}</span>
</v-tooltip>
</td>
</tr>
</template>
</v-data-table>

<v-card-actions v-if="0 === cacheResults.total">
<v-btn depressed block ripple color="accent" @click.prevent="$routerBack.back()">
{{ $t('views.participants.retry-search') }}
</v-btn>
</v-card-actions>
</v-card>
<loading v-if="loading"></loading>
</transition>
</v-col>
</v-row>
</v-container>
</template>

<script lang="ts">
Expand Down
Loading

0 comments on commit 81921cb

Please sign in to comment.