new page structure, amend table js plugin for frontend

resources/public/css/public.css

@@ -135,3 +135,49 @@ h1 {
 h2 {
     font-weight: bold;
 }
+
+.tbl-toolbar {
+    display: flex;
+    margin-bottom: .5rem;
+    padding-top: .2rem;
+    padding-right: .2rem;
+}
+
+.tbl-toolbar .row-info {
+    flex-grow: 99;
+}
+
+.tbl-toolbar .rows::before {
+    content: " (";
+}
+
+.tbl-toolbar .rows::after {
+    content: " Zeilen)";
+}
+
+.tbl-toolbar .search {
+    display: inline;
+    width: auto;
+}
+
+.tbl-toolbar button {
+    margin-left: .5rem;
+}
+
+.tbl-toolbar .prev::after {
+    content: " << ";
+}
+
+.tbl-toolbar .next::after {
+    content: " >> ";
+}
+
+table [data-sort="desc"]::after {
+    content: "⇩";
+    display: inline;
+}
+
+table [data-sort="asc"]::after {
+    content: "⇧";
+    diplay: inline;
+}

resources/public/js/scripts.js

@@ -99,7 +99,8 @@ document.addEventListener('DOMContentLoaded', function () {
             const btn = document.createElement('button')
             btn.classList.add('prev')
             btn.classList.add('pg-btn')
-            btn.innerText = 'Prev'
+            btn.classList.add('btn')
+            btn.classList.add('btn-light')
             return btn;
         }
 
@@ -107,7 +108,8 @@ document.addEventListener('DOMContentLoaded', function () {
             const btn = document.createElement('button')
             btn.classList.add('next')
             btn.classList.add('pg-btn')
-            btn.innerText = 'Next'
+            btn.classList.add('btn')
+            btn.classList.add('btn-light')
             return btn
         }
 
@@ -130,6 +132,7 @@ document.addEventListener('DOMContentLoaded', function () {
         function searchBox() {
             const input = document.createElement('input')
             input.classList.add('search')
+            input.classList.add('form-control')
             input.type = 'search'
             input.placeholder = 'search...'
             return input
@@ -268,6 +271,9 @@ document.addEventListener('DOMContentLoaded', function () {
         }
 
         document.querySelectorAll('table').forEach(function (tbl) {
+            if (tbl.classList.contains('no-sort')) {
+                return
+            }
             const ctx = addToolbar(tbl)
             changePage(ctx, 0)
             enableSorting(ctx)

src/wanijo/public/db.clj

@@ -61,14 +61,14 @@
       :coc
       (assoc :key coc-key)))
 
-(neo4j/defquery level
-  "MATCH (level:instance {uuid:{uuid}})
-   RETURN level")
-(defn level! [uuid]
-  (-> (neo4j/exec-query! level
+(neo4j/defquery instance
+  "MATCH (i:instance {uuid:{uuid}})
+   RETURN i")
+(defn instance! [uuid]
+  (-> (neo4j/exec-query! instance
                          {:uuid uuid})
       first
-      :level))
+      :i))
 
 (neo4j/defquery modules-with-comps
   "MATCH (level:instance {uuid:{level_uuid}}),
@@ -99,3 +99,22 @@
                           {:level_uuid "140962fb-f55e-45ab-87fc-680c012bd8dc"
                            :moduleschema_uuid (:module schema-uuids)
                            :compschema_uuid (:component schema-uuids)}))
+
+(neo4j/defquery modules-and-levels
+  "MATCH (role:instance {uuid:{role_uuid}}),
+         (lschema:schema {uuid:{levelschema_uuid}}),
+         (level:instance)-[:of]->(lschema),
+         (role)--(:link)--(level),
+         (mschema:schema {uuid:{moduleschema_uuid}}),
+         (module:instance)-[:of]->(mschema),
+         (level)--(:link)--(module)
+   RETURN module, level
+   ORDER BY level, module")
+(defn modules-and-levels! [role-uuid]
+  (neo4j/exec-query! modules-and-levels
+                     {:role_uuid role-uuid
+                      :moduleschema_uuid (:module schema-uuids)
+                      :levelschema_uuid (:level schema-uuids)}))
+(comment
+  (modules-and-levels! "d97628f4-477d-49d7-a1c1-2fd643a0ee65")
+  (instance! "d97628f4-477d-49d7-a1c1-2fd643a0ee65"))

src/wanijo/public/routes.clj

@@ -11,15 +11,26 @@
   (view-public/show-coc (db-public/coc! coc-key)
                         (db-public/roles-with-levels-of-coc! coc-key)))
 
-(defn show-modules [coc-key level-uuid]
-  (view-public/show-modules
+(defn show-level [coc-key level-uuid]
+  (view-public/show-level
    (db-public/coc! coc-key)
-   (db-public/level! level-uuid)
+   (db-public/instance! level-uuid)
    (db-public/modules-with-comps! level-uuid)))
 
+(defn show-role [coc-key role-uuid]
+  (view-public/show-role
+   (db-public/coc! coc-key)
+   (db-public/instance! role-uuid)
+   (db-public/modules-and-levels! role-uuid)))
+
 (defroutes routes
   (GET (register! :public-index "/public") [] (index))
-  (GET (register! :public-coc "/public/:coc") [coc] (show-coc coc))
-  (GET (register! :public-role-modules "/public/:coc/:level")
+  (GET (register! :public-coc "/public/:coc")
+       [coc]
+       (show-coc coc))
+  (GET (register! :public-level "/public/:coc/level/:level")
        [coc level]
-       (show-modules coc level)))
+       (show-level coc level))
+  (GET (register! :public-role "/public/:coc/role/:role")
+       [coc role]
+       (show-role coc role)))

src/wanijo/public/view.clj

@@ -22,7 +22,8 @@
     [:title title " - Moxie!"]
     (include-css "/css/bootstrap.min.css"
                  "/css/public.css")
-    (include-js "/js/bootstrap.min.js")]
+    (include-js "/js/bootstrap.min.js"
+                "/js/scripts.js")]
    [:body
     [:nav.navbar.navbar-expand-lg.sticky-top
      [:a.navbar-brand {:href (path :public-index)}
@@ -68,7 +69,7 @@
    [[:main.main
      [:h1 "CoC " (h (:name coc))]
      [:div.table-responsive
-      [:table.table
+      [:table.table.no-sort
        [:thead
         [:tr
          [:th "Rolle"]
@@ -80,28 +81,31 @@
           (list
            [:tr
             [:td {:rowspan (max 1 (count levels))}
-             (h (:name role))]
+             [:a {:href (path :public-role
+                              {:coc (:key coc)
+                               :role (:uuid role)})}
+              (h (:name role))]]
             [:td
-             [:a {:href (path :public-role-modules
+             [:a {:href (path :public-level
                               {:coc (:key coc)
                                :level (:uuid level)})}
               (h (:name level))]]]
            (for [level (rest levels)]
              [:tr
-              [:td [:a {:href (path :public-role-modules
+              [:td [:a {:href (path :public-level
                                     {:coc (:key coc)
                                      :level (:uuid level)})}
                     (h (:name level))]]])))]]]]
     (breadcrumb
      [:li.breadcrumb-item.active (h (:name coc))])]))
 
-(defn show-modules [coc level modules-with-comps]
+(defn show-level [coc level modules-with-comps]
   (layout
    (h (:name level))
    [[:main.main
      [:h1 "Erfahrungsstufe " (h (:name level))]
      [:div.table-responsive
-      [:table.table
+      [:table.table.no-sort
        [:thead
         [:tr
          [:th "Modul"]
@@ -124,3 +128,29 @@
                         {:coc (:key coc)})}
         (h (:name coc))]]
       [:li.breadcrumb-item.active (h (:name level))])]))
+
+(defn show-role [coc role modules-and-levels]
+  (layout
+   (h (:name role))
+   [[:main.main
+     [:h1 "Rolle " (h (:name role))]
+     [:div.table-responsive
+      [:table.table
+       [:thead
+        [:tr
+         [:th "Modul"]
+         [:th "Qualifikationsstufe"]]]
+       [:tbody
+        (for [{:keys [module level]} modules-and-levels]
+          [:tr
+           [:td (h (:name module))]
+           [:td
+            [:a {:href (path :public-level
+                             {:coc (:key coc)
+                              :level (:uuid level)})}
+             (h (:name level))]]])]]]]
+    (breadcrumb
+     [:li.breadcrumb-item
+      [:a {:href (path :public-coc {:coc (:key coc)})}
+       (h (:name coc))]]
+     [:li.breadcrumb-item.active (h (:name role))])]))