Use templating for the edit/add views

This commit is contained in:
Travis Ralston 2017-12-22 21:52:24 -07:00
parent 0b63c8eb85
commit c95ab2bbb2
2 changed files with 32 additions and 58 deletions

View File

@ -2,37 +2,7 @@
<my-spinner></my-spinner> <my-spinner></my-spinner>
</div> </div>
<div *ngIf="!isLoading"> <ng-template #widgetParams let-widget="widget">
<my-ibox title="Add {{ defaultName }}" [isCollapsible]="true" [defaultCollapsed]="defaultExpandedWidgetId">
<div class="my-ibox-content">
<form (submit)="addWidget()" novalidate name="addForm">
<label class="label-block">
Widget Name
<input type="text" class="form-control"
placeholder="{{ defaultName }}"
[(ngModel)]="newWidget.dimension.newName" name="widget-name-new"
[disabled]="isUpdating"/>
</label>
<label class="label-block">
Widget URL
<input type="text" class="form-control"
placeholder="https://matrix.org"
[(ngModel)]="newWidget.dimension.newUrl" name="widget-url-new"
[disabled]="isUpdating"/>
</label>
<button type="submit" class="btn btn-sm btn-success" [disabled]="isUpdating">
<i class="fa fa-plus"></i> Add Widget
</button>
</form>
</div>
</my-ibox>
<my-ibox *ngFor="let widget of widgets trackById"
[isCollapsible]="true" [defaultCollapsed]="widget.id !== defaultExpandedWidgetId"
title="{{ widget.name || widget.url || defaultName }}">
<div class="my-ibox-content">
<form (submit)="saveWidget(widget)" novalidate name="addForm">
<label class="label-block"> <label class="label-block">
Widget Name Widget Name
<input type="text" class="form-control" <input type="text" class="form-control"
@ -47,17 +17,38 @@
[(ngModel)]="widget.dimension.newUrl" name="widget-url-{{widget.id}}" [(ngModel)]="widget.dimension.newUrl" name="widget-url-{{widget.id}}"
[disabled]="isUpdating"/> [disabled]="isUpdating"/>
</label> </label>
</ng-template>
<div *ngIf="!isLoading">
<my-ibox title="Add {{ defaultName }}" [isCollapsible]="true" [defaultCollapsed]="defaultExpandedWidgetId">
<div class="my-ibox-content">
<form (submit)="addWidget()" novalidate name="addForm">
<ng-container *ngTemplateOutlet="widgetParams;context:{widget:newWidget}"></ng-container>
<div style="margin-top: 25px">
<button type="submit" class="btn btn-sm btn-success" [disabled]="isUpdating">
<i class="fa fa-plus"></i> Add Widget
</button>
</div>
</form>
</div>
</my-ibox>
<my-ibox *ngFor="let widget of widgets trackById"
[isCollapsible]="true" [defaultCollapsed]="widget.id !== defaultExpandedWidgetId"
title="{{ widget.name || widget.url || defaultName }}">
<div class="my-ibox-content">
<form (submit)="saveWidget(widget)" novalidate name="addForm">
<ng-container *ngTemplateOutlet="widgetParams;context:{widget:widget}"></ng-container>
<div style="margin-top: 25px">
<button type="submit" class="btn btn-sm btn-primary" [disabled]="isUpdating"> <button type="submit" class="btn btn-sm btn-primary" [disabled]="isUpdating">
<i class="fa fa-save"></i> Save Widget <i class="fa fa-save"></i> Save Widget
</button> </button>
<button type="button" class="btn btn-sm btn-danger" [disabled]="isUpdating"> <button type="button" class="btn btn-sm btn-danger" [disabled]="isUpdating">
<i class="fa fa-times"></i> Remove Widget <i class="fa fa-times"></i> Remove Widget
</button> </button>
<button type="button" class="btn btn-sm btn-white" [disabled]="isUpdating" (click)="resetWidget(widget)" </div>
*ngIf="hasChanges(widget)">
<i class="fa fa-undo"></i> Undo Changes
</button>
</form> </form>
</div> </div>
</my-ibox> </my-ibox>

View File

@ -313,21 +313,4 @@ export class NewWidgetComponent {
this.unpackWidget(widget); this.unpackWidget(widget);
this.OnWidgetPreparedForEdit.emit(widget); this.OnWidgetPreparedForEdit.emit(widget);
} }
/**
* Determines if a widget has had any changes made to it
* @param {EditableWidget} widget The widget to check
* @returns {boolean} True if the widget has been edited
*/
public hasChanges(widget: EditableWidget): boolean {
if (widget.dimension.newUrl !== this.unwrapUrl(widget.url)) return true;
if (widget.dimension.newName !== widget.name) return true;
if (widget.dimension.newTitle !== widget.data.title) return true;
const currentData = JSON.parse(JSON.stringify(widget.data || "{}"));
const newData = JSON.parse(JSON.stringify(widget.dimension.newData || "{}"));
if (currentData !== newData) return true;
return false;
}
} }