Update notes components and page, notes are coming from /notes
This commit is contained in:
parent
7f88f5371d
commit
20daa71d51
@ -1,47 +1,47 @@
|
||||
<template>
|
||||
<v-card height="100%">
|
||||
<v-card-title>{{ title }}</v-card-title>
|
||||
<v-card-text>
|
||||
<slot></slot>
|
||||
</v-card-text>
|
||||
<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>
|
||||
|
||||
<div class="tags">
|
||||
<v-chip v-for="tag in tags" :key="tag" active color="secondary">{{ tag }}</v-chip>
|
||||
<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>{{ 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>
|
||||
|
||||
<style>
|
||||
@ -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>
|
||||
|
||||
@ -7,15 +7,18 @@
|
||||
<v-col
|
||||
v-for="(note, index) in notes"
|
||||
:key="index"
|
||||
cols="12" md="6" xl="3"
|
||||
cols="12" sm="6" md="4" xl="3"
|
||||
class="viewer">
|
||||
<Note
|
||||
class="item"
|
||||
:title="note.title"
|
||||
:tags="note.tags"
|
||||
>
|
||||
{{ note.content }}
|
||||
</Note>
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<Note
|
||||
:hover="hover"
|
||||
:title="note.title"
|
||||
:tags="note.tags"
|
||||
:updated-at="note.updatedAt"
|
||||
>
|
||||
{{ note.content }}
|
||||
</Note>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
@ -38,69 +41,11 @@
|
||||
Note,
|
||||
},
|
||||
data: () => ({
|
||||
selector: ".viewer",
|
||||
options: {
|
||||
columnWidth: "200",
|
||||
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?"
|
||||
},
|
||||
]
|
||||
})
|
||||
notes: []
|
||||
}),
|
||||
mounted() {
|
||||
this.$axios.get('/notes')
|
||||
.then(e => this.notes = e.data)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user