Merge branch 'feature/notes-list'
This commit is contained in:
commit
05f9116c8e
@ -1,46 +1,46 @@
|
||||
<template>
|
||||
<v-card height="100%">
|
||||
<v-card
|
||||
class="d-flex flex-column"
|
||||
:class="{ hover:hover }"
|
||||
height="100%"
|
||||
:color="hover ? 'blue lighten-3' : 'white'"
|
||||
:elevation="hover ? 12 : 2"
|
||||
>
|
||||
<div class="mb-auto">
|
||||
<v-card-title>{{ title }}</v-card-title>
|
||||
<v-card-text>
|
||||
<slot></slot>
|
||||
</v-card-text>
|
||||
|
||||
<div class="tags">
|
||||
<v-chip v-for="tag in tags" :key="tag" active color="secondary">{{ tag }}</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-divider class="mt-auto"></v-divider>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
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>
|
||||
<div class="mt-auto" v-if="updatedAt">
|
||||
<v-divider/>
|
||||
<v-card-subtitle>Last updated {{ updatedAt }}</v-card-subtitle>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Note",
|
||||
name: 'Note',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
tags: {
|
||||
type: Array
|
||||
}
|
||||
}
|
||||
type: Array,
|
||||
},
|
||||
hover: {
|
||||
type: Boolean,
|
||||
default: 'false',
|
||||
},
|
||||
updatedAt: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -52,4 +52,8 @@
|
||||
.tags .v-chip {
|
||||
margin: 4px 8px 4px 0;
|
||||
}
|
||||
|
||||
.v-card.hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
>
|
||||
<v-btn to="/" text rounded>Simple Notes</v-btn>
|
||||
<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 v-else to="/account" text rounded>Account</v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
@ -1,106 +1,48 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-row dense
|
||||
align-content="stretch"
|
||||
align="stretch"
|
||||
>
|
||||
<v-row dense align-content="stretch" align="stretch">
|
||||
<v-col
|
||||
v-for="(note, index) in notes"
|
||||
:key="index"
|
||||
cols="12" md="6" xl="3"
|
||||
class="viewer">
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
xl="3"
|
||||
class="viewer"
|
||||
>
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<Note
|
||||
class="item"
|
||||
:hover="hover"
|
||||
:title="note.title"
|
||||
:tags="note.tags"
|
||||
:updated-at="format(note.updatedAt)"
|
||||
>
|
||||
{{ note.content }}
|
||||
</Note>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
<v-btn to="/create" fab fixed bottom right large color="accent">
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
|
||||
</v-container>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Note from '@/components/Note'
|
||||
import Note from '@/components/Note';
|
||||
import { format } from 'timeago.js';
|
||||
|
||||
export default {
|
||||
name: "notes",
|
||||
title: "Notes",
|
||||
components: {
|
||||
Note,
|
||||
},
|
||||
export default {
|
||||
name: 'notes',
|
||||
title: 'Notes',
|
||||
components: { Note },
|
||||
data: () => ({
|
||||
selector: ".viewer",
|
||||
options: {
|
||||
columnWidth: "200",
|
||||
percentPosition: true,
|
||||
gutter: 0,
|
||||
itemSelector: ".item"
|
||||
notes: [],
|
||||
}),
|
||||
methods: { format },
|
||||
mounted() {
|
||||
this.$axios.get('/notes').then(e => (this.notes = e.data));
|
||||
},
|
||||
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>
|
||||
|
||||
9
frontend/webpack.config.js
Normal file
9
frontend/webpack.config.js
Normal file
@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
resolve: {
|
||||
// for IntelliJ
|
||||
alias: {
|
||||
'@': path.resolve(__dirname),
|
||||
'~': path.resolve(__dirname)
|
||||
}
|
||||
}
|
||||
};
|
||||
5
package.json
Normal file
5
package.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"timeago.js": "^4.0.2"
|
||||
}
|
||||
}
|
||||
8
yarn.lock
Normal file
8
yarn.lock
Normal 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==
|
||||
Loading…
x
Reference in New Issue
Block a user