refactor site dialogs and add site editing

9 files changed, 266 insertions, 153 deletions

diff --git a/data/assets/js/admin/dialogs/site-add.js b/data/assets/js/admin/dialogs/site-add.js
index bf95b8e..2d96c9f 100644
--- a/data/assets/js/admin/dialogs/site-add.js
+++ b/data/assets/js/admin/dialogs/site-add.js
@@ -1,85 +1,20 @@
 jQuery(function($) {
   "use strict";
 
-  var p = '#site-add-';
-
-  var FIELDS = {
-    text: ['name', 'slug', 'body', 'lang', 'theme_id'],
-    list: ['domains', 'styles', 'scripts'],
-  }
-
-  var DEFAULTS = {
-    lang:     DATA.default_lang,
-    theme_id: DATA.default_theme_id,
-  };
-
-  $(p + 'dialog').on('show.bs.modal', function() {
-    $.each(FIELDS.text, function(_, id) {
-      $(p + id).val(DEFAULTS[id] || '');
+  // cache fields
+  var FIELDS = DATA.site_dialogs.fields;
+
+  $('#site-add-dialog').on('show.bs.modal', function() {
+    $(this).trigger({
+      type: 'guff.loaded',
+
+      site_data: FIELDS.text.reduce(function(r, id) {
+        r[id] = FIELDS.defaults[id] || '';
+        return r;
+      }, FIELDS.list.reduce(function(r, id) {
+        r[id] = [];
+        return r;
+      }, {})),
     });
-
-    // clear list textareas
-    $.each(FIELDS.list, function(_, id) {
-      $(p + id).val('');
-    });
-  });
-
-  $(p + 'dialog').on('shown.bs.modal', function() {
-    // show content tab
-    $(p + 'tab-content').click();
-
-    // focus name field
-    $(p + 'name').focus();
-  });
-
-  $(p + 'dialog input[type="text"]').keydown(function(ev) {
-    if (ev.which == 13) {
-      setTimeout(function() {
-        $(p + 'confirm').click();
-      }, 10);
-
-      // stop event
-      return false;
-    }
-  });
-
-  $(p + 'name').keydown(function(ev) {
-    var me = $(this);
-
-    setTimeout(function() {
-      $(p + 'slug').val(slugify(me.val()));
-    }, 10);
-  });
-
-  $(p + 'confirm').click(function() {
-    var me = $(this);
-
-    if (me.hasClass('disabled'))
-      return false;
-
-    // toggle loading
-    me.toggleClass('disabled').find('.loading').toggleClass('hidden');
-
-    send('site/add', FIELDS.text.reduce(function(r, id) {
-      r[id] = $(p + id).val();
-      return r;
-    }, FIELDS.list.reduce(function(r, id) {
-      r[id] = listify(p + id);
-      return r;
-    }, {
-      // hard-code this for now
-      is_full_feed: 't',
-    }))).always(function() {
-      // toggle loading
-      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
-    }).fail(function(r) {
-      gripe(r, 'add site');
-    }).done(function(r) {
-      $('#sites-reload').click();
-      $(p + 'dialog').modal('hide');
-    });
-
-    // stop event
-    return false;
   });
 });
diff --git a/data/assets/js/admin/dialogs/site-edit.js b/data/assets/js/admin/dialogs/site-edit.js
new file mode 100644
index 0000000..5a35073
--- /dev/null
+++ b/data/assets/js/admin/dialogs/site-edit.js
@@ -0,0 +1,18 @@
+jQuery(function($) {
+  "use strict";
+
+  $('#site-edit-dialog').on('show.bs.modal', function() {
+    var me = $(this);
+
+    send('site/get', {
+      site_id: me.data('site_id'),
+    }).fail(function(r) {
+      gripe(r, 'get site');
+    }).done(function(r) {
+      me.trigger({
+        type: 'guff.loaded',
+        site_data: r,
+      });
+    });
+  });
+});
diff --git a/data/assets/js/admin/dialogs/site.js b/data/assets/js/admin/dialogs/site.js
new file mode 100644
index 0000000..e35d389
--- /dev/null
+++ b/data/assets/js/admin/dialogs/site.js
@@ -0,0 +1,94 @@
+jQuery(function($) {
+  "use strict";
+
+  // cache dialogs
+  var DIALOGS = DATA.site_dialogs;
+
+  $.each(DIALOGS.paths, function(dialog_id, save_path) {
+    var p = '#site-' + dialog_id + '-';
+
+    $(p + 'dialog').on('show.bs.modal', function() {
+      var me = $(this);
+
+      // show spinner
+      me.find('.modal-body').addClass('hidden');
+      me.find('.modal-body.loading').removeClass('hidden');
+    }).on('guff.loaded', function(ev) {
+      // populate text fields
+      $.each(DIALOGS.fields.text, function(_, id) {
+        $(p + id).val(ev.site_data[id]);
+      });
+
+      // populate textareas
+      $.each(DIALOGS.fields.list, function(_, id) {
+        $(p + id).val(ev.site_data[id].join("\n"));
+      });
+
+      // hide spinner, show body
+      $(this).find('.modal-body').toggleClass('hidden');
+    }).on('shown.bs.modal', function() {
+      // show content tab
+      $(p + 'tab-content').click();
+
+      // focus name field
+      $(p + 'name').focus();
+    });
+
+    $(p + 'dialog input[type="text"]').keydown(function(ev) {
+      if (ev.which == 13) {
+        setTimeout(function() {
+          $(p + 'confirm').click();
+        }, 10);
+
+        // stop event
+        return false;
+      }
+    });
+
+    $(p + 'name').keydown(function(ev) {
+      var me = $(this);
+
+      setTimeout(function() {
+        $(p + 'slug').val(slugify(me.val()));
+      }, 10);
+    });
+
+    $(p + 'confirm').click(function() {
+      var me = $(this);
+
+      if (me.hasClass('disabled'))
+        return false;
+
+      // toggle loading
+      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
+
+      // build args
+      var args = DIALOGS.fields.text.reduce(function(r, id) {
+        r[id] = $(p + id).val();
+        return r;
+      }, DIALOGS.fields.list.reduce(function(r, id) {
+        r[id] = listify(p + id);
+        return r;
+      }, {
+        site_id: $(p + 'dialog').data('site_id'),
+
+        // hard-code this for now
+        is_full_feed: 't',
+      }));
+
+      // send request
+      send(save_path, args).always(function() {
+        // toggle loading
+        me.toggleClass('disabled').find('.loading').toggleClass('hidden');
+      }).fail(function(r) {
+        gripe(r, dialog_id + ' site');
+      }).done(function(r) {
+        $('#sites-reload').click();
+        $(p + 'dialog').modal('hide');
+      });
+
+      // stop event
+      return false;
+    });
+  });
+});
diff --git a/data/assets/js/admin/tabs/sites.js b/data/assets/js/admin/tabs/sites.js
index 8644705..1ed7b48 100644
--- a/data/assets/js/admin/tabs/sites.js
+++ b/data/assets/js/admin/tabs/sites.js
@@ -81,11 +81,12 @@ jQuery(function($) {
       }));
     }).done(function(r) {
       list.html($.map(r, function(row) {
-        var active = (row.is_active == '1');
+        var is_default = !!+row.is_default;
 
         return TEMPLATES.run('site', $.extend({}, row, {
           q:   [row.site_id, row.slug, row.name, row.body].join('  ').toLowerCase(),
-          badge_css: +row.is_default ? '' : 'hidden',
+          badge_css: is_default ? '' : 'hidden',
+          css: is_default ? 'list-group-item-warning' : '',
         }));
       }).join(''));
 
@@ -108,9 +109,8 @@ jQuery(function($) {
     $('#sites .active').removeClass('active');
     $(this).addClass('active');
 
-    // TODO
-    // $('#site-edit-dialog').data('site_id', site_id).modal('show');
-    alert('TODO: edit site ' + site_id);
+    // show dialog
+    $('#site-edit-dialog').data('site_id', site_id).modal('show');
 
     // stop event
     return false;
diff --git a/src/guff/views/dialogs/admin/site-add.cr b/src/guff/views/dialogs/admin/site-add.cr
index c124457..50e051d 100644
--- a/src/guff/views/dialogs/admin/site-add.cr
+++ b/src/guff/views/dialogs/admin/site-add.cr
@@ -1,29 +1,14 @@
 require "./site"
 
 class Guff::Views::Dialogs::Admin::SiteAdd < Guff::Views::Dialogs::Admin::Site
-  TABS = [{
-    :id   => "content",
-    :css  => "active",
-    :icon => "fa-pencil",
-    :name => "Content",
-    :text => "View content tab.",
-  }, {
-    :id   => "theme",
-    :css  => "",
-    :icon => "fa-eye",
-    :name => "Theme",
-    :text => "View theme tab.",
-  }, {
-    :id   => "other",
-    :css  => "",
-    :icon => "fa-ellipsis-h",
-    :name => "Other",
-    :text => "View other tab.",
-  }]
-
-  private def tabs
-    super("site-add", TABS)
+  def initialize(context : Context)
+    super(
+      context:    context,
+      id:         "site-add",
+      name:       "New Site",
+      save_icon:  "fa-plus-circle",
+      save_text:  "Create site.",
+      save_name:  "Create Site",
+    )
   end
-
-  ECR.def_to_s("src/views/dialogs/admin/site-add.ecr")
 end
diff --git a/src/guff/views/dialogs/admin/site-edit.cr b/src/guff/views/dialogs/admin/site-edit.cr
new file mode 100644
index 0000000..89dae69
--- /dev/null
+++ b/src/guff/views/dialogs/admin/site-edit.cr
@@ -0,0 +1,14 @@
+require "./site"
+
+class Guff::Views::Dialogs::Admin::SiteEdit < Guff::Views::Dialogs::Admin::Site
+  def initialize(context : Context)
+    super(
+      context:    context,
+      id:         "site-edit",
+      name:       "Edit Site",
+      save_icon:  "fa-save",
+      save_text:  "Save changes.",
+      save_name:  "Save Changes",
+    )
+  end
+end
diff --git a/src/guff/views/dialogs/admin/site.cr b/src/guff/views/dialogs/admin/site.cr
index c03cd0a..b916fd7 100644
--- a/src/guff/views/dialogs/admin/site.cr
+++ b/src/guff/views/dialogs/admin/site.cr
@@ -1,9 +1,44 @@
 class Guff::Views::Dialogs::Admin::Site < Guff::Views::HTMLView
+  TABS = [{
+    :id   => "content",
+    :css  => "active",
+    :icon => "fa-pencil",
+    :name => "Content",
+    :text => "View content tab.",
+  }, {
+    :id   => "theme",
+    :css  => "",
+    :icon => "fa-eye",
+    :name => "Theme",
+    :text => "View theme tab.",
+  }, {
+    :id   => "other",
+    :css  => "",
+    :icon => "fa-ellipsis-h",
+    :name => "Other",
+    :text => "View other tab.",
+  }]
+
   OPTION_TEMPLATES = {
     y: "<option value='%s' data-slug='%s' selected='selected'>%s</option>",
     n:  "<option value='%s' data-slug='%s'>%s</option>",
   }
 
+  def initialize(
+    context     : Context,
+    @id         : String,
+    @name       : String,
+    @save_name  : String,
+    @save_icon  : String,
+    @save_text  : String,
+  )
+    super(context)
+  end
+
+  protected def tabs
+    super(@id, TABS)
+  end
+
   private def theme_options
     @context.models.theme.all.map { |row|
       {
@@ -18,4 +53,6 @@ class Guff::Views::Dialogs::Admin::Site < Guff::Views::HTMLView
       OPTION_TEMPLATES[tmpl_id] % %i{id slug name}.map { |k| row[k] }
     }.join("")
   end
+
+  ECR.def_to_s("src/views/dialogs/admin/site.ecr")
 end
diff --git a/src/guff/views/pages/admin.cr b/src/guff/views/pages/admin.cr
index 1c5f795..5ed95db 100644
--- a/src/guff/views/pages/admin.cr
+++ b/src/guff/views/pages/admin.cr
@@ -28,7 +28,9 @@ class Guff::Views::Pages::Admin < Guff::Views::HTMLView
     assets/js/admin/tabs/themes.js
     assets/js/admin/dialogs/user-add.js
     assets/js/admin/dialogs/user-edit.js
+    assets/js/admin/dialogs/site.js
     assets/js/admin/dialogs/site-add.js
+    assets/js/admin/dialogs/site-edit.js
     assets/js/admin/dialogs/post-edit.js
     assets/js/admin/dialogs/blog-edit.js
     assets/js/admin/dialogs/page-edit.js
@@ -97,6 +99,7 @@ class Guff::Views::Pages::Admin < Guff::Views::HTMLView
       io << Dialogs::Admin::UserAdd.new(@context)
       io << Dialogs::Admin::UserEdit.new(@context)
       io << Dialogs::Admin::SiteAdd.new(@context)
+      io << Dialogs::Admin::SiteEdit.new(@context)
       io << Dialogs::Admin::BlogEdit.new(@context)
       io << Dialogs::Admin::PageEdit.new(@context)
       io << Dialogs::Admin::ProjectEdit.new(@context)
@@ -104,12 +107,34 @@ class Guff::Views::Pages::Admin < Guff::Views::HTMLView
   end
 
   private def page_data
+    default_lang = "en-US"
+    default_theme_id = @context.models.theme.get_default_id
+
     {
       post_types:       POST_TYPES,
       sites:            @context.models.site.get_sites,
+
+      # TODO: refactor to defaults
       default_site_id:  @context.models.site.get_default_id,
-      default_lang:     "en-US",
-      default_theme_id: @context.models.theme.get_default_id,
+      default_lang:     default_lang,
+      default_theme_id: default_theme_id,
+
+      site_dialogs: {
+        paths: {
+          add:  "site/add",
+          edit: "site/set",
+        },
+
+        fields: {
+          text: %w{name slug body lang theme_id},
+          list: %w{domains styles scripts},
+
+          defaults: {
+            lang:     default_lang,
+            theme_id: default_theme_id,
+          },
+        },
+      },
     }.to_json
   end
 
diff --git a/src/views/dialogs/admin/site-add.ecr b/src/views/dialogs/admin/site.ecr
index 0f99364..fa5d7d7 100644
--- a/src/views/dialogs/admin/site-add.ecr
+++ b/src/views/dialogs/admin/site.ecr
@@ -1,4 +1,4 @@
-<div id='site-add-dialog' class='modal fade' role='dialog'>
+<div id='<%= @id %>-dialog' class='modal fade' role='dialog'>
   <div class='modal-dialog modal-lg' role='document'>
     <div class='modal-content'>
       <div class='modal-header'>
@@ -15,11 +15,16 @@
 
         <h4 class='modal-title'>
           <i class='fa fa-plus-circle'></i>
-          New Site
+          <%= h(@name) %>
         </h4><!-- modal-title -->
       </div><!-- modal-header -->
 
-      <div class='modal-body'>
+      <div class='modal-body loading'>
+        <i class='fa fa-spinner fa-spin'></i>
+        Loading...
+      </div><!-- modal-body -->
+
+      <div class='modal-body loading-done'>
         <div class='row'>
           <div class='col-md-3'>
             <ul class='nav nav-pills nav-stacked' role='tablist'><%=
@@ -30,27 +35,27 @@
           <div class='col-md-9'>
             <div class='tab-content'>
               <div
-                id='site-add-pane-content'
+                id='<%= @id %>-pane-content'
                 class='tab-pane active'
                 role='tabpanel'
               >
                 <div class='row'>
                   <div class='col-md-6'>
                     <div class='form-group'>
-                      <label for='site-add-name'>
+                      <label for='<%= @id %>-name'>
                         Name
                       </label>
 
                       <input
                         type='text'
-                        id='site-add-name'
+                        id='<%= @id %>-name'
                         class='form-control'
                         title='Enter site name.'
                         placeholder='Some Site'
-                        aria-describedby='site-add-name-help'
+                        aria-describedby='<%= @id %>-name-help'
                       />
 
-                      <p id='site-add-name-help' class='help-block'>
+                      <p id='<%= @id %>-name-help' class='help-block'>
                         Site name.
                       </p>
                     </div><!-- form-group -->
@@ -58,21 +63,21 @@
 
                   <div class='col-md-6'>
                     <div class='form-group'>
-                      <label for='site-add-slug'>
+                      <label for='<%= @id %>-slug'>
                         Slug
                       </label>
 
                       <input
                         type='text'
-                        id='site-add-slug'
+                        id='<%= @id %>-slug'
                         class='form-control'
                         title='Enter site slug (lowercase).'
                         readonly='readonly'
                         placeholder='some-site'
-                        aria-describedby='site-add-slug-help'
+                        aria-describedby='<%= @id %>-slug-help'
                       />
 
-                      <p id='site-add-slug-help' class='help-block'>
+                      <p id='<%= @id %>-slug-help' class='help-block'>
                         Name of files directory on server.
                       </p>
                     </div><!-- form-group -->
@@ -80,71 +85,71 @@
                 </div><!-- row -->
 
                 <div class='form-group'>
-                  <label for='site-add-body'>
+                  <label for='<%= @id %>-body'>
                     Description
                   </label>
 
                   <textarea
-                    id='site-add-body'
+                    id='<%= @id %>-body'
                     class='form-control'
                     title='Enter site description.'
                     placeholder='A brief site description'
-                    aria-describedby='site-add-body-help'
+                    aria-describedby='<%= @id %>-body-help'
                   /></textarea>
 
-                  <p id='site-add-body-help' class='help-block'>
+                  <p id='<%= @id %>-body-help' class='help-block'>
                     Brief description of site.
                   </p>
                 </div><!-- form-group -->
 
                 <div class='form-group'>
-                  <label for='site-add-domains'>
+                  <label for='<%= @id %>-domains'>
                     Domains
                   </label>
 
                   <textarea
-                    id='site-add-domains'
+                    id='<%= @id %>-domains'
                     class='form-control'
                     title='Newline-delimited list of site domains.'
                     placeholder='some.example.com'
-                    aria-describedby='site-add-domains-help'
+                    aria-describedby='<%= @id %>-domains-help'
                   /></textarea>
 
-                  <p id='site-add-domains-help' class='help-block'>
+                  <p id='<%= @id %>-domains-help' class='help-block'>
                     Newline-deilmited list of site domains.
                   </p>
                 </div><!-- form-group -->
               </div><!-- tab-pane -->
 
               <div
-                id='site-add-pane-domains'
+                id='<%= @id %>-pane-domains'
                 class='tab-pane'
                 role='tabpanel'
               >
               </div><!-- tab-pane -->
 
               <div
-                id='site-add-pane-theme'
+                id='<%= @id %>-pane-theme'
                 class='tab-pane'
                 role='tabpanel'
               >
                 <div class='row'>
                   <div class='col-md-12'>
                     <div class='form-group'>
-                      <label for='site-add-theme_id'>
+                      <label for='<%= @id %>-theme_id'>
                         Theme
                       </label>
 
                       <select
-                        id='site-add-theme_id'
+                        id='<%= @id %>-theme_id'
                         class='form-control'
                         title='Choose site theme.'
-                        aria-describedby='site-add-theme-help'
+                        aria-describedby='<%= @id %>-theme-help'
                       ><%=
                         theme_options
                       %></select>
 
-                      <p id='site-add-theme-help' class='help-block'>
+                      <p id='<%= @id %>-theme-help' class='help-block'>
                         Site theme.
                       </p>
                     </div><!-- form-group -->
@@ -154,18 +159,18 @@
                 <div class='row'>
                   <div class='col-md-6'>
                     <div class='form-group'>
-                      <label for='site-add-styles'>
+                      <label for='<%= @id %>-styles'>
                         Styles
                       </label>
 
                       <textarea
-                        id='site-add-styles'
+                        id='<%= @id %>-styles'
                         class='form-control asset-list'
                         title='Newline-delimited site styles.'
-                        aria-describedby='site-add-styles-help'
+                        aria-describedby='<%= @id %>-styles-help'
                       ></textarea>
 
-                      <p id='site-add-styles-help' class='help-block'>
+                      <p id='<%= @id %>-styles-help' class='help-block'>
                         Newline-delimited site styles.
                       </p>
                     </div><!-- form-group -->
@@ -173,18 +178,18 @@
 
                   <div class='col-md-6'>
                     <div class='form-group'>
-                      <label for='site-add-scripts'>
+                      <label for='<%= @id %>-scripts'>
                         Scripts
                       </label>
 
                       <textarea
-                        id='site-add-scripts'
+                        id='<%= @id %>-scripts'
                         class='form-control asset-list'
                         title='Newline-delimited site scripts.'
-                        aria-describedby='site-add-scripts-help'
+                        aria-describedby='<%= @id %>-scripts-help'
                       ></textarea>
 
-                      <p id='site-add-scripts-help' class='help-block'>
+                      <p id='<%= @id %>-scripts-help' class='help-block'>
                         Newline-delimited site scripts.
                       </p>
                     </div><!-- form-group -->
@@ -193,26 +198,26 @@
               </div><!-- tab-pane -->
 
               <div
-                id='site-add-pane-other'
+                id='<%= @id %>-pane-other'
                 class='tab-pane'
                 role='tabpanel'
               >
                 <div class='row'>
                   <div class='col-md-12'>
                     <div class='form-group'>
-                      <label for='site-add-lang'>
+                      <label for='<%= @id %>-lang'>
                         Language
                       </label>
 
                       <input
                         type='text'
-                        id='site-add-lang'
+                        id='<%= @id %>-lang'
                         class='form-control'
                         title='Enter site IETF language tag (BCP 47).'
-                        aria-describedby='site-add-lang-help'
+                        aria-describedby='<%= @id %>-lang-help'
                       />
 
-                      <p id='site-add-lang-help' class='help-block'>
+                      <p id='<%= @id %>-lang-help' class='help-block'>
                         <a
                           href='https://en.wikipedia.org/wiki/IETF_language_tag'
                           title='View IETF language tag information.'
@@ -231,9 +236,9 @@
 
       <div class='modal-footer'>
         <button
-          id='site-add-confirm'
+          id='<%= @id %>-confirm'
           class='btn btn-primary'
-          title='Create site.'
+          title='<%= h(@save_text) %>'
         >
           <span class='hidden loading'>
             <i class='fa fa-spinner fa-spin'></i>
@@ -241,8 +246,8 @@
           </span>
 
           <span class='loading'>
-            <i class='fa fa-plus-circle'></i>
-            Create Site
+            <i class='fa <%= h(@save_icon) %>'></i>
+            <%= h(@save_name) %>
           </span>
         </button>