Edit channel

Edit contact layout

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.avatarElem.setAttribute('peer', '' + this.peerId);
 
+    if(!options.doNotEditAvatar) {
       this.avatarEdit = new AvatarEdit((_upload) => {
         this.uploadAvatar = _upload;
         this.handleChange();
         this.avatarElem.remove();
       });
 
-    this.avatarElem.setAttribute('peer', '' + this.peerId);
-    if(!this.avatarElem.parentElement) {
       this.avatarEdit.container.append(this.avatarElem);
     }
 

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<any>[] = [];
+
+        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);
+    }
+  }
+}

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<any>[] = [];
+
+        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);
+    }
+  }
+}

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

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

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;
+  }
+}