Luhana.blog list

starter-project-web-vue2/components/luhana/LuhanaAddBlog.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-dialog max-width="600px">
+    <template #activator="{ on }">
+      <v-btn class="mx-3" fab dark small color="grey" v-on="on">
+        <v-icon dark> mdi-plus </v-icon>
+      </v-btn>
+    </template>
+    <v-card>
+      <v-card-title>
+        <h2>New Blog</h2>
+      </v-card-title>
+      <v-card-text>
+        <v-form class="px-3">
+          <v-text-field v-model="title" label="Title" />
+          <v-textarea v-model="desc" label="Desc" />
+          <v-spacer></v-spacer>
+          <v-btn class="mx-0 mt-3" color="aqua" @click="onSubmit"
+            >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 {
+      title: '',
+      desc: '',
+      blogPost: {},
+    }
+  },
+  methods: {
+    ...mapActions(['addBlog']),
+    onSubmit(e) {
+      e.preventDefault()
+      this.blogPost = {
+        title: this.title,
+        desc: this.desc,
+        description: 'description',
+      }
+      this.addBlog(this.blogPost)
+      this.title = ''
+      this.desc = ''
+    },
+    reset() {
+      this.$v.$reset()
+      this.title = ''
+      this.desc = ''
+    },
+  },
+}
+</script>

starter-project-web-vue2/components/luhana/LuhanaBlogList.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="blog-item">
+    <v-container class="pa-2 mb-6 mx-7 mt-3">
+      <AddBlog />
+    </v-container>
+    <v-card color="#00FFFF" dark>
+      <v-list-item two-line>
+        <v-list-item-content>
+          <v-card-title class="text-h5 mt-1">
+            <span class="text-h6 font-weight-bold">Classic Books</span>
+          </v-card-title>
+
+          <v-card-subtitle
+            >'Altough most classic novels are a bit harder to read, they carry
+            the authenticity with a time-stamp that takes you to a time you;ve
+            never been.'</v-card-subtitle
+          >
+          <v-card-text>Luhana</v-card-text>
+        </v-list-item-content>
+        <v-card-actions>
+          <v-btn color="white" right>
+            <v-icon color="#00FFFF">mdi-delete</v-icon>
+          </v-btn>
+          <nuxt-link
+            style="text-decoration: none; color: inherit"
+            :to="'/luhana/id'"
+          >
+            <v-btn text> View Blog </v-btn>
+          </nuxt-link>
+        </v-card-actions>
+      </v-list-item>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import AddBlog from '../luhana/LuhanaAddBlog.vue'
+export default {
+  name: 'BlogPost',
+  components: {
+    AddBlog,
+  },
+}
+</script>
+
+<style scoped>
+.blog-item {
+  background: #f4f4f4;
+  padding: 10px;
+  border-bottom: 1px #ccc dotted;
+}
+</style>

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

@@ -1,29 +1,5 @@
 <template>
   <v-app dark>
-    <v-navigation-drawer
-      v-model="drawer"
-      :mini-variant="miniVariant"
-      :clipped="clipped"
-      fixed
-      app
-    >
-      <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title v-text="item.title" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
     <v-app-bar :clipped-left="clipped" fixed app>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
       <v-btn icon @click.stop="miniVariant = !miniVariant">
@@ -40,6 +16,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" />