Moved file uploader component to FileUploadMerchantPortalGui module

src/Pyz/Zed/FileUploadMerchantPortalGui/Presentation/Components/app/components.module.ts

@@ -1,12 +1,21 @@
 import { NgModule } from '@angular/core';
 import { WebComponentsModule } from '@spryker/web-components';
-import {FileUploadTableComponent} from "./file-upload-table/file-upload-table.component";
-import {FileUploadTableModule} from "./file-upload-table/file-upload-table.module";
+import { ButtonLinkComponent, ButtonLinkModule } from '@spryker/button';
+import {FileUploadListComponent} from "./file-upload-list/file-upload-list.component";
+import {FileUploadListModule} from "./file-upload-list/file-upload-list.module";
+import {FileUploaderComponent} from "./file-uploader/file-uploader.component";
+import {FileUploaderModule} from "./file-uploader/file-uploader.module";
 
 @NgModule({
     imports: [
-        WebComponentsModule.withComponents([FileUploadTableComponent]),
-        FileUploadTableModule,
+        WebComponentsModule.withComponents([
+            FileUploadListComponent,
+            FileUploaderComponent,
+            ButtonLinkComponent,
+        ]),
+        FileUploadListModule,
+        ButtonLinkModule,
+        FileUploaderModule,
     ],
 })
 export class ComponentsModule {}

src/Pyz/Zed/FileUploadMerchantPortalGui/Presentation/Components/app/file-upload-list/file-upload-list.component.html

@@ -0,0 +1,6 @@
+<spy-headline>
+    <ng-content select="[title]"></ng-content>
+    <ng-content actions select="[action]"></ng-content>
+</spy-headline>
+
+<spy-table [config]="tableConfig" [tableId]="tableId"></spy-table>

src/Pyz/Zed/FileUploadMerchantPortalGui/Presentation/Components/app/file-upload-list/file-upload-list.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { TableConfig } from '@spryker/table';
+
+@Component({
+    selector: 'mp-file-upload-list',
+    templateUrl: './file-upload-list.component.html',
+    styleUrls: ['./file-upload-list.component.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+})
+export class FileUploadListComponent {
+    @Input() tableConfig: TableConfig;
+    @Input() tableId?: string;
+}
+

src/Pyz/Zed/FileUploadMerchantPortalGui/Presentation/Components/app/file-upload-list/file-upload-list.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TableModule } from '@spryker/table';
+import { HeadlineModule } from '@spryker/headline';
+
+import { FileUploadListComponent } from './file-upload-list.component';
+
+@NgModule({
+    imports: [CommonModule, TableModule, HeadlineModule],
+    declarations: [FileUploadListComponent],
+    exports: [FileUploadListComponent],
+})
+export class FileUploadListModule {}

src/Pyz/Zed/ZedUi/Presentation/Components/app/media-file-upload/media-file-upload.component.html → src/Pyz/Zed/FileUploadMerchantPortalGui/Presentation/Components/app/file-uploader/file-uploader.component.html

@@ -8,23 +8,23 @@
 
         @if (!showProgress) {
             @if (!files?.length) {
-                <div class="mp-media-file-upload__description">
+                <div class="mp-file-uploader__description">
                     <ng-content select="[description]"></ng-content>
                 </div>
             }
 
             <div
                 (drop)="onSelect($event, $event.dataTransfer.files)"
                 (dragover)="onDragOver($event)"
-                class="mp-media-file-upload__area"
+                class="mp-file-uploader__area"
             >
-                <spy-icon class="mp-media-file-upload__area-icon" name="files"></spy-icon>
+                <spy-icon class="mp-file-uploader__area-icon" name="files"></spy-icon>
                 <ng-content select="[input-label]"></ng-content>
 
-                <label for="media-file-uploader" class="mp-media-file-upload__clicker"></label>
+                <label for="file-uploader" class="mp-file-uploader__clicker"></label>
                 <input
-                    id="media-file-uploader"
-                    class="mp-media-file-upload__input"
+                    id="file-uploader"
+                    class="mp-file-uploader__input"
                     type="file"
                     [attr.multiple]="multiple"
                     [accept]="types"
@@ -33,13 +33,13 @@
             </div>
 
             @if (files?.length) {
-                <div class="mp-media-file-upload__files">
+                <div class="mp-file-uploader__files">
                     @for (file of files; track file.id; let index = $index) {
                         <div
-                            [class.mp-media-file-upload__preload-item--error]="file.error"
-                            class="mp-media-file-upload__file"
+                            [class.mp-file-uploader__preload-item--error]="file.error"
+                            class="mp-file-uploader__file"
                         >
-                            <span class="mp-media-file-upload__name">{{ index + 1 }}. {{ file.name }}</span>
+                            <span class="mp-file-uploader__name">{{ index + 1 }}. {{ file.name }}</span>
                             <span>{{ fileSize(file) }}</span>
                         </div>
 
@@ -49,21 +49,21 @@
             }
         } @else {
             @if (uploadingFiles$ | async; as files) {
-                <div class="mp-media-file-upload__files mp-media-file-upload__files--uploading">
+                <div class="mp-file-uploader__files mp-file-uploader__files--uploading">
                     @for (file$ of files; track $index; let index = $index) {
                         @if (file$ | async; as file) {
-                            <div class="mp-media-file-upload__file-item">
+                            <div class="mp-file-uploader__file-item">
                                 {{ index + 1 }}. {{ file.name }}
 
                                 <mp-progress
                                     [error]="file.error"
-                                    class="mp-media-file-upload__progress"
+                                    class="mp-file-uploader__progress"
                                     [percent]="file.progress"
                                 ></mp-progress>
 
                                 @if (file.url && showCdn) {
-                                    <div class="mp-media-file-upload__file">
-                                        <span class="mp-media-file-upload__name">{{ file.url }}</span>
+                                    <div class="mp-file-uploader__file">
+                                        <span class="mp-file-uploader__name">{{ file.url }}</span>
 
                                         <spy-button type="link" size="sm" (click)="copyToClipboard(file.url)">
                                             {{ this.translations?.copy }}
@@ -77,7 +77,7 @@
             }
         }
 
-        <div class="ant-modal-footer mp-media-file-upload__footer">
+        <div class="ant-modal-footer mp-file-uploader__footer">
             @if ((uploadingFiles$ | async)?.length) {
                 <spy-button size="sm" (click)="onShowProgress()">
                     @if (showProgress) {
@@ -89,7 +89,7 @@
             }
 
             <div
-                [class.mp-media-file-upload__footer--col]="!(uploadingFiles$ | async)?.length"
+                [class.mp-file-uploader__footer--col]="!(uploadingFiles$ | async)?.length"
                 class="spy-row spy-row-align-row-flex-end spy-row-gutter-sm"
             >
                 <spy-button
@@ -129,7 +129,7 @@
     (click)="modal.open(true)"
     [size]="buttonSize"
     variant="secondary"
-    class="mp-media-file-upload__modal_button"
+    class="mp-file-uploader__modal_button"
 >
     <ng-content></ng-content>
 </spy-button>

src/Pyz/Zed/ZedUi/Presentation/Components/app/media-file-upload/media-file-upload.component.less → src/Pyz/Zed/FileUploadMerchantPortalGui/Presentation/Components/app/file-uploader/file-uploader.component.less

@@ -1,10 +1,10 @@
 @import '~@spryker/styles/src/lib/themes/default/variables/index.less';
 
-.ant-modal:has(.mp-media-file-upload__footer) {
+.ant-modal:has(.mp-file-uploader__footer) {
     min-width: 800px;
 }
 
-.mp-media-file-upload {
+.mp-file-uploader {
     &__area {
         display: flex;
         flex-direction: column;

src/Pyz/Zed/ZedUi/Presentation/Components/app/media-file-upload/media-file-upload.component.ts → src/Pyz/Zed/FileUploadMerchantPortalGui/Presentation/Components/app/file-uploader/file-uploader.component.ts

@@ -29,13 +29,13 @@ export interface FileData {
 }
 
 @Component({
-    selector: 'mp-media-file-upload',
-    templateUrl: './media-file-upload.component.html',
-    styleUrls: ['./media-file-upload.component.less'],
+    selector: 'mp-file-uploader',
+    templateUrl: './file-uploader.component.html',
+    styleUrls: ['./file-uploader.component.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
 })
-export class MediaFileUploadComponent implements OnDestroy, OnInit {
+export class FileUploaderComponent implements OnDestroy, OnInit {
     @Input() importUrl = '/file-upload-merchant-portal-gui/upload/get-upload-url';
     @Input() hookUrl = '/file-upload-merchant-portal-gui/upload/save-upload-data';
     @Input() downloadUrl: string;

src/Pyz/Zed/ZedUi/Presentation/Components/app/media-file-upload/media-file-upload.module.ts → src/Pyz/Zed/FileUploadMerchantPortalGui/Presentation/Components/app/file-uploader/file-uploader.module.ts

@@ -5,11 +5,11 @@ import { IconModule } from '@spryker/icon';
 import { ModalModule } from '@spryker/modal';
 import { IconFilesModule } from '../../icons';
 import { ProgressModule } from '../progress/progress.module';
-import { MediaFileUploadComponent } from './media-file-upload.component';
+import { FileUploaderComponent } from './file-uploader.component';
 
 @NgModule({
     imports: [IconModule, IconFilesModule, CommonModule, ModalModule, ButtonModule, ButtonLinkModule, ProgressModule],
-    declarations: [MediaFileUploadComponent],
-    exports: [MediaFileUploadComponent],
+    declarations: [FileUploaderComponent],
+    exports: [FileUploaderComponent],
 })
-export class MediaFileUploadModule {}
+export class FileUploaderModule {}

src/Pyz/Zed/FileUploadMerchantPortalGui/Presentation/List/index.twig

@@ -6,13 +6,52 @@
 {% endblock %}
 
 {% block content %}
-    <web-mp-page-layout>
+    {% set fileUploaderConfig = {
+        data: [
+            {
+                size: 2,
+                errorSize: 'The file should be less then 2MB' | trans,
+                types: ['image/png', 'image/jpeg'],
+            },
+        ],
+        translations: {
+            mb: 'MB' | trans,
+            copy: 'Copy' | trans,
+            errorType: data.errorType | default(''),
+        },
+    }%}
+
+
+    <web-mp-file-upload-list
+        cloak
+        table-id="web-mp-list-file-upload"
+        table-config='{{ guiTableConfiguration(tableConfiguration) }}'
+    >
         <h1 title>{{ 'File Uploads' | trans }}</h1>
+        <div action class="spy-row spy-row-gutter-md">
+            <div class="spy-col-basis-auto spy-col-gutter-md">
+                <web-mp-file-uploader
+                    data="{{ fileUploaderConfig.data | json_encode }}"
+                    max-call-amount="20"
+                    translations="{{ fileUploaderConfig.translations | json_encode }}"
+                    multiple
+                >
+                    {% block textData %}
+                        <ul description>
+                            <li>{{ 'You can upload multiple images' | trans }}</li>
+                            <li>{{ 'Max allowed single image size - 2MB' | trans }}</li>
+                        </ul>
+                        <span modal-title>{{ 'Import Images' | trans }}</span>
+                        <span input-label>{{ 'Choose or drag your images' | trans }}</span>
+                        {{ 'Import Images' | trans }}
+                    {% endblock %}
 
-        <web-mp-file-upload-table
-            table-id="web-mp-list-file-upload"
-            config='{{ guiTableConfiguration(tableConfiguration) }}'
-        >
-        </web-mp-file-upload-table>
-    </web-mp-page-layout>
+                    <span modal-cancel-btn>{{ 'Cancel' | trans }}</span>
+                    <span modal-upload-btn>{{ 'Upload' | trans }}</span>
+                    <span modal-back-btn>{{ 'Back' | trans }}</span>
+                    <span modal-show-progress-btn>{{ 'Show Progress' | trans }}</span>
+                </web-mp-file-uploader>
+            </div>
+        </div>
+    </web-mp-file-upload-list>
 {% endblock %}