#65 add: bookmark editing

Signed-off-by: Patrizio Bekerle <patrizio@bekerle.com>

Author: pbek

CHANGELOG.md

@@ -1,6 +1,7 @@
 # QOwnNotes Web Companion Changelog
 
 ## 2024.8.0
+- bookmarks can now be edited in the bookmarks list (for [#65](https://github.com/qownnotes/web-companion/issues/65))
 - update dependencies
 
 ## 2024.4.0

src-bex/_locales/en/messages.json

@@ -48,6 +48,21 @@
   "DeleteBookmarkConfirmMessage": {
     "message": "Would you like to delete this text from all notes tagged as bookmark?"
   },
+  "EditBookmark": {
+    "message": "Edit bookmark"
+  },
+  "BookmarkText": {
+    "message": "Bookmark text"
+  },
+  "EditBookmarkConfirmTitle": {
+    "message": "Edit bookmark"
+  },
+  "EditBookmarkConfirmMessage": {
+    "message": "Would you like to replace this text from all notes tagged as bookmark:"
+  },
+  "EditBookmarkConfirmMessage2": {
+    "message": "With this text:"
+  },
   "BookmarkAllTabs": {
     "message": "Bookmark all tabs"
   },

src/components/EditBookmarkDialog.vue

@@ -0,0 +1,99 @@
+<template>
+  <q-dialog v-model="dialog">
+    <q-card>
+      <q-card-section>
+        <div class="text-h6">{{ getLocale('EditBookmark') }}</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <div class="row">
+          <div class="col q-pa-md q-gutter-sm">
+            <q-input
+              tabindex="1"
+              @keyup.enter="storeBookmark"
+              v-model="newMarkdown"
+              autofocus
+              autogrow
+              input-style="min-width: 460px;"
+              :label="getLocale('BookmarkText')"
+            ></q-input>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn flat :label="getLocale('Cancel')" tabindex="3" v-close-popup @click="$emit('cancel')" />
+        <q-btn flat :label="getLocale('Ok')" color="primary" tabindex="2" @click="storeBookmark" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import {getLocale} from "src/helpers/utils";
+import {computed, defineComponent, ref} from "vue";
+import {QWebSocket} from "src/services/qwebsocket";
+import {useQuasar} from "quasar";
+
+export default defineComponent({
+  name: "EditBookmarkDialog",
+  methods: {getLocale},
+  props: {
+    model: {
+      type: Boolean,
+      default: false
+    },
+    markdown: {
+      type: String,
+      default: '',
+      required: true
+    },
+    webSocket: {
+      type: QWebSocket,
+      required: true
+    }
+  },
+  setup(props, { emit }) {
+    const $q = useQuasar();
+    const dialog = ref(props.model);
+    let markdownToStore = '';
+
+    const newMarkdown = computed({
+      get: () => props.markdown,
+      set: (value) => {markdownToStore = value}
+    });
+
+    const storeBookmark = () => {
+      const data = {type: "editBookmark", data: {markdown: props.markdown, newMarkdown: markdownToStore}};
+
+      $q.dialog({
+        title: getLocale('EditBookmarkConfirmTitle'),
+        message: `
+            ${getLocale('EditBookmarkConfirmMessage')}<br><br>
+            <code style="display: block; overflow-x: auto">${data.data.markdown}</code><br>
+            ${getLocale('EditBookmarkConfirmMessage2')}<br><br>
+            <code style="display: block; overflow-x: auto">${data.data.newMarkdown}</code>`,
+        html: true,
+        cancel: true,
+        persistent: true
+      }).onOk(() => {
+        props.webSocket.send(data, () => {
+          console.log("Edited bookmark:" + data);
+          emit('bookmarkEdited');
+        });
+      });
+    };
+
+    return {
+      dialog,
+      newMarkdown,
+      storeBookmark
+    };
+  },
+  emits: ['cancel', 'bookmarkEdited']
+})
+</script>
+
+<style scoped>
+
+</style>

src/pages/PopupPage.vue

@@ -154,10 +154,13 @@
                     <q-badge v-for="tag in props.row.tags" :key="tag" :label="tag" />
                   </div>
                 </q-td>
-                <q-td key="toolbar" :props="props">
+                <q-td key="toolbar" :props="props" class="row-buttons">
                   <q-btn v-if="props.row.markdown" size="xs" round color="secondary" icon="delete" @click="deleteBookmark(props.row.markdown)">
                     <q-tooltip class="bg-accent">{{ getLocale('DeleteBookmark') }}</q-tooltip>
                   </q-btn>
+                  <q-btn v-if="props.row.markdown" size="xs" round color="secondary" icon="edit" @click="editBookmark(props.row.markdown)">
+                    <q-tooltip class="bg-accent">{{ getLocale('EditBookmark') }}</q-tooltip>
+                  </q-btn>
                 </q-td>
               </q-tr>
             </template>
@@ -166,6 +169,7 @@
       </q-page>
       <InputTokenDialog v-if="inputTokenDialog" @token-stored="closeWindow" @cancel="closeWindow" />
       <AddBookmarkDialog v-model="addBookmarkDialog" :bookmark="editedBookmark" :webSocket="webSocket" @bookmark-stored="onBookmarkStored" />
+      <EditBookmarkDialog v-model="editBookmarkDialog" :markdown="editBookmarkMarkdown" :webSocket="webSocket" @bookmark-edited="onBookmarkEdited" />
       <BookmarkAllTabsDialog v-model="bookmarkAllTabsDialog" :webSocket="webSocket" @bookmarksStored="onBookmarksStored" />
       <ImportBrowserBookmarksDialog v-model="importBrowserBookmarksDialog" :webSocket="webSocket" @bookmarksImported="onBookmarksImported" />
     </q-page-container>
@@ -178,6 +182,7 @@ import { getLocale, openPrivateUrl, truncateText } from '../helpers/utils'
 import { QWebSocket } from '../services/qwebsocket'
 import InputTokenDialog from '../components/InputTokenDialog.vue'
 import AddBookmarkDialog from "components/AddBookmarkDialog.vue";
+import EditBookmarkDialog from "components/EditBookmarkDialog.vue";
 import {Notify, useQuasar} from "quasar";
 import BookmarkAllTabsDialog from "components/BookmarkAllTabsDialog.vue";
 import ImportBrowserBookmarksDialog from "components/ImportBrowserBookmarksDialog.vue";
@@ -203,8 +208,9 @@ export default defineComponent({
     let selectedNoteFolderId = ref(null);
     let selectedNoteFolderIdWatchEnabled = true;
     let addBookmarkDialog = ref(false);
+    let editBookmarkDialog = ref(false);
     let bookmarkAllTabsDialog = ref(false);
-    const bookmarkEditDialog = ref(false);
+    let editBookmarkMarkdown = ref('');
     const pagination = ref({
       sortBy: 'name',
       descending: false,
@@ -321,6 +327,11 @@ export default defineComponent({
       loadBookmarks();
     };
 
+    const onBookmarkEdited = () => {
+      editBookmarkDialog.value = false;
+      loadBookmarks();
+    };
+
     const onBookmarksStored = () => {
       bookmarkAllTabsDialog.value = false;
       loadBookmarks();
@@ -347,6 +358,12 @@ export default defineComponent({
       });
     }
 
+    const editBookmark = (markdown) => {
+      console.log('markdown', markdown)
+      editBookmarkMarkdown.value = markdown;
+      editBookmarkDialog.value = true;
+    }
+
     const openUrl = (url, event) => {
       if (event) {
         event.stopPropagation();
@@ -506,13 +523,15 @@ export default defineComponent({
       noteFolderName,
       noteFolders,
       selectedNoteFolderId,
-      bookmarkEditDialog,
       addBookmarkDialog,
+      editBookmarkDialog,
       bookmarkAllTabsDialog,
       onBookmarkStored,
+      onBookmarkEdited,
       onBookmarksStored,
       onBookmarksImported,
       editedBookmark,
+      editBookmarkMarkdown,
       defaultBookmark,
       pagination,
       selectedTags,
@@ -523,6 +542,7 @@ export default defineComponent({
       filteredBookmarks,
       openUrl,
       deleteBookmark,
+      editBookmark,
       loadBookmarks,
       closeWindow,
       tagFilterFn,
@@ -533,6 +553,7 @@ export default defineComponent({
   components: {
     PopupDrawer,
     AddBookmarkDialog,
+    EditBookmarkDialog,
     BookmarkAllTabsDialog,
     ImportBrowserBookmarksDialog,
     InputTokenDialog
@@ -601,4 +622,9 @@ code.scroll {
   white-space: pre;
   word-wrap: break-word;
 }
+
+.row-buttons {
+  display: flex;
+  gap: 5px;
+}
 </style>