refactor(model-form): Glimmer Components

.eslintrc.js

@@ -2,15 +2,11 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module',
-    ecmaFeatures: {
-      legacyDecorators: true,
-    },
+    ecmaVersion: 'latest',
   },
-  plugins: ['ember'],
+  plugins: ['ember', '@typescript-eslint'],
   extends: [
     'eslint:recommended',
     'plugin:ember/recommended',
@@ -37,6 +33,15 @@ module.exports = {
     ],
   },
   overrides: [
+    // ts files
+    {
+      files: ['**/*.ts'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {},
+    },
     // node files
     {
       files: [
@@ -52,9 +57,6 @@ module.exports = {
         './.stylelintrc.js',
         './.stylelintrc.order.js',
       ],
-      parserOptions: {
-        sourceType: 'script',
-      },
       env: {
         browser: false,
         node: true,
@@ -72,5 +74,17 @@ module.exports = {
       files: ['tests/**/*-test.{js,ts}'],
       extends: ['plugin:qunit/recommended'],
     },
+    // js files // TODO: remove when fully over to ts
+    {
+      files: ['**/*.js'],
+      parser: 'babel-eslint',
+      parserOptions: {
+        ecmaVersion: 2018,
+        sourceType: 'module',
+        ecmaFeatures: {
+          legacyDecorators: true,
+        },
+      },
+    },
   ],
 };

app/components/advertisement-tool.hbs

@@ -3,7 +3,10 @@
     <div class='d-flex adv-row flex-column flex-wrap justify-content-center'>
       {{#each advertisements as |advertisement index|}}
         {{#if advertisement.links}}
-          <div class='advertisement-item advertisement-item--full col-auto'>
+          <div
+            class='advertisement-item advertisement-item--full col-auto'
+            data-test-advertisement-item
+          >
             {{#each advertisement.links as |link|}}
               <a
                 class='d-block text-primary'
@@ -22,6 +25,7 @@
             href={{advertisement.link}}
             title={{advertisement.title}}
             target='_blank'
+            data-test-advertisement-item
           >
             <img
               src={{advertisement.image}}

app/components/advertisement-tool.js

@@ -1,8 +1,8 @@
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
 
 export default Component.extend({
   classNames: ['advertisement-tool'],
   media: service(),
   advertisements: computed(
@@ -16,7 +16,7 @@
 
   // Don't forget to also increment the 'amountOfAdvertisements' variable in
   // styles/components/advertisement-tool.scss and the number of advertisements
-  // in tests/rendering/components/advertisement-tool-test.js
+  // in tests/integration/components/advertisement-tool-test.js
   advertisementItems: [
     {
       title: 'Qorting.nl',

app/components/md-editor.hbs

@@ -10,13 +10,14 @@
       @value={{@content}}
       class='form-control md-editor'
       rows='15'
+      data-test-md-editor-textarea
     />
   {{else}}
     <div class='alert alert-info mx-2' role='alert'>
       Heb je een foto ingevoegd in dit artikel? Deze worden pas getoond als je het
       artikel hebt opgeslagen.
     </div>
-    <div class="px-2">
+    <div class='px-2'>
       {{markdown-to-html @content extensions='youtubeEmbed bootstrapTable'}}
     </div>
   {{/if}}

app/components/model-form/checkbox-input.hbs

@@ -1,18 +1,20 @@
-<div class='{{labelClass}}'></div>
-<div class='{{inputWrapperClass}}'>
-  <div class='form-check'>
-    <Input
-        data-test-input={{property}}
-        @type='checkbox'
-        id={{inputIdentifier}}
-        @checked={{mut (get model property)}}
-        class={{concat 'form-check-input ' inputValidityClass}}
-        required={{required}}
-        disabled={{disabled}}
-    />
-    <label class='form-check-label'>
-      {{label}}{{if required ' *'}}
-      {{form-control-feedback (get @model.errors property)}}
-    </label>
+<div class='mb-3 {{if this.usesGrid 'row'}}'>
+  <div class='{{this.labelClass}}'></div>
+  <div class='{{this.inputWrapperClass}}'>
+    <div class='form-check'>
+      <Input
+          data-test-input={{@property}}
+          @type='checkbox'
+          id={{this.inputIdentifier}}
+          @checked={{mut (get @model @property)}}
+          class={{concat 'form-check-input ' this.inputValidityClass}}
+          required={{@required}}
+          disabled={{@disabled}}
+      />
+      <label class='form-check-label'>
+        {{@label}}{{if @required ' *'}}
+        {{form-control-feedback (get @model.errors @property)}}
+      </label>
+    </div>
   </div>
 </div>

app/components/model-form/checkbox-input.ts

@@ -0,0 +1,3 @@
+import TextInput from './text-input';
+
+export default class CheckboxInput extends TextInput {}

app/components/model-form/datetime-input.hbs

@@ -1,19 +1,21 @@
-<label
-  class='col-sm-2 col-form-label form-label'
-  for={{inputIdentifier}}
->
-  {{label}}{{if required ' *'}}
-</label>
-<div class='col-sm-10'>
-  <Input::DatetimeInput
-    @inputId={{inputIdentifier}}
-    @dateValue={{mut (get model property)}}
-    @inputClass={{concat 'form-control ' inputValidityClass}}
-    @placeholder={{placeholder}}
-    @required={{required}}
-    @disabled={{disabled}}
-    @yearRange={{yearRange}}
-  />
+<div class='mb-3 {{if this.usesGrid 'row'}}'>
+  <label
+    class='col-sm-2 col-form-label form-label'
+    for={{this.inputIdentifier}}
+  >
+    {{@label}}{{if @required ' *'}}
+  </label>
+  <div class='col-sm-10'>
+    <Input::DatetimeInput
+      @inputId={{this.inputIdentifier}}
+      @dateValue={{mut (get @model @property)}}
+      @inputClass={{concat 'form-control ' this.inputValidityClass}}
+      @placeholder={{this.placeholder}}
+      @required={{@required}}
+      @disabled={{@disabled}}
+      @yearRange={{@yearRange}}
+    />
 
-  {{form-control-feedback (get @model.errors property)}}
+    {{form-control-feedback (get @model.errors @property)}}
+  </div>
 </div>

app/components/model-form/datetime-input.ts

@@ -0,0 +1,3 @@
+import TextInput from './text-input';
+
+export default class DatetimeInput extends TextInput {}

app/components/model-form/file-input.hbs

@@ -1,36 +1,63 @@
-<label class='col-form-label form-label {{labelClass}}'>
-  {{label}}{{if required ' *'}}
-</label>
-<div class='{{inputWrapperClass}}'>
-  {{#let (file-queue name="fileUpload" onFileAdded=(action 'fileLoaded')) as |queue|}}
-    <label for="upload-file" class="form-label {{if not (get model property) "border rounded p-2 w-100"}}">
-      {{#if (get model property)}}
-        <img id={{inputIdentifier}} src={{mut (get model property)}} alt={{label}} role="button" tabindex="0"
-        aria-controls="upload-file" />
-        <br />
-      {{else}}
-        <span class='image-upload-text' role="button" tabindex="0" aria-controls="upload-file">
-          Sleep hier een nieuwe bestand naartoe of klik om een bestand te kiezen
-        </span>
-      {{/if}}
-    </label>
-    <input type="file" id="upload-file" class="" hidden accept={{validMimetypes}} {{queue.selectFile}}>
-  {{/let}}
-  {{#if fileToBig}}
-    <br />
-    <div class='alert alert-danger'>
-      Dit bestand is te groot om te uploaden, gebruik een bestand kleiner dan
-      {{maxFileSize}}MB
-    </div>
-  {{/if}}
-  {{#if extensionNotPermitted}}
-    <br />
-    <div class='alert alert-danger'>
-      Deze bestandsextensie wordt niet ondersteund. Geaccepteerde extensies
-      zijn:
-      <b>{{validExtensionsString}}</b>
-    </div>
-  {{/if}}
+<div class='mb-3 {{if this.usesGrid "row"}}'>
+  <label class='col-form-label form-label {{this.labelClass}}'>
+    {{@label}}{{if @required ' *'}}
+  </label>
+  <div class={{this.inputWrapperClass}}>
+    {{#let
+      (file-queue name='fileUpload' onFileAdded=this.fileLoaded)
+      as |queue|
+    }}
+      <label
+        for='upload-file'
+        class='form-label
+          {{if not (get @model @property) "border rounded p-2 w-100"}}'
+      >
+        {{#if (get @model @property)}}
+          <img
+            id={{this.inputIdentifier}}
+            src={{mut (get @model @property)}}
+            alt={{@label}}
+            role='button'
+            tabindex='0'
+            aria-controls='upload-file'
+          />
+          <br />
+        {{else}}
+          <span
+            class='image-upload-text'
+            role='button'
+            tabindex='0'
+            aria-controls='upload-file'
+          >
+            Sleep hier een nieuwe bestand naartoe of klik om een bestand te
+            kiezen
+          </span>
+        {{/if}}
+      </label>
+      <input
+        type='file'
+        id='upload-file'
+        hidden
+        accept={{this.validMimeTypes}}
+        {{queue.selectFile}}
+      />
+    {{/let}}
+    {{#if this.fileTooBig}}
+      <br />
+      <div class='alert alert-danger'>
+        Dit bestand is te groot om te uploaden, gebruik een bestand kleiner dan
+        {{this.maxFilesize}}
+      </div>
+    {{/if}}
+    {{#if this.extensionNotPermitted}}
+      <br />
+      <div class='alert alert-danger'>
+        Deze bestandsextensie wordt niet ondersteund. Geaccepteerde extensies
+        zijn:
+        <b>{{join ', ' this.validExtensions}}</b>
+      </div>
+    {{/if}}
 
-  {{form-control-feedback (get @model.errors property)}}
+    {{form-control-feedback (get @model.errors @property)}}
+  </div>
 </div>

app/components/model-form/file-input.ts

@@ -0,0 +1,53 @@
+import TextInput, { type TextInputSignature } from './text-input';
+import ENV from 'amber-ui/config/environment';
+import type { UploadFile } from 'ember-file-upload';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export interface FileInputSignature extends TextInputSignature {
+  Args: TextInputSignature['Args'] & {
+    validMimeTypes?: string[];
+    validExtensions?: string[];
+    loadedCallback: (
+      file: UploadFile,
+      data: Awaited<ReturnType<UploadFile['readAsDataURL']>>
+    ) => void;
+  };
+}
+
+export default class FileInput extends TextInput<FileInputSignature> {
+  @tracked fileTooBig = false;
+  @tracked extensionNotPermitted = false;
+
+  maxFilesize = `${ENV.maxFilesize}MB`;
+
+  get validMimeTypes() {
+    return this.args.validMimeTypes ?? ['image/jpeg', 'image/png'];
+  }
+
+  get validExtensions() {
+    return this.args.validExtensions ?? ['jpeg', 'jpg', 'png'];
+  }
+
+  extensionInvalid(file: UploadFile): boolean {
+    const fileExtension = file.name.split('.').slice(-1)[0]?.toLowerCase();
+    if (typeof fileExtension === 'undefined') {
+      throw new Error('Could not parse file extension');
+    }
+    return !this.validExtensions.includes(fileExtension);
+  }
+
+  @action async fileLoaded(file: UploadFile): Promise<void> {
+    this.fileTooBig = false;
+    this.extensionNotPermitted = false;
+
+    // File.size is in bytes
+    if (file.size > ENV.maxFilesize * 1048576) {
+      this.fileTooBig = true;
+    } else if (this.extensionInvalid(file)) {
+      this.extensionNotPermitted = true;
+    } else {
+      this.args.loadedCallback(file, await file.readAsDataURL());
+    }
+  }
+}

app/components/model-form/radio-button.hbs

@@ -0,0 +1 @@
+<input type='radio' ...attributes />