hubert/SimpleNotes
1
0
Fork 0
Code Projects Releases Activity

Merge branch 'feature/notes-list'

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-04-23 16:56:36 +02:00
commit 05f9116c8e
6 changed files with 87 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/components/Note.vue
View File

@ -1,46 +1,46 @@
<template> <template>
<v-card height="100%"> <v-card
<v-card-title>{{ title }}</v-card-title> class="d-flex flex-column"
<v-card-text> :class="{ hover:hover }"
<slot></slot> height="100%"
</v-card-text> :color="hover ? 'blue lighten-3' : 'white'"
:elevation="hover ? 12 : 2"
>
<div class="mb-auto">
<v-card-title>{{ title }}</v-card-title>
<div class="tags"> <div class="tags">
<v-chip v-for="tag in tags" :key="tag" active color="secondary">{{ tag }}</v-chip> <v-chip v-for="tag in tags" :key="tag" active color="secondary">{{ tag }}</v-chip>
</div>
</div> </div>
<v-divider class="mt-auto"></v-divider> <div class="mt-auto" v-if="updatedAt">
<v-divider/>
<v-card-actions> <v-card-subtitle>Last updated {{ updatedAt }}</v-card-subtitle>
<v-btn </div>
text
color="deep-purple accent-4" dark>
<v-icon left>mdi-eye</v-icon>
View
</v-btn>
<v-spacer/>
<v-btn
text
color="deep-purple accent-4">
<v-icon left>mdi-pencil</v-icon>
Edit
</v-btn>
</v-card-actions>
</v-card> </v-card>
</template> </template>
<script> <script>
export default { export default {
name: "Note", name: 'Note',
props: { props: {
title: { title: {
type: String, type: String,
required: true required: true,
}, },
tags: { tags: {
type: Array type: Array,
} },
} hover: {
type: Boolean,
default: 'false',
},
updatedAt: {
type: String,
default: null,
},
},
} }
</script> </script>
@ -52,4 +52,8 @@
.tags .v-chip { .tags .v-chip {
margin: 4px 8px 4px 0; margin: 4px 8px 4px 0;
} }
.v-card.hover {
cursor: pointer;
}
</style> </style>

2
frontend/layouts/default.vue
View File

@ -8,7 +8,7 @@
> >
<v-btn to="/" text rounded>Simple Notes</v-btn> <v-btn to="/" text rounded>Simple Notes</v-btn>
<v-spacer/> <v-spacer/>
<v-btn to="/notes" text rounded>My notes</v-btn> <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
<v-btn outlined v-if="this.$store.state.auth.loggedIn">Welcome {{this.$store.state.auth.user.username}}</v-btn> <v-btn outlined v-if="this.$store.state.auth.loggedIn">Welcome {{this.$store.state.auth.user.username}}</v-btn>
<v-btn v-else to="/account" text rounded>Account</v-btn> <v-btn v-else to="/account" text rounded>Account</v-btn>
</v-app-bar> </v-app-bar>

120
frontend/pages/notes.vue
View File

@ -1,106 +1,48 @@
<template> <template>
<v-container fluid> <v-container fluid>
<v-row dense <v-row dense align-content="stretch" align="stretch">
align-content="stretch"
align="stretch"
>
<v-col <v-col
v-for="(note, index) in notes" v-for="(note, index) in notes"
:key="index" :key="index"
cols="12" md="6" xl="3" cols="12"
class="viewer"> sm="6"
<Note md="4"
class="item" xl="3"
:title="note.title" class="viewer"
:tags="note.tags" >
> <v-hover v-slot:default="{ hover }">
{{ note.content }} <Note
</Note> :hover="hover"
:title="note.title"
:tags="note.tags"
:updated-at="format(note.updatedAt)"
>
{{ note.content }}
</Note>
</v-hover>
</v-col> </v-col>
</v-row> </v-row>
<v-btn to="/create" fab fixed bottom right large color="accent"> <v-btn to="/create" fab fixed bottom right large color="accent">
<v-icon>mdi-plus</v-icon> <v-icon>mdi-plus</v-icon>
</v-btn> </v-btn>
</v-container> </v-container>
</template> </template>
<script> <script>
import Note from '@/components/Note' import Note from '@/components/Note';
import { format } from 'timeago.js';
export default { export default {
name: "notes", name: 'notes',
title: "Notes", title: 'Notes',
components: { components: { Note },
Note, data: () => ({
}, notes: [],
data: () => ({ }),
selector: ".viewer", methods: { format },
options: { mounted() {
columnWidth: "200", this.$axios.get('/notes').then(e => (this.notes = e.data));
percentPosition: true, },
gutter: 0, };
itemSelector: ".item"
},
notes: [
{
title: "Elec analogique",
tags: ["Ephec"],
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
},
{
title: "Portfolio",
tags: ["Ephec", "Dev"],
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
},
{
title: "Melvin fait du ski",
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
},
{
title: "Daniel étudie elec",
tags: ["Ephec", "Ephec", "Ephec", "Ephec", "Ephec", "Ephec"],
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
},
{
title: "Portfolio",
tags: ["Ephec", "Dev"],
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
},
{
title: "Portfolio",
tags: ["Ephec", "Dev"],
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
},
{
title: "Portfolio",
tags: ["Ephec", "Dev"],
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
},
{
title: "Daniel étudie elec",
tags: ["Ephec", "Ephec", "Ephec", "Ephec", "Ephec", "Ephec"],
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
},
{
title: "Portfolio",
tags: ["Ephec", "Dev"],
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
},
{
title: "Portfolio",
tags: ["Ephec", "Dev"],
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
},
{
title: "Portfolio",
tags: ["Ephec", "Dev"],
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
},
]
})
}
</script> </script>

9
frontend/webpack.config.js Normal file
View File

@ -0,0 +1,9 @@
module.exports = {
resolve: {
// for IntelliJ
alias: {
'@': path.resolve(__dirname),
'~': path.resolve(__dirname)
}
}
};

5
package.json Normal file
View File

@ -0,0 +1,5 @@
{
"dependencies": {
"timeago.js": "^4.0.2"
}
}

8
yarn.lock Normal file
View File

@ -0,0 +1,8 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
timeago.js@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==