added group creation

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { FeedComponent } from './components/feed/feed.component';
 import { HomeComponent } from './components/home/home.component';
 import { SocialComponent } from './components/social/social.component';
 import { GroupsComponent } from './components/social/groups/groups.component';
+import { DialogCreateGroupComponent } from './components/social/groups/groups.component';
 import { ChatmanagerComponent } from './components/chatmanager/chatmanager.component';
 import { ChatlistComponent } from './components/chatlist/chatlist.component';
 import { PostlistComponent } from './components/feed/postlist/postlist.component';
@@ -96,7 +97,8 @@ const appRoutes: Routes = [
     AboutComponent,
     ProfileComponent,
     MainNavigationComponent,
-    SearchComponent
+    SearchComponent,
+    DialogCreateGroupComponent
   ],
   imports: [
     BrowserModule,
@@ -133,8 +135,9 @@ const appRoutes: Routes = [
     MatSortModule,
     MatBadgeModule,
     MatProgressSpinnerModule,
-    MatDialogModule
+    MatDialogModule,
   ],
+  entryComponents: [ DialogCreateGroupComponent ],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/components/social/friends/friends.component.html

@@ -1,9 +1,7 @@
 <mat-toolbar>
   <span>Friends</span>
-  <!--<div id="button-box">
-    <button mat-icon-button><mat-icon>person_add</mat-icon></button>
-  </div>-->
 </mat-toolbar>
+
 <div id="friendlist">
     <mat-card class="friend-card" *ngFor="let friend of user.friends" 
     [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"

src/app/components/social/friends/friends.component.ts

@@ -3,7 +3,6 @@ import { DatasharingService } from 'src/app/services/datasharing.service';
 import { Http } from '@angular/http';
 import { FriendInfo } from 'src/app/models/friendinfo';
 import { Router } from '@angular/router';
-import { environment } from 'src/environments/environment';
 import { User } from 'src/app/models/user';
 
 @Component({
@@ -13,7 +12,7 @@ import { User } from 'src/app/models/user';
 })
 export class FriendsComponent implements OnInit {
   user: User;
-  constructor(private data: DatasharingService, private http: Http, private router: Router) { }
+  constructor(private data: DatasharingService, private router: Router) { }
 
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {

src/app/components/social/groups/dialog.html

@@ -0,0 +1,10 @@
+<h1 mat-dialog-title>Create a new group!</h1>
+<div mat-dialog-content>
+  <mat-form-field>
+    <input matInput placeholder="Enter groupname" #name>
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancel</button>
+  <button mat-button cdkFocusInitial (click)="createGroup(name.value)">Create Group</button>
+</div>

src/app/components/social/groups/groups.component.html

@@ -1,22 +1,13 @@
-<!--<div id="header">
-    <span class="title">Groups</span>
-    <button id="new" type="submit"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
-    <button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
-</div>-->
 <mat-toolbar>
   <span>Groups</span>
   <div id="button-box">
     <button mat-icon-button (click)="openDialog()"><mat-icon>group_add</mat-icon></button>
   </div>
 </mat-toolbar>
+
 <div id="grouplist">
-    <!--<div class="groupitem" *ngFor="let group of groups"
+    <mat-card class="group-card" *ngFor="let group of user.groups" 
-    [class.selected]="group === selectedGroup" (click)="showGroup(group)"> 
+    [class.selected]="group === selectedGroup">
-      <div class="picture">Pic</div>
-      <div class="name"><span>{{group.name}}</span></div>
-    </div>-->
-    <mat-card class="group-card" *ngFor="let group of groups" 
-    [class.selected]="group === selectedGroup" (click)="showGroup(group)">
       <mat-card-header>
         <div mat-card-avatar class="group-picture"></div>
         <mat-card-title>{{group.name}}</mat-card-title>

src/app/components/social/groups/groups.component.ts

@@ -1,27 +1,54 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { GroupInfo } from 'src/app/models/groupinfo';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import { SocialService } from 'src/app/services/social/social.service';
+import { User } from 'src/app/models/user';
+import { DatasharingService } from 'src/app/services/datasharing.service';
 
-export interface DialogData {
+// DIALOG COMPONENT to create groups
-  animal: string;
+@Component({
-  name: string;
+  selector: 'dialog-overview-example-dialog',
+  templateUrl: 'dialog.html',
+})
+export class DialogCreateGroupComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<DialogCreateGroupComponent>, private social: SocialService) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  createGroup(name: string) {
+    console.log('create groupe ' + name);
+    name = name.trim();
+    if (name) {
+    this.social.createGroup(name);
+    this.dialogRef.close();
     }
 
+  }
+}
+
+// GROUP COMPONENT
 @Component({
   selector: 'social-groups',
   templateUrl: './groups.component.html',
   styleUrls: ['./groups.component.sass']
 })
 export class GroupsComponent implements OnInit {
-  // TODO: replace with actual logic that loads the groups from the backend
+  user: User;
-  groups: Array<GroupInfo> = [
+  constructor(public dialog: MatDialog, private data: DatasharingService) { }
-    new GroupInfo(1, 'Group 1', []),
-    new GroupInfo(1, 'Group 2', []),
-    new GroupInfo(1, 'Group 3', []),
-    new GroupInfo(1, 'Group 4', [])];
-  constructor() { }
 
   ngOnInit() {
+    this.data.currentUserInfo.subscribe(user => {
+    this.user = user; });
   }
 
+  openDialog(): void {
+    const dialogRef = this.dialog.open(DialogCreateGroupComponent, {
+      width: '250px'
+    });
   }
+}
+

src/app/components/social/social.component.html

@@ -4,7 +4,9 @@
             <ng-template mat-tab-label>
                 <mat-icon>people</mat-icon>
             </ng-template> 
-            <social-friends id="friendscontainer"></social-friends>
+            <div id="friendscontainer">
+                <social-friends></social-friends>
+            </div>
             <social-groups id="groupscontainer"></social-groups>
         </mat-tab>
         <mat-tab>    

src/app/components/social/social.component.sass

@@ -2,16 +2,8 @@
 @import '../../../styles/vars.sass'
 
 #friendscontainer
-  box-sizing: content-box
-  height: 50%
-  width: 100%
-  overflow: auto
     
 #groupscontainer
-  box-sizing: content-box
-  height: 50%
-  width: 100%
-  overflow: auto
 
 #tabs
   /deep/ .mat-tab-label

src/app/models/groupinfo.ts

@@ -1,11 +1,9 @@
 export class GroupInfo {
     id: number;
     name: string;
-    members: number[];
 
-    constructor(pId: number, pName: string, pMembers: number[]) {
+    constructor(pId: number, pName: string) {
         this.id = pId;
         this.name = pName;
-        this.members = pMembers;
     }
 }

src/app/models/user.ts

@@ -1,5 +1,6 @@
 import { FriendRequest } from 'src/app/models/friendRequest';
 import { FriendInfo } from 'src/app/models/friendinfo';
+import { GroupInfo } from 'src/app/models/groupinfo';
 
 export class User {
   loggedIn = false;
@@ -14,7 +15,7 @@ export class User {
   darkmode = false;
 
   friends: FriendInfo[] = new Array();
-  groupIDs: number[];
+  groups: GroupInfo[] = new Array();
   chatIDs: number[];
   receivedRequests: FriendRequest[] = new Array();
   sentRequestUserIDs: number[] = new Array(); // IDs of users that already received requests of the logged in user

src/app/services/login/login.service.ts

@@ -7,6 +7,7 @@ import {Router} from '@angular/router';
 import {environment} from 'src/environments/environment';
 import { FriendRequest } from 'src/app/models/friendRequest';
 import { FriendInfo } from 'src/app/models/friendinfo';
+import { GroupInfo } from 'src/app/models/groupinfo';
 
 @Injectable({
   providedIn: 'root'
@@ -48,7 +49,10 @@ export class LoginService {
     for (const friend of response.data.login.friends) {
       user.friends.push(new FriendInfo(friend.id, friend.name, friend.level));
     }
-    user.groupIDs = response.data.login.groups;
+    for (const group of response.data.login.groups) {
+      console.log(group.name);
+      user.groups.push(new GroupInfo(group.id, group.name));
+    }
     user.chatIDs = response.data.login.chats;
     for (const request of response.data.login.sentRequests) {
       user.sentRequestUserIDs.push(request.receiver.id);
@@ -85,7 +89,8 @@ export class LoginService {
            level
           },
           groups {
-            id
+            id,
+            name
           },
           chats{
             id

src/app/services/register/register.service.ts

@@ -51,7 +51,7 @@ export class RegisterService {
     for (const friend of response.data.register.friends) {
       user.friends.push(new FriendInfo(friend.id, friend.name, friend.level));
     }
-    user.groupIDs = response.data.register.groups;
+    // user.groupIDs = response.data.register.groups;
     user.chatIDs = response.data.register.chats;
     for (const request of response.data.register.sentRequests) {
       user.sentRequestUserIDs.push(request.receiver.id);

src/app/services/selfservice/self.service.ts

@@ -8,6 +8,7 @@ import {Router} from '@angular/router';
 import { environment } from 'src/environments/environment';
 import { FriendRequest } from 'src/app/models/friendRequest';
 import { FriendInfo } from 'src/app/models/friendinfo';
+import { GroupInfo } from 'src/app/models/groupinfo';
 
 @Injectable({
   providedIn: 'root'
@@ -32,6 +33,7 @@ export class SelfService {
       }, error => {
         this.notLoggedIn();
         console.log(error.text());
+        // this.fakeLogin();
       }
       );
   }
@@ -56,7 +58,10 @@ export class SelfService {
     for (const friend of response.data.getSelf.friends) {
       user.friends.push(new FriendInfo(friend.id, friend.name, friend.level));
     }
-    user.groupIDs = response.data.getSelf.groups;
+    for (const group of response.data.getSelf.groups) {
+      console.log(group.name);
+      user.groups.push(new GroupInfo(group.id, group.name));
+    }
     user.chatIDs = response.data.getSelf.chats;
     for (const request of response.data.getSelf.sentRequests) {
       user.sentRequestUserIDs.push(request.receiver.id);
@@ -113,7 +118,8 @@ export class SelfService {
          level
         },
         groups {
-          id
+          id,
+          name
         },
         chats{
           id

src/app/services/social/social.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SocialService } from './social.service';
+
+describe('SocialService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: SocialService = TestBed.get(SocialService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/social/social.service.ts

@@ -0,0 +1,37 @@
+import {Injectable} from '@angular/core';
+import {Headers, Http} from '@angular/http';
+import {DatasharingService} from '../datasharing.service';
+import {Router} from '@angular/router';
+import {environment} from 'src/environments/environment';
+import { User } from 'src/app/models/user';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SocialService {
+
+  users:  Array<User>;
+  constructor(private http: Http, private data: DatasharingService, private router: Router) {
+  }
+
+  createGroup(name: string) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    this.http.post(environment.graphQLUrl, this.buildJsonGroup(name)).subscribe(response => {
+        console.log(response.text()); });
+  }
+
+  public buildJsonGroup(name_: String): any {
+    const body = {
+      query: `mutation($name: String!) {
+        createGroup(name: $name) {
+          id
+        }
+      }`
+      , variables: {
+        name: name_
+      }
+    };
+    return body;
+  }
+}