Skip to content
Permalink
Browse files

feat: add table column display configuration (#237)

* feat: add table column display configuration

basic version of #236

* fix: rename selectColumnToDisplay to toggleColumnToDisplay
  • Loading branch information...
Yelinz authored and czosel committed May 14, 2019
1 parent 9627dec commit 88a1ae98f98e374dd095f88e24bad72ebc72e8ea
@@ -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(
{
@@ -169,7 +169,12 @@ 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;
@@ -280,7 +285,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")
})
};
},

@@ -430,6 +439,21 @@ export default Component.extend(ComponentQueryManager, {
this.set("linkSlug", false);

this.get("validateSlug").perform(this.prefix + value, changeset);
},

/*
* This function adds the selected slugs to the selectedColumnsToDisplay
* list if it isnt present, otherwise it will remove the slug.
*/
toggleColumnToDisplay(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]);
}
}
}
});
@@ -52,6 +52,14 @@ query FormEditorQuestion($slug: String!) {
... on TableQuestion {
rowForm {
slug
questions {
edges {
node {
slug
label
}
}
}
}
}
... on FormQuestion {
@@ -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}}
@@ -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 "toggleColumnToDisplay" 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")}}
@@ -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"

@@ -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"

0 comments on commit 88a1ae9

Please sign in to comment.
You can’t perform that action at this time.