#56 add: bookmark all tabs

qownnotes · Feb 1, 2024 · 365a395 · 365a395
1 parent 84836ad
commit 365a395
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 6 deletions.
diff --git a/src/components/BookmarkAllTabsDialog.vue b/src/components/BookmarkAllTabsDialog.vue
@@ -0,0 +1,85 @@
+<template>
+  <q-dialog v-model="dialog">
+    <q-card>
+      <q-card-section>
+        <div class="text-h6">{{ getLocale('BookmarkAllTabs') }}</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"
+              clearable
+              @keyup.enter="storeBookmarks"
+              v-model="description"
+              :label="getLocale('Description')"
+            >
+              <template v-slot:prepend>
+                <q-icon name="description" />
+              </template>
+            </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="storeBookmarks" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import {getLocale} from "src/helpers/utils";
+import {defineComponent, reactive, ref} from "vue";
+import {QWebSocket} from "src/services/qwebsocket";
+
+export default defineComponent({
+  name: "BookmarkAllTabsDialog",
+  methods: {getLocale},
+  props: {
+    model: {
+      type: Boolean,
+      default: false
+    },
+    webSocket: {
+      type: QWebSocket,
+      required: true
+    }
+  },
+  setup(props, { emit }) {
+    const dialog = ref(props.model);
+    const description = ref('');
+
+    const storeBookmarks = () => {
+      chrome.tabs.query({currentWindow: true}, function (tabs) {
+        let bookmarks = [];
+        tabs.forEach(function (tab) {
+          bookmarks.push({"name": tab.title, "url": tab.url, "description": description.value});
+        });
+        const data = {type: "newBookmarks", data: bookmarks};
+
+        props.webSocket.send(data, function () {
+          console.log("Storing bookmarks:" + data);
+          emit("bookmarksStored");
+        });
+
+        dialog.value = false;
+      });
+    };
+
+    return {
+      dialog,
+      description,
+      storeBookmarks
+    };
+  },
+  emits: ['cancel', 'bookmarksStored']
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/PopupPage.vue b/src/pages/PopupPage.vue
@@ -59,10 +59,10 @@
           <q-btn round color="secondary" icon="open_in_new" @click="openFilteredBookmarks">
             <q-tooltip class="bg-accent">{{ getLocale('OpenAllBookmarks') }}</q-tooltip>
           </q-btn>
-          <q-btn round color="secondary" icon="bookmarks">
+          <q-btn round color="secondary" icon="bookmarks" @click="bookmarkAllTabsDialog = true">
             <q-tooltip class="bg-accent">{{ getLocale('BookmarkAllTabs') }}</q-tooltip>
           </q-btn>
-          <q-btn round color="primary" icon="bookmark_add" @click="addBookmarkDialog = true" >
+          <q-btn round color="primary" icon="bookmark_add" @click="addBookmarkDialog = true">
             <q-tooltip class="bg-accent">{{ getLocale('AddBookmark') }}</q-tooltip>
           </q-btn>
         </div>
@@ -111,6 +111,7 @@
   </q-page>
   <InputTokenDialog v-if="inputTokenDialog" @token-stored="closeWindow" @cancel="closeWindow" />
   <AddBookmarkDialog v-model="addBookmarkDialog" :bookmark="editedBookmark" :webSocket="webSocket" @bookmark-stored="onBookmarkStored" />
+  <BookmarkAllTabsDialog v-model="bookmarkAllTabsDialog" :webSocket="webSocket" @bookmarksStored="onBookmarksStored" />
 </template>
 
 <script>
@@ -119,7 +120,8 @@ import { getLocale, openUrl, truncateText } from '../helpers/utils'
 import { QWebSocket } from '../services/qwebsocket'
 import InputTokenDialog from '../components/InputTokenDialog.vue'
 import AddBookmarkDialog from "components/AddBookmarkDialog.vue";
-import {useQuasar} from "quasar";
+import {Notify} from "quasar";
+import BookmarkAllTabsDialog from "components/BookmarkAllTabsDialog.vue";
 
 const columns = [
   { name: 'name', align: 'left', label: 'Name', field: 'name', sortable: true },
@@ -137,6 +139,7 @@ export default defineComponent({
     let selectedNoteFolderId = ref(null);
     let selectedNoteFolderIdWatchEnabled = true;
     let addBookmarkDialog = ref(false);
+    let bookmarkAllTabsDialog = ref(false);
     const bookmarkEditDialog = ref(false);
     const pagination = ref({
       sortBy: 'name',
@@ -252,6 +255,11 @@ export default defineComponent({
       loadBookmarks();
     };
 
+    const onBookmarksStored = () => {
+      bookmarkAllTabsDialog.value = false;
+      loadBookmarks();
+    };
+
     const searchInput = ref(null);
 
     onMounted(() => {
@@ -311,8 +319,7 @@ export default defineComponent({
               loadingBookmarks.value = false;
             }
           } else if (type === 'flashMessage') {
-            const $q = useQuasar();
-            $q.notify(jsonObject.message);
+            Notify.create(jsonObject.message);
           } else if (type === 'tokenQuery') {
             inputTokenDialog.value = true;
           }
@@ -389,7 +396,9 @@ export default defineComponent({
       selectedNoteFolderId,
       bookmarkEditDialog,
       addBookmarkDialog,
+      bookmarkAllTabsDialog,
       onBookmarkStored,
+      onBookmarksStored,
       editedBookmark,
       defaultBookmark,
       pagination,
@@ -409,7 +418,7 @@ export default defineComponent({
   },
   components: {
     AddBookmarkDialog,
-    // BookmarkAllTabsButton: BookmarkAllTabsButton,
+    BookmarkAllTabsDialog,
     // ImportBrowserBookmarksDialog: ImportBrowserBookmarksDialog,
     InputTokenDialog
   },