Merged filters into new settings dialog, added experimental summary field.
This commit is contained in:
DebaucheryLibrarian
327
assets/components/settings/summary.vue
Normal file
327
assets/components/settings/summary.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="dialog-section">
|
||||
<h3 class="form-heading">Summary format</h3>
|
||||
|
||||
<ul class="summary nolist">
|
||||
<li
|
||||
v-for="(group, groupIndex) in summaryFormat"
|
||||
:key="groupIndex"
|
||||
class="summary-group"
|
||||
>
|
||||
<div class="summary-options">
|
||||
<label class="summary-option">Delimiter
|
||||
<input
|
||||
class="input summary-delimiter"
|
||||
:value="group.delimiter"
|
||||
@change="setSummaryGroupValue(groupIndex, 'delimiter', $event.target.value)"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="summary-option">Brackets
|
||||
<select
|
||||
class="select summary-delimiter"
|
||||
:value="group.bracket"
|
||||
@change="setSummaryGroupValue(groupIndex, 'bracket', $event.target.value)"
|
||||
>
|
||||
<option
|
||||
v-for="bracket in brackets"
|
||||
:key="bracket"
|
||||
>{{ bracket }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<ul class="summary-segments nolist">
|
||||
<li
|
||||
v-for="(segment, segmentIndex) in group.segments"
|
||||
:key="segmentIndex"
|
||||
class="summary-segment"
|
||||
>
|
||||
<select
|
||||
class="select summary-prop"
|
||||
:value="segment.prop"
|
||||
@change="setSummarySegmentValue(groupIndex, segmentIndex, 'prop', $event.target.value)"
|
||||
>
|
||||
<option>channel</option>
|
||||
<option>network</option>
|
||||
<option>title</option>
|
||||
<option>movie</option>
|
||||
<option>tags</option>
|
||||
<option>actors</option>
|
||||
<option>date</option>
|
||||
</select>
|
||||
|
||||
<input
|
||||
v-if="delimitedProps.includes(segment.prop)"
|
||||
class="input summary-delimiter"
|
||||
:value="segment.delimiter"
|
||||
@change="setSummarySegmentValue(groupIndex, segmentIndex, 'delimiter', $event.target.value)"
|
||||
>
|
||||
|
||||
<select
|
||||
v-if="segment.prop === 'date'"
|
||||
class="select summary-format"
|
||||
:value="segment.format"
|
||||
@change="setSummarySegmentValue(groupIndex, segmentIndex, 'format', $event.target.value)"
|
||||
>
|
||||
<option>YYYY-MM-DD</option>
|
||||
<option>DD-MM-YYYY</option>
|
||||
<option>MM/DD/YYYY</option>
|
||||
</select>
|
||||
|
||||
<Icon
|
||||
icon="bin"
|
||||
class="active"
|
||||
@click="removeSummarySegment(groupIndex, segmentIndex)"
|
||||
/>
|
||||
</li>
|
||||
|
||||
<li class="summary-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="button button-secondary"
|
||||
@click="addSummarySegment(groupIndex)"
|
||||
>Add segment</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="button button-secondary"
|
||||
@click="removeSummaryGroup(groupIndex)"
|
||||
>Remove group</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="summary summary-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="button button-secondary"
|
||||
@click="addSummaryGroup"
|
||||
>Add group</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="button button-secondary"
|
||||
@click="resetSummaryFormat"
|
||||
>Reset to default</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dialog-section">
|
||||
<h3 class="form-heading">Preview</h3>
|
||||
|
||||
<input
|
||||
class="input summary-preview"
|
||||
:value="summary"
|
||||
:title="summary"
|
||||
disabled
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import formatSummary from '../../js/utils/format-summary';
|
||||
|
||||
function summary() {
|
||||
return formatSummary(this.scene, this.summaryFormat);
|
||||
}
|
||||
|
||||
function summaryFormat() {
|
||||
return this.$store.state.ui.summaryFormat;
|
||||
}
|
||||
|
||||
function setSummaryGroupValue(targetGroupIndex, target, value) {
|
||||
const newFormat = this.summaryFormat.map((group, groupIndex) => {
|
||||
if (groupIndex === targetGroupIndex) {
|
||||
return {
|
||||
...group,
|
||||
[target]: value,
|
||||
};
|
||||
}
|
||||
|
||||
return group;
|
||||
});
|
||||
|
||||
this.$store.dispatch('setSummaryFormat', newFormat);
|
||||
}
|
||||
|
||||
function setSummarySegmentValue(targetGroupIndex, targetSegmentIndex, target, value) {
|
||||
const newFormat = this.summaryFormat.map((group, groupIndex) => {
|
||||
if (groupIndex === targetGroupIndex) {
|
||||
return {
|
||||
...group,
|
||||
segments: group.segments.map((segment, segmentIndex) => {
|
||||
if (segmentIndex === targetSegmentIndex) {
|
||||
return {
|
||||
...segment,
|
||||
[target]: value,
|
||||
};
|
||||
}
|
||||
|
||||
return segment;
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return group;
|
||||
});
|
||||
|
||||
this.$store.dispatch('setSummaryFormat', newFormat);
|
||||
}
|
||||
|
||||
function addSummarySegment(targetGroupIndex) {
|
||||
const newFormat = this.summaryFormat.map((group, groupIndex) => {
|
||||
if (groupIndex === targetGroupIndex) {
|
||||
return {
|
||||
...group,
|
||||
segments: group.segments.concat({
|
||||
prop: 'title',
|
||||
delimiter: ',', // default delimiter for when prop is changed to iterabte like actors or tags
|
||||
format: 'YYYY-MM-DD', // default format for when prop is changed to date
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return group;
|
||||
});
|
||||
|
||||
this.$store.dispatch('setSummaryFormat', newFormat);
|
||||
}
|
||||
|
||||
function addSummaryGroup() {
|
||||
const newFormat = this.summaryFormat.concat({
|
||||
delimiter: ' - ',
|
||||
segments: [{ prop: 'title' }],
|
||||
});
|
||||
|
||||
this.$store.dispatch('setSummaryFormat', newFormat);
|
||||
}
|
||||
|
||||
function removeSummaryGroup(groupIndex) {
|
||||
const newFormat = this.summaryFormat.filter((group, index) => index !== groupIndex);
|
||||
|
||||
this.$store.dispatch('setSummaryFormat', newFormat);
|
||||
}
|
||||
|
||||
function removeSummarySegment(targetGroupIndex, targetSegmentIndex) {
|
||||
const newFormat = this.summaryFormat.map((group, groupIndex) => ({
|
||||
...group,
|
||||
segments: groupIndex === targetGroupIndex
|
||||
? group.segments.filter((segment, index) => index !== targetSegmentIndex)
|
||||
: group.segments,
|
||||
}));
|
||||
|
||||
this.$store.dispatch('setSummaryFormat', newFormat);
|
||||
}
|
||||
|
||||
function resetSummaryFormat() {
|
||||
this.$store.dispatch('setSummaryFormat', this.$store.state.ui.defaultSummaryFormat);
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
delimiters: [null, '-', '_', ',', '.'],
|
||||
brackets: [null, '()', '[]', '{}', '<>'],
|
||||
delimitedProps: ['actors', 'tags'],
|
||||
scene: {
|
||||
channel: 'Channel',
|
||||
network: 'Network',
|
||||
title: 'Title',
|
||||
movie: 'Movie',
|
||||
scene: 1,
|
||||
actors: ['Jane Doe', 'John Doe'],
|
||||
date: new Date(),
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
summary,
|
||||
summaryFormat,
|
||||
},
|
||||
methods: {
|
||||
addSummaryGroup,
|
||||
setSummaryGroupValue,
|
||||
addSummarySegment,
|
||||
setSummarySegmentValue,
|
||||
removeSummaryGroup,
|
||||
removeSummarySegment,
|
||||
resetSummaryFormat,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary {
|
||||
.icon {
|
||||
padding: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-group,
|
||||
.summary-segment {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.summary-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.button {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: .5rem;
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-segments {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.summary-segment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.summary-delimiter {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.summary-format {
|
||||
width: 9rem;
|
||||
}
|
||||
|
||||
.summary-prop {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.summary-options {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.summary-option:not(:last-child) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.summary-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-preview {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user