Merge pull request #2068 from TheSpaceHuman/feat/file-upload-1832

feat(components/file-upload): added init files && custom actions #1832

apps/doc/src/app/components/file-upload/examples/file-upload-custom-actions/file-upload-custom-actions.component.html

@@ -0,0 +1,8 @@
+<prizm-file-upload
+ [accept]="'image/*,.xlsx,.xls,.doc,.docx,.pdf'"
+ [multiple]="true"
+ [files]="files()"
+ [progress]="actions()"
+ (actionEvent)="onActionEvent($event)"
+ (afterFilesChange)="addedActions()"
+></prizm-file-upload>

apps/doc/src/app/components/file-upload/examples/file-upload-custom-actions/file-upload-custom-actions.component.ts

@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { PrizmFilesProgress } from '@prizm-ui/components';
+import { PrizmIconsEnum } from '@prizm-ui/icons/full';
+import { getMultiMockFiles } from '../../files.utils';
+import { PrizmIconsFullRegistry } from '@prizm-ui/icons/core';
+import { prizmIconsPlay, prizmIconsReplay, prizmIconsPause } from '@prizm-ui/icons/full/source';
+
+@Component({
+ selector: 'prizm-file-upload-custom-actions',
+ templateUrl: './file-upload-custom-actions.component.html',
+ styleUrl: './file-upload-custom-actions.component.less',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PrizmFileUploadCustomActionsComponent {
+ actions = signal<PrizmFilesProgress>({});
+ files = signal<File[]>([]);
+
+ constructor(private iconsFullRegistry: PrizmIconsFullRegistry) {
+ this.iconsFullRegistry.registerIcons(prizmIconsPlay, prizmIconsReplay, prizmIconsPause);
+ getMultiMockFiles().then(files => {
+ this.files.set(files);
+ });
+ }
+
+ public onActionEvent(event): void {
+ console.log(event);
+ }
+
+ public addedActions(): void {
+ this.actions.set({
+ '1.jpeg': {
+ actions: [
+ { event: 'event1.1', icon: PrizmIconsEnum.PLAY },
+ { event: 'event1.2', icon: PrizmIconsEnum.PAUSE },
+ { event: 'event1.3', icon: PrizmIconsEnum.REPLAY },
+ ],
+ },
+ '2.jpeg': {
+ actions: [{ event: 'event2', icon: PrizmIconsEnum.PAUSE }],
+ },
+ '3.jpeg': {
+ actions: [
+ { event: 'event3', icon: PrizmIconsEnum.REPLAY, disabled: true },
+ { event: 'event3', icon: PrizmIconsEnum.REPLAY },
+ ],
+ },
+ });
+ }
+}

apps/doc/src/app/components/file-upload/examples/file-upload-with-init-files/file-upload-with-init-files.component.html

@@ -0,0 +1,8 @@
+<prizm-file-upload
+ [accept]="'image/*,.xlsx,.xls,.doc,.docx,.pdf'"
+ [multiple]="true"
+ [files]="files()"
+ (filesChange)="onFilesChange($event)"
+ (fileAdded)="onFileAdded($event)"
+ (fileRemoved)="onFileRemoved($event)"
+></prizm-file-upload>

apps/doc/src/app/components/file-upload/examples/file-upload-with-init-files/file-upload-with-init-files.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { getMultiMockFiles } from '../../files.utils';
+
+@Component({
+ selector: 'prizm-file-upload-with-init-files',
+ templateUrl: './file-upload-with-init-files.component.html',
+ styleUrl: './file-upload-with-init-files.component.less',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PrizmFileUploadWithInitFilesComponent {
+ files = signal<File[]>([]);
+
+ constructor() {
+ getMultiMockFiles().then(files => {
+ this.files.set(files);
+ });
+ }
+
+ public onFilesChange(files: Array<File>): void {
+ console.log('filesChange', files);
+ }
+
+ public onFileAdded(fileName: string): void {
+ console.log('fileAdded', fileName);
+ }
+
+ public onFileRemoved(fileName: string): void {
+ console.log('fileRemoved', fileName);
+ }
+}

apps/doc/src/app/components/file-upload/file-upload-example.component.html

@@ -26,6 +26,14 @@ <h2>
  <prizm-doc-example id="example-in-form" [content]="exampleInForm" heading="Usage in Forms">
  <prizm-file-upload-in-form-example></prizm-file-upload-in-form-example>
  </prizm-doc-example>
+
+ <prizm-doc-example id="with-init-files" [content]="exampleWithInitFiles" heading="Usage with init files">
+ <prizm-file-upload-with-init-files></prizm-file-upload-with-init-files>
+ </prizm-doc-example>
+
+ <prizm-doc-example id="custom-actions" [content]="exampleCustomActions" heading="Custom actions">
+ <prizm-file-upload-custom-actions></prizm-file-upload-custom-actions>
+ </prizm-doc-example>
  </ng-template>
 
  <ng-template prizmDocPageTab prizmDocHost>
@@ -39,9 +47,13 @@ <h2>
  [maxFilesCount]="maxFilesCount"
  [maxFileSize]="maxFileSize"
  [disabled]="disabled"
+ [files]="initFiles()"
+ (actionEvent)="onActionEvent($event)"
  (filesChange)="onFilesChange($event)"
- (filesValidationErrors)="onfilesValidationErrors($event)"
+ (filesValidationErrors)="onFilesValidationErrors($event)"
  (filesCountError)="onFilesCountError($event)"
+ (fileAdded)="onFileAdded($event)"
+ (fileRemoved)="onFileRemoved($event)"
  (retry)="retry($event)"
  >
  <ng-container *prizmIfLang="'russian'; else eng">
@@ -92,6 +104,17 @@ <h2>
  Max files count
  </ng-template>
 
+ <ng-template
+ [documentationPropertyValue]="initFiles()"
+ [documentationPropertyValues]="initFilesVariants()"
+ (documentationPropertyValueChange)="initFiles.set($event)"
+ documentationPropertyName="files"
+ documentationPropertyType="File[]"
+ documentationPropertyMode="input"
+ >
+ Files
+ </ng-template>
+
  <!-- <ng-template
  documentationPropertyName="ng-content"
  documentationPropertyType="string"
@@ -131,14 +154,28 @@ <h2>
  documentationPropertyName="retry"
  documentationPropertyType="File"
  documentationPropertyMode="output"
- documentationPropertyType="retry"
  >
  Retry
  </ng-template>
 
+ <ng-template
+ documentationPropertyName="actionEvent"
+ documentationPropertyType="PrizmActionEvent"
+ documentationPropertyMode="output"
+ >
+ ActionEvent
+ </ng-template>
+
+ <ng-template
+ documentationPropertyName="afterFilesChange"
+ documentationPropertyType="void"
+ documentationPropertyMode="output"
+ >
+ AfterFilesChange
+ </ng-template>
+
  <ng-template
  documentationPropertyName="beforeFilesChange"
- documentationPropertyType="Event"
  documentationPropertyMode="output"
  documentationPropertyType="void"
  >
@@ -147,7 +184,6 @@ <h2>
 
  <ng-template
  documentationPropertyName="filesChange"
- documentationPropertyType="Event"
  documentationPropertyMode="output"
  documentationPropertyType="File[]"
  >
@@ -156,7 +192,6 @@ <h2>
 
  <ng-template
  documentationPropertyName="filesValidationErrors"
- documentationPropertyType="Event"
  documentationPropertyMode="output"
  documentationPropertyType="Map<filename, PrizmFileValidationErrors>"
  >
@@ -165,12 +200,27 @@ <h2>
 
  <ng-template
  documentationPropertyName="filesCountError"
- documentationPropertyType="Event"
  documentationPropertyMode="output"
  documentationPropertyType="Array<filenames>"
  >
  Files count error
  </ng-template>
+
+ <ng-template
+ documentationPropertyName="fileAdded"
+ documentationPropertyMode="output"
+ documentationPropertyType="string"
+ >
+ Files count error
+ </ng-template>
+
+ <ng-template
+ documentationPropertyName="fileRemoved"
+ documentationPropertyMode="output"
+ documentationPropertyType="string"
+ >
+ Files count error
+ </ng-template>
  </prizm-doc-documentation>
  </ng-template>
 

apps/doc/src/app/components/file-upload/file-upload-example.component.ts

@@ -1,9 +1,15 @@
 import { HttpEvent, HttpEventType, HttpClient } from '@angular/common/http';
-import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
-import { PrizmFilesProgress, PrizmFileValidationErrors, PrizmToastService } from '@prizm-ui/components';
+import { Component, ChangeDetectionStrategy, OnDestroy, signal } from '@angular/core';
+import {
+ PrizmActionEvent,
+ PrizmFilesProgress,
+ PrizmFileValidationErrors,
+ PrizmToastService,
+} from '@prizm-ui/components';
 
 import { RawLoaderContent, TuiDocExample } from '@taiga-ui/addon-doc';
 import { BehaviorSubject } from 'rxjs';
+import { getMultiMockFiles } from './files.utils';
 
 @Component({
  templateUrl: './file-upload-example.component.html',
@@ -31,6 +37,16 @@ export class PrizmFileUploadExampleComponent implements OnDestroy {
  HTML: import('./examples/file-upload-in-form/file-upload-in-form-example.component.html?raw'),
  };
 
+ readonly exampleWithInitFiles: TuiDocExample = {
+ TypeScript: import('./examples/file-upload-with-init-files/file-upload-with-init-files.component.ts?raw'),
+ HTML: import('./examples/file-upload-with-init-files/file-upload-with-init-files.component.html?raw'),
+ };
+
+ readonly exampleCustomActions: TuiDocExample = {
+ TypeScript: import('./examples/file-upload-custom-actions/file-upload-custom-actions.component.ts?raw'),
+ HTML: import('./examples/file-upload-custom-actions/file-upload-custom-actions.component.html?raw'),
+ };
+
  readonly setupModule: RawLoaderContent = import('./examples/setup-module.md?raw');
 
  userContentRu = 'текст пользователя';
@@ -44,16 +60,25 @@ export class PrizmFileUploadExampleComponent implements OnDestroy {
  public multiple = true;
 
  progress$$ = new BehaviorSubject<PrizmFilesProgress>({});
+ initFiles = signal<File[]>([]);
+ initFilesVariants = signal<Array<File[]>>([[]]);
  files: Array<File> = [];
  disabled = false;
 
- constructor(private readonly toastService: PrizmToastService, private http: HttpClient) {}
+ constructor(private readonly toastService: PrizmToastService, private http: HttpClient) {
+ getMultiMockFiles().then(files => {
+ this.initFilesVariants.update(fs => {
+ fs.push(files);
+ return fs;
+ });
+ });
+ }
 
  public onFilesChange(files: Array<File>): void {
  this.files = files;
  }
 
- public onfilesValidationErrors(errors: { [key: string]: PrizmFileValidationErrors }): void {
+ public onFilesValidationErrors(errors: { [key: string]: PrizmFileValidationErrors }): void {
  for (const filename of Object.keys(errors)) {
  this.toastService.create(JSON.stringify(errors[filename]), {
  title: `Файл ${filename} не прошел валидацию`,
@@ -185,4 +210,16 @@ export class PrizmFileUploadExampleComponent implements OnDestroy {
  public ngOnDestroy(): void {
  this.progress$$.complete();
  }
+
+ public onFileAdded(file: string): void {
+ console.log('Файл добавлен', file);
+ }
+
+ public onFileRemoved(file: string): void {
+ console.log('Файл удален', file);
+ }
+
+ public onActionEvent(event: PrizmActionEvent): void {
+ console.log('Action event', event);
+ }
 }

apps/doc/src/app/components/file-upload/file-upload-example.module.ts

@@ -12,6 +12,8 @@ import { PrizmFileUploadI18nExampleComponent } from './examples/i18n/file-upload
 import { PrizmFileUploadInFormExampleComponent } from './examples/file-upload-in-form/file-upload-in-form-example.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PrizmIfLanguageDirective } from '@prizm-ui/i18n';
+import { PrizmFileUploadWithInitFilesComponent } from './examples/file-upload-with-init-files/file-upload-with-init-files.component';
+import { PrizmFileUploadCustomActionsComponent } from './examples/file-upload-custom-actions/file-upload-custom-actions.component';
 
 @NgModule({
  imports: [
@@ -32,6 +34,8 @@ import { PrizmIfLanguageDirective } from '@prizm-ui/i18n';
  PrizmFileAutoUploadExampleComponent,
  PrizmFileUploadI18nExampleComponent,
  PrizmFileUploadInFormExampleComponent,
+ PrizmFileUploadWithInitFilesComponent,
+ PrizmFileUploadCustomActionsComponent,
  ],
  providers: [fakeFileUploadProvider],
 })

apps/doc/src/app/components/file-upload/files.utils.ts

@@ -0,0 +1,9 @@
+export async function getMockFile(id: string = '1'): Promise<File> {
+ const res = await fetch(`/assets/images/fileuploader/${id}.jpeg`);
+ const blob = await res.blob();
+ return new File([blob], `${id}.jpeg`, { type: blob.type });
+}
+
+export function getMultiMockFiles(ids: string[] = ['1', '2', '3']): Promise<File[]> {
+ return Promise.all(ids.map(id => getMockFile(id)));
+}

libs/components/src/lib/components/file-upload/file-upload.component.html

@@ -67,28 +67,41 @@
  {{ translations | prizmPluck : [item.value.progress | prizmUploadStatus : item.value.error] }}
  </div>
 
- <button
- class="file__retry-btn"
- *ngIf="item.value.error && options.showRetryButtons"
- [disabled]="disabled"
- [icon]="'arrow-rotate-right'"
- (click)="retryUpload(item.key)"
- prizmIconButton
- appearanceType="ghost"
- appearance="secondary"
- size="s"
- ></button>
+ <div class="file__actions">
+ @for (action of actions(item.key); track action.event) {
+ <button
+ [disabled]="!!action.disabled || disabled"
+ [icon]="action.icon"
+ (click)="actionHandler(action.event, item.key)"
+ prizmIconButton
+ appearanceType="ghost"
+ appearance="secondary"
+ size="s"
+ ></button>
+ }
+ <button
+ class="file__retry-btn"
+ *ngIf="item.value.error && options.showRetryButtons"
+ [disabled]="disabled"
+ [icon]="'arrow-rotate-right'"
+ (click)="retryUpload(item.key)"
+ prizmIconButton
+ appearanceType="ghost"
+ appearance="secondary"
+ size="s"
+ ></button>
 
- <button
- class="file__delete-btn"
- [disabled]="disabled"
- [icon]="'trash-empty'"
- (click)="removeFile(item.key)"
- prizmIconButton
- appearanceType="ghost"
- appearance="secondary"
- size="s"
- ></button>
+ <button
+ class="file__delete-btn"
+ [disabled]="disabled"
+ [icon]="'trash-empty'"
+ (click)="removeFile(item.key)"
+ prizmIconButton
+ appearanceType="ghost"
+ appearance="secondary"
+ size="s"
+ ></button>
+ </div>
 
  <div class="file__progress progress">
  <progress