add photo tags and template management

.eslintrc.json

@@ -1,7 +1,8 @@
 {
     "env": {
         "browser": true,
-        "es6": true
+        "es6": true,
+		"node": true
     },
     "extends": [
         "eslint:recommended",

package.json

@@ -8,12 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@tailwindcss/postcss7-compat": "^2.2.17",
+    "autoprefixer": "^9.8.8",
-    "autoprefixer": "^9",
     "axios": "^0.24.0",
     "babel-eslint": "^10.1.0",
     "core-js": "^3.6.5",
-    "postcss": "^7",
+    "postcss": "^7.0.39",
+    "tailwind-children": "^0.5.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
     "vue": "^3.0.0",
     "vue-advanced-cropper": "^2.8.0",
@@ -49,6 +49,6 @@
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
     "vfonts": "^0.1.0",
-    "vue-cli-plugin-tailwind": "~2.2.18"
+    "vue-cli-plugin-tailwind": "~3.0.0"
   }
 }

src/App.vue

@@ -38,7 +38,8 @@ export default defineComponent({
 	computed: {
 		doesntNeedNav() {
 			let currentPage = this.$route.name
-			return  !(currentPage == 'Home'  || this.$route.name == 'CameraCapture')
+			//return  !(currentPage == 'Home'  || currentPage == 'CameraCapture')
+			return  !(currentPage == 'CameraCapture')
 		}
 	}
 })

src/api/index.js

@@ -14,6 +14,10 @@ export function getPhotoLogList() {
 	return apiClient.get('/photologs/')
 }
 
+export function getPhotoLogTemplateList() {
+	return apiClient.get('/photolog/templates/')
+}
+
 export function getPhotoLog(id) {
 	return apiClient.get('/photolog/'+id+'/')
 }
@@ -22,7 +26,17 @@ export function addNewPhotoLog(title, date) {
 	return apiClient.post('/addphotolog/', {
 		title,
 		date: date,
-		render_date: true,
+		render_date: false,
+		start_slide_image: null,
+		slides: []
+	})
+}
+
+export function addNewPhotoLogTemplate(title, date) {
+	return apiClient.post('/photolog/template/', {
+		title,
+		date: date,
+		render_date: false,
 		start_slide_image: null,
 		slides: []
 	})
@@ -38,14 +52,32 @@ export function updatePhotoLog({id, title, date, render_date, start_slide_image,
 	})
 }
 
+export function updateLogTemplate({id, title, date, render_date, start_slide_image, slides}) {
+	return apiClient.put('/photolog/template/' + id + '/', {
+		title,
+		date,
+		render_date,
+		start_slide_image,
+		slides
+	})
+}
+
 export function deletePhotoLog(id) {
 	return apiClient.delete('/deletephotolog/'+id+'/')
 }
 
+export function deletePhotoLogTemplate(id) {
+	return apiClient.delete('/photolog/template/'+id+'/')
+}
+
 export function getPhotoGroups() {
 	return apiClient.get('/photogroups/')
 }
 
+export function getPhotoTags() {
+	return apiClient.get('/phototags/')
+}
+
 export function getPhotosByGroup(group_id) {
 	return apiClient.get('/photos/?photogroup='+group_id)
 }
@@ -61,7 +93,14 @@ export function addNewPhotoGroup(name, date) {
 	})
 }
 
-export function addNewPhoto(original_image, cropped_image=null, group_id=null, ocr_text=null, legacy_id=null) {
+export function addNewPhotoTag(name, color) {
+	return apiClient.post('/phototag/', {
+		name,
+		color
+	})
+}
+
+export function addNewPhoto(original_image, cropped_image=null, group_id=null, ocr_text=null, tag_id=null, legacy_id=null) {
 	const data = new FormData()
 
 	data.append('original_image', original_image, original_image.name)
@@ -72,6 +111,10 @@ export function addNewPhoto(original_image, cropped_image=null, group_id=null, o
 		data.append('group', group_id)
 	if (ocr_text !== null)
 		data.append('ocr_text', ocr_text)
+	if (tag_id === null) {
+		tag_id = 1
+	}
+	data.append('tag', tag_id)
 	if (legacy_id !== null)
 		data.append('legacy_id', legacy_id)
 

src/components/NavBar.vue

@@ -1,8 +1,11 @@
 <template>
-	<nav>
+	<nav class="flex flex-row static">
 		<router-link :to="{name: 'Home'}">Home</router-link>
+		<router-link :to="{name: 'ManagePhotos'}">Photos</router-link>
 		<router-link :to="{name: 'LogsList'}">All Logs</router-link>
-		<router-link :to="{name: 'CreateLog'}">+ New</router-link>
+		<router-link :to="{name: 'CreateLog'}">+ New Log</router-link>
+		<router-link :to="{name: 'LogTemplatesList'}">All Templates</router-link>
+		<router-link :to="{name: 'CreateLogTemplate'}">+ New Template</router-link>
 	</nav>
 </template>
 
@@ -16,8 +19,27 @@ export default {
 </script>
 
 <style scoped>
-nav { 
+nav {
 	width: 100%;
-	border-bottom: 1px solid gray;
+	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
+	margin-bottom: 1em;
+	background: rgba(255,255,255,0.2);
+	backdrop-filter: blur(10px);
+}
+
+a {
+	padding: 0.75em;
+	transition: all 0.15s ease-in-out;
+	border-right: 1px solid #eee;
+}
+
+.router-link-exact-active,
+a:hover {
+	background-color: seagreen;
+	color: white;
+}
+
+.router-link-exact-active {
+	font-weight: bold;
 }
 </style>

src/components/PhotoCropper.vue

@@ -155,9 +155,9 @@ export default {
 
 			return [top_left, top_right, bottom_right, bottom_left]
 		},
-		change({ coordinates, canvas }) {
+		change({ coordinates, /*canvas*/ }) {
 			try {
-				this.preview_data_url = canvas.toDataURL()
+				//this.preview_data_url = canvas.toDataURL()
 				this.bbox = this.coordinates_to_bbox(coordinates)
 			} catch (e) {return}
 		},

src/components/PhotoItem.vue

@@ -43,6 +43,13 @@
 						</n-button>
 					</div>
 
+					<div class="options-item" v-if="can_change_tag">
+						<n-button text @click="$emit('update:tag')">
+							<template #icon><n-icon><MdPricetag /></n-icon></template>
+							Change Tag
+						</n-button>
+					</div>
+
 					<div class="options-item" v-if="can_delete">
 						<n-button text type="error" @click="$emit('update:delete')">
 							<template #icon><n-icon><TrashBinSharp /></n-icon></template>
@@ -60,6 +67,7 @@ import TrashBinSharp from '@vicons/ionicons5/TrashBinSharp'
 import SortFilled from '@vicons/material/SortFilled'
 import CropRotateFilled from '@vicons/material/CropRotateFilled'
 import Check from '@vicons/fa/Check'
+import MdPricetag from '@vicons/ionicons4/MdPricetag'
 
 
 export default {
@@ -69,6 +77,7 @@ export default {
 		SortFilled,
 		CropRotateFilled,
 		Check,
+		MdPricetag,
 	},
 	props: {
 		src: {
@@ -91,6 +100,11 @@ export default {
 			required: false,
 			default: false,
 		},
+		can_change_tag: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
 		can_crop: {
 			type: Boolean,
 			required: false,
@@ -117,6 +131,7 @@ export default {
 		'update:delete',
 		'update:crop',
 		'update:ocr',
+		'update:tag',
 		'update:group',
 	],
 	data() { 
@@ -124,7 +139,7 @@ export default {
 			hover: false,
 			selected: false,
 
-			isImgLoaded: false,
+			isImgLoaded: true,
 			imgSrcObj: null,
 		}
 	},
@@ -153,6 +168,7 @@ export default {
 				this.can_change_group,
 				this.can_crop,
 				this.can_change_ocr,
+				this.can_change_tag,
 				this.can_delete
 			].filter(Boolean).length * 35
 		},

src/components/PhotoSelectModal.vue

@@ -31,7 +31,7 @@
 								<PhotoItem
 									v-for="photo in photos[group.id]"
 									:key="photo.id"
-									width="150"
+									:width="150"
 									:src="photo.cropped_image !== null ? photo.cropped_image : photo.original_image"
 									:can_select="true"
 									:init_selection="is_photo_selected(photo.id)"

src/main.js

@@ -17,7 +17,7 @@ var app = createApp(App).use(store).use(router)
 app.use(createMetaManager())
 app.use(metaPlugin)
 
-app.use(i18n)
+//app.use(i18n)
 app.use(naive)
 
 loadAndSetLocale(i18n, 'en')

src/router/index.js

@@ -7,7 +7,9 @@ import {
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/Home.vue'
 import LogsList from '../views/LogsList.vue'
+import LogTemplatesList from '../views/LogTemplatesList.vue'
 import CreateLog from '../views/CreateLog.vue'
+import CreateLogTemplate from '../views/CreateLogTemplate.vue'
 import CameraCapture from '../views/CameraCapture.vue'
 import ManagePhotos from '../views/ManagePhotos.vue'
 import DevView from '../views/DevView.vue'
@@ -35,6 +37,23 @@ const routes = [
 			return {e}
 		}
 	},
+	{
+		path: '/templates',
+		name: 'LogTemplatesList',
+		component: LogTemplatesList
+	},
+	{
+		path: '/templates/create/:e?',
+		name: 'CreateLogTemplate',
+		component: CreateLogTemplate,
+		props: (route) => {
+			const e = Number.parseInt(route.params.e)
+			if (Number.isNaN(e)) {
+				return ''
+			}
+			return {e}
+		}
+	},
 	{
 		path: '/capture',
 		name: 'CameraCapture',

src/store/index.js

@@ -1,11 +1,16 @@
 import { createStore } from 'vuex'
 import { 
 	getPhotoLogList,
+	getPhotoLogTemplateList,
 	deletePhotoLog,
+	deletePhotoLogTemplate,
 	addNewPhotoLog,
+	addNewPhotoLogTemplate,
 	getPhotoLog,
 	updatePhotoLog,
+	updateLogTemplate,
 	getPhotoGroups,
+	getPhotoTags,
 	getPhotosByGroup,
 	updatePhoto,
 	deletePhoto,
@@ -15,14 +20,19 @@ import {
 export default createStore({
 	state: {
 		photoLogList: [],
+		photoLogTemplateList: [],
 		photoLogs: [],
 		photoGroups: null,
+		photoTags: null,
 		photos: []
 	},
 	mutations: {
 		SET_PHOTO_LOG_LIST(state, newPhotoLogList) {
 			state.photoLogList = newPhotoLogList
 		},
+		SET_PHOTO_LOG_TEMPLATE_LIST(state, newPhotoLogTemplateList) {
+			state.photoLogTemplateList = newPhotoLogTemplateList
+		},
 		SET_PHOTO_LOG(state, photoLog) {
 			let log_index = state.photoLogs.findIndex(log => log.id === photoLog.id)
 			if (log_index > -1) {
@@ -31,13 +41,28 @@ export default createStore({
 				state.photoLogs.push(photoLog)
 			}
 		},
+		SET_PHOTO_LOG_TEMPLATE(state, photoLogtemplate) {
+			let log_index = state.photoLogTemplateList.findIndex(log => log.id === photoLogtemplate.id)
+			if (log_index > -1) {
+				state.photoLogTemplateList[log_index] = photoLogtemplate
+			} else {
+				state.photoLogTemplateList.push(photoLogtemplate)
+			}
+		},
 		REMOVE_PHOTO_LOG(state, id) {
 			let log_index = state.photoLogList.findIndex(log => log.id === id)
 			state.photoLogList.splice(log_index, 1)
 		},
+		REMOVE_PHOTO_LOG_TEMPLATE(state, id) {
+			let log_index = state.photoLogTemplateList.findIndex(log => log.id === id)
+			state.photoLogTemplateList.splice(log_index, 1)
+		},
 		SET_PHOTO_GROUPS(state, groups) {
 			state.photoGroups = groups
 		},
+		SET_PHOTO_TAGS(state, tags) {
+			state.photoTags = tags
+		},
 		SET_PHOTOS_IN_GROUP(state, {group_id, photos}) {
 			if (group_id in state.photos) {
 				state.photos.group_id = photos
@@ -88,6 +113,17 @@ export default createStore({
 				})
 			})
 		},
+		loadPhotoLogTemplateList({commit}) {
+			return new Promise((resolve, reject) => {
+				getPhotoLogTemplateList().then((response) => {
+					commit('SET_PHOTO_LOG_TEMPLATE_LIST', response.data)
+					resolve()
+				}).catch((error) => {
+					console.log(error)
+					reject()
+				})
+			})
+		},
 		loadPhotoLog({commit}, id) {
 			return new Promise((resolve, reject) => {
 				getPhotoLog(id).then((response) => {
@@ -106,6 +142,13 @@ export default createStore({
 				console.log(error)
 			})
 		},
+		deletePhotoLogTemplate({commit}, id) {
+			deletePhotoLogTemplate(id).then(() => {
+				commit('REMOVE_PHOTO_LOG_TEMPLATE', id)
+			}).catch((error) => {
+				console.log(error)
+			})
+		},
 		addNewPhotoLog({dispatch}, {title, date}) {
 			return new Promise((resolve, reject) => {
 				addNewPhotoLog(title, date).then((response) => {
@@ -117,12 +160,29 @@ export default createStore({
 				})
 			})
 		},
+		addNewPhotoLogTemplate({dispatch}, {title, date}) {
+			return new Promise((resolve, reject) => {
+				addNewPhotoLogTemplate(title, date).then((response) => {
+					dispatch('loadPhotoLogTemplateList')
+					resolve(response.data.id)
+				}).catch((error) => {
+					console.log(error)
+					reject(error)
+				})
+			})
+		},
 		updatePhotoLogDetails({commit}, photolog) {
 			if (photolog !== null) {
 				commit('SET_PHOTO_LOG', photolog)
 				return updatePhotoLog(photolog)
 			}
 		},
+		updatePhotoLogTemplate({commit}, photologtemplate) {
+			if (photologtemplate !== null) {
+				commit('SET_PHOTO_LOG_TEMPLATE', photologtemplate)
+				return updateLogTemplate(photologtemplate)
+			}
+		},
 		loadPhotoGroups({commit}) {
 			return new Promise((resolve, reject) => {
 				getPhotoGroups().then((response) => {
@@ -133,6 +193,16 @@ export default createStore({
 				})
 			})
 		},
+		loadPhotoTags({commit}) {
+			return new Promise((resolve, reject) => {
+				getPhotoTags().then((response) => {
+					commit('SET_PHOTO_TAGS', response.data)
+					resolve(response.data)
+				}).catch((error) => {
+					reject(error)
+				})
+			})
+		},
 		loadPhotosInGroup({commit}, group_id) {
 			return new Promise((resolve, reject) => {
 				getPhotosByGroup(group_id).then((response) => {
@@ -191,6 +261,13 @@ export default createStore({
 			}
 			return null
 		},
+		photoLogTemplateById: (state) => (id) =>  {
+			let log = state.photoLogTemplateList.filter(log => log.id == id)
+			if (log.length > 0) {
+				return log[0]
+			}
+			return null
+		},
 		photoLogDetailsById: (state) => (id) =>  {
 			let log = state.photoLogs.filter(log => log.id == id)
 			if (log.length > 0) {
@@ -204,6 +281,9 @@ export default createStore({
 		photos (state) {
 			return state.photos
 		},
+		photoTags(state) {
+			return state.photoTags
+		},
 		photoById: (state) => (id) =>  {
 			for (const group_idx in state.photos) {
 				let found_photo = state.photos[group_idx].filter(p => p.id == id)

src/views/CameraCapture.vue

@@ -21,7 +21,7 @@
 			</div>
 
 			<div id="take_photo">
-				<n-space justify-content="center">
+				<div class="grid grid-cols-2">
 					<label for="camera_file_input">
 						<span :class="{disabled: !selected_group, camera_btn: true}">Take new photo</span>
 						<input
@@ -33,11 +33,22 @@
 							:disabled="!selected_group"
 						/>
 					</label>
-					<n-button v-if="selected_group && photo_src"
+					
+					<n-button 
+						v-if="selected_group && photo_src"
 						type="info" size="large" round
 						@click="uploadPhoto"
 					>Upload</n-button>
-				</n-space>
+
+					<div id="tag_select" v-if="selected_group && photo_src" class="col-span-2 grid grid-cols-10">
+						<n-select v-model:value="selected_tag" :options="tags" size="large" class="col-span-8" />
+						<div class="col-span-2 content-start">
+							<n-button secondary type="primary" @click="showAddTagModal = true" size="large" style="margin-top: 0 !important;">
+								<n-icon><TagEdit /></n-icon>
+							</n-button>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 
@@ -59,6 +70,25 @@
 				</n-space>
 			</template>
 		</n-modal>
+
+		<n-modal
+			v-model:show="showAddTagModal"
+			:mask-closable="true"
+			transform-origin="center"
+			preset="card"
+			title="Add new Tag"
+			:bordered="false"
+			size="huge">
+
+			<n-input placeholder="Enter tag name" size="large" v-model:value="new_tag_name" />
+
+			<template #footer>
+				<n-space justify-content="end">
+					<n-button size="large" @click="showAddTagModal = false">Cancel</n-button>
+					<n-button type="primary" size="large" @click="addNewTag">Add Tag</n-button>
+				</n-space>
+			</template>
+		</n-modal>
 	</n-config-provider>
 </template>
 
@@ -69,13 +99,15 @@ import {darkTheme} from 'naive-ui'
 
 import CreateNewFolderRound from '@vicons/material/CreateNewFolderRound'
 import HandPointUp from '@vicons/fa/HandPointUp'
+import TagEdit from '@vicons/carbon/TagEdit'
 
-import { getPhotoGroups, addNewPhotoGroup, addNewPhoto, cropPhoto } from '@/api'
+import { getPhotoGroups, getPhotoTags, addNewPhotoGroup, addNewPhotoTag, addNewPhoto, cropPhoto } from '@/api'
 
 export default {
 	components: {
 		CreateNewFolderRound,
 		HandPointUp,
+		TagEdit,
 	},
 	setup() {
 		useMeta({
@@ -92,7 +124,12 @@ export default {
 			selected_group: null,
 			showAddGroupModal: false,
 
+			tags: [],
+			selected_tag: null,
+			showAddTagModal: false,
+
 			new_group_name: '',
+			new_tag_name: '',
 
 			isPhotoTaken: false,
 			photo_src: '',
@@ -102,7 +139,7 @@ export default {
 		}
 	},
 	beforeMount() {
-		this.fetchPhotoGroups()
+		this.fetchPhotoGroupsAndTags()
 	},
 	mounted() {
 		window.scrollTo(0, 1)
@@ -116,7 +153,7 @@ export default {
 		},
 	},
 	methods: {
-		fetchPhotoGroups() {
+		fetchPhotoGroupsAndTags() {
 			this.groups = []
 			getPhotoGroups().then((response) => {
 				let data = response.data
@@ -130,6 +167,19 @@ export default {
 			}).catch((error)=>{
 				this.message.error('There was an error while fetching photo groups: '+error)
 			})
+
+			this.tags = []
+			getPhotoTags().then((response) => {
+				let data = response.data
+				for(const data_idx in data) {
+					this.tags.push({
+						label: data[data_idx].name,
+						value: data[data_idx].id,
+					})
+				}
+			}).catch((error)=>{
+				this.message.error('There was an error while fetching photo tags: '+error)
+			})
 		},
 		sortPhotoGroupsByDate(groups) {
 			if (groups !== null && groups.length > 0) {
@@ -168,6 +218,29 @@ export default {
 				this.new_group_name = ''
 			})
 		},
+		addNewTag() {
+			if (this.new_tag_name.length == 0) {
+				this.message.error('Please enter a new tag name')
+				return
+			}
+
+			let r = Math.floor(Math.random() * 256).toString(16)
+			let g = Math.floor(Math.random() * 256).toString(16)
+			let b = Math.floor(Math.random() * 256).toString(16)
+
+			let color = '#' + r + g + b
+
+			addNewPhotoTag(this.new_tag_name, color).then((response) => {
+				this.message.success('Added tag '+this.new_tag_name)
+				this.fetchPhotoGroupsAndTags()
+				this.showAddTagModal = false
+				this.selected_tag = response.data.id
+			}).catch((error)=>{
+				this.message.error('There was an error while adding the tag: '+error)
+			}).finally(() => {
+				this.new_tag_name = ''
+			})
+		},
 		previewImage(event) {
 			let files = event.target.files
 			this.photo_file = files[0]
@@ -176,12 +249,13 @@ export default {
 		uploadPhoto() {
 			this.isUploading = true
 			
-			addNewPhoto(this.photo_file, null, this.selected_group).then((response) => {
+			addNewPhoto(this.photo_file, null, this.selected_group, null, this.selected_tag).then((response) => {
 				this.message.success('Done!')
 
 				this.isUploading = false
 				this.photo_src = ''
 				this.photo_file = null
+				this.selected_tag = null
 
 				setTimeout(() => {
 					cropPhoto(response.data.id, 'auto').then(()=>{
@@ -229,6 +303,10 @@ html, body {
 	height: 7.5vh;
 }
 
+#tag_select {
+	height: 7.5vh;
+}
+
 #prompt_select {
 	display: flex;
 	flex-direction: column;

src/views/CreateLog.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<n-space justify="space-around">
-			<h1>Create Log</h1>
+			<h1 class="font-bold text-2xl m-4 my-6">Create Log</h1>
 			<n-button
 				type="primary" style="margin: 1em;"
 				@click="getPDF"

src/views/CreateLogTemplate.vue

@@ -0,0 +1,644 @@
+<template>
+	<div>
+		<n-space justify="space-around">
+			<h1 class="font-bold text-2xl m-4 my-6">Create Log Template</h1>
+			<n-button type="primary"
+				:disabled="!unsaved_changes"
+				:loading="currently_saving"
+				@click="saveChanges"
+				>
+				<template #icon>
+					<n-icon><SaveFilled /></n-icon>
+				</template>
+				{{saving_info}}
+			</n-button>
+		</n-space>
+
+		<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-space>
+
+		<n-divider title-placement="center">Slides</n-divider>
+
+		<p class="text-sm m-6 italic" style="color: #ccc;">HINT: Double click on a photo slot to remove it.</p>
+
+		<n-space justify="center">
+		<n-space vertical style="max-width: 80vw; width: 600px;">
+			<n-card
+				class="add-slide-between-button:hover"
+				@click="addSlideAfter(-1)">
+				<n-space justify="center">
+					<n-button circle secondary type="info">
+						<n-icon><LibraryAddRound /></n-icon>
+					</n-button>
+				</n-space>
+			</n-card>
+			
+			<draggable
+				:list="slides"
+				item-key="id"
+				style="width: 100%;"
+			>
+				<template #item="{ element: slide, index }">
+
+				
+			<div>
+				<n-card
+					:title="'#'+(index+1)" class=".move-slide-handle">
+
+					<template #header-extra>
+						<n-space>
+							<n-button round secondary type="default" @click="selectPhotoTagForSlide(index)">
+								<template #icon>
+									<n-icon><MdPricetag /></n-icon>
+								</template>
+								Add Photo Slot
+							</n-button>
+
+							<n-button round secondary type="success" @click="selectPhotosForSlide(index)">
+								<template #icon>
+									<n-icon><AddPhotoAlternateOutlined /></n-icon>
+								</template>
+								Select Photos
+							</n-button>
+
+							<n-popconfirm
+								type="error"
+								>
+								<template #trigger>
+								<n-button
+									circle secondary
+									type="error"
+									>
+									<n-icon><TrashBinSharp /></n-icon>
+								</n-button>
+								</template>
+								Delete slide?
+								<template #action>
+									<n-button size="small" type="error" @click="removeSlide(index)"> Delete </n-button>
+								</template>
+							</n-popconfirm>
+						</n-space>
+					</template>
+
+					<n-image-group>
+						<draggable
+							:list="slide"
+							item-key="id"
+							@start="drag = true"
+							@end="drag = false"
+						>
+							<template #item="{element: slide_item, index: item_index}">
+								<n-image
+									style="cursor: move; vertical-align: middle;"
+									v-if="slide_item.type == 'photo'"
+									width="100"
+									:src="getPhotoSrcById(slide_item.id)"
+								/>
+								<div
+									v-else-if="slide_item.type == 'tag'"
+									class="tag-slot"
+									:style="tag_style(slide_item.id)"
+									@dblclick="removeTagFromSlide(index, item_index)"
+								>
+									<p>{{getPhotoTagById(slide_item.id).name}}</p>
+								</div>
+							</template>
+						</draggable>
+					</n-image-group>					
+				</n-card>
+
+				<n-card
+					class="add-slide-between-button"
+					@click="addSlideAfter(index)">
+					<n-space justify="center">
+						<n-button circle secondary type="info">
+							<n-icon><LibraryAddRound /></n-icon>
+						</n-button>
+					</n-space>
+				</n-card>
+				</div>
+			</template>
+			</draggable>
+			
+		</n-space>
+		</n-space>
+
+		<PhotoSelectModal
+			v-model:showSelection="selectPhotosModal"
+			@closed="selectPhotosModal=false"
+			@selected="addPhotosToSlide"
+			:max_select=max_photos_per_slide :or_less=true
+			:already-selected=getPhotosInSlide(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="showSelectTagModal"
+			:mask-closable="true" >
+			<n-card
+				style="width: 400px;"
+				title="Add Photo Slot"
+				:bordered="false"
+				role="dialog"
+				aria-modal="true"
+				>
+				<n-select v-model:value="selected_tag_id" :options="tags_select_options" />
+				<template #footer>
+					<n-space justify="end">
+						<n-button @click="showSelectTagModal=false">Cancel</n-button>
+						<n-button type="success" @click="addSlotToSlide">Select Tag</n-button>
+					</n-space>
+				</template>
+			</n-card>
+		</n-modal>
+
+		<n-modal v-model:show="showCreateModal" :mask-closable=false>
+			<n-spin :show="isCreateLoading">
+				<n-card
+					style="width: 600px;"
+					title="Create a new Photo Log Template"
+					:bordered="false"
+					size="huge"
+					role="dialog"
+					aria-modal="true"
+					>
+
+					<n-form-item label="What's the name of the photo log template?" path="title">
+						<n-input v-model:value="title" type="text" placeholder="Photo Log Template title" />
+					</n-form-item>
+					<!--
+					<n-form-item label="When did the training take place?" path="date">
+						<n-date-picker v-model:value="date" type="date" clearable />
+					</n-form-item>
+					-->
+
+					<template #footer>
+						<n-space justify="end">
+							<n-button @click="navigateBack">Cancel</n-button>
+							<n-button @click="createNewPhotoLogTemplate" type="success">Create</n-button>
+						</n-space>
+					</template>
+				
+				</n-card>
+			</n-spin>
+		</n-modal>
+	</div>
+</template>
+
+<script>
+import {ref} from 'vue'
+
+import { useMeta } from 'vue-meta'
+import { useMessage } from 'naive-ui'
+
+import draggable from 'vuedraggable'
+
+import TrashBinSharp from '@vicons/ionicons5/TrashBinSharp'
+import LibraryAddRound from '@vicons/material/LibraryAddRound'
+import AddPhotoAlternateOutlined from '@vicons/material/AddPhotoAlternateOutlined'
+import SaveFilled from '@vicons/material/SaveFilled'
+import MdPricetag from '@vicons/ionicons4/MdPricetag'
+
+import PhotoSelectModal from '@/components/PhotoSelectModal'
+
+export default {
+	name: 'CreateLog',
+	components: {
+		draggable,
+		PhotoSelectModal,
+		TrashBinSharp,
+		LibraryAddRound,
+		AddPhotoAlternateOutlined,
+		SaveFilled,
+		MdPricetag,
+	},
+	props: {
+		e: {
+			type: Number,
+			required: false,
+			default: -1,
+		}
+	},
+	data() {
+		return {
+			id: Number.parseInt(this.e),
+			title: '',
+			date: null,
+			start_slide_image: null,
+			slides: [],
+
+			slide_for_adding_slot: null,
+			selected_tag_id: null,
+			showSelectTagModal: false,
+
+			selectPhotosModal: false,
+			selectedSlide: null,
+			max_photos_per_slide: 3,
+
+			unsaved_changes: false,
+			currently_saving: false,
+			
+			isLoadingData: false,
+			isCreateLoading: false,
+			isSavingServer: false,
+			isGeneratingPDF: false,
+
+			showPreventLeaveModal: false,
+			leaving_to_page: null,
+
+			drag: false,
+		}
+	},
+	setup() {
+		useMeta({ title: 'Create a new Photo Log Template' })
+		const message = useMessage()
+		return { message, render_date: ref(false) }
+	},
+	mounted() {
+		if (this.isValidId()) {
+			this.isLoadingData = true
+
+			this.$store.dispatch('loadPhotoGroups').then(() => {
+				this.photoGroups = this.$store.getters.photoGroups
+				this.$store.dispatch('loadPhotosInAllGroups')
+			})
+
+			this.findPhotoLogTemplate().then(() => {
+				this.updateLocalData()
+			})
+		}
+
+		this.$store.dispatch('loadPhotoTags')
+	},
+	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: {
+		saving_info() {
+			if (!this.unsaved_changes)
+				return 'No changes made'
+			if (this.currently_saving)
+				return 'Saving...'
+			return 'Save Changes'
+		},
+		photos() {
+			return this.$store.getters.photos
+		},
+		tags() {
+			return this.$store.getters.photoTags
+		},
+		showCreateModal () {
+			return !this.isValidId()
+		},
+		dateStr () {
+			if (this.date !== null) {
+				let date_obj = new Date(this.date)
+				let month = Number.parseInt(date_obj.getMonth())+1
+				month = month < 10 ? '0' + month : month
+				let day = Number.parseInt(date_obj.getDate())
+				day = day < 10 ? '0' + day : day
+				let date_str = date_obj.getFullYear() + '-' + month + '-' + day
+				return date_str
+			}
+			return '1970-01-01'
+		},
+		tags_select_options() {
+			if (this.tags != null && this.tags.length > 0) {
+				let options = []
+				for (const idx in this.tags) {
+					options.push({
+						value: this.tags[idx].id,
+						label: this.tags[idx].name,
+					})
+				}
+				return options
+			}
+			return []
+		},
+	},
+	methods: {
+		saveChanges() {
+			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
+			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){
+			for (const index in this.photos) {
+				let group = this.photos[index]
+				let photo = group.filter((photo) => photo.id == photo_id)
+				if (photo.length > 0) {
+					photo = photo[0]
+					return photo.cropped_image !== null ? photo.cropped_image : photo.original_image
+				}
+			}
+			return null
+		},
+		getPhotoTagById(tag_id) {
+			if (this.tags != null && this.tags.length != 0) {
+				let tag = this.tags.filter(tag => tag.id == tag_id)
+				if (tag.length > 0) {
+					return tag[0]
+				}
+			}
+
+			return {
+				id: tag_id,
+				name: '',
+				color: '#FFFFFF'
+			}
+		},
+		tag_style(tag_id) {
+			let tag = this.getPhotoTagById(tag_id)
+			let color = tag.color
+			return `
+				color: ${color};
+				border: 2px dashed ${color};
+				background: ${color}55;
+			`
+		},
+		getPhotosInSlide(slide_index) {
+			if (this.slides.length == 0 || this.slides[slide_index] === undefined) {
+				return []
+			}
+			let photos = this.slides[slide_index].filter(elm => elm.type == 'photo')
+			let photo_ids = []
+			for (const index in photos) {
+				photo_ids.push(photos[index].id)
+			}
+			return photo_ids
+		},
+		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
+			}
+
+			let items_in_slide = this.slides[this.selectedSlide].filter(elm => elm.type == 'tag' || (elm.type == 'photo' && selected_photos.includes(elm.id)))
+			let old_image_ids = this.getPhotosInSlide(this.selectedSlide)
+			let new_image_ids = selected_photos.filter(id => !old_image_ids.includes(id))
+			for (const id of new_image_ids) {
+				items_in_slide.push({
+					type: 'photo',
+					id,
+				})
+			}
+			this.slides[this.selectedSlide] = items_in_slide
+		},
+		selectPhotoTagForSlide(index) {
+			this.slide_for_adding_slot = index
+			this.showSelectTagModal = true
+		},
+		addSlotToSlide() {
+			this.slides[this.slide_for_adding_slot].push({
+				type: 'tag',
+				id: this.selected_tag_id
+			})
+			this.selected_tag_id = null
+			this.showSelectTagModal = false
+		},
+		removeTagFromSlide(slide_index, element_index) {
+			this.slides[slide_index].splice(element_index, 1)
+		},
+		addSlideAfter(index) {
+			this.slides.splice(index+1, 0, [])
+		},
+		removeSlide(index) {
+			this.slides.splice(index, 1)
+		},
+		navigateBack() {
+			this.$router.go(-1)
+		},
+		createNewPhotoLogTemplate() {
+			if (this.title.length > 0) {
+				this.date = new Date()
+				this.isCreateLoading = true
+				this.$store.dispatch('addNewPhotoLogTemplate', {title:this.title, date:this.dateStr}).then(id => {
+					if (id > -1 && id !== null) {
+						this.id = id
+						this.$router.push({name: 'CreateLogTemplate', params: {e: id}})
+					} else {
+						this.message.error('Something went wrong. Please try again later.')
+					}
+				}).finally(() => {
+					this.isCreateLoading = false
+				})
+			} else {
+				this.message.error('Please enter a title')
+			}
+		},
+		isValidId() {
+			return !(
+				this.id == null
+				|| Number.isNaN(this.id)
+				|| this.id <= 0
+				|| this.id === undefined
+			)
+		},
+		findPhotoLogTemplate() {
+			return new Promise((resolve, reject) => {
+				let found_template = this.$store.getters.photoLogTemplateById(this.id)
+				if (found_template === null) {
+					this.$store.dispatch('loadPhotoLogTemplateList').then(() => {
+						found_template = this.$store.getters.photoLogTemplateById(this.id)
+						if (found_template === null) {
+							this.message.error('Photo Log Template could not be found')
+							reject()
+						} else {
+							resolve()
+						}
+					}).catch(() => {
+						reject()
+					})
+				} else {
+					resolve()
+				}
+			})
+		},
+		updateLocalData() {
+			let found_template = this.$store.getters.photoLogTemplateById(this.id)
+			if (found_template !== null) {
+				this.title = found_template.title
+				this.date = new Date(found_template.date).getTime()
+				this.render_date = found_template.render_date
+				this.start_slide_image = found_template.start_slide_image
+				this.slides = found_template.slides
+
+				for(const idx in this.slides) {
+					this.slides[idx] = this.slides[idx].filter((s)=>s!==null)
+				}
+
+				this.isLoadingData = false
+				this.unsaved_changes = false
+			} else {
+				this.message.error('Photo Log Template could not be found')
+			}
+		},
+		updateServerData() {
+			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)]
+				}
+				*/
+
+				this.$store.dispatch('updatePhotoLogTemplate', {
+					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() {
+			console.log(this.leaving_to_page)
+			this.$router.push(this.leaving_to_page)
+		},
+	},
+	beforeRouteUpdate (to) {
+		this.id = Number.parseInt(to.params.e)
+		if (this.isValidId()) {
+			this.isLoadingData = true
+			this.findPhotoLogTemplate().then(()=> {
+				this.updateLocalData()
+			})
+		}
+	},
+	// eslint-disable-next-line no-unused-vars
+	beforeRouteLeave (to, from) {
+		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: 25em;
+}
+
+.n-card .n-image {
+	margin-right: 2em;
+	border: 2px solid gray;
+	border-radius: 0.5em;
+}
+
+.tag-slot {
+	cursor: move;
+	margin-right: 2em;
+	vertical-align: middle;
+	width: 100px;
+	height: 141px;
+	border-radius: 0.5em;
+	display: inline-block;
+}
+
+.tag-slot p {
+	text-align: center;
+	transform: translate(0px, 55px) rotate(54.74deg);
+}
+
+.add-slide-between-button, .add-slide-between-button * {
+	margin: 0;
+	padding: 0;
+}
+
+.add-slide-between-button {
+	cursor: pointer;
+	height: 1.5em;
+	background-color: #addeff;
+	overflow: hidden;
+	opacity: 30%;
+	transition: all 0.25s;
+}
+
+.add-slide-between-button:hover {
+	height: 5em;
+	opacity: 90%;
+	cursor: pointer;
+	background-color: #addeff;
+}
+
+.slide-cards-enter-active,
+.slide-cards-leave-active {
+	transition: all 0.25s ease;
+}
+
+.slide-cards-enter-from,
+.slide-cards-leave-to {
+	opacity: 0;
+	transform: translateY(30px);
+}
+
+.slide-cards-move {
+	transition: transform 0.25s ease;
+}
+</style>

src/views/Home.vue

@@ -13,18 +13,15 @@
 		</div>
 
 		<div class="home-menu">
-			<h1 class="text-3xl font-bold underline">
-				{{ $t('messages.hello') }}
-			</h1>
 			<n-space justify="space-around" >
 				<n-space vertical>
-					<h2>Documents</h2>
+					<h2 class="font-bold text-xl mb-4">Documents</h2>
 					<a target="_blank" href='https://dev.marczierle.com/zierle-training/generate_document/modify_document.php?selection=0'>
 						<n-button type="primary">All Documents</n-button>
 					</a>
 				</n-space>
 				<n-space vertical>
-					<h2>Photo Logs</h2>
+					<h2 class="font-bold text-xl mb-4">Photo Logs</h2>
 					<n-space>
 						<router-link :to="{name: 'LogsList'}">
 							<n-button type="primary">All Logs</n-button>
@@ -33,7 +30,7 @@
 							<n-button type="info">+ New</n-button>
 						</router-link>
 					</n-space>
-					<n-space>
+					<n-space class="mt-4">
 						<router-link :to="{name: 'CameraCapture'}">
 							<n-button secondary circle type="info">
 								<n-icon><CameraAdd20Filled /></n-icon>
@@ -45,8 +42,10 @@
 					</n-space>
 				</n-space>
 			</n-space>
+			<!--
 			<n-button @click='set_lang("en")'>EN</n-button>
 			<n-button @click='set_lang("de")'>DE</n-button>
+			-->
 		</div>
 	</div>
 </template>
@@ -96,6 +95,8 @@ export default {
 	border-bottom-left-radius: 100% 30%;
 	border-bottom-right-radius: 100% 30%;
 	box-shadow: 0 0 50px rgba(0,0,0,0.25);
+	position: absolute;
+	left: 0;
 }
 
 .banner-bg div {

src/views/LogTemplatesList.vue

@@ -0,0 +1,84 @@
+<template>
+	<div>
+		<h1 class="font-bold text-2xl m-4 my-6">Log Templates List</h1>
+		<n-table :bordered="false" :single-line="true">
+			<thead>
+				<th>Photo Log Template Title</th>
+				<th>Date created</th>
+				<th>delete</th>
+			</thead>
+			<tbody>
+				<tr v-for="photologtemplate in photoLogTemplateList" :key="photologtemplate.id">
+					<router-link :to="{name: 'CreateLogTemplate', params: {e: photologtemplate.id}}">
+						<td>{{ photologtemplate.title }}</td>
+					</router-link>
+					<td>{{ photologtemplate.date }}</td>
+					<td>
+						<n-button type="error" @click="askDeleteLogTemplate(photologtemplate.id)">Delete</n-button>
+					</td>
+				</tr>
+			</tbody>
+		</n-table>
+
+		<n-modal
+			v-model:show="showDeleteModal"
+			:mask-closable="true"
+			preset="dialog"
+			type="warning"
+			title="Delete Log Template"
+			:content=deleteModalContent
+			positive-text="Cancel"
+			negative-text="Delete"
+			@negative-click="deleteLogTemplate"
+		/>
+	</div>
+</template>
+
+<script>
+import { useMeta } from 'vue-meta'
+
+export default {
+	name: 'LogTemplatesList',
+	setup() {
+		useMeta({ title: 'All Photo Log Templates' })
+	},
+	data() {
+		return { 
+			showDeleteModal: false,
+			deleteId: null,
+			deleteModalContent: '',
+		}
+	},
+	mounted() {
+		this.$store.dispatch('loadPhotoLogTemplateList')
+	},
+	computed: {
+		photoLogTemplateList() {
+			let list = this.$store.state.photoLogTemplateList
+			if (list !== null) {
+				list.sort((a,b) => {
+					return a.date < b.date ? 1 : -1
+				})
+				return list
+			}
+			return null
+		}
+	},
+	methods: { 
+		askDeleteLogTemplate(logTemplateId) {
+			this.showDeleteModal = true
+			this.deleteId = logTemplateId
+			let logtitle = this.photoLogTemplateList.filter((o) => {
+				return o.id == logTemplateId
+			})[0].title
+			this.deleteModalContent = 'Do you want to permanently delete "' + logtitle + '"?'
+		},
+		deleteLogTemplate() {
+			if (this.deleteId !== null) {
+				this.$store.dispatch('deletePhotoLogTemplate', this.deleteId)
+				this.deleteId = null
+			}
+		}
+	}
+}
+</script>

src/views/LogsList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h1>Logs List</h1>
+		<h1 class="font-bold text-2xl m-4 my-6">Logs List</h1>
 		<n-table :bordered="false" :single-line="true">
 			<thead>
 				<th>Photo Log Title</th>

src/views/ManagePhotos.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h1>Manage Photos</h1>
+		<h1 class="font-bold text-2xl m-4 my-6">Manage Photos</h1>
 		<n-collapse
 			v-if="photoGroups && photoGroups.length > 0"
 			@item-header-click="loadPhotosInGroup"
@@ -23,10 +23,12 @@
 						:can_change_group="true"
 						:can_crop="true"
 						:can_change_ocr="true"
+						:can_change_tag="true"
 						:can_delete="true"
 						@update:group="change_group_modal(photo.id)"
 						@update:crop="change_crop_modal(photo.id)"
 						@update:ocr="change_ocr_modal(photo.id)"
+						@update:tag="change_tag_modal(photo.id)"
 						@update:delete="change_delete_modal(photo.id)"
 					/>
 				</n-space>
@@ -129,6 +131,26 @@
 				</template>
 			</n-card>
 		</n-modal>
+
+		<n-modal
+			v-model:show="showChangeTagModal"
+			:mask-closable="true" >
+			<n-card
+				style="width: 400px;"
+				title="Change Photo Tag"
+				:bordered="false"
+				role="dialog"
+				aria-modal="true"
+				>
+				<n-select v-model:value="current_tag_id" :options="tags_select_options" />
+				<template #footer>
+					<n-space justify="end">
+						<n-button @click="showChangeTagModal=false">Cancel</n-button>
+						<n-button type="success" @click="changePhotoTag">Change Tag</n-button>
+					</n-space>
+				</template>
+			</n-card>
+		</n-modal>
 	</div>
 </template>
 
@@ -157,10 +179,12 @@ export default {
 			showChangeGroupModal: false,
 			showCropModal: false,
 			showChangeOCRModal: false,
+			showChangeTagModal: false,
 			showDeleteModal: false,
 
 			new_group: null,
 			current_ocr_text: '',
+			current_tag_id: 0,
 			current_photo_src: null,
 
 			is_group_loading: new Map(),
@@ -182,6 +206,13 @@ export default {
 			}
 			return []
 		},
+		photoTags() {
+			let tags = this.$store.state.photoTags
+			if (tags !== null && tags.length > 0) {
+				return tags
+			}
+			return []
+		},
 		photos() {
 			return this.$store.state.photos
 		},
@@ -198,11 +229,27 @@ export default {
 			}
 			return []
 		},
+		tags_select_options() {
+			if (this.photoTags.length > 0) {
+				let options = []
+				for (const idx in this.photoTags) {
+					options.push({
+						value: this.photoTags[idx].id,
+						label: this.photoTags[idx].name,
+					})
+				}
+				return options
+			}
+			return []
+		},
 	},
 	mounted() {
 		this.$store.dispatch('loadPhotoGroups').catch((error) => {
 			this.message.error('Cannot load photo groups: ' + error)
 		})
+		this.$store.dispatch('loadPhotoTags').catch((error) => {
+			this.message.error('Cannot load photo tags: ' + error)
+		})
 	},
 	methods: {
 		loadPhotosInGroup(group_data) {
@@ -242,6 +289,16 @@ export default {
 				this.current_ocr_text = ''
 			}
 		},
+		change_tag_modal(photo_id) {
+			this.current_photo = photo_id
+			this.showChangeTagModal = true
+			let current_tag = this.$store.getters.photoById(photo_id).tag
+			if (current_tag == null) {
+				this.current_tag_id = null
+			} else {
+				this.current_tag_id = current_tag.id
+			}
+		},
 		change_delete_modal(photo_id) {
 			this.current_photo = photo_id
 			this.showDeleteModal = true
@@ -258,6 +315,18 @@ export default {
 				})
 			}
 		},
+		changePhotoTag(){
+			if (this.current_tag_id && this.current_photo) {
+				this.$store.dispatch('updatePhoto', {
+					id: this.current_photo,
+					tag: this.current_tag_id
+				}).then(()=>{
+					this.current_photo = null
+					this.current_tag_id = null
+					this.showChangeTagModal = false
+				})
+			}
+		},
 		changeCrop() {
 			let results = this.$refs.cropper.getResult()
 			let bbox = results.bbox

tailwind.config.js

@@ -967,5 +967,7 @@ module.exports = {
 		wordBreak: ['responsive'],
 		zIndex: ['responsive', 'focus-within', 'focus'],
 	},
-	plugins: [],
+	plugins: [
+		require('tailwind-children'),
+	],
 }