refactor admin dialogs

7 files changed, 370 insertions, 351 deletions

diff --git a/src/guff/views/admin-page.cr b/src/guff/views/admin-page.cr
index b9dc6f2..c51ee1b 100644
--- a/src/guff/views/admin-page.cr
+++ b/src/guff/views/admin-page.cr
@@ -1,4 +1,5 @@
 require "./html"
+require "./admin/dialogs/*"
 
 class Guff::Views::AdminPageView < Guff::Views::HTMLView
   TITLE = "Guff Admin"
@@ -149,14 +150,6 @@ class Guff::Views::AdminPageView < Guff::Views::HTMLView
     TEMPLATES[:new_post_button]
   end
 
-  private def role_options
-    @role_options ||= String.build do |io|
-      @context.models.role.get_roles.each do |row|
-        io << TEMPLATES[:option] % %w{role name}.map { |key| h(row[key]) }
-      end
-    end
-  end
-
   private def state_buttons
     @state_buttons ||= String.build do |io|
       @context.models.state.get_states.each do |row|
@@ -222,5 +215,12 @@ class Guff::Views::AdminPageView < Guff::Views::HTMLView
     { post_types: POST_TYPES}.to_json
   end
 
+  private def dialogs
+    String.build do |io|
+      io << Admin::Dialogs::UserAddDialog.new(@context)
+      io << Admin::Dialogs::UserEditDialog.new(@context)
+    end
+  end
+
   ECR.def_to_s("src/views/admin-page.ecr")
 end
diff --git a/src/guff/views/admin/dialogs/user-add.cr b/src/guff/views/admin/dialogs/user-add.cr
new file mode 100644
index 0000000..e347225
--- /dev/null
+++ b/src/guff/views/admin/dialogs/user-add.cr
@@ -0,0 +1,5 @@
+require "./user"
+
+class Guff::Views::Admin::Dialogs::UserAddDialog < Guff::Views::Admin::Dialogs::UserDialog
+  ECR.def_to_s("src/views/admin/dialogs/user-add.ecr")
+end
diff --git a/src/guff/views/admin/dialogs/user-edit.cr b/src/guff/views/admin/dialogs/user-edit.cr
new file mode 100644
index 0000000..e14211a
--- /dev/null
+++ b/src/guff/views/admin/dialogs/user-edit.cr
@@ -0,0 +1,3 @@
+class Guff::Views::Admin::Dialogs::UserEditDialog < Guff::Views::Admin::Dialogs::UserDialog
+  ECR.def_to_s("src/views/admin/dialogs/user-edit.ecr")
+end
diff --git a/src/guff/views/admin/dialogs/user.cr b/src/guff/views/admin/dialogs/user.cr
new file mode 100644
index 0000000..4bae8da
--- /dev/null
+++ b/src/guff/views/admin/dialogs/user.cr
@@ -0,0 +1,11 @@
+class Guff::Views::Admin::Dialogs::UserDialog < Guff::Views::HTMLView
+  protected def role_options
+    tmpl = Guff::Views::AdminPageView::TEMPLATES[:option]
+
+    @role_options ||= String.build do |io|
+      @context.models.role.get_roles.each do |row|
+        io << tmpl % %w{role name}.map { |key| h(row[key]) }
+      end
+    end
+  end
+end
diff --git a/src/views/admin-page.ecr b/src/views/admin-page.ecr
index 00f2796..c06b5f0 100644
--- a/src/views/admin-page.ecr
+++ b/src/views/admin-page.ecr
@@ -557,349 +557,7 @@
       </div><!-- col-md-12 -->
     </div><!-- container -->
 
-    <div id='user-add-dialog' class='modal fade' role='dialog'>
-      <div class='modal-dialog' role='document'>
-        <div class='modal-content'>
-          <div class='modal-header'>
-            <button
-              type='button'
-              class='close'
-              data-dismiss='modal'
-              aria-label='Close'
-            >
-              <span aria-hidden='true'>
-                &times;
-              </span>
-            </button><!-- close -->
-
-            <h4 class='modal-title'>
-              <i class='fa fa-user-plus'></i>
-              Add User
-            </h4><!-- modal-title -->
-          </div><!-- modal-header -->
-
-          <div class='modal-body'>
-            <div class='form-group'>
-              <label for='user-add-name'>
-                Name
-              </label>
-
-              <input
-                type='text'
-                id='user-add-name'
-                class='form-control'
-                title='Enter name of user.'
-                placeholder='John Doe'
-                aria-describedby='user-add-name-help'
-              />
-
-              <p id='user-add-name-help' class='help-block'>
-                Visible name of user.
-              </p>
-            </div><!-- form-group -->
-
-            <div class='form-group'>
-              <label for='user-add-email'>
-                Email Address
-              </label>
-
-              <input
-                type='text'
-                id='user-add-email'
-                class='form-control'
-                title='Enter user email.'
-                placeholder='johndoe@example.com'
-                aria-describedby='user-add-email-help'
-              />
-
-              <p id='user-add-email-help' class='help-block'>
-                Email address (and login) of user.
-              </p>
-            </div><!-- form-group -->
-
-            <div class='form-group'>
-              <label for='user-add-password'>
-                Password
-              </label>
-
-              <input
-                type='password'
-                id='user-add-password'
-                class='form-control'
-                title='Enter password.'
-                aria-describedby='user-add-password-help'
-              />
-
-              <p id='user-add-password-help' class='help-block'>
-                User password.
-              </p>
-            </div><!-- form-group -->
-
-            <div class='row'>
-              <div class='col-md-6'>
-                <div class='form-group'>
-                  <label for='user-add-role'>
-                    Role
-                  </label>
-
-                  <select
-                    id='user-add-role'
-                    class='form-control'
-                    title='Choose role of user.'
-                    aria-describedby='user-add-role-help'
-                  ><%=
-                    role_options
-                  %></select>
-
-                  <p id='user-add-role-help' class='help-block'>
-                    User role.
-                  </p>
-                </div><!-- form-group -->
-              </div><!-- col-md-6 -->
-
-              <div class='col-md-6'>
-                <div class='form-group'>
-                  <label for='user-add-active'>
-                    Active
-                  </label>
-
-                  <select
-                    id='user-add-active'
-                    class='form-control'
-                    title='Choose active state of user.'
-                    aria-describedby='user-add-active-help'
-                  >
-                    <option
-                      value='inactive'
-                      selected='selected'
-                      title='Inactive: user cannot log in.'
-                    >
-                      Inactive
-                    </option>
-
-                    <option
-                      value='active'
-                      title='Active: user can log in.'
-                    >
-                      Active
-                    </option>
-                  </select>
-
-                  <p id='user-add-active-help' class='help-block'>
-                    Is this user active?
-                  </p>
-                </div><!-- form-group -->
-              </div><!-- col-md-6 -->
-            </div><!-- row -->
-          </div><!-- modal-body -->
-
-          <div class='modal-footer'>
-            <button
-              id='user-add-confirm'
-              class='btn btn-primary'
-              title='Create user.'
-            >
-              <span class='hidden loading'>
-                <i class='fa fa-spinner fa-spin'></i>
-                Please Wait...
-              </span>
-
-              <span class='loading'>
-                <i class='fa fa-user-plus'></i>
-                Create User
-              </span>
-            </button>
-
-            <button
-              class='btn btn-default'
-              data-dismiss='modal'
-              title='Close dialog.'
-            >
-              &times; Close
-            </button>
-          </div><!-- modal-footer -->
-        </div><!-- modal-content -->
-      </div><!-- modal-dialog -->
-    </div><!-- modal -->
-
-    <div id='user-edit-dialog' class='modal fade' role='dialog'>
-      <div class='modal-dialog' role='document'>
-        <div class='modal-content'>
-          <div class='modal-header'>
-            <button
-              type='button'
-              class='close'
-              data-dismiss='modal'
-              aria-label='Close'
-            >
-              <span aria-hidden='true'>
-                &times;
-              </span>
-            </button><!-- close -->
-
-            <h4 class='modal-title'>
-              <i class='fa fa-user'></i>
-              Edit User
-            </h4><!-- modal-title -->
-          </div><!-- modal-header -->
-
-          <div class='modal-body loading-text'>
-            <p>
-              <i class='fa fa-spinner fa-spin'></i>
-              Loading...
-            </p>
-          </div><!-- modal-body -->
-
-          <div class='modal-body loading-error'>
-            <div class='well'>
-              <i class='fa fa-exclamation-triangle'></i>
-              Error: <span class='error-text'></span>
-            </div><!-- well -->
-          </div><!-- modal-body -->
-
-          <div class='modal-body loading-done'>
-            <div class='form-group'>
-              <label for='user-edit-name'>
-                Name
-              </label>
-
-              <input
-                type='text'
-                id='user-edit-name'
-                class='form-control'
-                title='Enter name of user.'
-                placeholder='John Doe'
-                aria-describedby='user-edit-name-help'
-              />
-
-              <p id='user-edit-name-help' class='help-block'>
-                Name of this user.
-              </p>
-            </div><!-- form-group -->
-
-            <div class='form-group'>
-              <label for='user-edit-email'>
-                Email Address
-              </label>
-
-              <input
-                type='text'
-                id='user-edit-email'
-                class='form-control'
-                title='Enter user email.'
-                placeholder='johndoe@example.com'
-                aria-describedby='user-edit-email-help'
-              />
-
-              <p id='user-edit-email-help' class='help-block'>
-                Email address for this user.
-              </p>
-            </div><!-- form-group -->
-
-            <div class='form-group'>
-              <label for='user-edit-password'>
-                Password
-              </label>
-
-              <input
-                type='password'
-                id='user-edit-password'
-                class='form-control'
-                title='Enter user password.'
-                aria-describedby='user-edit-password-help'
-              />
-
-              <p id='user-edit-password-help' class='help-block'>
-                Password for this user.
-              </p>
-            </div><!-- form-group -->
-
-            <div class='row'>
-              <div class='col-md-6'>
-                <div class='form-group'>
-                  <label for='user-edit-role'>
-                    Role
-                  </label>
-
-                  <select
-                    id='user-edit-role'
-                    class='form-control'
-                    title='Choose role of user.'
-                    aria-describedby='user-edit-role-help'
-                  ><%=
-                    role_options
-                  %></select>
-
-                  <p id='user-edit-role-help' class='help-block'>
-                    User role.
-                  </p>
-                </div><!-- form-group -->
-              </div><!-- col-md-6 -->
-
-              <div class='col-md-6'>
-                <div class='form-group'>
-                  <label for='user-edit-active'>
-                    Active
-                  </label>
-
-                  <select
-                    id='user-edit-active'
-                    class='form-control'
-                    title='Choose active state of user.'
-                    aria-describedby='user-edit-active-help'
-                  >
-                    <option
-                      value='inactive'
-                      selected='selected'
-                      title='Inactive: user cannot log in.'
-                    >
-                      Inactive
-                    </option>
-
-                    <option
-                      value='active'
-                      title='Active: user can log in.'
-                    >
-                      Active
-                    </option>
-                  </select>
-
-                  <p id='user-edit-active-help' class='help-block'>
-                    Is this user active?
-                  </p>
-                </div><!-- form-group -->
-              </div><!-- col-md-6 -->
-            </div><!-- row -->
-          </div><!-- modal-body -->
-
-          <div class='modal-footer'>
-            <button
-              id='user-edit-confirm'
-              class='btn btn-primary'
-              title='Update user.'
-            >
-              <span class='hidden loading'>
-                <i class='fa fa-spinner fa-spin'></i>
-                Please Wait...
-              </span>
-
-              <span class='loading'>
-                <i class='fa fa-save'></i>
-                Save Changes
-              </span>
-            </button>
-
-            <button
-              class='btn btn-default'
-              data-dismiss='modal'
-              title='Close dialog.'
-            >
-              &times; Close
-            </button>
-          </div><!-- modal-footer -->
-        </div><!-- modal-content -->
-      </div><!-- modal-dialog -->
-    </div><!-- modal -->
+    <%= dialogs %>
 
     <div id='blog-edit-dialog' class='modal fade' role='dialog'>
       <div class='modal-dialog modal-lg' role='document'>
diff --git a/src/views/admin/dialogs/user-add.ecr b/src/views/admin/dialogs/user-add.ecr
new file mode 100644
index 0000000..198ab69
--- /dev/null
+++ b/src/views/admin/dialogs/user-add.ecr
@@ -0,0 +1,164 @@
+<div id='user-add-dialog' class='modal fade' role='dialog'>
+  <div class='modal-dialog' role='document'>
+    <div class='modal-content'>
+      <div class='modal-header'>
+        <button
+          type='button'
+          class='close'
+          data-dismiss='modal'
+          aria-label='Close'
+        >
+          <span aria-hidden='true'>
+            &times;
+          </span>
+        </button><!-- close -->
+
+        <h4 class='modal-title'>
+          <i class='fa fa-user-plus'></i>
+          Add User
+        </h4><!-- modal-title -->
+      </div><!-- modal-header -->
+
+      <div class='modal-body'>
+        <div class='form-group'>
+          <label for='user-add-name'>
+            Name
+          </label>
+
+          <input
+            type='text'
+            id='user-add-name'
+            class='form-control'
+            title='Enter name of user.'
+            placeholder='John Doe'
+            aria-describedby='user-add-name-help'
+          />
+
+          <p id='user-add-name-help' class='help-block'>
+            Visible name of user.
+          </p>
+        </div><!-- form-group -->
+
+        <div class='form-group'>
+          <label for='user-add-email'>
+            Email Address
+          </label>
+
+          <input
+            type='text'
+            id='user-add-email'
+            class='form-control'
+            title='Enter user email.'
+            placeholder='johndoe@example.com'
+            aria-describedby='user-add-email-help'
+          />
+
+          <p id='user-add-email-help' class='help-block'>
+            Email address (and login) of user.
+          </p>
+        </div><!-- form-group -->
+
+        <div class='form-group'>
+          <label for='user-add-password'>
+            Password
+          </label>
+
+          <input
+            type='password'
+            id='user-add-password'
+            class='form-control'
+            title='Enter password.'
+            aria-describedby='user-add-password-help'
+          />
+
+          <p id='user-add-password-help' class='help-block'>
+            User password.
+          </p>
+        </div><!-- form-group -->
+
+        <div class='row'>
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='user-add-role'>
+                Role
+              </label>
+
+              <select
+                id='user-add-role'
+                class='form-control'
+                title='Choose role of user.'
+                aria-describedby='user-add-role-help'
+              ><%=
+                role_options
+              %></select>
+
+              <p id='user-add-role-help' class='help-block'>
+                User role.
+              </p>
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
+
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='user-add-active'>
+                Active
+              </label>
+
+              <select
+                id='user-add-active'
+                class='form-control'
+                title='Choose active state of user.'
+                aria-describedby='user-add-active-help'
+              >
+                <option
+                  value='inactive'
+                  selected='selected'
+                  title='Inactive: user cannot log in.'
+                >
+                  Inactive
+                </option>
+
+                <option
+                  value='active'
+                  title='Active: user can log in.'
+                >
+                  Active
+                </option>
+              </select>
+
+              <p id='user-add-active-help' class='help-block'>
+                Is this user active?
+              </p>
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
+        </div><!-- row -->
+      </div><!-- modal-body -->
+
+      <div class='modal-footer'>
+        <button
+          id='user-add-confirm'
+          class='btn btn-primary'
+          title='Create user.'
+        >
+          <span class='hidden loading'>
+            <i class='fa fa-spinner fa-spin'></i>
+            Please Wait...
+          </span>
+
+          <span class='loading'>
+            <i class='fa fa-user-plus'></i>
+            Create User
+          </span>
+        </button>
+
+        <button
+          class='btn btn-default'
+          data-dismiss='modal'
+          title='Close dialog.'
+        >
+          &times; Close
+        </button>
+      </div><!-- modal-footer -->
+    </div><!-- modal-content -->
+  </div><!-- modal-dialog -->
+</div><!-- modal -->
diff --git a/src/views/admin/dialogs/user-edit.ecr b/src/views/admin/dialogs/user-edit.ecr
new file mode 100644
index 0000000..e0e39c2
--- /dev/null
+++ b/src/views/admin/dialogs/user-edit.ecr
@@ -0,0 +1,178 @@
+<div id='user-edit-dialog' class='modal fade' role='dialog'>
+  <div class='modal-dialog' role='document'>
+    <div class='modal-content'>
+      <div class='modal-header'>
+        <button
+          type='button'
+          class='close'
+          data-dismiss='modal'
+          aria-label='Close'
+        >
+          <span aria-hidden='true'>
+            &times;
+          </span>
+        </button><!-- close -->
+
+        <h4 class='modal-title'>
+          <i class='fa fa-user'></i>
+          Edit User
+        </h4><!-- modal-title -->
+      </div><!-- modal-header -->
+
+      <div class='modal-body loading-text'>
+        <p>
+          <i class='fa fa-spinner fa-spin'></i>
+          Loading...
+        </p>
+      </div><!-- modal-body -->
+
+      <div class='modal-body loading-error'>
+        <div class='well'>
+          <i class='fa fa-exclamation-triangle'></i>
+          Error: <span class='error-text'></span>
+        </div><!-- well -->
+      </div><!-- modal-body -->
+
+      <div class='modal-body loading-done'>
+        <div class='form-group'>
+          <label for='user-edit-name'>
+            Name
+          </label>
+
+          <input
+            type='text'
+            id='user-edit-name'
+            class='form-control'
+            title='Enter name of user.'
+            placeholder='John Doe'
+            aria-describedby='user-edit-name-help'
+          />
+
+          <p id='user-edit-name-help' class='help-block'>
+            Name of this user.
+          </p>
+        </div><!-- form-group -->
+
+        <div class='form-group'>
+          <label for='user-edit-email'>
+            Email Address
+          </label>
+
+          <input
+            type='text'
+            id='user-edit-email'
+            class='form-control'
+            title='Enter user email.'
+            placeholder='johndoe@example.com'
+            aria-describedby='user-edit-email-help'
+          />
+
+          <p id='user-edit-email-help' class='help-block'>
+            Email address for this user.
+          </p>
+        </div><!-- form-group -->
+
+        <div class='form-group'>
+          <label for='user-edit-password'>
+            Password
+          </label>
+
+          <input
+            type='password'
+            id='user-edit-password'
+            class='form-control'
+            title='Enter user password.'
+            aria-describedby='user-edit-password-help'
+          />
+
+          <p id='user-edit-password-help' class='help-block'>
+            Password for this user.
+          </p>
+        </div><!-- form-group -->
+
+        <div class='row'>
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='user-edit-role'>
+                Role
+              </label>
+
+              <select
+                id='user-edit-role'
+                class='form-control'
+                title='Choose role of user.'
+                aria-describedby='user-edit-role-help'
+              ><%=
+                role_options
+              %></select>
+
+              <p id='user-edit-role-help' class='help-block'>
+                User role.
+              </p>
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
+
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='user-edit-active'>
+                Active
+              </label>
+
+              <select
+                id='user-edit-active'
+                class='form-control'
+                title='Choose active state of user.'
+                aria-describedby='user-edit-active-help'
+              >
+                <option
+                  value='inactive'
+                  selected='selected'
+                  title='Inactive: user cannot log in.'
+                >
+                  Inactive
+                </option>
+
+                <option
+                  value='active'
+                  title='Active: user can log in.'
+                >
+                  Active
+                </option>
+              </select>
+
+              <p id='user-edit-active-help' class='help-block'>
+                Is this user active?
+              </p>
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
+        </div><!-- row -->
+      </div><!-- modal-body -->
+
+      <div class='modal-footer'>
+        <button
+          id='user-edit-confirm'
+          class='btn btn-primary'
+          title='Update user.'
+        >
+          <span class='hidden loading'>
+            <i class='fa fa-spinner fa-spin'></i>
+            Please Wait...
+          </span>
+
+          <span class='loading'>
+            <i class='fa fa-save'></i>
+            Save Changes
+          </span>
+        </button>
+
+        <button
+          class='btn btn-default'
+          data-dismiss='modal'
+          title='Close dialog.'
+        >
+          &times; Close
+        </button>
+      </div><!-- modal-footer -->
+    </div><!-- modal-content -->
+  </div><!-- modal-dialog -->
+</div><!-- modal -->