Merge pull request #150 from Want100Cookies/feature/Frontend_editGroups

Feature/frontend edit groups
Want100Cookies · Jan 25, 2018 · ea1a641 · ea1a641
2 parents 487125e + 93feb45
commit ea1a641
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 7 deletions.
diff --git a/src/main/resources/public/app/components/teacherCard.component.js b/src/main/resources/public/app/components/teacherCard.component.js
@@ -11,15 +11,22 @@ function teacherCardCtrl($scope, GroupService, $state, $mdDialog, API) {
     };
 
     ctrl.gradeGroup = () => {
-        $state.transitionTo("app.groupGrade", {groupId: ctrl.group.id});
+        $state.transitionTo("app.groupGrade", {
+            groupId: ctrl.group.id
+        });
     };
 
     ctrl.finalGroupView = () => {
-        $state.transitionTo("app.finalGroupOverview", {groupId: ctrl.group.id});
+        $state.transitionTo("app.finalGroupOverview", {
+            groupId: ctrl.group.id
+        });
     };
 
     ctrl.editGroup = (ev) => {
         $mdDialog.show({
+            locals: {
+                group: ctrl.group
+            },
             bindToController: true,
             controller: EditGroupDialogController,
             templateUrl: '/app/dialogs/editGroupDialog.tmpl.html',
@@ -90,13 +97,65 @@ function teacherCardCtrl($scope, GroupService, $state, $mdDialog, API) {
     };
 }
 
-function EditGroupDialogController($scope, $mdDialog) {
+function EditGroupDialogController($scope, $mdDialog, EducationService, group, GroupService, $mdToast) {
+    $scope.group = group;
+    $scope.chosenEducation = group.course.education.id;
+    $scope.courseOptions = [];
+    $scope.educationOptions = [];
+
+    EducationService.getEducations().then((response) => {
+        $scope.educationOptions = response.data;
+    })
+    $scope.$watch('chosenEducation', () => {
+        $scope.courseOptions = null;
+        if ($scope.chosenEducation !== null) {
+            EducationService.getCoursesByEducation($scope.chosenEducation).then((response) => {
+                $scope.courseOptions = response.data;
+            })
+        }
+    });
+
+    $scope.vm = {
+        formData: {
+            groupName: group.groupName,
+            startYear: group.startYear,
+            endYear: group.endYear,
+            users: group.users,
+            course: {
+                id: group.course.id,
+                education: {
+                    id: group.course.education.id
+                }
+            },
+            period: group.period,
+        },
+    };
+    $scope.usersChange = (val) => {
+        $scope.vm.formData.users = val;
+    };
+
     $scope.hide = () => {
         $mdDialog.hide();
     };
-    $scope.close = () => {
-        $mdDialog.close();
+    $scope.cancel = () => {
+        $mdDialog.cancel();
     };
+    $scope.showSimpleToast = () => {
+        $mdToast.show(
+            $mdToast.simple()
+            .textContent('Edited Group!')
+            .hideDelay(3000)
+        );
+    };
+    $scope.edit = () => {
+        if (Object.keys($scope.vm.formData.period).length !== 0 && $scope.vm.formData.users.length !== 0 &&
+            $scope.vm.formData.groupName != null && $scope.vm.formData.startYear != null && $scope.vm.formData.endYear != null &&
+            $scope.vm.formData.course != null) {
+            GroupService.editGroup($scope.vm.formData, $scope.group.id);
+            $scope.showSimpleToast();
+            $scope.hide();
+        }
+    }
 }
 
 app.component('teacherCard', {

diff --git a/src/main/resources/public/app/components/userChipsInput.component.js b/src/main/resources/public/app/components/userChipsInput.component.js
@@ -1,12 +1,18 @@
 app.component('userChipsInput', {
     templateUrl: '/app/components/userChipsInput.component.html',
     controller: userChipsInputCtrl,
+    bindings: {
+        selectedUsers: '<',
+    }
 });
 
 function userChipsInputCtrl(UserService, $scope) {
-
     this.userArray = [];
     this.users = [];
+
+    $scope.$watchCollection('$ctrl.selectedUsers', (users) => {
+        this.users = users;
+    });
 
     $scope.$watchCollection('$ctrl.users', (users) => {
         $scope.$parent.usersChange(users);

diff --git a/src/main/resources/public/app/dialogs/editGroupDialog.tmpl.html b/src/main/resources/public/app/dialogs/editGroupDialog.tmpl.html
@@ -10,6 +10,70 @@ <h2>Edit Group</h2>
             </div>
         </md-toolbar>
         <md-content style="padding: 10px;">
-            <span>Work in progress</span>
+            <form name="GroupForm">
+                </br>
+                <md-input-container class="md-block" style="margin: 0;">
+                    <label>Group name</label>
+                    <input type="text" name="groupName" ng-model="vm.formData.groupName" required />
+                    <div ng-messages="GroupForm.groupName.$error" role="alert" multiple="">
+                        <div class="my-message" ng-message="required">You must supply a group name.</div>
+                    </div>
+                </md-input-container>
+                <div layout="row" style="width: 100%;">
+                    <md-input-container class="md-block" style="width: 50%; margin: 0;">
+                        <label>Start year</label>
+                        <input type="number" name="startYear" ng-model="vm.formData.startYear" required />
+                        <div ng-messages="GroupForm.startYear.$error" role="alert" multiple="">
+                            <div class="my-message" ng-message="required">You must supply a starting year.</div>
+                        </div>
+                    </md-input-container>
+                    <md-input-container class="md-block" style="width: 50%; margin: 0;">
+                        <label>End year</label>
+                        <input type="number" name="endYear" ng-model="vm.formData.endYear" required />
+                        <div ng-messages="GroupForm.EndYear.$error" role="alert" multiple="">
+                            <div class="my-message" ng-message="required">You must supply a ending year.</div>
+                        </div>
+                    </md-input-container>
+                </div>
+                <div layout="row" style="width: 100%;">
+                    <md-input-container class="md-block" style="width: 50%; margin: 0;">
+                        <md-select md-container-class="mySelect" ng-model="chosenEducation" aria-label="Select education">
+                            <md-option ng-repeat="education in educationOptions" value="{{education.id}}" placeholder="Education">
+                                {{education.name}}
+                            </md-option>
+                        </md-select>
+                    </md-input-container>
+                    <md-input-container class="md-block" style="width: 50%; margin: 0;">
+                        <md-select md-container-class="mySelect" ng-disabled="(!chosenEducation)" ng-model="vm.formData.course.id" aria-label="Select course">
+                            <md-option ng-repeat="course in courseOptions" value="{{course.id}}" placeholder="Course">
+                                {{course.name}}
+                            </md-option>
+                        </md-select>
+                    </md-input-container>
+                </div>
+                <h1 class="md-subhead" style="text-align: left; margin-top: 20px;">Periods</h1>
+                <div layout="row" style="width: 100%; height: 60px; margin: 0;">
+                    <md-input-container class="md-block" style="width: 100%;">
+                        <md-checkbox class="override-checkbox" name="firstPeriod" ng-model="vm.formData.period.Q1" required>
+                            Q1
+                        </md-checkbox>
+                        <md-checkbox class="override-checkbox" name="secondPeriod" ng-model="vm.formData.period.Q2" required>
+                            Q2
+                        </md-checkbox>
+                        <md-checkbox class="override-checkbox" name="thirdPeriod" ng-model="vm.formData.period.Q3" required>
+                            Q3
+                        </md-checkbox>
+                        <md-checkbox class="override-checkbox" name="fourthPeriod" ng-model="vm.formData.period.Q4" required>
+                            Q4
+                        </md-checkbox>
+                    </md-input-container>
+                </div>
+                <user-chips-input selected-users="group.users" style="margin-top: 0;"></user-chips-input>
         </md-content>
+        <md-dialog-actions layout="row">
+            <md-button class="md-raised md-primary pull-right formPage" md-autofocus ng-click="edit()">
+                Edit group
+            </md-button>
+        </md-dialog-actions>
+        </form>
 </md-dialog>
diff --git a/src/main/resources/public/app/js/groups.js b/src/main/resources/public/app/js/groups.js
@@ -102,6 +102,9 @@ app.controller('TeacherGroupsCtrl', function ($scope, $mdDialog, UserService, Gr
         $scope.hide = () => {
             $mdDialog.hide();
         }
+        $scope.cancel = () => {
+            $mdDialog.cancel();
+        }
         $scope.create = () => {
             if (Object.keys($scope.vm.formData.period).length !== 0 && $scope.vm.formData.users.length !== 0 &&
                 $scope.vm.formData.groupName != null && $scope.vm.formData.startYear != null && $scope.vm.formData.endYear != null &&

diff --git a/src/main/resources/public/app/services/group.service.js b/src/main/resources/public/app/services/group.service.js
@@ -25,6 +25,13 @@ app.factory('GroupService', function (API) {
         });
     };
 
+    this.editGroup = (data, groupId) => {
+        return API.patch({
+            path: `groups/${groupId}`,
+            data
+        })
+    }
+
     this.getGradingStatus = (groupId) => {
         return API.get({
             path: `grades/status/groups/${groupId}`