From 69d326dfdd058fa3296f55cb41d107defacb972d Mon Sep 17 00:00:00 2001 From: xmlking Date: Mon, 7 Jan 2019 18:02:59 -0800 Subject: [PATCH] fix(chat-box): changed chat-box input style to outline --- libs/chat-box/src/lib/chat-box.component.html | 4 +- libs/chat-box/src/lib/chat-box.component.scss | 17 +++-- libs/chat-box/src/lib/chat-box.component.ts | 21 ++---- .../src/lib/state/chat-box.actions.ts | 4 +- libs/chat-box/src/lib/state/chat-box.store.ts | 54 +++++++------- package-lock.json | 72 +++++++++---------- package.json | 24 +++---- stories/awesome.md | 1 + stories/elements.md | 12 ++++ 9 files changed, 105 insertions(+), 104 deletions(-) create mode 100644 stories/elements.md diff --git a/libs/chat-box/src/lib/chat-box.component.html b/libs/chat-box/src/lib/chat-box.component.html index 965af4d92..20b77ea59 100644 --- a/libs/chat-box/src/lib/chat-box.component.html +++ b/libs/chat-box/src/lib/chat-box.component.html @@ -45,7 +45,7 @@
@@ -59,7 +59,7 @@ - + keyboard_voice * { - // width: 100%; - //} } /* Chat Content */ @@ -133,3 +124,11 @@ text-overflow: ellipsis; } +/* Custom mat-form-field-outline */ +:host /deep/ mat-form-field.mat-form-field-appearance-outline.custom-outline .mat-form-field-wrapper { + padding-bottom: 0; + margin: 0; + //.mat-form-field-outline { + // display: none; + //} +} diff --git a/libs/chat-box/src/lib/chat-box.component.ts b/libs/chat-box/src/lib/chat-box.component.ts index af5d450f5..b7a47885a 100644 --- a/libs/chat-box/src/lib/chat-box.component.ts +++ b/libs/chat-box/src/lib/chat-box.component.ts @@ -1,22 +1,12 @@ -import { - AfterViewInit, - Component, - ElementRef, - OnDestroy, - OnInit, - QueryList, - ViewChild, - ViewChildren, -} from '@angular/core'; +import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { scrollFabAnimation } from '@ngx-starter-kit/animations'; import { fromEvent, Observable } from 'rxjs'; import { filter, take, takeUntil } from 'rxjs/operators'; import { Select, Store } from '@ngxs/store'; -import { ChatMessage, Conversation, ModeType } from './chat-message.model'; +import { Conversation } from './chat-message.model'; import { ChatBoxState } from './state/chat-box.store'; -import { AddMessage, CreateNewConversation, FetchConversations, StartVoiceCommand } from './state/chat-box.actions'; -import { SendMessage } from './state/chat-box.actions'; +import { CreateNewConversation, FetchConversations, SendMessage, StartVoiceCommand } from './state/chat-box.actions'; @Component({ selector: 'ngx-chat-box', @@ -31,7 +21,7 @@ export class ChatBoxComponent implements OnInit, OnDestroy { @ViewChild('input') input: ElementRef; @Select(ChatBoxState.getConversations) conversations$: Observable; - @Select(ChatBoxState.getSelectedConversation) selectedConversation$: Observable; + @Select(ChatBoxState.getActiveConversation) activeConversation$: Observable; voices: SpeechSynthesisVoice[]; canUseSpeechRecognition = false; canUseSpeechSynthesis = false; @@ -45,7 +35,7 @@ export class ChatBoxComponent implements OnInit, OnDestroy { ngOnInit() { this.store.dispatch(new FetchConversations()); // TODO: only create new Conversation when user select one are more avatars and click + - if (!this.store.selectSnapshot(ChatBoxState.getSelectedConversation)) { + if (!this.store.selectSnapshot(ChatBoxState.getActiveConversation)) { this.store.dispatch(new CreateNewConversation()); } } @@ -63,7 +53,6 @@ export class ChatBoxComponent implements OnInit, OnDestroy { } async sendMessageToBot() { - const selectedConversation = this.store.selectSnapshot(ChatBoxState.getSelectedConversation); this.store.dispatch(new SendMessage({ message: this.input.nativeElement.value })); this.input.nativeElement.value = ''; this.focus(); diff --git a/libs/chat-box/src/lib/state/chat-box.actions.ts b/libs/chat-box/src/lib/state/chat-box.actions.ts index 7be7e7b73..8549cbf2b 100644 --- a/libs/chat-box/src/lib/state/chat-box.actions.ts +++ b/libs/chat-box/src/lib/state/chat-box.actions.ts @@ -18,7 +18,7 @@ export class CreateNewConversation { export class SwitchConversation { static readonly type = '[ChatBox] SwitchConversation'; - constructor(public readonly payload: { conversationId: string }) {} + constructor(public readonly payload: { conversationId: string | number }) {} } export class SaveConversation { @@ -33,7 +33,7 @@ export class CloseConversation { export class AddMessage { static readonly type = '[ChatBox] AddMessage'; - constructor(public readonly payload: { conversationId: string; message: ChatMessage }) {} + constructor(public readonly payload: { conversationId: string | number; message: ChatMessage }) {} } export class StartVoiceCommand { diff --git a/libs/chat-box/src/lib/state/chat-box.store.ts b/libs/chat-box/src/lib/state/chat-box.store.ts index a3b94658d..36c039b0a 100644 --- a/libs/chat-box/src/lib/state/chat-box.store.ts +++ b/libs/chat-box/src/lib/state/chat-box.store.ts @@ -32,7 +32,6 @@ import { export class ChatBoxStateModel { conversations: Conversation[]; - selectedConversation: Conversation; // TODO change to activeConversationId activeConversationId: string | number; canUseSpeechRecognition: boolean; canUseSpeechSynthesis: boolean; @@ -51,7 +50,6 @@ export class ChatBoxStateModel { name: 'chatbox', defaults: { conversations: [], - selectedConversation: null, activeConversationId: null, canUseSpeechRecognition: false, canUseSpeechSynthesis: false, @@ -126,8 +124,8 @@ export class ChatBoxState implements NgxsOnInit { } @Selector() - static getSelectedConversation(state: ChatBoxStateModel) { - return state.selectedConversation; + static getActiveConversation(state: ChatBoxStateModel) { + return state.conversations[state.conversations.findIndex(con => con.id === state.activeConversationId)]; } @Selector() @@ -175,9 +173,15 @@ export class ChatBoxState implements NgxsOnInit { } @Action(FetchConversations) - fetchConversations({ getState, patchState, setState }: StateContext) { + fetchConversations(ctx: StateContext) { console.log('fetching open conversations'); - // return this.chat.fetchInFlightConversations().pipe(tap(res => patchState({ conversations: res }))); + // return this.chat.fetchInFlightConversations().pipe( + // tap((res: Conversation[]) => + // produce(ctx, (draft: ChatBoxStateModel) => { + // draft.conversations = res; + // }), + // ), + // ); } @Action(CreateNewConversation) @@ -185,27 +189,26 @@ export class ChatBoxState implements NgxsOnInit { const newConversation = new Conversation('payload.conversationId'); // TODO create with UUID. from server? produce(ctx, (draft: ChatBoxStateModel) => { draft.conversations.push(newConversation); - draft.selectedConversation = newConversation; + draft.activeConversationId = newConversation.id; }); } @Action(SwitchConversation) - switchConversation( - { getState, patchState, setState }: StateContext, - { payload }: SwitchConversation, - ) { - const switchedConversation = getState().conversations.find(con => con.id === payload.conversationId); + switchConversation(ctx: StateContext, { payload }: SwitchConversation) { + const state = ctx.getState(); + const switchedConversation = + state.conversations[state.conversations.findIndex(con => con.id === state.activeConversationId)]; if (switchedConversation) { - patchState({ - selectedConversation: switchedConversation, + produce(ctx, (draft: ChatBoxStateModel) => { + draft.activeConversationId = switchedConversation.id; }); } } @Action(SaveConversation) - saveConversation({ getState, patchState, setState }: StateContext, { payload }: SaveConversation) { + saveConversation(ctx: StateContext, { payload }: SaveConversation) { console.log(`saving conversation ${payload.conversationId}`); - // const conversation = getState().conversations.find( con => con.id === payload.conversationId); + // const conversation = ctx.getState().conversations[ctx.getState().conversations.findIndex(con => con.id === payload.conversationId)]; // return this.chat.saveConversation(conversation); } @@ -217,7 +220,7 @@ export class ChatBoxState implements NgxsOnInit { tap(_ => { produce(ctx, (draft: ChatBoxStateModel) => { draft.conversations.splice(draft.conversations.findIndex(con => con.id === payload.conversationId), 1); - draft.selectedConversation = draft.conversations[draft.conversations.length - 1]; + draft.activeConversationId = draft.conversations[draft.conversations.length - 1].id; }); }), ); @@ -232,29 +235,26 @@ export class ChatBoxState implements NgxsOnInit { const convIdx = draft.conversations.findIndex(con => con.id === payload.conversationId); const conv = draft.conversations[convIdx]; draft.conversations[convIdx] = new Conversation(conv.id, [...conv.messages, payload.message]); - draft.selectedConversation = draft.conversations[convIdx]; + draft.activeConversationId = draft.conversations[convIdx].id; }); } @Action(SendMessage, { cancelUncompleted: true }) - async sendMessage( - { getState, patchState, setState, dispatch }: StateContext, - { payload }: SendMessage, - ) { - dispatch( + async sendMessage(ctx: StateContext, { payload }: SendMessage) { + ctx.dispatch( new AddMessage({ - conversationId: getState().selectedConversation.id, + conversationId: ctx.getState().activeConversationId, message: ChatMessage.fromUserMessage(payload.message, ModeType.TYPE), }), ); } @Action(StartVoiceCommand, { cancelUncompleted: true }) - async startVoiceCommand({ getState, patchState, setState, dispatch }: StateContext) { + async startVoiceCommand(ctx: StateContext) { const message = await this.stt.getVoiceMessage(); - dispatch( + ctx.dispatch( new AddMessage({ - conversationId: getState().selectedConversation.id, + conversationId: ctx.getState().activeConversationId, message: ChatMessage.fromUserMessage(message, ModeType.SPEAK), }), ); diff --git a/package-lock.json b/package-lock.json index e1a155c45..9c139fe67 100644 --- a/package-lock.json +++ b/package-lock.json @@ -174,9 +174,9 @@ } }, "@angular/animations": { - "version": "7.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-7.2.0-rc.0.tgz", - "integrity": "sha512-CRQNQ6QVTuf4nCHVLVpKQx7YPpNPfnTF79KVWzHefkkyS3URRuEgvE4jCED4oTJ4BEsmkjXyt51VeDV0FgqQFg==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-7.2.0.tgz", + "integrity": "sha512-xi832o3YN+eYSV4PDRllc8JwkH4aKPlb7NZ0UaqchOmz9/jQcykCEMZDzQAZUgHG1ohay6JBVaV8/zNcbSsRCA==", "requires": { "tslib": "^1.9.0" } @@ -216,25 +216,25 @@ } }, "@angular/common": { - "version": "7.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-7.2.0-rc.0.tgz", - "integrity": "sha512-Xv60KEP1kpF74kpN1xtps0W++PUXLUMK/0tDblUZH7tBWvS0XwEwtuK5B6wcs+I5nqZkPgvlvOyiVZvOLraWOg==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-7.2.0.tgz", + "integrity": "sha512-5HNGT+XsY+7sQcNoFRqhbUfVdnBAtXaupmMbBclnQHTon9y9Ijp0ocYi7zxx39feo6xYF5HhBMnDPkFgtAnsYQ==", "requires": { "tslib": "^1.9.0" } }, "@angular/compiler": { - "version": "7.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-7.2.0-rc.0.tgz", - "integrity": "sha512-tvgGJx0urSz/qn6upmcjX3N3dyWQ9m5mQOwJxmN4qekxjOtSRml5yt2KtlaUTkGsjkEmEVfSHel+X1TwzBdhYw==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-7.2.0.tgz", + "integrity": "sha512-On1qj4yQoIGxGOQ09ohTq0QNjrIJtWcwnCXYAEEyc83eadBMOqiFh6SUMgX1O+B7BIB4mebFw/n/etez0A21xw==", "requires": { "tslib": "^1.9.0" } }, "@angular/compiler-cli": { - "version": "7.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-7.2.0-rc.0.tgz", - "integrity": "sha512-m0hfGVvVCGWFgApsDhh80YpdvXWs7/Oq1lgd0dXeo1wZFLOoTfM9Vq7nSnoummwwLeWeYLiZb67LMB6lY9uI2w==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-7.2.0.tgz", + "integrity": "sha512-BKELLAnA4jWfyPEzuVxTNNFAPKJOyh4Xjw7c+dRf90bnw9iIgZOpz9WXSN/xfEhftqRPTnPcfs56i6bxqeYCCQ==", "dev": true, "requires": { "canonical-path": "1.0.0", @@ -513,9 +513,9 @@ } }, "@angular/core": { - "version": "7.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-7.2.0-rc.0.tgz", - "integrity": "sha512-2u11TNlLorw3JhuczCPwl8UmxE+ja2Q/ghBl8iYi4SIBWiBO1K0wVT13Ts7eojk63yZcg60lyYYCegXBmHLTuw==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-7.2.0.tgz", + "integrity": "sha512-tlCDDM9IknXvVLk1sg0lzCO4OREM54i1bFtTpl5kPtugK6l4kYCOH78UzDPHnOzzI3LGLj8Hb2NiObVa9c4fdg==", "requires": { "tslib": "^1.9.0" } @@ -529,17 +529,17 @@ } }, "@angular/forms": { - "version": "7.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-7.2.0-rc.0.tgz", - "integrity": "sha512-OWP1zzYQiuqtoltdlhkcVjHxg78exbt7z1lr8RSjybr/Snc5zSFhnZF6byasd/4lzVySuujsMXkTK7D8x6hedA==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-7.2.0.tgz", + "integrity": "sha512-vgnKgThitbaSQekTFt8qCFejnBwBMNJDUm7LJFcvRn4wcZKArTARTfSKHudNYCjTEqs9/YT4TJQTm9flVRbUJw==", "requires": { "tslib": "^1.9.0" } }, "@angular/language-service": { - "version": "7.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-7.2.0-rc.0.tgz", - "integrity": "sha512-2VLVE2Bfp0gwqrLcAreSPdrJSxEZ2E2Cmv8r2JbhIfmwqtWhSh1BV95QgkQKSaGMvcB10CgJHHT8iuoxT6spSw==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-7.2.0.tgz", + "integrity": "sha512-UDmIRR0ybdafrJLHkSDgc/3PpsA9lnwXqGMSAyyhEF3InORFFkloAb0a6Naz+y8ePgEMfqbpyWjtzo8qGtOmEQ==", "dev": true }, "@angular/material": { @@ -551,17 +551,17 @@ } }, "@angular/platform-browser": { - "version": "7.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-7.2.0-rc.0.tgz", - "integrity": "sha512-r0ak7SVLWrivd4S0MXWmqNLeF6NNOBAopnjrhUu2j5I00u7/QfLrX0E5zRlJ8JkARVjer6Wm+D1ztlOWw5jHag==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-7.2.0.tgz", + "integrity": "sha512-ClrGYlacK0kexE7eHLfruOjgJl0MtMt7RsMv5i757GUwbOm1dCwG1HK8cLNDZJFHMZodKVKwEGS6/R5Cl6vrNg==", "requires": { "tslib": "^1.9.0" } }, "@angular/platform-browser-dynamic": { - "version": "7.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-7.2.0-rc.0.tgz", - "integrity": "sha512-uqT27oh9m58L6MUjgvT+7NpAFbigOnnTUWMsCLijNUKd7i37T6UxTVKPvuqNHlaLXsmDRxVHN3INI0IrWZ3R+w==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-7.2.0.tgz", + "integrity": "sha512-IiyBcQIQVDZMxfpTYex1QfPmcMubKLgu1pCvQsjr0HmUEySqcykO+FzHlYLf5TTgRrtkI6cP2pYzTHGVR93Gpg==", "requires": { "tslib": "^1.9.0" } @@ -579,17 +579,17 @@ } }, "@angular/router": { - "version": "7.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-7.2.0-rc.0.tgz", - "integrity": "sha512-OKJBzF8JhQQDLxBH6Yv8R1KRhrXu0L+VlIJGQhuw4p1z51WEHewnH7i9DAtRCMhaiXzy3QvoYTz1czrTIVyR0Q==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-7.2.0.tgz", + "integrity": "sha512-Jpm0Y5IH30hIQsbnLgi2/LgHbArfE9gWMj/9mDIUOlJeQfGzNVoifBE+zLLJU/wb09+ZtfwGBxkMeDTitH/n2A==", "requires": { "tslib": "^1.9.0" } }, "@angular/service-worker": { - "version": "7.2.0-rc.0", - "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-7.2.0-rc.0.tgz", - "integrity": "sha512-61t9ecjPLzg/xvSPp6jL5vj3WmqXtOU04Re82xltcUZ51szYAmKeZ3q9K4ZEQCfDT+J0qTCsXDCOhHRL2TDfFg==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@angular/service-worker/-/service-worker-7.2.0.tgz", + "integrity": "sha512-AtmXVnRgVUMML16Wy5HE95s387HVkL11FPoL/4lNv+XekmYnWZhnbfYLGxZAVjc2TPM+XWrgpt5pfg+IrKkDtw==", "requires": { "tslib": "^1.9.0" } @@ -3404,9 +3404,9 @@ } }, "@types/jest": { - "version": "23.3.11", - "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.3.11.tgz", - "integrity": "sha512-eroF85PoG87XjCwzxey7yBsQNkIY/TV5myKKSG/022A0FW25afdu/uub6JDMS5eT68zBBt82S+w/MFOTjeLM3Q==", + "version": "23.3.12", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.3.12.tgz", + "integrity": "sha512-/kQvbVzdEpOq4tEWT79yAHSM4nH4xMlhJv2GrLVQt4Qmo8yYsPdioBM1QpN/2GX1wkfMnyXvdoftvLUr0LBj7Q==", "dev": true }, "@types/json5": { diff --git a/package.json b/package.json index 5eabd0f3d..9d4ada8e5 100644 --- a/package.json +++ b/package.json @@ -110,19 +110,19 @@ }, "private": true, "dependencies": { - "@angular/animations": "^7.2.0-rc.0", + "@angular/animations": "^7.2.0", "@angular/cdk": "^7.2.0", - "@angular/common": "^7.2.0-rc.0", - "@angular/compiler": "^7.2.0-rc.0", - "@angular/core": "^7.2.0-rc.0", + "@angular/common": "^7.2.0", + "@angular/compiler": "^7.2.0", + "@angular/core": "^7.2.0", "@angular/flex-layout": "^7.0.0-beta.22", - "@angular/forms": "^7.2.0-rc.0", + "@angular/forms": "^7.2.0", "@angular/material": "^7.2.0", - "@angular/platform-browser": "^7.2.0-rc.0", - "@angular/platform-browser-dynamic": "^7.2.0-rc.0", + "@angular/platform-browser": "^7.2.0", + "@angular/platform-browser-dynamic": "^7.2.0", "@angular/pwa": "^0.12.0-rc.0", - "@angular/router": "^7.2.0-rc.0", - "@angular/service-worker": "^7.2.0-rc.0", + "@angular/router": "^7.2.0", + "@angular/service-worker": "^7.2.0", "@fortawesome/angular-fontawesome": "^0.3.0", "@fortawesome/fontawesome-svg-core": "^1.2.0", "@fortawesome/free-brands-svg-icons": "^5.6.0", @@ -193,8 +193,8 @@ "@angular-devkit/build-angular": "^0.12.0-rc.0", "@angular-devkit/build-ng-packagr": "^0.12.0-rc.0", "@angular/cli": "^7.2.0-rc.0", - "@angular/compiler-cli": "^7.2.0-rc.0", - "@angular/language-service": "^7.2.0-rc.0", + "@angular/compiler-cli": "^7.2.0", + "@angular/language-service": "^7.2.0", "@commitlint/cli": "^7.2.1", "@commitlint/config-conventional": "^7.1.2", "@compodoc/compodoc": "^1.1.7", @@ -211,7 +211,7 @@ "@types/google.analytics": "0.0.39", "@types/hammerjs": "^2.0.36", "@types/helmet": "^0.0.42", - "@types/jest": "^23.3.0", + "@types/jest": "^23.3.12", "@types/node": "^10.12.0", "@types/nodemailer": "^4.6.5", "@types/passport": "1.0.0", diff --git a/stories/awesome.md b/stories/awesome.md index 72785e905..3249397f6 100644 --- a/stories/awesome.md +++ b/stories/awesome.md @@ -139,6 +139,7 @@ Total Guide To Dynamic Angular Animations That Can Be Customized At Runtime * Angular Performance > Refer [here](https://blog.ninja-squad.com/) +> Refer [angular performance checklist](https://github.com/mgechev/angular-performance-checklist) * Angular universal aks SSR > Refer [here](https://blog.angularindepth.com/creating-an-angular-universal-app-with-the-angular-cli-5ef26c9fd9a5) diff --git a/stories/elements.md b/stories/elements.md new file mode 100644 index 000000000..ff2669bf8 --- /dev/null +++ b/stories/elements.md @@ -0,0 +1,12 @@ +# Angular Elements + +```bash +ng add ngx-build-plus --project chat-box +ng g ngx-build-plus:wc-polyfill --project chat-box +ng g ngx-build-plus:externals --project chat-box + +npm run build:chat-box:externals + + +ng g ngx-build-plus:externals --host --project webapp +```