Add profile articles section. Some fixes

src/components/ArticlesList.vue

@@ -1,24 +1,23 @@
 
 <template>
-    <v-container grid-list-md>
-        <v-layout row wrap>
-            <v-flex xs12 sm10 md8 offset-sm1 offset-md2>
-                <v-container fluid>
-                    <v-layout row>
-                        <v-flex md8>
-                            <v-text-field label="Поиск" v-model="searchTerm"></v-text-field>
-                        </v-flex>
-                        <v-flex md4>
-                            <v-select label="Уровень" :items="levels" v-model="levelTerm" multiple></v-select>
-                        </v-flex>
-                    </v-layout>
-                </v-container>
-            </v-flex>
-            <v-flex v-for="article in filteredArticles" xs12 sm10 md8 offset-sm1 offset-md2 :key="article.id">
-                <list-item :article="article"></list-item>
-            </v-flex>
-        </v-layout>
-    </v-container>
+    <section>
+        <div>
+            <v-container fluid>
+                <v-layout row>
+                    <v-flex md8>
+                        <v-text-field label="Поиск" v-model="searchTerm"></v-text-field>
+                    </v-flex>
+                    <v-flex md4>
+                        <v-select label="Уровень" :items="levels" v-model="levelTerm" multiple></v-select>
+                    </v-flex>
+                </v-layout>
+            </v-container>
+        </div>
+
+        <div class="mb-3" v-for="article in filteredArticles" :key="article.id">
+            <list-item :article="article"></list-item>
+        </div>
+    </section>
 </template>
 
 
@@ -26,6 +25,12 @@
 import ListItem from '@/components/Article/Details';
 
 export default {
+    props: {
+        userOnly: {
+            type: Boolean,
+            default: false,
+        },
+    },
     data: () => ({
         levels: ['A1', 'A2', 'B1', 'B2', 'C1', 'C2'],
         searchTerm: null,
@@ -39,6 +44,12 @@ export default {
             const { articles, searchTerm, levelTerm } = this;
             let filteredArticles = articles;
 
+            if (this.userOnly) {
+                filteredArticles = filteredArticles.filter(
+                    article => this.$store.getters.userData.articles[article.id]
+                );
+            }
+
             if (searchTerm) {
                 filteredArticles = filteredArticles.filter(article =>
                     article.title.toLowerCase().indexOf(searchTerm.toLowerCase()) >= 0

src/components/User/ProfileWords.vue

@@ -71,7 +71,7 @@ export default {
         ...mapGetters(['userData']),
         userWords() {
             return this.userData.words;
-        }
+        },
     },
     methods: {
         setWords() {

src/filters/formattedDate.js

@@ -7,11 +7,11 @@ export const buildDate = (value) => {
     }
 
     return value.toDate();
-}
+};
 
 const formattedDate = (value) => {
     const date = buildDate(value);
     return date ? date.toLocaleDateString() : null;
 };
 
-export default formattedDate;
+export default formattedDate;

src/views/Articles.vue

@@ -1,7 +1,11 @@
 <template>
-    <div>
-        <articles-list></articles-list>
-    </div>
+    <v-container grid-list-md>
+        <v-layout row wrap>
+            <v-flex xs12 sm10 offset-sm1>
+                <articles-list></articles-list>
+            </v-flex>
+        </v-layout>
+    </v-container>
 </template>
 
 

src/views/Profile.vue

@@ -17,6 +17,7 @@
                         <user-profile-data></user-profile-data>
                     </v-tab-item>
                     <v-tab-item :key="'myArticles'">
+                        <articles-list :userOnly="true"></articles-list>
                     </v-tab-item>
                     <v-tab-item :key="'myWords'">
                         <user-profile-words></user-profile-words>
@@ -29,6 +30,7 @@
 
 
 <script>
+import ArticlesList from '@/components/ArticlesList';
 import UserProfileData from '@/components/User/ProfileData';
 import UserProfileWords from '@/components/User/ProfileWords';
 
@@ -42,6 +44,7 @@ export default {
     components: {
         UserProfileData,
         UserProfileWords,
+        ArticlesList,
     },
 };
 </script>