refactor(model-form): Glimmer RadioGroup and RadioButton

csvalpha · Oct 16, 2023 · 998fcf2 · 998fcf2
1 parent d03cbe4
commit 998fcf2
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 54 deletions.
diff --git 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
@@ -0,0 +1 @@
+<input type='radio' ...attributes />
diff --git a/app/components/model-form/radio-button.js b/app/components/model-form/radio-button.js
diff --git 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>
+    {{form-control-feedback (get @model.errors @property)}}
+  </div>
+</fieldset>
diff --git a/app/components/model-form/radio-group.js b/app/components/model-form/radio-group.js
diff --git a/app/components/model-form/radio-group.ts 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
@@ -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
     );
   }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import TextInput from './text-input';

		export default class RadioGroup extends TextInput {}