@WidgetComponent
File
Implements
Metadata
| providers |
EditAttributeService
|
| selector |
nm-shop-category-properties-popup.component |
| templateUrl |
./shop-category-properties-popup.component.html |
Index
Widget inputs
|
|
|
Widget outputs
|
|
|
Properties
|
|
|
Methods
|
|
|
Constructor
constructor(dialogRef: MatDialogRef, _editAttributeService: EditAttributeService)
|
|
|
|
|
Methods
|
closeDialog
|
closeDialog()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
toggleVisibility
|
toggleVisibility(attribute: )
|
|
|
Parameters :
| Name |
Optional |
| attribute |
no
|
|
|
Public
_editAttributeService
|
_editAttributeService: EditAttributeService
|
Type : EditAttributeService
|
|
|
|
Public
_id
|
_id:
|
Decorators : WidgetId
|
|
|
|
Public
attributes
|
attributes: Attribute[]
|
Type : Attribute[]
|
|
|
|
Public
changedAttributes
|
changedAttributes: Attribute[]
|
Type : Attribute[]
|
Default value : []
|
|
|
|
Public
data
|
data: any
|
Type : any
|
|
|
|
Public
form
|
form: any
|
Type : any
|
|
|
|
Public
formDataInput
|
formDataInput:
|
|
|
|
Public
formDataOutput
|
formDataOutput:
|
|
|
|
Public
unsubscribe
|
unsubscribe:
|
Default value : NgUnsubscribe.create()
|
|
|
import { takeUntil } from "rxjs/operators";
import { Component, OnDestroy, OnInit } from "@angular/core";
import { MatDialogRef } from "@angular/material/dialog";
import { WidgetConfig } from "../../../widget.configuration";
import {
WidgetComponent,
WidgetConfiguration,
WidgetId,
} from "../../../widget.metadata";
import { FormGroup } from "@angular/forms";
import { Attribute } from "../../../../components/edit-attribute/attribute";
import { EditAttributeService } from "../../../../components/edit-attribute/edit-attribute.service";
import { NgUnsubscribe } from "../../../../ng-unsubscribe";
@WidgetComponent("nm-shop-category-properties-popup")
@Component({
selector: "nm-shop-category-properties-popup.component",
templateUrl: "./shop-category-properties-popup.component.html",
providers: [EditAttributeService],
})
export class ShopCategoryPropertiesPopupComponent implements OnInit, OnDestroy {
@WidgetId()
public _id;
@WidgetConfiguration()
public configuration: WidgetConfig;
public unsubscribe = NgUnsubscribe.create();
public title: string;
public form: any;
public category: string;
public action;
public data: any;
public formDataInput;
public formDataOutput;
public formGroup: FormGroup;
public attributes: Attribute[];
public isPublished: boolean;
public changedAttributes: Attribute[] = [];
public pUBLISHED_deD: Attribute;
constructor(
public dialogRef: MatDialogRef<ShopCategoryPropertiesPopupComponent>,
public _editAttributeService: EditAttributeService
) {}
ngOnInit() {
this.attributes = this.data.properties["default"];
this.action = this.data._actions["my-shopmat-save-properties"];
for (var attribute of this.attributes) {
if (attribute.identifier === "PUBLISHED_deDE") {
this.pUBLISHED_deD = attribute;
this.isPublished = attribute.source[0].value == "true";
}
}
this._editAttributeService
.getAttributeChangedEvent()
.pipe(takeUntil(this.unsubscribe))
.subscribe((attribute) => {
let dublicate = this.changedAttributes.filter(
(item) => item.identifier == attribute.identifier
);
if (dublicate.length === 1) {
dublicate[0].source = attribute.source;
} else {
this.changedAttributes.push(attribute);
this.action.payload.attributes = this.changedAttributes;
}
});
}
toggleVisibility(attribute) {
this.isPublished = !this.isPublished;
attribute.source[0].value = this.isPublished;
let dublicate = this.changedAttributes.filter(
(item) => item.identifier == attribute.identifier
);
if (dublicate.length === 1) {
dublicate[0].source = attribute.source;
} else {
this.changedAttributes.push(attribute);
this.action.payload.attributes = this.changedAttributes;
}
}
closeDialog() {
this.dialogRef.close(this.isPublished);
}
ngOnDestroy(): void {
this.unsubscribe.destroy();
}
}
<nm-dialog
[dialogRef]="dialogRef"
class="nm-dialog"
style="max-width: 450px; width: 450px; min-width: 450px"
>
<ng-container slot="title">
{{ title | translate }}
<span *ngFor="let attribute of attributes">
<span
class="nm-toggle-colored-inheader"
popover="{{ attribute.description }}"
*ngIf="attribute.identifier == 'PUBLISHED_deDE'"
>
<mat-slide-toggle
[checked]="this.isPublished"
(change)="toggleVisibility(attribute)"
>
</mat-slide-toggle>
</span>
</span>
</ng-container>
<ng-container slot="content">
<h5 style="margin: 20px 5px 5px">{{ category }}</h5>
<p-dataGrid [value]="attributes" [rows]="1000" [paginator]="false">
<ng-template let-attribute pTemplate="body">
<div
class="nm-attribute-list-elements"
*ngIf="attribute.identifier != 'PUBLISHED_deDE'"
>
<div class="nm-attribute-list-description">
{{ attribute.description }}
</div>
<div class="nm-attribute-list-value">
<nm-edit-attribute
[attribute]="attribute"
editLayout="list"
[editAttributeService]="_editAttributeService"
></nm-edit-attribute>
</div>
</div>
</ng-template>
</p-dataGrid>
<br />
<br />
<div style="float: right; padding-right: 15px">
<button
#actionButton
mat-raised-button
type="button"
class="btn-orange"
[nm-action]="action"
[action-name]="'my-shopmat-save-properties'"
style="margin-bottom: 15px"
(click)="closeDialog()"
>
{{ "button.save" | translate }}
</button>
</div>
</ng-container>
</nm-dialog>
Legend
Html element with directive