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