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

@ -49,3 +49,7 @@ export function getPhotoGroups() {
export function getPhotosByGroup(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>
<div>
<n-space justify="space-between">
<n-space justify="space-around">
<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 justify="space-around">
@ -86,21 +93,19 @@
</template>
<n-image-group>
<n-space>
<draggable
:list="slide"
item-key="id"
@start="drag = true"
@end="drag = false"
>
<template #item="{element: photoid}">
<n-image
width="100"
:src="getPhotoSrcById(photoid)"
/>
</template>
</draggable>
</n-space>
<draggable
:list="slide"
item-key="id"
@start="drag = true"
@end="drag = false"
>
<template #item="{element: photoid}">
<n-image
width="100"
:src="getPhotoSrcById(photoid)"
/>
</template>
</draggable>
</n-image-group>
</n-card>
@ -188,6 +193,8 @@ import SaveFilled from '@vicons/material/SaveFilled'
import PhotoSelectModal from '@/components/PhotoSelectModal'
import { getPhotoLogPDF } from '@/api'
export default {
name: 'CreateLog',
components: {
@ -223,6 +230,7 @@ export default {
isLoadingData: false,
isCreateLoading: false,
isSavingServer: false,
isGeneratingPDF: false,
showPreventLeaveModal: false,
leaving_to_page: null,
@ -285,10 +293,16 @@ export default {
},
methods: {
saveChanges() {
this.currently_saving = true
this.updateServerData()
this.currently_saving = false
this.unsaved_changes = false
return new Promise((reject, resolve) => {
this.currently_saving = true
this.updateServerData().catch(() => {
reject()
}).finally(() => {
this.currently_saving = false
this.unsaved_changes = false
resolve()
})
})
},
selectPhotosForSlide(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() {
this.isSavingServer = true
return new Promise((reject, resolve) => {
this.isSavingServer = true
let server_slides = [...this.slides]
for (const idx in server_slides) {
server_slides[idx] = [
...server_slides[idx],
...new Array(
this.max_photos_per_slide-server_slides[idx].length)
.map(()=>null)]
}
let server_slides = [...this.slides]
for (const idx in server_slides) {
server_slides[idx] = [
...server_slides[idx],
...new Array(
this.max_photos_per_slide-server_slides[idx].length)
.map(()=>null)]
}
this.$store.dispatch('updatePhotoLogDetails', {
id: this.id,
title: this.title,
date: this.dateStr,
render_date: this.render_date,
start_slide_image: this.start_slide_image,
slides: server_slides
}).then(() => {
this.message.success('Changes saved')
}).catch((error) => {
this.message.error('There was a problem saving the changes: '+error.message)
}).finally(() => {
this.isSavingServer = false
this.$store.dispatch('updatePhotoLogDetails', {
id: this.id,
title: this.title,
date: this.dateStr,
render_date: this.render_date,
start_slide_image: this.start_slide_image,
slides: server_slides
}).then(() => {
this.message.success('Changes saved')
}).catch((error) => {
this.message.error('There was a problem saving the changes: '+error.message)
reject()
}).finally(() => {
this.isSavingServer = false
resolve()
})
})
},
continueLeavePage() {
@ -458,6 +489,10 @@ export default {
min-width: 25em;
}
.n-card .n-image {
margin-right: 2em;
}
.add-slide-between-button, .add-slide-between-button * {
margin: 0;
padding: 0;