From c6f8da2c4429ad5d2f2262305035732ec53ddf07 Mon Sep 17 00:00:00 2001
From: dannc <dannc.sao@gmail.com>
Date: Sat, 23 Feb 2019 12:35:18 +0700
Subject: [PATCH] add article and article part pages, extend article store

---
 src/components/ArticleDetails.vue       | 105 +++++++++++++++++++++++
 src/components/ArticlePartsListItem.vue |  35 ++++++++
 src/components/ArticlesList.vue         |  98 ++-------------------
 src/components/ArticlesListItem.vue     | 109 ++++++++++++++++++++++++
 src/helpers/article.js                  |   3 +
 src/router.js                           |  22 +++--
 src/store/articles.js                   |  86 ++++++++++++++++++-
 src/views/Article.vue                   |  36 ++++++++
 src/views/ArticlePart.vue               |  33 +++++++
 src/views/Articles.vue                  |   4 +-
 10 files changed, 428 insertions(+), 103 deletions(-)
 create mode 100644 src/components/ArticleDetails.vue
 create mode 100644 src/components/ArticlePartsListItem.vue
 create mode 100644 src/components/ArticlesListItem.vue
 create mode 100644 src/helpers/article.js
 create mode 100644 src/views/Article.vue
 create mode 100644 src/views/ArticlePart.vue

diff --git a/src/components/ArticleDetails.vue b/src/components/ArticleDetails.vue
new file mode 100644
index 0000000..31cf476
--- /dev/null
+++ b/src/components/ArticleDetails.vue
@@ -0,0 +1,105 @@
+<template>
+    <v-card color="info" class="white--text">
+        <v-container fluid>
+            <!-- desktop layout -->
+            <v-layout row class="hidden-sm-and-down">
+                <v-flex md3>
+                    <v-img
+                        src="https://images-na.ssl-images-amazon.com/images/I/51U6bQbA8oL._SY346_.jpg"
+                        height="150px"
+                    >
+                    </v-img>
+                    <div class="text-xs-center">
+                        <v-btn flat color="white">
+                            <v-icon left>visibility</v-icon>
+                            Youtube
+                        </v-btn>
+                    </div>
+                </v-flex>
+                <v-flex md9>
+                    <v-card-title>
+                        <div>
+                            <div class="headline">{{ article.title }}</div>
+                            <div>{{ article.description }}</div>
+                            <v-divider class="white"></v-divider>
+                            <div>Уровень: {{ getArticleLevel(article.level) }} {{ article.parts.length }} частей</div>
+                        </div>
+                    </v-card-title>
+                    <v-card-actions>
+                        <v-rating v-model="article.rating" color="yellow" readonly dense half-increments></v-rating>
+                        <div class="ml-1">
+                            <span>{{ article.rating }}</span>
+                            <span>({{ article.ratingsCount }})</span>
+                        </div>
+                        <v-spacer></v-spacer>
+                        <v-btn class="primary" flat>Добавить</v-btn>
+                    </v-card-actions>
+                </v-flex>
+            </v-layout>
+
+            <!-- tablet and mobile layout -->
+            <div class="hidden-md-and-up">
+                <v-layout row>
+                    <v-flex xs4>
+                        <v-img
+                            src="https://images-na.ssl-images-amazon.com/images/I/51U6bQbA8oL._SY346_.jpg"
+                            height="100px"
+                        >
+                        </v-img>
+                    </v-flex>
+                    <v-flex xs8>
+                        <v-card-title>
+                            <h4>{{ article.title }}</h4>
+                            <v-btn flat color="white">
+                                <v-icon left>visibility</v-icon>
+                                Youtube
+                            </v-btn>
+                        </v-card-title>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row>
+                    <v-flex xs12>
+                        <div>{{ article.description }}</div>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row>
+                    <v-flex xs12>
+                        <div>Уровень: {{ getArticleLevel(article.level) }} {{ article.parts.length }} частей</div>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row>
+                    <v-flex xs12>
+                        <v-card-actions>
+                            <v-rating v-model="article.rating" color="yellow" readonly dense half-increments></v-rating>
+                            <div class="ml-1">
+                                <span>{{ article.rating }}</span>
+                                <span>({{ article.ratingsCount }})</span>
+                            </div>
+                            <v-spacer></v-spacer>
+                            <v-btn class="primary" flat>Добавить</v-btn>
+                        </v-card-actions>
+                    </v-flex>
+                </v-layout>
+            </div>
+        </v-container>
+    </v-card> 
+</template>
+
+<script>
+    import getArticleLevel from '@/helpers/article';
+
+    export default {
+        props: {
+            article: {
+                type: Object,
+                required: true,
+            },
+        },
+        methods: {
+            getArticleLevel: getArticleLevel,
+        },
+    };
+</script>
diff --git a/src/components/ArticlePartsListItem.vue b/src/components/ArticlePartsListItem.vue
new file mode 100644
index 0000000..6816ea9
--- /dev/null
+++ b/src/components/ArticlePartsListItem.vue
@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <v-card color="accent" class=white--text>
+            <v-card-title primary-title class="headline">
+                {{ part.title }}
+            </v-card-title>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn flat class="primary" :to="{
+                        name: 'articlePart',
+                        params: { articleId: this.articleId, partId: part.id },
+                    }"
+                >
+                    Открыть
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            part: {
+                type: Object,
+                required: true,
+            },
+            articleId: {
+                type: String,
+                required: true,
+            },
+        },
+    };
+</script>
+
diff --git a/src/components/ArticlesList.vue b/src/components/ArticlesList.vue
index fb2c54d..ca77470 100644
--- a/src/components/ArticlesList.vue
+++ b/src/components/ArticlesList.vue
@@ -15,93 +15,7 @@
                 </v-container>
             </v-flex>
             <v-flex v-for="article in filteredArticles" xs12 sm10 md8 offset-sm1 offset-md2 :key="article.id">
-                <v-card color="info" class="white--text">
-                    <v-container fluid>
-                        <!-- desktop layout -->
-                        <v-layout row class="hidden-sm-and-down">
-                            <v-flex md3>
-                                <v-img
-                                    src="https://images-na.ssl-images-amazon.com/images/I/51U6bQbA8oL._SY346_.jpg"
-                                    height="100px"
-                                >
-                                </v-img>
-                                <div class="text-xs-center">
-                                    <v-btn flat color="white">
-                                        <v-icon left>visibility</v-icon>
-                                        Youtube
-                                    </v-btn>
-                                </div>
-                            </v-flex>
-                            <v-flex md9>
-                                <v-card-title>
-                                    <div>
-                                        <div class="headline">{{ article.title }}</div>
-                                        <div>{{ article.description }}</div>
-                                        <v-divider class="white"></v-divider>
-                                        <div>Уровень: {{ getArticleLevel(article.level) }} {{ article.parts }} частей</div>
-                                    </div>
-                                </v-card-title>
-                                <v-card-actions>
-                                    <v-rating v-model="article.rating" color="yellow" readonly dense half-increments></v-rating>
-                                    <div class="ml-1">
-                                        <span>{{ article.rating }}</span>
-                                        <span>({{ article.ratingsCount }})</span>
-                                    </div>
-                                    <v-spacer></v-spacer>
-                                    <v-btn class="primary" flat>Открыть</v-btn>
-                                </v-card-actions>
-                            </v-flex>
-                        </v-layout>
-
-                        <!-- tablet and mobile layout -->
-                        <div class="hidden-md-and-up">
-                            <v-layout row>
-                                <v-flex xs4>
-                                    <v-img
-                                        src="https://images-na.ssl-images-amazon.com/images/I/51U6bQbA8oL._SY346_.jpg"
-                                        height="100px"
-                                    >
-                                    </v-img>
-                                </v-flex>
-                                <v-flex xs8>
-                                    <v-card-title>
-                                        <h4>{{ article.title }}</h4>
-                                        <v-btn flat color="white">
-                                            <v-icon left>visibility</v-icon>
-                                            Youtube
-                                        </v-btn>
-                                    </v-card-title>
-                                </v-flex>
-                            </v-layout>
-
-                            <v-layout row>
-                                <v-flex xs12>
-                                    <div>{{ article.description }}</div>
-                                </v-flex>
-                            </v-layout>
-
-                            <v-layout row>
-                                <v-flex xs12>
-                                    <div>Уровень: {{ getArticleLevel(article.level) }} {{ article.parts }} частей</div>
-                                </v-flex>
-                            </v-layout>
-
-                            <v-layout row>
-                                <v-flex xs12>
-                                    <v-card-actions>
-                                        <v-rating v-model="article.rating" color="yellow" readonly dense half-increments></v-rating>
-                                        <div class="ml-1">
-                                            <span>{{ article.rating }}</span>
-                                            <span>({{ article.ratingsCount }})</span>
-                                        </div>
-                                        <v-spacer></v-spacer>
-                                        <v-btn class="primary" flat>Открыть</v-btn>
-                                    </v-card-actions>
-                                </v-flex>
-                            </v-layout>
-                        </div>
-                    </v-container>
-                </v-card>
+                <list-item :article="article"></list-item>
             </v-flex>
         </v-layout>
     </v-container>
@@ -109,6 +23,8 @@
 
 
 <script>
+    import ListItem from '@/components/ArticlesListItem';
+
     export default {
         data() {
             return {
@@ -140,10 +56,8 @@
                 return filteredArticles;
             },
         },
-        methods: {
-            getArticleLevel(levels) {
-                return levels.join('/');
-            },
-        },
+        components: {
+            ListItem,
+        }
     };
 </script>
diff --git a/src/components/ArticlesListItem.vue b/src/components/ArticlesListItem.vue
new file mode 100644
index 0000000..2b9a0c2
--- /dev/null
+++ b/src/components/ArticlesListItem.vue
@@ -0,0 +1,109 @@
+<template>
+    <v-card color="info" class="white--text">
+        <v-container fluid>
+            <!-- desktop layout -->
+            <v-layout row class="hidden-sm-and-down">
+                <v-flex md3>
+                    <v-img
+                        src="https://images-na.ssl-images-amazon.com/images/I/51U6bQbA8oL._SY346_.jpg"
+                        height="100px"
+                    >
+                    </v-img>
+                    <div class="text-xs-center">
+                        <v-btn flat color="white">
+                            <v-icon left>visibility</v-icon>
+                            Youtube
+                        </v-btn>
+                    </div>
+                </v-flex>
+                <v-flex md9>
+                    <v-card-title>
+                        <div>
+                            <div class="headline">{{ article.title }}</div>
+                            <div>{{ article.description }}</div>
+                            <v-divider class="white"></v-divider>
+                            <div>Уровень: {{ getArticleLevel(article.level) }} {{ article.parts.length }} частей</div>
+                        </div>
+                    </v-card-title>
+                    <v-card-actions>
+                        <v-rating v-model="article.rating" color="yellow" readonly dense half-increments></v-rating>
+                        <div class="ml-1">
+                            <span>{{ article.rating }}</span>
+                            <span>({{ article.ratingsCount }})</span>
+                        </div>
+                        <v-spacer></v-spacer>
+                        <v-btn class="primary" flat :to="{ name: 'article', params: { articleId: article.id } }">
+                            Открыть
+                        </v-btn>
+                    </v-card-actions>
+                </v-flex>
+            </v-layout>
+
+            <!-- tablet and mobile layout -->
+            <div class="hidden-md-and-up">
+                <v-layout row>
+                    <v-flex xs4>
+                        <v-img
+                            src="https://images-na.ssl-images-amazon.com/images/I/51U6bQbA8oL._SY346_.jpg"
+                            height="100px"
+                        >
+                        </v-img>
+                    </v-flex>
+                    <v-flex xs8>
+                        <v-card-title>
+                            <h4>{{ article.title }}</h4>
+                            <v-btn flat color="white">
+                                <v-icon left>visibility</v-icon>
+                                Youtube
+                            </v-btn>
+                        </v-card-title>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row>
+                    <v-flex xs12>
+                        <div>{{ article.description }}</div>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row>
+                    <v-flex xs12>
+                        <div>Уровень: {{ getArticleLevel(article.level) }} {{ article.parts.length }} частей</div>
+                    </v-flex>
+                </v-layout>
+
+                <v-layout row>
+                    <v-flex xs12>
+                        <v-card-actions>
+                            <v-rating v-model="article.rating" color="yellow" readonly dense half-increments></v-rating>
+                            <div class="ml-1">
+                                <span>{{ article.rating }}</span>
+                                <span>({{ article.ratingsCount }})</span>
+                            </div>
+                            <v-spacer></v-spacer>
+                            <v-btn class="primary" flat :to="{ name: 'article', params: { articleId: article.id } }">
+                                Открыть
+                            </v-btn>
+                        </v-card-actions>
+                    </v-flex>
+                </v-layout>
+            </div>
+        </v-container>
+    </v-card>
+</template>
+
+<script>
+    import getArticleLevel from '@/helpers/article';
+
+    export default {
+        props: {
+            article: {
+                type: Object,
+                required: true,
+            },
+        },
+        methods: {
+            getArticleLevel: getArticleLevel,
+        },
+    };
+</script>
diff --git a/src/helpers/article.js b/src/helpers/article.js
new file mode 100644
index 0000000..82403b7
--- /dev/null
+++ b/src/helpers/article.js
@@ -0,0 +1,3 @@
+const getArticleLevel = levels =>  levels.join('/');
+
+export default getArticleLevel;
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 9341889..3f98737 100644
--- a/src/router.js
+++ b/src/router.js
@@ -24,28 +24,40 @@ export default new Router({
     {
       path: '/articles',
       name: 'articles',
-      component: () => import(/* webpackChunkName: "articles" */ '@/views/Articles.vue'),
+      component: () => import(/* webpackChunkName: "articles/index" */ '@/views/Articles'),
+    },
+    {
+      path: '/articles/:articleId',
+      name: 'article',
+      props: true,
+      component: () => import(/* webpackChunkName: "articles/article" */ '@/views/Article')
+    },
+    {
+      path: '/articles/:articleId/part/:partId',
+      name: 'articlePart',
+      props: true,
+      component: () => import(/* webpackChunkName: "articles/article_part" */ '@/views/ArticlePart')
     },
     {
       path: '/words',
       name: 'words',
-      component: () => import(/* webpackChunkName: "words" */ '@/views/Words.vue'),
+      component: () => import(/* webpackChunkName: "words" */ '@/views/Words'),
     },
     {
       path: '/profile',
       name: 'profile',
-      component: () => import(/* webpackChunkName: "words" */ '@/views/Profile.vue'),
+      component: () => import(/* webpackChunkName: "words" */ '@/views/Profile'),
       beforeEnter: AuthMiddleware,
     },
     {
       path: '/sign_in',
       name: 'signIn',
-      component: () => import(/* webpackChunkName: "sign_in" */ '@/views/SignIn.vue'),
+      component: () => import(/* webpackChunkName: "sign_in" */ '@/views/SignIn'),
     },
     {
       path: '/sign_up',
       name: 'signUp',
-      component: () => import(/* webpackChunkName: "sign_up" */ '@/views/SignUp.vue'),
+      component: () => import(/* webpackChunkName: "sign_up" */ '@/views/SignUp'),
     },
     {
       path: '*',
diff --git a/src/store/articles.js b/src/store/articles.js
index e6c9d86..dbc82ff 100644
--- a/src/store/articles.js
+++ b/src/store/articles.js
@@ -6,33 +6,112 @@ export default {
                 title: 'Harry Potter und Stein der Weisen - 1',
                 description: 'Первая глава первой книги о Гарри Поттере',
                 imageId: 'asfgdfhmfgn131',
-                parts: 7,
                 level: ['B2', 'C1'],
                 rating: 4,
                 ratingsCount: 164,
                 youtubePlaylistId: 'asdadsadad',
+                parts: [
+                    {
+                        id: 'asdasdad123',
+                        title: 'kapitel 1',
+                        youtubeId: 'asdasdad1',
+                    },
+                    {
+                        id: 'asdasdad124',
+                        title: 'kapitel 2',
+                        youtubeId: 'asdasdad2',
+                    },
+                    {
+                        id: 'asdasdad125',
+                        title: 'kapitel 3',
+                        youtubeId: 'asdasdad3',
+                    },
+                    {
+                        id: 'asdasdad126',
+                        title: 'kapitel 4',
+                        youtubeId: 'asdasdad4',
+                    },
+                ],
             },
             {
                 id: 'sgjngsnaadasd2',
                 title: 'Harry Potter und Stein der Weisen - 2',
                 description: 'Вторая глава первой книги о Гарри Поттере',
                 imageId: 'asfgdf111hmfgn131',
-                parts: 7,
                 level: ['B1', 'B2'],
                 rating: 3.5,
                 ratingsCount: 55,
                 youtubePlaylistId: 'asdadsadad234234',
+                parts: [
+                    {
+                        id: 'bsdasdad123',
+                        title: 'kapitel 1',
+                        youtubeId: 'bsdasdad1',
+                    },
+                    {
+                        id: 'bsdasdad124',
+                        title: 'kapitel 2',
+                        youtubeId: 'bsdasdad2',
+                    },
+                    {
+                        id: 'bsdasdad125',
+                        title: 'kapitel 3',
+                        youtubeId: 'bsdasdad3',
+                    },
+                ],
             },
             {
                 id: 'sgjngsdbfd12as',
                 title: 'Harry Potter und Stein der Weisen - 3',
                 description: 'Третья глава первой книги о Гарри Поттере',
                 imageId: 'asfgdfhmfgn13111',
-                parts: 7,
                 level: ['A2'],
                 rating: 2,
                 ratingsCount: 80,
                 youtubePlaylistId: 'asdadsada435346',
+                parts: [
+                    {
+                        id: 'bsdasdad123',
+                        title: 'kapitel 1',
+                        youtubeId: 'bsdasdad1',
+                    },
+                    {
+                        id: 'bsdasdad124',
+                        title: 'kapitel 2',
+                        youtubeId: 'bsdasdad2',
+                    },
+                    {
+                        id: 'bsdasdad125',
+                        title: 'kapitel 3',
+                        youtubeId: 'bsdasdad3',
+                    },
+                ],
+            },
+        ],
+
+        articleParts: [
+            {
+                articleId: 'sgjngsnaada312',
+                articlePartId: 'asdasdad123',
+                articleTitle: 'Harry Potter und Stein der Weisen - 1',
+                partTitle: 'kapitel 1',
+                youtubeId: 'asdasdad1',
+                content: [
+                    {
+                        sentences: [
+                            {
+                                origText: 'Bla',
+                                transText: 'Бла',
+                            },
+                        ]
+                    }
+                ],
+                words: [
+                    {
+                        origWord: 'Hallo',
+                        transWord: 'Привет',
+                    },
+                ],
             },
         ],
     },
@@ -43,5 +122,6 @@ export default {
     },
     getters: {
         getArticles: state => state.articles,
+        getParts: state => state.articleParts,
     },
 };
diff --git a/src/views/Article.vue b/src/views/Article.vue
new file mode 100644
index 0000000..94397a6
--- /dev/null
+++ b/src/views/Article.vue
@@ -0,0 +1,36 @@
+<template>
+    <v-container grid-list-md v-if="article">
+        <v-layout row wrap>
+            <v-flex xs12 xs10 offset-sm1>
+                <article-details :article="article"></article-details>
+            </v-flex>
+            <v-flex xs12 xs10 offset-sm1 v-for="part in article.parts" :key="part.id">
+                <article-parts-list-item :part="part" :articleId="article.id"></article-parts-list-item>
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+
+
+<script>
+    import ArticleDetails from '@/components/ArticleDetails';
+    import ArticlePartsListItem from '@/components/ArticlePartsListItem';
+
+    export default {
+        props: {
+            articleId: {
+                type: String,
+                required: true,
+            },
+        },
+        computed: {
+            article() {
+                return this.$store.getters.getArticles.find(article => article.id == this.articleId);
+            },
+        },
+        components: {
+            ArticleDetails,
+            ArticlePartsListItem,
+        },
+    };
+</script>
diff --git a/src/views/ArticlePart.vue b/src/views/ArticlePart.vue
new file mode 100644
index 0000000..b8b0101
--- /dev/null
+++ b/src/views/ArticlePart.vue
@@ -0,0 +1,33 @@
+<template>
+    <v-container grid-list-md v-if="part">
+        <v-layout row wrap>
+            <v-flex xs12 sm10 offset-sm1>
+                <!-- content -->
+            </v-flex>
+            <v-flex xs12 sm10 offset-sm1>
+                <!-- words -->
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+
+<script>
+    export default {
+        props: {
+            articleId: {
+                type: String,
+                required: true,
+            },
+            partId: {
+                type: String,
+                required: true,
+            },
+        },
+        computed: {
+            part() {
+                return this.$store.getters.getParts.find(part => part.articleId === this.articleId
+                    && part.articlePartId === this.partId);
+            }
+        }
+    };
+</script>
diff --git a/src/views/Articles.vue b/src/views/Articles.vue
index ec05a2c..bf83619 100644
--- a/src/views/Articles.vue
+++ b/src/views/Articles.vue
@@ -1,8 +1,6 @@
 <template>
     <div>
-        <articles-list>
-
-        </articles-list>
+        <articles-list></articles-list>
     </div>
 </template>