Sileshi.web.demo blog

starter-project-web-vue2/components/sileshi/SileshiAddBlog.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-dialog max-width="600px">
+    <template v-slot:activator="{ on }">
+      <v-btn color="primary" dark v-on="on">
+        <v-icon left> mdi-plus </v-icon>
+        Add Blog</v-btn
+      >
+    </template>
+    <v-card>
+      <v-card-title>
+        <h2>Add a New Blog</h2>
+      </v-card-title>
+      <v-card-text>
+        <v-form class="px-3">
+          <v-text-field label="Title" v-model="blog.Title"  />
+          <v-textarea label="Content" v-model="blog.Content" />
+          <v-spacer></v-spacer>
+          <v-btn class="success mx-0 mt-3" @click="createBlog">Add Blog</v-btn>
+        </v-form>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+import { mapActions } from 'vuex'
+export default {
+  name: 'AddBlog',
+  data() {
+    return {
+      blog:{
+        Title: '',
+        Content: '',
+        Post: {},
+      }
+    }
+  },
+  methods: {
+    ...mapActions("sileshi", ["addBlog"]),
+    createBlog(e) {
+      e.preventDefault()
+      this.blog.Post = {
+        title: this.blog.Title,
+        content: this.blog.Content,
+        description: 'description',
+      }
+      this.addBlog(this.blog.Post)
+      this.clearBlog()
+    },
+    clearBlog(){
+      this.blog.Title = ''
+      this.blog.Content = ''
+    },
+  },
+}
+</script>

starter-project-web-vue2/components/sileshi/SileshiBlogPost.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-container class="font">
+    <v-container class="pa-2 mb-6 mx-7 mt-3">
+      <SileshiAddBlog />
+    </v-container>
+
+    <v-container v-if="edit_area" class="px-0 black--text">
+      <v-subheader class="pb-10"> <h1>Edit Post </h1></v-subheader>
+      <v-text-field
+        outlined
+        :value = "current.title"
+        label="Title"
+        v-model="blog_title"
+      />
+      <v-text-field
+        outlined
+        :value="current.content"
+        label="Content"
+        v-model="blog_content"
+      />
+      <v-btn @click="update" class="pa-2 mb-2 mx-7 mt-3" dark>Save</v-btn>
+    </v-container>
+
+    <v-row
+      v-for="blog in blogs"
+      :key="blog._id"
+      dense
+      class="pa-5 py-0 mx-auto grey lighten-5 mb-6"
+      sm="6"
+      md="3"
+    >
+      <v-col cols="12">
+        <v-card color="white">
+          <v-row>
+            <v-col cols="10">
+              <v-card-title class="mx-auto text-center black--text">
+                <nuxt-link
+                  style="text-decoration: none; color: inherit"
+                  :to="`/sileshi/${blog._id}`"
+                >
+                  <p>
+                    {{ blog.title }}
+                  </p>
+                </nuxt-link>
+              </v-card-title>
+              <v-card-text class="black--text">
+                {{ blog.content }}
+              </v-card-text>
+            </v-col>
+            <v-col cols="1">
+              <v-btn left text @click="editArea(blog)" class="grey--text">
+                <v-icon> mdi-pencil </v-icon>
+              </v-btn>
+            </v-col>
+            <v-col cols="1">
+              <v-btn @click="deleteBlog(blog._id)" left text class="grey--text">
+                <v-icon> mdi-delete </v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import SileshiAddBlog from './SileshiAddBlog.vue'
+
+export default {
+    name: "BlogPost",
+    data() {
+        return {
+            current: {},
+            edit_area: false,
+            blog_title: "",
+            blog_content: "",
+            authorUserId: "",
+        };
+    },
+    computed: { ...mapState("sileshi", ["blogs"]) },
+    created() {
+        this.fetchBlogs();
+    },
+    methods: {
+        ...mapActions("sileshi", ["fetchBlogs", "deleteBlog", "updateBlog"]),
+        editArea(blog) {
+
+            this.edit_area = !this.edit_area;
+            this.current = blog;
+            this.blog_content = this.current.content;
+            this.blog_title = this.current.title;
+            this.authorUserId = this.current.authorUserId;
+        },
+        update() {
+
+            this.updateBlog({
+                _id: this.current._id,
+                content: this.blog_content,
+                authorUserId: this.current.authorUserId,
+                title: this.blog_title,
+            });
+            this.edit_area = !this.edit_area
+        },
+    },
+    components: { SileshiAddBlog }
+}
+</script>

starter-project-web-vue2/components/sileshi/userAuthForm.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-form v-model="valid" class="pa-5 py-0 mx-auto grey lighten-5 mb-6">
+    <v-text-field
+      v-model="userInfo.name"
+      label="Name"
+      :rules="[required('name')]"
+      v-if="hasNamee"
+    />
+
+    <v-text-field
+      v-model="userInfo.email"
+      label="Email"
+      :rules="[required('email'), emailFormat()]"
+    />
+
+    <v-text-field
+      v-model="userInfo.password"
+      label="Password"
+      :type="showPassword ? 'text' : 'password'"
+      :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+      @click:append="showPassword = !showPassword"
+      counter="true"
+      :rules="[required('password'), minLength('password', 3)]"
+    />
+
+    <v-btn @click="submitForm(userInfo)">{{ buttonText }}</v-btn>
+  </v-form>
+</template>
+
+<script>
+import validations from '@/utils/validations'
+export default {
+  data() {
+    return {
+      valid: false,
+      showPassword: false,
+      hasName: false,
+      userInfo: {
+        email: '[email protected]',
+        password: 'QWER123qwer',
+      },
+      ...validations,
+    }
+  },
+  props: ['submitForm', 'buttonText', 'hasNamee'],
+}
+</script>
+
+<style lang="scss" scoped></style>

starter-project-web-vue2/pages/abraham/login.vue

@@ -13,7 +13,7 @@ export default {
   },
   methods: {
     async loginUser(loginInfo) {
-      const res = await this.$auth.loginWith('local', {
+      await this.$auth.loginWith('local', {
         data: loginInfo,
       })
     },

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

@@ -38,6 +38,12 @@ export default {
           link:
             '/abraham',
         },
+        {
+          name: "Sileshi Abebe",
+          description: 'Summer Intern',
+          link:
+            '/sileshi',
+        },
       ],
     }
   },

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

@@ -0,0 +1,15 @@
+<template>
+  <v-app>
+    <v-main class="white">
+      <BlogPost />
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+import BlogPost from '../../components/sileshi/SileshiBlogPost.vue'
+export default {
+  name: 'IndexPage',
+  components: { BlogPost },
+}
+</script>

starter-project-web-vue2/pages/sileshi/login.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-container>
+    <h1>LogIn</h1>
+    <UserAuthForm buttonText="Login" :submitForm="loginUser" />
+  </v-container>
+</template>
+
+<script>
+import UserAuthForm from '@/components/sileshi/userAuthForm.vue'
+export default {
+  components: {
+    UserAuthForm,
+  },
+  methods: {
+    async loginUser(loginInfo) {
+      await this.$auth.loginWith('local', {
+        data: loginInfo,
+      })
+    },
+  },
+}
+</script>

starter-project-web-vue2/pages/starter-project-web-vue2.code-workspace

@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": ".."
+		},
+		{
+			"path": "..\\..\\..\\..\\..\\Desktop\\git"
+		}
+	],
+	"settings": {}
+}

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

@@ -0,0 +1,42 @@
+
+export const state = {
+    blogs: [],
+}
+export const actions = {
+    async fetchBlogs({ commit }) {
+        const response = await this.$axios.get(
+            'https://blog-app-backend.onrender.com/api/articles/all'
+        )
+        commit('setBlogs', response.data)
+    },
+    async addBlog({ commit }, blogPost) {
+        const response = await this.$axios.post(
+            'https://blog-app-backend.onrender.com/api/articles',
+            blogPost)
+        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 updateBlog({ commit }, updBlog) {
+        const response = await this.$axios.patch(
+            `https://blog-app-backend.onrender.com/api/articles/${updBlog._id}`,
+            updBlog)
+        commit('updateBlog', response.data)
+    },
+}
+export 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)),
+    updateBlog: (state, updBlog) => {
+        const index = state.blogs.findIndex((blog) => blog._id === updBlog._id)
+
+        if (index !== -1) {
+            state.blogs.splice(index, 1, updBlog)
+        }
+    },
+}