fix(cf-navigation): auto-link empty form sections to first subsection (…

…#185) Also remove top-level question because it provided no real value and broke the styling
projectcaluma · May 1, 2019 · a50a442 · a50a442
1 parent abdf659
commit a50a442
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 34 deletions.
diff --git a/addon/components/cf-navigation-item.js b/addon/components/cf-navigation-item.js
@@ -1,10 +1,27 @@
 import Component from "@ember/component";
 import layout from "../templates/components/cf-navigation-item";
+import { computed } from "@ember/object";
 
 export default Component.extend({
   tagName: "",
   layout,
 
   section: null,
-  subSection: null
+  subSection: null,
+
+  _subSection: computed(
+    "subSection",
+    "field.childDocument.fields.[]",
+    function() {
+      if (
+        !this.get("subSection") &&
+        !(this.get("field.childDocument.fields") || []).some(
+          f => f.get("question.__typename") !== "FormQuestion"
+        )
+      ) {
+        return this.get("field.childDocument.fields.firstObject.question.slug");
+      }
+      return this.get("subSection");
+    }
+  )
 });
diff --git a/addon/templates/components/cf-navigation-item.hbs b/addon/templates/components/cf-navigation-item.hbs
@@ -1,5 +1,5 @@
 {{#if (not field.question.hidden)}}
-  {{#link-to (query-params section=section subSection=subSection)}}
+  {{#link-to (query-params section=section subSection=_subSection)}}
     <div class="uk-flex uk-flex-between uk-flex-middle">
       <div>{{label}}</div>
       <span

diff --git a/addon/templates/components/cf-navigation.hbs b/addon/templates/components/cf-navigation.hbs
@@ -5,39 +5,30 @@
     </div>
   {{else}}
     <div class="uk-width-1-1 uk-width-1-3@m">
-      <ul class="uk-tab uk-tab-left">
-        <li>
-          {{cf-navigation-item
-            field=field
-            label=rootDocument.raw.form.name
-            state=rootDocument.state
-          }}
-          <ul class="uk-tab uk-tab-left uk-margin-left uk-margin-remove-vertical">
-            {{#each fields as |field|}}
-              <li>
-                {{cf-navigation-item
-                  field=field
-                  section=field.question.slug
-                  label=field.question.label
-                  state=field.childDocument.state
+      <ul class="uk-tab uk-tab-left uk-margin-left uk-margin-remove-vertical">
+        {{#each fields as |field|}}
+          <li>
+            {{cf-navigation-item
+              field=field
+              section=field.question.slug
+              label=field.question.label
+              state=field.childDocument.state
+              }}
+            <ul class="uk-tab uk-tab-left uk-margin-left uk-margin-remove-vertical">
+              {{#each field.navSubFields as |subField|}}
+                <li>
+                  {{cf-navigation-item
+                    field=subField
+                    section=field.question.slug
+                    subSection=subField.question.slug
+                    label=subField.question.label
+                    state=subField.childDocument.state
                   }}
-                <ul class="uk-tab uk-tab-left uk-margin-left uk-margin-remove-vertical">
-                  {{#each field.navSubFields as |subField|}}
-                    <li>
-                      {{cf-navigation-item
-                        field=subField
-                        section=field.question.slug
-                        subSection=subField.question.slug
-                        label=subField.question.label
-                        state=subField.childDocument.state
-                      }}
-                    </li>
-                  {{/each}}
-                </ul>
-              </li>
-            {{/each}}
-          </ul>
-        </li>
+                </li>
+              {{/each}}
+            </ul>
+          </li>
+        {{/each}}
       </ul>
     </div>