Updated templates page to handle PUT vs POST - can now edit templates

static/js/app/templates.js

@@ -1,4 +1,4 @@
-var template = {attachments:[]}
+var templates = []
 var icons = {
     "application/vnd.ms-excel" : "fa-file-excel-o",
     "text/plain" : "fa-file-text-o",
@@ -14,7 +14,8 @@ var icons = {
 }
 
 // Save attempts to POST to /templates/
-function save(){
+function save(idx){
+    var template = {attachments:[]}
     template.name = $("#name").val()
     template.subject = $("#subject").val()
     template.html = CKEDITOR.instances["html_editor"].getData();
@@ -27,6 +28,15 @@ function save(){
             type: target[4],
         })
     })
+    if (idx != -1){
+        template.id = templates[idx].id
+        api.templateId.put(template)
+        .success(function(data){
+            successFlash("Template edited successfully!")
+            load()
+            dismiss()
+        })
+    } else {
         // Submit the template
         api.templates.post(template)
         .success(function(data){
@@ -37,12 +47,16 @@ function save(){
         .error(function(data){
             modalError(data.responseJSON.message)
         })
+    }
 }
 
 function dismiss(){
     $("#modal\\.flashes").empty()
     $("#modal").modal('hide')
-    template = {attachments:[]}
+    $("#attachmentsTable").dataTable().DataTable().clear().draw()
+    $("#name").val("")
+    $("#text_editor").val("")
+    $("#html_editor").val("")
 }
 
 function attach(files){
@@ -68,32 +82,66 @@ function attach(files){
     })
 }
 
-function edit(t){
+function edit(idx){
+    $("#modalSubmit").unbind('click').click(function(){save(idx)})
+    $("#attachmentUpload").unbind('click').click(function(){this.value=null})
     $("#html_editor").ckeditor()
     $("#attachmentsTable").show()
-    $("#attachmentsTable").DataTable({
+    attachmentsTable = null
+    if ( $.fn.dataTable.isDataTable('#attachmentsTable') ) {
+        attachmentsTable = $('#attachmentsTable').DataTable();
+    }
+    else {
+        attachmentsTable = $("#attachmentsTable").DataTable({
             "aoColumnDefs" : [{
                 "targets" : [3,4],
                 "sClass" : "datatable_hidden"
             }]
         });
-    if (t == "new") {
-        template = {attachments:[]}
     }
+    var template = {attachments:[]}
+    if (idx != -1) {
+        template = templates[idx]
+        $("#name").val(template.name)
+        $("#html_editor").val(template.html)
+        $("#text_editor").val(template.text)
+        $.each(template.attachments, function(i, file){
+            var icon = icons[file.type] || "fa-file-o"
+            // Add the record to the modal
+            attachmentsTable.row.add([
+                '<i class="fa ' + icon + '"></i>',
+                file.name,
+                '<span class="remove-row"><i class="fa fa-trash-o"></i></span>',
+                file.content,
+                file.type || "application/octet-stream"
+            ]).draw()
+        })
+    }
+    // Handle Deletion
+    $("#attachmentsTable").unbind('click').on("click", "span>i.fa-trash-o", function(){
+        attachmentsTable.row( $(this).parents('tr') )
+        .remove()
+        .draw();
+    })
 }
 
 function load(){
-    api.templates.get()
+    $("#templateTable").hide()
-    .success(function(templates){
-        if (templates.length > 0){
     $("#emptyMessage").hide()
+    $("#loading").show()
+    api.templates.get()
+    .success(function(ts){
+        templates = ts
+        $("#loading").hide()
+        if (templates.length > 0){
             $("#templateTable").show()
             templateTable = $("#templateTable").DataTable();
+            templateTable.clear()
             $.each(templates, function(i, template){
                 templateTable.row.add([
                     template.name,
                     moment(template.modified_date).format('MMMM Do YYYY, h:mm:ss a'),
-                    "<div class='pull-right'><button class='btn btn-primary' onclick='alert(\"test\")'>\
+                    "<div class='pull-right'><button class='btn btn-primary' data-toggle='modal' data-target='#modal' onclick='edit(" + i + ")'>\
                     <i class='fa fa-pencil'></i>\
                     </button>\
                     <button class='btn btn-danger' onclick='alert(\"test\")'>\
@@ -101,9 +149,12 @@ function load(){
                     </button></div>"
                 ]).draw()
             })
+        } else {
+            $("#emptyMessage").show()
         }
     })
     .error(function(){
+        $("#loading").hide()
         errorFlash("Error fetching templates")
     })
 }

templates/templates.html

@@ -9,7 +9,7 @@
                 </li>
                 <li><a href="/users">Users &amp; Groups</a>
                 </li>
-                <li class="active"><a href="#/templates">Email Templates</a>
+                <li class="active"><a href="/templates">Email Templates</a>
                 </li>
                 <li><a href="/landing_pages">Landing Pages</a>
                 </li>
@@ -29,12 +29,15 @@
     </div>
     <div id="flashes" class="row"></div>
     <div class="row">
-        <button type="button" class="btn btn-primary" onclick="edit('new')" data-toggle="modal" data-target="#modal"><i class="fa fa-plus"></i> New Template</button>
+        <button type="button" class="btn btn-primary" onclick="edit(-1)" data-toggle="modal" data-target="#modal"><i class="fa fa-plus"></i> New Template</button>
     </div>
     &nbsp;
-    <div id="emptyMessage" class="row">
+    <div id="loading">
+        <i class="fa fa-spinner fa-spin fa-4x"></i>
+    </div>
+    <div id="emptyMessage" class="row" style="display:none;">
         <div class="alert alert-info">
-            No templates created yet. Let's create one!
+            No templates yet. Let's create one!
         </div>
     </div>
     <div class="row">
@@ -50,30 +53,6 @@
             </tbody>
         </table>
     </div>
-    <!-- <div ng-show="templates.length" class="row">
-        <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
-            <tbody>
-                <tr ng-repeat="template in $data | orderBy: '-modified_date'" class="editable-row">
-                    <td data-title="'Name'" sortable="'name'" class="col-sm-2">template.name
-                        <div class="btn-group" style="float: right;">
-                            <button type="button" class="btn btn-primary dropdown-toggle edit-button" data-toggle="dropdown">
-                                <span class="caret" style="border-top-color:#FFFFFF"></span>
-                                <span class="sr-only">Toggle Dropdown</span>
-                            </button>
-                            <ul class="dropdown-menu" style="left:auto; right:0;" role="menu">
-                                <li><a ng-click="editTemplate(template)">Edit</a>
-                                </li>
-                                <li class="divider"></li>
-                                <li><a ng-click="deleteTemplate(template)">Delete</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </td>
-                    <td data-title="'Modified Date'" class="col-sm-1">template.modified_date | date:'medium'</td>
-                </tr>
-            </tbody>
-        </table>
-    </div> -->
 </div>
 <!-- Modal -->
 <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
@@ -113,7 +92,7 @@
             </div>
             <br />
             <span class="btn btn-danger btn-file"><i class="fa fa-plus"></i> Add Files
-                <input type="file" onchange="attach(this.files)" multiple>
+                <input id="attachmentUpload" type="file" onchange="attach(this.files)" multiple>
             </span>
             <br />
             <br />
@@ -133,7 +112,7 @@
         </div>
         <div class="modal-footer">
             <button type="button" class="btn btn-default" onclick="dismiss()">Cancel</button>
-            <button type="button" class="btn btn-primary" onclick="save()">Save Template</button>
+            <button type="button" class="btn btn-primary" id="modalSubmit">Save Template</button>
         </div>
     </div>
 </div>