Draft of new Filters design

dev/View/Popup/SieveScript.js

@@ -0,0 +1,169 @@
+import ko from 'ko';
+
+import { delegateRunOnDestroy } from 'Common/UtilsUser';
+import { StorageResultType, Notification } from 'Common/Enums';
+import { getNotification } from 'Common/Translator';
+
+import Remote from 'Remote/User/Fetch';
+import FilterStore from 'Stores/User/Filter';
+import FilterModel from 'Model/Filter';
+
+import { popup, showScreenPopup, command } from 'Knoin/Knoin';
+import { AbstractViewNext } from 'Knoin/AbstractViewNext';
+
+@popup({
+	name: 'View/Popup/SieveScript',
+	templateID: 'PopupsSieveScript'
+})
+class SieveScriptPopupView extends AbstractViewNext {
+	constructor() {
+		super();
+
+		this.modules = FilterStore.modules;
+		this.filters = FilterStore.filters;
+
+		this.script = {
+			filters: FilterStore.filters,
+			saving: () => FilterStore.filters.saving()
+		};
+
+		ko.addObservablesTo(this, {
+			isNew: true,
+			inited: false,
+			serverError: false,
+			serverErrorDesc: '',
+			haveChanges: false,
+
+			saveErrorText: ''
+		});
+
+		this.serverError.subscribe(value => value || this.serverErrorDesc(''), this);
+
+		this.filterRaw = FilterStore.raw;
+		this.filterRaw.capa = FilterStore.capa;
+		this.filterRaw.active = ko.observable(false);
+		this.filterRaw.allow = ko.observable(false);
+		this.filterRaw.error = ko.observable(false);
+
+		this.filterForDeletion = ko.observable(null).deleteAccessHelper();
+
+		this.filters.subscribe(() => this.haveChanges(true));
+
+		this.filterRaw.subscribe(() => {
+			this.haveChanges(true);
+			this.filterRaw.error(false);
+		});
+
+		this.haveChanges.subscribe(() => this.saveErrorText(''));
+
+		this.filterRaw.active.subscribe(() => {
+			this.haveChanges(true);
+			this.filterRaw.error(false);
+		});
+	}
+
+	@command((self) => self.haveChanges())
+	saveScriptCommand() {
+		if (!this.filters.saving()) {
+			if (this.filterRaw.active() && !this.filterRaw().trim()) {
+				this.filterRaw.error(true);
+				return false;
+			}
+
+			this.filters.saving(true);
+			this.saveErrorText('');
+
+			Remote.filtersSave(
+				(result, data) => {
+					this.filters.saving(false);
+
+					if (StorageResultType.Success === result && data && data.Result) {
+						this.haveChanges(false);
+					} else if (data && data.ErrorCode) {
+						this.saveErrorText(data.ErrorMessageAdditional || getNotification(data.ErrorCode));
+					} else {
+						this.saveErrorText(getNotification(Notification.CantSaveFilters));
+					}
+				},
+				this.filters(),
+				this.filterRaw(),
+				this.filterRaw.active()
+			);
+		}
+
+		return true;
+	}
+
+	deleteFilter(filter) {
+		this.filters.remove(filter);
+		delegateRunOnDestroy(filter);
+	}
+
+	addFilter() {
+		const filter = new FilterModel();
+
+		filter.generateID();
+		showScreenPopup(require('View/Popup/Filter'), [
+			filter,
+			() => {
+				this.filters.push(filter);
+				this.filterRaw.active(false);
+			},
+			false
+		]);
+	}
+
+	editFilter(filter) {
+		const clonedFilter = filter.cloneSelf();
+
+		showScreenPopup(require('View/Popup/Filter'), [
+			clonedFilter,
+			() => {
+				const filters = this.filters(),
+					index = filters.indexOf(filter);
+
+				if (-1 < index && filters[index]) {
+					delegateRunOnDestroy(filters[index]);
+					filters[index] = clonedFilter;
+
+					this.filters(filters);
+					this.haveChanges(true);
+				}
+			},
+			true
+		]);
+	}
+
+	onBuild(oDom) {
+		oDom.addEventListener('click', event => {
+			const el = event.target.closestWithin('.filter-item .e-action', oDom),
+				filter = el && ko.dataFor(el);
+			filter && this.editFilter(ko.dataFor(el));
+		});
+	}
+
+	onShow(oScript, fTrueCallback, bEdit) {
+		this.clearPopup();
+
+		this.fTrueCallback = fTrueCallback;
+		this.filters(oScript.filters());
+
+		this.isNew(!bEdit);
+
+		if (!bEdit && oScript) {
+//			oScript.nameFocused(true);
+		}
+	}
+
+	onShowWithDelay() {
+	}
+
+	clearPopup() {
+		this.isNew(true);
+		this.fTrueCallback = null;
+		this.filters([]);
+	}
+
+}
+
+export { SieveScriptPopupView, SieveScriptPopupView as default };