Zerubabel.demo project

starter-project-web-vue2/components/zerubabel/AddBlog.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="550"
+    class="d-flex flex-column align-center"
+  >
+    <v-card>
+      <v-card-text class="pa-10">
+        <h1>Add Blog</h1>
+      </v-card-text>
+      <v-container class="input-container pa-5">
+        <v-text-field
+          v-model="blog.title"
+          class="input"
+          label="Title"
+          clearable
+        ></v-text-field>
+        <v-text-field
+          v-model="blog.content"
+          class="input"
+          label="Content"
+          clearable
+        ></v-text-field>
+        <v-textarea
+          v-model="blog.description"
+          class="input"
+          label="Description"
+        ></v-textarea>
+        <v-btn class="ma-2" color="primary" dark @click="add"
+          ><span @click="dialog = false">Add</span></v-btn
+        >
+      </v-container>
+    </v-card>
+    <template #activator="{ on }">
+      <v-btn
+        class="add-btn ma-15 pa-9 text-center mr-1 mb-1"
+        color="primary"
+        fab
+        dark
+        fixed
+        bottom
+        right
+        v-on="on"
+      >
+        <v-icon class="icon" dark> mdi-plus </v-icon>
+      </v-btn>
+    </template>
+  </v-dialog>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+export default {
+  name: 'AddBlog',
+  data() {
+    return {
+      blog: {
+        _id: Math.floor(Math.random() * 1000),
+        title: '',
+        content: '',
+        description: '',
+      },
+      dialog: false,
+    }
+  },
+  methods: {
+    ...mapActions('zerubabel', ['addBlog']),
+    add() {
+      this.addBlog(this.blog)
+    },
+  },
+}
+</script>

starter-project-web-vue2/components/zerubabel/Blogs.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-container>
+    <v-container>
+      <AddBlog />
+    </v-container>
+    <v-container v-if="blogs.length > 0" class="blog-list d-flex flex-column">
+      <v-card
+        v-for="blog in blogs"
+        :key="blog._id"
+        class="blog m-4 ma-5 elevation-9 shaped d-flex flex-column"
+      >
+        <v-card-title class="card-title">
+          <nuxt-link
+            :to="`/zerubabel/${blog._id}`"
+            class="text-decoration-none"
+            >{{ blog.title }}</nuxt-link
+          >
+        </v-card-title>
+        <v-card-subtitle class="card-subtitle mt-2"
+          >Author: {{ blog.author }}</v-card-subtitle
+        >
+        <v-card-text class="card-text">{{ blog.description }}</v-card-text>
+        <v-card-actions class="card-actions align-self-end">
+          <EditBlog :blog="blog" />
+          <v-btn icon>
+            <v-icon
+              title="delete"
+              class="ma-2 rounded-sm"
+              color="red"
+              dark
+              @click="() => del(blog._id)"
+              >mdi-delete</v-icon
+            >
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-container>
+    <v-container v-else class="text-center text-h6">
+      <v-progress-circular indeterminate color="primary"></v-progress-circular>
+      <v-container class="text-grey"> Loading... </v-container>
+    </v-container>
+  </v-container>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import AddBlog from './AddBlog.vue'
+import EditBlog from './EditBlog.vue'
+
+export default {
+  name: 'BlogPost',
+  components: { AddBlog, EditBlog },
+
+  computed: { ...mapState('zerubabel', ['blogs']) },
+  methods: {
+    ...mapActions('zerubabel', ['deleteBlog']),
+    del(id) {
+      this.deleteBlog(id)
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="550"
+    class="d-flex flex-column align-center"
+  >
+    <v-card>
+      <v-card-text class="pa-10">
+        <h1>Edit Blog</h1>
+      </v-card-text>
+      <v-container class="input-container pa-5">
+        <v-text-field
+          v-model="newBlog.title"
+          label="Title"
+          clearable
+          :placeholder="blog.title"
+        ></v-text-field>
+        <v-text-field
+          v-model="newBlog.content"
+          label="Content"
+          clearable
+          :placeholder="blog.content"
+        ></v-text-field>
+        <v-textarea
+          v-model="newBlog.description"
+          label="Description"
+          :placeholder="blog.description"
+        ></v-textarea>
+        <v-btn class="ma-2" color="primary" dark @click="update"
+          ><span @click="dialog = false">Edit</span></v-btn
+        >
+      </v-container>
+    </v-card>
+    <template #activator="{ on }">
+      <v-btn icon v-on="on">
+        <v-icon title="edit" class="ma-2" color="primary" dark
+          >mdi-pencil</v-icon
+        >
+      </v-btn>
+    </template>
+  </v-dialog>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'EditBlog',
+  props: ['blog'],
+  data() {
+    return {
+      newBlog: {
+        title: '',
+        content: '',
+        description: '',
+      },
+      dialog: false,
+    }
+  },
+  methods: {
+    ...mapActions('zerubabel', ['editBlog']),
+    update() {
+      const blog = {
+        ...this.blog,
+        ...this.newBlog,
+      }
+      this.editBlog(blog)
+    },
+  },
+}
+</script>

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

@@ -77,6 +77,11 @@ export default {
           description: 'Group 32 Student',
           link: '/yared',
         },
+        {
+          name: 'Zerubabel Kassahun',
+          description: 'Group 33 Student',
+          link: '/zerubabel',
+        },
       ],
     }
   },

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

@@ -0,0 +1,53 @@
+<template>
+  <v-container>
+    <v-container v-if="blog != null">
+      <v-row>
+        <v-btn dark color="primary" class="text-black">
+          <nuxt-link to="/zerubabel" class="text-decoration-none">
+            <v-icon left> mdi-arrow-left </v-icon>Back
+          </nuxt-link>
+        </v-btn>
+      </v-row>
+      <v-row class="pa-6 d-flex flex-column mt-10">
+        <v-row class="d-flex flex-column">
+          <span class="text-h2 text-black">{{ blog.title }}</span>
+          <hr class="mt-5" />
+          <h3 class="text-subtitle-1 mt-10">Author: {{ blog.author }}</h3>
+        </v-row>
+        <v-row>
+          <span class="text-subtitle-1 mt-5">Content: {{ blog.content }}</span>
+          <p class="mt-10">{{ blog.description }}</p>
+        </v-row>
+      </v-row>
+    </v-container>
+    <v-container v-else class="text-center text-h6">
+      <v-progress-circular indeterminate color="primary"></v-progress-circular>
+      <v-container class="text-grey"> Loading... </v-container>
+    </v-container>
+  </v-container>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  data() {
+    return {
+      id: null,
+      blog: null,
+    }
+  },
+  computed: {
+    ...mapState('zerubabel', ['blogs']),
+  },
+  created() {
+    const path = this.$route.fullPath.split('/')
+    this.id = path[path.length - 1]
+    this.blogs.forEach((element) => {
+      if (element._id === parseInt(this.id)) {
+        this.blog = element
+      }
+    })
+  },
+}
+</script>

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

@@ -0,0 +1,15 @@
+<template>
+  <v-app>
+    <v-main md="xl">
+      <BlogPost />
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+import BlogPost from '../../components/zerubabel/Blogs.vue'
+export default {
+  name: 'IndexPage',
+  components: { BlogPost },
+}
+</script>

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

@@ -0,0 +1,23 @@
+<template>
+  <v-container>
+    <h1>LogIn</h1>
+    <UserAuthForm button-text="Login" :submit-form="loginUser" />
+  </v-container>
+</template>
+
+<script>
+import UserAuthForm from '@/components/abraham/UserAuthForm.vue'
+export default {
+  components: {
+    UserAuthForm,
+  },
+  methods: {
+    async loginUser(loginInfo) {
+      const res = await this.$auth.loginWith('local', {
+        data: loginInfo,
+      })
+      console.log(res)
+    },
+  },
+}
+</script>

starter-project-web-vue2/pages/zerubabel/register.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-contair>
+    <h1>Register</h1>
+    <UserAuthForm
+      button-text="Register"
+      :submit-form="registerUser"
+      has-namee="true"
+    />
+  </v-contair>
+</template>
+
+<script>
+import UserAuthForm from '@/components/abraham/UserAuthForm.vue'
+export default {
+  components: {
+    UserAuthForm,
+  },
+  methods: {
+    registerUser(registerationinfo) {
+      debugger
+      alert('You presssed  a button')
+    },
+  },
+}
+</script>