-Adding MarkdownPencil component

-adding rename function for every note item in list

-fix indentation

-fix indentation

-fix indentation

Author: evukcevic

src/components/Icons/MarkdownPencil.vue

@@ -0,0 +1,27 @@
+<template>
+  <span class="material-design-icon">
+     <svg-icon type="mdi" :path="path" :width="size" :height="size"></svg-icon>
+  </span>
+</template>
+
+<script>
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiPencil } from '@mdi/js';
+export default {
+	name: "MarkdownPencil",
+	components: {
+		SvgIcon
+	},
+	props: {
+		size: {
+			type: Number,
+			default: 24
+		},
+	},
+	data() {
+		return {
+			path: mdiPencil,
+		}
+	}
+}
+</script>

src/components/NoteItem.vue

@@ -24,30 +24,52 @@
 				:size="20"
 				fill-color="var(--color-text-lighter)"
 			/>
+
 		</template>
 		<template #actions>
 			<NcActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
 				{{ actionFavoriteText }}
 			</NcActionButton>
+
+			<NcActionButton v-if="!renaming" @click="startRenaming">
+				<MarkdownPencil slot="icon" :size="20"/>
+				{{ t('notes', 'Rename') }}
+			</NcActionButton>
+			<NcActionInput v-else
+				v-model.trim="newTitle"
+				@input="onInputChange($event)"
+				@submit="onRename"
+				:disabled="!renaming"
+				:placeholder="t('notes', 'Rename note')"
+				:show-trailing-button="true"
+			>
+				<MarkdownPencil slot="icon" :size="20"/>
+			</NcActionInput>
+
 			<NcActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
 				{{ t('notes', 'Delete note') }}
 			</NcActionButton>
-			<NcActionSeparator />
+
+			<NcActionSeparator/>
+
 			<NcActionButton icon="icon-files-dark" @click="onCategorySelected">
 				{{ actionCategoryText }}
 			</NcActionButton>
+
 		</template>
 	</NcListItem>
 </template>
 
 <script>
-import { NcListItem, NcActionButton, NcActionSeparator } from '@nextcloud/vue'
+import { NcListItem, NcActionButton, NcActionSeparator, NcActionInput } from '@nextcloud/vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
 import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
 import { categoryLabel, routeIsNewNote } from '../Util.js'
 import { showError } from '@nextcloud/dialogs'
 import { setFavorite, setTitle, fetchNote, deleteNote } from '../NotesService.js'
+import store from '../store.js'
+import MarkdownPencil from "./Icons/MarkdownPencil.vue";
 
 export default {
 	name: 'NoteItem',
@@ -59,20 +81,26 @@ export default {
 		NcListItem,
 		StarIcon,
 		NcActionSeparator,
+		NcActionInput,
+		MarkdownPencil,
+
 	},
 
 	props: {
 		note: {
 			type: Object,
 			required: true,
 		},
+
 	},
 
 	data() {
 		return {
 			loading: {
 				note: false,
 			},
+			newTitle: "",
+			renaming: false,
 		}
 	},
 
@@ -106,7 +134,6 @@ export default {
 			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
 		},
 	},
-
 	methods: {
 		onNoteSelected(noteId) {
 			this.$emit('note-selected', noteId)
@@ -125,20 +152,41 @@ export default {
 			this.actionsOpen = false
 			this.$emit('category-selected', this.note.category)
 		},
+		startRenaming() {
+			this.renaming = true;
+			this.$emit('start-renaming', this.note.id);
+		},
+		onInputChange(event) {
+			this.newTitle = event.target.value.toString();
+		},
 		onRename(newTitle) {
-			this.loading.note = true
+			newTitle = this.newTitle.toString();
+			if (!newTitle) {
+				return;
+			}
+			this.loading.note = true;
 			setTitle(this.note.id, newTitle)
+				.then(() => {
+					this.note.title = newTitle;
+					this.newTitle = "";
+				})
 				.catch(() => {
+					console.log('error')
+					showError(this.t('notes', 'Error while renaming note.'));
 				})
 				.finally(() => {
-					this.loading.note = false
-				})
+					this.loading.note = false;
+					this.renaming = false;
+				});
+
 			if (routeIsNewNote(this.$route)) {
 				this.$router.replace({
 					name: 'note',
-					params: { noteId: this.note.id.toString() },
-				})
+					params: {noteId: this.note.id.toString()},
+				});
 			}
+			this.renaming = false;
+
 		},
 		async onDeleteNote() {
 			this.loading.delete = true

src/components/NotesList.vue

@@ -4,6 +4,8 @@
 			:key="note.id"
 			:note="note"
 			@note-selected="onNoteSelected"
+			:renaming="isRenaming(note.id)"
+			@start-renaming="onStartRenaming"
 		/>
 	</ul>
 </template>
@@ -24,11 +26,22 @@ export default {
 			required: true,
 		},
 	},
-
+	data() {
+		return {
+			renamingNotes: [],
+		};
+	},
 	methods: {
 		onNoteSelected(noteId) {
 			this.$emit('note-selected', noteId)
 		},
+		onStartRenaming(noteId) {
+			this.renamingNotes.push(noteId);
+		},
+		isRenaming(noteId) {
+			return this.renamingNotes.includes(noteId);
+		},
+
 	},
 }
 </script>