#26 filtrowanie przykładów po typie

components/Source.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-show="!filter || filter === source.type">
         <Icon :v="source.icon()"/>
         <strong>{{source.author}}<span v-if="source.author"> – </span><em><a v-if="source.link" :href="source.link" target="_blank" rel="noopener">{{source.title}}</a><span v-else>{{source.title}}</span></em></strong><template v-if="source.extra"> ({{source.extra}})</template>, {{source.year}}<template v-if="source.comment">; {{source.comment}}</template>
         <ul v-if="source.fragments.length">
@@ -16,6 +16,7 @@
     export default {
         props: {
             name: { required: true },
+            filter: { default: '' },
         },
         data() {
             return {

pages/literatura.vue

@@ -34,6 +34,22 @@
             <Share title="Niebinarna polszczyzna w literaturze, prasie, filmach i serialach"/>
         </section>
 
+        <section>
+            <span class="mr-2 mb-3">
+                <Icon v="filter"/>
+                Filtruj:
+            </span>
+            <div class="btn-group">
+                <button v-for="(config, type) in sourceTypes"
+                        :class="['btn', type === filter ? 'btn-primary' : 'btn-outline-primary']"
+                        @click="filter = type"
+                >
+                    <Icon :v="config.icon"/>
+                    {{ config.text }}
+                </button>
+            </div>
+        </section>
+
         <section v-for="template in templates" v-if="template.sources.length">
             <h2 class="h4" :id="toId(template.name())">
                 <nuxt-link :to="'/' + template.pronoun()">
@@ -44,7 +60,7 @@
 
             <ul class="list-unstyled">
                 <li v-for="source in template.sources">
-                    <Source :name="source"/>
+                    <Source :name="source" :filter="filter"/>
                 </li>
             </ul>
         </section>
@@ -59,7 +75,7 @@
 
             <ul class="list-unstyled">
                 <li v-for="source in sources">
-                    <Source :name="source"/>
+                    <Source :name="source" :filter="filter"/>
                 </li>
             </ul>
         </section>
@@ -71,7 +87,7 @@
 
             <ul class="list-unstyled">
                 <li v-for="source in otherSources">
-                    <Source :name="source"/>
+                    <Source :name="source" :filter="filter"/>
                 </li>
             </ul>
         </section>
@@ -80,12 +96,15 @@
 
 <script>
     import { templates, sources, sourcesForMultipleForms } from '../src/data'
+    import { Source } from "../src/classes";
 
     export default {
         data() {
             return {
                 templates: templates,
                 sourcesForMultipleForms: sourcesForMultipleForms,
+                sourceTypes: Source.TYPES,
+                filter: '',
             };
         },
         head() {

src/classes.js

@@ -63,13 +63,6 @@ function clone(mainObject) {
 }
 
 export class Source {
-    ICONS = {
-        Book: 'book-open',
-        Article: 'newspaper',
-        Movie: 'film',
-        Series: 'tv',
-    }
-
     constructor (type, author, title, extra, year, fragments = [], comment = null, link = null) {
         this.type = type;
         this.author = author;
@@ -81,8 +74,18 @@ export class Source {
         this.link = link;
     }
 
+    static get TYPES() {
+        return {
+            '': { icon: 'clipboard-list', text: 'Wszystkie' },
+            Book: { icon: 'book-open', text: 'Książki' },
+            Article: { icon:'newspaper', text: 'Prasa' },
+            // Movie: { icon:'film', text: 'Filmy' },
+            Series: { icon:'tv', text: 'Seriale' },
+        }
+    }
+
     icon() {
-        return this.ICONS[this.type] || 'horizontal-rule';
+        return Source.TYPES[this.type].icon;
     }
 }