added join group button

master
Max 5 years ago
parent a2864205e2
commit b460f77ee8

@ -10,21 +10,16 @@
<mat-icon>search </mat-icon> <mat-icon>search </mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<!--<mat-form-field id="category-chooser">
<mat-label>category</mat-label>
<mat-select value="user" #field (selectionChange)="changeCategory($event.value)">
<mat-option value="user">user</mat-option>
<mat-option value="group" disabled>group</mat-option>
</mat-select>
</mat-form-field>-->
</mat-toolbar> </mat-toolbar>
<div id="friendlist"> <mat-accordion>
<!--<div class="frienditem" *ngFor="let friend of friends" <mat-expansion-panel *ngIf="foundUsers.length > 0" expanded>
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"> <mat-expansion-panel-header>
<div class="picture">Pic</div> <mat-panel-title>
<div class="name"><span>{{friend.name}}</span></div> Users
</div>--> </mat-panel-title>
<mat-card class="friend-card" *ngFor="let user of foundUsers" </mat-expansion-panel-header>
<div class="list">
<mat-card class="card" *ngFor="let user of foundUsers"
[class.selected]="user === selectedUser" [class.selected]="user === selectedUser"
tabindex="0"> tabindex="0">
<mat-card-header> <mat-card-header>
@ -36,7 +31,28 @@
</div> </div>
</mat-card-header> </mat-card-header>
</mat-card> </mat-card>
<mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner> </div>
</mat-expansion-panel>
</div> <mat-expansion-panel *ngIf="foundGroups.length > 0" [expanded]="foundUsers.length < 1">
<mat-expansion-panel-header>
<mat-panel-title>
Groups
</mat-panel-title>
</mat-expansion-panel-header>
<div class="list">
<mat-card class="card" *ngFor="let group of foundGroups"
[class.selected]="group === selectedGroup"
tabindex="0">
<mat-card-header>
<div mat-card-avatar class="profile-picture" (click)="showGroupProfile(group)"></div>
<mat-card-title class="pointer" (click)="showGroupProfile(group)">{{group.name}}</mat-card-title>
<div class="icon-box">
<button mat-icon-button class="request-button" (click)="joinGroup(group)" [disabled]="!group.allowedToJoinGroup"><mat-icon>group_add</mat-icon></button>
</div>
</mat-card-header>
</mat-card>
</div>
</mat-expansion-panel>
</mat-accordion>
<mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner>
</div> </div>

@ -13,10 +13,10 @@
padding-left: 0.5em padding-left: 0.5em
padding-right: 0.5em padding-right: 0.5em
#friendlist #list
padding: 0.5em padding: 0.5em
.friend-card .card
box-sizing: border-box box-sizing: border-box
width: 100% width: 100%
margin-top: 0.5em margin-top: 0.5em
@ -48,3 +48,9 @@
.icon-box .icon-box
text-align: right text-align: right
width: 100% width: 100%
/deep/ .mat-expansion-panel
background: #e6e6e6
/deep/.dark-theme .mat-expansion-panel
background: #121212

@ -6,6 +6,7 @@ import { User } from 'src/app/models/user';
import {environment} from 'src/environments/environment'; import {environment} from 'src/environments/environment';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { DatasharingService } from '../../services/datasharing.service'; import { DatasharingService } from '../../services/datasharing.service';
import { GroupInfo } from 'src/app/models/groupinfo';
@Component({ @Component({
selector: 'home-search', selector: 'home-search',
@ -17,7 +18,8 @@ export class SearchComponent implements OnInit {
searchValue = ' '; searchValue = ' ';
category = 'user'; category = 'user';
user: User; user: User;
foundUsers: Array<User>; foundUsers: Array<User> = new Array();
foundGroups: Array<GroupInfo> = new Array();
constructor( constructor(
private searchService: SearchService, private searchService: SearchService,
@ -56,9 +58,13 @@ export class SearchComponent implements OnInit {
this.http.post(environment.graphQLUrl, this.searchService.buildJsonUser(name)) this.http.post(environment.graphQLUrl, this.searchService.buildJsonUser(name))
.subscribe(response => { .subscribe(response => {
this.foundUsers = this.searchService.renderUsers(response.json()); this.foundUsers = this.searchService.renderUsers(response.json());
this.foundGroups = this.searchService.renderGroups(response.json());
for (const foundUser of this.foundUsers) { for (const foundUser of this.foundUsers) {
foundUser.allowedToSendRequest = this.requestService.isAllowedToSendRequest(foundUser.userID, this.user); foundUser.allowedToSendRequest = this.requestService.isAllowedToSendRequest(foundUser.userID, this.user);
} }
for (const foundGroup of this.foundGroups) {
foundGroup.allowedToJoinGroup = this.requestService.isAllowedToJoinGroup(foundGroup.id, this.user);
}
this.loading = false; this.loading = false;
}); });
} }
@ -71,5 +77,10 @@ export class SearchComponent implements OnInit {
user.allowedToSendRequest = false; user.allowedToSendRequest = false;
this.requestService.sendFriendRequest(user); this.requestService.sendFriendRequest(user);
} }
public joinGroup(group: GroupInfo) {
group.allowedToJoinGroup = false;
this.requestService.joinGroup(group);
}
} }

@ -0,0 +1,9 @@
import { User } from 'src/app/models/user';
export class Group {
id: number;
name: string;
handle: string;
creator: User;
member: User[] = new Array();
}

@ -1,6 +1,7 @@
export class GroupInfo { export class GroupInfo {
id: number; id: number;
name: string; name: string;
allowedToJoinGroup = false;
constructor(pId: number, pName: string) { constructor(pId: number, pName: string) {
this.id = pId; this.id = pId;

@ -4,6 +4,7 @@ import {DatasharingService} from '../datasharing.service';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {environment} from 'src/environments/environment'; import {environment} from 'src/environments/environment';
import { User } from 'src/app/models/user'; import { User } from 'src/app/models/user';
import { GroupInfo } from 'src/app/models/groupinfo';
@Injectable({ @Injectable({
@ -36,6 +37,19 @@ export class RequestService {
return true; return true;
} }
public isAllowedToJoinGroup(groupId: number, self: User): boolean {
// returns false if user is not logged in or is member of the group(Id)
if (!self.loggedIn) {
return false;
}
for (const group of self.groups) {
if (group.id === groupId) {
return false;
}
}
return true;
}
public sendFriendRequest(user: User) { public sendFriendRequest(user: User) {
this.data.addSentRequestUserID(user.userID); this.data.addSentRequestUserID(user.userID);
const headers = new Headers(); const headers = new Headers();
@ -45,6 +59,14 @@ export class RequestService {
}); });
} }
public joinGroup(group: GroupInfo) {
const headers = new Headers();
headers.set('Content-Type', 'application/json');
this.http.post(environment.graphQLUrl, this.buildJsonJoinGroup(group.id))
.subscribe(response => {
});
}
public buildJsonRequest(id_: number, type_: String): any { public buildJsonRequest(id_: number, type_: String): any {
const body = { const body = {
query: `mutation($id: ID!, $type: RequestType) { query: `mutation($id: ID!, $type: RequestType) {
@ -60,6 +82,20 @@ export class RequestService {
return body; return body;
} }
public buildJsonJoinGroup(id_: number): any {
const body = {
query: `mutation($id: ID!) {
joinGroup(id: $id) {
id
}
}`
, variables: {
id: id_
}
};
return body;
}
public buildJsonAcceptRequest(id_: number): any { public buildJsonAcceptRequest(id_: number): any {
const body = { const body = {
query: `mutation($id: ID!) { query: `mutation($id: ID!) {

@ -4,6 +4,7 @@ import {DatasharingService} from '../datasharing.service';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {environment} from 'src/environments/environment'; import {environment} from 'src/environments/environment';
import { User } from 'src/app/models/user'; import { User } from 'src/app/models/user';
import { GroupInfo } from 'src/app/models/groupinfo';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -30,6 +31,14 @@ export class SearchService {
return users; return users;
} }
public renderGroups(pResponse: any): Array<GroupInfo> {
const groups = new Array<GroupInfo>();
for (const group of pResponse.data.search.groups) {
groups.push(new GroupInfo(group.id, group.name));
}
return groups;
}
public buildJsonUser(name_: String): any { public buildJsonUser(name_: String): any {
const body = { const body = {
query: `query($name: String!) { query: `query($name: String!) {
@ -45,6 +54,12 @@ export class SearchService {
id id
} }
} }
groups{
id
name
creator{id name handle}
members{id name handle}
}
} }
}` }`
, variables: { , variables: {

Loading…
Cancel
Save