%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="searchwp-engine-settings">
<div class="searchwp-engine-settings-sources">
<h3>{{ 'Sources' | i18n }}</h3>
<p>{{ 'Search these sources:' | i18n }}</p>
<ul>
<li v-for="(source, sourceName) in models" :key="sourceName">
<div class="searchwp-engine-settings-source">
<div class="searchwp-engine-settings-source-toggle">
<div>
<Checkbox
:disabled="isInvalidSource(sourceName)"
:id="name + '-' + sourceName"
:value="sourceName"
:checked="-1!==sourceIndex(sourceName)"
@change="function(value) { toggleSource(sourceIndex(sourceName), sourceName, value) }"
>{{ source.labels.plural }}</Checkbox>
</div>
<ul class="searchwp-engine-settings-source-notices"
v-if="getSourceSettingsNotices(source.notices).length || isInvalidSource(sourceName)">
<li v-for="(notice, noticeIndex) in getSourceSettingsNotices(source.notices)"
:key="noticeIndex">
<Notice
:type="notice.type"
:icon="notice.icon"
:message="notice.message"
:tooltip="notice.tooltip"
:more="notice.more"
></Notice>
</li>
<li v-if="isInvalidSource(sourceName)">
<Notice :tooltip="'_invalid_default_engine_source_note' | i18n "></Notice>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="searchwp-engine-settings-options">
<h3>{{ 'Options' | i18n }}</h3>
<div v-if="'default'!==name" class="searchwp-engine-settings-option">
<label for="searchwp-engine-settings-option-engine-label">{{ 'Engine Label' | i18n }}</label>
<div class="searchwp-engine-settings-option-input">
<input
v-bind:value="label"
v-on:input="updateName($event.target.value)"
class="searchwp-input-mimic"
type="text"
id="searchwp-engine-settings-option-engine-label" />
</div>
</div>
<div v-if="'default'!==name" class="searchwp-engine-settings-option">
<label for="searchwp-engine-settings-option-engine-name">{{ 'Engine Name' | i18n }}</label>
<div class="searchwp-engine-settings-option-input">
<input
v-model="name"
disabled
class="searchwp-input-mimic"
style="font-family: monospace;"
type="text"
id="searchwp-engine-settings-option-engine-name" />
</div>
</div>
<div class="searchwp-engine-settings-option">
<label for="searchwp-engine-settings-option-keyword-stemming">
{{ 'Keyword Stems' | i18n }}
</label>
<div class="searchwp-engine-settings-option-input">
<Checkbox
:id="'searchwp-engine-settings-option-keyword-stemming'"
:value="stemming"
:checked="stemming"
@change="function(value) { stemming = value }"
><Tooltip :content="'_keyword_stems_note' | i18n">{{ 'Use keyword stems' | i18n }}</Tooltip></Checkbox>
</div>
</div>
<div class="searchwp-engine-settings-option">
<label for="searchwp-engine-settings-option-admin-engine">
{{ 'Admin Engine' | i18n }}
</label>
<div class="searchwp-engine-settings-option-input">
<Checkbox
v-if="false === currentAdminEngine || currentAdminEngine.name === name"
:id="'searchwp-engine-settings-option-admin-engine'"
:value="adminengine"
:checked="adminengine"
@change="function(value) { adminengine = value }"
><Tooltip :content="'_admin_engine_tooltip' | i18n">{{ 'Use for Admin searches' | i18n }}</Tooltip></Checkbox>
<Notice v-else
:type="'info'"
:message="'_admin_engine_defined_note' | i18n([currentAdminEngine.label])"
></Notice>
</div>
</div>
</div>
<ul class="searchwp-actions">
<li>
<button
v-if="'default'!==name"
class="button button-link-delete"
@click="remove">
{{ 'Delete Engine' | i18n }}
</button>
</li>
<li><button class="button button-primary" @click="save">{{ 'Done' | i18n }}</button></li>
</ul>
</div>
</template>
<script>
import slugify from 'slugify';
import Notice from './../Notice.vue';
import Tooltip from './../Tooltip.vue';
import { __ } from './../../helpers.js';
import cloneDeep from 'lodash.clonedeep';
import Checkbox from './../Inputs/Checkbox.vue';
import { normalizeSource } from './../../helpers.js';
import { EngineUtils } from './../../Mixins/EngineUtils.js';
export default {
name: 'EngineSettings',
props: {
engine: {
type: String,
required: true,
}
},
components: {
Checkbox,
Notice,
Tooltip
},
mixins: [EngineUtils],
computed: {
wpPostSources: function() {
let sources = [];
const flag = 'post' + _SEARCHWP.separator;
for (const source in this.models) {
if (flag === source.substring(0, flag.length)) {
sources.push(source);
}
}
return sources;
},
currentAdminEngine: function() {
return this.$store.getters.adminEngine;
}
},
methods: {
getSourceSettingsNotices: function(sourceNotices) {
// Return only Notices that have no placement property.
return sourceNotices.filter( notice => !notice.placement || !notice.placement.length);
},
isInvalidSource: function(sourceName) {
// The only case where a Source is invalid is if it's the Default Engine
// and the Source is not representing a WP_Post content type.
return 'default' === this.engine && -1 === this.wpPostSources.indexOf(sourceName);
},
remove: function() {
if (confirm(__('Are you sure you want to delete this engine?'))) {
this.$emit('delete', this.engine);
}
},
updateName: function(label) {
this.label = label;
let name = slugify(label.replace(/ /gi, '_'), {
replacement: '_',
remove: /[^a-z0-9_]/gi,
lower: true
});
while (-1!==this.engines.indexOf(name)) {
name += '_copy';
}
this.name = name;
},
sourceIndex: function(sourceName) {
let sourceIndex = -1;
for (const index in this.sources) {
if (sourceName===this.sources[index].name) {
sourceIndex = index;
break;
}
}
return sourceIndex;
},
toggleSource: function(sourceIndex, sourceName, enabled) {
if (!enabled && -1!==sourceIndex) {
// Remove an added Source.
this.sources.splice(sourceIndex, 1);
// Flag this Source as removed for save routine.
this.removed.push(sourceName);
} else if (enabled) {
// Add a new Source from the models.
let source = normalizeSource(cloneDeep(this.models), sourceName);
this.sources.push(source);
// UNflag this Source as removed for save routine.
if (-1 !== this.removed.indexOf(sourceName)) {
this.removed.splice(this.removed.indexOf(sourceName), 1);
}
}
},
save: function() {
let sources = {};
this.sources.map(source => sources[source.name] = source);
for (const removedSource in this.removed) {
this.$store.commit('engineSourceRemoved', {
engine: this.engine,
source: this.removed[removedSource]
});
}
this.$emit('save', {
sources: sources,
originalEngineName: this.engine,
newEngineName: this.name,
newEngineLabel: this.label,
stemming: this.stemming,
adminengine: this.adminengine
});
}
},
created() {
this.label = this.getEngineProperty(this.engine, 'label');
this.name = this.getEngineProperty(this.engine, 'name');
this.stemming = this.getEngineProperty(this.engine, 'settings').stemming;
this.adminengine = this.getEngineProperty(this.engine, 'settings').adminengine;
const sources = this.getEngineProperty(this.engine, 'sources');
for (const source in sources) {
this.sources.push(cloneDeep(sources[source]));
}
},
data () {
return {
sources: [],
removed: [],
models: cloneDeep(_SEARCHWP.sources),
label: '',
name: '',
stemming: false,
adminengine: false,
engines: Object.keys(this.$store.state.engines)
}
}
}
</script>
<style lang="scss">
.searchwp-settings-view .searchwp-engine-settings {
> .searchwp-actions {
margin: 2em 0 0;
> * {
margin-left: auto;
&:nth-child(1) {
margin-left: 0;
}
}
}
}
.searchwp-engine-settings-sources {
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
> li {
width: 33.33333%;
padding-right: 1em;
}
}
}
.searchwp-engine-settings-source {
margin-bottom: 0.3em;
}
.searchwp-engine-settings-source-toggle {
min-height: 2.1em;
display: flex;
align-items: center;
> *,
.searchwp-notice,
.searchwp-notice p,
ul li {
display: inline-block;
}
.searchwp-notice p {
margin: 0 0 0.3em;
}
}
.searchwp-engine-settings-options {
margin-top: 2em;
}
.searchwp-engine-settings-option {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75em;
> label {
display: block;
width: 35%;
font-weight: 500;
}
}
.searchwp-engine-settings-option-input {
width: 62%;
input[type="text"] {
display: block;
width: 100%;
}
// Implement visual offset.
.searchwp-checkbox {
padding-top: 0.8em;
padding-bottom: 0.4em;
}
.notice {
margin: 0;
}
}
</style>
Zerion Mini Shell 1.0