Category: Add new category button to create new folders

package.json

@@ -13,6 +13,7 @@
     "stylelint:fix": "stylelint 'src/**/*.vue' 'css/**/*.css' --fix"
   },
   "dependencies": {
+    "@nextcloud/auth": "^2.2.1",
     "@nextcloud/axios": "^2.4.0",
     "@nextcloud/dialogs": "^4.2.1",
     "@nextcloud/event-bus": "^3.1.0",

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,41 @@ 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 => {
+			store.commit('addCategory', categoryName)
+			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/CategoriesList.vue

@@ -1,5 +1,6 @@
 <template>
 	<Fragment>
+		<FolderIcon slot="icon" :size="20" />
 		<NcAppNavigationItem
 			:title="t('notes', 'All notes')"
 			:class="{ active: selectedCategory === null }"
@@ -11,7 +12,29 @@
 			</NcAppNavigationCounter>
 		</NcAppNavigationItem>
 
-		<NcAppNavigationCaption :title="t('notes', 'Categories')" />
+		<NcAppNavigationCaption :title="t('notes', 'Categories')">
+			<template #actionsTriggerIcon>
+				<AddIcon slot="icon" :size="20" />
+			</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>
+		</NcAppNavigationCaption>
 
 		<NcAppNavigationItem v-for="category in categories"
 			:key="category.name"
@@ -31,6 +54,8 @@
 
 <script>
 import {
+	NcActionInput,
+	NcActionText,
 	NcAppNavigationItem,
 	NcAppNavigationCaption,
 	NcAppNavigationCounter,
@@ -40,8 +65,10 @@ import { Fragment } from 'vue-fragment'
 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'
 
@@ -56,6 +83,18 @@ export default {
 		FolderIcon,
 		FolderOutlineIcon,
 		HistoryIcon,
+		AddIcon,
+		ErrorIcon,
+		NcActionInput,
+		NcActionText,
+	},
+
+	data() {
+		return {
+			open: false,
+			menuOpen: false,
+			createCategoryError: null,
+		}
 	},
 
 	computed: {
@@ -77,9 +116,37 @@ export default {
 			return categoryLabel(category)
 		},
 
+		onToggleCategories() {
+			this.open = !this.open
+		},
+
+		onToggleNewCategory() {
+			this.menuOpen = !this.menuOpen
+		},
+
 		onSelectCategory(category) {
 			store.commit('setSelectedCategory', 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>

src/store/notes.js

@@ -179,6 +179,10 @@ const mutations = {
 		state.categories = categories
 	},
 
+	addCategory(state, category) {
+		state.categories.push(category)
+	},
+
 	setSelectedCategory(state, category) {
 		state.selectedCategory = category
 	},