Navigation Menu

Skip to content

Commit

Permalink
feat: add manage group component
Browse files Browse the repository at this point in the history
  • Loading branch information
hv0905 committed Jun 6, 2019
1 parent ce4971a commit ec51ab5
Show file tree
Hide file tree
Showing 8 changed files with 209 additions and 33 deletions.
23 changes: 1 addition & 22 deletions src/app/Controllers/group.component.ts
Expand Up @@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { GroupsApiService } from '../Services/GroupsApiService';
import { CacheService } from '../Services/CacheService';
import { switchMap, map, filter } from 'rxjs/operators';
import { filter, map, switchMap } from 'rxjs/operators';
import Swal from 'sweetalert2';
import { Values } from '../values';
import { GroupConversation } from '../Models/GroupConversation';
Expand Down Expand Up @@ -119,25 +119,4 @@ export class GroupComponent implements OnInit {
);
}
}

public transferOwner(): void {
Swal.fire({
title: 'Transfer owner to',
input: 'select',
inputOptions: this.inputOptions,
showCancelButton: true
}).then((willTransfer) => {
if (willTransfer.value) {
this.groupsApiService.TransferOwner(this.conversation.groupName, willTransfer.value)
.subscribe(response => {
if (response.code === 0) {
(<GroupConversation>this.messageService.conversation).ownerId = willTransfer.value;
Swal.fire('Success', response.message, 'success');
} else {
Swal.fire('Error', response.message, 'error');
}
});
}
});
}
}
124 changes: 124 additions & 0 deletions src/app/Controllers/manageGroup.component.ts
@@ -0,0 +1,124 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { GroupsApiService } from '../Services/GroupsApiService';
import { MessageService } from '../Services/MessageService';
import { filter, map, switchMap } from 'rxjs/operators';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { GroupConversation } from '../Models/GroupConversation';
import { ConversationApiService } from '../Services/ConversationApiService';
import Swal from 'sweetalert2';
import { TimerService } from '../Services/TimerService';
import { Values } from '../values';
import { UploadService } from '../Services/UploadService';
import { ElectronService } from 'ngx-electron';

@Component({
templateUrl: '../Views/manageGroup.html',
styleUrls: ['../Styles/menu.scss',
'../Styles/userDetail.scss',
'../Styles/button.scss',
'../Styles/progress.scss'
]
})
export class ManageGroupComponent implements OnInit {

public conversation: GroupConversation;
@ViewChild('imageInput', {static: false}) public imageInput;

constructor(public groupsApiService: GroupsApiService,
public messageService: MessageService,
public conversationApiService: ConversationApiService,
public route: ActivatedRoute,
private router: Router,
public timerService: TimerService,
public uploadService: UploadService,
public _electronService: ElectronService
) {

}

ngOnInit(): void {
if (!this.messageService.conversation) {
this.route.params
.pipe(
switchMap((params: Params) => this.conversationApiService.ConversationDetail(+params['id'])),
filter(t => t.code === 0),
map(t => t.value)
)
.subscribe(conversation => {
this.messageService.conversation = conversation;
this.conversation = <GroupConversation>conversation;
this.conversation.avatarURL = Values.fileAddress + this.conversation.groupImageKey;

});
} else {
this.conversation = <GroupConversation>this.messageService.conversation;
}
}

public transferOwner(): void {
const inputOptions = {};
this.conversation.users.forEach(val => inputOptions[val.user.id] = val.user.nickName);

Swal.fire({
title: 'Transfer owner to',
input: 'select',
inputOptions: inputOptions,
showCancelButton: true
}).then((willTransfer) => {
if (willTransfer.value) {
this.groupsApiService.TransferOwner(this.conversation.groupName, willTransfer.value)
.subscribe(response => {
if (response.code === 0) {
(<GroupConversation>this.messageService.conversation).ownerId = willTransfer.value;
Swal.fire('Success', response.message, 'success');
this.router.navigate(['/group', this.conversation.id]);
} else {
Swal.fire('Error', response.message, 'error');
}
});
}
});
}

public changePasswd() {
Swal.fire({
title: 'Set your new join password',
text: 'leave the input box empty to remove the password.',
input: 'text',
inputAttributes: {
maxlength: '100'
},
showCancelButton: true
}).then((result) => {
if (result.dismiss) {
return;
}
this.groupsApiService.UpdateGroupPassword(this.conversation.groupName, result.value).subscribe(res => {
if (res.code === 0) {
Swal.fire('Success', res.message, 'success');
} else {
Swal.fire('Error', res.message, 'error');
}
});
});
}

public uploadAvatar() {
if (this.imageInput) {
const fileBrowser = this.imageInput.nativeElement;
if (fileBrowser.files && fileBrowser.files[0]) {
this.uploadService.uploadGroupAvater(this.conversation, fileBrowser.files[0]);
}
}
}

public saveInfo() {
this.groupsApiService.UpdateGroupInfo(this.conversation.groupName, this.conversation.groupImageKey).subscribe(res => {
if (res.code === 0) {
Swal.fire('Success', res.message, 'success');
} else {
Swal.fire('Error', res.message, 'error');
}
});
}
}
2 changes: 2 additions & 0 deletions src/app/Modules/AppRoutingModule.ts
Expand Up @@ -18,6 +18,7 @@ import { DevicesComponent } from '../Controllers/devices.component';
import { ThemeComponent } from '../Controllers/theme.component';
import { LocalSearchComponent } from '../Controllers/localSearch.component';
import { AdvancedSettingComponent } from '../Controllers/advanced-setting.component';
import { ManageGroupComponent } from '../Controllers/manageGroup.component';

const routes: Routes = [
{ path: '', redirectTo: '/conversations', pathMatch: 'full' },
Expand All @@ -34,6 +35,7 @@ const routes: Routes = [
{ path: 'about', component: AboutComponent },
{ path: 'userInfo', component: UserDetailComponent },
{ path: 'group/:id', component: GroupComponent },
{path: 'managegroup/:id', component: ManageGroupComponent},
{ path: 'changepassword', component: ChangePasswordComponent },
{ path: 'discover', component: DiscoverComponent },
{ path: 'devices', component: DevicesComponent },
Expand Down
8 changes: 7 additions & 1 deletion src/app/Services/GroupsApiService.ts
Expand Up @@ -46,10 +46,16 @@ export class GroupsApiService {
});
}

public UpdateGroupInfo(groupName: string, avatarKey: number = null, newJoinPassword: string = null) {
public UpdateGroupInfo(groupName: string, avatarKey?: number): Observable<AiurProtocal> {
return this.apiService.Post(GroupsApiService.serverPath + '/UpdateGroupInfo', {
GroupName: groupName,
AvatarKey: avatarKey,
});
}

public UpdateGroupPassword(groupName: string, newJoinPassword?: string): Observable<AiurProtocal> {
return this.apiService.Post(GroupsApiService.serverPath + '/UpdateGroupPassword', {
GroupName: groupName,
NewJoinPassword: newJoinPassword
});
}
Expand Down
26 changes: 25 additions & 1 deletion src/app/Services/UploadService.ts
Expand Up @@ -6,6 +6,8 @@ import { UploadFile } from '../Models/UploadFile';
import { KahlaUser } from '../Models/KahlaUser';
import { ConversationApiService } from './ConversationApiService';
import * as loadImage from 'blueimp-load-image';
import { GroupConversation } from '../Models/GroupConversation';
import { Values } from '../values';

@Injectable({
providedIn: 'root'
Expand Down Expand Up @@ -179,7 +181,29 @@ export class UploadService {
}
}

private validImageType(file: File, avatar: boolean): boolean {
public uploadGroupAvater(group: GroupConversation, file: File): void {
if (this.validImageType(file, true)) {
const formData = new FormData();
formData.append('image', file);
this.uploading = true;
const uploadButton = document.querySelector('#upload');
uploadButton.textContent = 'Uploading';
this.filesApiService.UploadIcon(formData).subscribe(response => {
if (Number(response)) {
this.progress = <number>response;
} else if (response != null && (<UploadFile>response).code === 0) {
group.groupImageKey = (<UploadFile>response).fileKey;
group.avatarURL = Values.fileAddress + group.groupImageKey;
this.finishUpload();
uploadButton.textContent = 'Upload new avatar';
}
});
} else {
Swal.fire('Try again', 'Only support .png, .jpg, .jpeg or .bmp file', 'error');
}
}

public validImageType(file: File, avatar: boolean): boolean {
const validAvatarTypes = ['png', 'jpg', 'bmp', 'jpeg'];
const validChatTypes = ['png', 'jpg', 'bmp', 'jpeg', 'gif', 'svg'];
const fileExtension = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
Expand Down
12 changes: 3 additions & 9 deletions src/app/Views/group.html
Expand Up @@ -12,12 +12,6 @@
</div>

<div class="menu-holder"></div>
<div class="menu-button" *ngIf="messageService.checkOwner()" (click)="timerService.setTimer(conversation.id)">
<div class="img">
<i class="fa fa-clock-o"></i>
</div>
<div class="text">Self-destruct Timer</div>
</div>
<div class="menu-button" routerLink="/talking/{{ conversation ? conversation.id : 0 }}">
<div class="img">
<i class="fa fa-comments"></i>
Expand All @@ -33,11 +27,11 @@
<input id="toggleMute" class="tgl" type="checkbox" [checked]="!muted" (click)="mute()"/>
<label for="toggleMute" class="tgl-btn"></label>
</div>
<div class="menu-button" *ngIf="messageService.checkOwner()" (click)="transferOwner()">
<div class="menu-button" *ngIf="messageService.checkOwner()" routerLink="/managegroup/{{conversation.id}}">
<div class="img">
<i class="fa fa-exchange"></i>
<i class="fa fa-cogs"></i>
</div>
<div class="text">Transfer Owner</div>
<div class="text">Manage Group</div>
</div>
<div class="menu-holder"></div>
<div *ngIf="conversation">
Expand Down
45 changes: 45 additions & 0 deletions src/app/Views/manageGroup.html
@@ -0,0 +1,45 @@
<app-header></app-header>

<div *ngIf="conversation && messageService.checkOwner()">
<div class="menu-header">
Information
</div>
<div class="profile avatar">
<label>Group Avatar</label>
<a class="user-img" href="{{conversation.avatarURL}}" target="_blank">
<img class="user-img" src="{{conversation.avatarURL}}?w=140&h=140">
</a>
<label id="upload" class="button primary inputButton" for="image">Upload new avatar</label>
<input type="file" name="image" id="image" #imageInput (change)="uploadAvatar()"
accept="image/png, image/jpeg, image/bmp"/>
</div>
<div class="buttons">
<button id="save" class="button primary" (click)="saveInfo()" i18n="@@save">Save</button>
</div>
<div class="menu-header">
Security
</div>
<div class="menu-button" (click)="timerService.setTimer(conversation.id)">
<div class="img">
<i class="fa fa-clock-o"></i>
</div>
<div class="text">Self-destruct Timer</div>
</div>
<div class="menu-button" (click)="transferOwner()">
<div class="img">
<i class="fa fa-exchange"></i>
</div>
<div class="text">Transfer Owner</div>
</div>
<div class="menu-button" (click)="changePasswd()">
<div class="img">
<i class="fa fa-lock"></i>
</div>
<div class="text">Change Join Password</div>
</div>
</div>
<div *ngIf="conversation && !messageService.checkOwner()">
You don't have the permission to manage the group.
</div>
<progress *ngIf="uploadService.uploading" max="100" value={{uploadService.progress}}
[ngClass]="{ 'macOS-electron': _electronService.isElectronApp && _electronService.isMacOS }"></progress>
2 changes: 2 additions & 0 deletions src/app/app.module.ts
Expand Up @@ -44,6 +44,7 @@ import { DevicesApiService } from './Services/DevicesApiService';
import { ThemeService } from './Services/ThemeService';
import { TimerService } from './Services/TimerService';
import { AdvancedSettingComponent } from './Controllers/advanced-setting.component';
import { ManageGroupComponent } from './Controllers/manageGroup.component';

@NgModule({
imports: [
Expand Down Expand Up @@ -75,6 +76,7 @@ import { AdvancedSettingComponent } from './Controllers/advanced-setting.compone
ThemeComponent,
LocalSearchComponent,
AdvancedSettingComponent,
ManageGroupComponent
],
providers: [
ApiService,
Expand Down

0 comments on commit ec51ab5

Please sign in to comment.