src/app/features/reporting/edit-report-mode/edit-report-mode.component.ts
Edit a report's mode as a dropdown of the supported modes
("reporting", "exporting", "sql"), each with a tooltip explaining what it does.
CustomFormControlDirective<string>
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
EditReportModeComponent
|
| selector | app-edit-report-mode |
| standalone | true |
| imports |
MatSelectModule
MatTooltipModule
|
| templateUrl | ./edit-report-mode.component.html |
No results matching.
ReactiveFormsModule
MatSelectModule
MatTooltipModule
FeatureDisabledInfoComponent
CustomFormControlDirective<string>
EditComponent
Properties |
|
Methods |
Inputs |
Outputs |
| formFieldConfig | |
Type : FormFieldConfig
|
|
| aria-describedby | |
Type : string
|
|
|
Inherited from
CustomFormControlDirective
|
|
| disabled | |
Type : boolean
|
|
|
Inherited from
CustomFormControlDirective
|
|
| ngControl | |
Type : any
|
|
Default value : inject(NgControl, { optional: true, self: true })
|
|
|
Inherited from
CustomFormControlDirective
|
|
| placeholder | |
Type : string
|
|
|
Inherited from
CustomFormControlDirective
|
|
| required | |
Type : boolean
|
|
|
Inherited from
CustomFormControlDirective
|
|
| value | |
Type : T
|
|
|
Inherited from
CustomFormControlDirective
|
|
| valueChange | |
Type : EventEmitter
|
|
|
Inherited from
CustomFormControlDirective
|
|
| blur |
blur()
|
|
Inherited from
CustomFormControlDirective
|
|
Returns :
void
|
| focus |
focus()
|
|
Inherited from
CustomFormControlDirective
|
|
Returns :
void
|
| onContainerClick | ||||||
onContainerClick(event: MouseEvent)
|
||||||
|
Inherited from
CustomFormControlDirective
|
||||||
|
Parameters :
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Inherited from
CustomFormControlDirective
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Inherited from
CustomFormControlDirective
|
||||||
|
Parameters :
Returns :
void
|
| setDescribedByIds | ||||||
setDescribedByIds(ids: string[])
|
||||||
|
Inherited from
CustomFormControlDirective
|
||||||
|
Parameters :
Returns :
void
|
| setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Inherited from
CustomFormControlDirective
|
||||||
|
Parameters :
Returns :
void
|
| writeValue | |||||||||||||||
writeValue(value: T, notifyFormControl: unknown)
|
|||||||||||||||
|
Inherited from
CustomFormControlDirective
|
|||||||||||||||
|
Implementation for Angular ControlValueAccessor interface that links the form control value to the component value
Parameters :
Returns :
void
|
| controlType |
Type : string
|
Default value : "custom-control"
|
|
Inherited from
CustomFormControlDirective
|
| elementRef |
Type : unknown
|
Default value : inject<ElementRef<HTMLElement>>(ElementRef)
|
|
Inherited from
CustomFormControlDirective
|
| Readonly enabled |
Type : Signal<boolean>
|
Default value : computed(() => !this._disabled())
|
|
Inherited from
CustomFormControlDirective
|
|
Whether the control is currently enabled, as a signal (tracks disabled). |
| errorStateMatcher |
Type : unknown
|
Default value : inject(ErrorStateMatcher)
|
|
Inherited from
CustomFormControlDirective
|
| id |
Type : unknown
|
Default value : `custom-form-control-${CustomFormControlDirective.nextId++}`
|
|
Inherited from
CustomFormControlDirective
|
| Static nextId |
Type : number
|
Default value : 0
|
|
Inherited from
CustomFormControlDirective
|
| onChange |
Type : unknown
|
Default value : () => {...}
|
|
Inherited from
CustomFormControlDirective
|
| onTouched |
Type : unknown
|
Default value : () => {...}
|
|
Inherited from
CustomFormControlDirective
|
| parentForm |
Type : unknown
|
Default value : inject(NgForm, { optional: true })
|
|
Inherited from
CustomFormControlDirective
|
| parentFormGroup |
Type : unknown
|
Default value : inject(FormGroupDirective, { optional: true })
|
|
Inherited from
CustomFormControlDirective
|
| stateChanges |
Type : unknown
|
Default value : new Subject<void>()
|
|
Inherited from
CustomFormControlDirective
|
| Readonly valueSignal |
Type : Signal<T>
|
Default value : computed(() => this._value())
|
|
Inherited from
CustomFormControlDirective
|
|
The current value of the control as a signal.
Authoritative in both modes: it reflects the bound |
import {
ChangeDetectionStrategy,
Component,
inject,
input,
resource,
} from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { MatFormFieldControl } from "@angular/material/form-field";
import { MatSelectModule } from "@angular/material/select";
import { MatTooltipModule } from "@angular/material/tooltip";
import { CustomFormControlDirective } from "#src/app/core/common-components/basic-autocomplete/custom-form-control.directive";
import { FeatureDisabledInfoComponent } from "#src/app/core/common-components/feature-disabled-info/feature-disabled-info.component";
import { FormFieldConfig } from "#src/app/core/common-components/entity-form/FormConfig";
import { DynamicComponent } from "#src/app/core/config/dynamic-components/dynamic-component.decorator";
import { EditComponent } from "#src/app/core/entity/entity-field-edit/dynamic-edit/edit-component.interface";
import { SqlReportService } from "../sql-report/sql-report.service";
/**
* Edit a report's `mode` as a dropdown of the supported modes
* ("reporting", "exporting", "sql"), each with a tooltip explaining what it does.
*/
@DynamicComponent("EditReportMode")
@Component({
selector: "app-edit-report-mode",
templateUrl: "./edit-report-mode.component.html",
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
ReactiveFormsModule,
MatSelectModule,
MatTooltipModule,
FeatureDisabledInfoComponent,
],
providers: [
{ provide: MatFormFieldControl, useExisting: EditReportModeComponent },
],
})
export class EditReportModeComponent
extends CustomFormControlDirective<string>
implements EditComponent
{
private readonly sqlReportService = inject(SqlReportService);
formFieldConfig = input<FormFieldConfig>();
/**
* Whether the server-side reporting backend required for "sql" reports is available.
* Used to warn the user when they pick "sql" in an environment without the feature.
*/
readonly reportingBackendEnabled = resource({
loader: () => this.sqlReportService.isReportingBackendEnabled(),
});
}
<mat-select [formControl]="formControl">
<mat-option
value="reporting"
matTooltip="Aggregated statistics (counts, groupings) calculated in the browser. No server-side reporting backend required."
i18n-matTooltip="ReportConfig mode description"
matTooltipPosition="right"
>
<span i18n="ReportConfig mode option">Reporting</span>
</mat-option>
<mat-option
value="exporting"
matTooltip="A flat export of the matching records. No server-side reporting backend required."
i18n-matTooltip="ReportConfig mode description"
matTooltipPosition="right"
>
<span i18n="ReportConfig mode option">Exporting</span>
</mat-option>
<mat-option
value="sql"
matTooltip="Custom server-side SQL queries for advanced reports. Requires the reporting backend to be enabled."
i18n-matTooltip="ReportConfig mode description"
matTooltipPosition="right"
>
<span i18n="ReportConfig mode option">SQL</span>
</mat-option>
</mat-select>
@if (valueSignal() === "sql") {
<app-feature-disabled-info
featureName="SQL reports"
i18n-featureName="ReportConfig SQL feature name"
[featureEnabled]="reportingBackendEnabled.value()"
[compactView]="true"
></app-feature-disabled-info>
}