mirror of
https://github.com/turt2live/matrix-dimension.git
synced 2024-10-01 05:05:53 +00:00
Move widget configuration template out to its own component
This commit is contained in:
parent
1407718999
commit
111423cc7d
@ -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
|
||||
|
@ -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,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() {
|
||||
}
|
||||
}
|
@ -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>
|
Loading…
Reference in New Issue
Block a user