From 998fcf243e6232f551f350e4da89d33f4f969292 Mon Sep 17 00:00:00 2001
From: guidojw <35309288+guidojw@users.noreply.github.com>
Date: Tue, 17 Oct 2023 00:20:03 +0200
Subject: [PATCH] refactor(model-form): Glimmer RadioGroup and RadioButton

---
 app/components/model-form/file-input.ts    |  2 +-
 app/components/model-form/radio-button.hbs |  1 +
 app/components/model-form/radio-button.js  | 24 ----------
 app/components/model-form/radio-group.hbs  | 52 +++++++++++++---------
 app/components/model-form/radio-group.js   |  6 ---
 app/components/model-form/radio-group.ts   |  3 ++
 app/components/model-form/text-input.ts    |  3 +-
 7 files changed, 37 insertions(+), 54 deletions(-)
 create mode 100644 app/components/model-form/radio-button.hbs
 delete mode 100644 app/components/model-form/radio-button.js
 delete mode 100644 app/components/model-form/radio-group.js
 create mode 100644 app/components/model-form/radio-group.ts

diff --git a/app/components/model-form/file-input.ts b/app/components/model-form/file-input.ts
index 9281108a6..4098aac16 100644
--- a/app/components/model-form/file-input.ts
+++ b/app/components/model-form/file-input.ts
@@ -4,7 +4,7 @@ import type { UploadFile } from 'ember-file-upload';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
-export interface FileInputSignature {
+export interface FileInputSignature extends TextInputSignature {
   Args: TextInputSignature['Args'] & {
     validMimeTypes?: string[];
     validExtensions?: string[];
diff --git a/app/components/model-form/radio-button.hbs b/app/components/model-form/radio-button.hbs
new file mode 100644
index 000000000..12ebb78fc
--- /dev/null
+++ b/app/components/model-form/radio-button.hbs
@@ -0,0 +1 @@
+<input type='radio' ...attributes />
\ No newline at end of file
diff --git a/app/components/model-form/radio-button.js b/app/components/model-form/radio-button.js
deleted file mode 100644
index 9c24077d7..000000000
--- a/app/components/model-form/radio-button.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-
-export default Component.extend({
-  tagName: 'input',
-  type: 'radio',
-  groupValue: null,
-  attributeBindings: [
-    'checked',
-    'disabled',
-    'name',
-    'required',
-    'type',
-    'value',
-  ],
-  checked: computed('groupValue', 'value', function () {
-    return this.groupValue === this.value;
-  }).readOnly(),
-  change() {
-    if (this.groupValue !== this.value) {
-      this.set('groupValue', this.value);
-    }
-  },
-});
diff --git a/app/components/model-form/radio-group.hbs b/app/components/model-form/radio-group.hbs
index 2225baf80..e349f70b8 100644
--- a/app/components/model-form/radio-group.hbs
+++ b/app/components/model-form/radio-group.hbs
@@ -1,23 +1,31 @@
-<legend class={{if (not-eq inputLayout 'vertical') 'col-form-legend col-sm-2'}}>
-  {{label}}{{if required ' *'}}
-</legend>
-<div class={{if (not-eq inputLayout 'vertical') 'col-sm-10'}}>
-  {{#each options as |opt|}}
-    <div class='form-check mb-2'>
-      <ModelForm::RadioButton
-        @class={{concat 'form-check-input ' inputValidityClass}}
-        @name={{inputIdentifier}}
-        @id={{concat inputIdentifier '-' opt.value}}
-        @value={{opt.value}}
-        @groupValue={{mut (get model property)}}
-        @required={{required}}
-        @disabled={{disabled}}
-      />
-      <label class='form-check-label' for='{{inputIdentifier}}-{{opt.value}}'>
-        {{opt.label}}
-      </label>
-    </div>
-  {{/each}}
+<fieldset class='mb-3 {{if this.usesGrid "row"}}'>
+  <legend
+    class={{if (not-eq this.inputLayout 'vertical') 'col-form-legend col-sm-2'}}
+  >
+    {{@label}}{{if @required ' *'}}
+  </legend>
+  <div class={{if (not-eq this.inputLayout 'vertical') 'col-sm-10'}}>
+    {{#each @options as |opt|}}
+      <div class='form-check mb-2'>
+        <ModelForm::RadioButton
+          class={{concat 'form-check-input ' this.inputValidityClass}}
+          name={{this.inputIdentifier}}
+          id={{concat this.inputIdentifier '-' this.opt.value}}
+          value={{opt.value}}
+          required={{@required}}
+          disabled={{@disabled}}
+          checked={{eq (get @model @property) opt.value}}
+          {{on 'change' (action (mut (get @model @property)) opt.value)}}
+        />
+        <label
+          class='form-check-label'
+          for='{{this.inputIdentifier}}-{{opt.value}}'
+        >
+          {{opt.label}}
+        </label>
+      </div>
+    {{/each}}
 
-  {{form-control-feedback (get @model.errors property)}}
-</div>
\ No newline at end of file
+    {{form-control-feedback (get @model.errors @property)}}
+  </div>
+</fieldset>
\ No newline at end of file
diff --git a/app/components/model-form/radio-group.js b/app/components/model-form/radio-group.js
deleted file mode 100644
index d877de77d..000000000
--- a/app/components/model-form/radio-group.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import ModelFormTextInputComponent from './text-input';
-
-export default ModelFormTextInputComponent.extend({
-  tagName: 'fieldset',
-  options: null,
-});
diff --git a/app/components/model-form/radio-group.ts b/app/components/model-form/radio-group.ts
new file mode 100644
index 000000000..2d837dcc8
--- /dev/null
+++ b/app/components/model-form/radio-group.ts
@@ -0,0 +1,3 @@
+import TextInput from './text-input';
+
+export default class RadioGroup extends TextInput {}
diff --git a/app/components/model-form/text-input.ts b/app/components/model-form/text-input.ts
index 5861ba9fd..cc225b363 100644
--- a/app/components/model-form/text-input.ts
+++ b/app/components/model-form/text-input.ts
@@ -30,7 +30,8 @@ export default class TextInput<
   get isInvalid() {
     return (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      this.args.model.get('errors')?.get(this.args.property as any)?.length > 0
+      this.args.model.get?.('errors')?.get(this.args.property as any)?.length >
+      0
     );
   }