Skip to content

Commit

Permalink
UI changed: cds-header, cds-sidebar, cds-panel-intent-list, cds-panel…
Browse files Browse the repository at this point in the history 
…-elements
  • Loading branch information
Gabriele Panico committed Oct 10, 2023
1 parent 8c0f47d commit 3d18f48
Show file tree
Hide file tree
Showing 28 changed files with 636 additions and 295 deletions.
6 changes: 3 additions & 3 deletions ...s/actions/list/cds-action-capture-user-reply/cds-action-capture-user-reply.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@

<div id="capture-user-reply" class="previewContent">

<label class="title-preview-label">Capture user reply
<span *ngIf="action?.assignResultTo">to </span>
<label class="title-preview-label">Capture user reply to
<span *ngIf="!action?.assignResultTo" class="action-row-right empty">select attribute</span>
<span *ngIf="action?.assignResultTo" style="font-weight: 600;">{{ action?.assignResultTo }}</span>

</label>
Expand Down Expand Up @@ -64,7 +64,7 @@
<div style="margin-top: 40px;">
<div class="condition-container">
<div class="icon-action">
<img src="assets/cds/images/actions/connect_intent.svg">
<img src="assets/images/actions/connect_intent.svg">
</div>
<span class="condition-text">Then go to block</span>
</div>
Expand Down
25 changes: 25 additions & 0 deletions ...anvas/actions/list/cds-action-gpt-task/attributes-dialog/attributes-dialog.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<div class="tpl-modal-box">
<div class="tpl-modal-header">
<div class="tpl-modal-header-text">
<span>Set Attributes</span>
</div>
<i text-color="light" class="material-icons cds-close-btn-icon" [mat-dialog-close]="false">close</i>
</div>

<form>
<div class="tpl-modal-content">

<div *ngFor="let attr of data.attributes" style="margin-bottom: 14px;">
<div class="attr-container">{{ attr.name }}</div>
<input class="tpl-input" name="{{attr.name}}" [(ngModel)]="attr.value" (input)="onChangeInput()" (keyup.enter)="setVarBtn.click()">
</div>

</div>
<div class="tpl-modal-buttons">
<button id="cds-cancel-btn" class="btn btn-cancel" type="button" [mat-dialog-close]="false">Cancel</button>
<button #setVarBtn id="cds-publish-btn" class="btn btn-primary set-var-btn" type="button" [disabled]="btn_disabled"
(click)="onGenerateClick()">Generate
</button>
</div>
</form>
</div>
177 changes: 177 additions & 0 deletions ...anvas/actions/list/cds-action-gpt-task/attributes-dialog/attributes-dialog.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
::ng-deep .custom-dialog-container {
width: 40vw!important;
min-width: 500px;
max-width: 1000px!important;
mat-dialog-container {
padding: 0;
}


.tpl-modal-box {
border-radius: 6px;
flex-direction: column;
background: rgb(255, 255, 255);
}
.tpl-modal-header {
align-items: flex-start;
align-items: center;
border-bottom: 1px solid #dbe1e8;
display: flex;
flex-shrink: 0;
justify-content: center;
padding: 15px;
width: 100%;
i {
flex-shrink: 0;
font-size: 24px;
line-height: 23px;
margin-left: auto;
cursor: pointer;
}
}

.tpl-modal-header-text {
flex-grow: 1;
padding-right: 15px;
text-align: center;
width: 0;
span {
word-wrap: break-word;
display: -webkit-box;
line-height: 23px;
overflow: hidden;
text-overflow: ellipsis;
max-height: 69px;
font-weight: 600;
font-size: 18px;
}
}

.tpl-modal-content {
flex-grow: 1;
padding: 30px 25px;
width: 100%;
}

.tpl-info {
border-radius: 4px;
display: flex;
margin-bottom: 20px;
padding: 12px 15px;
width: 100%;
color: #333;
background: #ecb606b0;
.tpl-info-icon {
font-size: 20px;
height: 20px;
flex-shrink: 0;
width: 35px;
}
}
.tpl-label-textarea {
margin-bottom: 5px;
color: #22272d;
font-size: 15px;
line-height: 19px;
}

.tpl-input {
background: #fff;
border: 2px solid #c6cdd4;
border-radius: 6px;
color: #22272d;
display: block;
font-weight: 400;
height: 37px;
line-height: 35px;
padding: 0 15px;
-webkit-transition: border .3s;
transition: border .3s;
width: 100%;
&::placeholder {
opacity: 0.5;
}
&.invalid{
border: 2px solid red !important;
outline: 0px solid red !important;
transition: border 0.3s;
}
}

.tpl-modal-buttons {
display: flex;
flex-shrink: 0;
justify-content: flex-end;
padding: 0 25px 20px;
color: #333;
.cds-yellow-button{
margin-left: 10px;
min-width: 80px;
background-color: #ecb606b0;
height: 100%;
color: #333;
}
.btn-cancel {
min-width: 80px;
border: 0;
height: 100%;
}
}
}

.input-error {
position: absolute;
font-size: 14px;
color: red;
}

.attr-container {
font-size: 14px;
font-weight: 400;
background: #ecb606;
width: -moz-fit-content;
width: fit-content;
padding: 2px 6px;
border-radius: 4px;
color: #fff;
line-height: 1.5;
margin-bottom: 2px;
}

#cds-publish-btn {
background: #006cff;
color: #fff;
box-shadow: none;
font-weight: 500;
font-family: Poppins, Roboto, Arial, sans-serif;
text-transform: capitalize;
font-size: 14px;
padding: 6px 12px;
border-radius: 10px;
}

#cds-publish-btn:hover:enabled {
opacity: .8 !important;
}

#cds-publish-btn:disabled {
opacity: 0.5;
cursor: default;
}

#cds-cancel-btn {
background: #e5e5e5;
color: #4b5052;
box-shadow: none;
font-weight: 500;
font-family: Poppins, Roboto, Arial, sans-serif;
text-transform: capitalize;
font-size: 14px;
padding: 6px 12px;
border-radius: 10px;
margin-right: 6px;
}

#cds-cancel-btn:hover {
opacity: .8 !important;
}
23 changes: 23 additions & 0 deletions ...as/actions/list/cds-action-gpt-task/attributes-dialog/attributes-dialog.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { AttributesDialogComponent } from './attributes-dialog.component';

describe('AttributesDialogComponent', () => {
let component: AttributesDialogComponent;
let fixture: ComponentFixture<AttributesDialogComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AttributesDialogComponent ]
})
.compileComponents();

fixture = TestBed.createComponent(AttributesDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
77 changes: 77 additions & 0 deletions ...-canvas/actions/list/cds-action-gpt-task/attributes-dialog/attributes-dialog.component.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { Component, Inject, OnInit, inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';


@Component({
selector: 'appdashboard-attributes-dialog',
templateUrl: './attributes-dialog.component.html',
styleUrls: ['./attributes-dialog.component.scss']
})
export class AttributesDialogComponent implements OnInit {

btn_disabled: boolean = false;

private logger: LoggerService = LoggerInstance.getInstance();

constructor(
public dialogRef: MatDialogRef<AttributesDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) { }

ngOnInit(): void {
this.logger.debug("[AttributesDialog] data: ", this.data);
if (this.data.attributes.find(a => a.value === null || a.value === '')){
this.btn_disabled = true;
}
}

onCloseDialog(): void {
this.logger.log("[AttributesDialog] - modal CLOSED");
this.dialogRef.close();
}

onChangeInput() {
this.btn_disabled = false;
if (this.data.attributes.find(a => a.value === null || a.value === '')){
this.btn_disabled = true;
}
}

onGenerateClick() {
this.data.attributes.forEach((attr) => {
let old_value = "{{" + attr.name + "}}";
this.data.question = this.data.question.replace(old_value, attr.value);
})

this.logger.log("[AttributesDialog] - onGenerateClick return data: ", this.data);
this.dialogRef.close(this.data);
}


// createConditionGroup(): FormGroup {
// return this.formBuilder.group({
// attributes: this.formBuilder.array([
// this.createAttributesGroup()
// ])
// })
// }

// createAttributesGroup(): FormGroup {
// return this.formBuilder.group({
// name: ['', Validators.required],
// value: ['', Validators.required]
// })
// }

// setFormValue() {
// let attributesControl = <FormArray>this.varsForm.controls.attributes;
// this.data.attributes.forEach((v) => {
// attributesControl.push(v)
// // this.varsForm.patchValue({ attributes: this.data.attributes });
// })
// this.logger.log("varsForm: ", this.varsForm);
// }

}
Loading

0 comments on commit 3d18f48

Please sign in to comment.