dancefinder/dancefinder-app
5
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Activity

Replace Table with responsive Card. Add refresh of token and retry on 401 errors

Browse Source
This commit is contained in:
Joakim Olsson
2019-01-18 14:03:58 +01:00
parent d4f432f422
commit 86486795f6
11 changed files with 230 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/pages/events/Event/index.vue
+35
View File
@@ -0,0 +1,35 @@
<template>
<Card dis-hover>
<p slot="title">{{event.band.name}}</p>
<a href="#" slot="extra" v-if="hasUser" @click.prevent="ignore('band', event.band.name)"><Icon type="ios-eye-off" title="Dölj"></Icon></a>
<Row>
<Col :xs="24" :sm="12"><strong>Datum:</strong> {{event.date}}</Col>
<Col :xs="24" :sm="12" v-if="event.time"><strong>Tid:</strong> {{event.time}}</Col>
</Row>
<Row>
<Col :xs="24" :sm="12" :md="6"><strong>Var:</strong> {{event.danceHall.name}} <a href="#" v-if="hasUser" @click.prevent="ignore('danceHall', event.danceHall.name)"><Icon type="ios-eye-off" title="Dölj"></Icon></a></Col>
<Col :xs="24" :sm="12" :md="6"><strong>Ort:</strong> {{event.danceHall.city}} <a href="#" v-if="hasUser" @click.prevent="ignore('city', event.danceHall.city)"><Icon type="ios-eye-off" title="Dölj"></Icon></a></Col>
<Col :xs="24" :sm="12" :md="6"><strong>Kommun:</strong> {{event.danceHall.municipality}} <a href="#" v-if="hasUser" @click.prevent="ignore('municipality', event.danceHall.municipality)"><Icon type="ios-eye-off" title="Dölj"></Icon></a></Col>
<Col :xs="24" :sm="12" :md="6"><strong>Län:</strong> {{event.danceHall.state}} <a href="#" v-if="hasUser" @click.prevent="ignore('state', event.danceHall.state)"><Icon type="ios-eye-off" title="Dölj"></Icon></a></Col>
</Row>
</Card>
</template>
<script>
export default {
props: {
event: {
type: Object,
required: true
},
hasUser: {
type: Boolean,
required: true
},
ignore: {
type: Function,
required: true
}
}
};
</script>
components/pages/events/index.vue
+53 -180
View File
@@ -2,7 +2,14 @@
<div>
<app-loader :show="isLoading" />
<div v-if="isReady || isSubmitting || isSubmitted" class="container app-fade-in">
<Table stripe border :columns="columns" :data="events"></Table>
<Content>
<Row :gutter="16" type="flex" justify="space-around" v-for="event in events" :key="event.id" class-name="eventRow">
<Col span="22">
<Event :event="event" :has-user="hasUser" :ignore="ignore"></Event>
</Col>
</Row>
<br>
</Content>
</div>
</div>
</template>
@@ -19,29 +26,11 @@
import auth from "~/utils/auth";
// import LoadFailed from "./Messages/LoadFailed";
// import NotViewable from "./Messages/NotViewable";
// import SubmitFailed from "./Messages/SubmitFailed";
// import SubmitSuccessful from "./Messages/SubmitSuccessful";
// import Alerts from "./Alerts";
// import TopBar from "./TopBar";
// import PackageSelector from "./PackageSelector";
// import ProductsForm from "./ProductsForm";
// import PropertyInfo from "./Info";
// import RealtorFrame from "./RealtorFrame";
import Event from "./Event";
export default {
components: {
// Alerts,
// LoadFailed,
// NotViewable,
// TopBar,
// PackageSelector,
// ProductsForm,
// PropertyInfo,
// RealtorFrame,
// SubmitFailed,
// SubmitSuccessful
Event
},
data() {
return {
@@ -54,136 +43,7 @@
selectedPackage: undefined,
selectedImages: [],
submitError: "",
user: undefined,
columns: [
{
title: 'Datum',
key: 'date'
},
{
title: 'Tid',
key: 'time'
},
{
title: 'Band',
render: (h, params) => {
const inner = Array(h('span', ' ' + params.row.band.name + ' '));
if (this.hasUser) {
inner.push(h('Icon', {
props: {
type: 'ios-eye-off'
},
attrs: {
title: 'Dölj'
},
on: {
click: () => {
this.ignoreBand({name: params.row.band.name})
}
}
}, 'Dölj'));
}
return h('div', inner);
}
},
{
title: 'Dansställe',
render: (h, params) => {
const inner = Array(h('span', ' ' + params.row.danceHall.name + ' '));
if (this.hasUser) {
inner.push(h('Icon', {
props: {
type: 'ios-eye-off'
},
attrs: {
title: 'Dölj'
},
on: {
click: () => {
this.ignoreDanceHall({name: params.row.danceHall.name})
}
}
}, 'Dölj'));
}
return h('div', inner);
}
},
{
title: 'Stad',
render: (h, params) => {
const inner = Array(h('span', ' ' + params.row.danceHall.city + ' '));
if (this.hasUser) {
inner.push(h('Icon', {
props: {
type: 'ios-eye-off'
},
attrs: {
title: 'Dölj'
},
on: {
click: () => {
this.ignoreCity({name: params.row.danceHall.city})
}
}
}, 'Dölj'));
}
return h('div', inner);
}
},
{
title: 'Kommun',
render: (h, params) => {
const inner = Array(h('span', ' ' + params.row.danceHall.municipality + ' '));
if (this.hasUser) {
inner.push(h('Icon', {
props: {
type: 'ios-eye-off'
},
attrs: {
title: 'Dölj'
},
on: {
click: () => {
this.ignoreMunicipality({name: params.row.danceHall.municipality})
}
}
}, 'Dölj'));
}
return h('div', inner);
}
},
{
title: 'Län',
render: (h, params) => {
const inner = Array(h('span', ' ' + params.row.danceHall.state + ' '));
if (this.hasUser) {
inner.push(h('Icon', {
props: {
type: 'ios-eye-off'
},
attrs: {
title: 'Dölj'
},
on: {
click: () => {
this.ignoreState({name: params.row.danceHall.state})
}
}
}, 'Dölj'));
}
return h('div', inner);
}
},
{
title: 'Övrigt',
key: 'extraInfo'
}
]
user: undefined
};
},
computed: {
@@ -209,7 +69,7 @@
return this.status === "no-packages";
},
hasUser() {
return this.user;
return this.user !== undefined && this.user !== null;
}
},
mounted() {
@@ -237,36 +97,45 @@
fetchUser() {
this.user = auth.getUserInfo();
},
ignoreBand(name) {
ignoreBand(name)
.then(this.ignoreSuccess)
.catch(this.ignoreFailed)
ignore(type, name) {
switch (type) {
case 'band':
ignoreBand({name: name})
.then(this.ignoreSuccess(name))
.catch(this.ignoreFailed);
break;
case 'danceHall':
ignoreDanceHall({name: name})
.then(this.ignoreSuccess(name))
.catch(this.ignoreFailed);
break;
case 'city':
ignoreCity({name: name})
.then(this.ignoreSuccess(name))
.catch(this.ignoreFailed);
break;
case 'municipality':
ignoreMunicipality({name: name}
.then(this.ignoreSuccess(name))
.catch(this.ignoreFailed));
break;
case 'state':
ignoreState({name: name})
.then(this.ignoreSuccess(name))
.catch(this.ignoreFailed);
break;
}
},
ignoreDanceHall(name) {
ignoreDanceHall(name)
.then(this.ignoreSuccess)
.catch(this.ignoreFailed)
ignoreSuccess(name) {
return () => {
this.$Message.success(`${name} har dolts`);
this.fetchEvents();
}
},
ignoreCity(name) {
ignoreCity(name)
.then(this.ignoreSuccess)
.catch(this.ignoreFailed)
},
ignoreMunicipality(name) {
ignoreMunicipality(name)
.then(this.ignoreSuccess)
.catch(this.ignoreFailed)
},
ignoreState(name) {
ignoreState(name)
.then(this.ignoreSuccess)
.catch(this.ignoreFailed)
},
ignoreSuccess(response) {
this.fetchEvents()
},
ignoreFailed() {
ignoreFailed(name) {
return () => {
this.$Message.error(`${name} kunde inte döljas`);
}
}
// switchPackage(pack) {
// this.selectedPackage = pack;
@@ -334,6 +203,10 @@
position: relative;
}
.eventRow {
margin-bottom: 1.5rem;
}
@media screen and(max-width: 1200px) {
.left {
width: 40vw;