working search

quasar.conf.js

@@ -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",

src/css/app.styl

+@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

src/pages/Index.vue

@@ -3,8 +3,7 @@
     header.header
       Navigation(defaultRoom="Kino")
     main
-      keep-alive(include="search")
-        router-view
+      router-view
 </template>
 
 <style lang="stylus" scoped>

src/pages/Search.vue

 <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>

src/router/routes.js

@@ -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" }
     ]