feat(editor): add new radio button type

Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · May 16, 2024 · d9ca9b0 · d9ca9b0
1 parent 1ad1ff0
commit d9ca9b0
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 3 deletions.
diff --git a/projects/ng-core-tester/src/app/record/editor/schema.json b/projects/ng-core-tester/src/app/record/editor/schema.json
@@ -43,7 +43,8 @@
     "input_with_default_value",
     "name_with_definition",
     "field_expressions",
-    "field_with_addon_left_right"
+    "field_with_addon_left_right",
+    "field_radio_button_inline"
   ],
   "properties": {
     "$schema": {
@@ -1140,6 +1141,33 @@
           }
         }
       }
+    },
+    "field_radio_button_inline": {
+      "title": "Inline Radio button",
+      "default": "radio_1",
+      "widget": {
+        "formlyConfig": {
+          "type": "radioButton",
+          "props": {
+            "style": "inline",
+            "options": [
+              {
+                "label": "Radio 1",
+                "value": "radio_1"
+              },
+              {
+                "label": "Radio 2",
+                "value": "radio_2",
+                "disabled": true
+              },
+              {
+                "label": "Radio 3",
+                "value": "radio_3"
+              }
+            ]
+          }
+        }
+      }
     }
   },
   "definitions": {

diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.scss b/projects/rero/ng-core/src/lib/record/editor/editor.component.scss
@@ -195,4 +195,9 @@
     background-color: $gray-200;
   }
 
+  // Radio button
+  .p-radiobutton-label {
+    margin-bottom: 0 !important;
+    margin-right: 4px;
+  }
 }
diff --git a/projects/rero/ng-core/src/lib/record/editor/type/radio-button.component.ts b/projects/rero/ng-core/src/lib/record/editor/type/radio-button.component.ts
@@ -0,0 +1,81 @@
+/*
+ * RERO angular core
+ * Copyright (C) 2022-2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { FieldType, FormlyFieldConfig } from '@ngx-formly/core';
+
+interface RadioButtonProps {
+  options: Option[];
+  style: 'stacked' | 'inline';
+};
+
+interface Option {
+  label: string;
+  value: string;
+  disabled: boolean;
+};
+
+@Component({
+  selector: 'ng-core-editor-field-radio-button',
+  template: `
+  <ng-template #radioButton let-option="option" let-class="class">
+    <div class="flex" [ngClass]="class">
+      <p-radioButton
+        [formControl]="option.disabled ? disabledControl : formControl"
+        [label]="option.label"
+        [value]="option.value"
+      >
+      </p-radioButton>
+    </div>
+  </ng-template>
+  @if (props.style === 'stacked') {
+    @for (option of props.options | formlySelectOptions : field | async; track option; let i = $index;) {
+      <ng-container [ngTemplateOutlet]="radioButton" [ngTemplateOutletContext]="{option, class: 'radio-button'}"></ng-container>
+    }
+  } @else {
+    <div class="flex flex-wrap">
+    @for (option of props.options | formlySelectOptions : field | async; track option; let i = $index;) {
+      <ng-container [ngTemplateOutlet]="radioButton" [ngTemplateOutletContext]="{option, class: 'radio-button-label'}"></ng-container>
+    }
+    </div>
+  }
+  `,
+  styles: `
+  .radio-button {
+    margin-bottom: 4px;
+  }
+  .radio-button-label {
+    margin-top: 4px;
+    margin-bottom: 4px;
+    margin-right: 10px;
+  }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RadioButtonComponent extends FieldType<FormlyFieldConfig<RadioButtonProps>> {
+
+  defaultOptions?: Partial<FormlyFieldConfig<RadioButtonProps>> = {
+    props: {
+      options: [],
+      style: 'stacked'
+    }
+  };
+
+  get disabledControl() {
+    return new FormControl({ value: this.formControl.value, disabled: true });
+  }
+}
diff --git a/projects/rero/ng-core/src/lib/record/record.module.ts b/projects/rero/ng-core/src/lib/record/record.module.ts
@@ -29,6 +29,7 @@ import { PopoverModule } from 'ngx-bootstrap/popover';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { CalendarModule } from 'primeng/calendar';
+import { RadioButtonModule } from 'primeng/radiobutton';
 import { CoreModule } from '../core.module';
 import { GetRecordPipe } from '../pipe/get-record.pipe';
 import { emailValidator } from '../validator/email.validator';
@@ -49,6 +50,7 @@ import { MultiCheckboxComponent } from './editor/type/multicheckbox.component';
 import { MultiSchemaTypeComponent } from './editor/type/multischema/multischema.component';
 import { ObjectTypeComponent } from './editor/type/object-type/object-type.component';
 import { PasswordGeneratorTypeComponent } from './editor/type/password-generator-type.component';
+import { RadioButtonComponent } from './editor/type/radio-button.component';
 import { RemoteTypeaheadComponent } from './editor/type/remote-typeahead/remote-typeahead.component';
 import { SwitchComponent } from './editor/type/switch/switch.component';
 import { TextareaFieldComponent } from './editor/type/textarea/textarea.component';
@@ -123,7 +125,8 @@ import { RecordSearchResultDirective } from './search/result/record-search-resul
         PasswordGeneratorTypeComponent,
         MultiCheckboxComponent,
         FileComponent,
-        DetailButtonComponent
+        DetailButtonComponent,
+        RadioButtonComponent
     ],
     imports: [
         // NOTE : BrowserAnimationModule **should** be include in application core module.
@@ -141,6 +144,7 @@ import { RecordSearchResultDirective } from './search/result/record-search-resul
         BsDatepickerModule.forRoot(),
         CalendarModule,
         ClipboardModule,
+        RadioButtonModule,
         FormlyModule.forRoot({
             extensions: [
                 { name: 'email', extension: { prePopulate: emailValidator } }
@@ -164,7 +168,8 @@ import { RecordSearchResultDirective } from './search/result/record-search-resul
                 { name: 'markdown', component: MarkdownFieldComponent },
                 { name: 'dateTimePicker', component: DateTimepickerTypeComponent },
                 { name: 'passwordGenerator', component: PasswordGeneratorTypeComponent },
-                { name: 'multicheckbox', component: MultiCheckboxComponent }
+                { name: 'multicheckbox', component: MultiCheckboxComponent },
+                { name: 'radioButton', component: RadioButtonComponent }
             ],
             wrappers: [
                 { name: 'toggle-switch', component: ToggleWrapperComponent },