#24 podziel przykłady dla form wymiennych: osobno wymienne, osobno składniki

components/Literature.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="sources.length">
+    <div v-if="Object.keys(sources).length">
         <h2 class="h4">
             <Icon v="books"/>
             Przykłady z literatury, prasy, filmów i seriali:
@@ -7,18 +7,42 @@
 
         <LiteratureMenu/>
 
-        <ul class="list-unstyled">
-            <li v-for="source in sources" class="my-2">
-                <Source :name="source"/>
-            </li>
-        </ul>
+        <section v-for="(optionSources, option) in sources">
+            <h3 class="h5">
+                <nuxt-link :to="'/' + option">
+                    <span v-if="option.includes('&')">
+                        Formy wymienne
+                        <small>({{ option.replace(/&/g, ' lub ') }})</small>
+                    </span>
+                    <span v-else>
+                        {{ getTemplate(templates, option).description }}
+                        <small>({{ getTemplate(templates, option).name() }})</small>
+                    </span>
+                </nuxt-link>
+            </h3>
+
+            <ul class="list-unstyled">
+                <li v-for="source in optionSources" class="my-2">
+                    <Source :name="source"/>
+                </li>
+            </ul>
+        </section>
     </div>
 </template>
 
 <script>
+    import { templates } from "../src/data";
+    import { getTemplate } from "../src/buildTemplate";
+
     export default {
         props: {
             sources: { required: true },
+        },
+        data() {
+            return {
+                templates: templates,
+                getTemplate: getTemplate,
+            }
         }
     }
 </script>

pages/_.vue

@@ -50,7 +50,7 @@
             <Share :title="'Moje zaimki to: ' + selectedTemplate.name()"/>
         </section>
 
-        <section v-if="sources.length">
+        <section v-if="Object.keys(sources).length">
             <Literature :sources="sources"/>
         </section>
 

pages/index.vue

@@ -133,7 +133,7 @@
                 <div class="card-footer" v-if="link">
                     <LinkInput :link="link"/>
                 </div>
-                <div class="card-body border-top" v-if="sources.length">
+                <div class="card-body border-top" v-if="Object.keys(sources).length">
                     <Literature :sources="sources"/>
                 </div>
             </div>

src/data.js

@@ -41,21 +41,21 @@ export const sourcesForMultipleForms = {
 
 export const getSources = (selectedTemplate) => {
     if (!selectedTemplate) {
-        return [];
+        return {};
     }
 
-    let sources = [];
+    let sources = {};
     for (let multiple in sourcesForMultipleForms) {
         if (sourcesForMultipleForms.hasOwnProperty(multiple)) {
             if (multiple === selectedTemplate.morphemes.pronoun_n) {
-                sources = [...sources, ...sourcesForMultipleForms[multiple]]
+                sources[multiple] = sourcesForMultipleForms[multiple];
             }
         }
     }
     for (let option of selectedTemplate.nameOptions()) {
         const template = getTemplate(templates, option);
         if (template && template.sources.length) {
-            sources = [...sources, ...template.sources];
+            sources[option] = template.sources;
         }
     }
     return sources;