Merge branch 'aman.added_store' into amanabiy_practice

RealEskalate · Aug 4, 2022 · 825084a · 825084a
2 parents 5e8eef7 + ecbf40b
commit 825084a
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 67 deletions.
diff --git a/starter-project-web-vue2/components/amanabiy/AmanBlog.vue b/starter-project-web-vue2/components/amanabiy/AmanBlog.vue
@@ -16,7 +16,7 @@
             <v-list-item-content>
                 <nuxt-link
                   style="text-decoration: none; color: inherit"
-                  :to="'/amanabiy/' + blog.id"
+                  :to="`/amanabiy/${blog.id}`"
                 >
                     <v-list-item-title>{{ blog.title }}</v-list-item-title>
                     <v-list-item-subtitle> <span class="font-weight-bold"> By {{blog.author}}: </span> {{ blog.desc }}</v-list-item-subtitle>
@@ -29,7 +29,7 @@
               </v-btn>
             </v-list-item-action>
 
-            <v-list-item-action :key="blog.id">
+            <v-list-item-action :key="blog.id" @click="deleteBlog(blog.id)">
               <v-btn icon>
                 <v-icon color="red">mdi-delete</v-icon>
               </v-btn>
@@ -43,42 +43,20 @@
 </template>
 
 <script>
+  import { mapState, mapActions } from 'vuex'
   export default {
     name: 'BlogsList',
-
     data: () => {
       return {
-    
-        blogs: [
-          {
-            id: 1,
-            title: "Why you should Wake up",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Amanuel Sisay",
-          },
-          {
-            id: 2,
-            title: "Why you should Gym",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-
-            author: "Abel",
-          },
-          {
-            id: 3,
-            title: "The benifit of Working hard",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Abebe",
-
-          },
-          {
-            id: 4,
-            title: "Interviews Trick",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Kebede",
-
-          },
-        ]
+        current: {},
       }
     },
+    computed: { ...mapState('amanabiy', ['blogs']) },
+    created () {
+      this.getBlogs()
+    },
+    methods: {
+      ...mapActions('amanabiy', ['getBlogs', 'deleteBlog']),
+    }
   }
 </script>
diff --git a/starter-project-web-vue2/pages/amanabiy/_id.vue b/starter-project-web-vue2/pages/amanabiy/_id.vue
@@ -9,68 +9,44 @@
     <v-card class="mx-6 my-6">
       <v-card-title>
         <span class="text-h6 font-weight-bold"
-          >{{ curr_blog.title }} <small>{{ curr_blog.id }}</small></span
+          >{{ blogDetails.title }}</span
         >
       </v-card-title>
 
       <v-card-text class="subtitle-2">
-        {{ curr_blog.desc }}
+        {{ blogDetails.desc }}
       </v-card-text>
 
       <v-list-item class="font-weight-light">
-          <v-list-item-title class="-2 font-weight-light">By {{ curr_blog.author }}</v-list-item-title>
+          <v-list-item-title class="-2 font-weight-light">By {{ blogDetails.author }}</v-list-item-title>
       </v-list-item>
     </v-card>
   </v-app>
 </template>
 
 
 <script>
+  import { mapState, mapActions } from 'vuex'
   export default {
     name: 'BlogCurr',
 
     data: () => {
       return {
-        curr_blog: {
+        blogDetails: {
             id: "1",
             title: "Why you should Wake up",
             desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
             author: "Amanuel Sisay",
         },
-        blogs: [
-          {
-            id: "1",
-            title: "Why you should Wake up",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Amanuel Sisay",
-          },
-          {
-            id: "2",
-            title: "Why you should Gym",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-
-            author: "Abel",
-          },
-          {
-            id: "3",
-            title: "The benifit of Working hard",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Abebe",
-
-          },
-          {
-            id: "4",
-            title: "Interviews Trick",
-            desc: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam.",
-            author: "Kebede",
-
-          },
-        ]
       }
     },
+    computed: { ...mapState('amanabiy', ['blogs'])},
     created () {
-        this.curr_blog = this.blogs.filter((blog) => blog.id === this.$route.params.id)[0]
+        this.getBlogs()
+        this.blogDetails = this.blogs.filter((blog) => blog.id === this.$route.params.id)[0]
     },
+    methods: { ...mapActions('amanabiy', ['getBlogs'])},
+    
   }
 </script>
 
diff --git a/starter-project-web-vue2/store/amanabiy.js b/starter-project-web-vue2/store/amanabiy.js
@@ -0,0 +1,70 @@
+const desc = "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum necessitatibus officia labore illo accusamus temporibus commodi eveniet praesentium ullam exercitationem vel nulla, deleniti modi obcaecati laudantium natus soluta laborum quisquam."
+
+export const state = {
+        blogs: [
+        {
+            id: "1",
+            title: "Why you should Wake up early",
+            author: "Amanuel Sisay",
+            desc,
+        },
+        {
+            id: "2",
+            title: "Why you should Gym and go to gym",
+            desc,
+            author: "Abel",
+        },
+        {
+            id: "3",
+            title: "The benifit of Working hard",
+            desc,
+            author: "Abebe",
+        },
+        {
+            id: "4",
+            title: "Interviews Trick",
+            desc,
+            author: "Kebede",
+        },
+    ],
+}
+
+export const actions = {
+    getBlogs({ commit }) {
+        commit('getBlogs', state.blogs)
+    },
+
+    deleteBlog({ commit }, id) {
+        commit('deleteBlog', id)
+    },
+
+    addBlog({ commit }, addedBlog) {
+        commit('addBlogs', addedBlog)
+    },
+
+    updateBlog({ commit }, updatedBlog) {
+        commit('updateBlog', updatedBlog)
+    }
+
+}
+
+export const getters = {
+    // sorted options
+
+    // filtered options
+
+    // filtered + sorterd options
+}
+
+export const mutations = {
+    getBlogs: (state, blogs) => (state.blogs = blogs),
+    deleteBlog: (state, id) => {
+        (state.blogs = state.blogs.filter((blog) => blog.id !== id))},
+    editBlog: (state, newBlog) => {
+        const blogToEdit = state.blogs.filter((blog) => blog.id === newBlog.id)[0]
+        blogToEdit.title = newBlog.title
+        blogToEdit.desc = newBlog.desc
+        blogToEdit.author = newBlog.author
+    },
+    addBlog: (state, newBlog) => { state.blogs.unshift(newBlog)}
+}