update post, pag,e and project edit dialogs

2 files changed, 302 insertions, 177 deletions

diff --git a/src/guff/views/ecrs/test/auth.ecr b/src/guff/views/ecrs/test/auth.ecr
index 10b9518..228c0a5 100644
--- a/src/guff/views/ecrs/test/auth.ecr
+++ b/src/guff/views/ecrs/test/auth.ecr
@@ -26,18 +26,9 @@
         <div class='panel panel-default'>
           <div class='panel-heading'>
             <div class='btn-toolbar'>
-              <div class='btn-group btn-group-sm'>
-                <a
-                  href='#'
-                  class='btn btn-primary'
-                  title='Create new post.'
-                  data-toggle='modal'
-                  data-target='#post-new-dialog'
-                >
-                  <i class='fa fa-plus-circle'></i>
-                  New Post
-                </a><!-- btn -->
-              </div><!-- btn-group -->
+              <div class='btn-group btn-group-sm'><%=
+                get_new_post_button
+              %></div><!-- btn-group -->
             </div><!-- btn-toolbar -->
           </div><!-- panel-heading -->
 
@@ -53,18 +44,9 @@
         <div class='panel panel-default'>
           <div class='panel-heading'>
             <div class='btn-toolbar'>
-              <div class='btn-group btn-group-sm'>
-                <a
-                  href='#'
-                  class='btn btn-primary'
-                  title='Create new post.'
-                  data-toggle='modal'
-                  data-target='#post-new-dialog'
-                >
-                  <i class='fa fa-plus-circle'></i>
-                  New Post
-                </a><!-- btn -->
-              </div><!-- btn-group -->
+              <div class='btn-group btn-group-sm'><%=
+                get_new_post_button
+              %></div><!-- btn-group -->
 
               <div class='btn-group btn-group-sm pull-right'>
                 <a
@@ -501,7 +483,7 @@
   </div><!-- modal-dialog -->
 </div><!-- modal -->
 
-<div id='post-new-dialog' class='modal fade' role='dialog'>
+<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'>
@@ -517,188 +499,260 @@
         </button><!-- close -->
 
         <h4 class='modal-title'>
-          <i class='fa fa-plus-circle'></i>
-          New Post
+          <i class='fa fa-edit'></i>
+          Edit Blog Post
         </h4><!-- modal-title -->
       </div><!-- modal-header -->
 
       <div class='modal-body'>
-        <ul class='hidden nav nav-pills nav-justified'><%=
-          get_tabs(:post_new, "post-new")
-        %></ul><!-- nav -->
-
-        <div class='tab-content'>
-          <div
-            id='post-new-tab-pane-type'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <p>
-              Choose the type of post to create using the radio buttons
-              below, then click the "Next" button.
-            </p>
-
-            <div class='radio'>
-              <label>
-                <input
-                  type='radio'
-                  name='post-new-type'
-                  id='post-new-type-blog'
-                  value='blog' 
-                  checked='checked'
-                  title='Create new blog post.'
-                  aria-describedby='post-new-type-help-blog'
-                />
-                Blog Post
+        <div class='row'>
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='blog-edit-name'>
+                Title
               </label>
 
-              <span id='post-new-type-help-blog' class='help-block'>
-                Some description about creating a new blog post.
-              </span><!-- help-block -->
-            </div><!-- radio -->
-
-            <div class='radio'>
-              <label>
-                <input
-                  type='radio'
-                  name='post-new-type'
-                  id='post-new-type-page'
-                  value='page' 
-                  title='Create new page.'
-                  aria-describedby='post-new-type-help-page'
-                />
-                Page
+              <input
+                type='text'
+                id='blog-edit-name'
+                class='form-control'
+                title='Enter title for blog post.'
+                placeholder='Blog Post Title'
+              />
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
+
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='blog-edit-slug'>
+                Slug
               </label>
 
-              <span id='post-new-type-help-page' class='help-block'>
-                Some description about creating a new page.
-              </span><!-- help-block -->
-            </div><!-- radio -->
-
-            <div class='radio'>
-              <label>
-                <input
-                  type='radio'
-                  name='post-new-type'
-                  id='post-new-type-project'
-                  value='project' 
-                  title='Create new project.'
-                  aria-describedby='post-new-type-help-project'
-                />
-                Project
+              <input
+                type='text'
+                id='blog-edit-slug'
+                class='form-control'
+                title='Enter slug for blog post.'
+                placeholder='blog-post-title'
+              />
+            </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'
+          ></textarea>
+        </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>
 
-              <span id='post-new-type-help-project' class='help-block'>
-                Some description about creating a new project.
-              </span><!-- help-block -->
-            </div><!-- radio -->
-          </div><!-- #post-new-tab-pane-type -->
-
-          <div
-            id='post-new-tab-pane-blog'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <div class='row'>
-              <div class='col-md-6'>
-                <div class='form-group'>
-                  <label for='post-new-blog-name'>
-                    Title
-                  </label>
-
-                  <input
-                    type='text'
-                    id='post-new-blog-name'
-                    class='form-control'
-                    title='Enter title for blog post.'
-                    placeholder='Blog Post Title'
-                  />
-                </div><!-- form-group -->
-              </div><!-- col-md-6 -->
-
-              <div class='col-md-6'>
-                <div class='form-group'>
-                  <label for='post-new-blog-slug'>
-                    Slug
-                  </label>
-
-                  <input
-                    type='text'
-                    id='post-new-blog-slug'
-                    class='form-control'
-                    title='Enter slug for blog post.'
-                    placeholder='blog-post-slug'
-                  />
-                </div><!-- form-group -->
-              </div><!-- col-md-6 -->
-            </div><!-- row -->
+              <input
+                type='text'
+                id='page-edit-name'
+                class='form-control'
+                title='Enter title for page.'
+                placeholder='Page Title'
+              />
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
 
+          <div class='col-md-6'>
             <div class='form-group'>
-              <label for='post-new-blog-body'>
-                Body
+              <label for='page-edit-slug'>
+                Path
               </label>
 
-              <textarea
-                id='post-new-blog-body'
+              <input
+                type='text'
+                id='page-edit-slug'
                 class='form-control'
-                rows='15'
-              ></textarea>
+                title='Enter path for this page.'
+                placeholder='page-title'
+              />
             </div><!-- form-group -->
-          </div><!-- #post-new-tab-pane-blog -->
+          </div><!-- col-md-6 -->
+        </div><!-- row -->
 
-          <div
-            id='post-new-tab-pane-page'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <p>
-              TODO: create page
-            </p>
-          </div><!-- #post-new-tab-pane-page -->
+        <div class='form-group'>
+          <label for='page-edit-body'>
+            Body
+          </label>
 
-          <div
-            id='post-new-tab-pane-project'
-            class='tab-pane'
-            role='tabpanel'
-          >
-            <p>
-              TODO: create project
-            </p>
-          </div><!-- #post-new-tab-pane-project -->
-        </div><!-- tab-content -->
+          <textarea
+            id='page-edit-body'
+            class='form-control'
+            rows='15'
+          ></textarea>
+        </div><!-- form-group -->
       </div><!-- modal-body -->
 
       <div class='modal-footer'>
         <button
-          class='btn btn-default pull-left'
-          data-dismiss='modal'
-          title='Close dialog.'
+          id='page-edit-confirm'
+          class='btn btn-primary'
+          title='Save changes.'
         >
-          &times; Close
+          <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 
-          id='post-new-back'
+        <button
           class='btn btn-default'
-          title='Go to previous step.'
+          data-dismiss='modal'
+          title='Close dialog.'
         >
-          <i class='fa fa-chevron-left'></i>
-          Back
+          &times; Close
         </button>
+      </div><!-- modal-footer -->
+    </div><!-- modal-content -->
+  </div><!-- modal-dialog -->
+</div><!-- modal -->
 
-        <button 
-          id='post-new-next'
-          class='btn btn-primary'
-          title='Go to next step.'
+<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'
         >
-          <i class='fa fa-chevron-right'></i>
-          Next
-        </button>
+          <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'
+                title='Enter name for project.'
+                placeholder='Project Name'
+              />
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
+
+          <div class='col-md-6'>
+            <div class='form-group'>
+              <label for='project-edit-slug'>
+                Slug
+              </label>
+
+              <input
+                type='text'
+                id='project-edit-slug'
+                class='form-control'
+                title='Enter slug for this project.'
+                placeholder='project-name'
+              />
+            </div><!-- form-group -->
+          </div><!-- col-md-6 -->
+        </div><!-- row -->
+
+        <div class='form-group'>
+          <label for='project-edit-body'>
+            Body
+          </label>
+
+          <textarea
+            id='project-edit-body'
+            class='form-control'
+            rows='15'
+          ></textarea>
+        </div><!-- form-group -->
+      </div><!-- modal-body -->
 
+      <div class='modal-footer'>
         <button
-          id='post-new-confirm'
+          id='project-edit-confirm'
           class='btn btn-primary'
-          title='Create post.'
+          title='Save changes.'
         >
           <span class='hidden loading'>
             <i class='fa fa-spinner fa-spin'></i>
@@ -706,11 +760,18 @@
           </span>
 
           <span class='loading'>
-            <i class='fa fa-plus-circle'></i>
-            Create 
-            <span class='name'>Type</span>
+            <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 -->
diff --git a/src/guff/views/html/test/auth.cr b/src/guff/views/html/test/auth.cr
index 60bafb3..59e151f 100644
--- a/src/guff/views/html/test/auth.cr
+++ b/src/guff/views/html/test/auth.cr
@@ -38,6 +38,66 @@ class Guff::TestAuthHTMLView
         </a>
       </li>
     ",
+
+    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='Choose post type.'
+        data-toggle='dropdown'
+      >
+        <i class='fa fa-caret-down'></i>
+      </a>
+
+      <ul class='dropdown-menu'>
+        <li>
+          <a
+            href='#'
+            title='Create new blog post.'
+            data-toggle='modal'
+            data-target='#blog-edit-dialog'
+          >
+            <i class='fa fa-bullhorn'></i>
+            New Blog Post
+          </a>
+        </li>
+
+        <li>
+          <a
+            href='#'
+            title='Create new page.'
+            data-toggle='modal'
+            data-target='#page-edit-dialog'
+          >
+            <i class='fa 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-cube'></i>
+            New Project
+          </a>
+        </li>
+      </ul>
+    ",
   })
 
   def self.run(models, context : HTTP::Server::Context)
@@ -82,5 +142,9 @@ class Guff::TestAuthHTMLView
     }.join
   end
 
+  def get_new_post_button
+    TEMPLATES[:new_post_button].run
+  end
+
   ECR.def_to_s("./src/guff/views/ecrs/test/auth.ecr")
 end