add generate button

src/api/index.js

@@ -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+'/')
+}

src/views/CreateLog.vue

@@ -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,7 +93,6 @@
 					</template>
 
 					<n-image-group>
-						<n-space>
 						<draggable
 							:list="slide"
 							item-key="id"
@@ -100,7 +106,6 @@
 								/>
 							</template>
 						</draggable>
-						</n-space>
 					</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() {
+			return new Promise((reject, resolve) => {
 				this.currently_saving = true
-			this.updateServerData()
+				this.updateServerData().catch(() => {
+					reject()
+				}).finally(() => {
 					this.currently_saving = false
 					this.unsaved_changes = false
+					resolve()
+				})
+			})
 		},
 		selectPhotosForSlide(slide_index) {
 			this.selectedSlide = slide_index
@@ -401,7 +415,21 @@ 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() {
+			return new Promise((reject, resolve) => {
 				this.isSavingServer = true
 
 				let server_slides = [...this.slides]
@@ -424,8 +452,11 @@ export default {
 					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;