-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* common import container * added comment for example use * resolved review cmts --------- Co-authored-by: danoswaltCL <[email protected]>
- Loading branch information
1 parent
3c746a2
commit e9c7029
Showing
11 changed files
with
151 additions
and
132 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
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
14 changes: 14 additions & 0 deletions
14
...e-component-lib/components/common-import-container/common-import-container.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,14 @@ | ||
| <div | ||
| class="input-container" | ||
| (dragover)="onDragOver($event)" | ||
| (dragleave)="onDragLeave($event)" | ||
| (drop)="onDrop($event)" | ||
| [ngClass]="{ 'drag-over': (isDragOver | async) }" | ||
| > | ||
| <mat-icon>file_upload</mat-icon> | ||
| <p class="ft-14-600 drag-text">Drag & drop or</p> | ||
| <button mat-flat-button color="primary" (click)="fileInput.click()"> | ||
| <span>{{ buttonLabel }}</span> | ||
| </button> | ||
| <input [accept]="fileType" type="file" multiple #fileInput style="display: none" (change)="onFileSelected($event)" /> | ||
| </div> |
29 changes: 29 additions & 0 deletions
29
...e-component-lib/components/common-import-container/common-import-container.component.scss
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,29 @@ | ||
| .input-container { | ||
| /* Add your styles here */ | ||
| height: 210px; | ||
| width: 592px; | ||
| border: 2px dashed #ccc; | ||
| padding: 20px; | ||
| text-align: center; | ||
| border-radius: 10px; | ||
| transition: background-color 0.3s; | ||
|
|
||
| &.drag-over { | ||
| background-color: #f0f0f0; | ||
| } | ||
|
|
||
| .drag-text { | ||
| margin-bottom: 0.7rem; | ||
| } | ||
|
|
||
| mat-icon { | ||
| height: 70px; | ||
| width: 70px; | ||
| font-size: 70px; | ||
| color: grey; | ||
| } | ||
|
|
||
| button { | ||
| font-size: 14px; | ||
| } | ||
| } |
79 changes: 79 additions & 0 deletions
79
...one-component-lib/components/common-import-container/common-import-container.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,79 @@ | ||
| import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { SharedModule } from '../../../shared/shared.module'; | ||
| import { CommonModalComponent } from '../common-modal/common-modal.component'; | ||
| import { BehaviorSubject } from 'rxjs'; | ||
| import { FILE_TYPE } from 'upgrade_types'; | ||
|
|
||
| /** | ||
| * A reusable component for drag-and-drop file import functionality. | ||
| * This component allows users to drag and drop files or select them via a file input. | ||
| * It supports specifying a file type and emits the selected files to the parent component. | ||
| * | ||
| * The component accepts the following inputs: | ||
| * - `fileType`: A string representing the accepted file type (e.g., '.json'). Only files with this extension can be selected or dropped. | ||
| * - `buttonLabel`: A string representing the label text of the button. Defaults to 'Upload File'. | ||
| * | ||
| * The component emits the following outputs: | ||
| * - `filesSelected`: An event that emits the selected files as an array of `File` objects. | ||
| * | ||
| * Example usage: | ||
| * | ||
| * ``` | ||
| * <app-common-drag-and-drop-file-import | ||
| * fileType=".json" | ||
| * buttonLabel="Import JSON Files" | ||
| * (filesSelected)="handleFilesSelected($event)" | ||
| * ></app-common-drag-and-drop-file-import> | ||
| * ``` | ||
| */ | ||
| @Component({ | ||
| selector: 'app-common-import-container', | ||
| standalone: true, | ||
| imports: [CommonModalComponent, CommonModule, SharedModule], | ||
| templateUrl: './common-import-container.component.html', | ||
| styleUrls: ['./common-import-container.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class CommonImportContainerComponent { | ||
| @Input() fileType!: FILE_TYPE; | ||
| @Input() buttonLabel!: string; | ||
| @Output() filesSelected = new EventEmitter<File[]>(); | ||
|
|
||
| isDragOver = new BehaviorSubject<boolean>(false); | ||
|
|
||
| onDragOver(event: DragEvent) { | ||
| this.handleDragState(event, true); | ||
| } | ||
|
|
||
| onDragLeave(event: DragEvent) { | ||
| this.handleDragState(event, false); | ||
| } | ||
|
|
||
| onDrop(event: DragEvent) { | ||
| this.handleDragState(event, false); | ||
| this.handleFileSelection(event.dataTransfer?.files); | ||
| } | ||
|
|
||
| private handleDragState(event: DragEvent, isOver: boolean) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| this.isDragOver.next(isOver); | ||
| } | ||
|
|
||
| onFileSelected(event: Event) { | ||
| const input = event.target as HTMLInputElement; | ||
| this.handleFileSelection(input.files); | ||
| } | ||
|
|
||
| private handleFileSelection(files: FileList | null) { | ||
| if (files && files.length > 0) { | ||
| const validFiles = Array.from(files).filter(file => file.name.endsWith(this.fileType)); | ||
| if (validFiles.length > 0) { | ||
| this.filesSelected.emit(validFiles); | ||
| } else { | ||
| console.error('Invalid file types...'); | ||
| } | ||
| } | ||
| } | ||
| } |
22 changes: 0 additions & 22 deletions
22
...pp/shared-standalone-component-lib/components/common-modal/common-modal.component.spec.ts
This file was deleted.
Oops, something went wrong.
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