Idea for contacts screen route

dev/View/User/Contacts/AddressBooks.js

@@ -0,0 +1,7 @@
+import { AbstractViewLeft } from 'Knoin/AbstractViews';
+
+export class AddressBooks extends AbstractViewLeft {
+	constructor() {
+		super();
+	}
+}

dev/View/User/Contacts/ContactView.js

@@ -0,0 +1,47 @@
+import { AbstractViewRight } from 'Knoin/AbstractViews';
+import { addObservablesTo } from 'External/ko';
+import { decorateKoCommands } from 'Knoin/Knoin';
+import Remote from 'Remote/User/Fetch';
+import { getNotification } from 'Common/Translator';
+
+export class ContactView extends AbstractViewRight {
+	constructor() {
+		super();
+
+		addObservablesTo(this, {
+			contact: null
+		});
+
+		this.saveCommand = this.saveCommand.bind(this);
+
+		decorateKoCommands(this, {
+			saveCommand: self => !self.isBusy()
+		});
+	}
+
+	saveCommand() {
+		this.saveContact(this.contact());
+	}
+
+	saveContact(contact) {
+		const data = contact.toJSON();
+		if (data.jCard != JSON.stringify(contact.jCard)) {
+			this.isSaving(true);
+			Remote.request('ContactSave',
+				(iError, oData) => {
+					if (iError) {
+						alert(oData?.ErrorMessage || getNotification(iError));
+					} else if (oData.Result.ResultID) {
+						if (contact.id()) {
+							contact.id(oData.Result.ResultID);
+							contact.jCard = JSON.parse(data.jCard);
+						} else {
+							this.reloadContactList(); // TODO: remove when e-contact-foreach is dynamic
+						}
+					}
+					this.isSaving(false);
+				}, data
+			);
+		}
+	}
+}

dev/View/User/Contacts/ContactsList.js

@@ -0,0 +1,96 @@
+import { AbstractViewRight } from 'Knoin/AbstractViews';
+
+import { addObservablesTo, addComputablesTo } from 'External/ko';
+import { computedPaginatorHelper } from 'Common/UtilsUser';
+
+import { Selector } from 'Common/Selector';
+
+import { SettingsUserStore } from 'Stores/User/Settings';
+import { ContactUserStore } from 'Stores/User/Contact';
+
+import { decorateKoCommands } from 'Knoin/Knoin';
+
+const
+	CONTACTS_PER_PAGE = 50;
+
+export class ContactsList extends AbstractViewRight {
+	constructor() {
+		super();
+
+		addObservablesTo(this, {
+			search: '',
+			contactsCount: 0,
+
+			selectorContact: null,
+
+			importButton: null,
+
+			contactsPage: 1,
+
+			isSaving: false,
+
+			contact: null
+		});
+
+		addComputablesTo(this, {
+			checkAll: {
+				read: () => ContactUserStore.hasChecked(),
+				write: (value) => {
+					value = !!value;
+					ContactUserStore.forEach(contact => contact.checked(value));
+				}
+			}
+		});
+
+		this.contacts = ContactUserStore;
+
+		this.useCheckboxesInList = SettingsUserStore.useCheckboxesInList;
+
+		this.selector = new Selector(
+			ContactUserStore,
+			this.selectorContact,
+			null,
+			'.e-contact-item',
+			'.e-contact-item .checkboxItem'
+		);
+
+		this.selector.on('ItemSelect', contact => this.populateViewContact(contact));
+
+		this.selector.on('ItemGetUid', contact => contact ? contact.id() : '');
+
+		addComputablesTo(this, {
+			contactsPaginator: computedPaginatorHelper(
+				this.contactsPage,
+				() => Math.max(1, Math.ceil(this.contactsCount() / CONTACTS_PER_PAGE))
+			),
+
+			contactsCheckedOrSelected: () => {
+				const checked = ContactUserStore.filter(item => item.checked()),
+					selected = this.selectorContact();
+				return checked.length ? checked : (selected ? [selected] : []);
+			},
+
+			contactsSyncEnabled: () => ContactUserStore.allowSync() && ContactUserStore.syncMode(),
+
+			isIncompleteChecked: () => {
+				const c = ContactUserStore.listChecked().length;
+				return c && ContactUserStore().length > c;
+			},
+
+			isBusy: () => ContactUserStore.syncing() | ContactUserStore.importing() | ContactUserStore.loading()
+				| this.isSaving()
+		});
+
+		this.search.subscribe(() => this.reloadContactList());
+
+		decorateKoCommands(this, {
+			deleteCommand: self => !self.isBusy() && 0 < self.contactsCheckedOrSelected().length,
+			newMessageCommand: self => !self.isBusy() && 0 < self.contactsCheckedOrSelected().length,
+			syncCommand: self => !self.isBusy()
+		});
+	}
+
+	clearSearch() {
+		this.search('');
+	}
+}