Added functionality to conditional form 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

@@ -2,17 +2,14 @@
 {% block title %}
     Conditionals
 {% endblock %}
-{% block extraFooter %}
-    <script src="../static/js/conditional.js"></script>
-{% endblock %}
 {% block body %}
     <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" data-toggle="modal" data-target="#createConditional">
+                        <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 %}
@@ -23,36 +20,31 @@ <h3 class="panel-title">
                     {% 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"-->
+                        <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> <!-- If showing all users -->
+                                    <td>{{ c['name'] }}</td>
                                     <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>
-
-                                        </th>
+                                    <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 %}
@@ -71,26 +63,26 @@ <h3 class="panel-title">
                     <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>
-                <div class="modal-body">
-                    <div class="row user-edit-row">
-                        <label class="control-label" for="memberName">Member Name</label>
-                        <input type="text" name="attendees" class="form-control" data-module="memberSelect" data-src="cm_members"/>
-                    </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>
 
-                    <div class="row user-edit-row">
-                        <label class="control-label" for="memberName">Due Date</label>
-                        <input type="text" name="date" class="form-control" value="{{ date }}" data-module="datepicker" />
+                        <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="row user-edit-row">
-                        <label class="control-label" for="memberName">Requirement</label>
-                        <input class="form-control" id="memberName" name="name" type="text">
+                    <div class="modal-footer">
+                        <input type="submit" class="btn btn-primary" value="Create">
                     </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-success save-btn pull-left">Pass</button>
-                    <button type="button" class="btn btn-danger save-btn pull-left">Fail</button>
-                    <button type="button" class="btn btn-primary save-btn">Save</button>
-                </div>
+                </form>
             </div>
         </div>
     </div>

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

@@ -57,7 +57,6 @@
 .btn-conditional {
   float: right;
   margin-top: -4px;
-  padding: 3px 7px;
   box-shadow: none;
-
+  padding: 3px 7px;
 }