Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(chat): ability to provide template as chat title (#2920)
- Loading branch information
1 parent
f94fd77
commit 9ccec64
Showing
10 changed files
with
230 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
src/framework/theme/components/chat/chat-title.directive.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { Component } from '@angular/core'; | ||
| import { NoopAnimationsModule } from '@angular/platform-browser/animations'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { NbThemeModule, NbChatModule, NbChatComponent } from '@nebular/theme'; | ||
|
|
||
| @Component({ | ||
| template: ` | ||
| <nb-chat [title]="title"> | ||
| <ng-template nbChatTitle [context]="{ text: contextTemplateText }" let-data> | ||
| {{ staticTemplateText }} {{ data.text }} | ||
| </ng-template> | ||
| <nb-chat-message | ||
| *ngFor="let msg of messages" | ||
| [type]="msg.type" | ||
| [message]="msg.text" | ||
| [reply]="msg.reply" | ||
| [sender]="msg.user.name" | ||
| [date]="msg.date" | ||
| [avatar]="msg.user.avatar" | ||
| [customMessageData]="msg.optionalData" | ||
| > | ||
| <div *nbCustomMessage="'link'; let data"> | ||
| <a [href]="data.href">{{ data.label }}</a> | ||
| </div> | ||
| </nb-chat-message> | ||
| <nb-chat-form [dropFiles]="false"> </nb-chat-form> | ||
| </nb-chat> | ||
| `, | ||
| }) | ||
| export class NbChatTitleTemplateTestComponent { | ||
| messages = [ | ||
| { | ||
| reply: false, | ||
| type: 'link', | ||
| optionalData: { | ||
| href: 'https://akveo.github.io/ngx-admin/', | ||
| label: 'Visit Akveo Nebular', | ||
| }, | ||
| date: new Date(), | ||
| user: { | ||
| name: 'Frodo Baggins', | ||
| avatar: 'https://i.gifer.com/no.gif', | ||
| }, | ||
| }, | ||
| { | ||
| text: 'Hello, how are you?', | ||
| reply: true, | ||
| type: 'text', | ||
| date: new Date(), | ||
| user: { | ||
| name: 'Bilbo Baggins', | ||
| avatar: '', | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
||
| title = 'chat title'; | ||
| staticTemplateText = 'staticTemplateText'; | ||
| contextTemplateText = 'contextTemplateText'; | ||
| } | ||
|
|
||
| describe('NbChatTitleDirective', () => { | ||
| let fixture: ComponentFixture<NbChatTitleTemplateTestComponent>; | ||
| let testComponent: NbChatTitleTemplateTestComponent; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [NoopAnimationsModule, NbThemeModule.forRoot(), NbChatModule], | ||
| declarations: [NbChatTitleTemplateTestComponent], | ||
| }); | ||
|
|
||
| fixture = TestBed.createComponent(NbChatTitleTemplateTestComponent); | ||
| testComponent = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should render title template if provided', () => { | ||
| const chatHeaderElement: HTMLElement = fixture.debugElement | ||
| .query(By.directive(NbChatComponent)) | ||
| .query(By.css('.header')).nativeElement; | ||
| const expectedText = ` ${testComponent.staticTemplateText} ${testComponent.contextTemplateText} `; | ||
|
|
||
| expect(chatHeaderElement.textContent).toEqual(expectedText); | ||
| }); | ||
|
|
||
| it('should not render text title if template title is provided', () => { | ||
| const chatHeaderElement: HTMLElement = fixture.debugElement | ||
| .query(By.directive(NbChatComponent)) | ||
| .query(By.css('.header')).nativeElement; | ||
|
|
||
| expect(chatHeaderElement.textContent).not.toContain(testComponent.title); | ||
| }); | ||
| }); |
10 changes: 10 additions & 0 deletions
10
src/framework/theme/components/chat/chat-title.directive.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { Directive, Input, TemplateRef } from '@angular/core'; | ||
|
|
||
| @Directive({ | ||
| selector: `[nbChatTitle]`, | ||
| }) | ||
| export class NbChatTitleDirective { | ||
| @Input() context: Object = {}; | ||
|
|
||
| constructor(public templateRef: TemplateRef<any>) {} | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
src/playground/with-layout/chat/chat-template-title.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <nb-chat size="large"> | ||
| <ng-template nbChatTitle [context]="{ text: 'some text to pass into template' }" let-data> | ||
| <div>Chat title content from template. Here is the text provided via context: "{{ data.text }}"</div> | ||
| </ng-template> | ||
|
|
||
| <nb-chat-message | ||
| *ngFor="let msg of messages" | ||
| [type]="msg.type" | ||
| [message]="msg.text" | ||
| [reply]="msg.reply" | ||
| [sender]="msg.user.name" | ||
| [date]="msg.date" | ||
| [files]="msg.files" | ||
| [quote]="msg.quote" | ||
| [latitude]="msg.latitude" | ||
| [longitude]="msg.longitude" | ||
| [avatar]="msg.user.avatar" | ||
| > | ||
| </nb-chat-message> | ||
| <nb-chat-form (send)="sendMessage($event)" [dropFiles]="true"> </nb-chat-form> | ||
| </nb-chat> |
61 changes: 61 additions & 0 deletions
61
src/playground/with-layout/chat/chat-template-title.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Akveo. All Rights Reserved. | ||
| * Licensed under the MIT License. See License.txt in the project root for license information. | ||
| */ | ||
|
|
||
| import { Component } from '@angular/core'; | ||
| import { ChatShowcaseService } from './chat-showcase.service'; | ||
|
|
||
| @Component({ | ||
| templateUrl: './chat-template-title.component.html', | ||
| providers: [ChatShowcaseService], | ||
| styles: [ | ||
| ` | ||
| ::ng-deep nb-layout-column { | ||
| justify-content: center; | ||
| display: flex; | ||
| } | ||
| nb-chat { | ||
| width: 500px; | ||
| } | ||
| `, | ||
| ], | ||
| }) | ||
| export class ChatTemplateTitleComponent { | ||
| messages: any[]; | ||
|
|
||
| constructor(protected chatShowcaseService: ChatShowcaseService) { | ||
| this.messages = this.chatShowcaseService.loadMessages(); | ||
| } | ||
|
|
||
| sendMessage(event: any) { | ||
| const files = !event.files | ||
| ? [] | ||
| : event.files.map((file) => { | ||
| return { | ||
| url: file.src, | ||
| type: file.type, | ||
| icon: 'file-text-outline', | ||
| }; | ||
| }); | ||
|
|
||
| this.messages.push({ | ||
| text: event.message, | ||
| date: new Date(), | ||
| reply: true, | ||
| type: files.length ? 'file' : 'text', | ||
| files: files, | ||
| user: { | ||
| name: 'Jonh Doe', | ||
| avatar: 'https://i.gifer.com/no.gif', | ||
| }, | ||
| }); | ||
| const botReply = this.chatShowcaseService.reply(event.message); | ||
| if (botReply) { | ||
| setTimeout(() => { | ||
| this.messages.push(botReply); | ||
| }, 500); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters