add test auth panel tabs

4 files changed, 241 insertions, 103 deletions

diff --git a/src/guff/models.cr b/src/guff/models.cr
index 4b6a46f..087c488 100644
--- a/src/guff/models.cr
+++ b/src/guff/models.cr
@@ -36,6 +36,7 @@ module Guff
       session:  SessionModel,
       user:     UserModel,
       role:     RoleModel,
+      tab:      TabModel,
     })
   end
 end
diff --git a/src/guff/models/tab.cr b/src/guff/models/tab.cr
new file mode 100644
index 0000000..3fe5133
--- /dev/null
+++ b/src/guff/models/tab.cr
@@ -0,0 +1,50 @@
+class Guff::TabModel < Guff::Model
+  SQL = TemplateCache.new({
+  } of Symbol => String)
+
+  TABS = [{
+    "id":   "home",
+    "css":  "active",
+    "icon": "fa-home",
+    "name": "Home",
+    "text": "View home tab.",
+  }, {
+    "id":   "blog",
+    "icon": "fa-bullhorn",
+    "name": "Blog",
+    "text": "Add, view, and edit blog posts.",
+  }, {
+    "id":   "files",
+    "icon": "fa-files-o",
+    "name": "Files",
+    "text": "Add, view, and edit files.",
+  }, {
+    "id":   "pages",
+    "icon": "fa-bookmark-o",
+    "name": "Pages",
+    "text": "Add, view, and edit pages.",
+  }, {
+    "id":   "projects",
+    "icon": "fa-cubes",
+    "name": "Projects",
+    "text": "Add, view, and edit projects.",
+  }, {
+    "id":   "users",
+    "icon": "fa-users",
+    "name": "Users",
+    "text": "Add, view, and edit users and permissions.",
+  }, {
+    "id":   "settings",
+    "icon": "fa-cog",
+    "name": "Settings",
+    "text": "Configure site settings.",
+  }]
+
+  def initialize(models : Models)
+    super(models, SQL)
+  end
+
+  def get_tabs
+    TABS
+  end
+end
diff --git a/src/guff/views/ecrs/test/auth.ecr b/src/guff/views/ecrs/test/auth.ecr
index bea7adb..e377962 100644
--- a/src/guff/views/ecrs/test/auth.ecr
+++ b/src/guff/views/ecrs/test/auth.ecr
@@ -16,110 +16,171 @@
 </div><!-- navbar -->
 
 <div class='container'>
-  <div class='col-md-8 col-md-offset-2'>
-    <div class='panel panel-default'>
-      <div class='panel-heading'>
-        <b>
-          <i class='fa fa-users'></i>
-          Users
-        </b>
-      </div><!-- panel-heading -->
-
-      <div class='panel-heading'>
-        <div class='btn-toolbar'>
-          <div class='btn-group btn-group-sm'>
-            <a
-              href='#'
-              class='btn btn-primary'
-              title='Create new user.'
-              data-toggle='modal'
-              data-target='#add-dialog'
-            >
-              <i class='fa fa-user-plus'></i>
-              Add User
-            </a><!-- btn -->
-          </div><!-- btn-group -->
-
-          <div class='btn-group btn-group-sm'>
-            <a
-              href='#'
-              class='btn btn-default'
-              title='Test login dialog.'
-              data-toggle='modal'
-              data-target='#login-dialog'
-            >
-              <i class='fa fa-lock'></i>
-              Test Login
-            </a><!-- btn -->
-          </div><!-- btn-group -->
-
-          <div class='hidden btn-group btn-group-sm'>
-            <a
-              href='#'
-              class='btn btn-default'
-              title='Filter users by role.'
-              data-toggle='dropdown'
-            >
-              Role: <span></span>
-              <i class='fa fa-caret-down'></i>
-            </a>
-
-            <ul id='filter-roles' class='dropdown-menu'>
-            </ul>
-          </div><!-- btn-group -->
-
-          <div class='btn-group btn-group-sm pull-right'>
-            <a
-              href='#'
-              class='btn btn-default search-toggle'
-              title='Toggle search field.'
-            >
-              <i class='fa fa-search'></i>
-            </a><!-- btn-->
-          </div><!-- btn-group -->
-
-          <div class='btn-group btn-group-sm pull-right'>
-            <a
-              href='#'
-              id='reload'
-              class='btn btn-default'
-              title='Reload users.'
-            >
-              <span class='loading'>
-                <i class='fa fa-refresh'></i>
+  <div class='col-md-12'>
+    <ul class='nav nav-tabs nav-justified' role='tablist'><%=
+      get_tabs
+    %></ul><!-- nav-tabs -->
+
+    <div class='tab-content'>
+      <div id='tab-pane-home' class='tab-pane active' role='tabpanel'>
+        <div class='panel panel-default'>
+          <div class='panel-body'>
+            <p>
+              TODO: home
+            </p>
+          </div><!-- panel-body -->
+        </div><!-- panel -->
+      </div><!-- #tab-home -->
+
+      <div id='tab-pane-blog' class='tab-pane' role='tabpanel'>
+        <div class='panel panel-default'>
+          <div class='panel-body'>
+            <p>
+              TODO: blog
+            </p>
+          </div><!-- panel-body -->
+        </div><!-- panel -->
+      </div><!-- #tab-pane-blog -->
+
+      <div id='tab-pane-files' class='tab-pane' role='tabpanel'>
+        <div class='panel panel-default'>
+          <div class='panel-body'>
+            <p>
+              TODO: files
+            </p>
+          </div><!-- panel-body -->
+        </div><!-- panel -->
+      </div><!-- #tab-pane-files -->
+
+      <div id='tab-pane-pages' class='tab-pane' role='tabpanel'>
+        <div class='panel panel-default'>
+          <div class='panel-body'>
+            <p>
+              TODO: pages
+            </p>
+          </div><!-- panel-body -->
+        </div><!-- panel -->
+      </div><!-- #tab-pane-pages -->
+
+      <div id='tab-pane-projects' class='tab-pane' role='tabpanel'>
+        <div class='panel panel-default'>
+          <div class='panel-body'>
+            <p>
+              TODO: projects
+            </p>
+          </div><!-- panel-body -->
+        </div><!-- panel -->
+      </div><!-- #tab-pane-projects -->
+
+      <div id='tab-pane-users' class='tab-pane' role='tabpanel'>
+        <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 user.'
+                  data-toggle='modal'
+                  data-target='#add-dialog'
+                >
+                  <i class='fa fa-user-plus'></i>
+                  Add User
+                </a><!-- btn -->
+              </div><!-- btn-group -->
+
+              <div class='btn-group btn-group-sm'>
+                <a
+                  href='#'
+                  class='btn btn-default'
+                  title='Test login dialog.'
+                  data-toggle='modal'
+                  data-target='#login-dialog'
+                >
+                  <i class='fa fa-lock'></i>
+                  Test Login
+                </a><!-- btn -->
+              </div><!-- btn-group -->
+
+              <div class='hidden btn-group btn-group-sm'>
+                <a
+                  href='#'
+                  class='btn btn-default'
+                  title='Filter users by role.'
+                  data-toggle='dropdown'
+                >
+                  Role: <span></span>
+                  <i class='fa fa-caret-down'></i>
+                </a>
+
+                <ul id='filter-roles' class='dropdown-menu'>
+                </ul>
+              </div><!-- btn-group -->
+
+              <div class='btn-group btn-group-sm pull-right'>
+                <a
+                  href='#'
+                  class='btn btn-default search-toggle'
+                  title='Toggle search field.'
+                >
+                  <i class='fa fa-search'></i>
+                </a><!-- btn-->
+              </div><!-- btn-group -->
+
+              <div class='btn-group btn-group-sm pull-right'>
+                <a
+                  href='#'
+                  id='reload'
+                  class='btn btn-default'
+                  title='Reload users.'
+                >
+                  <span class='loading'>
+                    <i class='fa fa-refresh'></i>
+                  </span>
+
+                  <span class='loading hidden'>
+                    <i class='fa fa-spinner fa-spin'></i>
+                  </span>
+                </a><!-- #reload -->
+              </div><!-- btn-group -->
+            </div><!-- btn-toolbar -->
+          </div><!-- panel-heading -->
+
+          <div class='panel-heading hidden search-toggle'>
+            <div class='input-group input-group-sm'>
+              <span class='input-group-addon'>
+                <i class='fa fa-search'></i>
               </span>
 
-              <span class='loading hidden'>
-                <i class='fa fa-spinner fa-spin'></i>
-              </span>
-            </a><!-- #reload -->
-          </div><!-- btn-group -->
-        </div><!-- btn-toolbar -->
-      </div><!-- panel-heading -->
-
-      <div class='panel-heading hidden search-toggle'>
-        <div class='input-group input-group-sm'>
-          <span class='input-group-addon'>
-            <i class='fa fa-search'></i>
-          </span>
-
-          <input
-            type='text'
-            id='filter-q'
-            class='form-control'
-            title='Enter search terms'
-          />
-        </div><!-- input-group -->
-      </div><!-- panel-heading -->
-
-      <div id='users' class='list-group'>
-        <span class='list-group-item disabled'>
-          <i class='fa fa-spinner fa-spin'></i>
-          Loading...
-        </span><!-- list-group-item -->
-      </div><!-- list-group -->
-    </div><!-- panel -->
-  </div><!-- col-md-8 -->
+              <input
+                type='text'
+                id='filter-q'
+                class='form-control'
+                title='Enter search terms'
+              />
+            </div><!-- input-group -->
+          </div><!-- panel-heading -->
+
+          <div id='users' class='list-group'>
+            <span class='list-group-item disabled'>
+              <i class='fa fa-spinner fa-spin'></i>
+              Loading...
+            </span><!-- list-group-item -->
+          </div><!-- list-group -->
+        </div><!-- panel -->
+      </div><!-- #tab-pane-users -->
+
+      <div id='tab-pane-settings' class='tab-pane' role='tabpanel'>
+        <div class='panel panel-default'>
+          <div class='panel-body'>
+            <p>
+              TODO: settings
+            </p>
+          </div><!-- panel-body -->
+        </div><!-- panel -->
+      </div><!-- #tab-pane-settings -->
+    </div><!-- tab-content -->
+  </div><!-- col-md-10 -->
 </div><!-- container -->
 
 <div id='add-dialog' class='modal fade' role='dialog'>
diff --git a/src/guff/views/html/test/auth.cr b/src/guff/views/html/test/auth.cr
index 528b652..e30a4a2 100644
--- a/src/guff/views/html/test/auth.cr
+++ b/src/guff/views/html/test/auth.cr
@@ -18,7 +18,23 @@ class Guff::TestAuthHTMLView
       >
         %{name}
       </option>
-    "
+    ",
+
+    tab: "
+      <li role='presentation' class='%{css}'>
+        <a
+          id='tab-%{id}'
+          href='#tab-pane-%{id}'
+          title='%{text}'
+          aria-controls='tab-pane-%{id}'
+          role='tab'
+          data-toggle='tab'
+        >
+          <i class='fa %{icon}'></i>
+          %{name}
+        </a>
+      </li>
+    ",
   })
 
   def self.run(models, context : HTTP::Server::Context)
@@ -52,5 +68,15 @@ class Guff::TestAuthHTMLView
     }.join
   end
 
+  def get_tabs
+    @models.tab.get_tabs.map { |row|
+      TEMPLATES[:tab].run(row.merge({
+        "css":  row["css"]? || "",
+        "name": h(row["name"]),
+        "text": h(row["text"]),
+      }))
+    }.join
+  end
+
   ECR.def_to_s("./src/guff/views/ecrs/test/auth.ecr")
 end