Commit d0e31319 authored by François Agneray's avatar François Agneray
Browse files

Merge branch '35-modification-formulaire-attributes-uri_action-renderer_config' into 'develop'

Resolve "Modification formulaire attributes (uri_action => renderer_config)"

Closes #35

See merge request !19
parents 5e095138 112326b4
Pipeline #2419 passed with stages
in 13 minutes and 56 seconds
......@@ -8,6 +8,9 @@ import { TableOutputComponent } from './output/table-output.component';
import { TrOutputComponent } from './output/tr-output.component';
import { TableResultComponent } from './result/table-result.component';
import { TrResultComponent } from './result/tr-result.component';
import { DetailRendererComponent } from './result/renderer/detail-renderer.component';
import { LinkRendererComponent } from './result/renderer/link-renderer.component';
import { DownloadRendererComponent } from './result/renderer/download-renderer.component';
import { TableDetailComponent } from './detail/table-detail.component';
import { TrDetailComponent } from './detail/tr-detail.component';
import { TableVoComponent } from './vo/table-vo.component';
......@@ -30,6 +33,9 @@ export const attributeDummiesComponents = [
TrOutputComponent,
TableResultComponent,
TrResultComponent,
DetailRendererComponent,
LinkRendererComponent,
DownloadRendererComponent,
TableDetailComponent,
TrDetailComponent,
TableVoComponent,
......
<div class="form-group row align-items-center">
<label for="{{id}}_display" class="col-md-5 col-sm-12 col-form-label">Display:</label>
<div class="col-md-7 col-sm-12">
<select class="form-control" name="{{id}}_display" id="{{id}}_display" [formControl]="rendererConfig.controls.display">
<option></option>
<option value="text">Text</option>
<option value="text-button">Text button</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="{{id}}_blank" class="col-md-5 col-sm-12 col-form-label">Blank:</label>
<div class="col-md-7 col-sm-12">
<select class="form-control" name="{{id}}_blank" id="{{id}}_blank" [formControl]="rendererConfig.controls.blank">
<option></option>
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
</div>
\ No newline at end of file
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-detail-renderer',
templateUrl: 'detail-renderer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DetailRendererComponent {
@Input() id: number;
@Input() rendererConfig: FormGroup;
}
\ No newline at end of file
<div class="form-group row align-items-center">
<label for="{{id}}_display" class="col-md-5 col-sm-12 col-form-label">Display:</label>
<div class="col-md-7 col-sm-12">
<select class="form-control" name="{{id}}_display" id="{{id}}_display" [formControl]="rendererConfig.controls.display">
<option></option>
<option value="text">Text</option>
<option value="text-button">Text button</option>
<option value="icon-button">Icon button</option>
</select>
</div>
</div>
<div *ngIf="rendererConfig.controls.display.value !== 'icon-button'" class="form-group row align-items-center">
<label for="{{id}}_text" class="col-md-5 col-sm-12 col-form-label">Text:</label>
<div class="col-md-7 col-sm-12">
<input type="text" class="form-control" id="{{id}}_text" name="{{id}}_text" [formControl]="rendererConfig.controls.text">
</div>
</div>
<div *ngIf="rendererConfig.controls.display.value === 'icon-button'" class="form-group row align-items-center">
<label for="{{id}}_icon" class="col-md-5 col-sm-12 col-form-label">Text:</label>
<div class="col-md-7 col-sm-12">
<input type="text" class="form-control" id="{{id}}_icon" name="{{id}}_icon" [formControl]="rendererConfig.controls.icon">
</div>
</div>
\ No newline at end of file
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-download-renderer',
templateUrl: 'download-renderer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DownloadRendererComponent {
@Input() id: number;
@Input() rendererConfig: FormGroup;
}
\ No newline at end of file
<div class="form-group row align-items-center">
<label for="{{id}}_href" class="col-md-5 col-sm-12 col-form-label">Href:</label>
<div class="col-md-7 col-sm-12">
<input type="text" class="form-control" id="{{id}}_href" name="{{id}}_href" [formControl]="rendererConfig.controls.href">
</div>
</div>
<div class="form-group row align-items-center">
<label for="{{id}}_display" class="col-md-5 col-sm-12 col-form-label">Display:</label>
<div class="col-md-7 col-sm-12">
<select class="form-control" name="{{id}}_display" id="{{id}}_display" [formControl]="rendererConfig.controls.display">
<option></option>
<option value="text">Text</option>
<option value="text-button">Text button</option>
<option value="icon-button">Icon button</option>
</select>
</div>
</div>
<div *ngIf="rendererConfig.controls.display.value !== 'icon-button'" class="form-group row align-items-center">
<label for="{{id}}_text" class="col-md-5 col-sm-12 col-form-label">Text:</label>
<div class="col-md-7 col-sm-12">
<input type="text" class="form-control" id="{{id}}_text" name="{{id}}_text" [formControl]="rendererConfig.controls.text">
</div>
</div>
<div *ngIf="rendererConfig.controls.display.value === 'icon-button'" class="form-group row align-items-center">
<label for="{{id}}_icon" class="col-md-5 col-sm-12 col-form-label">Text:</label>
<div class="col-md-7 col-sm-12">
<input type="text" class="form-control" id="{{id}}_icon" name="{{id}}_icon" [formControl]="rendererConfig.controls.icon">
</div>
</div>
<div class="form-group row">
<label for="{{id}}_blank" class="col-md-5 col-sm-12 col-form-label">Blank:</label>
<div class="col-md-7 col-sm-12">
<select class="form-control" name="{{id}}_blank" id="{{id}}_blank" [formControl]="rendererConfig.controls.blank">
<option></option>
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
</div>
\ No newline at end of file
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-link-renderer',
templateUrl: 'link-renderer.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LinkRendererComponent {
@Input() id: number;
@Input() rendererConfig: FormGroup;
}
\ No newline at end of file
......@@ -10,8 +10,11 @@
</select>
</td>
<td>
<input *ngIf="_attribute.id_output_category" type="text" class="form-control" name="renderer_config"
[formControl]="resultForm.controls.renderer_config">
<ng-container *ngIf="resultForm.controls.renderer.value" [ngSwitch]="resultForm.controls.renderer.value">
<app-detail-renderer *ngSwitchCase="'detail'" [id]="_attribute.id" [rendererConfig]="getRendererConfigFormGroup()"></app-detail-renderer>
<app-link-renderer *ngSwitchCase="'link'" [id]="_attribute.id" [rendererConfig]="getRendererConfigFormGroup()"></app-link-renderer>
<app-download-renderer *ngSwitchCase="'download'" [id]="_attribute.id" [rendererConfig]="getRendererConfigFormGroup()"></app-download-renderer>
</ng-container>
</td>
<td>
<input *ngIf="_attribute.id_output_category" type="checkbox" class="form-control" name="order_by"
......
......@@ -2,7 +2,8 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
import { FormControl, FormGroup } from '@angular/forms';
import { SettingsSelectOption } from '../../../../settings/store/model';
import { Attribute } from '../../../store/model';
import { Attribute, RendererConfig } from '../../../store/model';
import { RendererConfigFactory } from '../../../store/model/renderer/renderer-config-factory';
@Component({
selector: '[result]',
......@@ -15,8 +16,8 @@ export class TrResultComponent {
this._attribute = attribute;
this.resultForm.controls.name.setValue(attribute.name);
this.resultForm.controls.renderer.setValue(attribute.renderer);
if (attribute.renderer_config) {
this.resultForm.controls.renderer_config.setValue(JSON.stringify(attribute.renderer_config));
if (attribute.renderer) {
this.setRendererConfigFormGroup(attribute.renderer_config);
}
this.resultForm.controls.order_by.setValue(attribute.order_by);
this.resultForm.controls.order_display.setValue(attribute.order_display);
......@@ -28,23 +29,36 @@ export class TrResultComponent {
resultForm = new FormGroup({
name: new FormControl({ value: '', disabled: true }),
renderer: new FormControl(),
renderer_config: new FormControl(),
renderer_config: new FormGroup({}),
order_by: new FormControl(),
order_display: new FormControl()
});
getRendererConfigFormGroup() {
const rendererConfigFormGroup = this.resultForm.controls.renderer_config as FormGroup;
return rendererConfigFormGroup;
}
rendererOnChange(renderer: string) {
if (renderer === '') {
this.resultForm.controls.renderer.setValue(null);
this.resultForm.controls.renderer_config.setValue(null);
this.resultForm.setControl('renderer_config', new FormGroup({}));
} else {
this.setRendererConfigFormGroup(RendererConfigFactory.create(renderer));
}
}
setRendererConfigFormGroup(rendererConfig: RendererConfig) {
const rendererConfigFormGroup = this.getRendererConfigFormGroup();
for (const key in rendererConfig) {
rendererConfigFormGroup.addControl(key, new FormControl(rendererConfig[key]));
}
}
emitSave(): void {
this.save.emit({
...this._attribute,
...this.resultForm.value,
renderer_config: JSON.parse(this.resultForm.value.renderer_config)
...this.resultForm.value
});
}
}
import { Option } from './option.model';
import { RendererConfig } from './renderer/renderer-config.model';
export interface Attribute {
id: number;
......@@ -18,7 +19,7 @@ export interface Attribute {
placeholder_min: string;
placeholder_max: string;
renderer: string;
renderer_config: string;
renderer_config: RendererConfig;
display_detail: number;
selected: boolean;
order_by: boolean;
......
......@@ -9,3 +9,4 @@ export * from './criteria-family.model';
export * from './output-family.model';
export * from './output-category.model';
export * from './displayable.model';
export * from './renderer';
\ No newline at end of file
import { RendererConfig } from './renderer-config.model';
export interface DetailRendererConfig extends RendererConfig {
display: string;
icon_button: string;
blank: boolean;
}
\ No newline at end of file
import { RendererConfig } from './renderer-config.model';
export interface DownloadRendererConfig extends RendererConfig {
display: string;
text: string;
icon: string;
}
\ No newline at end of file
export * from './renderer-config.model';
export * from './detail-renderer-config.model';
export * from './link-renderer-config.model';
\ No newline at end of file
import { RendererConfig } from './renderer-config.model';
export interface LinkRendererConfig extends RendererConfig {
href: string;
display: string;
text: string;
icon: string;
blank: boolean;
}
\ No newline at end of file
import { RendererConfig, DetailRendererConfig, LinkRendererConfig } from './index';
export abstract class RendererConfigFactory {
static create(renderer: string): RendererConfig {
switch (renderer) {
case 'detail':
return {
display: 'text',
blank: true
} as DetailRendererConfig;
case 'link':
return {
href: '$value',
display: 'text',
text: '$value',
icon: 'fas fa-link',
blank: true
} as LinkRendererConfig;
case 'download':
return {
display: 'icon-button',
text: 'DOWNLOAD',
icon: 'fas fa-download'
}
}
}
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment