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

Amanz55 demo #296

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

Amanz55 demo #296

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
ab6058a
created basic ui
amanz55 Aug 3, 2022
0ea3264
ui with state and some fuctions completed
amanz55 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
119 changes: 119 additions & 0 deletions starter-project-web-vue2/components/amanz/AddBlog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<template>
<v-row>
<v-dialog v-model="dialog" persistent max-width="600px">
<template #activator="{ on, attrs }">
<!-- <v-btn color="primary" dark v-bind="attrs" v-on="on">
Open Dialog
</v-btn> -->
<v-btn
color="success"
class="mt-10 ml-5 py-5 px-7"
v-bind="attrs"
v-on="on"
>add blog</v-btn
>
</template>
<v-card>
<v-card-title>
<span class="text-h5">Add Blog</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<!-- <v-col cols="12" sm="6" md="4">
<v-text-field label="Legal first name*" required></v-text-field>
</v-col> -->
<!-- <v-col cols="12" sm="6" md="4">
<v-text-field
label="Legal middle name"
hint="example of helper text only on focus"
></v-text-field>
</v-col> -->
<!-- <v-col cols="12" sm="6" md="4">
<v-text-field
label="Legal last name*"
hint="example of persistent helper text"
persistent-hint
required
></v-text-field>
</v-col> -->
Comment on lines +24 to +39
Copy link
Contributor

Choose a reason for hiding this comment

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

Lets remove the comments if we dont need it

<v-col cols="12">
<v-text-field
v-model="title"
label="Title*"
required
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
v-model="content"
label="Content*"
required
></v-text-field>
</v-col>
<!-- <v-col cols="12" sm="6">
<v-select
:items="['0-17', '18-29', '30-54', '54+']"
label="Age*"
required
></v-select>
</v-col> -->
<!-- <v-col cols="12" sm="6">
<v-autocomplete
:items="[
'Skiing',
'Ice hockey',
'Soccer',
'Basketball',
'Hockey',
'Reading',
'Writing',
'Coding',
'Basejump',
]"
label="Interests"
multiple
></v-autocomplete>
</v-col> -->
Comment on lines +56 to +77
Copy link
Contributor

Choose a reason for hiding this comment

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

Here too, remove the comments

</v-row>
</v-container>
<v-text class="ml-3 text-subtitle-1 font-weight-medium"
><v-text color="red">*</v-text>indicates required field</v-text
>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="dialog = false">
Cancel
</v-btn>
<v-btn color="blue darken-1" text @click="onSubmit"> Add </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>

<script>
import { mapActions } from 'vuex'
export default {
data: () => ({
dialog: false,
newBlog: {},
title: '',
content: '',
}),
methods: {
...mapActions('amanz', ['addBlog']),
onSubmit(e) {
e.preventDefault()
this.newBlog = {
title: this.title,
content: this.content,
description: 'description 101',
}
this.addBlog(this.newBlog)
this.dialog = false
},
},
}
</script>
70 changes: 70 additions & 0 deletions starter-project-web-vue2/components/amanz/AmanzBlog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<template>
<v-container>
<v-hover v-slot:="{ hover }">
<v-card
:elevation="hover ? 7 : 1.5"
class="mx-auto mt-2 pa-6 transition-swing"
outlined
>
<v-list-item two-line>
<v-list-item-content>
<Nuxt-link
style="text-decoration: none; color: inherit"
:to="`/amanz/${blog._id} `"
>
<v-list-item-title class="text-h5 mb-3">
<v-text> {{ blog.title }} </v-text>
</v-list-item-title>
<v-list-item-subtitle class="text-h6">{{
blog.content
}}</v-list-item-subtitle>
</Nuxt-link>
</v-list-item-content>

<v-list-item-action tile class="mt-7 ml-15">
<EditBlog :blogger="blog" />
</v-list-item-action>
<v-list-item-action tile class="mt-7">
<v-btn icon :disabled="!isAuthor" @click="deleteBlog(blog._id)">
<v-icon size="30" color="red">mdi-delete</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>

<!-- <v-card-actions>
<v-btn outlined rounded text> Button </v-btn>
</v-card-actions> -->
</v-card>
</v-hover>
</v-container>
</template>

<script>
import { mapActions } from 'vuex'
import EditBlog from './EditBlog.vue'
export default {
name: 'AmanzBlog',

components: { EditBlog },

props: {
blog: {
type: Object,
required: true,
},
},

data() {
return {
isAuthor: true,
}
},
created() {
// console.log(this.$auth.$state)
this.isAuthor = this.blog.authorUserId._id === this.$auth.$state.user._id
},
methods: {
...mapActions('amanz', ['deleteBlog']),
},
}
</script>
75 changes: 75 additions & 0 deletions starter-project-web-vue2/components/amanz/EditBlog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<template>
<v-row>
<v-dialog v-model="dialog" persistent max-width="600px">
<template #activator="{ on, attrs }">
<!-- <v-btn color="primary" dark v-bind="attrs" v-on="on">
Open Dialog
</v-btn> -->
<!-- <v-btn
Copy link
Contributor

Choose a reason for hiding this comment

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

here as well. remove the comments

color="success"
class="mt-10 ml-5 py-5 px-7"
v-bind="attrs"
v-on="on"
>add blog</v-btn
> -->
<v-btn icon v-bind="attrs" disabled="!isAuthor" v-on="on">
<v-icon size="30" color="green">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"
label="Title*"
required
></v-text-field>
</v-col>
<v-col cols="12">
<v-text-field
v-model="content"
label="Content*"
required
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="dialog = false">
Cancel
</v-btn>
<v-btn color="blue darken-1" text @click="dialog = false">
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>

<script>
export default {
props: {
blogger: {
type: Object,
required: true,
},
},
data: () => ({
dialog: false,
title: '',
content: '',
}),
mounted() {
this.title = this.blogger.title
this.content = this.blogger.content
},
}
</script>
51 changes: 51 additions & 0 deletions starter-project-web-vue2/pages/amanz/_id.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<template>
<v-container>
<div v-if="blog === null">loading...</div>
<div v-else>
<nuxt-link style="text-decoration: none; color: inherit" :to="'/amanz/'">
<v-btn fab outlined x-small class="pa-2 mb-2 ml-3 mt-3"
><v-icon> mdi-chevron-left </v-icon></v-btn
></nuxt-link
>
<v-card
:elevation="3"
class="mx-auto mt-2 pa-8 transition-swing"
outlined
>
<v-list-item three-line>
<v-list-item-content>
<v-list-item-title class="text-h4 mb-5">
<v-text> {{ blog.title }} </v-text>
</v-list-item-title>
<v-text class="text-h5 text-wrap font-weight-regular">{{
blog.content
}}</v-text>
</v-list-item-content>
</v-list-item>
<v-card-actions>
<v-text class="text-h5 mt-5 ml-2 font-italic"
>By Amanuel Alemayehu</v-text
>
</v-card-actions>
</v-card>
</div>
</v-container>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
computed: {
...mapState('amanz', ['blog']),
},
created() {
this.fetchBlogsById(this.$route.params.id)
},
methods: {
...mapActions('amanz', ['fetchBlogsById']),
},
// created() {
// console.log(this.$route.params.id)
// },
}
</script>
30 changes: 30 additions & 0 deletions starter-project-web-vue2/pages/amanz/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<template>
<div>
<!-- <v-btn color="success" class="my-3 ml-5 py-5 px-7">add blog</v-btn> -->
<AddBlog />
<div v-if="blogs.length > 0">
<v-row v-for="blog in blogs" :key="blog._id">
<AmanzBlog :blog="blog" />
</v-row>
</div>
<div v-else>loading...</div>
</div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import AmanzBlog from '~/components/amanz/AmanzBlog.vue'
import AddBlog from '~/components/amanz/AddBlog.vue'

export default {
name: 'App',
components: { AmanzBlog, AddBlog },
computed: { ...mapState('amanz', ['blogs']) },
mounted() {
this.fetchBlogs()
},
methods: {
...mapActions('amanz', ['fetchBlogs']),
},
}
</script>
11 changes: 7 additions & 4 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,21 @@ export default {
name: 'Amsale Gebrehana',
description: 'A2SV G31',
link: '/amsale',

},
{
name: 'Ruth Getachew',
description: 'Web Team Member',
link: '/ruth',
},
{
name: "Keiredin Aman",
name: 'Keiredin Aman',
description: 'Summer Intern',
link:
'/keiredin',
link: '/keiredin',
},
{
name: 'Amanuel Alemayehu',
description: 'Web Team Member',
link: '/amanz',
},
],
}
Expand Down
Loading