Natnael.demo practice

starter-project-web-vue2/components/natnaelT/AddBlogButton.vue

@@ -0,0 +1,17 @@
+<template>
+    <v-btn @click="onClick()">{{text}}</v-btn>
+</template>
+<script>
+export default {
+    name:'AddBlogButton',
+    props:{
+        text: String,
+        color: String
+    },
+    methods:{
+        onClick(){
+             this.$emit("toggle-add-blog")
+        }
+    }
+}
+</script>

starter-project-web-vue2/components/natnaelT/AddBlogForm.vue

@@ -0,0 +1,89 @@
+<template>
+  <form class="add-form" @submit="onSubmit">
+    <div class="form-control">
+      <label>Title</label>
+      <input v-model="title" type="text" name="content" placeholder="Blog Title here..." />
+    </div>
+    <div class="form-control">
+      <label>Content</label>
+      <input
+        v-model="content"
+        type="text"
+        name="content"
+        placeholder="Write here..."
+      />
+    </div>
+    <input type="submit" value="Save Blog" class="btn" />
+  </form>
+</template>
+
+<script>
+import {mapActions} from 'vuex'
+export default {
+  name: 'AddBlogForm',
+
+  data() {
+    return {
+      title: '',
+      content: ''
+    }
+  },
+  methods: {
+    ...mapActions('natnaelT',['addBlog']),
+
+    onSubmit(e) {
+      e.preventDefault()
+      if (!this.title) {
+        alert('Please add a blog')
+        return
+      }
+      const newBlog = {
+        title: this.title,
+        content: this.content
+      }
+      this.addBlog(newBlog)
+      this.title = ''
+      this.content = ''
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+.add-form {
+  margin-bottom: 40px;
+}
+
+.form-control {
+  margin: 20px 0;
+}
+
+.form-control label {
+  display: block;
+}
+
+.form-control input {
+  width: 100%;
+  height: 40px;
+  margin: 5px;
+  padding: 3px 7px;
+  font-size: 17px;
+}
+
+.form-control-check {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.form-control-check label {
+  flex: 1;
+}
+
+.form-control-check input {
+  flex: 2;
+  height: 20px;
+}
+
+</style>

starter-project-web-vue2/components/natnaelT/BlogList.vue

@@ -0,0 +1,46 @@
+<template>
+<div>
+<div class="singleblog" v-for="blog in allBlogs" :key="blog.id">
+    <SingleBlog :blog="blog" @delete-blog="deleteBlog(blog.id)" @update-blog="updateBlog(blog.id)"/>
+
+  </div>
+</div>
+</template>
+
+<script>
+import {mapGetters, mapActions} from "vuex";
+import SingleBlog from './SingleBlog.vue';
+
+export default {
+name:"BlogList",
+methods:{
+    ...mapActions('natnaelT',['fetchBlogs','deleteBlog','updateBlog']),
+},
+computed: mapGetters('natnaelT',['allBlogs']),
+created(){
+    this.fetchBlogs();
+},
+
+components:{
+    SingleBlog
+}
+}
+</script>
+<style>
+
+.btn {
+    display: flex;
+    padding: 1px; 
+    margin: 1px;
+    border-radius: 0.5px;
+}
+
+.singleblog{
+  border: 1px solid;
+  border-radius: 6px;
+  padding: 10px;
+  margin: 15px;
+  box-shadow: 1px 1px 4px gray;
+}
+
+</style>

starter-project-web-vue2/components/natnaelT/SingleBlog.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="card">
+    <v-card-text>
+    <h2>{{blog.title}}</h2>
+    <p>{{blog.content}}</p>
+    <v-btn class="btn" @click="$emit('update-blog',blog.id)">Update</v-btn>
+    <v-btn class="btn" @click="$emit('delete-blog',blog.id)">Delete</v-btn>
+    <nuxt-link style="text-decoration: none;" :to="'/natnaelT/'+ blog._id">
+    <v-btn>
+      Show more
+    </v-btn> 
+    </nuxt-link>
+    </v-card-text>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "SingleBlog",
+    props: {
+        blog: Object
+    },
+    emits: ["delete-blog","update-blog"]
+}
+</script>

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

@@ -37,7 +37,12 @@ export default {
           description: 'Summer Intern',
           link:
             '/abraham',
-        },
+        },{
+          name: "Natnael Tedros",
+          description: 'Summer Intern',
+          link:
+            '/natnaelT',
+        }
       ],
     }
   },

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

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <nuxt-link to="/natnaelT/">
+      <v-btn class="ma-2" color="#1F7087" dark>
+        <v-icon dark left> mdi-arrow-left </v-icon>Back
+      </v-btn>
+    </nuxt-link>
+    <v-card>
+      <h2>{{blog.title}}</h2>
+      <v-container>
+        <p>{{blog.content}}</p>
+      </v-container>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  data() {
+    return {
+      blog: {
+        title: '',
+        content: '',
+      },
+    }
+  },
+  async created() {
+    try {
+      const response = await axios.get(
+        `https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`
+      )
+      this.blog = response.data
+    } catch (err) {
+      this.$nuxt.error({
+        statusCode: err.statusCode,
+        message: err.message,
+      })
+    }
+  },
+}
+</script>

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="addblog">
+    <AddBlogButton :text="showAddBlog ? 'Close' : 'Add Blog'" :color= "showAddBlog ? 'red' : 'blue'" @toggle-add-blog="toggleAddBlog()" />
+    <div v-if="showAddBlog" class="addblogform">
+    <AddBlogForm />
+    </div>
+    <div class="bloglist">
+    <BlogList /> 
+    </div>
+  </div>
+</template>
+
+<script>
+
+import AddBlogForm from '~/components/natnaelT/AddBlogForm.vue';
+import AddBlogButton from '~/components/natnaelT/AddBlogButton.vue';
+import BlogList from '~/components/natnaelT/BlogList.vue';
+export default {
+    data() {
+        return {
+            showAddBlog: false
+            }
+    },
+    components: {
+    AddBlogButton,
+    AddBlogForm,
+    BlogList
+    },
+    head() {
+        return {
+            title: "Blog App",
+            meta: [{
+                    hid: "description",
+                    name: "Blog page",
+                    content: "Blog to save thoughts"
+                }]
+        };
+    },
+
+    methods:{
+        toggleAddBlog(){
+        this.showAddBlog = !this.showAddBlog
+    },
+    }
+
+
+}
+</script>
+
+<style>
+
+.addblog p{
+    font-style: italic;
+}
+
+.addblog nuxt-link{
+    display: inline-block;
+    background: blue;
+    color: aliceblue;
+    padding: 0.3rem 1rem;
+    margin-right: 0.5rem;
+}
+
+.btn{
+    justify-content: center;
+    background: lightblue;
+    padding: 5px 10px;
+    color: black;
+    display: inline-block;
+    margin: 2px;
+    border-radius: 10px;
+
+}
+
+</style>