Category: Add new category button to create new folders in current

notes path for categories.

Signed-off-by: Jonathan Pagel <jonny_tischbein@systemli.org>

Author: theatischbein

package.json

@@ -13,6 +13,7 @@
 		"stylelint:fix": "stylelint 'src/**/*.vue' 'css/**/*.css' --fix"
 	},
 	"dependencies": {
+		"@nextcloud/auth": "^2.0.0",
 		"@nextcloud/axios": "^2.3.0",
 		"@nextcloud/dialogs": "^4.0.1",
 		"@nextcloud/event-bus": "^3.0.2",

src/NotesService.js

@@ -1,5 +1,6 @@
 import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
+import { getCurrentUser } from '@nextcloud/auth'
+import { generateUrl, generateRemoteUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 
 import store from './store.js'
@@ -338,6 +339,40 @@ export const setFavorite = (noteId, favorite) => {
 		})
 }
 
+export const findCategory = (categoryName) => {
+	return axios
+		.get(generateRemoteUrl(`dav/files/${getCurrentUser().uid}/${store.state.app.settings.notesPath}${categoryName}`))
+		.then(response => {
+			return categoryName
+		})
+		.catch(err => {
+			if (err?.response?.status === 404) {
+				return false
+			} else {
+				console.error(err)
+				handleSyncError(t('notes', 'Fetching category {name} has failed.', { name: categoryName }), err)
+				throw err
+			}
+		})
+}
+
+export const createCategory = (categoryName) => {
+	// Axios MKCOL workaround: https://github.com/axios/axios/issues/2220
+	return axios
+		.request({
+			url: generateRemoteUrl(`dav/files/${getCurrentUser().uid}/${store.state.app.settings.notesPath}${categoryName}`),
+			method: 'MKCOL',
+		})
+		.then(response => {
+			return categoryName
+		})
+		.catch(err => {
+			console.error(err)
+			handleSyncError(t('notes', 'Creating new category {name} has failed.', { name: categoryName }), err)
+			throw err
+		})
+}
+
 export const setCategory = (noteId, category) => {
 	return axios
 		.put(url('/notes/' + noteId + '/category'), { category })

src/components/NavigationCategoriesItem.vue

@@ -4,9 +4,32 @@
 		class="app-navigation-noclose separator-below"
 		:class="{ 'category-header': selectedCategory !== null }"
 		:open.sync="open"
+		:menu-open.sync="menuOpen"
 		:allow-collapse="true"
 		@click.prevent.stop="onToggleCategories"
 	>
+		<template #menu-icon>
+			<AddIcon :size="20" @click="onToggleNewCategory" />
+		</template>
+		<template #actions>
+			<NcActionText>
+				<template #icon>
+					<ErrorIcon v-if="createCategoryError" :size="20" />
+					<AddIcon v-else-if="!createCategoryError" :size="20" />
+				</template>
+				{{ createCategoryError ? createCategoryError : t('notes', 'Create a new category') }}
+			</NcActionText>
+			<NcActionInput
+				icon=""
+				:value="t('notes', 'Category name')"
+				@submit.prevent.stop="createNewCategory"
+			>
+				<template #icon>
+					<FolderIcon :size="20" />
+				</template>
+			</NcActionInput>
+		</template>
+
 		<FolderIcon slot="icon" :size="20" />
 		<NcAppNavigationItem
 			:title="t('notes', 'All notes')"
@@ -34,15 +57,19 @@
 
 <script>
 import {
+	NcActionInput,
+	NcActionText,
 	NcAppNavigationItem,
 	NcAppNavigationCounter,
 } from '@nextcloud/vue'
 
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'
 import HistoryIcon from 'vue-material-design-icons/History.vue'
+import AddIcon from 'vue-material-design-icons/Plus.vue'
+import ErrorIcon from 'vue-material-design-icons/AlertCircle.vue'
 
-import { getCategories } from '../NotesService.js'
+import { createCategory, findCategory, getCategories } from '../NotesService.js'
 import { categoryLabel } from '../Util.js'
 import store from '../store.js'
 
@@ -53,6 +80,10 @@ export default {
 		FolderIcon,
 		FolderOutlineIcon,
 		HistoryIcon,
+		AddIcon,
+		ErrorIcon,
+		NcActionInput,
+		NcActionText,
 		NcAppNavigationItem,
 		NcAppNavigationCounter,
 	},
@@ -67,6 +98,8 @@ export default {
 	data() {
 		return {
 			open: false,
+			menuOpen: false,
+			createCategoryError: null,
 		}
 	},
 
@@ -93,10 +126,34 @@ export default {
 			this.open = !this.open
 		},
 
+		onToggleNewCategory() {
+			this.menuOpen = !this.menuOpen
+		},
+
 		onSelectCategory(category) {
 			this.open = false
 			this.$emit('category-selected', category)
 		},
+
+		createNewCategory(event) {
+			const input = event.target.querySelector('input[type=text]')
+			const categoryName = input.value.trim()
+
+			// Check if already exists
+			findCategory(categoryName).then(data => {
+				if (data !== false) {
+					this.createCategoryError = t('notes', 'This category already exists')
+					return
+				}
+
+				// Create new directory for category in current notes path defined in settings
+				createCategory(categoryName)
+				this.createCategoryError = null
+				this.onToggleNewCategory()
+				this.onSelectCategory(categoryName)
+			})
+
+		},
 	},
 }
 </script>