import { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { NgbPopoverModule, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; import { HttpClientModule } from '@angular/common/http'; import { AngularSvgIconModule } from 'angular-svg-icon'; //NgxMask import { NgxMaskModule } from 'ngx-mask'; //Pdf import { PdfViewerModule } from 'ng2-pdf-viewer'; //Lottie import { AnimationLoader, LottieComponent, provideLottieOptions } from 'ngx-lottie'; //Interfaces import { IUploadFilesConfig } from './interfaces'; import { IFilesCarouselConfig } from './components/ca-upload-files-carousel/interfaces'; //Pipes import { ByteConvertPipe, FileNamePipe, UrlExtensionPipe, } from './components/ca-upload-file/pipes'; //Components import { CaUploadFileComponent } from './components/ca-upload-file/ca-upload-file.component'; import { CaUploadDropzoneComponent } from './components/ca-upload-dropzone/ca-upload-dropzone.component'; import { CaUploadFilesCarouselComponent } from './components/ca-upload-files-carousel/ca-upload-files-carousel.component'; import { CaUploadFilesComponent } from './ca-upload-files.component'; import { CaInputComponent } from '../ca-input/ca-input.component'; import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component'; import { CaSpinnerComponent } from '../ca-spinner/ca-spinner.component'; //Enums import { eFileSize, eReviewState } from './enums'; import { eDropZoneFileType, eTemplateType, } from './components/ca-upload-dropzone/enums'; export default { title: 'Example/CaUploadFiles', component: CaUploadFilesComponent, decorators: [ moduleMetadata({ imports: [ CommonModule, AngularSvgIconModule.forRoot(), HttpClientModule, FormsModule, ReactiveFormsModule, NgxMaskModule.forRoot(), NgbPopoverModule, NgbTooltip, //Pdf PdfViewerModule, //Lotie //Components CaInputComponent, CaUploadFileComponent, CaUploadDropzoneComponent, CaUploadFilesCarouselComponent, CaAppTooltipV2Component, CaSpinnerComponent, LottieComponent, //Pipes ByteConvertPipe, FileNamePipe, UrlExtensionPipe, ], providers: [ ByteConvertPipe, UrlExtensionPipe, FileNamePipe, provideLottieOptions({ player: () => import('lottie-web'), }), AnimationLoader, ], }), ], tags: ['autodocs'], parameters: { layout: 'centered', }, argTypes: { uploadFilesConfig: { control: { type: 'object', }, }, }, } as Meta; const Template: StoryObj = { render: (args) => ({ props: { ...args, fileAdded: (file: File) => { const fileUrl = URL.createObjectURL(file); // Update args.file args.uploadFilesConfig.files = [ ...args.uploadFilesConfig.files, { fileName: file.name, fileSize: file.size, url: fileUrl, incorrect: false, lastHovered: false, realFile: file, }, ]; // Update configFile if (args.uploadFilesConfig.fileOptionsConfig) { args.uploadFilesConfig.fileOptionsConfig.file.url = `${fileUrl}#${file.name}`; args.uploadFilesConfig.fileOptionsConfig.file.fileName = file.name; args.config; } }, }, }), }; export const FeedbackMode: StoryObj = { ...Template, args: { uploadFilesConfig: { // Files files: [], // Carousel slider: { dontUseSlider: false, hasCarouselBottomTabs: true, }, carouselConfig: { files: [], customClass: 'medium', customDetailsPageClass: 'modals', hasCarouselBottomTabs: true, } as IFilesCarouselConfig, hasCrop: false, isRoundCrop: false, hasBlobUrl: false, // Tags onlyOneTagFile: false, // Dropzone dropZoneConfig: { template: eTemplateType.DOCUMENTS, config: { dropzone: { dropZoneType: eDropZoneFileType.FILES, multiple: true, globalDropZone: false, dropZonePages: 'tools_todo', }, dropzoneOption: { customClassName: 'documents-dropzone', size: 'medium', modalSize: 'lg', showDropzone: true, filesLength: 2, isRequired: true, dropzoneClose: false, }, }, }, dropzoneCustomWidth: '', isVisibleCropAndDrop: true, // Cropper initialCropperPosition: { x1: 0, y1: 0, x2: 100, y2: 100 }, containWithinAspectRatio: true, aspectRatio: [16, 9], // Review review: { isReview: false, reviewMode: eReviewState.FEEDBACK_MODE, feedbackText: 'Sample feedback text', categoryTag: 'General', }, // File Options fileOptionsConfig: { id: 111, customClassName: 'modals', file: { url: '', incorrect: false, lastHovered: false, fileSize: 1200, fileName: '', }, hasTagsDropdown: true, hasNumberOfPages: true, activePage: 1, type: 'modal', hasLandscapeOption: false, tagsOptions: [ { tagName: 'HOS Agreement', checked: false }, { tagName: 'Unsafe Driving AGT', checked: false }, ], }, // Size and Dimensions size: eFileSize.MEDIUM, slideWidth: 180, } as IUploadFilesConfig, }, }; export const ReviewMode: StoryObj = { ...Template, args: { uploadFilesConfig: { // Files files: [], // Carousel slider: { dontUseSlider: false, hasCarouselBottomTabs: false, }, carouselConfig: { files: [], customClass: 'medium', customDetailsPageClass: 'modals', hasCarouselBottomTabs: true, } as IFilesCarouselConfig, hasCrop: false, isRoundCrop: false, hasBlobUrl: false, // Tags onlyOneTagFile: false, // Dropzone dropZoneConfig: { template: eTemplateType.IMAGE, config: { dropzone: { dropZoneType: eDropZoneFileType.IMAGE, multiple: true, globalDropZone: false, dropZonePages: 'cdl', }, dropzoneOption: { customClassName: 'documents-dropzone', size: 'medium', modalSize: 'lg', showDropzone: true, dropzoneClose: false, }, }, }, dropzoneCustomWidth: '', isVisibleCropAndDrop: true, // Cropper initialCropperPosition: { x1: 0, y1: 0, x2: 100, y2: 100 }, containWithinAspectRatio: true, aspectRatio: [16, 9], // Review review: { isReview: true, reviewMode: eReviewState.REVIEW_MODE, feedbackText: 'Sample feedback text', categoryTag: 'General', }, // File Options fileOptionsConfig: { id: 111, customClassName: 'modals', file: { url: '', incorrect: false, lastHovered: false, fileSize: 1200, fileName: '', }, hasTagsDropdown: false, hasNumberOfPages: true, activePage: 1, tags: ['Example'], type: 'modal', hasLandscapeOption: false, tagsOptions: [ { tagName: 'HOS Agreement', checked: false }, { tagName: 'Unsafe Driving AGT', checked: false }, ], }, // Size and Dimensions size: eFileSize.MEDIUM, slideWidth: 180, } as IUploadFilesConfig, }, }; export const CropMode: StoryObj = { ...Template, args: { uploadFilesConfig: { // Files files: [], // Carousel slider: { dontUseSlider: false, hasCarouselBottomTabs: false, }, carouselConfig: { files: [], customClass: 'medium', customDetailsPageClass: 'modals', hasCarouselBottomTabs: true, } as IFilesCarouselConfig, hasCrop: true, isRoundCrop: false, hasBlobUrl: false, // Tags onlyOneTagFile: false, // Dropzone dropZoneConfig: { template: eTemplateType.IMAGE_CROP, config: { dropzone: { dropZoneType: eDropZoneFileType.IMAGE, multiple: true, globalDropZone: false, dropZonePages: 'cdl', }, dropzoneOption: { customClassName: 'documents-dropzone', size: 'medium', modalSize: 'lg', showDropzone: true, dropzoneClose: false, }, }, }, dropzoneCustomWidth: '', isVisibleCropAndDrop: true, // Cropper initialCropperPosition: { x1: 0, y1: 0, x2: 184, y2: 184 }, containWithinAspectRatio: false, aspectRatio: [1, 1], // Review review: { isReview: true, reviewMode: eReviewState.REVIEW_MODE, feedbackText: 'Sample feedback text', categoryTag: 'General', }, // File Options fileOptionsConfig: { id: 111, customClassName: 'modals', file: { url: '', incorrect: false, lastHovered: false, fileSize: 1200, fileName: '', }, hasTagsDropdown: false, hasNumberOfPages: true, activePage: 1, tags: ['Example'], type: 'modal', hasLandscapeOption: false, tagsOptions: [ { tagName: 'HOS Agreement', checked: false }, { tagName: 'Unsafe Driving AGT', checked: false }, ], }, // Size and Dimensions size: eFileSize.MEDIUM, slideWidth: 180, } as IUploadFilesConfig, }, }; export const MediaMode: StoryObj = { ...Template, args: { uploadFilesConfig: { // Files files: [], // Carousel slider: { dontUseSlider: false, hasCarouselBottomTabs: true, }, carouselConfig: { files: [], customClass: 'medium', customDetailsPageClass: 'modals', hasCarouselBottomTabs: true, } as IFilesCarouselConfig, hasCrop: false, isRoundCrop: false, hasBlobUrl: false, // Tags onlyOneTagFile: false, // Dropzone dropZoneConfig: { template: eTemplateType.MEDIA, config: { dropzone: { dropZoneType: eDropZoneFileType.MEDIA, multiple: true, globalDropZone: false, dropZonePages: 'tools_todo', }, dropzoneOption: { customClassName: 'documents-dropzone', size: 'medium', modalSize: 'lg', showDropzone: true, filesLength: 2, isRequired: true, dropzoneClose: false, }, }, }, dropzoneCustomWidth: '', isVisibleCropAndDrop: true, // Cropper initialCropperPosition: { x1: 0, y1: 0, x2: 100, y2: 100 }, containWithinAspectRatio: true, aspectRatio: [16, 9], // Review review: { isReview: false, reviewMode: eReviewState.FEEDBACK_MODE, feedbackText: 'Sample feedback text', categoryTag: 'General', }, // File Options fileOptionsConfig: { id: 111, customClassName: 'modals', file: { url: '', incorrect: false, lastHovered: false, fileSize: 1200, fileName: '', }, hasTagsDropdown: true, hasNumberOfPages: true, activePage: 1, type: 'modal', hasLandscapeOption: false, tagsOptions: [ { tagName: 'HOS Agreement', checked: false }, { tagName: 'Unsafe Driving AGT', checked: false }, ], }, // Size and Dimensions size: eFileSize.MEDIUM, slideWidth: 180, } as IUploadFilesConfig, }, };