asonix/matrix-dimension
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Move widget configuration template out to its own component

Browse source
This commit is contained in:
Travis Ralston 2017-12-22 23:30:42 -07:00
parent 1407718999
commit 111423cc7d
5 changed files with 77 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/app/app.module.ts
View file

@ -33,6 +33,7 @@ import { AdminApiService } from "./shared/services/admin-api.service";
import { ServiceLocator } from "./shared/services/locator.service";
import { IboxComponent } from "./elements/ibox/ibox.component";
import { CustomWidgetConfigComponent } from "./configs/widget/custom/custom.widget.component";
import { ConfigScreenWidgetComponent } from "./configs/widget/config_screen/config_screen.widget.component";
@NgModule({
imports: [
@ -65,6 +66,7 @@ import { CustomWidgetConfigComponent } from "./configs/widget/custom/custom.widg
GCalWidgetWrapperComponent,
RiotHomeComponent,
IboxComponent,
ConfigScreenWidgetComponent,
CustomWidgetConfigComponent,
// Vendor

41
web/app/configs/widget/config_screen/config_screen.component.html Normal file
View file

@ -0,0 +1,41 @@
<div *ngIf="isLoading">
<my-spinner></my-spinner>
</div>
<div *ngIf="!isLoading">
<my-ibox [isCollapsible]="true" [defaultCollapsed]="widgetComponent.defaultExpandedWidgetId">
<h5 class="my-ibox-title">
<i class="far fa-plus-square"></i> Add {{ widgetComponent.defaultName }}
</h5>
<div class="my-ibox-content">
<form (submit)="widgetComponent.addWidget()" novalidate name="addForm">
<ng-container *ngTemplateOutlet="widgetParamsTemplate;context:{widget:widgetComponent.newWidget}"></ng-container>
<div style="margin-top: 25px">
<button type="submit" class="btn btn-sm btn-success" [disabled]="widgetComponent.isUpdating">
<i class="fa fa-plus"></i> Add Widget
</button>
</div>
</form>
</div>
</my-ibox>
<my-ibox *ngFor="let widget of widgetComponent.widgets trackById" [isCollapsible]="true" [defaultCollapsed]="widget.id !== widgetComponent.defaultExpandedWidgetId">
<h5 class="my-ibox-title">
<i class="far fa-edit"></i> {{ widget.name || widget.url || widgetComponent.defaultName }}
</h5>
<div class="my-ibox-content">
<form (submit)="widgetComponent.saveWidget(widget)" novalidate name="editForm">
<ng-container *ngTemplateOutlet="widgetParamsTemplate;context:{widget:widget}"></ng-container>
<div style="margin-top: 25px">
<button type="submit" class="btn btn-sm btn-primary" [disabled]="widgetComponent.isUpdating">
<i class="far fa-save"></i> Save Widget
</button>
<button type="button" class="btn btn-sm btn-danger" [disabled]="widgetComponent.isUpdating" (click)="widgetComponent.removeWidget(widget)">
<i class="far fa-trash-alt"></i> Remove Widget
</button>
</div>
</form>
</div>
</my-ibox>
</div>

0
web/app/configs/widget/config_screen/config_screen.widget.component.scss Normal file
View file

16
web/app/configs/widget/config_screen/config_screen.widget.component.ts Normal file
View file

@ -0,0 +1,16 @@
import { NewWidgetComponent } from "../widget.component";
import { Component, ContentChild, Input, TemplateRef } from "@angular/core";
@Component({
selector: "my-widget-config",
templateUrl: "config_screen.component.html",
styleUrls: ["config_screen.widget.component.scss"],
})
export class ConfigScreenWidgetComponent {
@Input() widgetComponent: NewWidgetComponent;
@ContentChild(TemplateRef) widgetParamsTemplate: TemplateRef<any>;
constructor() {
}
}

77
web/app/configs/widget/custom/custom.widget.component.html
View file

@ -1,59 +1,18 @@
<ng-template #widgetParams let-widget="widget">
<label class="label-block">
Widget Name
<input type="text" class="form-control"
placeholder="{{ defaultName }}"
[(ngModel)]="widget.dimension.newName" name="widget-name-{{widget.id}}"
[disabled]="isUpdating"/>
</label>
<label class="label-block">
Widget URL
<input type="text" class="form-control"
placeholder="https://matrix.org"
[(ngModel)]="widget.dimension.newUrl" name="widget-url-{{widget.id}}"
[disabled]="isUpdating"/>
</label>
</ng-template>
<!-- Annoyingly, this has to be copy/pasted to all the integration configs -->
<div *ngIf="isLoading">
<my-spinner></my-spinner>
</div>
<div *ngIf="!isLoading">
<my-ibox [isCollapsible]="true" [defaultCollapsed]="defaultExpandedWidgetId">
<h5 class="my-ibox-title">
<i class="far fa-plus-square"></i> Add {{ defaultName }}
</h5>
<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">
<h5 class="my-ibox-title">
<i class="far fa-edit"></i> {{ widget.name || widget.url || defaultName }}
</h5>
<div class="my-ibox-content">
<form (submit)="saveWidget(widget)" novalidate name="editForm">
<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">
<i class="far fa-save"></i> Save Widget
</button>
<button type="button" class="btn btn-sm btn-danger" [disabled]="isUpdating" (click)="removeWidget(widget)">
<i class="far fa-trash-alt"></i> Remove Widget
</button>
</div>
</form>
</div>
</my-ibox>
</div>
<my-widget-config [widgetComponent]="this">
<ng-template #widgetParamsTemplate let-widget="widget">
<label class="label-block">
Widget Name
<input type="text" class="form-control"
placeholder="{{ defaultName }}"
[(ngModel)]="widget.dimension.newName" name="widget-name-{{widget.id}}"
[disabled]="isUpdating"/>
</label>
<label class="label-block">
Widget URL
<input type="text" class="form-control"
placeholder="https://matrix.org"
[(ngModel)]="widget.dimension.newUrl" name="widget-url-{{widget.id}}"
[disabled]="isUpdating"/>
</label>
</ng-template>
</my-widget-config>