created basic UI

starter-project-web-vue2/components/hana/EditBlog.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-row>
+    <v-dialog v-model="dialog" persistent max-width="600px">
+      <template #activator="{ on, attrs }">
+
+        <v-btn
+          tile
+          color="success"
+          :disabled="!isAuthor"
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon center pa-4>mdi-pencil</v-icon>Edit
+        </v-btn>
+      </template>
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Edit Blog</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="title"
+                  label="Title*"
+                  required
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="content"
+                  label="Content*"
+                  required
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="blue darken-1" text @click="dialog = false">
+            Cancel
+          </v-btn>
+          <v-btn color="blue darken-1" text @click="dialog = false">
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script>
+export default {
+  props: {
+    blogger: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({
+    dialog: false,
+    title: '',
+    content: '',
+  }),
+  mounted() {
+    this.title = this.blogger.title
+    this.content = this.blogger.content
+  },
+}
+</script>

starter-project-web-vue2/components/hana/HanaAddBlog.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-row justify="left pa-9">
+    <v-dialog v-model="dialog" persistent max-width="600px">
+      <template #activator="{ on, attrs }">
+        <v-btn color="red" dark v-bind="attrs" v-on="on"> Add Blog </v-btn>
+      </template>
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">Add New Blog</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="Title"
+                  label="Title*"
+                  required
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="Content"
+                  label="Blog post*"
+                  required
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-container>
+          <small>*indicates required field</small>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="red" text @click="dialog = false"> Close </v-btn>
+          <v-btn color="green darken-1" text @click="onSubmit"> Save </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+export default {
+  name: 'HanaAddBlog',
+  data: () => ({
+    dialog: false,
+    Title: '',
+    Content: '',
+  }),
+
+  methods: {
+    ...mapActions('hana', ['addBlog']),
+    onSubmit(e) {
+      e.preventDefault()
+      this.blogPost = {
+        title: this.Title,
+        content: this.Content,
+        description: 'description',
+      }
+      this.addBlog(this.blogPost)
+      this.dialog = false
+    },
+  },
+}
+</script>

starter-project-web-vue2/components/hana/HanaBlogPost.vue

@@ -0,0 +1,57 @@
+<template>
+  <v-card class="my-8 mx-12" max-width="644" outlined>
+    <v-list-item three-line>
+      <v-list-item-content>
+        <nuxt-link
+          style="text-decoration: none; color: inherit"
+          :to="`/hana/${blog._id} `"
+        >
+          <v-list-item-title class="text-h5 mb-1">
+            {{ blog.title }}
+          </v-list-item-title>
+        </nuxt-link>
+        <v-list-item-subtitle>{{ blog.details }}</v-list-item-subtitle>
+      </v-list-item-content>
+    </v-list-item>
+
+    <v-card-actions>
+      <v-list-item-action>
+        <EditBlog :blogger="blog" />
+      </v-list-item-action>
+      <v-btn
+        tile
+        color="error"
+        :disabled="!isAuthor"
+        @click="deleteBlog(blog._id)"
+      >
+        <v-icon center pa-4> mdi-delete </v-icon>
+        Delete
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+<script>
+import { mapActions } from 'vuex'
+import EditBlog from './EditBlog.vue'
+export default {
+  name: 'HanaBlogPost',
+  components: { EditBlog },
+  props: {
+    blog: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isAuthor: true,
+    }
+  },
+  created() {
+    this.isAuthor = this.blog.authorUserId._id === this.$auth.$state.user._id
+  },
+  methods: {
+    ...mapActions('hana', ['deleteBlog']),
+  },
+}
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+  <v-app>
+    <nuxt-link style="text-decoration: none; color: inherit" :to="'/hana/'">
+      <v-btn fab outlined x-small color="green" class="pa-2 mb-2 mx-7 mt-3"
+        ><v-icon> mdi-chevron-left </v-icon></v-btn
+      ></nuxt-link
+    >
+
+    <v-card class="mx-6 my-6">
+      <v-card-title>
+        <span class="text-h6 font-weight-light">{{ title }} </span>
+      </v-card-title>
+
+      <v-card-text class="text-h6">
+        {{ content }}
+      </v-card-text>
+
+      <v-card-actions>
+        <v-list-item class="grow">
+          <v-list-item-content> </v-list-item-content>
+        </v-list-item>
+      </v-card-actions>
+    </v-card>
+  </v-app>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      id: 1,
+      title: 'Blog',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+      author: 'Hana Workneh',
+    }
+  },
+}
+</script>

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

@@ -0,0 +1,31 @@
+<template>
+  <v-app>
+    <v-container ma-10>
+      <v-row>
+        <HanaAddBlog />
+      </v-row>
+      <v-row v-for="blog in blogs" :key="blog.id">
+        <HanaBlogPost :blog="blog" />
+      </v-row>
+    </v-container>
+  </v-app>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+import HanaAddBlog from '../../components/hana/HanaAddBlog.vue'
+import HanaBlogPost from '../../components/hana/HanaBlogPost.vue'
+
+export default {
+  name: 'App',
+  components: { HanaAddBlog, HanaBlogPost },
+  computed: { ...mapState('hana', ['blogs']) },
+  created() {
+    this.fetchBlogs()
+  },
+  methods: {
+    ...mapActions('hana', ['fetchBlogs']),
+  },
+}
+</script>

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

@@ -62,6 +62,11 @@ export default {
           description: 'Summer Intern',
           link: '/keiredin',
         },
+        {
+          name: 'Hana Workneh',
+          description: 'Web Team Member',
+          link: '/hana',
+        },
         {
           name: 'Andualem Sebsbe',
           description: 'Summer Intern',

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

@@ -0,0 +1,59 @@
+import axios from 'axios'
+const state = {
+  blogs: [],
+}
+// const getters = {
+//     allBlogs: (state) => state.blogs
+// }
+const actions = {
+  async fetchBlogs({ commit }) {
+    const response = await axios.get(
+      'https://blog-app-backend.onrender.com/api/articles/all'
+    )
+
+    commit('setBlogs', response.data)
+  },
+  async addBlog({ commit }, updatedB) {
+    const response = await this.$axios.post(
+      'https://blog-app-backend.onrender.com/api/articles',
+      updatedB
+    )
+
+    commit('newBlog', response.data)
+  },
+  async deleteBlog({ commit }, id) {
+    await this.$axios.delete(
+      `https://blog-app-backend.onrender.com/api/articles/${id}`
+    )
+
+    commit('removeBlog', id)
+  },
+  async editBlog({ commit }, updated) {
+    const response = await this.$axios.put(
+      `https://blog-app-backend.onrender.com/api/articles/${updated.id}`,
+      updated
+    )
+    commit('editBlog', response.data)
+  },
+}
+const mutations = {
+  setBlogs: (state, blogs) => (state.blogs = blogs),
+  newBlog: (state, blog) => state.blogs.unshift(blog),
+  removeBlog: (state, id) =>
+    (state.blogs = state.blogs.filter((blog) => blog._id !== id)),
+  // editBlog: (state, updatedB) => {
+  //   const index = state.blogs.findIndex((blog) => blog._id === updatedB.id)
+
+  //   if (index !== -1) {
+  //     state.blogs.splice(index, 1, updatedB)
+  //   }
+  // },
+}
+
+export default {
+  state,
+  // getters,
+  actions,
+
+  mutations,
+}