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-lock.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",

package.json

@@ -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/NotesService.js

@@ -1,5 +1,38 @@
 <template>
 	<Fragment>
+
+	<NcAppNavigationItem
+		:title="title"
+		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')"
 			:class="{ active: selectedCategory === null }"
@@ -31,6 +64,8 @@
 
 <script>
 import {
+	NcActionInput,
+	NcActionText,
 	NcAppNavigationItem,
 	NcAppNavigationCaption,
 	NcAppNavigationCounter,
@@ -40,8 +75,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 +93,18 @@ export default {
 		FolderIcon,
 		FolderOutlineIcon,
 		HistoryIcon,
+		AddIcon,
+		ErrorIcon,
+		NcActionInput,
+		NcActionText,
+	},
+
+	data() {
+		return {
+			open: false,
+			menuOpen: false,
+			createCategoryError: null,
+		}
 	},
 
 	computed: {
@@ -77,9 +126,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>