src/app/features/todos/todo-completion/edit-todo-completion/edit-todo-completion.component.ts
CustomFormControlDirective<TodoCompletion>
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
EditTodoCompletionComponent
|
| selector | app-edit-todo-completion |
| standalone | true |
| imports |
MatButtonModule
FontAwesomeModule
MatTooltipModule
|
| styleUrls | ./edit-todo-completion.component.scss |
| templateUrl | ./edit-todo-completion.component.html |
No results matching.
MatButtonModule
FontAwesomeModule
DisplayTodoCompletionComponent
MatTooltipModule
FaDynamicIconComponent
CustomFormControlDirective<TodoCompletion>
EditComponent
Properties |
|
Methods |
Inputs |
Outputs |
| entity | |
Type : Entity
|
|
| 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
|
|
| Async completeTodo |
completeTodo()
|
|
Returns :
any
|
| Async uncompleteTodo |
uncompleteTodo()
|
|
Returns :
any
|
| 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,
InputSignal,
} from "@angular/core";
import { MatButtonModule } from "@angular/material/button";
import { MatDialogRef } from "@angular/material/dialog";
import { MatFormFieldControl } from "@angular/material/form-field";
import { MatTooltipModule } from "@angular/material/tooltip";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { CustomFormControlDirective } from "../../../../core/common-components/basic-autocomplete/custom-form-control.directive";
import { EntityFormService } from "../../../../core/common-components/entity-form/entity-form.service";
import { FormFieldConfig } from "../../../../core/common-components/entity-form/FormConfig";
import { DynamicComponent } from "../../../../core/config/dynamic-components/dynamic-component.decorator";
import { EditComponent } from "../../../../core/entity/entity-field-edit/dynamic-edit/edit-component.interface";
import { Entity } from "../../../../core/entity/model/entity";
import { Todo } from "../../model/todo";
import { TodoCompletion } from "../../model/todo-completion";
import { TodoService } from "../../todo.service";
import { DisplayTodoCompletionComponent } from "../display-todo-completion/display-todo-completion.component";
import { FaDynamicIconComponent } from "#src/app/core/common-components/fa-dynamic-icon/fa-dynamic-icon.component";
@DynamicComponent("EditTodoCompletion")
@Component({
selector: "app-edit-todo-completion",
templateUrl: "./edit-todo-completion.component.html",
styleUrls: ["./edit-todo-completion.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
MatButtonModule,
FontAwesomeModule,
DisplayTodoCompletionComponent,
MatTooltipModule,
FaDynamicIconComponent,
],
providers: [
{ provide: MatFormFieldControl, useExisting: EditTodoCompletionComponent },
],
})
export class EditTodoCompletionComponent
extends CustomFormControlDirective<TodoCompletion>
implements EditComponent
{
formFieldConfig = input<FormFieldConfig>();
entity = input<Entity>() as InputSignal<Todo>;
private readonly entityFormService = inject(EntityFormService);
private readonly todoService = inject(TodoService);
private readonly dialogRef? = inject(MatDialogRef, { optional: true });
async completeTodo() {
if (this.formControl.parent?.dirty) {
// we assume the user always wants to save pending changes rather than discard them
await this.entityFormService.saveChanges(
{ formGroup: this.formControl.parent } as any,
this.entity(),
);
}
await this.todoService.completeTodo(this.entity());
if (this.dialogRef) {
this.dialogRef.close();
}
}
async uncompleteTodo() {
await this.todoService.uncompleteTodo(this.entity());
}
}
@if (entity()?.isNew) {
<!-- hide while creating new task -->
} @else if (!valueSignal()) {
<button mat-raised-button color="accent" (click)="completeTodo()">
<app-fa-dynamic-icon
icon="check"
class="margin-right-small"
></app-fa-dynamic-icon>
<span i18n>Complete Task</span>
</button>
} @else {
<div class="flex-row align-center gap-regular">
<app-display-todo-completion
[value]="valueSignal()"
></app-display-todo-completion>
<button
mat-icon-button
color="accent"
(click)="uncompleteTodo()"
matTooltip="mark as incomplete again"
i18n-matTooltip="todo uncomplete button tooltip"
>
<app-fa-dynamic-icon icon="undo-alt"></app-fa-dynamic-icon>
</button>
</div>
}
./edit-todo-completion.component.scss
@use "variables/sizes";
:host {
display: inline-block;
padding: sizes.$regular;
}