Merge pull request #68 from ComputerScienceHouse/conditional-form

Add conditional creation and actions

Author: stevenmirabito

conditional/blueprints/conditional.py

@@ -61,7 +61,7 @@ def create_conditional():
 
     uid = post_data['uid']
     description = post_data['description']
-    due_date = datetime.strptime(post_data['due_date'], "%Y-%m-%d")
+    due_date = datetime.strptime(post_data['dueDate'], "%Y-%m-%d")
 
     db.session.add(Conditional(uid, description, due_date))
     db.session.flush()
@@ -97,3 +97,21 @@ def conditional_review():
     db.session.flush()
     db.session.commit()
     return jsonify({"success": True}), 200
+
+
+@conditionals_bp.route('/conditionals/delete/<cid>', methods=['DELETE'])
+def conditional_delete(cid):
+    log = logger.new(user_name=request.headers.get("x-webauth-user"),
+                     request_id=str(uuid.uuid4()))
+    log.info('api', action='delete conditional')
+
+    user_name = request.headers.get('x-webauth-user')
+    if ldap_is_eval_director(user_name):
+        Conditional.query.filter(
+            Conditional.id == cid
+        ).delete()
+        db.session.flush()
+        db.session.commit()
+        return jsonify({"success": True}), 200
+    else:
+        return "Must be evals director to delete!", 401

conditional/templates/conditional.html

@@ -1,58 +1,90 @@
 {% extends "nav.html" %}
 {% block title %}
-Conditionals
-{% endblock %}
-{% block extraFooter %}
-<script src="../static/js/conditional.js"></script>
+    Conditionals
 {% endblock %}
 {% block body %}
-<div class="container main">
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <h3 class="panel-title">Conditionals</h3>
+    <div class="container main">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <h3 class="panel-title">
+                    Conditionals
+                    {% if is_eval_director %}
+                        <button type="button" class="btn btn-primary btn-sm btn-conditional pull-right" data-toggle="modal" data-target="#createConditional">
+                            <span class="glyphicon glyphicon-plus"></span> Add
+                        </button>
+                    {% endif %}
+                </h3>
+            </div>
+            <div class="panel-body table-fill">
+                <div class="table-responsive">
+                    {% if conditionals_len == 0 %}
+                        <div class="alert alert-info" style="margin:15px;">No conditionals.</div>
+                    {% else %}
+                        <table class="table table-striped no-bottom-margin" data-module="table">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Date Created</th>
+                                    <th>Date Due</th>
+                                    <th>Description</th>
+                                    {% if is_eval_director %}
+                                    <th>Actions</th>
+                                    {% endif %}
+                                </tr>
+                            </thead>
+                            <tbody>
+                            {% for c in conditionals %}
+                                <tr id="conditional-{{ c['id'] }}" conditional_id="{{ c['id'] }}">
+                                    <td>{{ c['name'] }}</td>
+                                    <td>{{ c['date_created'] }}</td>
+                                    <td>{{ c['date_due'] }}</td>
+                                    <td>{{ c['description'] }}</td>
+                                    {% if is_eval_director %}
+                                    <td data-module="conditionalActions" data-id="{{ c['id'] }}">
+                                        <button role="button" class="btn btn-sm btn-success" data-action="pass">Pass</button>
+                                        <button role="button" class="btn btn-sm btn-danger" data-action="fail">Fail</button>
+                                        <button role="button" class="btn btn-sm btn-default" data-action="delete"><span class="glyphicon glyphicon-trash"></span> Delete</button>
+                                    </td>
+                                    {% endif %}
+                                </tr>
+                            {% endfor %}
+                            </tbody>
+                        </table>
+                    {% endif %}
+                </div>
+            </div>
         </div>
-        <div class="panel-body table-fill">
-            <div class="table-responsive">
-                {% if conditionals_len == 0 %}
-                <div class="alert alert-info" style="margin:15px;">No conditionals.</div>
-                {% else %}
-                <table class="table table-striped no-bottom-margin">
-                    <tbody id="conditionals">
-                        <tr>
-                            <th>Name</th>
-                            <th>Date Created</th>
-                            <th>Date Due</th>
-                            <th>Description</th>
-                            {% if is_eval_director %}
-                            <th>Controls</th>
-                            {% endif %}
-                        </tr>
-                        <!-- ng-repeat="conditional in conditionals.data"-->
-                        {% for c in conditionals %}
-                        <tr id="conditional-{{c['id']}}" conditional_id="{{c['id']}}">
-                            <td>{{c['name']}}</td> <!-- If showing all users -->
-                            <td>{{c['date_created']}}</td>
-                            <td>{{c['date_due']}}</td>
-                            <td>{{c['description']}}</td>
-                            {% if is_eval_director %}
-                            <th>
-                                    <button role="button" class="btn btn-raised btn-primary btn-success" style="width:100%;" id="pass-{{c['id']}}">
-                                        Pass
-                                    </button>
-                                    <button role="button" class="btn btn-raised btn-primary btn-danger" style="width:100%;" id="fail-{{c['id']}}">
-                                        Fail
-                                    </button>
+    </div>
+    <div class="modal fade" id="createConditional" tabindex="-1">
+    <div class="vertical-alignment-helper">
+        <div class="modal-dialog vertical-align-center">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                    <h4 class="modal-title" id="editUserTitle">Conditional</h4>
+                </div>
+                <form data-module="conditionalForm" method="post">
+                    <div class="modal-body">
+                        <div class="row user-edit-row">
+                            <label class="control-label" for="memberName">Member Name</label>
+                            <select name="uid" id="memberName" class="form-control" data-module="memberSelect" data-src="cm_members"></select>
+                        </div>
 
-                            </th>
-                            {% endif %}
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-                {% endif %}
+                        <div class="row user-edit-row">
+                            <label class="control-label" for="due_date">Due Date</label>
+                            <input type="text" id="due_date" name="due_date" class="form-control" data-module="datepicker" />
+                        </div>
+                        <div class="row user-edit-row">
+                            <label class="control-label" for="requirement">Requirement</label>
+                            <input type="text" class="form-control" id="requirement" name="description">
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <input type="submit" class="btn btn-primary" value="Create">
+                    </div>
+                </form>
             </div>
         </div>
     </div>
-    <div >
-    </div>
-        {% endblock %}
+</div>
+{% endblock %}

frontend/javascript/modules/conditionalActions.js

@@ -0,0 +1,45 @@
+import FetchUtil from '../utils/fetchUtil';
+
+export default class ConditionalActions {
+  constructor(actions) {
+    this.actions = actions;
+    this.id = this.actions.dataset.id;
+    this.endpoint = '/conditionals/review';
+    this.deleteEndpoint = '/conditionals/delete/' + this.id;
+    this.render();
+  }
+
+  render() {
+    this.actions.querySelectorAll('button').forEach(btn => {
+      btn.addEventListener('click', e => this._handleAction(e));
+    });
+  }
+
+  _handleAction(e) {
+    const action = e.target.dataset.action;
+
+    if (action === "delete") {
+      FetchUtil.fetchWithWarning(this.deleteEndpoint, {
+        method: 'DELETE',
+        warningText: "Are you sure you want to delete this conditional?",
+        successText: "The conditional has been deleted."
+      }, () => {
+        $(e.target.closest("tr")).hide();
+      });
+    } else {
+      const actionExt = (action === "pass") ? "Passed" : "Failed";
+
+      let payload = {
+        id: this.id,
+        status: actionExt
+      };
+
+      FetchUtil.postWithWarning(this.endpoint, payload, {
+        warningText: "Are you sure you want to " + action +
+          " this conditional?",
+        successText: "The conditional has been marked as " +
+          actionExt.toLowerCase() + "."
+      });
+    }
+  }
+}

frontend/javascript/modules/conditionalForm.js

@@ -0,0 +1,32 @@
+import FetchUtil from "../utils/fetchUtil";
+
+export default class ConditionalForm {
+  constructor(form) {
+    this.form = form;
+    this.endpoint = '/conditionals/create';
+    this.render();
+  }
+
+  render() {
+    this.form.querySelector('input[type=submit]')
+            .addEventListener('click', e => this._submitForm(e));
+  }
+
+  _submitForm(e) {
+    e.preventDefault();
+
+    let payload = {
+      uid: this.form.querySelector('select[name=uid]').value,
+      description: this.form.querySelector('input[name=description]').value,
+      dueDate: this.form.querySelector('input[name=due_date]').value
+    };
+
+    FetchUtil.postWithWarning(this.endpoint, payload, {
+      warningText: "Are you sure you want to create this conditional?",
+      successText: "The conditional has been created."
+    }, () => {
+      $(this.form.closest('.modal')).modal('hide');
+      location.reload();
+    });
+  }
+}

frontend/javascript/modules/majorProjectStatus.js

@@ -10,7 +10,7 @@ export default class MajorProjectStatus {
     this.control = control;
     this.id = this.control.dataset.id;
     this.endpoint = '/major_project/review';
-    this.deleteEndpoint = '/major_project/delete/';
+    this.deleteEndpoint = '/major_project/delete/' + this.id;
     this.render();
   }
 
@@ -33,7 +33,7 @@ export default class MajorProjectStatus {
 
   _changeStatus(option) {
     if (option === "Delete") {
-      FetchUtil.fetchWithWarning(this.deleteEndpoint + this.id, {
+      FetchUtil.fetchWithWarning(this.deleteEndpoint, {
         method: 'DELETE',
         warningText: 'This action cannot be undone.',
         successText: 'Major project deleted.'

frontend/javascript/modules/memberSelect.js

@@ -35,7 +35,7 @@ export default class MemberSelect {
   }
 
   render() {
-    window.$(this.element).selectize({
+    $(this.element).selectize({
       persist: false,
       openOnFocus: false,
       closeAfterSelect: true,

frontend/stylesheets/components/_flat-buttons.scss

@@ -18,5 +18,6 @@ $btn-flat-hover-bg: rgba(153, 153, 153, .2);
     box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
     background: darken($btn-flat-hover-bg, 20%) radial-gradient(circle, #7a1158 10%, #b0197e 11%) no-repeat;
     background-size: 1000% 1000%;
+    color: #fff;
   }
 }

frontend/stylesheets/components/_select.scss

@@ -145,6 +145,14 @@ $selectize-arrow-offset: $selectize-padding-x + 5px !default;
     }
   }
 
+  &.single {
+    .item,
+    input {
+      margin-top: 11px !important;
+      font-size: 16px;
+    }
+  }
+
   &.form-control {
     @include selectize-border-radius (0);
     @include selectize-box-shadow (inset 0 -1px 0 #ddd);

frontend/stylesheets/pages/_evals.scss

@@ -53,3 +53,10 @@
     text-align: center;
   }
 }
+
+.btn-conditional {
+  float: right;
+  margin-top: -4px;
+  box-shadow: none;
+  padding: 3px 7px;
+}