add more features to create log#

src/views/CreateLog.vue

@@ -4,11 +4,20 @@
 			<h1>Create Log</h1>
 			<n-button type="primary">Generate</n-button>
 		</n-space>
-		{{start_slide_image}}
 
 		<n-space justify="space-around">
 			<n-input size="large" round placeholder="Photo Log title" v-model:value="title" @change="updateServerData" />
+			<n-space vertical>
+				<n-button size="small" @click="selectPhotoForStartSlide">Choose Cover Photo</n-button>
+				<n-image
+					width="100"
+					:src="getPhotoSrcById(start_slide_image)"
+				/>
+			</n-space>
+			<n-space vertical>
 				<n-date-picker v-model:value="date" type="date" @update:value="updateServerData" />
+				<n-checkbox v-model:checked="render_date">show date on first slide?</n-checkbox>
+			</n-space>
 			<n-button type="primary"
 				:disabled="!unsaved_changes"
 				:loading="currently_saving"
@@ -119,6 +128,20 @@
 			:max_select=max_photos_per_slide :or_less=true
 			:already-selected=slides[selectedSlide] />
 		
+		<n-modal
+			v-model:show="showPreventLeaveModal"
+			:mask-closable="true"
+			type="warning"
+			preset="dialog"
+			title="Unsaved Changes"
+			content="Are you sure that you want to leave this page. All unsaved data might be lost!"
+			transform-origin="center"
+			positive-text="Stay on page"
+			@negative-click="continueLeavePage"
+			@positive-click="showPreventLeaveModal = false; leaving_to_page = null;"
+			negative-text="Leave"
+		/>
+
 		<n-modal v-model:show="showCreateModal" :mask-closable=false>
 			<n-spin :show="isCreateLoading">
 				<n-card
@@ -151,6 +174,8 @@
 </template>
 
 <script>
+import {ref} from 'vue'
+
 import { useMeta } from 'vue-meta'
 import { useMessage } from 'naive-ui'
 
@@ -185,7 +210,6 @@ export default {
 			id: Number.parseInt(this.e),
 			title: '',
 			date: null,
-			render_date: false,
 			start_slide_image: null,
 			slides: [],
 
@@ -200,13 +224,16 @@ export default {
 			isCreateLoading: false,
 			isSavingServer: false,
 
+			showPreventLeaveModal: false,
+			leaving_to_page: null,
+
 			drag: false,
 		}
 	},
 	setup() {
 		useMeta({ title: 'Create a new Photo Log' })
 		const message = useMessage()
-		return { message }
+		return { message, render_date: ref(false) }
 	},
 	mounted() {
 		if (this.isValidId()) {
@@ -225,6 +252,8 @@ export default {
 	watch: {
 		title: function () { this.unsaved_changes = true },
 		date: function () { this.unsaved_changes = true},
+		render_date: function () { this.unsaved_changes = true},
+		start_slide_image: function () { this.unsaved_changes = true},
 		slides: {handler() { this.unsaved_changes = true}, deep: true},
 	},
 	computed: {
@@ -263,6 +292,12 @@ export default {
 		},
 		selectPhotosForSlide(slide_index) {
 			this.selectedSlide = slide_index
+			this.max_photos_per_slide = 3
+			this.selectPhotosModal = true
+		},
+		selectPhotoForStartSlide() {
+			this.selectedSlide = 'start_slide'
+			this.max_photos_per_slide = 1
 			this.selectPhotosModal = true
 		},
 		getPhotoSrcById(photo_id){
@@ -277,6 +312,14 @@ export default {
 			return null
 		},
 		addPhotosToSlide(selected_photos) {
+			if (this.selectedSlide === 'start_slide') {
+				if (selected_photos.length > 0)
+					this.start_slide_image = selected_photos[0]
+				else
+					this.start_slide_image = null
+				this.max_photos_per_slide = 3
+				return
+			}
 			this.slides[this.selectedSlide] = selected_photos
 		},
 		addSlideAfter(index) {
@@ -384,7 +427,11 @@ export default {
 			}).finally(() => {
 				this.isSavingServer = false
 			})
-		}
+		},
+		continueLeavePage() {
+			console.log(this.leaving_to_page)
+			this.$router.push(this.leaving_to_page)
+		},
 	},
 	beforeRouteUpdate (to) {
 		this.id = Number.parseInt(to.params.e)
@@ -397,14 +444,18 @@ export default {
 	},
 	// eslint-disable-next-line no-unused-vars
 	beforeRouteLeave (to, from) {
-		// prevent from leaving with unsaved changes
+		if (this.unsaved_changes && this.leaving_to_page === null) {
+			this.showPreventLeaveModal = true
+			this.leaving_to_page = to
+			return false
+		}
 	}
 }
 </script>
 
 <style scoped>
 .n-input {
-	min-width: 30em;
+	min-width: 25em;
 }
 
 .add-slide-between-button, .add-slide-between-button * {