ZierleTraining/frontend-web
1
0
Fork 0
mirror of https://github.com/MarcZierle/photo-log-frontend.git synced 2025-04-07 21:14:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

add generate button

Browse Source
This commit is contained in:
MarcZierle 2022-01-20 12:10:02 +01:00
parent 11cda03429
commit 3b060df6ca
2 changed files with 82 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/index.js
View File

@ -48,4 +48,8 @@ export function getPhotoGroups() {
export function getPhotosByGroup(group_id) { export function getPhotosByGroup(group_id) {
return apiClient.get('/photos/?photogroup='+group_id) return apiClient.get('/photos/?photogroup='+group_id)
}
export function getPhotoLogPDF(id) {
return apiClient.get('/generatephotolog/'+id+'/')
} }

121
src/views/CreateLog.vue
View File

@ -1,8 +1,15 @@
<template> <template>
<div> <div>
<n-space justify="space-between"> <n-space justify="space-around">
<h1>Create Log</h1> <h1>Create Log</h1>
<n-button type="primary">Generate</n-button> <n-button
type="primary" style="margin: 1em;"
@click="getPDF"
:disabled="!isValidId"
:loading="isGeneratingPDF"
>
Save &amp; Generate
</n-button>
</n-space> </n-space>
<n-space justify="space-around"> <n-space justify="space-around">
@ -86,21 +93,19 @@
</template> </template>
<n-image-group> <n-image-group>
<n-space> <draggable
<draggable :list="slide"
:list="slide" item-key="id"
item-key="id" @start="drag = true"
@start="drag = true" @end="drag = false"
@end="drag = false" >
> <template #item="{element: photoid}">
<template #item="{element: photoid}"> <n-image
<n-image width="100"
width="100" :src="getPhotoSrcById(photoid)"
:src="getPhotoSrcById(photoid)" />
/> </template>
</template> </draggable>
</draggable>
</n-space>
</n-image-group> </n-image-group>
</n-card> </n-card>
@ -188,6 +193,8 @@ import SaveFilled from '@vicons/material/SaveFilled'
import PhotoSelectModal from '@/components/PhotoSelectModal' import PhotoSelectModal from '@/components/PhotoSelectModal'
import { getPhotoLogPDF } from '@/api'
export default { export default {
name: 'CreateLog', name: 'CreateLog',
components: { components: {
@ -223,6 +230,7 @@ export default {
isLoadingData: false, isLoadingData: false,
isCreateLoading: false, isCreateLoading: false,
isSavingServer: false, isSavingServer: false,
isGeneratingPDF: false,
showPreventLeaveModal: false, showPreventLeaveModal: false,
leaving_to_page: null, leaving_to_page: null,
@ -285,10 +293,16 @@ export default {
}, },
methods: { methods: {
saveChanges() { saveChanges() {
this.currently_saving = true return new Promise((reject, resolve) => {
this.updateServerData() this.currently_saving = true
this.currently_saving = false this.updateServerData().catch(() => {
this.unsaved_changes = false reject()
}).finally(() => {
this.currently_saving = false
this.unsaved_changes = false
resolve()
})
})
}, },
selectPhotosForSlide(slide_index) { selectPhotosForSlide(slide_index) {
this.selectedSlide = slide_index this.selectedSlide = slide_index
@ -401,31 +415,48 @@ export default {
} }
}) })
}, },
getPDF() {
this.saveChanges().then(() => {
this.isGeneratingPDF = true
getPhotoLogPDF(this.id).then((response) => {
let url = response.data.pdf
window.open(url, '_blank')
}).catch((error) => {
this.message.error('Cannot generate PDF file: ' + error)
}).finally(() => {
this.isGeneratingPDF = false
})
})
},
updateServerData() { updateServerData() {
this.isSavingServer = true return new Promise((reject, resolve) => {
this.isSavingServer = true
let server_slides = [...this.slides] let server_slides = [...this.slides]
for (const idx in server_slides) { for (const idx in server_slides) {
server_slides[idx] = [ server_slides[idx] = [
...server_slides[idx], ...server_slides[idx],
...new Array( ...new Array(
this.max_photos_per_slide-server_slides[idx].length) this.max_photos_per_slide-server_slides[idx].length)
.map(()=>null)] .map(()=>null)]
} }
this.$store.dispatch('updatePhotoLogDetails', { this.$store.dispatch('updatePhotoLogDetails', {
id: this.id, id: this.id,
title: this.title, title: this.title,
date: this.dateStr, date: this.dateStr,
render_date: this.render_date, render_date: this.render_date,
start_slide_image: this.start_slide_image, start_slide_image: this.start_slide_image,
slides: server_slides slides: server_slides
}).then(() => { }).then(() => {
this.message.success('Changes saved') this.message.success('Changes saved')
}).catch((error) => { }).catch((error) => {
this.message.error('There was a problem saving the changes: '+error.message) this.message.error('There was a problem saving the changes: '+error.message)
}).finally(() => { reject()
this.isSavingServer = false }).finally(() => {
this.isSavingServer = false
resolve()
})
}) })
}, },
continueLeavePage() { continueLeavePage() {
@ -458,6 +489,10 @@ export default {
min-width: 25em; min-width: 25em;
} }
.n-card .n-image {
margin-right: 2em;
}
.add-slide-between-button, .add-slide-between-button * { .add-slide-between-button, .add-slide-between-button * {
margin: 0; margin: 0;
padding: 0; padding: 0;