Работа над BookmarkSettings

client/components/ExternalLibs/BookmarkSettings/BookmarkSettings.vue

@@ -14,27 +14,27 @@
                         <q-icon v-if="search !== ''" name="la la-times" class="cursor-pointer" @click="resetSearch"/>
                     </template>
                 </q-input>
-                <q-btn round dense color="blue" icon="la la-cog" @click.stop="openOptions" size="14px">
-                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Опции</q-tooltip>
-                </q-btn>
             </div>
 
             <div class="col row">
                 <div class="left-panel column items-center bg-grey-3">
-                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-edit" @click.stop="editBookmark" size="14px" :disabled="!selected">
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Редактировать закладку</q-tooltip>
-                    </q-btn>
                     <q-btn class="q-mb-sm" round dense color="blue" icon="la la-plus" @click.stop="addBookmark" size="14px">
                         <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить закладку</q-tooltip>
                     </q-btn>
-                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-minus" @click.stop="delBookmark" size="14px">
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Удалить закладку</q-tooltip>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-minus" @click.stop="delBookmark" size="14px" :disabled="!ticked.length">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Удалить отмеченные закладки</q-tooltip>
+                    </q-btn>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-edit" @click.stop="editBookmark" size="14px" :disabled="!selected || selected.indexOf('-') < 0">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Редактировать закладку</q-tooltip>
+                    </q-btn>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-up" @click.stop="moveBookmark(false)" size="14px" :disabled="!ticked.length">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить отмеченные вверх</q-tooltip>
                     </q-btn>
-                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-up" @click.stop="moveUp" size="14px">
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить вверх</q-tooltip>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-down" @click.stop="moveBookmark(true)" size="14px" :disabled="!ticked.length">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить отмеченные вниз</q-tooltip>
                     </q-btn>
-                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-down" @click.stop="moveDown" size="14px">
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить вниз</q-tooltip>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-broom" @click.stop="setDefaultBookmarks" size="14px">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Установить по умолчанию</q-tooltip>
                     </q-btn>
                 </div>
 
@@ -65,9 +65,11 @@
 //-----------------------------------------------------------------------------
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import Window from '../../share/Window.vue';
+import _ from 'lodash';
 
+import Window from '../../share/Window.vue';
 import * as lu from '../linkUtils';
+import rstore from '../../../store/modules/reader';
 
 const BookmarkSettingsProps = Vue.extend({
     props: {
@@ -107,15 +109,13 @@ class BookmarkSettings extends BookmarkSettingsProps {
 
         const expanded = [];
         this.links = {};
-        let i = 0;
         this.libs.groups.forEach(group => {
-            const rkey = `${i}`;
+            const rkey = `r-${group.r}`;
             const g = {label: group.r, key: rkey, children: []};
             this.links[rkey] = {l: group.r, c: ''};
 
-            let j = 0;
             group.list.forEach(link => {
-                const key = `${i}-${j}`;
+                const key = link.l;
                 g.children.push({
                     label: (link.c ? link.c + ' ': '') + lu.removeOrigin(link.l),
                     key
@@ -126,11 +126,9 @@ class BookmarkSettings extends BookmarkSettingsProps {
                     expanded.push(rkey);
                 }
 
-                j++;
             });
 
             result.push(g);
-            i++;
         });
 
         if (this.afterInit) {
@@ -151,7 +149,7 @@ class BookmarkSettings extends BookmarkSettingsProps {
     openSelected() {
         if (!this.selected)
             return;
-        if (this.selected.indexOf('-') < 0) {//rootLink
+        if (this.selected.indexOf('r-') === 0) {//rootLink
             this.$emit('do-action', {action: 'setRootLink', data: this.links[this.selected].l});
         } else {//selectedLink
             this.$emit('do-action', {action: 'setSelectedLink', data: this.links[this.selected].l});
@@ -159,9 +157,6 @@ class BookmarkSettings extends BookmarkSettingsProps {
         this.close();
     }
 
-    openOptions() {
-    }
-
     editBookmark() {
         this.$emit('do-action', {action: 'editBookmark', data: {link: this.links[this.selected].l, desc: this.links[this.selected].c}});
     }
@@ -170,7 +165,41 @@ class BookmarkSettings extends BookmarkSettingsProps {
         this.$emit('do-action', {action: 'addBookmark'});
     }
 
-    delBookmark() {
+    async delBookmark() {
+        const newLibs = _.cloneDeep(this.libs);
+
+        if (await this.$root.stdDialog.confirm(`Подтвердите удаление ${this.ticked.length} закладок:`, ' ')) {
+            const ticked = new Set(this.ticked);
+            for (let i = newLibs.groups.length - 1; i >= 0; i--) {
+                const g = newLibs.groups[i];
+                for (let j = g.list.length - 1; j >= 0; j--) {
+                    if (ticked.has(g.list[j].l)) {
+                        delete g.list[j];
+                    }
+                }
+                g.list = g.list.filter(v => v);
+                if (!g.list.length)
+                    delete newLibs.groups[i];
+            }
+
+            newLibs.groups = newLibs.groups.filter(v => v);
+            this.ticked = [];
+            this.selected = '';
+            this.$emit('do-action', {action: 'setLibs', data: newLibs});
+        }
+    }
+
+    moveBookmark() {
+    }
+
+    async setDefaultBookmarks() {
+        const result = await this.$root.stdDialog.prompt(`Введите 'да' для сброса всех закладок в предустановленные значения:`, ' ', {
+            inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
+        });
+
+        if (result && result.value && result.value.toLowerCase() == 'да') {
+            this.$emit('do-action', {action: 'setLibs', data: _.cloneDeep(rstore.libsDefaults)});
+        }
     }
 
     close() {

client/components/ExternalLibs/ExternalLibs.vue

@@ -51,6 +51,11 @@
                             <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Загрузить URL во фрейм</q-tooltip>
                         </q-btn>
                     </template>
+                    <template v-slot:append>
+                        <q-btn round dense color="blue" icon="la la-cog" @click.stop="openOptions" size="12px">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Опции</q-tooltip>
+                        </q-btn>
+                    </template>
                 </q-input>
 
                 <q-btn rounded color="green-7" no-caps size="14px" @click="submitUrl">Открыть
@@ -263,8 +268,6 @@ class ExternalLibs extends Vue {
         } else if (d.type == 'libs') {
             this.ready = true;
             this.libs = _.cloneDeep(d.data);
-            if (!this.frameSrc)
-                this.goToLink(this.libs.startLink);
         } else if (d.type == 'notify') {
             this.$root.notify.success(d.data, '', {position: 'bottom-right'});
         }
@@ -291,8 +294,9 @@ class ExternalLibs extends Vue {
 
     loadLibs() {
         const libs = this.libs;
-        this.startLink = (libs.comment ? libs.comment + ' ': '') + lu.removeProtocol(libs.startLink);
+        this.startLink = libs.startLink;
         this.rootLink = lu.getOrigin(libs.startLink);
+
         this.updateSelectedLink();
     }
 
@@ -313,7 +317,7 @@ class ExternalLibs extends Vue {
     get header() {
         let result = (this.ready ? 'Библиотека' : 'Загрузка...');
         if (this.ready && this.startLink) {
-            result += ` | ${this.startLink}`;
+            result += ` | ${(this.libs.comment ? this.libs.comment + ' ': '') + lu.removeProtocol(this.startLink)}`;
         }
         this.$root.$emit('set-app-title', result);
         return result;
@@ -326,22 +330,37 @@ class ExternalLibs extends Vue {
     updateSelectedLink() {
         if (!this.ready)
             return;
-        const index = lu.getRootIndexByUrl(this.libs.groups, this.rootLink);
+
+        const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.rootLink);
         if (index >= 0)
             this.selectedLink = this.libs.groups[index].s;
+        else
+            this.selectedLink = '';
     }
 
     updateStartLink() {
         if (!this.ready)
             return;
-        const index = lu.getRootIndexByUrl(this.libs.groups, this.rootLink);
+        const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.rootLink);
         if (index >= 0) {
             let libs = _.cloneDeep(this.libs);
-            libs.groups[index].s = this.selectedLink;
-            libs.startLink = this.selectedLink;
-            libs.comment = this.getCommentByLink(libs.groups[index].list, this.selectedLink);
-            this.goToLink(this.selectedLink);
-            this.commitLibs(libs);
+            try {
+                if (lu.getOrigin(libs.groups[index].r) == lu.getOrigin(this.selectedLink)) {
+                    libs.groups[index].s = this.selectedLink;
+                    libs.startLink = this.selectedLink;
+                    libs.comment = this.getCommentByLink(libs.groups[index].list, this.selectedLink);
+                    this.goToLink(this.selectedLink);
+                    this.commitLibs(libs);
+                } else {
+                    console.error(`${lu.getOrigin(libs.groups[index].r)} != ${lu.getOrigin(this.selectedLink)}`);
+                }
+            } catch(e) {
+                console.log(e);
+            }
+        } else {
+            this.rootLink = '';
+            this.startLink = '';
+            this.frameVisible = false;
         }
     }
 
@@ -372,7 +391,7 @@ class ExternalLibs extends Vue {
         if (!this.ready)
             return result;
 
-        const index = lu.getRootIndexByUrl(this.libs.groups, this.rootLink);
+        const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.rootLink);
         if (index >= 0) {
             this.libs.groups[index].list.forEach(link => {
                 result.push({label: (link.c ? link.c + ' ': '') + lu.removeOrigin(link.l), value: link.l});
@@ -389,7 +408,7 @@ class ExternalLibs extends Vue {
     }
 
     goToLink(link) {
-        if (!this.ready)
+        if (!this.ready || !link)
             return;
 
         this.frameSrc = this.makeProxySubst(link);
@@ -464,7 +483,7 @@ class ExternalLibs extends Vue {
     }
 
     updateBookmarkLink() {
-        const index = lu.getRootIndexByUrl(rstore.libsDefaults.groups, this.defaultRootLink);
+        const index = lu.getSafeRootIndexByUrl(rstore.libsDefaults.groups, this.defaultRootLink);
         if (index >= 0) {
             this.bookmarkLink = rstore.libsDefaults.groups[index].s;
             this.bookmarkDesc = this.getCommentByLink(rstore.libsDefaults.groups[index].list, this.bookmarkLink);
@@ -487,6 +506,8 @@ class ExternalLibs extends Vue {
 
     bookmarkDescKeyDown(event) {
         if (event.key == 'Enter') {
+            event.stopPropagation();
+            event.preventDefault();
             this.okAddBookmark();
         }
     }
@@ -550,7 +571,7 @@ class ExternalLibs extends Vue {
             //добавляем сначала группу
             libs.groups.push({r: lu.getOrigin(link), s: link, list: []});
             
-            index = lu.getRootIndexByUrl(libs.groups, link);
+            index = lu.getSafeRootIndexByUrl(libs.groups, link);
             if (index >= 0)
                 libs.groups[index].list.push({l: link, c: this.bookmarkDesc});
 
@@ -603,6 +624,9 @@ class ExternalLibs extends Vue {
         this.bookmarkSettingsActive = false;
     }
 
+    openOptions() {
+    }
+
     keyHook(event) {
         if (this.$root.rootRoute() == '/external-libs') {
             if (this.$root.stdDialog.active)

client/components/ExternalLibs/linkUtils.js

@@ -20,7 +20,7 @@ export function removeOrigin(url) {
 }
 
 export function getRootIndexByUrl(groups, url) {
-    const origin = this.getOrigin(url);
+    const origin = getOrigin(url);
     for (let i = 0; i < groups.length; i++) {
         if (groups[i].r == origin)
             return i;
@@ -28,6 +28,16 @@ export function getRootIndexByUrl(groups, url) {
     return -1;
 }
 
+export function getSafeRootIndexByUrl(groups, url) {
+    let index = -1;
+    try {
+        index = getRootIndexByUrl(groups, url);
+    } catch(e) {
+        //
+    }
+    return index;
+}
+
 export function getListItemByLink(list, link) {
     for (const item of list) {
         if (item.l == link)