Refactorings and gui improvements

app/assets/stylesheets/layout.scss

@@ -65,4 +65,74 @@
 
 .highlight-when-nonempty:not([value=""]) {
   @extend .border-primary
+}
+
+@mixin details-icon($color) {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(#{$color})" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>');
+  background-size: cover;
+}
+
+.page_nav nav ul {
+  padding-left: 0;
+  list-style-type: none;
+  line-height: 2rem;
+
+  a {
+    color: var(--bs-text);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  ul {
+    // padding-left: 1.5rem;
+  }
+}
+
+
+summary,
+summary a {
+  font-size: 1rem;
+  font-style: normal;
+}
+
+summary {
+  display: flex;
+  line-height: 2rem;
+}
+
+summary::before {
+  @include details-icon(to-rgb(map-get($theme-colors, "dark")));
+  content: '';
+  float: inline-end;
+  width: 0.7rem;
+  height: 1rem;
+  margin-top: 0.5rem;
+  margin-right: 6px;
+  // background: url('chevron-right.svg');
+  // background-size: cover;
+  margin-left: 0;
+  transition: 0.2s;
+}
+
+@include color-mode(dark) {
+  summary::before {
+    @include details-icon(to-rgb(map-get($theme-colors, "light")));
+    // content: '';
+    // float: inline-end;
+    // width: 0.7rem;
+    // height: 1rem;
+    // margin-top: 0.5rem;
+    // margin-right: 6px;
+    // // background: url('chevron-right.svg');
+    // // background-size: cover;
+    // margin-left: 0;
+    // transition: 0.2s;
+  }
+}
+
+details[open]>summary::before {
+  transform: rotate(90deg);
 }

app/controllers/checks_controller.rb

@@ -7,7 +7,7 @@ class ChecksController < ApplicationController
 
   # GET /checks or /checks.json
   def index
-    @pagy, @checks = pagy(Check.filter_by(filter_params).order(:external_number))
+    @pagy, @checks = pagy(Check.filter_by(filter_params).order(:external_number_1, :external_number_2, :external_number_3))
   end
 
   # GET /checks/1 or /checks/1.json
@@ -69,7 +69,7 @@ class ChecksController < ApplicationController
   end
 
   def filter_params
-    @filter_params ||= params.permit(filter: [ :s, priority: [], conformity_level: [], standard_ids: [], principle_id: [], target_disabilities: []])[:filter] || {}
+    @filter_params ||= params.permit(filter: [ :s, priority: [], conformity_level: [], standard_ids: [], principle_id: [], target_disabilities: [] ])[:filter] || {}
   end
 
   private

app/controllers/elements_controller.rb

@@ -58,7 +58,7 @@ class ElementsController < ApplicationController
   # DELETE /elements/1
   def destroy
     @element.destroy!
-    redirect_to elements_url, notice: "Element was successfully destroyed.", status: :see_other
+    redirect_to page_elements_url(@element.page), notice: "Element was successfully destroyed.", status: :see_other
   end
 
   private

app/controllers/pages_controller.rb

@@ -44,7 +44,7 @@ class PagesController < ApplicationController
   # DELETE /pages/1
   def destroy
     @page.destroy!
-    redirect_to pages_url, notice: "Page was successfully destroyed.", status: :see_other
+    redirect_to report_pages_url(@page.report), notice: "Page was successfully destroyed.", status: :see_other
   end
 
   private

app/controllers/success_criteria_controller.rb

@@ -60,7 +60,7 @@ class SuccessCriteriaController < ApplicationController
     @success_criterion.destroy!
     respond_to do |format|
       format.html do
-        redirect_to success_criteria_url, notice: "Erfolgskriterium was successfully destroyed.", status: :see_other
+        redirect_to element_success_criteria_url(@success_criterion.element), notice: "Erfolgskriterium was successfully destroyed.", status: :see_other
       end
       format.turbo_stream
     end

app/helpers/application_helper.rb

@@ -24,4 +24,8 @@ module ApplicationHelper
 
     yield(value)
   end
+
+  def current_page_displayed(page)
+    @current_page&.id == page.id ? "open" : nil
+  end
 end

app/javascript/controllers/unsaved_changes_controller.js

@@ -7,18 +7,21 @@ export default class extends Controller {
   static targets = ["cancel"]
 
   initialState = null
+  isSubmitted = false
 
   connect() {
+    console.log("connect unsaved-changes")
     this.initialState = this.formState()
-    console.log(this.cancelTargets)
+
+    console.log("usaved-changes connect ", this.cancelTargets)
 
     window.addEventListener("beforeunload", (event) => this.leavingPage(event))
     document.addEventListener('turbo:before-visit', (e) => this.leavingPage(e))
-    this.element.addEventListener("submit", (_) => this.initialState = null)
-    this.cancelTargets.forEach(element => {
-      console.log(element)
-      element.addEventListener("onclick", (_) => this.initialState = null)
-    });
+    this.element.addEventListener("submit", (_) => this.isSubmitted = true)
+    // this.cancelTargets.forEach(element => {
+    //   console.log(element)
+    //   element.addEventListener("onclick", (_) => this.reset())
+    // });
   }
 
   formState() {
@@ -27,21 +30,23 @@ export default class extends Controller {
       .sort(x => x[0]))
   }
 
+  reset() {
+    console.log("reset")
+    this.initialState = this.formState()
+  }
+
+  hasChanged() {
+    console.log("hasChanged result", this.initialState != this.formState())
+    return this.formState() != this.initialState
+  }
+
   leavingPage(event) {
     console.log(event.type)
-    if (this.initialState == null || this.initialState == this.formState()) {
+    if (this.isSubmitted || !this.hasChanged()) {
       return
     }
-    if (event.type == "turbo:before-visit") {
-      if (!window.confirm(LEAVE_ALERT)) {
-        event.preventDefault()
-      } else {
-        this.initialState = null
-      }
-    } else {
-      this.initialState = null
-      event.returnValue = LEAVE_ALERT;
-      return event.returnValue;
+    if (!window.confirm(LEAVE_ALERT)) {
+      event.preventDefault()
     }
   }
 }

app/models/check.rb

@@ -76,7 +76,7 @@ class Check < ApplicationRecord
         relation = relation.joins(:standards).where(standards: { id: value })
       when "target_disabilities"
         cond = String.new
-        value.intersection(%w(auditory visual physical cognitive)).each_with_index do |v, i|
+        value.intersection(%w[auditory visual physical cognitive]).each_with_index do |v, i|
           if i == 0
             cond << "checks.#{v} = 1"
           else
@@ -112,10 +112,10 @@ class Check < ApplicationRecord
   end
 
   def display_applicabilities
-    %i[applicable_to_analogue 
-       applicable_to_app 
-       applicable_to_document 
-       applicable_to_non_web 
+    %i[applicable_to_analogue
+       applicable_to_app
+       applicable_to_document
+       applicable_to_non_web
        applicable_to_web].select { |a| send(:"#{a}?") }
                          .map { |a| I18n.t("applicability.#{a}") }
                          .sort_by(&:downcase)
@@ -123,6 +123,10 @@ class Check < ApplicationRecord
   end
 
   def display_label
-    [external_number, name_de].compact_blank.join(" ")
+    [ external_number, name_de ].compact_blank.join(" ")
+  end
+
+  def external_number
+    [ external_number_1, external_number_2, external_number_3 ].compact_blank.join(".")
   end
 end

app/models/checklist_entry.rb

@@ -5,7 +5,6 @@ class ChecklistEntry < ApplicationRecord
   belongs_to :check
 
   before_validation :set_position
-  before_create :update_positions
   before_update :update_positions, if: :position_changed?
 
   def set_position

app/models/element.rb

@@ -18,7 +18,7 @@ class Element < ApplicationRecord
   def level
     return nil
     return nil unless success_criteria.all(&:result)
-
+    element
     min_failed = success_criteria.select(&:failed?).map(&:level).min
     possible_levels = success_criteria.select(&:passed?).map(&:level).uniq
 
@@ -37,4 +37,8 @@ class Element < ApplicationRecord
     Rails.logger.debug("element: position #{position}")
     self.position ||= (page.elements.pluck(:position).max || 0) + 1
   end
+
+  def number
+    "#{page.position}.#{position}"
+  end
 end

app/views/checklist_entries/_form.html.erb

@@ -3,7 +3,7 @@
   <%= link_to "Abbrechen", checklist_entry.persisted? ? checklist_entry : checklist_entry.checklist, class: "btn btn-outline-secondary float-end", data: { turbo_frame: "checklist_entries" } %>
   <%= form.submit class: "btn btn-secondary float-end me-2" %>
   <%= form.hidden_field :checklist_id %>
-  <%= form.collection_select :check_id, Check.all.order(:external_number), :id, :display_label %>
+  <%= form.collection_select :check_id, Check.all.order(:external_number_1, :external_number_2, :external_number_3), :id, :display_label %>
   <%# form.number_field :position %>
 <% end %>
 </div>

app/views/checklists/_form.html.erb_

@@ -1,5 +0,0 @@
-<%= bootstrap_form_with(model: checklist, data: { controller: "unsaved-changes" }) do |form| %>
-  <%= form.text_field :name %>
-  <%= form.rich_text_area :description_html, rows: 12 %>
-  <%= form.submit %>
-<% end %>

app/views/checklists/_form.html.slim

@@ -1,5 +1,5 @@
 = bootstrap_form_with(model: checklist, data: { controller: "unsaved-changes" }) do |form|
   = form.text_field :name
   = form.rich_text_area :description_html, rows: 12
-  = form.collection_check_boxes :check_ids, Check.all.order(:external_number), :id, :display_label
+  = form.collection_check_boxes :check_ids, Check.all.order(:external_number_1, :external_number_2, :external_number_3), :id, :display_label
   = form.submit

app/views/checks/_form.html.slim

@@ -18,8 +18,17 @@
       .col-md-2
         = form.check_box d, label: t("applicability.#{d}").capitalize
   
-  h2 Richtlinie
-  = form.text_field :external_number
+  h2 Erfolgskriterium
+  .d-flex.justify-content-start
+    div style="width:60px"
+      = form.number_field :external_number_1, hide_label: true
+    div.px-1.mt-3 style="" = "."
+    div style="width:60px"
+      = form.number_field :external_number_2, hide_label: true
+    div.px-1.mt-3 style="" = "."
+    div style="width:60px"
+      = form.number_field :external_number_3, hide_label: true
+
   = form.text_field :external_url
   = form.select :conformity_level, Check.conformity_levels.keys, include_blank: true
   = multilang_form_field(form, :conformity_notice, as: :rich_text_area)

app/views/elements/_element.html.erb

@@ -1,4 +1,5 @@
 <div id="<%= dom_id element %>" class="mb-5">
+  <a id="<%= dom_id(element, :scroll) %>"></a>
   <%= turbo_frame_tag dom_id(element, :frame) do %>
     <div class="d-flex">
       <h2 class="h4">

app/views/elements/_new_success_criterion_button.html.erb

@@ -1,3 +1,3 @@
-<%= link_to "#{tag.i(class: "bi bi-plus-lg")} Neue Checkliste".html_safe, new_from_checklist_element_success_criteria_path(element), class: "btn btn-primary" %>
+<%= link_to "#{tag.i(class: "bi bi-plus-lg")} Checkliste".html_safe, new_from_checklist_element_success_criteria_path(element), class: "btn btn-primary" %>
 
-<%= link_to "#{tag.i(class: "bi bi-plus-lg")} Neues Erfolgskriterium".html_safe, new_element_success_criterion_path(element), class: "btn btn-primary" %>
+<%= link_to "#{tag.i(class: "bi bi-plus-lg")} Erfolgskriterium".html_safe, new_element_success_criterion_path(element), class: "btn btn-secondary" %>

app/views/elements/create.turbo_stream.erb

@@ -1,2 +0,0 @@
-<%= turbo_stream.update "new_element_frame", partial: "pages/new_element_button", locals: { page: @element.page } %>
-<%= turbo_stream.append "element_list", @element %>

app/views/elements/create.turbo_stream.slim

@@ -0,0 +1,5 @@
+= turbo_stream.update "new_element_frame", partial: "pages/new_element_button", locals: { page: @element.page }
+= turbo_stream.append "element_list", @element
+= turbo_stream.append dom_id(@element.page, :page_nav_elements) do 
+  i.bi.bi-boxes.me-1
+  = link_to("#{@element.number} #{@element.title}", "##{dom_id(@element)}", data: { "turbo": false })

app/views/elements/index.html.erb

@@ -5,33 +5,24 @@
     <tr>
       <th><%= Element.human_attribute_name(:id) %></th>
       
-        <th><%= Element.human_attribute_name(:report_id) %></th>
-      
-        <th><%= Element.human_attribute_name(:path) %></th>
+        <th><%= Element.human_attribute_name(:page_id) %></th>
       
         <th><%= Element.human_attribute_name(:title) %></th>
-      
-        <th><%= Element.human_attribute_name(:description_html) %></th>
-      
   </thead>
   <tbody>
     <% @elements.each do |element| %>
       <tr>
         <td><%= link_to(element.id, url_for(element)) %></td>
         
-          <td><%= link_to(element.report_id, url_for(element)) %></td>
-        
-          <td><%= link_to(element.path, url_for(element)) %></td>
+          <td><%= link_to(element.page_id, url_for(element)) %></td>
         
           <td><%= link_to(element.title, url_for(element)) %></td>
         
-          <td><%= link_to(truncate(element.description_html&.to_plain_text), url_for(element)) %></td>
-        
       </tr>
     <% end %>
   </tbody>
 </table>
 
 <div class="action-row">
-  <%= link_to t("scaffold.link_new", model: Element.model_name.human), new_element_path %>
+  <%= link_to t("scaffold.link_new", model: Element.model_name.human), new_page_element_path(@page) %>
 </div>

app/views/layouts/_application.html.erb

@@ -0,0 +1,30 @@
+<!doctype html>
+<html data-bs-theme="<%= cookies[:"modeTheme"] || "light" %>" data-controller="set-theme">
+  <head>
+    <title>a11ydive</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
+  </head>
+
+  <body>
+    <%= render partial: "layouts/navigation" %>
+    <div class="container-fluid">
+      <div class="row">
+        <%= render partial: "layouts/sidebar" %>
+        <main class="col ps-md-2 pt-2 <%= "border-start" if sidebar? %>">
+          <div class="container-fluid">
+            <div id="main-content" data-controller="rich-text-link-targets">
+              <%= yield %>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+    <footer class="container-fluid mt-auto border-top"><%= Rails.configuration.build_version && "Version: #{Rails.configuration.build_version}" %>
+  </body>
+</html>

app/views/layouts/application.html.slim

@@ -13,8 +13,7 @@ html data-bs-theme="#{cookies[:"modeTheme"] || "light"}" data-controller="set-th
       .row
         = render partial: "layouts/sidebar"
         main.col.ps-md-2.pt-2
-          .container-fluid
-            #main-content[data-controller="rich-text-link-targets"]
-              = yield
+          #main-content[data-controller="rich-text-link-targets"]
+            = yield
     footer.container-fluid.mt-auto.border-top
       = Rails.configuration.build_version && "Version: #{Rails.configuration.build_version}"

app/views/pages/_form.html.slim

@@ -1,4 +1,4 @@
-= bootstrap_form_with(model: [:report, page], data: { "turbo-frame": :nav }) do |form|
+= bootstrap_form_with(model: page.persisted? ? page :  [:report, page], data: { "turbo-frame": :_top }) do |form|
   = form.text_field :path
   = form.text_field :url
   = form.submit

app/views/pages/_notes.html.slim

@@ -1,3 +1,4 @@
-= bootstrap_form_with(model: page) do |form|
-  = form.text_area :notes, rows: [(page.notes&.count("\n") || 0) + 1, 10].max, placeholder: "Hier kannst du Notizen speichern. \n\nJeder Pfad hat seine eigenen Notizen.", hide_label: true
-  = form.submit "Speichern"
+.mt-5
+  = bootstrap_form_with(model: page) do |form|
+    = form.text_area :notes, rows: [(page.notes&.count("\n") || 0) + 1, 10].max, placeholder: "Hier kannst du Notizen speichern. \n\nJeder Pfad hat seine eigenen Notizen.", hide_label: true
+    = form.submit "Speichern"

app/views/pages/_page.html.erb

@@ -1,6 +1,6 @@
 <div id="<%= dom_id page %>" class="mb-3">
   <h2>
-    <i class="bi bi-file"></i>
+    <i class="bi bi-file-earmark-check"></i>
     <%= page.position %> <%= page.path %></h2>
     <p>url: <%= page.url %></p>
   <div id="element_list">

app/views/pages/show.html.slim

@@ -1,8 +1,11 @@
 h1
   = t("scaffold.pagetitle_show", model: @page.class.model_name.human)
+
 = render @page
+
 = turbo_frame_tag(dom_id(@page, :notes)) do 
   = render partial: "pages/notes", locals: { page: @page }
+
 .action-row
   = link_to t("scaffold.link_edit", model: @page.model_name.human), edit_page_path(@page)
   = link_to t("scaffold.link_index", model: @page.model_name.human(count: 2)), report_pages_path(@page.report)

app/views/reports/_new_page_button.html.erb

@@ -1 +1 @@
-<%= link_to "#{tag.i(class: "bi bi-plus-lg")} Neuer Pfad".html_safe, new_report_page_path(report), class: "btn btn-primary mb-3" %>
+<%= link_to "#{tag.i(class: "bi bi-plus-lg")}".html_safe, new_report_page_path(report), class: "btn btn-primary" %>

app/views/reports/_page_nav.html.slim

@@ -0,0 +1,26 @@
+div id=dom_id(report, :page_nav)
+  - if report.pages.any?
+    details open=true 
+      summary Struktur
+      nav
+        ul
+          - report.pages.each do |page|
+            - is_current = current_page == page
+            li
+              details open=current_page_displayed(page) class=""
+                summary
+                  i.bi.me-1 class="bi-file-earmark-check#{is_current ? "-fill" : "" }"
+                  - if is_current
+                    =< "#{page.position} #{page.path}" 
+                  - else
+                    =< link_to("#{page.position} #{page.path}", report_path(report, page_id: page.id), class: "#{is_current ? " active text-decoration-underline" : nil  }", data: { "turbo-frame": :_top })
+                ul id=dom_id(page, :page_nav_elements)
+                  - page.elements.each do |element| 
+                    li 
+                      i.bi.bi-boxes.me-1
+                      - if current_page == page
+                        =< link_to("#{element.number} #{element.title}", "##{dom_id(element)}", data: { "turbo": false })
+                      - else 
+                        =< link_to("#{element.number} #{element.title}", report_path(report, page_id: page.id, anchor: dom_id(element)), data: { "turbo": false })
+  = turbo_frame_tag "new_page_frame" do
+    = render partial: "reports/new_page_button", locals: { report: report }

app/views/reports/show.html.slim

@@ -1,33 +1,27 @@
-small.float-end
-  |  Erstellt am 
-  = l(@report.created_at, format: :short)
-  | , zuletzt bearbeitet am 
-  = l(@report.updated_at, format: :short)
+div
+  small.float-end
+    |  Erstellt am 
+    = l(@report.created_at, format: :short)
+    | , zuletzt bearbeitet am 
+    = l(@report.updated_at, format: :short)
 h1
   i.bi.bi-journal-text.me-2
   = @report.name
 - if @report.comment
   .smb-4.lead.mb-3
     = @report.comment
-= turbo_frame_tag "nav" do
-  .row 
-    .col-lg-3.col-md-6.col-sm-12
-      nav.nav.nav-pills.flex-column.mb-3#page_list
-        - @report.pages.each do |page|
-          /= link_to(report_path(@report, page_id: page.id), class: "nav-link#{@current_page&.id == page.id ? " active" : nil  }", data: { "turbo-action": :advance }) do
-            i.bi.bi-file
-            =< "#{page.position} #{page.path}"
-          = link_to(page.path, report_path(@report, page_id: page.id), class: "nav-link#{@current_page&.id == page.id ? " active" : nil  }", data: { "turbo-action": :advance })
-      = turbo_frame_tag "new_page_frame" do
-        = render partial: "reports/new_page_button", locals: { report: @report }
+.row 
+  .col-lg-3.col-md-6.col-sm-12
+    .page_nav.sticky-top
+      = render partial: "reports/page_nav", locals: { report: @report, current_page: @current_page }
       - if @current_page
         = turbo_frame_tag(dom_id(@current_page, :notes)) do 
           = render partial: "pages/notes", locals: { page: @current_page }
-    .col-lg-9.col-md-6.col-sm-12
-      - if @current_page
-          = render @current_page
-      - else 
-        'Gehen Sie weiter, hier gibt es nichts zu sehen.
+  .col-lg-9.col-md-6.col-sm-12
+    - if @current_page
+        = render @current_page
+    - else 
+      'Gehen Sie weiter, hier gibt es nichts zu sehen.
 .action-row
   = link_to report_path(@report, format: :pdf), class: "btn btn-secondary", target: "_blank" do
     i.bi.bi-filetype-pdf

app/views/success_criteria/_form.html.erb

@@ -4,7 +4,7 @@
   
   <div class="collapse show" id="collapseSuccessCriterion_<%= success_criterion.id %>">
     <div class="card-body">
-      <%= bootstrap_form_with(model: success_criterion.persisted? ? success_criterion : [:element, success_criterion]) do |form| %>
+      <%= bootstrap_form_with(model: success_criterion.persisted? ? success_criterion : [:element, success_criterion], data: { controller: "unsaved-changes" }) do |form| %>
         <div class="row">
           <div class="col">
             <div class="btn-group" role="group" aria-label="Resultat">

app/views/success_criteria/new.html.slim

@@ -3,7 +3,7 @@ h1
 = turbo_frame_tag dom_id(@success_criterion.element, "new_success_criterion_frame") do
   .border.border-info.p-3
     = bootstrap_form_with(model: @success_criterion.persisted? ? @success_criterion : [:element, @success_criterion]) do |form|
-      = form.collection_select :check_id, Check.all.order(:external_number), :id, :display_label
+      = form.collection_select :check_id, Check.all.order(:external_number_1, :external_number_2, :external_number_3), :id, :display_label
       = form.submit class: "btn btn-warning"
       = link_to "Abbrechen", @success_criterion.persisted? ? @success_criterion : @success_criterion.element, class: "btn btn-outline-secondary"