liberama/client/components/ExternalLibs/BookmarkSettings/BookmarkSettings.vue

<template>
    <Window ref="window" width="600px" height="95%" @close="close">
        <template slot="header">
            Настроить закладки
        </template>

        <div class="column fit">
            <div class="row items-center top-panel bg-grey-3">
                <q-btn class="q-mr-md" round dense color="blue" icon="la la-check" @click.stop="openSelected" size="16px" :disabled="!selected">
                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Открыть выбранную закладку</q-tooltip>
                </q-btn>
                <q-input class="col q-mr-sm" ref="search" rounded outlined dense bg-color="white" placeholder="Найти" v-model="search">
                    <template v-slot:append>
                        <q-icon v-if="search !== ''" name="la la-times" class="cursor-pointer" @click="resetSearch"/>
                    </template>
                </q-input>
            </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-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" :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-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-broom" @click.stop="setDefaultBookmarks" size="14px">
                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Установить по умолчанию</q-tooltip>
                    </q-btn>
                </div>

                <div class="col tree">
                    <q-tree
                      :nodes="nodes"
                      node-key="key"
                      tick-strategy="leaf"
                      :selected.sync="selected"
                      :ticked.sync="ticked"
                      :expanded.sync="expanded"
                      selected-color="black"
                      :filter="search"
                      no-nodes-label="Закладок пока нет"
                      no-results-label="Ничего не найдено"
                    >
                        <template v-slot:default-header="p">
                            <div class="q-px-xs" :class="{selected: selected == p.key}">{{ p.node.label }}</div>
                        </template>
                    </q-tree>
                </div>
            </div>
        </div>
    </Window>
</template>

<script>
//-----------------------------------------------------------------------------
import Vue from 'vue';
import Component from 'vue-class-component';
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: {
        libs: Object,
        addBookmarkVisible: Boolean,
    }
});

export default @Component({
    components: {
        Window,
    },
    watch: {
        libs: function() {
        },
    }    
})
class BookmarkSettings extends BookmarkSettingsProps {
    search = '';
    selected = '';
    ticked = [];
    expanded = [];

    created() {
        this.afterInit = true;
    }

    mounted() {
    }

    init() {
        this.$refs.window.init();
    }

    get nodes() {
        const result = [];

        const expanded = [];
        this.links = {};
        this.libs.groups.forEach(group => {
            const rkey = `r-${group.r}`;
            const g = {label: group.r, key: rkey, children: []};
            this.links[rkey] = {l: group.r, c: ''};

            group.list.forEach(link => {
                const key = link.l;
                g.children.push({
                    label: (link.c ? link.c + ' ': '') + lu.removeOrigin(link.l),
                    key
                });

                this.links[key] = link;
                if (link.l == this.libs.startLink && expanded.indexOf(rkey) < 0) {
                    expanded.push(rkey);
                }

            });

            result.push(g);
        });

        if (this.afterInit) {
            this.$nextTick(() => {
                this.expanded = expanded;
            });
            this.afterInit = false;
        }

        return result;
    }

    resetSearch() {
        this.search = '';
        this.$refs.search.focus();
    }

    openSelected() {
        if (!this.selected)
            return;
        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});
        }
        this.close();
    }

    editBookmark() {
        this.$emit('do-action', {action: 'editBookmark', data: {link: this.links[this.selected].l, desc: this.links[this.selected].c}});
    }

    addBookmark() {
        this.$emit('do-action', {action: 'addBookmark'});
    }

    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];
                else {
                    const item = lu.getListItemByLink(g.list, g.s);
                    if (!item)
                        g.s = g.list[0].l;
                }
            }

            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() {
        this.afterInit = false;
        this.$emit('close');
    }

    keyHook(event) {
        if (this.addBookmarkVisible)
            return false;

        if (event.type == 'keydown' && event.key == 'Escape') {
            this.close();
            return true;
        }
        return false;
    }

}
//-----------------------------------------------------------------------------
</script>

<style scoped>
.top-panel {
    height: 50px;
    border-bottom: 1px solid gray;
    padding: 0 10px 0 12px;
}

.left-panel {
    width: 60px;
    border-right: 1px solid gray;
    padding: 10px 0 10px 0;
}

.tree {
    padding: 10px;
}

.selected {
    text-shadow: 0 0 20px yellow, 0 0 15px yellow, 0 0 10px yellow, 0 0 10px yellow, 0 0 5px yellow;
}
</style>