diff --git a/src/components/editPeer.ts b/src/components/editPeer.ts index a94223a4..bad36f9e 100644 --- a/src/components/editPeer.ts +++ b/src/components/editPeer.ts @@ -20,7 +20,8 @@ export default class EditPeer { constructor(options: { peerId: number, inputFields: EditPeer['inputFields'], - listenerSetter: ListenerSetter + listenerSetter: ListenerSetter, + doNotEditAvatar?: boolean, }) { for(let i in options) { // @ts-ignore @@ -31,15 +32,15 @@ export default class EditPeer { this.avatarElem = document.createElement('avatar-element') as AvatarElement; this.avatarElem.classList.add('avatar-placeholder', 'avatar-120'); - - this.avatarEdit = new AvatarEdit((_upload) => { - this.uploadAvatar = _upload; - this.handleChange(); - this.avatarElem.remove(); - }); - this.avatarElem.setAttribute('peer', '' + this.peerId); - if(!this.avatarElem.parentElement) { + + if(!options.doNotEditAvatar) { + this.avatarEdit = new AvatarEdit((_upload) => { + this.uploadAvatar = _upload; + this.handleChange(); + this.avatarElem.remove(); + }); + this.avatarEdit.container.append(this.avatarElem); } diff --git a/src/components/sidebarRight/tabs/editChannel.ts b/src/components/sidebarRight/tabs/editChannel.ts new file mode 100644 index 00000000..f601f203 --- /dev/null +++ b/src/components/sidebarRight/tabs/editChannel.ts @@ -0,0 +1,136 @@ +import { SliderSuperTab } from "../../slider" +import InputField from "../../inputField"; +import EditPeer from "../../editPeer"; +import { SettingSection } from "../../sidebarLeft"; +import Row from "../../row"; +import CheckboxField from "../../checkboxField"; +import Button from "../../button"; +import appChatsManager from "../../../lib/appManagers/appChatsManager"; +import appProfileManager from "../../../lib/appManagers/appProfileManager"; +import { attachClickEvent } from "../../../helpers/dom"; + +export default class AppEditChannelTab extends SliderSuperTab { + private nameInputField: InputField; + private descriptionInputField: InputField; + private editPeer: EditPeer; + public peerId: number; + + protected init() { + this.container.classList.add('edit-peer-container', 'edit-channel-container'); + this.title.innerHTML = 'Edit'; + + { + const section = new SettingSection({noDelimiter: true}); + const inputFields: InputField[] = []; + + const inputWrapper = document.createElement('div'); + inputWrapper.classList.add('input-wrapper'); + + this.nameInputField = new InputField({ + label: 'Name', + name: 'channel-name', + maxLength: 255 + }); + this.descriptionInputField = new InputField({ + label: 'Description', + name: 'channel-description', + maxLength: 255 + }); + + this.nameInputField.setOriginalValue(appChatsManager.getChat(-this.peerId).title); + + appProfileManager.getChatFull(-this.peerId).then(chatFull => { + this.descriptionInputField.setOriginalValue(chatFull.about); + }); + + inputWrapper.append(this.nameInputField.container, this.descriptionInputField.container); + + inputFields.push(this.nameInputField, this.descriptionInputField); + + this.editPeer = new EditPeer({ + peerId: this.peerId, + inputFields, + listenerSetter: this.listenerSetter + }); + this.content.append(this.editPeer.nextBtn); + + const groupTypeRow = new Row({ + title: 'Channel Type', + subtitle: 'Private', + clickable: true, + icon: 'lock' + }); + + const administratorsRow = new Row({ + title: 'Administrators', + subtitle: '5', + icon: 'admin', + clickable: true + }); + + const signMessagesCheckboxField = new CheckboxField({ + text: 'Sign Messages', + checked: false + }); + + section.content.append(this.editPeer.avatarEdit.container, inputWrapper, groupTypeRow.container, administratorsRow.container, signMessagesCheckboxField.label); + + this.scrollable.append(section.container); + + attachClickEvent(this.editPeer.nextBtn, () => { + this.editPeer.nextBtn.disabled = true; + + let promises: Promise[] = []; + + const id = -this.peerId; + if(this.nameInputField.isValid()) { + promises.push(appChatsManager.editTitle(id, this.nameInputField.value)); + } + + if(this.descriptionInputField.isValid()) { + promises.push(appChatsManager.editAbout(id, this.descriptionInputField.value)); + } + + if(this.editPeer.uploadAvatar) { + promises.push(this.editPeer.uploadAvatar().then(inputFile => { + return appChatsManager.editPhoto(id, inputFile); + })); + } + + Promise.race(promises).finally(() => { + this.editPeer.nextBtn.removeAttribute('disabled'); + this.close(); + }); + }, {listenerSetter: this.listenerSetter}); + } + + { + const section = new SettingSection({ + + }); + + const subscribersRow = new Row({ + title: 'Subscribers', + subtitle: '335 356 subscribers', + icon: 'newgroup', + clickable: true + }); + + section.content.append(subscribersRow.container); + + this.scrollable.append(section.container); + } + + { + const section = new SettingSection({ + + }); + + const btnDelete = Button('btn-primary btn-transparent danger', {icon: 'delete', text: 'Delete Channel'}); + + section.content.append(btnDelete); + + this.scrollable.append(section.container); + } + } +} diff --git a/src/components/sidebarRight/tabs/editContact.ts b/src/components/sidebarRight/tabs/editContact.ts new file mode 100644 index 00000000..95ebaeeb --- /dev/null +++ b/src/components/sidebarRight/tabs/editContact.ts @@ -0,0 +1,127 @@ +import { SliderSuperTab } from "../../slider" +import InputField from "../../inputField"; +import EditPeer from "../../editPeer"; +import { SettingSection } from "../../sidebarLeft"; +import Row from "../../row"; +import CheckboxField from "../../checkboxField"; +import Button from "../../button"; +import appChatsManager from "../../../lib/appManagers/appChatsManager"; +import { attachClickEvent } from "../../../helpers/dom"; +import appUsersManager from "../../../lib/appManagers/appUsersManager"; +import appNotificationsManager from "../../../lib/appManagers/appNotificationsManager"; +import PeerTitle from "../../peerTitle"; + +export default class AppEditContactTab extends SliderSuperTab { + private nameInputField: InputField; + private lastNameInputField: InputField; + private editPeer: EditPeer; + public peerId: number; + + protected init() { + this.container.classList.add('edit-peer-container', 'edit-contact-container'); + this.title.innerHTML = 'Edit'; + + { + const section = new SettingSection({noDelimiter: true}); + const inputFields: InputField[] = []; + + const inputWrapper = document.createElement('div'); + inputWrapper.classList.add('input-wrapper'); + + this.nameInputField = new InputField({ + label: 'Name', + name: 'contact-name', + maxLength: 70 + }); + this.lastNameInputField = new InputField({ + label: 'Last Name', + name: 'contact-lastname', + maxLength: 70 + }); + + const user = appUsersManager.getUser(this.peerId); + + this.nameInputField.setOriginalValue(user.first_name); + this.lastNameInputField.setOriginalValue(user.last_name); + + inputWrapper.append(this.nameInputField.container, this.lastNameInputField.container); + + inputFields.push(this.nameInputField, this.lastNameInputField); + + this.editPeer = new EditPeer({ + peerId: this.peerId, + inputFields, + listenerSetter: this.listenerSetter, + doNotEditAvatar: true + }); + this.content.append(this.editPeer.nextBtn); + + const div = document.createElement('div'); + div.classList.add('avatar-edit'); + div.append(this.editPeer.avatarElem); + + const notificationsCheckboxField = new CheckboxField({ + text: 'Notifications' + }); + + const notificationsRow = new Row({ + checkboxField: notificationsCheckboxField + }); + + notificationsCheckboxField.value = !appNotificationsManager.isPeerLocalMuted(this.peerId, false); + + const profileNameDiv = document.createElement('div'); + profileNameDiv.classList.add('profile-name'); + profileNameDiv.append(new PeerTitle({ + peerId: this.peerId + }).element); + //profileNameDiv.innerHTML = 'Karen Stanford'; + + const profileSubtitleDiv = document.createElement('div'); + profileSubtitleDiv.classList.add('profile-subtitle'); + profileSubtitleDiv.innerHTML = 'original name'; + + section.content.append(div, profileNameDiv, profileSubtitleDiv, inputWrapper, notificationsRow.container); + + this.scrollable.append(section.container); + + attachClickEvent(this.editPeer.nextBtn, () => { + this.editPeer.nextBtn.disabled = true; + + let promises: Promise[] = []; + + const id = -this.peerId; + if(this.nameInputField.isValid()) { + promises.push(appChatsManager.editTitle(id, this.nameInputField.value)); + } + + if(this.lastNameInputField.isValid()) { + promises.push(appChatsManager.editAbout(id, this.lastNameInputField.value)); + } + + if(this.editPeer.uploadAvatar) { + promises.push(this.editPeer.uploadAvatar().then(inputFile => { + return appChatsManager.editPhoto(id, inputFile); + })); + } + + Promise.race(promises).finally(() => { + this.editPeer.nextBtn.removeAttribute('disabled'); + this.close(); + }); + }, {listenerSetter: this.listenerSetter}); + } + + { + const section = new SettingSection({ + + }); + + const btnDelete = Button('btn-primary btn-transparent danger', {icon: 'delete', text: 'Delete Contact'}); + + section.content.append(btnDelete); + + this.scrollable.append(section.container); + } + } +} diff --git a/src/components/sidebarRight/tabs/sharedMedia.ts b/src/components/sidebarRight/tabs/sharedMedia.ts index b4714ca7..aa6f5829 100644 --- a/src/components/sidebarRight/tabs/sharedMedia.ts +++ b/src/components/sidebarRight/tabs/sharedMedia.ts @@ -17,6 +17,8 @@ import { TransitionSlider } from "../../transition"; import appNotificationsManager from "../../../lib/appManagers/appNotificationsManager"; import AppEditGroupTab from "./editGroup"; import PeerTitle from "../../peerTitle"; +import AppEditChannelTab from "./editChannel"; +import AppEditContactTab from "./editContact"; let setText = (text: string, el: HTMLDivElement) => { window.requestAnimationFrame(() => { @@ -129,13 +131,13 @@ export default class AppSharedMediaTab implements SliderTab { }); attachClickEvent(this.editBtn, (e) => { - let tab: AppEditGroupTab; + let tab: AppEditGroupTab | AppEditChannelTab | AppEditContactTab; if(appPeersManager.isAnyGroup(this.peerId)) { tab = new AppEditGroupTab(appSidebarRight); } else if(this.peerId > 0) { - + tab = new AppEditContactTab(appSidebarRight); } else { - + tab = new AppEditChannelTab(appSidebarRight); } if(tab) { diff --git a/src/lib/appManagers/appChatsManager.ts b/src/lib/appManagers/appChatsManager.ts index ae806772..6d9ce567 100644 --- a/src/lib/appManagers/appChatsManager.ts +++ b/src/lib/appManagers/appChatsManager.ts @@ -102,10 +102,6 @@ export class AppChatsManager { } public saveApiChat(chat: any) { - if(!isObject(chat)) { - return; - } - // * exclude from state // defineNotNumerableProperties(chat, ['rTitle', 'initials']); @@ -142,8 +138,8 @@ export class AppChatsManager { if(oldChat === undefined) { this.chats[chat.id] = chat; } else { - let oldPhoto = oldChat.photo && oldChat.photo.photo_small; - let newPhoto = chat.photo && chat.photo.photo_small; + const oldPhoto = oldChat.photo?.photo_small; + const newPhoto = chat.photo?.photo_small; if(JSON.stringify(oldPhoto) !== JSON.stringify(newPhoto)) { changedPhoto = true; } diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index 10424651..3ecd2321 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -789,3 +789,23 @@ margin: 0 1.1875rem; } } + +.edit-contact-container { + .input-wrapper { + margin-top: 1.8125rem; + padding-bottom: 1rem; + } + + .avatar-placeholder { + filter: none !important; + } + + .avatar-edit { + margin-bottom: 1.375rem !important; + } + + .profile-name { + font-size: 1.5rem; + line-height: 1.3125; + } +}