traxxx/assets/components/settings/summary.vue

<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>