refactor mock panels, enable panel add and remove

4 files changed, 65 insertions, 116 deletions

diff --git a/data/assets/css/admin.css b/data/assets/css/admin.css
index 86eb3af..35472b7 100644
--- a/data/assets/css/admin.css
+++ b/data/assets/css/admin.css
@@ -21,7 +21,7 @@ textarea.asset-list {
   min-height: 100px;
 }
 
-#home.dragging .drop {
+#home.dragging .home-col {
   border: 1px dashed red;
   padding-bottom: 100px;
 }
diff --git a/src/guff/views/pages/admin.cr b/src/guff/views/pages/admin.cr
index 7113fbc..0a1e62d 100644
--- a/src/guff/views/pages/admin.cr
+++ b/src/guff/views/pages/admin.cr
@@ -120,6 +120,9 @@ class Guff::Views::Pages::Admin < Guff::Views::HTMLView
       default_lang:     default_lang,
       default_theme_id: default_theme_id,
 
+      # home panel template
+      panel_template: Guff::Views::Panel::TEMPLATE.string,
+
       site_dialogs: {
         paths: {
           add:  "site/add",
diff --git a/src/guff/views/panes/admin/home.cr b/src/guff/views/panes/admin/home.cr
index d7d1596..6010fd4 100644
--- a/src/guff/views/panes/admin/home.cr
+++ b/src/guff/views/panes/admin/home.cr
@@ -2,91 +2,50 @@ require "./pane"
 
 class Guff::Views::Panes::Admin::Home < Guff::Views::Panes::Admin::Pane
   TEMPLATES = Template::Cache.new({
-    "col" => %{
+    "cols-menu-item" => %{
       <li class='%{css|h}' role='presentation'>
         <a
           href='#'
           title='Show %{i} column%{s}.'
           data-id='%{i}'
           data-name='%{i} Column%{s}'
+          data-col='%{col|h}'
         >
           %{i} Column%{s}
         </a>
       </li>
     }.strip,
 
-    "old-panel-edit" => %{
-      <div class='panel-heading home-editing hidden'>
-        <div class='btn-toolbar'>
-          <div class='btn-group btn-group-sm'>
-            <a
-              href='#'
-              class='btn btn-default home-panel-edit'
-              title='Edit this panel.'
-              data-id='edit'
-            >
-              <i class='fa fa-cog'></i>
-            </a>
-          </div><!-- btn-group -->
-
-          <div class='btn-group btn-group-sm pull-right'>
-            <a
-              href='#'
-              class='btn btn-default home-panel-edit'
-              title='Remove this panel.'
-              data-id='remove'
-            >
-              <i class='fa fa-trash'></i>
-            </a>
-          </div><!-- btn-group -->
-        </div><!-- btn-toolbar -->
-      </div><!-- panel-heading -->
-    }.strip,
-
-    "panel-edit" => %{
-      <a
-        href='#'
-        class='btn btn-default btn-xs home-editing hidden'
-        title='Edit panel.'
-        data-toggle='dropdown'
-      >
-        <i class='fa fa-cog'></i>
-        <i class='fa fa-caret-down'></i>
-      </a>
-
-      <ul class='dropdown-menu home-panel-edit'>
-        <li role='presentation'>
-          <a
-            href='#'
-            title='Configure this panel.'
-            data-id='edit'
-          >
-            <i class='fa fa-list-alt'></i>
-            Configure...
-          </a>
-        </li>
-
-        <li role='presentation'>
-          <a
-            href='#'
-            title='Remove this panel.'
-            data-id='remove'
-          >
-            <i class='fa fa-trash'></i>
-            Remove
-          </a>
-        </li>
-      </ul>
+    "add-menu-item" => %{
+      <li role='presentation'>
+        <a
+          href='#'
+          title='Add %{name|h} panel.'
+          data-id='%{id|h}'
+          data-name='%{name|h}'
+        >
+          %{name|h}
+        </a>
+      </li>
     }.strip,
   })
 
+  ADD_MENU_ITEMS = [{
+    "id"    => "test-1",
+    "name"  => "Test 1",
+  }, {
+    "id"    => "test-2",
+    "name"  => "Test 2",
+  }].map { |row|
+    TEMPLATES["add-menu-item"].run(row)
+  }.join
+
   private def add_menu
-    # TODO
-    ""
+    ADD_MENU_ITEMS
   end
 
   private def cols_menu
-    t = TEMPLATES["col"]
+    t = TEMPLATES["cols-menu-item"]
     num_cols = 3
 
     (1..4).map { |i|
@@ -94,14 +53,36 @@ class Guff::Views::Panes::Admin::Home < Guff::Views::Panes::Admin::Pane
         "i"   => i.to_s,
         "s"   => (i == 1) ? "" : "s",
         "css" => (i == num_cols) ? "active" : "",
+        "col" => "col-md-%d" % [12 / i],
       })
     }.join
   end
 
-  PANEL_EDIT = TEMPLATES["panel-edit"].run({} of String => String)
+  MOCK_PANELS = {
+    p1: {
+      id:     "1",
+      type:   "test",
+      name:   "Some Panel",
+      body:   "<p>Some panel.</p>",
+    },
+
+    p2: {
+      id:     "2",
+      type:   "test",
+      name:   "Another Panel",
+      body:   "<p>Another panel.</p>",
+    },
+
+    p3: {
+      id:     "3",
+      type:   "test",
+      name:   "Third Panel",
+      body:   "<p>Third panel.</p>",
+    },
+  }
 
-  private def panel_edit : String
-    PANEL_EDIT
+  private def mock_panel(id)
+    Guff::Views::Panel.make(**MOCK_PANELS[id])
   end
 
   ECR.def_to_s("src/views/panes/admin/home.ecr")
diff --git a/src/views/panes/admin/home.ecr b/src/views/panes/admin/home.ecr
index df0c7ec..90b7feb 100644
--- a/src/views/panes/admin/home.ecr
+++ b/src/views/panes/admin/home.ecr
@@ -27,6 +27,8 @@
           %></ul><!-- dropdown-menu -->
         </div><!-- btn-group -->
 
+        <%= divider %>
+
         <div class='btn-group btn-group-sm home-editing hidden'>
           <a
             href='#'
@@ -59,54 +61,17 @@
 
     <div id='home' class='panel-body'>
       <div class='row'>
-        <div class='col-md-4 drop'>
-          <div id='p-1' class='panel panel-default'>
-            <div class='panel-heading'>
-              <%= panel_edit %>
-
-              <b>
-                Some Panel
-              </b>
-            </div><!-- panel-heading -->
-
-            <div class='panel-body'>
-              <p>Some panel.</p>
-            </div><!-- panel-body -->
-          </div><!-- panel -->
-        </div><!-- col-md-4 -->
-
-        <div class='col-md-4 drop'>
-          <div id='p-2' class='panel panel-default'>
-            <div class='panel-heading'>
-              <%= panel_edit %>
-
-              <b>
-                Another Panel
-              </b>
-            </div><!-- panel-heading -->
-
-            <div class='panel-body'>
-              <p>Another panel.</p>
-            </div><!-- panel-body -->
-          </div><!-- panel -->
-        </div><!-- col-md-4 -->
-
-        <div class='col-md-4 drop'>
-          <div id='p-3' class='panel panel-default'>
-
-            <div class='panel-heading'>
-              <%= panel_edit %>
+        <div class='col-md-4 home-col'><%=
+          mock_panel :p1
+        %></div><!-- col-md-4 -->
 
-              <b>
-                Third Panel
-              </b>
-            </div><!-- panel-heading -->
+        <div class='col-md-4 home-col'><%=
+          mock_panel :p2
+        %></div><!-- col-md-4 -->
 
-            <div class='panel-body'>
-              <p>Third panel.</p>
-            </div><!-- panel-body -->
-          </div><!-- panel -->
-        </div><!-- col-md-4 -->
+        <div class='col-md-4 home-col'><%=
+          mock_panel :p3
+        %></div><!-- col-md-4 -->
       </div><!-- row -->
     </div><!-- panel-body -->
   </div><!-- panel -->