Creates a layout for extra filters and results and use it on advocates page

components/advocates/MeetTheAdvocates.vue

@@ -1,138 +1,64 @@
 <template>
   <div class="meet-the-advocates">
-    <div class="meet-the-advocates__container">
-      <h2 class="copy__title">
-        Meet the Advocates
-      </h2>
-      <p class="copy__paragraph copy__paragraph_importance_support">
-        Qiskit advocates are some of the finest minds in quantum computing,
-        all over the world. If you are interested in getting involved with the
-        quantum computing community, reach out to an advocate local to your area.
-      </p>
-      <div
-        class="meet-the-advocates__extra-filters meet-the-advocates__extra-filters_on-small-screen"
-      >
-        <AppMultiSelect
-          :label="extraFilter.label"
-          :options="extraFilter.options"
+    <h2 class="copy__title">
+      Meet the Advocates
+    </h2>
+    <p class="copy__paragraph copy__paragraph_importance_support">
+      Qiskit advocates are some of the finest minds in quantum computing,
+      all over the world. If you are interested in getting involved with the
+      quantum computing community, reach out to an advocate local to your area.
+    </p>
+    <AppFiltersResultsLayout>
+      <template slot="filters-on-m-l-screen">
+        <AppFieldset :label="filter.label">
+          <client-only>
+            <AppCheckbox
+              v-for="option in filter.options"
+              :key="option"
+              :option="option"
+            />
+          </client-only>
+        </AppFieldset>
+      </template>
+      <template slot="filters-on-s-screen">
+        <AppMultiSelect v-bind="filter" />
+      </template>
+      <template slot="results">
+        <AdvocateCard
+          v-for="advocate in advocates"
+          :key="`advocate-${advocate.attributes.name}`"
+          v-bind="advocate.attributes"
         />
-      </div>
-      <div class="meet-the-advocates__index">
-        <div class="meet-the-advocates__extra-filters meet-the-advocates__extra-filters_on-large-screen">
-          <AppFieldset :label="extraFilter.label">
-            <client-only>
-              <AppCheckbox
-                v-for="option in extraFilter.options"
-                :key="option.label"
-                v-bind="option"
-              />
-            </client-only>
-          </AppFieldset>
-        </div>
-        <div class="meet-the-advocates__main-content">
-          <AdvocateCard
-            v-for="advocate in advocates"
-            :key="`advocate-${advocate.attributes.name}`"
-            v-bind="advocate.attributes"
-          />
-        </div>
-      </div>
-    </div>
+      </template>
+    </AppFiltersResultsLayout>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
-import AppCard from '~/components/ui/AppCard.vue'
 import AdvocateCard from '~/components/advocates/AdvocateCard.vue'
 import AppMultiSelect from '~/components/ui/AppMultiSelect.vue'
 import AppFieldset from '~/components/ui/AppFieldset.vue'
 import AppCheckbox from '~/components/ui/AppCheckbox.vue'
-
-type multiSelectOption = {
-  label: string,
-  value: string,
-  name: string
-}
+import AppFiltersResultsLayout from '~/components/ui/AppFiltersResultsLayout.vue'
 
 @Component({
   components: {
     AdvocateCard,
-    AppCard,
     AppMultiSelect,
     AppFieldset,
-    AppCheckbox
+    AppCheckbox,
+    AppFiltersResultsLayout
   }
 })
 export default class extends Vue {
   @Prop(Array) advocates!: any
 
-  regions = ['Europe', 'Asia', 'Africa', 'America']
-  emptyCard = {
-    title: 'No people found',
-    description: 'No Qiskit advocates found for the given criteria. Trying doing a broader search. There are literally dozens of us.',
-    img: '/images/events/no-events.svg'
-  }
-
-  regionsOptions = this.getOptions(this.regions)
-  regionsLabel: string = 'Locations'
-  regionsFilters: string = 'regionFilters'
-
-  extraFilter = {
-    label: this.regionsLabel,
-    options: this.regionsOptions,
-    filterType: this.regionsFilters
-  }
-
-  getOptions (optionsList: any): Array<multiSelectOption> {
-    return optionsList.map((item: string) => ({ label: item, value: item, name: item }))
+  filter = {
+    label: 'Locations',
+    options: ['Europe', 'Asia', 'Africa', 'America'],
+    filterType: 'regionFilters'
   }
 }
 </script>
-
-<style lang="scss">
-@import '~carbon-components/scss/globals/scss/typography';
-
-.meet-the-advocates {
-  background-color: $white;
-  color: $white-text-01;
-
-  &__container {
-    @include contained();
-  }
-
-  &__index {
-    display: flex;
-    justify-content: space-between;
-    margin-top: $layout-05;
-
-    @include mq($until: medium) {
-      flex-direction: column;
-    }
-  }
-
-  &__extra-filters {
-    &_on-large-screen {
-      @include mq($until: medium) {
-        display: none;
-      }
-    }
-
-    &_on-small-screen {
-      @include mq($from: medium) {
-        display: none;
-      }
-    }
-  }
-
-  &__main-content {
-    width: 75%;
-
-    @include mq($until: medium) {
-      width: 100%;
-      margin-top: $layout-04;
-    }
-  }
-}
-</style>

components/ui/AppCheckbox.vue

@@ -16,8 +16,7 @@ type checkboxOption = {
 
 @Component
 export default class extends Vue {
-  @Prop(String) value!: string
-  @Prop(String) label!: string
+  @Prop(String) option!: string
   // TODO: Add checked, aria-checked and @change when doing the filter behaviour. Also
   // reuse this component on events page
 

components/ui/AppFiltersResultsLayout.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="app-filters-results-layout">
+    <div class="app-filters-results-layout__filters app-filters-results-layout__filters_on-large-screen">
+      <slot name="filters-on-m-l-screen" />
+    </div>
+    <div class="app-filters-results-layout__filters app-filters-results-layout__filters_on-small-screen">
+      <slot name="filters-on-s-screen" />
+    </div>
+    <div class="app-filters-results-layout__results">
+      <slot name="results" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+
+@Component
+export default class extends Vue {}
+</script>
+
+<style lang="scss">
+.app-filters-results-layout {
+  display: flex;
+  justify-content: space-between;
+  margin-top: $layout-05;
+
+  @include mq($until: medium) {
+    flex-direction: column;
+  }
+
+  &__filters {
+    color: $gray-100;
+
+    &_on-large-screen {
+      @include mq($until: medium) {
+        display: none;
+      }
+    }
+
+    &_on-small-screen {
+      @include mq($from: medium) {
+        display: none;
+      }
+    }
+  }
+
+  &__results {
+    width: 75%;
+
+    @include mq($until: medium) {
+      width: 100%;
+      margin-top: $layout-04;
+    }
+  }
+}
+</style>

components/ui/AppMultiSelect.vue

@@ -4,7 +4,7 @@
       class="app-multi-select"
       :theme="theme"
       :label="label"
-      :options="options"
+      :options="formatedOptions"
       :value="value"
       :selection-feedback="feedback"
       @change="$emit('change-on-multi-select', $event)"
@@ -16,14 +16,26 @@
 import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
 
+type multiSelectOption = {
+  label: string,
+  value: string,
+  name: string
+}
+
 @Component
 export default class AppMultiSelect extends Vue {
   @Prop(Array) options!: string[]
   @Prop(String) label!: string
   @Prop(Array) value!: string[]
 
+  formatedOptions = this.formatOptions(this.options)
+
   theme: string = 'light'
   feedback: string = 'fixed'
+
+  formatOptions (optionsList: any): Array<multiSelectOption> {
+    return optionsList.map((item: string) => ({ label: item, value: item, name: item }))
+  }
 }
 </script>
 

pages/events/index.vue

@@ -32,13 +32,13 @@
             <client-only>
               <cv-checkbox
                 v-for="option in filter.options"
-                :key="option.label"
+                :key="option"
                 class="event-page__extra-filters__checkboxes"
-                :value="option.value"
-                :label="option.label"
-                :checked="isFilterChecked(filter.filterType, option.value)"
-                :aria-checked="isFilterChecked(filter.filterType, option.value)"
-                @change="updateFilter(filter.filterType, option.value, $event)"
+                :value="option"
+                :label="option"
+                :checked="isFilterChecked(filter.filterType, option)"
+                :aria-checked="isFilterChecked(filter.filterType, option)"
+                @change="updateFilter(filter.filterType, option, $event)"
               />
             </client-only>
           </AppFieldset>
@@ -88,7 +88,6 @@ import {
   CommunityEvent,
   WORLD_REGION_OPTIONS,
   COMMUNITY_EVENT_TYPE_OPTIONS,
-  EventMultiSelectOption
 } from '~/store/modules/events.ts'
 import { EVENT_REQUEST_LINK } from '~/constants/appLinks'
 
@@ -124,8 +123,6 @@ import { EVENT_REQUEST_LINK } from '~/constants/appLinks'
   }
 })
 export default class EventsPage extends QiskitPage {
-  regions = WORLD_REGION_OPTIONS
-  types = COMMUNITY_EVENT_TYPE_OPTIONS
   routeName: string = 'events'
   eventRequestLink = EVENT_REQUEST_LINK
   emptyCard = {
@@ -134,24 +131,16 @@ export default class EventsPage extends QiskitPage {
     img: '/images/events/no-events.svg'
   }
 
-  // multiselect
-  regionsOptions = this.getOptions(this.regions)
-  typesOptions = this.getOptions(this.types)
-  regionsLabel: string = 'Locations'
-  typesLabel: string = 'Types'
-  regionsFilters: string = 'regionFilters'
-  typesFilters: string = 'typeFilters'
-
   extraFilters = [
     {
-      label: this.regionsLabel,
-      options: this.regionsOptions,
-      filterType: this.regionsFilters
+      label: 'Locations',
+      options: WORLD_REGION_OPTIONS,
+      filterType: 'regionFilters'
     },
     {
-      label: this.typesLabel,
-      options: this.typesOptions,
-      filterType: this.typesFilters
+      label: 'Types',
+      options: COMMUNITY_EVENT_TYPE_OPTIONS,
+      filterType: 'typeFilters'
     }
   ]
 
@@ -159,10 +148,6 @@ export default class EventsPage extends QiskitPage {
     return (this as any).filteredEvents.length === 0
   }
 
-  getOptions (optionsList: any): Array<EventMultiSelectOption> {
-    return optionsList.map((item: string) => ({ label: item, value: item, name: item }))
-  }
-
   getCheckedFilters (filter: string) {
     return (this as any)[filter]
   }

store/modules/events.ts

@@ -87,8 +87,7 @@ export {
   COMMUNITY_EVENT_TYPES,
   WORLD_REGIONS,
   WORLD_REGION_OPTIONS,
-  COMMUNITY_EVENT_TYPE_OPTIONS,
-  EventMultiSelectOption
+  COMMUNITY_EVENT_TYPE_OPTIONS
 }
 
 type State = {