Verified Commit ce96dc09 authored by Jonatan Zint's avatar Jonatan Zint
Browse files

working search

parent f24eb57d
Pipeline #1258 passed with stages
in 48 seconds
......@@ -24,9 +24,15 @@ module.exports = function(ctx) {
"QLayout",
"QHeader",
"QTab",
"QTable",
"QTr",
"QTd",
"QBtn",
"QPage",
"QPageSticky",
"QRouteTab",
"QInput",
"QIcon",
"QTabs",
"QPageContainer",
"QSpinnerCube",
......@@ -69,11 +75,15 @@ module.exports = function(ctx) {
},
env: {
FRAB_URL: JSON.stringify("https://frab.hedonist-international.org/"),
SCHEDULE_NEAR: JSON.stringify("https://info2019.hedonist-international.org/schedule/schedule.json"),
SCHEDULE_NEAR: JSON.stringify(
"https://info2019.hedonist-international.org/schedule/schedule.json"
),
SCHEDULE_FAR: JSON.stringify(
"https://frab.hedonist-international.org/en/WK2019/public/schedule.json"
),
SPEAKERS_NEAR: JSON.stringify("https://info2019.hedonist-international.org/schedule/speakers.json"),
SPEAKERS_NEAR: JSON.stringify(
"https://info2019.hedonist-international.org/schedule/speakers.json"
),
SPEAKERS_FAR: JSON.stringify(
"https://frab.hedonist-international.org/en/WK2019/public/speakers.json"
)
......@@ -97,9 +107,9 @@ module.exports = function(ctx) {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {}, // only for NON InjectManifest
manifest: {
name: 'Worldcongress 2019',
short_name: 'Worldcongress 2019',
description: 'The Hedonist Worldcongress 2019 companion app',
name: "Worldcongress 2019",
short_name: "Worldcongress 2019",
description: "The Hedonist Worldcongress 2019 companion app",
display: "standalone",
orientation: "any",
background_color: "#ffffff",
......
@require "./quasar.variables"
#q-app
height 100vh
overflow hidden
.kyrene-loader
align-self center
margin-top 5vh
\ No newline at end of file
margin-top 5vh
.link
color $primary
text-decoration none
border-bottom 1px dotted $primary
\ No newline at end of file
......@@ -3,8 +3,7 @@
header.header
Navigation(defaultRoom="Kino")
main
keep-alive(include="search")
router-view
router-view
</template>
<style lang="stylus" scoped>
......
<template lang="pug">
.search
q-data-table(:data="events", :columns="columns", :config="config")
template(slot="col-title", slot-scope="cell")
router-link(:to="{ name: 'event', params: { id: cell.row.id }}") {{ cell.data }}
template(slot="col-persons", slot-scope="cell")
span(v-for="(speaker, index) in cell.data")
router-link(:to="{ name: 'speaker', params: { id: speaker.id }}") {{ speaker.public_name }}
span(v-if="index !== cell.data.length - 1") ,&nbsp;
.search
q-spinner-cube.kyrene-loader(v-if="!READY", color="orange" size="6em")
template(v-if="READY")
q-table(title="Search", :data="LIST_EVENTS" dense="" :visible-columns="['title']" row-key="name" :pagination.sync="pagination" card-class="" :filter="term" :columns="columns")
template(v-slot:body="props")
q-tr(:props="props" )
q-td(key="title", :props="props")
.flex-container
router-link.link.event(:to="{ name: 'event', params: { id: props.row.id }}") {{ cropName(props.row.title) }}
q-btn.collapse(dense='', round='', flat='', :icon="expanded[props.row.id] ? 'arrow_drop_up' : 'arrow_drop_down'", @click='expand(props.row.id)')
q-tr(v-show='expanded[props.row.id]', :props='props')
q-td(colspan='100%')
div {{ props.row.room }}
div {{ dateToDay(props.row.date) }}
template(v-slot:top-right="")
q-input(borderless dense debounce="300" v-model="term" placeholder="Search")
template(v-slot:append="")
q-icon(name="search")
</template>
<style lang="stylus" scoped>
.search
width: 100%
display flex
flex-direction column
overflow auto
.search-field
display: block
.q-data-table-toolbar.upper-toolbar
min-height: 0px !important
.flex-container
display flex
.event
align-self center
.collapse
margin-left auto
</style>
<script>
import moment from "moment";
import { mapGetters } from "vuex";
import { LIST_EVENTS, READY } from "../store/types";
export default {
name: "SearchPage",
data() {
return {
term: "",
config: {},
pagination: {
sortBy: "name",
descending: false,
page: 1,
rowsPerPage: 20
// rowsNumber: xx if getting data from a server
},
expanded: {},
columns: [
{
name: "title",
label: "Title",
field: "title",
width: "100px",
filter: true
},
{
label: "Abstract",
field: "abstract",
width: "100px",
filter: true
filter: true,
align: "left"
},
{
name: "room",
label: "Space",
field: "room",
width: "100px",
filter: true,
sort: true
},
{
name: "date",
label: "Date",
field: "date",
width: "100px",
format(value) {
return moment(value).format("dddd HH:mm");
},
sort(a, b) {
return moment().diff(moment(a)) - moment().diff(moment(b));
}
},
{
label: "Speaker",
field: "persons",
width: "100px",
filter: true
}
]
};
},
computed: {
events() {
return this.$store.getters.allEvents;
methods: {
expand(id) {
this.$set(this.expanded, id, !this.expanded[id]);
},
cropName(value) {
if (value.length > 45) {
return value.substring(0, 42) + "...";
} else {
return value;
}
},
dateToDay(value) {
return moment(value).format("dddd HH:mm");
}
},
computed: {
...mapGetters([LIST_EVENTS, READY])
}
};
</script>
......@@ -24,7 +24,12 @@ const routes = [
]
},
{ path: "/map", component: MapPage },
{ path: "/search", component: SearchPage, canReuse: true },
{
path: "/search",
component: SearchPage,
canReuse: true,
name: "search"
},
{ path: "/speaker/:id", component: SpeakerDetailPage, name: "speaker" },
{ path: "/event/:id", component: EventPage, name: "event" }
]
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment