Skip to content

Commit

Permalink
feat album creation & design
Browse files Browse the repository at this point in the history
  • Loading branch information
ikit committed Apr 24, 2022
1 parent 80a1186 commit b54f6a8
Show file tree
Hide file tree
Showing 7 changed files with 187 additions and 109 deletions.
4 changes: 4 additions & 0 deletions absg-client/src/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,10 @@ export const router = new VueRouter({
path: "albums",
component: () => import("./views/Photos/Albums.vue"),
},
{
path: "albums/auto",
component: () => import("./views/Photos/AlbumAuto.vue"),
},
{
path: "albums/:albumId",
component: () => import("./views/Photos/AlbumViewer.vue"),
Expand Down
5 changes: 3 additions & 2 deletions absg-client/src/views/Gtheque/Theques.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,10 +217,11 @@ export default {
types: [
{ key: "COMIC", label: "Bandes dessinées", icon: "fas fa-book" },
{ key: "BOOK", label: "Romans", icon: "fas fa-book" },
{ key: "WINE", label: "Cave", icon: "fas fa-wine-glass-alt" },
{ key: "MANGA", label: "Manga", icon: "fas fa-book" },
{ key: "VINYL", lavel: "Vinyls", icon: "fas fa-compact-disc" },
{ key: "BOARDGAME", label: "Jeux de sociétés", icon: "fas fa-chess-knight" },
{ key: "LEGO", label: "Légo", icon: "fas fa-cubes" }
{ key: "LEGO", label: "Légo", icon: "fas fa-cubes" },
{ key: "WINE", label: "Cave", icon: "fas fa-wine-glass-alt" },
],
selectedType: null,
filter: {
Expand Down
164 changes: 72 additions & 92 deletions absg-client/src/views/Photos/AlbumAuto.vue
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,84 @@
<template>
<v-container
fluid
grid-list-md
style="padding:0"
>
<v-data-iterator
:items="photos"
:items-per-page="filter.pageSize"
:page="filter.pageIndex"
:search="filter.search"
:expanded="expandedPhotos"
loading-text="Récupération des photos..."
no-data-text="Aucune photo à trier."
no-results-text="Aucune photo trouvée."
hide-default-footer
<div>
<div
:class="{ stickyHeader: $vuetify.breakpoint.lgAndUp, stickyHeaderSmall: !$vuetify.breakpoint.lgAndUp }"
style="padding: 15px"
>
<template #header>
<div :class="{ stickyHeader: $vuetify.breakpoint.lgAndUp, stickyHeaderSmall: !$vuetify.breakpoint.lgAndUp }">
<v-row
style="margin: 0"
align="center"
justify="center"
>
<v-text-field
v-model="filter.search"
prepend-icon="fa-search"
placeholder="Rechercher"
style="max-width: 300px;"
/>
<v-spacer />
<router-link
:to="{ path: `/photos/albums` }"
tag="button"
>
<v-icon>fas fa-home</v-icon>
<span
v-if="$vuetify.breakpoint.lgAndUp"
style="margin-left: 15px"
>Liste des albums</span>
</router-link>

<v-select
v-model="filter.saved"
:items="filter.saved"
label="Favoris"
prepend-icon="fas fa-bars"
style="max-width: 300px;"
@change="loadCollection($event)"
/>
<div
style="display: inline-block; margin-left: 15px"
>
<v-icon left>
fas fa-chevron-right
</v-icon> Album auto (configuration)
</div>
</div>

<v-spacer />
<v-card style="margin: 20px">
<v-card-title class="grey lighten-4">
Configuration de l'album
<div style="position: absolute; right: 15px; top: 10px">
<v-btn
icon
small
:disabled="isLoading"
@click="formerPage"
disabled
@click.stop="download()"
>
<v-icon>fa-chevron-left</v-icon>
<v-icon left>
fas fa-star
</v-icon>Favoris
</v-btn>
<span class="grey--text">
{{ filter.pageIndex }} / {{ numberOfPages }}
</span>
<v-btn
icon
small
:disabled="isLoading"
@click="nextPage"
>
<v-icon>fa-chevron-right</v-icon>
</v-btn>
</v-row>
<div
class="grey--text"
style="font-size: 0.9em; display: block; position: absolute; right: 15px; bottom: 0;"
>
{{ photos.length }} photos
</div>
</v-card-title>
<div style="display: flex">
<div class="grey lighten-4" style="width: 200px; padding: 10px; border-bottom: 1px solid #ddd">
<b>Personnes</b><br/>
<span style="opacity: 0.5; font-size: 0._em">Sélectionner les photos en fonction des personnes qui sont dessus.</span>
</div>
<div style="flex-grow: 1; padding: 10px; border-bottom: 1px solid #eee">
Tout le monde
</div>
</div>
<div style="display: flex">
<div class="grey lighten-4" style="width: 200px; padding: 10px; border-bottom: 1px solid #ddd">
<b>Lieux</b><br/>
<span style="opacity: 0.5; font-size: 0._em">Sélectionner les photos en fonction des lieux.</span>
</div>
<div style="flex-grow: 1; padding: 10px; border-bottom: 1px solid #eee">
Partout
</div>
</div>
<div style="display: flex">
<div class="grey lighten-4" style="width: 200px; padding: 10px; border-bottom: 1px solid #ddd">
<b>Date</b><br/>
<span style="opacity: 0.5; font-size: 0._em">Sélectionner les photos en fonction de la date de prise de vue</span>
</div>
<div style="flex-grow: 1; padding: 10px; border-bottom: 1px solid #eee">
N'importe quand
</div>
</div>
</template>

<template #default="props">
<v-container
fluid
grid-list-sm
>
<v-layout
row
wrap
>
<v-flex
v-for="p in props.items"
:key="p.id"
style="text-align: center;"
>
<div style="width: 250px; height: 250px; margin: auto;">
<div style="width: 250px; height: 250px; display: table-cell; text-align: center; vertical-align: middle;">
<img
:src="p.thumb"
class="thumb"
:alt="p.id"
@click="photosGalleryDisplay(p.index)"
>
</div>
</div>
</v-flex>
</v-layout>
</v-container>
</template>
</v-data-iterator>
</v-container>
<v-card-actions>
<v-spacer />
<v-btn>
<v-icon left>
fas fa-eye
</v-icon>
Voir les photos
</v-btn>
</v-card-actions>
</v-card>


</div>
</template>


Expand Down Expand Up @@ -146,7 +126,7 @@ export default {
methods: {
initFilters() {
console.log("init")
axios.get("/api/photos/albums/auto").then(response => {
axios.get("/api/albums/auto").then(response => {
console.log("isLoaded");
// let idx = 0;
// this.photos = parseAxiosResponse(response).map(e => ({ ...e, index: idx++ }));
Expand Down
102 changes: 88 additions & 14 deletions absg-client/src/views/Photos/Albums.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

<v-btn
style="position: absolute; right: 15px; top: 10px"
@click.stop="newAlbum()"
@click.stop="displayNewAlbum()"
>
<v-icon left>
fas fa-plus
Expand All @@ -33,26 +33,24 @@
<v-flex>
<router-link
:to="{path: `/photos/albums/auto`}"
style="text-decoration: none"
style="text-decoration: none; max-width: 200px"
>
<v-card>
<v-img
src="https://absolumentg.fr/files/photos/absg_0002/WEB/0002_1629750602581.jpg"
aspect-ratio="1.5"
>
<v-card width="350px">
<div style="height: 125px; text-align: center;">
<i class="fas fa-images" style="font-size: 80px; margin-top: 20px"></i>
<div class="albumInfo">
3769 photos disponnibles
</div>
</v-img>
</div>

<v-card-title
primary-title
style="position: relative"
>
Album automatique
Album perso
</v-card-title>
<v-card-subtitle>
Générer un album en filtrant parmi toutes les photos enregistrés
Générer un album automatiquement en filtrant parmi toutes les photos enregistrés
</v-card-subtitle>
</v-card>
</router-link>
Expand All @@ -62,18 +60,17 @@
<v-flex
v-for="album in albums"
:key="album.id"
style="max-width: 400px; margin: 15px"
>
<router-link
:to="{path: `/photos/albums/${album.id}`}"
style="text-decoration: none"
>
<v-card>
<v-card width="350px">
<v-img
:src="album.coverPhoto"
aspect-ratio="1.5"
>
<div class="albumInfo">
<div class="albumInfo" v-if="album.photos">
{{ album.photos.length }} photos
</div>
</v-img>
Expand All @@ -92,6 +89,58 @@
</v-flex>
</v-layout>
</v-container>


<v-dialog
v-model="newAlbum.displayed"
width="800px"
>
<v-card>
<v-card-title class="grey lighten-4">
Créer un nouveau album
</v-card-title>
<v-card style="margin: 15px">
<div style="position: relative;">
<v-icon style="position: absolute; top: 18px; left: 22px;">
fas fa-info
</v-icon>
<p style="margin-left: 50px; padding: 10px; font-style: italic">
Ce formulaire vous permet de créer un nouvel album photo qui sera partagé (et modifiable) avec tout les membres du site Absolument G.<br>
Dans un premier temps vous allez juste créer un album "vide" avec juste un titre et un sous-titre optionnel.
</p>
</div>
</v-card>

<v-text-field
v-model="newAlbum.title"
prepend-icon="fas fa-quote-left"
label="Titre de l'album"
/>

<v-text-field
v-model="newAlbum.comment"
prepend-icon="fas fa-quote-left"
label="Sous-titre"
/>

<v-card-actions>
<v-spacer />
<v-btn
text
color="primary"
@click="newAlbumValidation()"
>
Créer l'album et ajouter des photos
</v-btn>
<v-btn
text
@click="newAlbum.displayed = false;"
>
Annuler
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>

Expand All @@ -104,7 +153,13 @@ import { parseAxiosResponse } from '../../middleware/CommonHelper';
export default {
store,
data: () => ({
albums: []
albums: [],
newAlbum: {
displayed: false,
title: "",
comment: "",
isLoading: false
}
}),
mounted() {
this.listAlbums();
Expand Down Expand Up @@ -133,6 +188,25 @@ export default {
store.commit('photosGalleryReset', this.photos);
store.commit('photosGallerySetIndex', 0);
store.commit('photosGalleryDisplay');
},
displayNewAlbum() {
this.newAlbum.displayed = true;
this.newAlbum.isLoading = false;
this.newAlbum.title = "";
this.newAlbum.comment = "";
this.newAlbum.userGroup = "*";
},
newAlbumValidation() {
this.newAlbum.isLoading = true;
axios.post(`/api/albums/`, this.newAlbum).then(newAlbum => {
store.commit("onSnack", `Nouvel album "${this.newAlbum.title}" créé.`);
this.$router.push({ path: `photos/albums/${newAlbum.id}`})
}).catch( err => {
this.newAlbum.isLoading = false;
store.commit("onError", err);
});
}
}
}
Expand Down

0 comments on commit b54f6a8

Please sign in to comment.