Add components for the basic fields (text, textarea, integer and float)

addon/components/cf-field.js

@@ -0,0 +1,32 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { inject as service } from "@ember/service";
+import layout from "../templates/components/cf-field";
+
+/**
+ * @class CfFieldComponent
+ */
+export default Component.extend({
+  layout,
+  classNames: ["uk-margin"],
+
+  fieldStore: service(),
+
+  /**
+   * @argument {Object} question
+   */
+  question: null,
+
+  /**
+   * @argument {Object} document
+   */
+  document: null,
+
+  /**
+   * @property {Field} field
+   * @accessor
+   */
+  field: computed("question.slug", "document.id", function() {
+    return this.fieldStore.find(this.question, this.document);
+  }).readOnly()
+});

addon/components/cf-field/input.js

@@ -0,0 +1,25 @@
+import Component from "@ember/component";
+import { computed, get } from "@ember/object";
+import layout from "../../templates/components/cf-field/input";
+
+/**
+ * Component for wrapping the input components
+ *
+ * @class CfFieldInputComponent
+ */
+export default Component.extend({
+  layout,
+  classNames: ["uk-form-controls"],
+
+  /**
+   * The input component type
+   *
+   * @property {String} type
+   * @accessor
+   */
+  type: computed("field.question.__typename", function() {
+    const typename = get(this, "field.question.__typename");
+
+    return typename && typename.replace(/Question$/, "").toLowerCase();
+  }).readOnly()
+});

addon/components/cf-field/input/float.js

@@ -0,0 +1,21 @@
+import Component from "@ember/component";
+
+/**
+ * Input component for the float question type
+ *
+ * @class CfFieldInputFloatComponent
+ */
+export default Component.extend({
+  tagName: "input",
+  classNames: ["uk-input"],
+  attributeBindings: [
+    "type",
+    "step",
+    "field.id:name",
+    "field.answer.floatValue:value",
+    "field.question.floatMinValue:min",
+    "field.question.floatMaxValue:max"
+  ],
+  type: "number",
+  step: 0.001
+});

addon/components/cf-field/input/integer.js

@@ -0,0 +1,21 @@
+import Component from "@ember/component";
+
+/**
+ * Input component for the integer question type
+ *
+ * @class CfFieldInputIntegerComponent
+ */
+export default Component.extend({
+  tagName: "input",
+  classNames: ["uk-input"],
+  attributeBindings: [
+    "type",
+    "step",
+    "field.id:name",
+    "field.answer.integerValue:value",
+    "field.question.integerMinValue:min",
+    "field.question.integerMaxValue:max"
+  ],
+  type: "number",
+  step: 1
+});

addon/components/cf-field/input/text.js

@@ -0,0 +1,18 @@
+import Component from "@ember/component";
+
+/**
+ * Input component for the text question type
+ *
+ * @class CfFieldInputTextComponent
+ */
+export default Component.extend({
+  tagName: "input",
+  classNames: ["uk-input"],
+  attributeBindings: [
+    "type",
+    "field.id:name",
+    "field.answer.stringValue:value",
+    "field.question.textMaxLength:maxlength"
+  ],
+  type: "text"
+});

addon/components/cf-field/input/textarea.js

@@ -0,0 +1,16 @@
+import Component from "@ember/component";
+
+/**
+ * Input component for the textarea question type
+ *
+ * @class CfFieldInputTextareaComponent
+ */
+export default Component.extend({
+  tagName: "textarea",
+  classNames: ["uk-textarea"],
+  attributeBindings: [
+    "field.id:name",
+    "field.answer.stringValue:value",
+    "field.question.textareaMaxLength:maxlength"
+  ]
+});

addon/components/cf-field/label.js

@@ -0,0 +1,8 @@
+import Component from "@ember/component";
+import layout from "../../templates/components/cf-field/label";
+
+export default Component.extend({
+  layout,
+  tagName: "label",
+  classNames: ["uk-form-label"]
+});

addon/components/cf-form.js

@@ -0,0 +1,28 @@
+import Component from "@ember/component";
+import { inject as service } from "@ember/service";
+import { ComponentQueryManager } from "ember-apollo-client";
+import { task } from "ember-concurrency";
+import layout from "../templates/components/cf-form";
+
+import getDocumentQuery from "ember-caluma-form/gql/queries/get-document";
+
+export default Component.extend(ComponentQueryManager, {
+  layout,
+  tagName: "form",
+  apollo: service(),
+
+  willInsertElement() {
+    this.data.perform();
+  },
+
+  data: task(function*() {
+    return yield this.apollo.watchQuery(
+      {
+        query: getDocumentQuery,
+        variables: { id: this.documentId },
+        fetchPolicy: "network-only"
+      },
+      "allDocuments.edges"
+    );
+  })
+});

addon/gql/fragments/field-answer.graphql

@@ -0,0 +1,18 @@
+fragment FieldAnswer on Answer {
+  id
+  question {
+    slug
+  }
+  ... on StringAnswer {
+    stringValue: value
+  }
+  ... on IntegerAnswer {
+    integerValue: value
+  }
+  ... on FloatAnswer {
+    floatValue: value
+  }
+  ... on ListAnswer {
+    listValue: value
+  }
+}

addon/gql/fragments/field-question.graphql

@@ -0,0 +1,19 @@
+fragment FieldQuestion on Question {
+  slug
+  label
+  isRequired
+  ... on TextQuestion {
+    textMaxLength: maxLength
+  }
+  ... on TextareaQuestion {
+    textareaMaxLength: maxLength
+  }
+  ... on IntegerQuestion {
+    integerMinValue: minValue
+    integerMaxValue: maxValue
+  }
+  ... on FloatQuestion {
+    floatMinValue: minValue
+    floatMaxValue: maxValue
+  }
+}

addon/gql/fragments/form-document.graphql

@@ -0,0 +1,23 @@
+#import 'ember-caluma-form/gql/fragments/field-answer'
+#import 'ember-caluma-form/gql/fragments/field-question'
+
+fragment FormDocument on Document {
+  id
+  answers {
+    edges {
+      node {
+        ...FieldAnswer
+      }
+    }
+  }
+  form {
+    slug
+    questions {
+      edges {
+        node {
+          ...FieldQuestion
+        }
+      }
+    }
+  }
+}

addon/gql/queries/get-document.graphql

@@ -0,0 +1,11 @@
+#import 'ember-caluma-form/gql/fragments/form-document'
+
+query($id: ID!) {
+  allDocuments(id: $id) {
+    edges {
+      node {
+        ...FormDocument
+      }
+    }
+  }
+}

addon/templates/components/cf-field.hbs

@@ -0,0 +1,2 @@
+{{cf-field/label field=field}}
+{{cf-field/input field=field}}

addon/templates/components/cf-field/input.hbs

@@ -0,0 +1,3 @@
+{{#if type}}
+  {{component (concat "cf-field/input/" type) field=field}}
+{{/if}}

addon/templates/components/cf-field/label.hbs

@@ -0,0 +1 @@
+{{field.question.label}}

addon/templates/components/cf-form.hbs

@@ -0,0 +1,7 @@
+{{#let data.lastSuccessful.value.firstObject.node as |document|}}
+  {{#each document.form.questions.edges as |questionEdge|}}
+    {{#let questionEdge.node as |question|}}
+      {{cf-field question=question document=document}}
+    {{/let}}
+  {{/each}}
+{{/let}}

app/components/cf-field.js

@@ -0,0 +1 @@
+export { default } from "ember-caluma-form/components/cf-field";

app/components/cf-field/input.js

@@ -0,0 +1 @@
+export { default } from "ember-caluma-form/components/cf-field/input";

app/components/cf-field/input/float.js

@@ -0,0 +1 @@
+export { default } from "ember-caluma-form/components/cf-field/input/float";

app/components/cf-field/input/integer.js

@@ -0,0 +1 @@
+export { default } from "ember-caluma-form/components/cf-field/input/integer";

app/components/cf-field/input/text.js

@@ -0,0 +1 @@
+export { default } from "ember-caluma-form/components/cf-field/input/text";

app/components/cf-field/input/textarea.js

@@ -0,0 +1 @@
+export { default } from "ember-caluma-form/components/cf-field/input/textarea";

app/components/cf-field/label.js

@@ -0,0 +1 @@
+export { default } from "ember-caluma-form/components/cf-field/label";

app/components/cf-form.js

@@ -0,0 +1 @@
+export { default } from "ember-caluma-form/components/cf-form";

package.json

@@ -17,11 +17,17 @@
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
     "start": "ember serve",
+    "start-proxy": "ember serve --proxy http://localhost:8000",
     "test": "ember test",
     "test:all": "ember try:each"
   },
   "dependencies": {
-    "ember-cli-babel": "6.17.2"
+    "ember-apollo-client": "2.0.0-beta.1",
+    "ember-auto-import": "1.2.13",
+    "ember-caluma-utils": "anehx/ember-caluma-utils#fix-relationships",
+    "ember-cli-babel": "6.17.2",
+    "ember-cli-htmlbars": "3.0.1",
+    "ember-fetch": "5.1.1"
   },
   "devDependencies": {
     "@ember/optional-features": "0.7.0",
@@ -39,9 +45,10 @@
     "ember-cli-deploy-git": "1.3.3",
     "ember-cli-deploy-git-ci": "1.0.1",
     "ember-cli-eslint": "4.2.3",
-    "ember-cli-htmlbars": "3.0.1",
     "ember-cli-htmlbars-inline-precompile": "1.0.5",
     "ember-cli-inject-live-reload": "2.0.1",
+    "ember-cli-mirage": "0.4.9",
+    "ember-cli-sass": "8.0.1",
     "ember-cli-sri": "2.1.1",
     "ember-cli-template-lint": "1.0.0-beta.2",
     "ember-cli-uglify": "2.1.0",
@@ -54,13 +61,16 @@
     "ember-source": "3.5.0",
     "ember-source-channel-url": "1.1.0",
     "ember-try": "1.1.0",
+    "ember-uikit": "0.7.1",
     "eslint-config-prettier": "3.1.0",
     "eslint-plugin-ember": "5.2.0",
     "eslint-plugin-node": "7.0.1",
     "eslint-plugin-prettier": "2.6.0",
+    "graphql-tag": "2.10.0",
     "loader.js": "4.7.0",
     "prettier": "1.14.3",
-    "qunit-dom": "0.8.0"
+    "qunit-dom": "0.8.0",
+    "sass": "1.14.3"
   },
   "engines": {
     "node": "6.* || 8.* || >= 10.*"

tests/dummy/app/routes/index.js

@@ -0,0 +1,30 @@
+import Route from "@ember/routing/route";
+import { inject as service } from "@ember/service";
+import { get } from "@ember/object";
+import { RouteQueryManager } from "ember-apollo-client";
+import gql from "graphql-tag";
+
+export default Route.extend(RouteQueryManager, {
+  apollo: service(),
+
+  async model() {
+    const res = await this.apollo.watchQuery(
+      {
+        query: gql`
+          query {
+            allDocuments {
+              edges {
+                node {
+                  id
+                }
+              }
+            }
+          }
+        `
+      },
+      "allDocuments.edges"
+    );
+
+    return get(res, "firstObject.node");
+  }
+});

tests/dummy/app/services/apollo.js

@@ -0,0 +1,4 @@
+import ApolloService from "ember-apollo-client/services/apollo";
+import CalumaApolloServiceMixin from "ember-caluma-utils/mixins/caluma-apollo-service-mixin";
+
+export default ApolloService.extend(CalumaApolloServiceMixin, {});

tests/dummy/app/styles/app.scss

@@ -0,0 +1 @@
+@import "ember-uikit";

tests/dummy/config/environment.js

@@ -6,6 +6,9 @@ module.exports = function(environment) {
     environment,
     rootURL: "/",
     locationType: "auto",
+    apollo: {
+      apiURL: "/graphql"
+    },
     EmberENV: {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build

tests/dummy/mirage/config.js

@@ -0,0 +1,16 @@
+import config from "../config/environment";
+import graphqlHandler from "ember-caluma-utils/mirage-graphql";
+
+export default function() {
+  this.urlPrefix = ""; // make this `http://localhost:8080`, for example, if your API is on a different server
+  this.namespace = ""; // make this `/api`, for example, if your API is namespaced
+  this.timing = 400; // delay for each request, automatically set to 0 during testing
+
+  this.post(config.apollo.apiURL, graphqlHandler(this), 200);
+
+  if (config.environment !== "production") {
+    this.get("/versions.json", {}, 200);
+  }
+
+  this.passthrough();
+}