Skip to content

Commit 3c52392

Browse files
JEAxeroJEAxero
authored
Add TextContent component (#7)
1 parent 3c09813 commit 3c52392

File tree

9 files changed

+152
-4
lines changed

9 files changed

+152
-4
lines changed

‎src/app/_components/_forms/text-content/config.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "TextContent",
3+
"description": "Text",
4+
"type": "Field",
5+
"subtype": "DATA_DISPLAY",
6+
"icon": "images/text-content.svg",
7+
"properties": [
8+
{
9+
"format": "SELECT",
10+
"name": "displayAs",
11+
"label": "Component",
12+
"defaultValue": "Paragraph",
13+
"source": [
14+
{ "key": "Paragraph", "value": "Paragraph" },
15+
{ "key": "Heading 1", "value": "Heading 1" },
16+
{ "key": "Heading 2", "value": "Heading 2" },
17+
{ "key": "Heading 3", "value": "Heading 3" },
18+
{ "key": "Heading 4", "value": "Heading 4" }
19+
]
20+
},
21+
{
22+
"name": "content",
23+
"label": " ",
24+
"format": "TEXT",
25+
"multiline": true
26+
}
27+
]
28+
}

‎src/app/_components/_forms/text-content/text-content.component.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="psdk-data-readonly">
2+
<div *ngIf="displayAs$=='Paragraph'" class="mat-body-1">{{content$}}</div>
3+
<div *ngIf="displayAs$=='Heading 1'" class="mat-h1">{{content$}}</div>
4+
<div *ngIf="displayAs$=='Heading 2'" class="mat-h2">{{content$}}</div>
5+
<div *ngIf="displayAs$=='Heading 3'" class="mat-h3">{{content$}}</div>
6+
<div *ngIf="displayAs$=='Heading 4'" class="mat-h4">{{content$}}</div>
7+
</div>

‎src/app/_components/_forms/text-content/text-content.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.psdk-data-readonly {
2+
margin-top: 0.625rem;
3+
width: 100%;
4+
}

‎src/app/_components/_forms/text-content/text-content.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2+
3+
import { TextContentComponent } from './text-content.component';
4+
5+
describe('TextContentComponent', () => {
6+
let component: TextContentComponent;
7+
let fixture: ComponentFixture<TextContentComponent>;
8+
9+
beforeEach(waitForAsync(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ TextContentComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(TextContentComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/_components/_forms/text-content/text-content.component.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Component, OnInit, Input } from '@angular/core';
2+
import { Utils } from "../../../_helpers/utils";
3+
import { AngularPConnectService } from "../../../_bridge/angular-pconnect";
4+
import { interval } from "rxjs/internal/observable/interval";
5+
6+
// import * as moment from "moment";
7+
8+
@Component({
9+
selector: 'app-text-content',
10+
templateUrl: './text-content.component.html',
11+
styleUrls: ['./text-content.component.scss']
12+
})
13+
export class TextContentComponent implements OnInit {
14+
@Input() pConn$: any;
15+
16+
configProps$ : Object;
17+
18+
content$: string = "";
19+
displayAs$: string;
20+
21+
// Used with AngularPConnect
22+
angularPConnectData: any = {};
23+
24+
25+
constructor( private angularPConnect: AngularPConnectService,
26+
private utils: Utils ) {
27+
28+
}
29+
30+
ngOnInit(): void {
31+
32+
// First thing in initialization is registering and subscribing to the AngularPConnect service
33+
this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
34+
35+
// Then, continue on with other initialization
36+
37+
// call updateSelf when initializing
38+
this.updateSelf();
39+
40+
41+
}
42+
43+
ngOnDestroy(): void {
44+
45+
if (this.angularPConnectData.unsubscribeFn) {
46+
this.angularPConnectData.unsubscribeFn();
47+
}
48+
}
49+
50+
51+
52+
53+
// updateSelf
54+
updateSelf(): void {
55+
// moved this from ngOnInit() and call this from there instead...
56+
this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
57+
if (this.configProps$["content"] != undefined) {
58+
this.content$ = this.configProps$["content"];
59+
}
60+
if (this.configProps$["displayAs"] != undefined) {
61+
this.displayAs$ = this.configProps$["displayAs"];
62+
}
63+
64+
// Any update to content or displayAs will re-render this component.
65+
// All rendering logic is in the .html file.
66+
67+
}
68+
69+
// Callback passed when subscribing to store change
70+
onStateChange() {
71+
// Should always check the bridge to see if the component should
72+
// update itself (re-render)
73+
const bUpdateSelf = this.angularPConnect.shouldComponentUpdate( this );
74+
75+
// ONLY call updateSelf when the component should update
76+
if (bUpdateSelf) {
77+
this.updateSelf();
78+
}
79+
}
80+
81+
}

‎src/app/_components/_templates/default-form/default-form.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<app-view *ngSwitchCase="'View'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-view>
88
<app-utility *ngSwitchCase="'Utility'" [pConn$]="kid.getPConnect()"></app-utility>
99
<app-text-input *ngSwitchCase="'TextInput'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-text-input>
10+
<app-text-content *ngSwitchCase="'TextContent'" [pConn$]="kid.getPConnect()"></app-text-content>
1011
<app-text-area *ngSwitchCase="'TextArea'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-text-area>
1112
<app-check-box *ngSwitchCase="'Checkbox'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-check-box>
1213
<app-integer *ngSwitchCase="'Integer'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-integer>
@@ -27,7 +28,7 @@
2728
<app-user-reference *ngSwitchCase="'UserReference'" [pConn$]="kid.getPConnect()"></app-user-reference>
2829
<app-file-utility *ngSwitchCase="'FileUtility'" [pConn$]="kid.getPConnect()"></app-file-utility>
2930
<app-attachment *ngSwitchCase="'Attachment'" [pConn$]="kid.getPConnect()"></app-attachment>
30-
<div *ngSwitchDefault >Region Missing: {{kid.getPConnect().getComponentName()}}</div>
31+
<div *ngSwitchDefault >Default-Form wants component not yet available: {{kid.getPConnect().getComponentName()}}</div>
3132
</div>
3233
</div>
3334
</div>

‎src/app/_components/assignment-card/assignment-card.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div [ngSwitch]="kid.getPConnect().getComponentName()">
44
<app-view *ngSwitchCase="'View'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-view>
55
<app-case-create-stage *ngSwitchCase="'CaseCreateStage'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-case-create-stage>
6-
<div *ngSwitchDefault>Assignment Card missing Component: {{kid.getPConnect().getComponentName()}}</div>
6+
<div *ngSwitchDefault>Assignment Card wants component not yet available: {{kid.getPConnect().getComponentName()}}</div>
77
</div>
88

99
</div>

‎src/app/_components/region/region.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<app-utility *ngSwitchCase="'Utility'" [pConn$]="kid.getPConnect()"></app-utility>
88
<app-text-input *ngSwitchCase="'TextInput'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-text-input>
99
<app-text-area *ngSwitchCase="'TextArea'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-text-area>
10+
<app-text-content *ngSwitchCase="'TextContent'" [pConn$]="kid.getPConnect()"></app-text-content>
1011
<app-check-box *ngSwitchCase="'Checkbox'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-check-box>
1112
<app-integer *ngSwitchCase="'Integer'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-integer>
1213
<app-date-time *ngSwitchCase="'DateTime'" [formGroup$]="formGroup$" [pConn$]="kid.getPConnect()"></app-date-time>
@@ -27,6 +28,6 @@
2728
<app-file-utility *ngSwitchCase="'FileUtility'" [pConn$]="kid.getPConnect()"></app-file-utility>
2829
<app-attachment *ngSwitchCase="'Attachment'" [pConn$]="kid.getPConnect()"></app-attachment>
2930
<app-case-history *ngSwitchCase="'CaseHistory'" [pConn$]="kid.getPConnect()"></app-case-history>
30-
<div *ngSwitchDefault >Region Missing: {{kid.getPConnect().getComponentName()}}</div>
31+
<div *ngSwitchDefault >Region wants component not yet available: {{kid.getPConnect().getComponentName()}}</div>
3132
</div>
3233
</div>

‎src/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ import { APP_BASE_HREF } from '@angular/common';
7777
import { FeedContainerComponent } from './_components/feed-container/feed-container.component';
7878
import { AutoCompleteComponent } from './_components/_forms/auto-complete/auto-complete.component';
7979
import { TextComponent } from './_components/_forms/text/text.component';
80+
import { TextContentComponent } from './_components/_forms/text-content/text-content.component';
8081
import { ActionButtonsComponent } from './_components/action-buttons/action-buttons.component';
8182
import { AssignmentCardComponent } from './_components/assignment-card/assignment-card.component';
8283
import { MultiStepComponent } from './_components/multi-step/multi-step.component';
@@ -127,7 +128,6 @@ import { NarrowWideFormComponent } from './_components/_templates/narrow-wide-fo
127128
import { WideNarrowFormComponent } from './_components/_templates/wide-narrow-form/wide-narrow-form.component';
128129

129130

130-
131131
@NgModule({
132132
declarations: [
133133
AppComponent,
@@ -167,6 +167,7 @@ import { WideNarrowFormComponent } from './_components/_templates/wide-narrow-fo
167167
FeedContainerComponent,
168168
AutoCompleteComponent,
169169
TextComponent,
170+
TextContentComponent,
170171
ActionButtonsComponent,
171172
AssignmentCardComponent,
172173
MultiStepComponent,

0 commit comments

Comments
 (0)