Skip to content

Commit 1971a9a

Browse files
alfredfrancisalfredfrancis
committed
added basic ui layout for intent module
1 parent 7ca1593 commit 1971a9a

File tree

3 files changed

+52
-32
lines changed

3 files changed

+52
-32
lines changed

‎frontend/src/app/agent/intent/intent.component.html

Lines changed: 43 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,68 +11,81 @@ <h2>{{message}}</h2>
1111
</mat-form-field>
1212

1313
<h2 >Parameters
14-
<button type="button" (click)="addParameter()" mat-button>add</button>
14+
<button mat-mini-fab (click)="addParameter()" color="primary">
15+
<mat-icon aria-label="New Parameter" >add</mat-icon>
16+
</button>
1517
</h2>
1618
<section class="parameters" formArrayName="parameters">
17-
<div *ngFor="let paremeter of storyForm.controls.parameters.controls; let i=index;">
19+
<div *ngFor="let paremeter of storyForm.controls.parameters.controls; let i=index;" class="parameter">
1820

19-
<div [formGroup]="paremeter">
20-
<mat-form-field>
21-
<textarea matInput formControlName="name" placeholder="Parameter name"></textarea>
21+
<div [formGroup]="paremeter" fxLayout="row" fxLayoutGap="10px" >
22+
<mat-form-field fxFlex="30">
23+
<input matInput formControlName="name" placeholder="Parameter name">
2224
</mat-form-field>
2325

24-
<mat-form-field class="col-md-4">
26+
<mat-form-field class="col-md-4" fxFlex="10">
2527
<mat-select formControlName="type" placeholder="Parameter type">
2628
<mat-option *ngFor="let story of storyTypesArray" [value]="story">
2729
{{ storyTypes[story] }}
2830
</mat-option>
2931
</mat-select>
3032
</mat-form-field>
31-
32-
<mat-checkbox formControlName="required">Required</mat-checkbox>
33-
34-
<mat-form-field *ngIf="paremeter.controls.required.value">
33+
<mat-checkbox formControlName="required" fxFlex="10">Required</mat-checkbox>
34+
<mat-form-field *ngIf="paremeter.controls.required.value" fxFlex="45">
3535
<textarea matInput formControlName="prompt" placeholder="Message to prompt when require"></textarea>
3636
</mat-form-field>
3737

38-
<button type="button" class="col-md-1" (click)="deleteParameter(i)" mat-button>delete</button>
38+
<button mat-icon-button (click)="deleteParameter(i)" >
39+
<mat-icon aria-label="Delete this intent">delete</mat-icon>
40+
</button>
3941
</div>
4042
</div>
4143

4244

4345
</section>
4446

4547

46-
<h2 >
48+
<h3 >
4749
<mat-checkbox formControlName="apiTrigger">API trigger</mat-checkbox>
48-
</h2>
49-
<section [formGroup]="storyForm.controls.apiDetails" *ngIf="apiTrigger()">
50+
</h3>
51+
<section [formGroup]="storyForm.controls.apiDetails" *ngIf="apiTrigger()" fxLayout="column" fxLayoutGap="10px" >
5052

51-
<mat-checkbox formControlName="isJson">JSON</mat-checkbox>
5253

53-
<mat-form-field >
54-
<textarea matInput formControlName="url" placeholder="API url"></textarea>
55-
</mat-form-field>
5654

57-
<mat-form-field >
58-
<mat-select formControlName="requestType" placeholder="API method">
59-
<mat-option value="GET">GET</mat-option>
60-
<mat-option value="POST">POST</mat-option>
61-
<mat-option value="PUT">PUT</mat-option>
62-
<mat-option value="DELETE">DELETE</mat-option>
63-
</mat-select>
64-
</mat-form-field>
55+
<div fxLayout="row" fxLayoutGap="20px" >
56+
<mat-form-field fxFlex="90">
57+
<input matInput formControlName="url" placeholder="API url">
58+
</mat-form-field>
59+
60+
<mat-form-field fxFlex="10">
61+
<mat-select formControlName="requestType" placeholder="API method">
62+
<mat-option value="GET">GET</mat-option>
63+
<mat-option value="POST">POST</mat-option>
64+
<mat-option value="PUT">PUT</mat-option>
65+
<mat-option value="DELETE">DELETE</mat-option>
66+
</mat-select>
67+
</mat-form-field>
68+
</div>
6569

66-
<mat-form-field class="full-width">
67-
<textarea matInput formControlName="jsonData" placeholder="JsonData"></textarea>
70+
<mat-checkbox formControlName="isJson">JSON payload</mat-checkbox>
71+
<div *ngIf="storyForm.value.apiDetails.isJson">
72+
Extracted parameters can be used to build your json. Example, <pre> {{ '\{
73+
"name": \{\{ parameters\[\"name\"\] \}\}
74+
\}' }}</pre>
75+
</div>
76+
<mat-form-field class="full-width" *ngIf="storyForm.value.apiDetails.isJson">
77+
<textarea matInput formControlName="jsonData" placeholder="JsonData" rows="8" placeholder="JSON payload"></textarea>
6878
</mat-form-field>
79+
6980
</section>
81+
<br>
7082
<mat-form-field class="full-width">
71-
<textarea matInput formControlName="speechResponse" placeholder="Speech Response"></textarea>
83+
<textarea matInput formControlName="speechResponse" placeholder="Speech Response" rows="5" ></textarea>
7284
</mat-form-field>
7385

7486
<p>
75-
Extracted parameters and api call response can be accessed from speech respone using "parameters" and "result" objects respectively
87+
Extracted parameters and api call response can be accessed from speech respone using "parameters" and "result" objects respectively.
88+
<a href="http://jinja.pocoo.org/docs/2.10/templates/" target="_blank">Jinja</a> Templating enabled.
7689
</p>
7790

7891

‎frontend/src/app/agent/intent/intent.component.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,13 @@ mat-card{
33
.full-width {
44
width: 100%;
55
}
6+
.parameter{
7+
padding:15px;
8+
margin-bottom: 10px;
9+
}
10+
pre{
11+
background-color:lightgray;
12+
padding: 5px;
13+
}
614
}
715

‎frontend/src/app/agent/intent/intent.component.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export class IntentComponent implements OnInit {
8080
const fields = {
8181
name: [''],
8282
type: [''],
83-
required: [''],
83+
required: [false],
8484
prompt: ['']
8585
};
8686
const g = this.fb.group(fields);
@@ -98,7 +98,6 @@ export class IntentComponent implements OnInit {
9898

9999
initApiDetails(parameter = null) {
100100
const fields = {
101-
102101
isJson: [''],
103102
url: [''],
104103
requestType: [''],

0 commit comments

Comments
 (0)