Add dropdown filter to show rooms, languages, session types. Ensure it works in mobile view

webapp/package.json

@@ -48,6 +48,7 @@
     "uuid": "^8.3.0",
     "vue": "^2.6.12",
     "vue-advanced-cropper": "^0.16.10",
+    "vue-clickaway": "^2.2.2",
     "vue-js-modal": "^2.0.1",
     "vue-router": "^3.4.3",
     "vue-slicksort": "^1.2.0",

webapp/src/components/AppDropdown.vue

@@ -0,0 +1,82 @@
+<template>
+    <div v-on-clickaway="away" :class="elClass">
+      <bunt-button @click="toggle">
+        <slot name="toggler"> Toggle </slot>
+        <svg
+          v-if="this.sharedState.active"
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+        >
+          <path fill="currentColor" d="m7 15l5-5l5 5z" />
+        </svg>
+        <svg
+          v-else
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+        >
+          <path fill="currentColor" d="m7 10l5 5l5-5z" />
+        </svg>
+      </bunt-button>
+      <slot />
+    </div>
+  </template>
+  <script>
+  import { computed } from 'vue';
+import { mixin as clickaway } from 'vue-clickaway'
+
+  export default {
+      name: 'AppDropdown',
+      mixins: [clickaway],
+      props: {
+        className: {
+          type: String,
+          default: '',
+        },
+      },
+      provide () {
+          return {
+              sharedState: this.sharedState
+          }
+      },
+      data () {
+          return {
+              sharedState: {
+                  active: false,
+              },
+          }
+      },
+      methods: {
+          toggle () {
+              this.sharedState.active = !this.sharedState.active
+          },
+          away () {
+              this.sharedState.active = false
+          }
+      },
+      computed: {
+        elClass () {
+      return this.className ? this.className + " app-drop-down"  : 'app-drop-down'
+    },
+      }
+  }
+  </script>
+  <style>
+  .app-drop-down {
+    margin: 12px 4px 12px 14px;
+    border-radius: 5px;
+    border: 2px solid rgba(0, 0, 0, 0.38);
+  }
+
+  .app-drop-down .bunt-button {
+    background-color: white;
+  }
+
+  .app-drop-down .bunt-button .bunt-button-content {
+    text-transform: capitalize;
+  }
+  </style>
+

webapp/src/components/AppDropdownContent.vue

@@ -0,0 +1,82 @@
+<template>
+  <transition :name="elClass">
+    <div v-if="active" :class="elClass" @click.stop>
+      <slot />
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+	name: 'AppDropdownContent',
+	inject: ['sharedState'],
+  props: {
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+	computed: {
+		active () {
+			return this.sharedState.active
+		},
+    elClass () {
+      return this.className ? this.className + " dropdown-content"  : 'dropdown-content'
+    },
+	},
+}
+</script>
+
+<style>
+.dropdown-content {
+  position: absolute;
+  margin-top: 4px;
+  left: 0;
+  right: 0;
+  width: 100%;
+  max-width: none;
+  min-width: 400px;
+  border: 1px solid rgba(0, 0, 0, 0.38);
+  background-color: #fff;
+  z-index: 1000;
+  max-height: 350px;
+  overflow-y: auto;
+  padding-bottom: 10px;
+}
+.dropdown-content .checkbox-line {
+  margin: 8px;
+}
+.dropdown-content .checkbox-line .bunt-checkbox .bunt-checkbox-box {
+  min-width: 20px;
+}
+.dropdown-content-enter-active,
+.dropdown-content-leave-active {
+  transition: all 0.2s;
+}
+.dropdown-content-enter,
+.dropdown-content-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+
+.checkbox-text {
+  margin-left: 10px;
+  flex: 1;
+  white-space: normal;
+  overflow: hidden; 
+  text-overflow: ellipsis;
+  text-align: left;
+}
+
+@media (max-width: 480px) {
+  .dropdown-content {
+    width: 70vw;
+    left: 5vw;
+    right: auto; 
+    max-width: calc(100% - 40px);
+    min-width: 350px;
+    margin-left: -20px;
+    position: fixed;
+  }
+}
+</style>

webapp/src/components/AppDropdownItem.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+      <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AppDropdownItem"
+};
+</script>

webapp/src/store/schedule.js

@@ -47,6 +47,10 @@ export default {
 			if (!state.schedule) return {}
 			return state.schedule.speakers.reduce((acc, s) => { acc[s.code] = s; return acc }, {})
 		},
+		sessionTypeLookup (state) {
+			if (!state.schedule) return {}
+			return state.schedule.session_type.reduce((acc, s) => { acc[s.code] = s; return acc }, {})
+		},
 		sessions (state, getters, rootState) {
 			if (!state.schedule) return
 			const sessions = []
@@ -70,7 +74,8 @@ export default {
 					speakers: session.speakers?.map(s => getters.speakersLookup[s]),
 					track: getters.tracksLookup[session.track],
 					room: getters.roomsLookup[session.room],
-					tags: session.tags
+					tags: session.tags,
+					session_type: session.session_type
 				})
 			}
 			sessions.sort((a, b) => (
@@ -117,6 +122,9 @@ export default {
 				}
 			}
 			return rooms
+		},
+		schedule (state) {
+			return state.schedule
 		}
 	},
 	actions: {
@@ -127,6 +135,13 @@ export default {
 			// console.log(version.results[0].version)
 			try {
 				state.schedule = await (await fetch(getters.pretalxScheduleUrl)).json()
+				state.schedule.session_type = state.schedule.talks.reduce((acc, current) => {
+					const isDuplicate = acc.some(item => item.session_type === current.session_type);
+					if (!isDuplicate) {
+					  acc.push(current);
+					}
+					return acc;
+				  }, []);
 			} catch (error) {
 				state.errorLoading = error
 			}