Kaleab.demo

starter-project-web-vue2/components/kaleab/KaleabAddArticle.vue

@@ -0,0 +1,68 @@
+<template>
+     <v-row>
+      <v-dialog
+      v-model="dialog"
+      persistent
+      max-width="70%"
+    >
+       <v-card
+        class="mx-auto mb-5"
+        max-width="100%" 
+        elevation="5" >
+    <v-card-text>
+    <v-form class="px-3">
+        <v-text-field v-model="Title" label="Title" />
+        <v-textarea v-model="Content" label="Content" />
+        <v-textarea v-model="Description" label="Description" />
+        <v-spacer></v-spacer>
+        <v-row justify="space-between">
+          <v-btn class="success mx-0 mt-4 mr-4" color="blue" @click="onSubmit">Save</v-btn>
+        <v-btn class="success mx-0 mt-4 mr-4" color="blue" @click="dialog = false">Cancel</v-btn>
+        </v-row>
+    </v-form>
+    </v-card-text>
+    <v-spacer></v-spacer>
+  </v-card>
+     </v-dialog>
+     <v-btn
+          color="blue"
+          @click="dialog = true">
+          Add Article
+        </v-btn>
+     </v-row>
+</template>
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+    name: "AddArticle",
+    data(){
+        return {
+            Title: '',
+            Content: '',
+            Description: '',
+            newArticle: {},
+            dialog: false
+        }
+    },
+    methods: {
+      ...mapActions('kaleab', ['addArticles']),
+      onSubmit(e){
+        e.preventDefault()
+        this.newArticle = {
+          title: this.Title,
+          content: this.Content,
+          description: this.Description
+        }
+        this.addArticles(this.newArticle)
+        this.Content = ''
+        this.Title = ''
+        this.Description = ''
+        this.dialog = false
+
+      },
+    }
+}
+
+
+</script>

starter-project-web-vue2/components/kaleab/KaleabArticles.vue

@@ -0,0 +1,152 @@
+<template>
+<v-container>
+  <v-row class='mb-5' align="center">
+    <v-row >
+      <v-hover v-if="$auth.loggedIn">
+      <AddArticle/>
+    </v-hover>
+    <div v-if="$auth.loggedIn">
+    <v-btn color='blue' @click="$auth.logOut">
+      Log Out
+    </v-btn>
+    </div>
+    <v-row v-if="!$auth.loggedIn" class="mb-5">
+      <v-btn class='mr-2' to="/abraham/login">Log In</v-btn> 
+      <v-btn class='ml-2' to="/abraham/Sign Up">Sign Up</v-btn>
+    </v-row>
+
+    </v-row>
+
+  </v-row>
+  <v-dialog 
+  v-model='dialog' 
+  class="mt-5"
+  persistent 
+  max-width="60%">
+      <v-card
+        class="mx-auto mb-5"
+        max-width="100%" 
+        elevation="5" >
+        <v-form class="px-3">
+        <v-text-field v-model="Title" label="Title" />
+        <v-textarea v-model="Content" label="Content" />
+        <v-textarea v-model="Description" label="Description" />
+        <v-spacer></v-spacer>
+        <v-row justify="space-between">
+          <v-btn class="success mx-0 mb-4 mr-4 ml-4" color="blue" @click="update()">Save</v-btn>
+        <v-btn class="success mx-0 mb-4 mr-4 " color="blue" @click="dialog = false">Cancel</v-btn>
+        </v-row>
+    </v-form>
+      </v-card>
+
+  </v-dialog>
+
+  <v-card
+    v-for="article in allArticles"
+    :key="article.id"
+    class="mx-auto mb-5 mt-5"
+    max-width="80%" 
+    elevation="5" 
+  >
+    <v-img
+      :src="article.imageUrls[0]"
+      height="200px"
+    ></v-img>
+
+    <v-card-title>
+    <nuxt-link
+    style="text-decoration: none; color: inherit"
+    :to="'/kaleab/' + article._id"
+  >
+    <p>
+      {{ article.title }}
+    </p>
+  </nuxt-link>
+    </v-card-title>
+
+    <v-card-subtitle>
+      {{article.content}}
+    </v-card-subtitle>
+    <v-spacer></v-spacer>
+    <v-card-action v-if="$auth.loggedIn">
+     <v-row>
+      <v-btn 
+      class="ml-5"
+      depressed
+      @click="edit(article)"
+      >
+      <v-icon >
+        mdi-pencil
+      </v-icon>
+    </v-btn>
+    <v-spacer></v-spacer>
+       <v-btn 
+       class="mr-5"
+      depressed
+      @click="deleteArticles(article._id)"
+
+    >
+      <v-icon >
+        mdi-delete
+      </v-icon>
+    </v-btn>
+     </v-row>
+    </v-card-action>
+
+
+  </v-card>
+
+</v-container>
+
+</template>
+
+<script>
+import {mapGetters, mapActions} from 'vuex'
+import AddArticle from './KaleabAddArticle.vue'
+
+export default {
+    name: "Articles",
+    components: {
+      AddArticle
+    },
+    data(){
+      return {
+        Title: '',
+        Content: '',
+        Description: '',
+        dialog: false,
+        updateId: '',        show:false,
+
+      }
+    },
+    computed: mapGetters("kaleab",["allArticles"]),
+      created(){
+        this.fetchArticles();
+    },
+    methods: {
+        ...mapActions("kaleab",["fetchArticles", "deleteArticles","updateArticles"]),
+        edit(editArticle){
+          this.dialog = !this.dialog
+          this.updateId = editArticle._id
+          this.Title = editArticle.title
+          this.Content = editArticle.content
+          this.Description = editArticle.description
+
+        },
+        update(){
+          this.dialog = !this.dialog
+          this.updateArticles(
+            {
+            _id: this.updateId,
+            title: this.Title,
+            content: this.Content,
+            description: this.Description
+          }
+          )
+        },
+
+    },
+
+
+}
+</script>

starter-project-web-vue2/layouts/default.vue

@@ -40,6 +40,7 @@
       <v-btn icon @click.stop="rightDrawer = !rightDrawer">
         <v-icon>mdi-menu</v-icon>
       </v-btn>
+    </v-app-bar>
     <v-app-bar :clipped-left="clipped" color="blue" dark fixed app>
       <v-btn text to="/">
         <v-toolbar-title v-text="title" />

starter-project-web-vue2/pages/index.vue

@@ -81,6 +81,11 @@ export default {
           name: 'Bisrat Walle',
           description: 'Software Engineer',
           link: '/bisrat',
+        },
+        {
+          name: 'Kaleab Kindu',
+          description: 'Software Engineer',
+          link: '/kaleab',
         }
       ],
     }

starter-project-web-vue2/pages/kaleab/_id.vue

@@ -0,0 +1,69 @@
+<template>
+  <v-card
+    class="mx-auto mb-5"
+    max-width="80%" 
+    elevation="5" 
+  >
+  <nuxt-link 
+    style="text-decoration: none"
+    :to="'/kaleab/'">
+      <v-btn dark class="success pa-2 mb-2 mx-7 mt-3" color="blue"
+        >Back</v-btn
+      ></nuxt-link
+    >
+    <v-img
+      :src="imageUrl"
+      height="100%"
+    ></v-img>
+
+    <v-card-title>
+    <p>
+      {{title}}
+    </p>
+    </v-card-title>
+
+    <v-card-subtitle>
+      {{content}}
+    </v-card-subtitle>
+
+    <v-card-text>
+        {{description}}
+    </v-card-text>
+    <v-spacer></v-spacer>
+  </v-card>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      content: '',
+      title: '',
+      description: '',
+      imageUrl: ''
+    }
+  },
+  async created() {
+    const config = {
+      headers: {
+        Accept: 'application/json',
+      },
+    }
+    try {
+      const response = await axios.get(
+        `https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`,
+        config
+      )
+
+      this.content = response.data.content
+      this.title = response.data.title
+      this.description = response.data.description
+      this.imageUrl = response.data.imageUrls[0]
+    } catch (err) {
+      console.log(err)
+    }
+  },
+}
+</script>

starter-project-web-vue2/pages/kaleab/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-app>
+    <Articles />
+  </v-app>
+</template>
+
+<script>
+import Articles from '../../components/kaleab/KaleabArticles.vue'
+
+
+export default {
+  name: 'MyPage',
+  components: {
+    Articles,
+},
+}
+</script>

starter-project-web-vue2/store/kaleab.js

@@ -0,0 +1,51 @@
+
+export const state =  {
+    articles: []
+};                                                                                                                          
+
+
+export const getters = {
+    allArticles: (state) => state.articles
+};
+
+export const actions = {
+    async fetchArticles({ commit }){
+        const response = await this.$axios.get("articles/all")
+        commit("setArticles", response.data)
+    },
+    async addArticles({ commit }, article){
+        const response = await this.$axios.post("articles", article)
+        commit("newArticles", response.data)
+    },
+
+    async deleteArticles({ commit }, id){
+        await this.$axios.delete(`articles/${id}`)
+        commit("removeArticles", id)
+    },
+    async updateArticles({ commit }, newArticle){
+
+        const response = await this.$axios.patch(`articles/${newArticle._id}`, newArticle)
+        commit("modifyArticles", response.data)
+    }
+};
+
+export const mutations = {
+    setArticles: (state, articles) => (state.articles = articles),
+    newArticles: (state, article) => (state.articles.unshift(article)),
+    removeArticles: (state, id) => (state.articles = state.articles.filter((article) => article._id !== id)),
+    modifyArticles: (state, updateArticle) => {
+        const index = state.articles.findIndex((article) => article._id === updateArticle._id)
+        if (index !== -1){
+            state.articles.splice(index, 1, updateArticle)
+        }
+    }
+};
+
+export default {
+    state,
+    getters,
+    actions,
+    mutations
+}
+
+