feat: add table column display configuration

closes projectcaluma#236
Yelinz · May 14, 2019 · acc0869 · acc0869
1 parent 2f5a197
commit acc0869
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 6 deletions.
diff --git a/addon/components/cf-field/input/table.js b/addon/components/cf-field/input/table.js
@@ -4,6 +4,7 @@ import { task, all } from "ember-concurrency";
 import saveDocumentMutation from "ember-caluma/gql/mutations/save-document";
 import { inject as service } from "@ember/service";
 import { ComponentQueryManager } from "ember-apollo-client";
+import { computed } from "@ember/object";
 
 /**
  * @babel/polyfill@^7.4.0 is supposed to include "flat", but that doesn't work of us -
@@ -28,6 +29,18 @@ export default Component.extend(ComponentQueryManager, {
   showModal: false,
   documentToEdit: null,
 
+  columnHeaders: computed(
+    "field.question.{rowForm.questions.edges.@each,meta.columnsToDisplay.[]}",
+    function() {
+      if (this.get("field.question.meta.columnsToDisplay.length")) {
+        return this.get("field.question.rowForm.questions.edges").filter(n =>
+          this.get("field.question.meta.columnsToDisplay").includes(n.node.slug)
+        );
+      }
+      return this.get("field.question.rowForm.questions.edges").slice(0, 4);
+    }
+  ),
+
   addRow: task(function*() {
     const newDocumentRaw = yield this.get("apollo").mutate(
       {

diff --git a/addon/components/cfb-form-editor/question.js b/addon/components/cfb-form-editor/question.js
@@ -169,14 +169,20 @@ export default Component.extend(ComponentQueryManager, {
     const model = this.get("data.lastSuccessful.value.firstObject.node");
     // flatten attributes until nested property support landed in ember-validated-form
     if (model && model.rowForm) {
+      model.rowsToDisplay = model.rowForm.questions.edges.map(n => n.node);
       model.rowForm = model.rowForm.slug;
+      model.selectedColumnsToDisplay = [];
+      if (model.meta && model.meta.columnsToDisplay) {
+        model.selectedColumnsToDisplay = model.meta.columnsToDisplay;
+      }
     }
     if (model && model.subForm) {
       model.subForm = model.subForm.slug;
     }
     if (model && model.meta && model.meta.hideLabel) {
       model.hideLabel = model.meta.hideLabel;
     }
+    console.log(model);
     return model;
   }),
 
@@ -270,7 +276,11 @@ export default Component.extend(ComponentQueryManager, {
   _getTableQuestionInput(changeset) {
     return {
       isRequired: changeset.get("isRequired"),
-      rowForm: changeset.get("rowForm")
+      rowForm: changeset.get("rowForm"),
+      meta: JSON.stringify({
+        widgetOverride: changeset.get("widgetOverride"),
+        columnsToDisplay: this.get("model.selectedColumnsToDisplay")
+      })
     };
   },
 
@@ -420,6 +430,17 @@ export default Component.extend(ComponentQueryManager, {
       this.set("linkSlug", false);
 
       this.get("validateSlug").perform(this.prefix + value, changeset);
+    },
+
+    selectColumnToDisplay(value) {
+      let arr = this.get("model.selectedColumnsToDisplay");
+      let idx = arr.indexOf(value);
+      if (idx >= 0) {
+        arr.splice(idx, 1);
+        this.set("model.selectedColumnsToDisplay", arr);
+      } else {
+        this.set("model.selectedColumnsToDisplay", [...arr, value]);
+      }
     }
   }
 });
diff --git a/addon/gql/queries/form-editor-question.graphql b/addon/gql/queries/form-editor-question.graphql
@@ -52,6 +52,14 @@ query FormEditorQuestion($slug: String!) {
         ... on TableQuestion {
           rowForm {
             slug
+            questions {
+              edges {
+                node {
+                  slug
+                  label
+                }
+              }
+            }
           }
         }
         ... on FormQuestion {

diff --git a/addon/templates/components/cf-field/input/table.hbs b/addon/templates/components/cf-field/input/table.hbs
@@ -2,7 +2,7 @@
   <table class="uk-table">
     <thead>
       <tr>
-        {{#each (take 4 questions) as |edge|}}
+        {{#each columnHeaders as |edge|}}
           <th>{{edge.node.label}}</th>
         {{/each}}
         <th></th>
@@ -11,9 +11,17 @@
     <tbody>
       {{#each field.answer.rowDocuments as |document|}}
         <tr>
-          {{#each (take 4 document.fields) as |field|}}
-            <td>{{cf-field-value field=field}}</td>
-          {{/each}}
+          {{#if field.question.meta.columnsToDisplay.length}}
+            {{#each document.fields as |answerField|}}
+              {{#if (contains answerField.answer.question.slug field.question.meta.columnsToDisplay)}}
+                <td>{{cf-field-value field=answerField}}</td>
+              {{/if}}
+            {{/each}}
+          {{else}}
+            {{#each (take 4 document.fields) as |field|}}
+              <td>{{cf-field-value field=field}}</td>
+            {{/each}}
+          {{/if}}
           <td class="uk-text-right">
             <button type="button" data-test-edit-row class="uk-icon-button" uk-icon="pencil" {{action "editRow" document}}></button>
             <button type="button" data-test-delete-row class="uk-icon-button" uk-icon="trash" {{action (perform deleteRow) document}}></button>
@@ -40,4 +48,4 @@
       }}
     </p>
   {{/uk-modal}}
-{{/with}}
+{{/with}}
diff --git a/addon/templates/components/cfb-form-editor/question.hbs b/addon/templates/components/cfb-form-editor/question.hbs
@@ -221,6 +221,22 @@
           includeBlank=(t "caluma.form-builder.question.chooseRowForm")
           label=(t "caluma.form-builder.question.rowForm")
         }}
+
+        {{#f.input name="columnsToDisplay" label=(t "caluma.form-builder.question.columnsToDisplay") as |fi|}}
+          {{#each model.rowsToDisplay as |row|}}
+            <label class="cf-checkbox_label">
+              <input
+                type="checkbox"
+                value={{row.slug}}
+                checked={{contains row.slug model.selectedColumnsToDisplay}}
+                onclick={{action "selectColumnToDisplay" row.slug}}
+                onfocusout={{fi.setDirty}}
+                class="uk-checkbox uk-margin-small-right"
+              >
+              {{row.label}}
+            </label>
+          {{/each}}
+        {{/f.input}}
       {{/if}}
 
       {{#if (eq f.model.__typename "FormQuestion")}}

diff --git a/translations/de-de.yaml b/translations/de-de.yaml
@@ -91,6 +91,7 @@ caluma:
       max-length: "Maximale Länge"
       rowForm: "Formular für Einträge"
       chooseRowForm: "-- bitte wählen --"
+      columnsToDisplay: "Spalten zur Anzeige auswählen"
 
       new: "Neue Frage"
 

diff --git a/translations/en-us.yaml b/translations/en-us.yaml
@@ -91,6 +91,7 @@ caluma:
       max-length: "Maximum length"
       rowForm: "Form to use for rows"
       chooseRowForm: "-- please choose --"
+      columnsToDisplay: "Select columns to be shown"
 
       new: "New question"