Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ruth.demo add crud #294

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Ruth.demo add crud #294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9994a84
basic CRUD done
Aug 5, 2022
338fd57
code clean up
Aug 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 37 additions & 3 deletions starter-project-web-vue2/components/ruth/RuthAddBlog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,20 @@
<v-container>
<v-row>
<v-col cols="12">
<v-text-field dense label="Title*" required></v-text-field>
<v-text-field
v-model="title"
dense
label="Title *"
required
></v-text-field>
</v-col>
<v-col cols="12">
<v-textarea dense label="Content*" required></v-textarea>
<v-textarea
v-model="content"
dense
label="Content *"
required
></v-textarea>
</v-col>
</v-row>
</v-container>
Expand All @@ -28,7 +38,7 @@
<v-btn color="red darken-1" text @click="dialog = false">
Discard
</v-btn>
<v-btn color="green darken-1" text @click="dialog = false">
<v-btn color="green darken-1" text @click="onSubmit">
Add Blog
</v-btn>
</v-card-actions>
Expand All @@ -39,12 +49,36 @@
</template>

<script>
import { mapActions } from 'vuex'

export default {
name: 'RuthAddBlog',
data() {
return {
dialog: false,
isLoggedIn: false,
newBlog: {},
title: '',
content: '',
Comment on lines +61 to +62
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A better approach would be to have an object that represents a blog

blog: {
  title: '',
  content: ''
}

}
},
created() {
this.isLoggedIn = this.$auth.$state.user
},
methods: {
...mapActions('ruth', ['addBlog']),
onSubmit(e) {
e.preventDefault()
this.newBlog = {
title: this.title,
content: this.content,
description: 'description',
}
Comment on lines +72 to +76
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we apply the above recommendation, we won't need this.

this.$store.dispatch('ruth/addBlog', this.newBlog)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.$store.dispatch('ruth/addBlog', this.blog)

this.blogTitle = ''
this.blogContent = ''
Comment on lines +78 to +79
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clearing the properties can be done by separate method.

this.dialog = false
},
},
}
</script>
153 changes: 127 additions & 26 deletions starter-project-web-vue2/components/ruth/RuthBlog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,102 @@
<template>
<div>
<v-card class="my-4 mx-12" outlined>
<v-list-item three-line>
<v-list-item-content>
<nuxt-link
style="text-decoration: none; color: inherit"
:to="`/ruth/${blog._id} `"
>
<v-list-item-title class="text-h5 mt-1"
>{{ blog.title }} <small>{{ blog._id }}</small>
</v-list-item-title>
</nuxt-link>
<v-list-item-subtitle>{{ blog.details }}</v-list-item-subtitle>
</v-list-item-content>
<v-card-actions>
<v-btn class="ma-2" outlined x-small fab color="green">
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn class="ma-2" outlined x-small fab color="red">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-card-actions>
</v-list-item>
<v-list-item>
<v-list-item-subtitle>By {{ blog.author }}</v-list-item-subtitle>
</v-list-item>
<v-card-actions> </v-card-actions>
<v-card class="my-4 mx-6" outlined width="330">
<v-img
class="white--text align-end"
height="200px"
src="https://source.unsplash.com/random/300x200?sig=${Math.random()}"
>
<v-card-title>{{ blog.title }} </v-card-title>
</v-img>

<v-card-subtitle class="pb-4">
By {{ blog.authorUserId.fullName }}
</v-card-subtitle>

<v-card-text class="text--primary">
<div>{{ blog.content }}</div>
</v-card-text>

<v-card-actions>
<nuxt-link
style="text-decoration: none; color: inherit"
:to="`/ruth/${blog._id} `"
>
<v-btn color="green" text> View Blog </v-btn>
</nuxt-link>
<v-spacer></v-spacer>

<v-dialog v-model="dialog" persistent max-width="600px">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's separate UpdateBlog to its own component

<template #activator="{ on, attrs }">
<v-btn
class="ma-2"
icon
small
v-bind="attrs"
:disabled="!isAuthor"
color="green"
v-on="on"
@click="editArea(blog)"
>
<v-icon>mdi-pencil</v-icon>
</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"
dense
label="Title*"
required
></v-text-field>
</v-col>
<v-col cols="12">
<v-textarea
v-model="content"
dense
label="Content*"
required
></v-textarea>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions class="mx-4 mt-4">
<v-spacer></v-spacer>
<v-btn color="red darken-1" text @click="dialog = false">
Discard
</v-btn>
<v-btn color="green darken-1" text @click="updBlog(blog._id)">
Update Blog
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

<v-btn
class="ma-2"
icon
small
:disabled="!isAuthor"
color="red"
@click="deleteBlog(blog._id)"
>
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
name: 'RuthBlog',
props: {
Expand All @@ -39,5 +105,40 @@ export default {
required: true,
},
},
data() {
return {
isAuthor: false,
dialog: false,
title: '',
content: '',
Comment on lines +112 to +113
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same style can be applied to this.

  • Making this its own object.

current: {},
}
},
created() {
if (this.$auth.$state.loggedIn) {
this.isAuthor = this.blog.authorUserId._id === this.$auth.state.user._id
}

this.title = this.blog.title
this.content = this.blog.content
},
methods: {
...mapActions('ruth', ['deleteBlog', 'updateBlog', 'fetchBlogs']),
editArea(blog) {
this.dialog = !this.dialog
this.current = blog
},
updBlog(id) {
Copy link
Contributor

@TripleThreads TripleThreads Aug 6, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

better naming saveChanges(id)

this.updatedBlog = {
_id: id,
content: this.content,
title: this.title,
description: 'description',
}
this.$store.dispatch('ruth/updateBlog', this.updatedBlog)
this.dialog = false
this.fetchBlogs()
},
},
}
</script>
8 changes: 3 additions & 5 deletions starter-project-web-vue2/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,16 @@ export default {
name: 'Amsale Gebrehana',
description: 'A2SV G31',
link: '/amsale',

},
{
name: 'Ruth Getachew',
description: 'Web Team Member',
description: 'A2SV G33',
link: '/ruth',
},
{
name: "Keiredin Aman",
name: 'Keiredin Aman',
description: 'Summer Intern',
link:
'/keiredin',
link: '/keiredin',
},
],
}
Expand Down
42 changes: 28 additions & 14 deletions starter-project-web-vue2/pages/ruth/_id.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,50 @@

<v-card class="mx-6 my-6">
<v-card-title>
<span class="text-h6 font-weight-light"
>{{ title }} <small>{{ id }}</small></span
>
<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-title>By {{ author }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-card-actions>
<v-list-item class="grow">
<v-list-item-content>
<v-list-item-title>{{ author }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-card>
</v-app>
</template>

<script>
import axios from 'axios'

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: 'Ruth Getachew',
title: '',
content: '',
author: '',
}
},
async created() {
const config = {
headers: {
Accept: 'application/json',
},
}
try {
const res = await axios.get(
`https://blog-app-backend.onrender.com/api/articles/${this.$route.params.id}`,
config
Comment on lines +47 to +48
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move all network requests to vuex.

)

this.author = 'By ' + res.data.authorUserId.fullName
this.content = res.data.content
this.title = res.data.title
} catch (err) {}
},
}
</script>
Loading