mirror of
https://github.com/simon987/sist2.git
synced 2025-12-14 15:59:03 +00:00
SQLite search backend
This commit is contained in:
@@ -1,41 +1,56 @@
|
||||
<template>
|
||||
<b-card v-if="$store.state.sist2Info.showDebugInfo" class="mb-4 mt-4">
|
||||
<b-card-title><DebugIcon class="mr-1"></DebugIcon>{{ $t("debug") }}</b-card-title>
|
||||
<p v-html="$t('debugDescription')"></p>
|
||||
<b-card v-if="$store.state.sist2Info.showDebugInfo" class="mb-4 mt-4">
|
||||
<b-card-title>
|
||||
<DebugIcon class="mr-1"></DebugIcon>
|
||||
{{ $t("debug") }}
|
||||
</b-card-title>
|
||||
<p v-html="$t('debugDescription')"></p>
|
||||
|
||||
<b-card-body>
|
||||
<b-card-body>
|
||||
|
||||
<b-table :items="tableItems" small borderless responsive="md" thead-class="hidden" class="mb-0"></b-table>
|
||||
<b-table :items="tableItems" small borderless responsive="md" thead-class="hidden" class="mb-0"></b-table>
|
||||
|
||||
<hr />
|
||||
<IndexDebugInfo v-for="idx of $store.state.sist2Info.indices" :key="idx.id" :index="idx" class="mt-2"></IndexDebugInfo>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
<hr/>
|
||||
<IndexDebugInfo v-for="idx of $store.state.sist2Info.indices" :key="idx.id" :index="idx"
|
||||
class="mt-2"></IndexDebugInfo>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IndexDebugInfo from "@/components/IndexDebugInfo";
|
||||
import DebugIcon from "@/components/icons/DebugIcon";
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "DebugInfo.vue",
|
||||
components: {DebugIcon, IndexDebugInfo},
|
||||
computed: {
|
||||
tableItems() {
|
||||
return [
|
||||
{key: "version", value: this.$store.state.sist2Info.version},
|
||||
{key: "platform", value: this.$store.state.sist2Info.platform},
|
||||
{key: "debugBinary", value: this.$store.state.sist2Info.debug},
|
||||
{key: "sist2CommitHash", value: this.$store.state.sist2Info.sist2Hash},
|
||||
{key: "esIndex", value: this.$store.state.sist2Info.esIndex},
|
||||
{key: "tagline", value: this.$store.state.sist2Info.tagline},
|
||||
{key: "dev", value: this.$store.state.sist2Info.dev},
|
||||
{key: "mongooseVersion", value: this.$store.state.sist2Info.mongooseVersion},
|
||||
{key: "esVersion", value: this.$store.state.sist2Info.esVersion},
|
||||
{key: "esVersionSupported", value: this.$store.state.sist2Info.esVersionSupported},
|
||||
{key: "esVersionLegacy", value: this.$store.state.sist2Info.esVersionLegacy},
|
||||
]
|
||||
name: "DebugInfo.vue",
|
||||
components: {DebugIcon, IndexDebugInfo},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"uiSqliteMode",
|
||||
]),
|
||||
tableItems() {
|
||||
const items = [
|
||||
{key: "version", value: this.$store.state.sist2Info.version},
|
||||
{key: "platform", value: this.$store.state.sist2Info.platform},
|
||||
{key: "debugBinary", value: this.$store.state.sist2Info.debug},
|
||||
{key: "sist2CommitHash", value: this.$store.state.sist2Info.sist2Hash},
|
||||
{key: "esIndex", value: this.$store.state.sist2Info.esIndex},
|
||||
{key: "tagline", value: this.$store.state.sist2Info.tagline},
|
||||
{key: "dev", value: this.$store.state.sist2Info.dev},
|
||||
{key: "mongooseVersion", value: this.$store.state.sist2Info.mongooseVersion},
|
||||
];
|
||||
|
||||
if (!this.uiSqliteMode) {
|
||||
items.push(
|
||||
{key: "esVersion", value: this.$store.state.sist2Info.esVersion},
|
||||
{key: "esVersionSupported", value: this.$store.state.sist2Info.esVersionSupported},
|
||||
{key: "esVersionLegacy", value: this.$store.state.sist2Info.esVersionLegacy}
|
||||
);
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,44 +1,44 @@
|
||||
<template>
|
||||
<div class="doc-card" :class="{'sub-document': doc._props.isSubDocument}" :style="`width: ${width}px`"
|
||||
@click="$store.commit('busTnTouchStart', null)">
|
||||
<b-card
|
||||
no-body
|
||||
img-top
|
||||
>
|
||||
<!-- Info modal-->
|
||||
<DocInfoModal :show="showInfo" :doc="doc" @close="showInfo = false"></DocInfoModal>
|
||||
<div class="doc-card" :class="{'sub-document': doc._props.isSubDocument}" :style="`width: ${width}px`"
|
||||
@click="$store.commit('busTnTouchStart', null)">
|
||||
<b-card
|
||||
no-body
|
||||
img-top
|
||||
>
|
||||
<!-- Info modal-->
|
||||
<DocInfoModal :show="showInfo" :doc="doc" @close="showInfo = false"></DocInfoModal>
|
||||
|
||||
<ContentDiv :doc="doc"></ContentDiv>
|
||||
<ContentDiv :doc="doc"></ContentDiv>
|
||||
|
||||
<!-- Thumbnail-->
|
||||
<FullThumbnail :doc="doc" :small-badge="smallBadge" @onThumbnailClick="onThumbnailClick()"></FullThumbnail>
|
||||
<!-- Thumbnail-->
|
||||
<FullThumbnail :doc="doc" :small-badge="smallBadge" @onThumbnailClick="onThumbnailClick()"></FullThumbnail>
|
||||
|
||||
<!-- Audio player-->
|
||||
<audio v-if="doc._props.isAudio" ref="audio" preload="none" class="audio-fit fit" controls
|
||||
:type="doc._source.mime"
|
||||
:src="`f/${doc._id}`"
|
||||
@play="onAudioPlay()"></audio>
|
||||
<!-- Audio player-->
|
||||
<audio v-if="doc._props.isAudio" ref="audio" preload="none" class="audio-fit fit" controls
|
||||
:type="doc._source.mime"
|
||||
:src="`f/${doc._source.index}/${doc._id}`"
|
||||
@play="onAudioPlay()"></audio>
|
||||
|
||||
<b-card-body class="padding-03">
|
||||
<b-card-body class="padding-03">
|
||||
|
||||
<!-- Title line -->
|
||||
<div style="display: flex">
|
||||
<span class="info-icon" @click="onInfoClick()"></span>
|
||||
<DocFileTitle :doc="doc"></DocFileTitle>
|
||||
</div>
|
||||
<!-- Title line -->
|
||||
<div style="display: flex">
|
||||
<span class="info-icon" @click="onInfoClick()"></span>
|
||||
<DocFileTitle :doc="doc"></DocFileTitle>
|
||||
</div>
|
||||
|
||||
<!-- Featured line -->
|
||||
<div style="display: flex">
|
||||
<FeaturedFieldsLine :doc="doc"></FeaturedFieldsLine>
|
||||
</div>
|
||||
<!-- Featured line -->
|
||||
<div style="display: flex">
|
||||
<FeaturedFieldsLine :doc="doc"></FeaturedFieldsLine>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="card-text">
|
||||
<TagContainer :hit="doc"></TagContainer>
|
||||
</div>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</div>
|
||||
<!-- Tags -->
|
||||
<div class="card-text">
|
||||
<TagContainer :hit="doc"></TagContainer>
|
||||
</div>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -52,91 +52,91 @@ import FeaturedFieldsLine from "@/components/FeaturedFieldsLine";
|
||||
|
||||
|
||||
export default {
|
||||
components: {FeaturedFieldsLine, FullThumbnail, ContentDiv, DocInfoModal, DocFileTitle, TagContainer},
|
||||
props: ["doc", "width"],
|
||||
data() {
|
||||
return {
|
||||
ext: ext,
|
||||
showInfo: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
smallBadge() {
|
||||
return this.width < 150;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
humanFileSize: humanFileSize,
|
||||
humanTime: humanTime,
|
||||
onInfoClick() {
|
||||
this.showInfo = true;
|
||||
},
|
||||
async onThumbnailClick() {
|
||||
this.$store.commit("setUiLightboxSlide", this.doc._seq);
|
||||
await this.$store.dispatch("showLightbox");
|
||||
},
|
||||
onAudioPlay() {
|
||||
document.getElementsByTagName("audio").forEach((el) => {
|
||||
if (el !== this.$refs["audio"]) {
|
||||
el.pause();
|
||||
components: {FeaturedFieldsLine, FullThumbnail, ContentDiv, DocInfoModal, DocFileTitle, TagContainer},
|
||||
props: ["doc", "width"],
|
||||
data() {
|
||||
return {
|
||||
ext: ext,
|
||||
showInfo: false,
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
smallBadge() {
|
||||
return this.width < 150;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
humanFileSize: humanFileSize,
|
||||
humanTime: humanTime,
|
||||
onInfoClick() {
|
||||
this.showInfo = true;
|
||||
},
|
||||
async onThumbnailClick() {
|
||||
this.$store.commit("setUiLightboxSlide", this.doc._seq);
|
||||
await this.$store.dispatch("showLightbox");
|
||||
},
|
||||
onAudioPlay() {
|
||||
Array.prototype.slice.call(document.getElementsByTagName("audio")).forEach((el) => {
|
||||
if (el !== this.$refs["audio"]) {
|
||||
el.pause();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.fit {
|
||||
display: block;
|
||||
min-width: 64px;
|
||||
max-width: 100%;
|
||||
/*max-height: 400px;*/
|
||||
margin: 0 auto 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: block;
|
||||
min-width: 64px;
|
||||
max-width: 100%;
|
||||
/*max-height: 400px;*/
|
||||
margin: 0 auto 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.audio-fit {
|
||||
height: 39px;
|
||||
vertical-align: bottom;
|
||||
display: inline;
|
||||
width: 100%;
|
||||
height: 39px;
|
||||
vertical-align: bottom;
|
||||
display: inline;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.padding-03 {
|
||||
padding: 0.3rem;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-top: 1em;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .08) !important;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
margin-top: 1em;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .08) !important;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0.3rem;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.sub-document .card {
|
||||
background: #AB47BC1F !important;
|
||||
background: #AB47BC1F !important;
|
||||
}
|
||||
|
||||
.theme-black .sub-document .card {
|
||||
background: #37474F !important;
|
||||
background: #37474F !important;
|
||||
}
|
||||
|
||||
.sub-document .fit {
|
||||
padding: 4px 4px 0 4px;
|
||||
padding: 4px 4px 0 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a :href="`f/${doc._id}`" class="file-title-anchor" target="_blank">
|
||||
<a :href="`f/${doc._source.index}/${doc._id}`" class="file-title-anchor" target="_blank">
|
||||
<div class="file-title" :title="doc._source.path + '/' + doc._source.name + ext(doc)"
|
||||
v-html="fileName() + ext(doc)"></div>
|
||||
</a>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
|
||||
<img v-if="doc._props.isPlayableImage || doc._props.isPlayableVideo"
|
||||
:src="(doc._props.isGif && hover) ? `f/${doc._id}` : `t/${doc._source.index}/${doc._id}`"
|
||||
:src="(doc._props.isGif && hover) ? `f/${doc._source.index}/${doc._id}` : `t/${doc._source.index}/${doc._id}`"
|
||||
alt=""
|
||||
class="pointer fit-sm" @click="onThumbnailClick()">
|
||||
<img v-else :src="`t/${doc._source.index}/${doc._id}`" alt=""
|
||||
|
||||
@@ -71,7 +71,7 @@ export default {
|
||||
const doc = this.doc;
|
||||
const props = doc._props;
|
||||
if (props.isGif && this.hover) {
|
||||
return `f/${doc._id}`;
|
||||
return `f/${doc._source.index}/${doc._id}`;
|
||||
}
|
||||
return (this.currentThumbnailNum === 0)
|
||||
? `t/${doc._source.index}/${doc._id}`
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<b-progress v-if="mlLoading" variant="warning" show-progress :max="1" class="mb-3"
|
||||
>
|
||||
<b-progress-bar :value="modelLoadingProgress">
|
||||
<strong>{{ ((modelLoadingProgress * modelSize) / (1024*1024)).toFixed(1) }}MB / {{
|
||||
<strong>{{ ((modelLoadingProgress * modelSize) / (1024 * 1024)).toFixed(1) }}MB / {{
|
||||
(modelSize / (1024 * 1024)).toFixed(1)
|
||||
}}MB</strong>
|
||||
</b-progress-bar>
|
||||
@@ -36,7 +36,7 @@
|
||||
<script>
|
||||
import Sist2Api from "@/Sist2Api";
|
||||
import Preloader from "@/components/Preloader";
|
||||
import Sist2Query from "@/Sist2Query";
|
||||
import Sist2Query from "@/Sist2ElasticsearchQuery";
|
||||
import store from "@/store";
|
||||
import BertNerModel from "@/ml/BertNerModel";
|
||||
import AnalyzedContentSpansContainer from "@/components/AnalyzedContentSpanContainer.vue";
|
||||
@@ -69,58 +69,19 @@ export default {
|
||||
this.mlModel = ModelsRepo.getDefaultModel();
|
||||
}
|
||||
|
||||
const query = Sist2Query.searchQuery();
|
||||
Sist2Api
|
||||
.getDocument(this.docId, this.$store.state.optHighlight, this.$store.state.fuzzy)
|
||||
.then(doc => {
|
||||
this.loading = false;
|
||||
|
||||
if (this.$store.state.optHighlight) {
|
||||
const fields = this.$store.state.fuzzy
|
||||
? {"content.nGram": {}}
|
||||
: {content: {}};
|
||||
if (doc) {
|
||||
this.content = this.getContent(doc)
|
||||
}
|
||||
|
||||
query.highlight = {
|
||||
pre_tags: ["<mark>"],
|
||||
post_tags: ["</mark>"],
|
||||
number_of_fragments: 0,
|
||||
fields,
|
||||
};
|
||||
|
||||
if (!store.state.sist2Info.esVersionLegacy) {
|
||||
query.highlight.max_analyzed_offset = 999_999;
|
||||
}
|
||||
}
|
||||
|
||||
if ("function_score" in query.query) {
|
||||
query.query = query.query.function_score.query;
|
||||
}
|
||||
|
||||
if (!("must" in query.query.bool)) {
|
||||
query.query.bool.must = [];
|
||||
} else if (!Array.isArray(query.query.bool.must)) {
|
||||
query.query.bool.must = [query.query.bool.must];
|
||||
}
|
||||
|
||||
query.query.bool.must.push({match: {_id: this.docId}});
|
||||
|
||||
delete query["sort"];
|
||||
delete query["aggs"];
|
||||
delete query["search_after"];
|
||||
delete query.query["function_score"];
|
||||
|
||||
query._source = {
|
||||
includes: ["content", "name", "path", "extension"]
|
||||
}
|
||||
|
||||
query.size = 1;
|
||||
|
||||
Sist2Api.esQuery(query).then(resp => {
|
||||
this.loading = false;
|
||||
if (resp.hits.hits.length === 1) {
|
||||
this.content = this.getContent(resp.hits.hits[0]);
|
||||
}
|
||||
|
||||
if (this.optAutoAnalyze) {
|
||||
this.mlAnalyze();
|
||||
}
|
||||
});
|
||||
if (this.optAutoAnalyze) {
|
||||
this.mlAnalyze();
|
||||
}
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["optAutoAnalyze"]),
|
||||
|
||||
@@ -9,7 +9,7 @@ import InspireTreeDOM from "inspire-tree-dom";
|
||||
import "inspire-tree-dom/dist/inspire-tree-light.min.css";
|
||||
import {getSelectedTreeNodes, getTreeNodeAttributes} from "@/util";
|
||||
import Sist2Api from "@/Sist2Api";
|
||||
import Sist2Query from "@/Sist2Query";
|
||||
import Sist2Query from "@/Sist2ElasticsearchQuery";
|
||||
|
||||
export default {
|
||||
name: "MimePicker",
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<span class="badge badge-pill version" v-if="$store && $store.state.sist2Info">
|
||||
v{{ sist2Version() }}<span v-if="isDebug()">-dbg</span><span v-if="isLegacy() && !hideLegacy()">-<a
|
||||
href="https://github.com/simon987/sist2/blob/master/docs/USAGE.md#elasticsearch"
|
||||
target="_blank">legacyES</a></span>
|
||||
target="_blank">legacyES</a></span><span v-if="$store.state.uiSqliteMode">-SQLite</span>
|
||||
</span>
|
||||
|
||||
<span v-if="$store && $store.state.sist2Info" class="tagline" v-html="tagline()"></span>
|
||||
|
||||
@@ -1,40 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="input-group" style="margin-bottom: 0.5em; margin-top: 1em">
|
||||
<div class="input-group-prepend">
|
||||
<div>
|
||||
<div class="input-group" style="margin-bottom: 0.5em; margin-top: 1em">
|
||||
<div class="input-group-prepend">
|
||||
|
||||
<b-button variant="outline-secondary" @click="$refs['path-modal'].show()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="20px">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M288 224h224a32 32 0 0 0 32-32V64a32 32 0 0 0-32-32H400L368 0h-80a32 32 0 0 0-32 32v64H64V8a8 8 0 0 0-8-8H40a8 8 0 0 0-8 8v392a16 16 0 0 0 16 16h208v64a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V352a32 32 0 0 0-32-32H400l-32-32h-80a32 32 0 0 0-32 32v64H64V128h192v64a32 32 0 0 0 32 32zm0 96h66.74l32 32H512v128H288zm0-288h66.74l32 32H512v128H288z"
|
||||
/>
|
||||
</svg>
|
||||
</b-button>
|
||||
</div>
|
||||
<b-button variant="outline-secondary" @click="$refs['path-modal'].show()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="20px">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M288 224h224a32 32 0 0 0 32-32V64a32 32 0 0 0-32-32H400L368 0h-80a32 32 0 0 0-32 32v64H64V8a8 8 0 0 0-8-8H40a8 8 0 0 0-8 8v392a16 16 0 0 0 16 16h208v64a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V352a32 32 0 0 0-32-32H400l-32-32h-80a32 32 0 0 0-32 32v64H64V128h192v64a32 32 0 0 0 32 32zm0 96h66.74l32 32H512v128H288zm0-288h66.74l32 32H512v128H288z"
|
||||
/>
|
||||
</svg>
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<VueSimpleSuggest
|
||||
class="form-control-fix-flex"
|
||||
@input="setPathText"
|
||||
:value="getPathText"
|
||||
:list="suggestPath"
|
||||
:max-suggestions="0"
|
||||
:placeholder="$t('pathBar.placeholder')"
|
||||
:debounce="200"
|
||||
>
|
||||
<!-- Suggestion item template-->
|
||||
<div slot="suggestion-item" slot-scope="{ suggestion, query }">
|
||||
<div class="suggestion-line" :title="suggestion">
|
||||
<strong>{{ query }}</strong>{{ getSuggestionWithoutQueryPrefix(suggestion, query) }}
|
||||
</div>
|
||||
</div>
|
||||
</VueSimpleSuggest>
|
||||
|
||||
<VueSimpleSuggest
|
||||
class="form-control-fix-flex"
|
||||
@input="setPathText"
|
||||
:value="getPathText"
|
||||
:list="suggestPath"
|
||||
:max-suggestions="0"
|
||||
:placeholder="$t('pathBar.placeholder')"
|
||||
>
|
||||
<!-- Suggestion item template-->
|
||||
<div slot="suggestion-item" slot-scope="{ suggestion, query }">
|
||||
<div class="suggestion-line" :title="suggestion">
|
||||
<strong>{{ query }}</strong>{{ getSuggestionWithoutQueryPrefix(suggestion, query) }}
|
||||
</div>
|
||||
</div>
|
||||
</VueSimpleSuggest>
|
||||
|
||||
<b-modal ref="path-modal" :title="$t('pathBar.modalTitle')" size="lg" :hide-footer="true" static>
|
||||
<div id="pathTree"></div>
|
||||
</b-modal>
|
||||
</div>
|
||||
|
||||
<b-modal ref="path-modal" :title="$t('pathBar.modalTitle')" size="lg" :hide-footer="true" static>
|
||||
<div id="pathTree"></div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -48,198 +49,153 @@ import VueSimpleSuggest from 'vue-simple-suggest'
|
||||
import 'vue-simple-suggest/dist/styles.css' // Optional CSS
|
||||
|
||||
export default {
|
||||
name: "PathTree",
|
||||
components: {
|
||||
VueSimpleSuggest
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mimeTree: null,
|
||||
pathItems: [],
|
||||
tmpPath: ""
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["getPathText"])
|
||||
},
|
||||
mounted() {
|
||||
this.$store.subscribe((mutation) => {
|
||||
// Wait until indices are loaded to get the root paths
|
||||
if (mutation.type === "setIndices") {
|
||||
let pathTree = new InspireTree({
|
||||
data: (node, resolve, reject) => {
|
||||
return this.getNextDepth(node);
|
||||
},
|
||||
sort: "text"
|
||||
});
|
||||
|
||||
this.$store.state.indices.forEach(idx => {
|
||||
pathTree.addNode({
|
||||
id: "/" + idx.id,
|
||||
values: ["/" + idx.id],
|
||||
text: `/[${idx.name}]`,
|
||||
index: idx.id,
|
||||
depth: 0,
|
||||
children: true
|
||||
})
|
||||
});
|
||||
|
||||
new InspireTreeDOM(pathTree, {
|
||||
target: "#pathTree"
|
||||
});
|
||||
|
||||
pathTree.on("node.click", this.handleTreeClick);
|
||||
pathTree.expand();
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["setPathText"]),
|
||||
getSuggestionWithoutQueryPrefix(suggestion, query) {
|
||||
return suggestion.slice(query.length)
|
||||
name: "PathTree",
|
||||
components: {
|
||||
VueSimpleSuggest
|
||||
},
|
||||
async getPathChoices() {
|
||||
return new Promise(getPaths => {
|
||||
const q = {
|
||||
suggest: {
|
||||
path: {
|
||||
prefix: this.getPathText,
|
||||
completion: {
|
||||
field: "suggest-path",
|
||||
skip_duplicates: true,
|
||||
size: 10000
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
data() {
|
||||
return {
|
||||
mimeTree: null,
|
||||
pathItems: [],
|
||||
tmpPath: ""
|
||||
|
||||
Sist2Api.esQuery(q)
|
||||
.then(resp => getPaths(resp["suggest"]["path"][0]["options"].map(opt => opt["_source"]["path"])));
|
||||
})
|
||||
},
|
||||
async suggestPath(term) {
|
||||
if (!this.$store.state.optSuggestPath) {
|
||||
return []
|
||||
}
|
||||
|
||||
term = term.toLowerCase();
|
||||
|
||||
const choices = await this.getPathChoices();
|
||||
|
||||
let matches = [];
|
||||
for (let i = 0; i < choices.length; i++) {
|
||||
if (~choices[i].toLowerCase().indexOf(term)) {
|
||||
matches.push(choices[i]);
|
||||
}
|
||||
}
|
||||
return matches.sort((a, b) => a.length - b.length);
|
||||
},
|
||||
getNextDepth(node) {
|
||||
const q = {
|
||||
query: {
|
||||
bool: {
|
||||
filter: [
|
||||
{term: {index: node.index}},
|
||||
{range: {_depth: {gte: node.depth + 1, lte: node.depth + 3}}},
|
||||
]
|
||||
}
|
||||
},
|
||||
aggs: {
|
||||
paths: {
|
||||
terms: {
|
||||
field: "path",
|
||||
size: 10000
|
||||
computed: {
|
||||
...mapGetters(["getPathText"])
|
||||
},
|
||||
mounted() {
|
||||
this.$store.subscribe((mutation) => {
|
||||
// Wait until indices are loaded to get the root paths
|
||||
if (mutation.type === "setIndices") {
|
||||
let pathTree = new InspireTree({
|
||||
data: (node, resolve, reject) => {
|
||||
return this.getNextDepth(node);
|
||||
},
|
||||
sort: "text"
|
||||
});
|
||||
|
||||
this.$store.state.indices.forEach(idx => {
|
||||
pathTree.addNode({
|
||||
id: "/" + idx.id,
|
||||
values: ["/" + idx.id],
|
||||
text: `/[${idx.name}]`,
|
||||
index: idx.id,
|
||||
depth: 0,
|
||||
children: true
|
||||
})
|
||||
});
|
||||
|
||||
new InspireTreeDOM(pathTree, {
|
||||
target: "#pathTree"
|
||||
});
|
||||
|
||||
pathTree.on("node.click", this.handleTreeClick);
|
||||
pathTree.expand();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["setPathText"]),
|
||||
getSuggestionWithoutQueryPrefix(suggestion, query) {
|
||||
return suggestion.slice(query.length)
|
||||
},
|
||||
size: 0
|
||||
};
|
||||
async getPathChoices() {
|
||||
return new Promise(getPaths => {
|
||||
Sist2Api.getPathSuggestions(this.getPathText).then(getPaths);
|
||||
});
|
||||
},
|
||||
async suggestPath(term) {
|
||||
if (!this.$store.state.optSuggestPath) {
|
||||
return []
|
||||
}
|
||||
|
||||
if (node.depth > 0) {
|
||||
q.query.bool.must = {
|
||||
prefix: {
|
||||
path: node.id,
|
||||
}
|
||||
};
|
||||
}
|
||||
term = term.toLowerCase();
|
||||
|
||||
return Sist2Api.esQuery(q).then(resp => {
|
||||
const buckets = resp["aggregations"]["paths"]["buckets"];
|
||||
if (!buckets) {
|
||||
return false;
|
||||
}
|
||||
const choices = await this.getPathChoices();
|
||||
|
||||
const paths = [];
|
||||
let matches = [];
|
||||
for (let i = 0; i < choices.length; i++) {
|
||||
if (~choices[i].toLowerCase().indexOf(term)) {
|
||||
matches.push(choices[i]);
|
||||
}
|
||||
}
|
||||
return matches.sort((a, b) => a.length - b.length);
|
||||
},
|
||||
getNextDepth(node) {
|
||||
return Sist2Api
|
||||
.searchPaths(node.index, node.depth + 1, node.depth + 3, node.depth > 0 ? node.id : null)
|
||||
.then(buckets => {
|
||||
const paths = [];
|
||||
|
||||
return buckets
|
||||
.filter(bucket => bucket.key.length > node.id.length || node.id.startsWith("/"))
|
||||
.sort((a, b) => a.key > b.key)
|
||||
.map(bucket => {
|
||||
return buckets
|
||||
.filter(bucket => bucket.path.length > node.id.length || node.id.startsWith("/"))
|
||||
.sort((a, b) => a.path > b.path ? 1 : -1)
|
||||
.map(bucket => {
|
||||
if (paths.some(n => bucket.path.startsWith(n))) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (paths.some(n => bucket.key.startsWith(n))) {
|
||||
return null;
|
||||
}
|
||||
const name = node.id.startsWith("/") ? bucket.path : bucket.path.slice(node.id.length + 1);
|
||||
|
||||
const name = node.id.startsWith("/") ? bucket.key : bucket.key.slice(node.id.length + 1);
|
||||
paths.push(bucket.path);
|
||||
|
||||
paths.push(bucket.key);
|
||||
return {
|
||||
id: bucket.path,
|
||||
text: `${name}/ (${bucket.count})`,
|
||||
depth: node.depth + 1,
|
||||
index: node.index,
|
||||
values: [bucket.path],
|
||||
children: true,
|
||||
}
|
||||
})
|
||||
.filter(bucket => bucket !== null);
|
||||
});
|
||||
},
|
||||
handleTreeClick(e, node, handler) {
|
||||
if (node.depth !== 0) {
|
||||
this.setPathText(node.id);
|
||||
this.$refs['path-modal'].hide()
|
||||
|
||||
return {
|
||||
id: bucket.key,
|
||||
text: `${name}/ (${bucket.doc_count})`,
|
||||
depth: node.depth + 1,
|
||||
index: node.index,
|
||||
values: [bucket.key],
|
||||
children: true,
|
||||
}
|
||||
}).filter(x => x !== null)
|
||||
});
|
||||
this.$emit("search");
|
||||
}
|
||||
|
||||
handler();
|
||||
},
|
||||
},
|
||||
handleTreeClick(e, node, handler) {
|
||||
if (node.depth !== 0) {
|
||||
this.setPathText(node.id);
|
||||
this.$refs['path-modal'].hide()
|
||||
|
||||
this.$emit("search");
|
||||
}
|
||||
|
||||
handler();
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#mimeTree {
|
||||
max-height: 350px;
|
||||
overflow: auto;
|
||||
max-height: 350px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.form-control-fix-flex {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
min-width: 0;
|
||||
margin-bottom: 0;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
min-width: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.suggestion-line {
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.1;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.suggestions {
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.theme-black .suggestions {
|
||||
color: black
|
||||
color: black
|
||||
}
|
||||
</style>
|
||||
@@ -1,40 +1,46 @@
|
||||
<template>
|
||||
<b-card v-if="lastResultsLoaded" id="results">
|
||||
<span>{{ hitCount }} {{ hitCount === 1 ? $t("hit") : $t("hits") }}</span>
|
||||
<b-card v-if="lastResultsLoaded" id="results">
|
||||
<span>{{ hitCount }} {{ hitCount === 1 ? $t("hit") : $t("hits") }}</span>
|
||||
|
||||
<div style="float: right">
|
||||
<b-button v-b-toggle.collapse-1 variant="primary" class="not-mobile" @click="onToggle()">{{
|
||||
$t("details")
|
||||
}}
|
||||
</b-button>
|
||||
<div style="float: right">
|
||||
<b-button v-b-toggle.collapse-1 variant="primary" class="not-mobile" @click="onToggle()">{{
|
||||
$t("details")
|
||||
}}
|
||||
</b-button>
|
||||
|
||||
<template v-if="hitCount !== 0">
|
||||
<SortSelect class="ml-2"></SortSelect>
|
||||
<template v-if="hitCount !== 0">
|
||||
<SortSelect class="ml-2"></SortSelect>
|
||||
|
||||
<DisplayModeToggle class="ml-2"></DisplayModeToggle>
|
||||
</template>
|
||||
</div>
|
||||
<DisplayModeToggle class="ml-2"></DisplayModeToggle>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<b-collapse id="collapse-1" class="pt-2" style="clear:both;">
|
||||
<b-card>
|
||||
<b-table :items="tableItems" small borderless bordered thead-class="hidden" class="mb-0"></b-table>
|
||||
<b-collapse id="collapse-1" class="pt-2" style="clear:both;">
|
||||
<b-card>
|
||||
<b-table :items="tableItems" small borderless thead-class="hidden" class="mb-0"></b-table>
|
||||
|
||||
<br/>
|
||||
<h4>
|
||||
{{$t("mimeTypes")}}
|
||||
<b-button size="sm" variant="primary" class="float-right" @click="onCopyClick"><ClipboardIcon/></b-button>
|
||||
</h4>
|
||||
<Preloader v-if="$store.state.uiDetailsMimeAgg == null"></Preloader>
|
||||
<b-table
|
||||
v-else
|
||||
sort-by="doc_count"
|
||||
:sort-desc="true"
|
||||
thead-class="hidden"
|
||||
:items="$store.state.uiDetailsMimeAgg" small bordered class="mb-0"
|
||||
></b-table>
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
<template v-if="!$store.state.uiSqliteMode">
|
||||
|
||||
<br/>
|
||||
<h4>
|
||||
{{ $t("mimeTypes") }}
|
||||
<b-button size="sm" variant="primary" class="float-right" @click="onCopyClick">
|
||||
<ClipboardIcon/>
|
||||
</b-button>
|
||||
</h4>
|
||||
<Preloader v-if="$store.state.uiDetailsMimeAgg == null"></Preloader>
|
||||
<b-table
|
||||
v-else
|
||||
sort-by="doc_count"
|
||||
:sort-desc="true"
|
||||
thead-class="hidden"
|
||||
bordered
|
||||
:items="$store.state.uiDetailsMimeAgg" small class="mb-0"
|
||||
></b-table>
|
||||
</template>
|
||||
</b-card>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -44,91 +50,96 @@ import {humanFileSize} from "@/util";
|
||||
import DisplayModeToggle from "@/components/DisplayModeToggle.vue";
|
||||
import SortSelect from "@/components/SortSelect.vue";
|
||||
import Preloader from "@/components/Preloader.vue";
|
||||
import Sist2Query from "@/Sist2Query";
|
||||
import Sist2Query from "@/Sist2ElasticsearchQuery";
|
||||
import ClipboardIcon from "@/components/icons/ClipboardIcon.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: "ResultsCard",
|
||||
components: {ClipboardIcon, Preloader, SortSelect, DisplayModeToggle},
|
||||
created() {
|
||||
name: "ResultsCard",
|
||||
components: {ClipboardIcon, Preloader, SortSelect, DisplayModeToggle},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
lastResultsLoaded() {
|
||||
return this.$store.state.lastQueryResults != null;
|
||||
},
|
||||
hitCount() {
|
||||
return (this.$store.state.lastQueryResults as EsResult).aggregations.total_count.value;
|
||||
computed: {
|
||||
lastResultsLoaded() {
|
||||
return this.$store.state.lastQueryResults != null;
|
||||
},
|
||||
hitCount() {
|
||||
return (this.$store.state.firstQueryResults as EsResult).aggregations.total_count.value;
|
||||
},
|
||||
tableItems() {
|
||||
const items = [];
|
||||
|
||||
if (!this.$store.state.uiSqliteMode) {
|
||||
items.push({key: this.$t("queryTime"), value: this.took()});
|
||||
}
|
||||
items.push({key: this.$t("totalSize"), value: this.totalSize()});
|
||||
|
||||
return items;
|
||||
}
|
||||
},
|
||||
tableItems() {
|
||||
const items = [];
|
||||
methods: {
|
||||
took() {
|
||||
return (this.$store.state.lastQueryResults as EsResult).took + "ms";
|
||||
},
|
||||
totalSize() {
|
||||
return humanFileSize((this.$store.state.firstQueryResults as EsResult).aggregations.total_size.value);
|
||||
},
|
||||
onToggle() {
|
||||
const show = !document.getElementById("collapse-1").classList.contains("show");
|
||||
this.$store.commit("setUiShowDetails", show);
|
||||
|
||||
if (this.$store.state.uiSqliteMode) {
|
||||
return;
|
||||
}
|
||||
|
||||
items.push({key: this.$t("queryTime"), value: this.took()});
|
||||
items.push({key: this.$t("totalSize"), value: this.totalSize()});
|
||||
if (show && this.$store.state.uiDetailsMimeAgg == null && !this.$store.state.optUpdateMimeMap) {
|
||||
// Mime aggs are not updated automatically, update now
|
||||
this.forceUpdateMimeAgg();
|
||||
}
|
||||
},
|
||||
onCopyClick() {
|
||||
let tsvString = "";
|
||||
this.$store.state.uiDetailsMimeAgg.slice().sort((a, b) => b["doc_count"] - a["doc_count"]).forEach(row => {
|
||||
tsvString += `${row["key"]}\t${row["doc_count"]}\n`;
|
||||
});
|
||||
|
||||
return items;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
took() {
|
||||
return (this.$store.state.lastQueryResults as EsResult).took + "ms";
|
||||
navigator.clipboard.writeText(tsvString);
|
||||
|
||||
this.$bvToast.toast(
|
||||
this.$t("toast.copiedToClipboard"),
|
||||
{
|
||||
title: null,
|
||||
noAutoHide: false,
|
||||
toaster: "b-toaster-bottom-right",
|
||||
headerClass: "hidden",
|
||||
bodyClass: "toast-body-info",
|
||||
});
|
||||
},
|
||||
forceUpdateMimeAgg() {
|
||||
const query = Sist2Query.searchQuery();
|
||||
Sist2Api.getMimeTypes(query).then(({buckets}) => {
|
||||
this.$store.commit("setUiDetailsMimeAgg", buckets);
|
||||
});
|
||||
}
|
||||
},
|
||||
totalSize() {
|
||||
return humanFileSize((this.$store.state.lastQueryResults as EsResult).aggregations.total_size.value);
|
||||
},
|
||||
onToggle() {
|
||||
const show = !document.getElementById("collapse-1").classList.contains("show");
|
||||
this.$store.commit("setUiShowDetails", show);
|
||||
|
||||
if (show && this.$store.state.uiDetailsMimeAgg == null && !this.$store.state.optUpdateMimeMap) {
|
||||
// Mime aggs are not updated automatically, update now
|
||||
this.forceUpdateMimeAgg();
|
||||
}
|
||||
},
|
||||
onCopyClick() {
|
||||
let tsvString = "";
|
||||
this.$store.state.uiDetailsMimeAgg.slice().sort((a,b) => b["doc_count"] - a["doc_count"]).forEach(row => {
|
||||
tsvString += `${row["key"]}\t${row["doc_count"]}\n`;
|
||||
});
|
||||
|
||||
navigator.clipboard.writeText(tsvString);
|
||||
|
||||
this.$bvToast.toast(
|
||||
this.$t("toast.copiedToClipboard"),
|
||||
{
|
||||
title: null,
|
||||
noAutoHide: false,
|
||||
toaster: "b-toaster-bottom-right",
|
||||
headerClass: "hidden",
|
||||
bodyClass: "toast-body-info",
|
||||
});
|
||||
},
|
||||
forceUpdateMimeAgg() {
|
||||
const query = Sist2Query.searchQuery();
|
||||
Sist2Api.getMimeTypes(query).then(({buckets}) => {
|
||||
this.$store.commit("setUiDetailsMimeAgg", buckets);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#results {
|
||||
margin-top: 1em;
|
||||
margin-top: 1em;
|
||||
|
||||
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .08) !important;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .08) !important;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#results .card-body {
|
||||
padding: 0.7em 1.25em;
|
||||
padding: 0.7em 1.25em;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@
|
||||
@input="setSearchText($event)"></b-form-input>
|
||||
|
||||
<template #prepend>
|
||||
<b-input-group-text>
|
||||
<b-input-group-text v-if="!$store.state.uiSqliteMode">
|
||||
<b-form-checkbox :checked="fuzzy" title="Toggle fuzzy searching" @change="setFuzzy($event)">
|
||||
{{ $t("searchBar.fuzzy") }}
|
||||
</b-form-checkbox>
|
||||
|
||||
@@ -1,76 +1,78 @@
|
||||
<template>
|
||||
<div @mouseenter="showAddButton = true" @mouseleave="showAddButton = false">
|
||||
<div @mouseenter="showAddButton = true" @mouseleave="showAddButton = false">
|
||||
|
||||
<b-modal v-model="showModal" :title="$t('saveTagModalTitle')" hide-footer no-fade centered size="lg" static lazy>
|
||||
<b-row>
|
||||
<b-col style="flex-grow: 2" sm>
|
||||
<VueSimpleSuggest
|
||||
ref="suggest"
|
||||
:value="tagText"
|
||||
@select="setTagText($event)"
|
||||
@input="setTagText($event)"
|
||||
class="form-control-fix-flex"
|
||||
style="margin-top: 17px"
|
||||
:list="suggestTag"
|
||||
:max-suggestions="0"
|
||||
:placeholder="$t('saveTagPlaceholder')"
|
||||
>
|
||||
<!-- Suggestion item template-->
|
||||
<div slot="suggestion-item" slot-scope="{ suggestion, query}"
|
||||
>
|
||||
<div class="suggestion-line">
|
||||
<b-modal v-model="showModal" :title="$t('saveTagModalTitle')" hide-footer no-fade centered size="lg" static
|
||||
lazy>
|
||||
<b-row>
|
||||
<b-col style="flex-grow: 2" sm>
|
||||
<VueSimpleSuggest
|
||||
ref="suggest"
|
||||
:value="tagText"
|
||||
@select="setTagText($event)"
|
||||
@input="setTagText($event)"
|
||||
class="form-control-fix-flex"
|
||||
style="margin-top: 17px"
|
||||
:list="suggestTag"
|
||||
:max-suggestions="0"
|
||||
:placeholder="$t('saveTagPlaceholder')"
|
||||
>
|
||||
<!-- Suggestion item template-->
|
||||
<div slot="suggestion-item" slot-scope="{ suggestion, query}"
|
||||
>
|
||||
<div class="suggestion-line">
|
||||
<span
|
||||
class="badge badge-suggestion"
|
||||
:style="{background: getBg(suggestion), color: getFg(suggestion)}"
|
||||
class="badge badge-suggestion"
|
||||
:style="{background: getBg(suggestion), color: getFg(suggestion)}"
|
||||
>
|
||||
<strong>{{ query }}</strong>{{ getSuggestionWithoutQueryPrefix(suggestion, query) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</VueSimpleSuggest>
|
||||
</b-col>
|
||||
<b-col class="mt-4">
|
||||
<TwitterColorPicker v-model="color" triangle="hide" :width="252" class="mr-auto ml-auto"></TwitterColorPicker>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
</VueSimpleSuggest>
|
||||
</b-col>
|
||||
<b-col class="mt-4">
|
||||
<TwitterColorPicker v-model="color" triangle="hide" :width="252"
|
||||
class="mr-auto ml-auto"></TwitterColorPicker>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-button variant="primary" style="float: right" class="mt-2" @click="saveTag()">{{ $t("confirm") }}
|
||||
</b-button>
|
||||
</b-modal>
|
||||
<b-button variant="primary" style="float: right" class="mt-2" @click="saveTag()">{{ $t("confirm") }}
|
||||
</b-button>
|
||||
</b-modal>
|
||||
|
||||
|
||||
<template v-for="tag in hit._tags">
|
||||
<!-- User tag-->
|
||||
<div v-if="tag.userTag" :key="tag.rawText" style="display: inline-block">
|
||||
<template v-for="tag in hit._tags">
|
||||
<!-- User tag-->
|
||||
<div v-if="tag.userTag" :key="tag.rawText" style="display: inline-block">
|
||||
<span
|
||||
:id="hit._id+tag.rawText"
|
||||
:title="tag.text"
|
||||
tabindex="-1"
|
||||
class="badge pointer"
|
||||
:style="badgeStyle(tag)" :class="badgeClass(tag)"
|
||||
@click.right="onTagRightClick(tag, $event)"
|
||||
:id="hit._id+tag.rawText"
|
||||
:title="tag.text"
|
||||
tabindex="-1"
|
||||
class="badge pointer"
|
||||
:style="badgeStyle(tag)" :class="badgeClass(tag)"
|
||||
@click.right="onTagRightClick(tag, $event)"
|
||||
>{{ tag.text.split(".").pop() }}</span>
|
||||
|
||||
<b-popover :target="hit._id+tag.rawText" triggers="focus blur" placement="top">
|
||||
<b-button variant="danger" @click="onTagDeleteClick(tag, $event)">{{ $t("deleteTag") }}</b-button>
|
||||
</b-popover>
|
||||
</div>
|
||||
<b-popover :target="hit._id+tag.rawText" triggers="focus blur" placement="top">
|
||||
<b-button variant="danger" @click="onTagDeleteClick(tag, $event)">{{ $t("deleteTag") }}</b-button>
|
||||
</b-popover>
|
||||
</div>
|
||||
|
||||
<span
|
||||
v-else :key="tag.text"
|
||||
class="badge"
|
||||
:style="badgeStyle(tag)" :class="badgeClass(tag)"
|
||||
>{{ tag.text.split(".").pop() }}</span>
|
||||
</template>
|
||||
<span
|
||||
v-else :key="tag.text"
|
||||
class="badge"
|
||||
:style="badgeStyle(tag)" :class="badgeClass(tag)"
|
||||
>{{ tag.text.split(".").pop() }}</span>
|
||||
</template>
|
||||
|
||||
<!-- Add button -->
|
||||
<small v-if="showAddButton" class="badge add-tag-button" @click="tagAdd()">{{$t("addTag")}}</small>
|
||||
<!-- Add button -->
|
||||
<small v-if="showAddButton" class="badge add-tag-button" @click="tagAdd()">{{ $t("addTag") }}</small>
|
||||
|
||||
<!-- Size tag-->
|
||||
<small v-else class="text-muted badge-size" style="padding-left: 2px">{{
|
||||
humanFileSize(hit._source.size)
|
||||
}}</small>
|
||||
</div>
|
||||
<!-- Size tag-->
|
||||
<small v-else class="text-muted badge-size" style="padding-left: 2px">{{
|
||||
humanFileSize(hit._source.size)
|
||||
}}</small>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -81,170 +83,136 @@ import Sist2Api from "@/Sist2Api";
|
||||
import VueSimpleSuggest from 'vue-simple-suggest'
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
"TwitterColorPicker": Twitter,
|
||||
VueSimpleSuggest
|
||||
},
|
||||
props: ["hit"],
|
||||
data() {
|
||||
return {
|
||||
showAddButton: false,
|
||||
showModal: false,
|
||||
tagText: null,
|
||||
color: {
|
||||
hex: "#e0e0e0",
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tagHover() {
|
||||
return this.$store.getters["uiTagHover"];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
humanFileSize: humanFileSize,
|
||||
getSuggestionWithoutQueryPrefix(suggestion, query) {
|
||||
return suggestion.id.slice(query.length, -8)
|
||||
components: {
|
||||
"TwitterColorPicker": Twitter,
|
||||
VueSimpleSuggest
|
||||
},
|
||||
getBg(suggestion) {
|
||||
return suggestion.id.slice(-7);
|
||||
},
|
||||
getFg(suggestion) {
|
||||
return lum(suggestion.id.slice(-7)) > 50 ? "#000" : "#fff";
|
||||
},
|
||||
setTagText(value) {
|
||||
this.$refs.suggest.clearSuggestions();
|
||||
|
||||
if (typeof value === "string") {
|
||||
this.tagText = {
|
||||
id: value,
|
||||
title: value
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
this.color = {
|
||||
hex: "#" + value.id.split("#")[1]
|
||||
}
|
||||
|
||||
this.tagText = value;
|
||||
},
|
||||
badgeClass(tag) {
|
||||
return `badge-${tag.style}`;
|
||||
},
|
||||
badgeStyle(tag) {
|
||||
return {
|
||||
background: tag.bg,
|
||||
color: tag.fg,
|
||||
};
|
||||
},
|
||||
onTagHover(tag) {
|
||||
if (tag.userTag) {
|
||||
this.$store.commit("setUiTagHover", tag);
|
||||
}
|
||||
},
|
||||
onTagLeave() {
|
||||
this.$store.commit("setUiTagHover", null);
|
||||
},
|
||||
onTagDeleteClick(tag, e) {
|
||||
this.hit._tags = this.hit._tags.filter(t => t !== tag);
|
||||
|
||||
Sist2Api.deleteTag(tag.rawText, this.hit).then(() => {
|
||||
//toast
|
||||
this.$store.commit("busUpdateWallItems");
|
||||
this.$store.commit("busUpdateTags");
|
||||
});
|
||||
},
|
||||
tagAdd() {
|
||||
this.showModal = true;
|
||||
},
|
||||
saveTag() {
|
||||
if (this.tagText.id.includes("#")) {
|
||||
this.$bvToast.toast(
|
||||
this.$t("toast.invalidTag"),
|
||||
{
|
||||
title: this.$t("toast.invalidTagTitle"),
|
||||
noAutoHide: true,
|
||||
toaster: "b-toaster-bottom-right",
|
||||
headerClass: "toast-header-error",
|
||||
bodyClass: "toast-body-error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let tag = this.tagText.id + this.color.hex.replace("#", ".#");
|
||||
const userTags = this.hit._tags.filter(t => t.userTag);
|
||||
|
||||
if (userTags.find(t => t.rawText === tag) != null) {
|
||||
this.$bvToast.toast(
|
||||
this.$t("toast.dupeTag"),
|
||||
{
|
||||
title: this.$t("toast.dupeTagTitle"),
|
||||
noAutoHide: true,
|
||||
toaster: "b-toaster-bottom-right",
|
||||
headerClass: "toast-header-error",
|
||||
bodyClass: "toast-body-error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.hit._tags.push(Sist2Api.createUserTag(tag));
|
||||
|
||||
Sist2Api.saveTag(tag, this.hit).then(() => {
|
||||
this.tagText = null;
|
||||
this.showModal = false;
|
||||
this.$store.commit("busUpdateWallItems");
|
||||
this.$store.commit("busUpdateTags");
|
||||
// TODO: toast
|
||||
});
|
||||
},
|
||||
async suggestTag(term) {
|
||||
term = term.toLowerCase();
|
||||
|
||||
const choices = await this.getTagChoices(term);
|
||||
|
||||
let matches = [];
|
||||
for (let i = 0; i < choices.length; i++) {
|
||||
if (~choices[i].toLowerCase().indexOf(term)) {
|
||||
matches.push(choices[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return matches.sort().map(match => {
|
||||
props: ["hit"],
|
||||
data() {
|
||||
return {
|
||||
title: match.split(".").slice(0, -1).join("."),
|
||||
id: match
|
||||
showAddButton: false,
|
||||
showModal: false,
|
||||
tagText: null,
|
||||
color: {
|
||||
hex: "#e0e0e0",
|
||||
},
|
||||
}
|
||||
});
|
||||
},
|
||||
getTagChoices(prefix) {
|
||||
return new Promise(getPaths => {
|
||||
Sist2Api.esQuery({
|
||||
suggest: {
|
||||
tag: {
|
||||
prefix: prefix,
|
||||
completion: {
|
||||
field: "suggest-tag",
|
||||
skip_duplicates: true,
|
||||
size: 10000
|
||||
}
|
||||
methods: {
|
||||
humanFileSize: humanFileSize,
|
||||
getSuggestionWithoutQueryPrefix(suggestion, query) {
|
||||
return suggestion.id.slice(query.length, -8)
|
||||
},
|
||||
getBg(suggestion) {
|
||||
return suggestion.id.slice(-7);
|
||||
},
|
||||
getFg(suggestion) {
|
||||
return lum(suggestion.id.slice(-7)) > 50 ? "#000" : "#fff";
|
||||
},
|
||||
setTagText(value) {
|
||||
this.$refs.suggest.clearSuggestions();
|
||||
|
||||
if (typeof value === "string") {
|
||||
this.tagText = {
|
||||
id: value,
|
||||
title: value
|
||||
};
|
||||
return;
|
||||
}
|
||||
}
|
||||
}).then(resp => {
|
||||
const result = [];
|
||||
resp["suggest"]["tag"][0]["options"].map(opt => opt["_source"]["tag"]).forEach(tags => {
|
||||
tags.forEach(tag => {
|
||||
const t = tag.slice(0, -8);
|
||||
if (!result.find(x => x.slice(0, -8) === t)) {
|
||||
result.push(tag);
|
||||
}
|
||||
|
||||
this.color = {
|
||||
hex: "#" + value.id.split("#")[1]
|
||||
}
|
||||
|
||||
this.tagText = value;
|
||||
},
|
||||
badgeClass(tag) {
|
||||
return `badge-${tag.style}`;
|
||||
},
|
||||
badgeStyle(tag) {
|
||||
return {
|
||||
background: tag.bg,
|
||||
color: tag.fg,
|
||||
};
|
||||
},
|
||||
onTagDeleteClick(tag, e) {
|
||||
this.hit._tags = this.hit._tags.filter(t => t !== tag);
|
||||
|
||||
Sist2Api.deleteTag(tag.rawText, this.hit).then(() => {
|
||||
//toast
|
||||
this.$store.commit("busUpdateWallItems");
|
||||
this.$store.commit("busUpdateTags");
|
||||
});
|
||||
});
|
||||
getPaths(result);
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
tagAdd() {
|
||||
this.showModal = true;
|
||||
},
|
||||
saveTag() {
|
||||
if (this.tagText.id.includes("#")) {
|
||||
this.$bvToast.toast(
|
||||
this.$t("toast.invalidTag"),
|
||||
{
|
||||
title: this.$t("toast.invalidTagTitle"),
|
||||
noAutoHide: true,
|
||||
toaster: "b-toaster-bottom-right",
|
||||
headerClass: "toast-header-error",
|
||||
bodyClass: "toast-body-error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let tag = this.tagText.id + this.color.hex.replace("#", ".#");
|
||||
const userTags = this.hit._tags.filter(t => t.userTag);
|
||||
|
||||
if (userTags.find(t => t.rawText === tag) != null) {
|
||||
this.$bvToast.toast(
|
||||
this.$t("toast.dupeTag"),
|
||||
{
|
||||
title: this.$t("toast.dupeTagTitle"),
|
||||
noAutoHide: true,
|
||||
toaster: "b-toaster-bottom-right",
|
||||
headerClass: "toast-header-error",
|
||||
bodyClass: "toast-body-error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.hit._tags.push(Sist2Api.createUserTag(tag));
|
||||
|
||||
Sist2Api.saveTag(tag, this.hit).then(() => {
|
||||
this.tagText = null;
|
||||
this.showModal = false;
|
||||
this.$store.commit("busUpdateWallItems");
|
||||
this.$store.commit("busUpdateTags");
|
||||
// TODO: toast
|
||||
});
|
||||
},
|
||||
async suggestTag(term) {
|
||||
term = term.toLowerCase();
|
||||
|
||||
const choices = await this.getTagChoices(term);
|
||||
|
||||
let matches = [];
|
||||
for (let i = 0; i < choices.length; i++) {
|
||||
if (~choices[i].toLowerCase().indexOf(term)) {
|
||||
matches.push(choices[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return matches.sort().map(match => {
|
||||
return {
|
||||
title: match.split(".").slice(0, -1).join("."),
|
||||
id: match
|
||||
}
|
||||
});
|
||||
},
|
||||
getTagChoices(prefix) {
|
||||
return new Promise(getPaths => {
|
||||
Sist2Api.getTagSuggestions(prefix)
|
||||
.then(paths => getPaths(paths))
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -252,87 +220,87 @@ export default Vue.extend({
|
||||
|
||||
|
||||
.badge-video {
|
||||
color: #FFFFFF;
|
||||
background-color: #F27761;
|
||||
color: #FFFFFF;
|
||||
background-color: #F27761;
|
||||
}
|
||||
|
||||
.badge-image {
|
||||
color: #FFFFFF;
|
||||
background-color: #AA99C9;
|
||||
color: #FFFFFF;
|
||||
background-color: #AA99C9;
|
||||
}
|
||||
|
||||
.badge-audio {
|
||||
color: #FFFFFF;
|
||||
background-color: #00ADEF;
|
||||
color: #FFFFFF;
|
||||
background-color: #00ADEF;
|
||||
}
|
||||
|
||||
.badge-user {
|
||||
color: #212529;
|
||||
background-color: #e0e0e0;
|
||||
color: #212529;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.badge-user:hover, .add-tag-button:hover {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
color: #FFFFFF;
|
||||
background-color: #FAAB3C;
|
||||
color: #FFFFFF;
|
||||
background-color: #FAAB3C;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-right: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.badge-delete {
|
||||
margin-right: -2px;
|
||||
margin-left: 2px;
|
||||
margin-top: -1px;
|
||||
font-family: monospace;
|
||||
font-size: 90%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
padding: 0.1em 0.4em;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
margin-right: -2px;
|
||||
margin-left: 2px;
|
||||
margin-top: -1px;
|
||||
font-family: monospace;
|
||||
font-size: 90%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
padding: 0.1em 0.4em;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.badge-size {
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.add-tag-button {
|
||||
cursor: pointer;
|
||||
color: #212529;
|
||||
background-color: #e0e0e0;
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
color: #212529;
|
||||
background-color: #e0e0e0;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.badge-suggestion {
|
||||
font-size: 90%;
|
||||
font-weight: normal;
|
||||
font-size: 90%;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.vc-twitter-body {
|
||||
padding: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.vc-twitter {
|
||||
box-shadow: none !important;
|
||||
background: none !important;
|
||||
box-shadow: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-input-group v-if="showSearchBar" id="tag-picker-filter-bar">
|
||||
<b-form-input :value="filter"
|
||||
:placeholder="$t('tagFilter')"
|
||||
@input="onFilter($event)"></b-form-input>
|
||||
</b-input-group>
|
||||
<div>
|
||||
<b-input-group v-if="showSearchBar" id="tag-picker-filter-bar">
|
||||
<b-form-input :value="filter"
|
||||
:placeholder="$t('tagFilter')"
|
||||
@input="onFilter($event)"></b-form-input>
|
||||
</b-input-group>
|
||||
|
||||
<div id="tagTree"></div>
|
||||
</div>
|
||||
<div id="tagTree"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -19,191 +19,195 @@ import {getSelectedTreeNodes} from "@/util";
|
||||
import Sist2Api from "@/Sist2Api";
|
||||
|
||||
function resetState(node) {
|
||||
node._tree.defaultState.forEach(function (val, prop) {
|
||||
node.state(prop, val);
|
||||
});
|
||||
node._tree.defaultState.forEach(function (val, prop) {
|
||||
node.state(prop, val);
|
||||
});
|
||||
|
||||
return node;
|
||||
return node;
|
||||
}
|
||||
|
||||
function baseStateChange(prop, value, verb, node, deep) {
|
||||
if (node.state(prop) !== value) {
|
||||
node._tree.batch();
|
||||
if (node.state(prop) !== value) {
|
||||
node._tree.batch();
|
||||
|
||||
if (node._tree.config.nodes.resetStateOnRestore && verb === 'restored') {
|
||||
resetState(node);
|
||||
if (node._tree.config.nodes.resetStateOnRestore && verb === 'restored') {
|
||||
resetState(node);
|
||||
}
|
||||
|
||||
node.state(prop, value);
|
||||
|
||||
node._tree.emit('node.' + verb, node, false);
|
||||
|
||||
if (deep && node.hasChildren()) {
|
||||
node.children.recurseDown(function (child) {
|
||||
baseStateChange(prop, value, verb, child);
|
||||
});
|
||||
}
|
||||
|
||||
node.markDirty();
|
||||
node._tree.end();
|
||||
}
|
||||
|
||||
node.state(prop, value);
|
||||
|
||||
node._tree.emit('node.' + verb, node, false);
|
||||
|
||||
if (deep && node.hasChildren()) {
|
||||
node.children.recurseDown(function (child) {
|
||||
baseStateChange(prop, value, verb, child);
|
||||
});
|
||||
}
|
||||
|
||||
node.markDirty();
|
||||
node._tree.end();
|
||||
}
|
||||
|
||||
return node;
|
||||
return node;
|
||||
}
|
||||
|
||||
function addTag(map, tag, id, count) {
|
||||
const tags = tag.split(".");
|
||||
const tags = tag.split(".");
|
||||
|
||||
const child = {
|
||||
id: id,
|
||||
count: count,
|
||||
text: tags.length !== 1 ? tags[0] : `${tags[0]} (${count})`,
|
||||
name: tags[0],
|
||||
children: [],
|
||||
// Overwrite base functions
|
||||
blur: function () {
|
||||
// noop
|
||||
},
|
||||
select: function () {
|
||||
this.state("selected", true);
|
||||
return this.check()
|
||||
},
|
||||
deselect: function () {
|
||||
this.state("selected", false);
|
||||
return this.uncheck()
|
||||
},
|
||||
uncheck: function () {
|
||||
baseStateChange('checked', false, 'unchecked', this, false);
|
||||
this.state('indeterminate', false);
|
||||
const child = {
|
||||
id: id,
|
||||
count: count,
|
||||
text: tags.length !== 1 ? tags[0] : `${tags[0]} (${count})`,
|
||||
name: tags[0],
|
||||
children: [],
|
||||
// Overwrite base functions
|
||||
blur: function () {
|
||||
// noop
|
||||
},
|
||||
select: function () {
|
||||
this.state("selected", true);
|
||||
return this.check()
|
||||
},
|
||||
deselect: function () {
|
||||
this.state("selected", false);
|
||||
return this.uncheck()
|
||||
},
|
||||
uncheck: function () {
|
||||
baseStateChange('checked', false, 'unchecked', this, false);
|
||||
this.state('indeterminate', false);
|
||||
|
||||
if (this.hasParent()) {
|
||||
this.getParent().refreshIndeterminateState();
|
||||
}
|
||||
if (this.hasParent()) {
|
||||
this.getParent().refreshIndeterminateState();
|
||||
}
|
||||
|
||||
this._tree.end();
|
||||
return this;
|
||||
},
|
||||
check: function () {
|
||||
baseStateChange('checked', true, 'checked', this, false);
|
||||
this._tree.end();
|
||||
return this;
|
||||
},
|
||||
check: function () {
|
||||
baseStateChange('checked', true, 'checked', this, false);
|
||||
|
||||
if (this.hasParent()) {
|
||||
this.getParent().refreshIndeterminateState();
|
||||
}
|
||||
if (this.hasParent()) {
|
||||
this.getParent().refreshIndeterminateState();
|
||||
}
|
||||
|
||||
this._tree.end();
|
||||
return this;
|
||||
this._tree.end();
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
let found = false;
|
||||
map.forEach(node => {
|
||||
if (node.name === child.name) {
|
||||
found = true;
|
||||
if (tags.length !== 1) {
|
||||
addTag(node.children, tags.slice(1).join("."), id, count);
|
||||
} else {
|
||||
// Same name, different color
|
||||
console.error("FIXME: Duplicate tag?")
|
||||
console.trace(node)
|
||||
}
|
||||
}
|
||||
});
|
||||
if (!found) {
|
||||
if (tags.length !== 1) {
|
||||
addTag(child.children, tags.slice(1).join("."), id, count);
|
||||
map.push(child);
|
||||
} else {
|
||||
map.push(child);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let found = false;
|
||||
map.forEach(node => {
|
||||
if (node.name === child.name) {
|
||||
found = true;
|
||||
if (tags.length !== 1) {
|
||||
addTag(node.children, tags.slice(1).join("."), id, count);
|
||||
} else {
|
||||
// Same name, different color
|
||||
console.error("FIXME: Duplicate tag?")
|
||||
console.trace(node)
|
||||
}
|
||||
}
|
||||
});
|
||||
if (!found) {
|
||||
if (tags.length !== 1) {
|
||||
addTag(child.children, tags.slice(1).join("."), id, count);
|
||||
map.push(child);
|
||||
} else {
|
||||
map.push(child);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "TagPicker",
|
||||
props: ["showSearchBar"],
|
||||
data() {
|
||||
return {
|
||||
tagTree: null,
|
||||
loadedFromArgs: false,
|
||||
filter: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.subscribe((mutation) => {
|
||||
if (mutation.type === "setUiMimeMap" && this.tagTree === null) {
|
||||
this.initializeTree();
|
||||
this.updateTree();
|
||||
} else if (mutation.type === "busUpdateTags") {
|
||||
window.setTimeout(this.updateTree, 2000);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onFilter(value) {
|
||||
this.filter = value;
|
||||
this.tagTree.search(value);
|
||||
},
|
||||
initializeTree() {
|
||||
const tagMap = [];
|
||||
this.tagTree = new InspireTree({
|
||||
selection: {
|
||||
mode: "checkbox",
|
||||
autoDeselect: false,
|
||||
},
|
||||
checkbox: {
|
||||
autoCheckChildren: false,
|
||||
},
|
||||
data: tagMap
|
||||
});
|
||||
new InspireTreeDOM(this.tagTree, {
|
||||
target: '#tagTree'
|
||||
});
|
||||
this.tagTree.on("node.state.changed", this.handleTreeClick);
|
||||
},
|
||||
updateTree() {
|
||||
// TODO: remember which tags are selected and restore?
|
||||
const tagMap = [];
|
||||
Sist2Api.getTags().then(tags => {
|
||||
tags.forEach(tag => addTag(tagMap, tag.id, tag.id, tag.count));
|
||||
this.tagTree.removeAll();
|
||||
this.tagTree.addNodes(tagMap);
|
||||
|
||||
if (this.$store.state._onLoadSelectedTags.length > 0 && !this.loadedFromArgs) {
|
||||
this.$store.state._onLoadSelectedTags.forEach(mime => {
|
||||
this.tagTree.node(mime).select();
|
||||
this.loadedFromArgs = true;
|
||||
});
|
||||
name: "TagPicker",
|
||||
props: ["showSearchBar"],
|
||||
data() {
|
||||
return {
|
||||
tagTree: null,
|
||||
loadedFromArgs: false,
|
||||
filter: ""
|
||||
}
|
||||
});
|
||||
},
|
||||
handleTreeClick(node, e) {
|
||||
if (e === "indeterminate" || e === "collapsed" || e === 'rendered' || e === "focused"
|
||||
|| e === "matched" || e === "hidden") {
|
||||
return;
|
||||
}
|
||||
mounted() {
|
||||
this.$store.subscribe((mutation) => {
|
||||
if (mutation.type === "setUiMimeMap" && this.tagTree === null) {
|
||||
this.initializeTree();
|
||||
this.updateTree();
|
||||
} else if (mutation.type === "busUpdateTags") {
|
||||
if (this.$store.state.uiSqliteMode) {
|
||||
this.updateTree();
|
||||
} else {
|
||||
window.setTimeout(this.updateTree, 2000);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onFilter(value) {
|
||||
this.filter = value;
|
||||
this.tagTree.search(value);
|
||||
},
|
||||
initializeTree() {
|
||||
const tagMap = [];
|
||||
this.tagTree = new InspireTree({
|
||||
selection: {
|
||||
mode: "checkbox",
|
||||
autoDeselect: false,
|
||||
},
|
||||
checkbox: {
|
||||
autoCheckChildren: false,
|
||||
},
|
||||
data: tagMap
|
||||
});
|
||||
new InspireTreeDOM(this.tagTree, {
|
||||
target: '#tagTree'
|
||||
});
|
||||
this.tagTree.on("node.state.changed", this.handleTreeClick);
|
||||
},
|
||||
updateTree() {
|
||||
// TODO: remember which tags are selected and restore?
|
||||
const tagMap = [];
|
||||
Sist2Api.getTags().then(tags => {
|
||||
tags.forEach(tag => addTag(tagMap, tag.id, tag.id, tag.count));
|
||||
this.tagTree.removeAll();
|
||||
this.tagTree.addNodes(tagMap);
|
||||
|
||||
this.$store.commit("setSelectedTags", getSelectedTreeNodes(this.tagTree));
|
||||
},
|
||||
}
|
||||
if (this.$store.state._onLoadSelectedTags.length > 0 && !this.loadedFromArgs) {
|
||||
this.$store.state._onLoadSelectedTags.forEach(mime => {
|
||||
this.tagTree.node(mime).select();
|
||||
this.loadedFromArgs = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleTreeClick(node, e) {
|
||||
if (e === "indeterminate" || e === "collapsed" || e === 'rendered' || e === "focused"
|
||||
|| e === "matched" || e === "hidden") {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$store.commit("setSelectedTags", getSelectedTreeNodes(this.tagTree));
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#mimeTree {
|
||||
max-height: 350px;
|
||||
overflow: auto;
|
||||
max-height: 350px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.inspire-tree .focused > .wholerow {
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#tag-picker-filter-bar {
|
||||
padding: 10px 4px 4px;
|
||||
padding: 10px 4px 4px;
|
||||
}
|
||||
|
||||
.theme-black .inspire-tree .matched > .wholerow {
|
||||
background: rgba(251, 191, 41, 0.25);
|
||||
background: rgba(251, 191, 41, 0.25);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user