added create event function

src/app/app.module.ts

@@ -17,6 +17,7 @@ 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 { DialogCreateEventComponent } from './components/group/group.component';
 import { ChatmanagerComponent } from './components/chatmanager/chatmanager.component';
 import { ChatlistComponent } from './components/chatlist/chatlist.component';
 import { PostlistComponent } from './components/feed/postlist/postlist.component';
@@ -61,6 +62,8 @@ import {MatIconRegistry} from '@angular/material/icon';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatExpansionModule} from '@angular/material/expansion';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatNativeDateModule} from '@angular/material/';
 
 // import logo from 'src/assets/gv-new-logo.svg';
 import logo from '!!raw-loader!./gv-new-logo-white.svg';
@@ -101,7 +104,8 @@ const appRoutes: Routes = [
     MainNavigationComponent,
     SearchComponent,
     DialogCreateGroupComponent,
-    GroupComponent
+    GroupComponent,
+    DialogCreateEventComponent
   ],
   imports: [
     BrowserModule,
@@ -110,6 +114,8 @@ const appRoutes: Routes = [
     SocketIoModule.forRoot(config),
     GraphQLModule,
     HttpClientModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
     RouterModule.forRoot(
       appRoutes
     ),
@@ -140,9 +146,10 @@ const appRoutes: Routes = [
     MatProgressSpinnerModule,
     MatDialogModule,
     MatTooltipModule,
-    MatExpansionModule
+    MatExpansionModule,
+    MatDatepickerModule
   ],
-  entryComponents: [ DialogCreateGroupComponent ],
+  entryComponents: [ DialogCreateGroupComponent, DialogCreateEventComponent ],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/components/group/dialog.html

@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>Create a new event!</h1>
+<div mat-dialog-content>
+  <mat-form-field style="display:contents;">
+    <input matInput placeholder="Enter groupname" #name>
+  </mat-form-field>
+  <mat-form-field style="display:contents;">
+    <input matInput [matDatepicker]="picker" placeholder="Choose a date" #date disabled>
+    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker disabled="false"></mat-datepicker>
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancel</button>
+  <button mat-button cdkFocusInitial (click)="createEvent(name.value, date.value)">Create Group</button>
+</div>

src/app/components/group/group.component.html

@@ -5,12 +5,22 @@
             <mat-toolbar-row>
                 <div class="profile-picture"></div>
                 <span id="username">{{groupProfile.name}}</span>
+                <div class="button-box">
                     <button mat-icon-button 
                         class="request-button" 
+                        matTooltip="join group" matTooltipShowDelay="500"
                         (click)="joinGroup(groupProfile)" 
                         [disabled]="!groupProfile.allowedToJoinGroup">
                         <mat-icon>group_add</mat-icon>
                     </button>
+                    <button mat-icon-button 
+                        class="request-button" 
+                        matTooltip="create event" matTooltipShowDelay="500"
+                        (click)="openDialog()" 
+                        [disabled]="!isAdmin">
+                        <mat-icon>event</mat-icon>
+                    </button>
+                </div>
             </mat-toolbar-row>
             <mat-toolbar-row>
                 <div class="info-box">

src/app/components/group/group.component.sass

@@ -20,10 +20,11 @@
   .icon-box
     text-align: right
     width: 100%
+.button-box
+  width: 100%
+  text-align: right
 .request-button
-  margin-top: 0.5em
+  margin: auto 0
-  margin-bottom: 0.5em
-  margin-left: auto
 #toolbar
   margin-top: 32px
   .mat-toolbar-row

src/app/components/group/group.component.ts

@@ -6,7 +6,40 @@ import { RequestService } from 'src/app/services/request/request.service';
 import { DatasharingService } from '../../services/datasharing.service';
 import { GroupService } from 'src/app/services/group/group.service';
 import { Group } from 'src/app/models/group';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 
+// DIALOG COMPONENT to create events
+@Component({
+  selector: 'dialog-overview-example-dialog',
+  templateUrl: 'dialog.html',
+})
+export class DialogCreateEventComponent {
+  groupId: string;
+
+  constructor(
+    public dialogRef: MatDialogRef<DialogCreateEventComponent>,
+    private group: GroupService,
+    private router: Router) {
+      this.groupId = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
+    }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  createEvent(name: string, date: string) {
+    name = name.trim();
+    if (name && date) {
+    this.group.createEvent(name, (new Date(date)).getTime().toString(), this.groupId).subscribe(response => {
+      console.log(response);
+    });
+    this.dialogRef.close();
+    }
+  }
+
+}
+
+// GROUP COMPONENT
 @Component({
   selector: 'app-profile',
   templateUrl: './group.component.html',
@@ -17,12 +50,14 @@ export class GroupComponent implements OnInit {
   groupProfile: Group = new Group();
   self: User;
   id: string;
+  isAdmin = false;
   groupNotFound = false;
 
   loading = false;
 
   constructor(
     private router: Router,
+    public dialog: MatDialog,
     private requestService: RequestService,
     private data: DatasharingService,
     private groupService: GroupService) {
@@ -48,15 +83,27 @@ export class GroupComponent implements OnInit {
     });
     this.groupService.getGroupData(this.id);
     this.groupService.group.subscribe(response => {
+      this.isAdmin = false;
       if (response) {
         this.groupProfile = response;
         // tslint:disable-next-line:max-line-length
         this.groupProfile.allowedToJoinGroup = this.requestService.isAllowedToJoinGroup(this.groupProfile.id, this.self);
+        for (const admin of this.groupProfile.admins) {
+          if (admin.userID === this.self.userID) {
+            this.isAdmin = true;
+          }
+        }
       } else { this.groupNotFound = true; }
       this.loading = false;
     });
   }
 
+  openDialog(): void {
+    const dialogRef = this.dialog.open(DialogCreateEventComponent, {
+      width: '250px'
+    });
+  }
+
   public joinGroup(group: Group) {
     group.allowedToJoinGroup = false;
     this.requestService.joinGroup(group);

src/app/services/group/group.service.ts

@@ -72,4 +72,22 @@ export class GroupService {
     }
     return null;
   }
+
+  public createEvent(name: string, date: string, groupId: string) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    const body = {query: `mutation($groupId: ID!, $name: String, $date: String) {
+        createEvent(name: $name, dueDate: $date, groupId: $groupId) {
+          id
+          name
+          dueDate
+        }
+      }`, variables: {
+          name: name,
+          date: date,
+          groupId: groupId
+      }};
+
+    return this.http.post(environment.graphQLUrl, body);
+  }
 }