From 4e00eaf17d9753efdca7a21370d15e33be0510ec Mon Sep 17 00:00:00 2001
From: dannc <dannc.sao@gmail.com>
Date: Sat, 23 Feb 2019 13:52:57 +0700
Subject: [PATCH] Components refactoring: drop second layout for article. Move
 components info subfolders. Combine detail components for list and for page.
 Improve helpers, add declOfNum function.

---
 src/components/Article/Details.vue            |  85 ++++++++++++++
 .../Part/ListItem.vue}                        |   0
 src/components/Article/YoutubeButton.vue      |  11 ++
 src/components/ArticleDetails.vue             | 105 -----------------
 src/components/ArticlesList.vue               |   2 +-
 src/components/ArticlesListItem.vue           | 109 ------------------
 src/helpers/article.js                        |   4 +-
 src/helpers/index.js                          |   2 +
 src/helpers/utils.js                          |   4 +
 src/views/Article.vue                         |   6 +-
 10 files changed, 107 insertions(+), 221 deletions(-)
 create mode 100644 src/components/Article/Details.vue
 rename src/components/{ArticlePartsListItem.vue => Article/Part/ListItem.vue} (100%)
 create mode 100644 src/components/Article/YoutubeButton.vue
 delete mode 100644 src/components/ArticleDetails.vue
 delete mode 100644 src/components/ArticlesListItem.vue
 create mode 100644 src/helpers/index.js
 create mode 100644 src/helpers/utils.js

diff --git a/src/components/Article/Details.vue b/src/components/Article/Details.vue
new file mode 100644
index 0000000..1789d2b
--- /dev/null
+++ b/src/components/Article/Details.vue
@@ -0,0 +1,85 @@
+<template>
+    <v-card color="info" class="white--text">
+        <v-container fluid>
+            <v-layout row>
+                <v-flex xs4 md3>
+                    <v-img
+                        src="https://images-na.ssl-images-amazon.com/images/I/51U6bQbA8oL._SY346_.jpg"
+                        v-bind:height="expandDetails ? '150px' : '100px'"
+                    >
+                    </v-img>
+                    <youtube-button class="hidden-sm-and-down"></youtube-button>
+                </v-flex>
+                <v-flex xs8 md9>
+                    <v-card-title>
+                        <div :class="{
+                                'subheading': $vuetify.breakpoint.smAndDown,
+                                'headline': $vuetify.breakpoint.mdAndUp,
+                            }"
+                        >
+                            {{ article.title }}
+                        </div>
+                        <youtube-button class="hidden-md-and-up"></youtube-button>
+                    </v-card-title>
+                </v-flex>
+            </v-layout>
+
+            <v-layout row wrap>
+                <v-flex xs12 md8 order-md2>
+                    <div>{{ article.description }}</div>
+                </v-flex>
+                <v-flex xs12 md4 order-md1>
+                    <div>Уровень: {{ getArticleLevel(article.level) }} {{ partsDescription }}</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 v-if="!expandDetails" class="primary" flat :to="{ name: 'article', params: { articleId: article.id } }">
+                            Открыть
+                        </v-btn>
+                        <v-btn v-if="expandDetails" class="primary" flat>Добавить</v-btn>
+                    </v-card-actions>
+                </v-flex>
+            </v-layout>
+        </v-container>
+    </v-card>
+</template>
+
+<script>
+    import YoutubeButton from '@/components/Article/YoutubeButton';
+    import { getArticleLevel, declOfNum } from '@/helpers';
+
+    export default {
+        props: {
+            article: {
+                type: Object,
+                required: true,
+            },
+            expandDetails: {
+                type: Boolean,
+                default: false,
+            },
+        },
+        computed: {
+            partsDescription() {
+                const partsCount = this.article.parts.length;
+                const partsCountWord = declOfNum(partsCount, ['часть', 'части', 'частей']);
+                return `${partsCount} ${partsCountWord}`;
+            },
+        },
+        methods: {
+            getArticleLevel: getArticleLevel,
+        },
+        components: {
+            YoutubeButton,
+        },
+    };
+</script>
diff --git a/src/components/ArticlePartsListItem.vue b/src/components/Article/Part/ListItem.vue
similarity index 100%
rename from src/components/ArticlePartsListItem.vue
rename to src/components/Article/Part/ListItem.vue
diff --git a/src/components/Article/YoutubeButton.vue b/src/components/Article/YoutubeButton.vue
new file mode 100644
index 0000000..e807d0e
--- /dev/null
+++ b/src/components/Article/YoutubeButton.vue
@@ -0,0 +1,11 @@
+<template>
+    <v-btn flat color="white">
+        <v-icon left>visibility</v-icon>
+        Youtube
+    </v-btn>
+</template>
+
+<script>
+    export default {
+    };
+</script>
diff --git a/src/components/ArticleDetails.vue b/src/components/ArticleDetails.vue
deleted file mode 100644
index 31cf476..0000000
--- a/src/components/ArticleDetails.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<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/ArticlesList.vue b/src/components/ArticlesList.vue
index ca77470..d868ca9 100644
--- a/src/components/ArticlesList.vue
+++ b/src/components/ArticlesList.vue
@@ -23,7 +23,7 @@
 
 
 <script>
-    import ListItem from '@/components/ArticlesListItem';
+    import ListItem from '@/components/Article/Details';
 
     export default {
         data() {
diff --git a/src/components/ArticlesListItem.vue b/src/components/ArticlesListItem.vue
deleted file mode 100644
index 2b9a0c2..0000000
--- a/src/components/ArticlesListItem.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<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
index 82403b7..0b13140 100644
--- a/src/helpers/article.js
+++ b/src/helpers/article.js
@@ -1,3 +1 @@
-const getArticleLevel = levels =>  levels.join('/');
-
-export default getArticleLevel;
\ No newline at end of file
+export const getArticleLevel = levels =>  levels.join('/');
diff --git a/src/helpers/index.js b/src/helpers/index.js
new file mode 100644
index 0000000..cc98907
--- /dev/null
+++ b/src/helpers/index.js
@@ -0,0 +1,2 @@
+export * from '@/helpers/article';
+export * from '@/helpers/utils';
\ No newline at end of file
diff --git a/src/helpers/utils.js b/src/helpers/utils.js
new file mode 100644
index 0000000..ee55eb0
--- /dev/null
+++ b/src/helpers/utils.js
@@ -0,0 +1,4 @@
+export const declOfNum = (number, titles) => {
+    const cases = [2, 0, 1, 1, 1, 2];
+    return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
+};
diff --git a/src/views/Article.vue b/src/views/Article.vue
index 94397a6..b7a3e57 100644
--- a/src/views/Article.vue
+++ b/src/views/Article.vue
@@ -2,7 +2,7 @@
     <v-container grid-list-md v-if="article">
         <v-layout row wrap>
             <v-flex xs12 xs10 offset-sm1>
-                <article-details :article="article"></article-details>
+                <article-details :article="article" :expandDetails="true"></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>
@@ -13,8 +13,8 @@
 
 
 <script>
-    import ArticleDetails from '@/components/ArticleDetails';
-    import ArticlePartsListItem from '@/components/ArticlePartsListItem';
+    import ArticleDetails from '@/components/Article/Details';
+    import ArticlePartsListItem from '@/components/Article/Part/ListItem';
 
     export default {
         props: {