From 07842e0ddda026a1b3cb9dd763e6e23f4e04b6ab Mon Sep 17 00:00:00 2001
From: "e.vukcevic" <vukcevic.eleonora@schoenberger-group.com>
Date: Sat, 2 Sep 2023 17:58:50 +0200
Subject: [PATCH 1/4] -Adding MarkdownPencil component -adding rename function
 for every note item in list

---
 src/components/Icons/MarkdownPencil.vue | 27 +++++++
 src/components/NoteItem.vue             | 94 +++++++++++++++++++------
 src/components/NotesList.vue            | 21 ++++--
 3 files changed, 116 insertions(+), 26 deletions(-)
 create mode 100644 src/components/Icons/MarkdownPencil.vue

diff --git a/src/components/Icons/MarkdownPencil.vue b/src/components/Icons/MarkdownPencil.vue
new file mode 100644
index 000000000..3f60c518b
--- /dev/null
+++ b/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>
diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index 56ab9cb48..8ff593607 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -10,51 +10,73 @@
 		</template>
 		<template #icon>
 			<AlertOctagonIcon v-if="note.error"
-				slot="icon"
-				:size="20"
-				fill-color="#E9322D"
+							  slot="icon"
+							  :size="20"
+							  fill-color="#E9322D"
 			/>
 			<StarIcon v-else-if="note.favorite"
-				slot="icon"
-				:size="20"
-				fill-color="#FC0"
+					  slot="icon"
+					  :size="20"
+					  fill-color="#FC0"
 			/>
 			<FileDocumentOutlineIcon v-else
-				slot="icon"
-				:size="20"
-				fill-color="var(--color-text-lighter)"
+									 slot="icon"
+									 :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 @click="onToggleSidebar">
-				<SidebarIcon slot="icon" :size="20" />
+				<SidebarIcon slot="icon" :size="20"/>
 				{{ t('notes', 'Details') }}
 			</NcActionButton>
+
 			<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 } from '@nextcloud/vue'
+import {NcListItem, NcActionButton, 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 SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
-import { categoryLabel, routeIsNewNote } from '../Util.js'
-import { showError } from '@nextcloud/dialogs'
+import {categoryLabel, routeIsNewNote} from '../Util.js'
+import {showError} from '@nextcloud/dialogs'
 import store from '../store.js'
-import { setFavorite, setTitle, fetchNote, deleteNote } from '../NotesService.js'
-
+import {setFavorite, setTitle, fetchNote, deleteNote} from '../NotesService.js'
+import MarkdownPencil from "./Icons/MarkdownPencil.vue";
 export default {
 	name: 'NoteItem',
 
@@ -65,6 +87,9 @@ export default {
 		NcListItem,
 		SidebarIcon,
 		StarIcon,
+		NcActionInput,
+		MarkdownPencil,
+
 	},
 
 	props: {
@@ -72,6 +97,7 @@ export default {
 			type: Object,
 			required: true,
 		},
+
 	},
 
 	data() {
@@ -79,6 +105,8 @@ export default {
 			loading: {
 				note: false,
 			},
+			newTitle: "",
+			renaming: false,
 		}
 	},
 
@@ -112,7 +140,6 @@ export default {
 			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
 		},
 	},
-
 	methods: {
 		onNoteSelected(noteId) {
 			this.$emit('note-selected', noteId)
@@ -135,21 +162,44 @@ export default {
 			this.actionsOpen = false
 			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
 		},
+		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
 			try {
diff --git a/src/components/NotesList.vue b/src/components/NotesList.vue
index 5b7124b5f..985fa95e8 100644
--- a/src/components/NotesList.vue
+++ b/src/components/NotesList.vue
@@ -1,9 +1,11 @@
 <template>
 	<ul>
 		<NoteItem v-for="note in notes"
-			:key="note.id"
-			:note="note"
-			@note-selected="onNoteSelected"
+				  :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>

From 03447c2a1beb7a474ab291c155961b70a8f7aee0 Mon Sep 17 00:00:00 2001
From: "e.vukcevic" <vukcevic.eleonora@schoenberger-group.com>
Date: Sat, 2 Sep 2023 18:06:26 +0200
Subject: [PATCH 2/4] -fix indentation

---
 src/components/NoteItem.vue  | 27 +++++++++++++++------------
 src/components/NotesList.vue | 13 +++++++------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index 8ff593607..32d2a7efb 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -9,20 +9,23 @@
 			{{ categoryTitle }}
 		</template>
 		<template #icon>
-			<AlertOctagonIcon v-if="note.error"
-							  slot="icon"
-							  :size="20"
-							  fill-color="#E9322D"
+			<AlertOctagonIcon
+				v-if="note.error"
+				slot="icon"
+				:size="20"
+				fill-color="#E9322D"
 			/>
-			<StarIcon v-else-if="note.favorite"
-					  slot="icon"
-					  :size="20"
-					  fill-color="#FC0"
+			<StarIcon
+				v-else-if="note.favorite"
+				slot="icon"
+				:size="20"
+				fill-color="#FC0"
 			/>
-			<FileDocumentOutlineIcon v-else
-									 slot="icon"
-									 :size="20"
-									 fill-color="var(--color-text-lighter)"
+			<FileDocumentOutlineIcon
+				v-else
+				slot="icon"
+				:size="20"
+				fill-color="var(--color-text-lighter)"
 			/>
 
 		</template>
diff --git a/src/components/NotesList.vue b/src/components/NotesList.vue
index 985fa95e8..3c8b6db44 100644
--- a/src/components/NotesList.vue
+++ b/src/components/NotesList.vue
@@ -1,11 +1,12 @@
 <template>
 	<ul>
-		<NoteItem v-for="note in notes"
-				  :key="note.id"
-				  :note="note"
-				  @note-selected="onNoteSelected"
-				  :renaming="isRenaming(note.id)"
-				  @start-renaming="onStartRenaming"
+		<NoteItem
+			v-for="note in notes"
+			:key="note.id"
+			:note="note"
+			@note-selected="onNoteSelected"
+			:renaming="isRenaming(note.id)"
+			@start-renaming="onStartRenaming"
 		/>
 	</ul>
 </template>

From 0453e3ebc5c9312504b86f5df11e53db3986b57c Mon Sep 17 00:00:00 2001
From: "e.vukcevic" <vukcevic.eleonora@schoenberger-group.com>
Date: Sat, 2 Sep 2023 18:08:52 +0200
Subject: [PATCH 3/4] -fix indentation

---
 src/components/NoteItem.vue | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index 32d2a7efb..047d86bd9 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -9,20 +9,17 @@
 			{{ categoryTitle }}
 		</template>
 		<template #icon>
-			<AlertOctagonIcon
-				v-if="note.error"
+			<AlertOctagonIcon v-if="note.error"
 				slot="icon"
 				:size="20"
 				fill-color="#E9322D"
 			/>
-			<StarIcon
-				v-else-if="note.favorite"
+			<StarIcon v-else-if="note.favorite"
 				slot="icon"
 				:size="20"
 				fill-color="#FC0"
 			/>
-			<FileDocumentOutlineIcon
-				v-else
+			<FileDocumentOutlineIcon v-else
 				slot="icon"
 				:size="20"
 				fill-color="var(--color-text-lighter)"
@@ -38,8 +35,7 @@
 				<MarkdownPencil slot="icon" :size="20"/>
 				{{ t('notes', 'Rename') }}
 			</NcActionButton>
-			<NcActionInput
-				v-else
+			<NcActionInput v-else
 				v-model.trim="newTitle"
 				@input="onInputChange($event)"
 				@submit="onRename"
@@ -201,8 +197,6 @@ export default {
 			this.renaming = false;
 
 		},
-
-
 		async onDeleteNote() {
 			this.loading.delete = true
 			try {

From d8256a266188f2396e41fbe48fee039d67ea7256 Mon Sep 17 00:00:00 2001
From: "e.vukcevic" <vukcevic.eleonora@schoenberger-group.com>
Date: Sat, 2 Sep 2023 18:10:16 +0200
Subject: [PATCH 4/4] -fix indentation

---
 src/components/NotesList.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/NotesList.vue b/src/components/NotesList.vue
index 3c8b6db44..779b51244 100644
--- a/src/components/NotesList.vue
+++ b/src/components/NotesList.vue
@@ -1,7 +1,6 @@
 <template>
 	<ul>
-		<NoteItem
-			v-for="note in notes"
+		<NoteItem v-for="note in notes"
 			:key="note.id"
 			:note="note"
 			@note-selected="onNoteSelected"