Chat: Add FileUploading types

Author: Ruslan Farkhutdinov

packages/devextreme-angular/src/core/tokens/index.ts

@@ -17,6 +17,7 @@ export const PROPERTY_TOKEN_series = new InjectionToken<string>('property-token-
 export const PROPERTY_TOKEN_strips = new InjectionToken<string>('property-token-strips');
 export const PROPERTY_TOKEN_valueAxis = new InjectionToken<string>('property-token-valueAxis');
 export const PROPERTY_TOKEN_alerts = new InjectionToken<string>('property-token-alerts');
+export const PROPERTY_TOKEN_attachments = new InjectionToken<string>('property-token-attachments');
 export const PROPERTY_TOKEN_typingUsers = new InjectionToken<string>('property-token-typingUsers');
 export const PROPERTY_TOKEN_ranges = new InjectionToken<string>('property-token-ranges');
 export const PROPERTY_TOKEN_groupItems = new InjectionToken<string>('property-token-groupItems');

packages/devextreme-angular/src/ui/chat/index.ts

@@ -24,10 +24,11 @@ import {
 
 import DataSource from 'devextreme/data/data_source';
 import dxChat from 'devextreme/ui/chat';
-import { Alert, Message, DisposingEvent, InitializedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, OptionChangedEvent, TypingEndEvent, TypingStartEvent, User } from 'devextreme/ui/chat';
+import { Alert, Message, DisposingEvent, DownloadAttachmentEvent, InitializedEvent, MessageDeletedEvent, MessageDeletingEvent, MessageEditCanceledEvent, MessageEditingStartEvent, MessageEnteredEvent, MessageUpdatedEvent, MessageUpdatingEvent, OptionChangedEvent, TypingEndEvent, TypingStartEvent, User } from 'devextreme/ui/chat';
 import { DataSourceOptions } from 'devextreme/data/data_source';
 import { Store } from 'devextreme/data/store';
 import { Format } from 'devextreme/common/core/localization';
+import { dxFileUploaderOptions } from 'devextreme/ui/file_uploader';
 
 import DxChat from 'devextreme/ui/chat';
 
@@ -46,22 +47,27 @@ import {
 import { DxiAlertModule } from 'devextreme-angular/ui/nested';
 import { DxoDayHeaderFormatModule } from 'devextreme-angular/ui/nested';
 import { DxoEditingModule } from 'devextreme-angular/ui/nested';
+import { DxoFileUploaderOptionsModule } from 'devextreme-angular/ui/nested';
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
+import { DxiAttachmentModule } from 'devextreme-angular/ui/nested';
 import { DxoAuthorModule } from 'devextreme-angular/ui/nested';
 import { DxoMessageTimestampFormatModule } from 'devextreme-angular/ui/nested';
 import { DxiTypingUserModule } from 'devextreme-angular/ui/nested';
 import { DxoUserModule } from 'devextreme-angular/ui/nested';
 
 import { DxiChatAlertModule } from 'devextreme-angular/ui/chat/nested';
+import { DxiChatAttachmentModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatAuthorModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatDayHeaderFormatModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatEditingModule } from 'devextreme-angular/ui/chat/nested';
+import { DxoChatFileUploaderOptionsModule } from 'devextreme-angular/ui/chat/nested';
 import { DxiChatItemModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatMessageTimestampFormatModule } from 'devextreme-angular/ui/chat/nested';
 import { DxiChatTypingUserModule } from 'devextreme-angular/ui/chat/nested';
 import { DxoChatUserModule } from 'devextreme-angular/ui/chat/nested';
 import { 
            PROPERTY_TOKEN_alerts,
+           PROPERTY_TOKEN_attachments,
            PROPERTY_TOKEN_items,
            PROPERTY_TOKEN_typingUsers,
      } from 'devextreme-angular/core/tokens';
@@ -91,6 +97,11 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
         this.setChildren('alerts', value);
     }
 
+    @ContentChildren(PROPERTY_TOKEN_attachments)
+    set _attachmentsContentChildren(value: QueryList<CollectionNestedOption>) {
+        this.setChildren('attachments', value);
+    }
+
     @ContentChildren(PROPERTY_TOKEN_items)
     set _itemsContentChildren(value: QueryList<CollectionNestedOption>) {
         this.setChildren('items', value);
@@ -220,6 +231,19 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxChatOptions.fileUploaderOptions]
+    
+     */
+    @Input()
+    get fileUploaderOptions(): dxFileUploaderOptions {
+        return this._getOption('fileUploaderOptions');
+    }
+    set fileUploaderOptions(value: dxFileUploaderOptions) {
+        this._setOption('fileUploaderOptions', value);
+    }
+
+
     /**
      * [descr:dxChatOptions.focusStateEnabled]
     
@@ -337,6 +361,19 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxChatOptions.showAttachButton]
+    
+     */
+    @Input()
+    get showAttachButton(): boolean {
+        return this._getOption('showAttachButton');
+    }
+    set showAttachButton(value: boolean) {
+        this._setOption('showAttachButton', value);
+    }
+
+
     /**
      * [descr:dxChatOptions.showAvatar]
     
@@ -448,6 +485,14 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() onDisposing: EventEmitter<DisposingEvent>;
 
+    /**
+    
+     * [descr:dxChatOptions.onDownloadAttachment]
+    
+    
+     */
+    @Output() onDownloadAttachment: EventEmitter<DownloadAttachmentEvent>;
+
     /**
     
      * [descr:dxChatOptions.onInitialized]
@@ -599,6 +644,13 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() emptyViewTemplateChange: EventEmitter<any>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() fileUploaderOptionsChange: EventEmitter<dxFileUploaderOptions>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -662,6 +714,13 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() rtlEnabledChange: EventEmitter<boolean>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() showAttachButtonChange: EventEmitter<boolean>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -732,6 +791,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
 
         this._createEventEmitters([
             { subscribe: 'disposing', emit: 'onDisposing' },
+            { subscribe: 'downloadAttachment', emit: 'onDownloadAttachment' },
             { subscribe: 'initialized', emit: 'onInitialized' },
             { subscribe: 'messageDeleted', emit: 'onMessageDeleted' },
             { subscribe: 'messageDeleting', emit: 'onMessageDeleting' },
@@ -752,6 +812,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'editingChange' },
             { emit: 'elementAttrChange' },
             { emit: 'emptyViewTemplateChange' },
+            { emit: 'fileUploaderOptionsChange' },
             { emit: 'focusStateEnabledChange' },
             { emit: 'heightChange' },
             { emit: 'hintChange' },
@@ -761,6 +822,7 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'messageTimestampFormatChange' },
             { emit: 'reloadOnChangeChange' },
             { emit: 'rtlEnabledChange' },
+            { emit: 'showAttachButtonChange' },
             { emit: 'showAvatarChange' },
             { emit: 'showDayHeadersChange' },
             { emit: 'showMessageTimestampChange' },
@@ -825,15 +887,19 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxiAlertModule,
     DxoDayHeaderFormatModule,
     DxoEditingModule,
+    DxoFileUploaderOptionsModule,
     DxiItemModule,
+    DxiAttachmentModule,
     DxoAuthorModule,
     DxoMessageTimestampFormatModule,
     DxiTypingUserModule,
     DxoUserModule,
     DxiChatAlertModule,
+    DxiChatAttachmentModule,
     DxoChatAuthorModule,
     DxoChatDayHeaderFormatModule,
     DxoChatEditingModule,
+    DxoChatFileUploaderOptionsModule,
     DxiChatItemModule,
     DxoChatMessageTimestampFormatModule,
     DxiChatTypingUserModule,
@@ -846,15 +912,19 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     DxiAlertModule,
     DxoDayHeaderFormatModule,
     DxoEditingModule,
+    DxoFileUploaderOptionsModule,
     DxiItemModule,
+    DxiAttachmentModule,
     DxoAuthorModule,
     DxoMessageTimestampFormatModule,
     DxiTypingUserModule,
     DxoUserModule,
     DxiChatAlertModule,
+    DxiChatAttachmentModule,
     DxoChatAuthorModule,
     DxoChatDayHeaderFormatModule,
     DxoChatEditingModule,
+    DxoChatFileUploaderOptionsModule,
     DxiChatItemModule,
     DxoChatMessageTimestampFormatModule,
     DxiChatTypingUserModule,

packages/devextreme-angular/src/ui/chat/nested/attachment-dxi.ts

@@ -0,0 +1,84 @@
+/* tslint:disable:max-line-length */
+
+
+import {
+    Component,
+    NgModule,
+    Host,
+    SkipSelf,
+    Input
+} from '@angular/core';
+
+
+
+
+
+import {
+    DxIntegrationModule,
+    NestedOptionHost,
+} from 'devextreme-angular/core';
+import { CollectionNestedOption } from 'devextreme-angular/core';
+
+import { PROPERTY_TOKEN_attachments } from 'devextreme-angular/core/tokens';
+
+@Component({
+    selector: 'dxi-chat-attachment',
+    standalone: true,
+    template: '',
+    styles: [''],
+    imports: [ DxIntegrationModule ],
+    providers: [
+        NestedOptionHost,
+        {
+           provide: PROPERTY_TOKEN_attachments,
+           useExisting: DxiChatAttachmentComponent,
+        }
+    ]
+})
+export class DxiChatAttachmentComponent extends CollectionNestedOption {
+    @Input()
+    get name(): string {
+        return this._getOption('name');
+    }
+    set name(value: string) {
+        this._setOption('name', value);
+    }
+
+    @Input()
+    get size(): number {
+        return this._getOption('size');
+    }
+    set size(value: number) {
+        this._setOption('size', value);
+    }
+
+
+    protected get _optionPath() {
+        return 'attachments';
+    }
+
+
+    constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
+            @Host() optionHost: NestedOptionHost) {
+        super();
+        parentOptionHost.setNestedOption(this);
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
+    }
+
+
+
+    ngOnDestroy() {
+        this._deleteRemovedOptions(this._fullOptionPath());
+    }
+
+}
+
+@NgModule({
+  imports: [
+    DxiChatAttachmentComponent
+  ],
+  exports: [
+    DxiChatAttachmentComponent
+  ],
+})
+export class DxiChatAttachmentModule { }