Adds loading indicator, mobile select box

mailadmin/static/app/scripts/main.js

@@ -50,12 +50,11 @@
         /* Home view (lists) */
         if( $('body.home').length ) {
             $.getJSON(api_urls.ou_list, function(data) {
-                var ou_html = nunjucks.render('orgunits.html', {
-                    orgunits: data,
-                    api_urls: api_urls
-                });
-
+                /* orgunit list */
+                var ou_html = nunjucks.render('orgunits.html', { orgunits: data });
                 $(".orgunit-list").append(ou_html);
+                var ous_html = nunjucks.render('orgunits_select.html', { orgunits: data });
+                $(".orgunit-select-container").html(ous_html);
 
                 /* New list */
                 var new_list_html = nunjucks.render('new_list.html', {
@@ -135,7 +134,7 @@
 
                 });
 
-                /* Add list filter listeners */
+                /* Add list filter by orgunit */
                 $(".orgunit-list a").on('click', function(e) {
                     var prefix = $(this).attr('data-prefix');
                     var querystring = $(this).attr('href');
@@ -144,6 +143,29 @@
                     /* Toggle selection */
                     $(".orgunit-list li").removeClass('active');
                     $(this).parent().toggleClass('active');
+                    $('.orgunits-select').val(prefix);
+
+                    /* Update query string */
+                    window.history.pushState(null, null, querystring);
+
+                    /* Filter lists */
+                    var re_prefix = new RegExp('^'+prefix);
+                    $(".fwdlist").each(function(el) {
+                        var cur_name = $(this).attr('data-list-name');
+                        if(re_prefix.test(cur_name)) {
+                            $(this).removeClass('hidden');
+                        } else {
+                            $(this).addClass('hidden');
+                        }
+                    });
+                });
+                $(".orgunits-select").on('change', function(e) {
+                    var prefix = $(this).val();
+                    var querystring = '/lists/?q='+prefix;
+
+                    /* Toggle selection */
+                    $(".orgunit-list li").removeClass('active');
+                    $(".orgunit-list li a[data-prefix="+prefix+"]").parent().toggleClass('active');
 
                     /* Update query string */
                     window.history.pushState(null, null, querystring);
@@ -161,10 +183,14 @@
                 });
             });
 
-            /* Load lists */
+            /* Load forwards from API and write to container */
             $.getJSON(api_urls.fwd_list, function(data) {
                 if( !data.cpanelresult ) {
-                    $(".forwards-container").html("No results.");
+                    $(".forwards-container").html(renderAlert("No results.", 'info'));
+                    return;
+                }
+                if( 'error' in data.cpanelresult ) {
+                    $(".forwards-container").html(renderAlert("Klarte ikke hente epostlister fra APIet: "+data.cpanelresult.error, 'danger'));
                     return;
                 }
 
@@ -176,63 +202,55 @@
                 });
 
                 $(".forwards-container").html(fw_html);
-
-                /* Toggle delete state */
-                $("input[name=fwd-delete]").click(function() {
-                    $(this).parent().parent().parent().toggleClass('danger');
-                });
             });
 
-            $(".forwards-container").on('click', function(e) {
-                /* Add to delete selection */
-                var target = $(e.target);
-                if( target.attr('name') == 'fwd-delete' ) {
-                    var tbody = target.closest('tbody');
-                    var num_selected = tbody.find("[name=fwd-delete]:checked").length;
-                    if(num_selected > 0) {
-                        tbody.find('.link-del').addClass('visible');
-                    } else {
-                        tbody.find('.link-del').removeClass('visible');
-                    }
-                }
-                /* Delete selected */
-                else if( target.hasClass('js-del-selected') ) {
-                    var list_name = target.attr('data-delete-list-name');
-                    var checked = $('[data-list-name="'+list_name+'"] [name="fwd-delete"]:checked');
-                    var delete_these = _.map(checked, function(el) {
-                        return $(el).val();
-                    });
-                    var deferreds = [];
-                    $.each(delete_these, function(i, el) {
-                        var data = {
-                            type: 'DELETE',
-                            headers: {'X-CSRFToken': csrf_token},
-                            url: api_urls.fwd_delete + el + '/',
-                            dataType: 'json'
-                        };
-                        deferreds.push($.ajax(data));
-                    });
-                    $.when.apply($, deferreds).then(function(){
-                        // Success
-                        checked.closest('tr').remove();
-                        // TODO remove list if no more rows
-                    }).fail(function(err){
-                        $('[data-list-name="'+list_name+'"] .result-alert').html(renderAlert('Kunne ikke fjerne epostaliaser', 'danger'));
-                    });
-                }
-                else if( target.hasClass('js-toggle-email-textarea')) {
-                    e.preventDefault();
-                    var row = target.closest('tbody').find('.textarea-row');
-                    row.toggleClass('visible');
-                }
-                /* Add new */
-                else if( target.hasClass('js-new-email') ) {
-                    e.preventDefault();
-                    // TODO refactor logic from new list and add here
+            /* Mark row red for deletion and show delete button if applicable */
+            $(".forwards-container").on('click', '[name=fwd-delete]', function(e) {
+                $(this).parent().parent().parent().toggleClass('danger');
+                var tbody = $(this).closest('tbody');
+                var num_selected = tbody.find("[name=fwd-delete]:checked").length;
+                if(num_selected > 0) {
+                    tbody.find('.link-del').addClass('visible');
                 } else {
-                    //console.log(target);
+                    tbody.find('.link-del').removeClass('visible');
                 }
             });
+            /* Delete selected */
+            $(".forwards-container").on('click', '.js-del-selected', function(e) {
+                $(this).attr('data-delete-list-name');
+                var checked = $('[data-list-name="'+list_name+'"] [name="fwd-delete"]:checked');
+                var delete_these = _.map(checked, function(el) {
+                    return $(el).val();
+                });
+                var deferreds = [];
+                $.each(delete_these, function(i, el) {
+                    var data = {
+                        type: 'DELETE',
+                        headers: {'X-CSRFToken': csrf_token},
+                        url: api_urls.fwd_delete + el + '/',
+                        dataType: 'json'
+                    };
+                    deferreds.push($.ajax(data));
+                });
+                $.when.apply($, deferreds).then(function(){
+                    // Success
+                    checked.closest('tr').remove();
+                    // TODO remove list if no more rows
+                }).fail(function(err){
+                    $('[data-list-name="'+list_name+'"] .result-alert').html(renderAlert('Kunne ikke fjerne epostaliaser', 'danger'));
+                });
+            });
+            /* Toggles emails textarea */
+            $(".forwards-container").on('click', '.js-toggle-email-textarea', function(e) {
+                e.preventDefault();
+                var row = $(this).closest('tbody').find('.textarea-row');
+                row.toggleClass('visible');
+            });
+            /* Add emails to current list */
+            $(".forwards-container").on('click', '.js-new-email', function(e) {
+                e.preventDefault();
+                // TODO refactor logic from new list and add here
+            });
             /* New list toggle display */
             $('.new-list-btn').on('click', function() {
                 $('.new-list').toggleClass('visible');

mailadmin/static/app/styles/_animations.scss

@@ -0,0 +1,8 @@
+.spin {
+    animation: spin .8s infinite linear;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg);}
+    to { transform: rotate(360deg);}
+}

mailadmin/static/app/styles/main.scss

@@ -1,6 +1,7 @@
 $icon-font-path: "../fonts/";
 
 @import "../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap";
+@import "animations";
 
 .login-form {
 	margin: 0 auto;
@@ -21,6 +22,14 @@ $icon-font-path: "../fonts/";
 .orgunit-list {
 	margin-bottom: 40px;
 }
+.orgunit-select-container {
+    display: block;
+    margin-bottom: 20px;
+
+	@media (min-width: 768px) {
+    	display: none;
+	}
+}
 
 /* Sidebar navigation */
 .nav-sidebar > .active > a,

mailadmin/static/app/templates/orgunits_select.html

@@ -0,0 +1,6 @@
+<select class="orgunits-select form-control">
+    <option value=".+">Alle</option>
+	{% for ou in orgunits %}
+	<option value="{{ou.prefix }}">{{ ou.name }}</option>
+	{% endfor %}
+</select>

mailadmin/static/dist/scripts/main.js

@@ -50,12 +50,11 @@
         /* Home view (lists) */
         if( $('body.home').length ) {
             $.getJSON(api_urls.ou_list, function(data) {
-                var ou_html = nunjucks.render('orgunits.html', {
-                    orgunits: data,
-                    api_urls: api_urls
-                });
-
+                /* OrgUnit list */
+                var ou_html = nunjucks.render('orgunits.html', { orgunits: data });
                 $(".orgunit-list").append(ou_html);
+                var ous_html = nunjucks.render('orgunits_select.html', { orgunits: data });
+                $(".orgunit-select-container").html(ous_html);
 
                 /* New list */
                 var new_list_html = nunjucks.render('new_list.html', {
@@ -135,7 +134,7 @@
 
                 });
 
-                /* Add list filter listeners */
+                /* Add list filter by orgunit */
                 $(".orgunit-list a").on('click', function(e) {
                     var prefix = $(this).attr('data-prefix');
                     var querystring = $(this).attr('href');
@@ -144,6 +143,29 @@
                     /* Toggle selection */
                     $(".orgunit-list li").removeClass('active');
                     $(this).parent().toggleClass('active');
+                    $('.orgunits-select').val(prefix);
+
+                    /* Update query string */
+                    window.history.pushState(null, null, querystring);
+
+                    /* Filter lists */
+                    var re_prefix = new RegExp('^'+prefix);
+                    $(".fwdlist").each(function(el) {
+                        var cur_name = $(this).attr('data-list-name');
+                        if(re_prefix.test(cur_name)) {
+                            $(this).removeClass('hidden');
+                        } else {
+                            $(this).addClass('hidden');
+                        }
+                    });
+                });
+                $(".orgunits-select").on('change', function(e) {
+                    var prefix = $(this).val();
+                    var querystring = '/lists/?q='+prefix;
+
+                    /* Toggle selection */
+                    $(".orgunit-list li").removeClass('active');
+                    $(".orgunit-list li a[data-prefix="+prefix+"]").parent().toggleClass('active');
 
                     /* Update query string */
                     window.history.pushState(null, null, querystring);
@@ -161,10 +183,14 @@
                 });
             });
 
-            /* Load lists */
+            /* Load forwards from API and write to container */
             $.getJSON(api_urls.fwd_list, function(data) {
                 if( !data.cpanelresult ) {
-                    $(".forwards-container").html("No results.");
+                    $(".forwards-container").html(renderAlert("No results.", 'info'));
+                    return;
+                }
+                if( 'error' in data.cpanelresult ) {
+                    $(".forwards-container").html(renderAlert("Klarte ikke hente epostlister fra APIet: "+data.cpanelresult.error, 'danger'));
                     return;
                 }
 
@@ -176,63 +202,55 @@
                 });
 
                 $(".forwards-container").html(fw_html);
-
-                /* Toggle delete state */
-                $("input[name=fwd-delete]").click(function() {
-                    $(this).parent().parent().parent().toggleClass('danger');
-                });
             });
 
-            $(".forwards-container").on('click', function(e) {
-                /* Add to delete selection */
-                var target = $(e.target);
-                if( target.attr('name') == 'fwd-delete' ) {
-                    var tbody = target.closest('tbody');
-                    var num_selected = tbody.find("[name=fwd-delete]:checked").length;
-                    if(num_selected > 0) {
-                        tbody.find('.link-del').addClass('visible');
-                    } else {
-                        tbody.find('.link-del').removeClass('visible');
-                    }
-                }
-                /* Delete selected */
-                else if( target.hasClass('js-del-selected') ) {
-                    var list_name = target.attr('data-delete-list-name');
-                    var checked = $('[data-list-name="'+list_name+'"] [name="fwd-delete"]:checked');
-                    var delete_these = _.map(checked, function(el) {
-                        return $(el).val();
-                    });
-                    var deferreds = [];
-                    $.each(delete_these, function(i, el) {
-                        var data = {
-                            type: 'DELETE',
-                            headers: {'X-CSRFToken': csrf_token},
-                            url: api_urls.fwd_delete + el + '/',
-                            dataType: 'json'
-                        };
-                        deferreds.push($.ajax(data));
-                    });
-                    $.when.apply($, deferreds).then(function(){
-                        // Success
-                        checked.closest('tr').remove();
-                        // TODO remove list if no more rows
-                    }).fail(function(err){
-                        $('[data-list-name="'+list_name+'"] .result-alert').html(renderAlert('Kunne ikke fjerne epostaliaser', 'danger'));
-                    });
-                }
-                else if( target.hasClass('js-toggle-email-textarea')) {
-                    e.preventDefault();
-                    var row = target.closest('tbody').find('.textarea-row');
-                    row.toggleClass('visible');
-                }
-                /* Add new */
-                else if( target.hasClass('js-new-email') ) {
-                    e.preventDefault();
-                    // TODO refactor logic from new list and add here
+            /* Mark row red for deletion and show delete button if applicable */
+            $(".forwards-container").on('click', '[name=fwd-delete]', function(e) {
+                $(this).parent().parent().parent().toggleClass('danger');
+                var tbody = $(this).closest('tbody');
+                var num_selected = tbody.find("[name=fwd-delete]:checked").length;
+                if(num_selected > 0) {
+                    tbody.find('.link-del').addClass('visible');
                 } else {
-                    //console.log(target);
+                    tbody.find('.link-del').removeClass('visible');
                 }
             });
+            /* Delete selected */
+            $(".forwards-container").on('click', '.js-del-selected', function(e) {
+                $(this).attr('data-delete-list-name');
+                var checked = $('[data-list-name="'+list_name+'"] [name="fwd-delete"]:checked');
+                var delete_these = _.map(checked, function(el) {
+                    return $(el).val();
+                });
+                var deferreds = [];
+                $.each(delete_these, function(i, el) {
+                    var data = {
+                        type: 'DELETE',
+                        headers: {'X-CSRFToken': csrf_token},
+                        url: api_urls.fwd_delete + el + '/',
+                        dataType: 'json'
+                    };
+                    deferreds.push($.ajax(data));
+                });
+                $.when.apply($, deferreds).then(function(){
+                    // Success
+                    checked.closest('tr').remove();
+                    // TODO remove list if no more rows
+                }).fail(function(err){
+                    $('[data-list-name="'+list_name+'"] .result-alert').html(renderAlert('Kunne ikke fjerne epostaliaser', 'danger'));
+                });
+            });
+            /* Toggles emails textarea */
+            $(".forwards-container").on('click', '.js-toggle-email-textarea', function(e) {
+                e.preventDefault();
+                var row = $(this).closest('tbody').find('.textarea-row');
+                row.toggleClass('visible');
+            });
+            /* Add emails to current list */
+            $(".forwards-container").on('click', '.js-new-email', function(e) {
+                e.preventDefault();
+                // TODO refactor logic from new list and add here
+            });
             /* New list toggle display */
             $('.new-list-btn').on('click', function() {
                 $('.new-list').toggleClass('visible');

mailadmin/static/dist/scripts/templates.js

@@ -258,3 +258,44 @@ root: root
 };
 })();
 })();
+
+(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["orgunits_select.html"] = (function() {function root(env, context, frame, runtime, cb) {
+var lineno = null;
+var colno = null;
+var output = "";
+try {
+output += "<select class=\"orgunits-select form-control\">\n    <option value=\".+\">Alle</option>\n\t";
+frame = frame.push();
+var t_3 = runtime.contextOrFrameLookup(context, frame, "orgunits");
+if(t_3) {var t_2 = t_3.length;
+for(var t_1=0; t_1 < t_3.length; t_1++) {
+var t_4 = t_3[t_1];
+frame.set("ou", t_4);
+frame.set("loop.index", t_1 + 1);
+frame.set("loop.index0", t_1);
+frame.set("loop.revindex", t_2 - t_1);
+frame.set("loop.revindex0", t_2 - t_1 - 1);
+frame.set("loop.first", t_1 === 0);
+frame.set("loop.last", t_1 === t_2 - 1);
+frame.set("loop.length", t_2);
+output += "\n\t<option value=\"";
+output += runtime.suppressValue(runtime.memberLookup((t_4),"prefix", env.autoesc), env.autoesc);
+output += "\">";
+output += runtime.suppressValue(runtime.memberLookup((t_4),"name", env.autoesc), env.autoesc);
+output += "</option>\n\t";
+;
+}
+}
+frame = frame.pop();
+output += "\n</select>";
+cb(null, output);
+;
+} catch (e) {
+  cb(runtime.handleError(e, lineno, colno));
+}
+}
+return {
+root: root
+};
+})();
+})();

mailadmin/static/dist/styles/main.css

@@ -6515,6 +6515,32 @@ button.close {
     display: none !important;
   }
 }
+.spin {
+  -webkit-animation: spin .8s infinite linear;
+  animation: spin .8s infinite linear;
+}
+
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 .login-form {
   margin: 0 auto;
   max-width: 300px;
@@ -6538,6 +6564,16 @@ button.close {
   margin-bottom: 40px;
 }
 
+.orgunit-select-container {
+  display: block;
+  margin-bottom: 20px;
+}
+@media (min-width: 768px) {
+  .orgunit-select-container {
+    display: none;
+  }
+}
+
 /* Sidebar navigation */
 .nav-sidebar > .active > a,
 .nav-sidebar > .active > a:hover,

mailadmin/templates/home.html

@@ -9,11 +9,12 @@
             </ul>
         </div>
         <div class="col-sm-8">
+            <div class="orgunit-select-container"></div>
             <div class="new-list-container">
                 <button type="button" class="btn btn-default new-list-btn"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Opprett ny liste</button>
                 <div class="new-list"></div><div class="new-list-result"></div>
             </div>
-            <div class="forwards-container"></div>
+            <div class="forwards-container"><span class="glyphicon glyphicon-refresh spin" aria-hidden="true"></span> Laster...</div>
         </div>
     </div>
 </div>