add blog, page, and project edit dialogs

2 files changed, 635 insertions, 43 deletions

diff --git a/src/guff.cr b/src/guff.cr
index b0f57d4..8228e88 100644
--- a/src/guff.cr
+++ b/src/guff.cr
@@ -1332,10 +1332,10 @@ module Guff
         assets(:style, paths)
       end
 
-      def tabs(rows : Array(Hash(Symbol, String)))
+      def tabs(prefix : String, rows : Array(Hash(Symbol, String)))
         String.build do |io|
           rows.each do |row|
-            TabView.new(@context, "admin", row).to_s(io)
+            TabView.new(@context, prefix, row).to_s(io)
           end
         end
       end
@@ -1344,48 +1344,123 @@ module Guff
     class AdminPageView < HTMLView
       TITLE = "Guff Admin"
 
-      TABS = [{
-        id:   "home",
-        css:  "active",
-        icon: "fa-home",
-        name: "Home",
-        text: "View home tab.",
-      }, {
-        id:   "posts",
-        css:  "",
-        icon: "fa-cubes",
-        name: "Posts",
-        text: "Manage blog, pages, and projects.",
-      }, {
-        id:   "files",
-        css:  "",
-        icon: "fa-files-o",
-        name: "Files",
-        text: "Manage files.",
-      }, {
-        id:   "users",
-        css:  "",
-        icon: "fa-users",
-        name: "Users",
-        text: "Manage users and permissions.",
-      }, {
-        id:   "settings",
-        css:  "",
-        icon: "fa-cog",
-        name: "Settings",
-        text: "Configure site settings.",
-      }]
-
-      def tabs
-        super(TABS)
-      end
-
-      OPTION = "<option value='%s'>%s</option>"
-
-      def role_options
+      TABS = {
+        "admin": [{
+          id:   "home",
+          css:  "active",
+          icon: "fa-home",
+          name: "Home",
+          text: "View home tab.",
+        }, {
+          id:   "posts",
+          css:  "",
+          icon: "fa-cubes",
+          name: "Posts",
+          text: "Manage blog, pages, and projects.",
+        }, {
+          id:   "files",
+          css:  "",
+          icon: "fa-files-o",
+          name: "Files",
+          text: "Manage files.",
+        }, {
+          id:   "users",
+          css:  "",
+          icon: "fa-users",
+          name: "Users",
+          text: "Manage users and permissions.",
+        }, {
+          id:   "settings",
+          css:  "",
+          icon: "fa-cog",
+          name: "Settings",
+          text: "Configure site settings.",
+        }],
+      }
+
+      TEMPLATES = {
+        option: "
+          <option value='%s'>%s</option>
+        ",
+
+        new_post_button: "
+          <a
+            href='#'
+            class='btn btn-primary'
+            title='Create new blog post.'
+            data-toggle='modal'
+            data-target='#blog-edit-dialog'
+          >
+            <i class='fa fa-plus-circle'></i>
+            New Post
+          </a><!-- btn -->
+
+          <a
+            href='#'
+            class='btn btn-primary'
+            title='Show additonal options.'
+            data-toggle='dropdown'
+          >
+            <span class='hidden'>
+              <i class='fa fa-plus-circle'></i>
+              New
+            </span>
+
+            <i class='fa fa-caret-down'></i>
+          </a>
+
+          <ul class='dropdown-menu'>
+            <li class='hidden'>
+              <a
+                href='#'
+                title='Create new blog post.'
+                data-toggle='modal'
+                data-target='#blog-edit-dialog'
+              >
+                <i class='fa fa-fw fa-bullhorn'></i>
+                New Post
+              </a>
+            </li>
+
+            <li>
+              <a
+                href='#'
+                title='Create new page.'
+                data-toggle='modal'
+                data-target='#page-edit-dialog'
+              >
+                <i class='fa fa-fw fa-bookmark-o'></i>
+                New Page
+              </a>
+            </li>
+
+            <li>
+              <a
+                href='#'
+                title='Create new project.'
+                data-toggle='modal'
+                data-target='#project-edit-dialog'
+              >
+                <i class='fa fa-fw fa-cube'></i>
+                New Project
+              </a>
+            </li>
+          </ul>
+        ",
+      }
+
+      def tabs(id : String)
+        super(id, TABS[id])
+      end
+
+      private def new_post_button
+        TEMPLATES[:new_post_button]
+      end
+
+      private def role_options
         @role_options ||= String.build do |io|
           @context.models.role.get_roles.each do |row|
-            io << OPTION % %w{role name}.map { |key| h(row[key]) }
+            io << TEMPLATES[:option] % %w{role name}.map { |key| h(row[key]) }
           end
         end
       end
diff --git a/src/views/admin-page.ecr b/src/views/admin-page.ecr
index 3394096..7614453 100644
--- a/src/views/admin-page.ecr
+++ b/src/views/admin-page.ecr
@@ -46,7 +46,7 @@
     <div class='container'>
       <div class='col-md-12'>
         <ul class='nav nav-tabs nav-justified' role='tablist'><%=
-          tabs
+          tabs("admin")
         %></ul><!-- nav -->
 
         <div class='tab-content'>
@@ -57,6 +57,11 @@
           >
             <div class='panel panel-default'>
               <div class='panel-heading'>
+                <div class='btn-toolbar'>
+                  <div class='btn-group btn-group-sm'><%=
+                    new_post_button
+                  %></div><!-- btn-group -->
+                </div><!-- btn-toolbar -->
               </div><!-- panel-heading -->
 
               <div class='panel-body'>
@@ -74,6 +79,11 @@
           >
             <div class='panel panel-default'>
               <div class='panel-heading'>
+                <div class='btn-toolbar'>
+                  <div class='btn-group btn-group-sm'><%=
+                    new_post_button
+                  %></div><!-- btn-group -->
+                </div><!-- btn-toolbar -->
               </div><!-- panel-heading -->
 
               <div class='panel-body'>
@@ -395,6 +405,513 @@
         </div><!-- modal-content -->
       </div><!-- modal-dialog -->
     </div><!-- modal -->
+
+    <div id='blog-edit-dialog' class='modal fade' role='dialog'>
+      <div class='modal-dialog modal-lg' 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-edit'></i>
+              Edit Blog Entry
+            </h4><!-- modal-title -->
+          </div><!-- modal-header -->
+
+          <div class='modal-body'>
+            <div class='row'>
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='blog-edit-name'>
+                    Title
+                  </label>
+
+                  <input
+                    type='text'
+                    id='blog-edit-name'
+                    class='form-control post-name'
+                    title='Enter title for blog entry.'
+                    placeholder='Blog Entry Title'
+                    aria-describedby='blog-edit-name-help'
+                  />
+
+                  <p id='blog-edit-name-help' class='help-block'>
+                    Title of blog entry.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='blog-edit-slug'>
+                    Slug
+                  </label>
+
+                  <div class='input-group'>
+                    <input
+                      type='text'
+                      id='blog-edit-slug'
+                      class='form-control post-slug'
+                      disabled='disabled'
+                      title='Enter slug for blog entry.'
+                      placeholder='blog-post-title'
+                      aria-describedby='blog-edit-slug-help'
+                    />
+
+                    <a
+                      href='#'
+                      class='btn input-group-addon btn-default post-slug-lock'
+                      title='Toggle slug lock.'
+                      aria-describedby='page-edit-slug-help'
+                    >
+                      <i class='fa fa-lock'></i>
+                    </a><!-- slog-lock -->
+                  </div><!-- input-group -->
+
+                  <p id='blog-edit-slug-help' class='help-block'>
+                    Slug of blog entry.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
+
+            <div class='form-group'>
+              <label for='blog-edit-body'>
+                Body
+              </label>
+
+              <textarea
+                id='blog-edit-body'
+                class='form-control'
+                rows='15'
+                aria-describedby='blog-edit-body-help'
+              ></textarea>
+
+              <p id='blog-edit-body-help' class='help-block'>
+                Body of this blog entry.
+              </p>
+            </div><!-- form-group -->
+          </div><!-- modal-body -->
+
+          <div class='modal-footer'>
+            <button
+              id='blog-edit-confirm'
+              class='btn btn-primary'
+              title='Create post.'
+            >
+              <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 -->
+
+    <div id='page-edit-dialog' class='modal fade' role='dialog'>
+      <div class='modal-dialog modal-lg' 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-edit'></i>
+              Edit Page
+            </h4><!-- modal-title -->
+          </div><!-- modal-header -->
+
+          <div class='modal-body'>
+            <div class='row'>
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='page-edit-name'>
+                    Title
+                  </label>
+
+                  <input
+                    type='text'
+                    id='page-edit-name'
+                    class='form-control post-name'
+                    title='Enter title for page.'
+                    placeholder='Page Title'
+                    aria-describedby='page-edit-name-help'
+                  />
+
+                  <p id='page-edit-name-help' class='help-block'>
+                    Title of page.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='page-edit-slug'>
+                    Path
+                  </label>
+
+                  <div class='input-group'>
+                    <input
+                      type='text'
+                      id='page-edit-slug'
+                      class='form-control post-slug'
+                      disabled='disabled'
+                      title='Enter path for this page.'
+                      placeholder='page-title'
+                    />
+
+                    <a
+                      href='#'
+                      class='btn input-group-addon btn-default post-slug-lock'
+                      title='Toggle path lock.'
+                      aria-describedby='page-edit-slug-help'
+                    >
+                      <i class='fa fa-lock'></i>
+                    </a><!-- slog-lock -->
+                  </div><!-- input-group -->
+
+                  <p id='page-edit-slug-help' class='help-block'>
+                    URL path of page.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
+
+            <div class='form-group'>
+              <label for='page-edit-body'>
+                Body
+              </label>
+
+              <textarea
+                id='page-edit-body'
+                class='form-control'
+                rows='15'
+                aria-describedby='page-edit-body-help'
+              ></textarea>
+
+              <p id='page-edit-body-help' class='help-block'>
+                Body of this page.
+              </p>
+            </div><!-- form-group -->
+
+            <div class='row'>
+              <div class='col-md-6'>
+                <label>
+                  Layout
+                </label>
+
+                <div class='btn-group btn-group-justified'>
+                  <a
+                    href='#'
+                    class='btn btn-default post-state'
+                    title='Use blank layout for this page.'
+                  >
+                    <i class='fa fa-file-o'></i>
+                    Blank
+                  </a>
+
+                  <a
+                    href='#'
+                    class='btn btn-primary post-state'
+                    title='Use default layout for this page.'
+                  >
+                    <i class='fa fa-newspaper-o'></i>
+                    Default
+                  </a>
+                </div><!-- btn-group -->
+
+                <p class='help-block'>
+                  Layout for this page.
+                </p>
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <label>
+                  State
+                </label>
+
+                <div class='btn-group btn-group-justified'>
+                  <a
+                    href='#'
+                    class='btn btn-primary post-state'
+                    title='Mark this page as a draft.'
+                  >
+                    <i class='fa fa-wrench'></i>
+                    Draft
+                  </a>
+
+                  <a
+                    href='#'
+                    class='btn btn-default post-state'
+                    title='Mark this page as published.'
+                  >
+                    <i class='fa fa-bullhorn'></i>
+                    Published
+                  </a>
+
+                  <a
+                    href='#'
+                    class='btn btn-default post-state'
+                    title='Mark this page as deleted.'
+                  >
+                    <i class='fa fa-trash'></i>
+                    Deleted
+                  </a>
+                </div><!-- btn-group -->
+
+                <p class='help-block'>
+                  Visibility state of this page.
+                </p>
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
+          </div><!-- modal-body -->
+
+          <div class='modal-footer'>
+            <button
+              id='page-edit-confirm'
+              class='btn btn-primary'
+              title='Save changes.'
+            >
+              <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 -->
+
+    <div id='project-edit-dialog' class='modal fade' role='dialog'>
+      <div class='modal-dialog modal-lg' 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-edit'></i>
+              Edit Project
+            </h4><!-- modal-title -->
+          </div><!-- modal-header -->
+
+          <div class='modal-body'>
+            <div class='row'>
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='project-edit-name'>
+                    Name
+                  </label>
+
+                  <input
+                    type='text'
+                    id='project-edit-name'
+                    class='form-control post-name'
+                    title='Enter project name.'
+                    placeholder='Project Name'
+                    aria-describedby='project-edit-name-help'
+                  />
+
+                  <p id='project-edit-name-help' class='help-block'>
+                    Name of project.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='project-edit-slug'>
+                    Slug
+                  </label>
+
+                  <div class='input-group'>
+                    <input
+                      type='text'
+                      id='project-edit-slug'
+                      class='form-control post-slug'
+                      title='Enter project slug.'
+                      disabled='disabled'
+                      placeholder='project-name'
+                      aria-describedby='project-edit-slug-help'
+                    />
+
+                    <a
+                      href='#'
+                      class='btn input-group-addon btn-default post-slug-lock'
+                      title='Toggle slug lock.'
+                    >
+                      <i class='fa fa-lock'></i>
+                    </a><!-- slog-lock -->
+                  </div><!-- input-group -->
+
+                  <p id='project-edit-slug-help' class='help-block'>
+                    URL path component of project.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
+
+            <div class='form-group'>
+              <label for='project-edit-body'>
+                Description
+              </label>
+
+              <textarea
+                id='project-edit-body'
+                class='form-control'
+                title='Description of this project.'
+                rows='15'
+                aria-describedby='project-edit-body-help'
+              ></textarea>
+
+              <p id='project-edit-body-help' class='help-block'>
+                Description of this project.
+              </p>
+            </div><!-- form-group -->
+
+            <div class='row'>
+              <div class='col-md-6'>
+                <div class='form-group'>
+                  <label for='project-edit-repo'>
+                    Git Repository
+                  </label>
+
+                  <input
+                    type='text'
+                    id='project-edit-repo'
+                    class='form-control'
+                    title='Enter project Git repository URL.'
+                    placeholder='https://example.com/git/example-project.git'
+                    aria-describedby='project-edit-repo-help'
+                  />
+
+                  <p id='project-edit-repo-help' class='help-block'>
+                    URL of Git repository for this project.
+                  </p>
+                </div><!-- form-group -->
+              </div><!-- col-md-6 -->
+
+              <div class='col-md-6'>
+                <label>
+                  State
+                </label>
+
+                <div class='btn-group btn-group-justified'>
+                  <a
+                    href='#'
+                    class='btn btn-primary post-state'
+                    title='Mark this project as a draft.'
+                  >
+                    <i class='fa fa-wrench'></i>
+                    Draft
+                  </a>
+
+                  <a
+                    href='#'
+                    class='btn btn-default post-state'
+                    title='Mark this project as published.'
+                  >
+                    <i class='fa fa-bullhorn'></i>
+                    Published
+                  </a>
+
+                  <a
+                    href='#'
+                    class='btn btn-default post-state'
+                    title='Mark this project as deleted.'
+                  >
+                    <i class='fa fa-trash'></i>
+                    Deleted
+                  </a>
+                </div><!-- btn-group -->
+
+                <p class='help-block'>
+                  Visibility state of this project.
+                </p>
+              </div><!-- col-md-6 -->
+            </div><!-- row -->
+          </div><!-- modal-body -->
+
+          <div class='modal-footer'>
+            <button
+              id='project-edit-confirm'
+              class='btn btn-primary'
+              title='Save changes.'
+            >
+              <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 -->
   </body>
 
   <%=