Merge pull request #29 from StadGent/feature/SGD8-2301

SGD8-2301: Add randomize results option
StadGent · Oct 19, 2022 · 6ae4715 · 6ae4715
2 parents 02e52a5 + 04cc9c3
commit 6ae4715
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -65,6 +65,11 @@ Determines if the teasers are rendered in a grid or as a stacked column.
 
 * type: String
 
+### random
+
+* type: Boolean
+* default: false
+
 ### theme
 
 type: String

diff --git a/src/components/OdpMasterDetail.vue b/src/components/OdpMasterDetail.vue
@@ -38,13 +38,22 @@
 
         <odp-map v-if="hasMap" v-show="showMap" :show="showMap" class="odp-map" :items="allItems"></odp-map>
 
-        <ul v-if="items.length" v-show="!showMap" :style="horizontal ? 'margin-left: 0' : null"
+        <ul v-if="items.length && !random" v-show="!showMap" :style="horizontal ? 'margin-left: 0' : null"
+            class="is-ordered"
             :class="horizontal ? null : 'grid-3'" tabindex="-1" ref="grid">
           <teaser v-for="(i, index) in items" @selected="setTrigger($event)" :teaser="i"
                   :horizontal="horizontal"
                   :key="'teaser'+index" :images="images"></teaser>
         </ul>
 
+        <ul v-if="items.length && random " v-show="!showMap" :style="horizontal ? 'margin-left: 0' : null"
+            class="is-random"
+            :class="horizontal ? null : 'grid-3'" tabindex="-1" ref="grid">
+          <teaser v-for="(i, index) in randomList(items)" @selected="setTrigger($event)" :teaser="i"
+                  :horizontal="horizontal"
+                  :key="'teaser'+index" :images="images"></teaser>
+        </ul>
+
         <div v-if="hasMap" class="map-toggle--bottom">
           <button v-show="!showMap" class="button button-primary button-small icon-marker" @click="showMap = true"
                   style="margin-left: auto">Toon op kaart
@@ -109,6 +118,10 @@ export default Vue.extend({
       type: String,
       required: false
     },
+    random: {
+      type: Boolean,
+      default: false
+    },
     theme: {
       type: String,
       default: 'cs--cyan'
@@ -142,6 +155,10 @@ export default Vue.extend({
     }
   },
   methods: {
+    // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+    randomList: function (rand: any) {
+      return rand.sort(function () { return 0.5 - Math.random() })
+    },
     splitOptions: function (options: [Option | string]): Option[] {
       return options.map((o: Option | string) => typeof o === 'string' ? { name: o, value: o } : o)
     },