Skip to content
Snippets Groups Projects
Commit b917087f authored by nicrausaz's avatar nicrausaz
Browse files

Ajout de commentaires design

parent 2037fcbd
No related branches found
No related tags found
No related merge requests found
No preview for this file type
canapGEST/Site/src/assets/empty_avatar.png

45.7 KiB

<template>
<div id="application-comments">
{{$store.state.moduleApplications.currentApplication.comments}}
<v-card dark flat>
<v-btn absolute bottom color="pink" right fab>
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-card-title class="pa-2 purple lighten-3">
<v-btn icon>
<v-icon>mdi-menu</v-icon>
</v-btn>
<h3 class="title font-weight-light text-xs-center grow">Timeline</h3>
<v-avatar>
<v-img
src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light"
></v-img>
</v-avatar>
<v-card>
<v-card-title>
<h4>Commentaires</h4>
</v-card-title>
<v-img
src="https://cdn.vuetifyjs.com/images/cards/forest.jpg"
gradient="to top, rgba(0,0,0,.44), rgba(0,0,0,.44)"
>
<v-container fill-height>
<v-layout align-center>
<strong class="display-4 font-weight-regular mr-4">8</strong>
<v-layout column justify-end>
<div class="headline font-weight-light">Monday</div>
<div class="text-uppercase font-weight-light">February 2015</div>
</v-layout>
</v-layout>
</v-container>
</v-img>
</v-card>
<v-card-text class="py-0">
<v-timeline align-top dense>
<v-timeline-item color="pink" small>
<v-layout pt-3>
<v-flex xs3>
<strong>5pm</strong>
</v-flex>
<v-flex>
<strong>New Icon</strong>
<div class="caption">Mobile App</div>
</v-flex>
</v-layout>
</v-timeline-item>
<v-divider></v-divider>
<v-card-text>
<v-list subheader three-line>
<v-textarea v-model="newComment" label="Ajouter un commentaire..." box></v-textarea>
<v-btn block color="primary" @click="comment">Ajouter</v-btn>
<v-subheader>Commentaires publics</v-subheader>
<v-list-tile
v-for="comment in $store.state.moduleApplications.currentApplication.comments.public"
avatar
:key="comment.comment_id"
>
<v-list-tile-avatar>
<img
:src="'https://people.epfl.ch/private/common/photos/links/' + comment.comment_owner_sciper + '.jpg'"
onerror="this.onerror=null;this.src='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png';"
alt="avatar"
>
</v-list-tile-avatar>
<v-list-tile-content>
{{ comment.comment_content }}
<v-list-tile-sub-title>{{comment.ownerData.displayname}}</v-list-tile-sub-title>
</v-list-tile-content>
<v-timeline-item color="teal lighten-3" small>
<v-layout wrap pt-3>
<v-flex xs3>
<strong>3-4pm</strong>
</v-flex>
<v-flex>
<strong>Design Stand Up</strong>
<div class="caption mb-2">Hangouts</div>
<v-avatar>
<v-img
src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairFrida&accessoriesType=Kurt&hairColor=Red&facialHairType=BeardLight&facialHairColor=BrownDark&clotheType=GraphicShirt&clotheColor=Gray01&graphicType=Skull&eyeType=Wink&eyebrowType=RaisedExcitedNatural&mouthType=Disbelief&skinColor=Brown"
></v-img>
</v-avatar>
<v-avatar>
<v-img
src="https://avataaars.io/?avatarStyle=Circle&topType=ShortHairFrizzle&accessoriesType=Prescription02&hairColor=Black&facialHairType=MoustacheMagnum&facialHairColor=BrownDark&clotheType=BlazerSweater&clotheColor=Black&eyeType=Default&eyebrowType=FlatNatural&mouthType=Default&skinColor=Tanned"
></v-img>
</v-avatar>
<v-avatar>
<v-img
src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairMiaWallace&accessoriesType=Sunglasses&hairColor=BlondeGolden&facialHairType=Blank&clotheType=BlazerSweater&eyeType=Surprised&eyebrowType=RaisedExcited&mouthType=Smile&skinColor=Pale"
></v-img>
</v-avatar>
</v-flex>
</v-layout>
</v-timeline-item>
<v-list-tile-action>
<v-chip
outline
color="red"
small
style="cursor: pointer;"
@click="editComment(comment.comment_id)"
>
<v-icon small>edit</v-icon>
</v-chip>
<small>{{getFormatedDate(comment.comment_date)}}</small>
</v-list-tile-action>
</v-list-tile>
<v-timeline-item color="pink" small>
<v-layout pt-3>
<v-flex xs3>
<strong>12pm</strong>
</v-flex>
<v-flex>
<strong>Lunch break</strong>
</v-flex>
</v-layout>
</v-timeline-item>
<v-divider></v-divider>
</v-list>
<v-list subheader three-line>
<v-subheader>Vos commentaires privés</v-subheader>
<v-list-tile
v-for="comment in $store.state.moduleApplications.currentApplication.comments.private"
avatar
:key="comment.comment_id"
>
<v-list-tile-avatar>
<img
:src="'https://people.epfl.ch/private/common/photos/links/' + comment.comment_owner_sciper + '.jpg'"
onerror="this.onerror=null;this.src='https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png';"
alt="avatar"
>
</v-list-tile-avatar>
<v-timeline-item color="teal lighten-3" small>
<v-layout pt-3>
<v-flex xs3>
<strong>9-11am</strong>
</v-flex>
<v-flex>
<strong>Finish Home Screen</strong>
<div class="caption">Web App</div>
</v-flex>
</v-layout>
</v-timeline-item>
</v-timeline>
</v-card-text>
<v-list-tile-content>
{{ comment.comment_content }}
<v-list-tile-sub-title>{{comment.ownerData.displayname}}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-chip outline color="red" small>
<v-icon small>edit</v-icon>
</v-chip>
<small>{{getFormatedDate(comment.comment_date)}}</small>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-card-text>
</v-card>
</div>
</template>
<script>
export default {
name: 'application-comments'
name: 'application-comments',
data() {
return {
newComment: ''
}
},
methods: {
getFormatedDate(value) {
let dateTimeParts = value.split(/[- :]/)
dateTimeParts[1]--
let date = new Date(...dateTimeParts)
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' à ' + date.getHours() + ':' + date.getMinutes()
},
editComment(id) {
console.log(id)
},
comment() {
console.log('comment')
}
}
}
</script>
......@@ -30,7 +30,24 @@ export function getCurrentApplicationComments(context, data) {
url: '/applicant/' + data.id + '/comments'
})
.then(response => {
context.commit('setCurrentApplicationComments', response.data)
let results = {
public: [],
private: []
}
response.data.public.forEach(comment => {
getOwnerData(comment.comment_owner_sciper).then(res => {
comment.ownerData = res
results.public.push(comment)
})
})
response.data.private.forEach(comment => {
getOwnerData(comment.comment_owner_sciper).then(res => {
comment.ownerData = res
results.private.push(comment)
})
})
context.commit('setCurrentApplicationComments', results)
resolve()
})
})
......@@ -92,6 +109,18 @@ export function getFile(context, data) {
})
}
function getOwnerData(sciper) {
return new Promise((resolve) => {
axios({
method: 'get',
url: '/user/data/' + sciper
})
.then(response => {
resolve(response.data)
})
})
}
export function exportData(context, data) {
axios({
method: 'get',
......
......@@ -9,7 +9,10 @@
:value="true"
type="info"
@click="$router.push('/applications')"
>Il y a <b>{{applicationNumber}}</b> nouvelles candidatures à traiter depuis votre dernière connexion.</v-alert>
>
Il y a
<b>{{applicationNumber}}</b> nouvelles candidatures à traiter depuis votre dernière connexion.
</v-alert>
</v-flex>
</v-layout>
</v-container>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment