changes

app/changesets/register.ts

@@ -4,6 +4,8 @@ export interface RegisterDTO {
   id?: string;
   firstName: string;
   lastName: string;
+  category: string;
+  birthDate?: Date;
   phone: string;
   email: string;
   gift: number;

app/components/forms/register.gts

@@ -1,12 +1,14 @@
 import t from 'ember-intl/helpers/t';
-import type { TOC } from '@ember/component/template-only';
 import type { RegisterChangeset } from 'ember-boilerplate/changesets/register';
 import TpkForm from '@triptyk/ember-input-validation/components/tpk-form';
 import type validationsRegister from 'ember-boilerplate/validations/register';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
 export interface FormsRegisterSignature {
   Args: {
     changeset: RegisterChangeset;
+    categories: string[];
     saveFunction: (changeset: RegisterChangeset) => void;
     validationSchema: typeof validationsRegister;
   };
@@ -16,7 +18,18 @@ export interface FormsRegisterSignature {
   Element: HTMLFormElement;
 }
 
-const FormsRegisterSignature: TOC<FormsRegisterSignature> = <template>
+export default class FormsRegister extends Component<FormsRegisterSignature> {
+  @action
+  setBirthdate(date: unknown) {
+    this.args.changeset.set('birthDate', date as Date);
+  }
+
+  @action
+  selectCategory(category: unknown) {
+    this.args.changeset.set('category', category as string);
+  }
+
+  <template>
     <TpkForm
       @changeset={{@changeset}}
       @onSubmit={{@saveFunction}}
@@ -56,6 +69,17 @@ const FormsRegisterSignature: TOC<FormsRegisterSignature> = <template>
         @validationField="password"
         data-test-input="password"
       />
+      <F.TpkDatepicker class="col-span-12" @validationField="birthDate" @label={{t "components.forms.register.birth_date"}} @onChange={{this.setBirthdate}} as |D|>
+        <D.Label />
+        <D.Input />
+      </F.TpkDatepicker>
+      <F.TpkSelectPrefab
+        @validationField="category"
+        @options={{@categories}}
+        @label={{t "components.forms.register.category"}}
+        @onChange={{this.selectCategory}}
+        class="col-span-12"
+      />
       <F.TpkPasswordPrefab
         class="input_block col-span-12"
         @label={{t "components.forms.register.confirm_password"}}
@@ -75,5 +99,4 @@ const FormsRegisterSignature: TOC<FormsRegisterSignature> = <template>
       </button>
     </TpkForm>
   </template>;
-
-export default FormsRegisterSignature;
+}

app/styles/app.css

@@ -6,6 +6,8 @@
 @import url("input.css");
 @import url("table.css");
 @import url("button.css");
+@import url("@eonasdan/tempus-dominus/dist/css/tempus-dominus.css");
+@import url("ember-power-select/vendor/ember-power-select.css");
 
 /*** GENERAL  ****/
 button:focus-visible,

app/templates/register.gts

@@ -13,6 +13,7 @@ import RouteTemplate from 'ember-route-template';
 import type RegisterChangesetService from 'ember-boilerplate/services/changesets/register';
 import type ErrorHandlerService from 'ember-boilerplate/services/error-handler';
 import type FlashMessageService from 'ember-cli-flash/services/flash-messages';
+import { array } from '@ember/helper';
 
 export interface RegisterRouteComponentSignature {
   Args: {};
@@ -34,6 +35,8 @@ class RegisterRouteComponent extends Component<RegisterRouteComponentSignature>
       lastName: '',
       phone: '',
       gift: 0,
+      birthDate: undefined,
+      category: '',
       password: '',
       confirmPassword: '',
     });
@@ -55,6 +58,7 @@ class RegisterRouteComponent extends Component<RegisterRouteComponentSignature>
   <template>
     <LoginLayout @title={{t "components.templates.register.title"}}>
       <RegisterForm
+        @categories={{array 'bonjour' 'au revoir' 'caca'}}
         @changeset={{this.changeset}}
         @validationSchema={{this.validationSchema}}
         @saveFunction={{this.saveRegister}}

ember-cli-build.js

@@ -69,18 +69,13 @@ module.exports = async function (defaults) {
         package: 'qunit',
       },
     ],
-    amdCompatibility: {
-      es: [
-        ["fetch", ["default", "setupFastboot"]]
-      ],
-    },
     staticAddonTrees: true,
     staticAddonTestSupportTrees: true,
     staticHelpers: true,
     staticModifiers: true,
     staticComponents: true,
     splitControllers: true,
     splitRouteClasses: true,
-    staticEmberSource: true,
+    staticEmberSource: true
   });
 };

package.json

@@ -61,6 +61,7 @@
     "@embroider/router": "2.1.8",
     "@embroider/test-setup": "~4.0.0",
     "@embroider/webpack": "^4.0.8",
+    "@eonasdan/tempus-dominus": "^6.9.11",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.13.0",
     "@glimmer/component": "~1.1.2",
@@ -120,6 +121,7 @@
     "ember-load-initializers": "^3.0.1",
     "ember-modifier": "~4.2.0",
     "ember-page-title": "~8.2.3",
+    "ember-power-select": "^8.3.1",
     "ember-qunit": "~8.1.0",
     "ember-resolver": "~13.0.2",
     "ember-route-template": "^1.0.3",

tests/integration/components/forms/register/component-test.gts

@@ -6,6 +6,7 @@ import { pagesFormsRegister } from 'ember-boilerplate/tests/pages/forms/register
 import validationsRegister from 'ember-boilerplate/validations/register';
 import { setupIntl } from 'ember-intl/test-support';
 import RegisterForm from 'ember-boilerplate/components/forms/register';
+import { array } from '@ember/helper';
 
 module('Integration | Component | forms/register', function (hooks) {
   setupRenderingTest(hooks);
@@ -15,6 +16,8 @@ module('Integration | Component | forms/register', function (hooks) {
     return new RegisterChangeset({
       email: 'test@triptyk.eu',
       lastName: 'triptyk',
+      category: '1',
+      birthDate: new Date(),
       firstName: 'papa',
       phone: '+32 498542257',
       gift: 1000,
@@ -31,6 +34,7 @@ module('Integration | Component | forms/register', function (hooks) {
     return render(
       <template>
         <RegisterForm
+          @categories={{array '1' '2' '3'}}
           @changeset={{changeset}}
           @saveFunction={{saveFunction}}
           @validationSchema={{validationSchema}}

tests/unit/services/changesets/register/changesets.ts

@@ -1,8 +1,12 @@
+import type { RegisterDTO } from "ember-boilerplate/changesets/register";
+
 export const changesetInitialData = {
   firstName: 'a',
   lastName: 'a',
   phone: 'a',
   email: 'a',
   gift: 5000,
   password: '123',
-};
+  birthDate: new Date(),
+  category: 'a',
+} satisfies RegisterDTO;

translations/components/forms/register/fr-fr.yaml

@@ -5,3 +5,5 @@ email: "Email"
 gift: "Don"
 password: "Mot de passe"
 confirm_password: "Confirmer mot de passe"
+birth_date: "Date de naissance"
+category: "Catégorie"