Merge pull request exadel-inc#675 from exadel-inc/EFRS-1177/BugFix-Su…

…bject-Deleting-files-from-a-theme-while-uploading-files-to-this-theme-does-not-work-correctly

EFRS-1177/BugFix  allow users to delete images while uploading / diss…

ui/src/app/features/collection-manager-subject-left/collection-manager-subject-left/collection-manager-subject-left.component.html

@@ -34,6 +34,7 @@
           (click)="selectedSubject.emit(subject)"
           class="option"
           [attr.selected]="subject === currentSubject"
+          [ngStyle]="{ 'pointer-events': subject === currentSubject ? 'none' : 'auto' }"
         >
           <div class="avatar">
             <mat-icon class="material-icon" [ngClass]="{ 'selected-icon': subject === currentSubject }"> account_circle </mat-icon>

ui/src/app/features/collection-manager-subject-right/collection-manager-subject-right.container.component.ts

@@ -48,6 +48,7 @@ import { SubjectModeEnum } from 'src/app/data/enums/subject-mode.enum';
     (deleteSelectedExamples)="deleteSelectedExamples($event)"
     (loadMore)="loadMore($event)"
     (selectExample)="selectExample($event)"
+    (restartUploading)="restartUploading($event)"
   ></app-collection-manager-subject-right>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -146,6 +147,11 @@ export class CollectionManagerSubjectRightContainerComponent implements OnInit,
       .subscribe(() => this.collectionRightFacade.edit(editName, name, this.apiKey));
   }
 
+  restartUploading(item: CollectionItem[]): void {
+    const filesArr = item.map(item => item.file);
+    this.collectionRightFacade.addImageFilesToCollection(filesArr);
+  }
+
   readFiles(fileList: File[]): void {
     this.collectionRightFacade.addImageFilesToCollection(fileList);
   }

ui/src/app/features/collection-manager-subject-right/collection-manager-subject-right.module.ts

@@ -21,6 +21,7 @@ import { CollectionRightFacade } from './collection-manager-right-facade';
 import { SpinnerModule } from '../spinner/spinner.module';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { DragNDropModule } from '../drag-n-drop/drag-n-drop.module';
 import { ImageHolderCollectionModule } from '../image-holder-collection/image-holder-collection.module';
@@ -35,6 +36,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
     SpinnerModule,
     MatIconModule,
     MatButtonModule,
+    MatTooltipModule,
     TranslateModule,
     DragNDropModule,
     ImageHolderCollectionModule,

ui/src/app/features/collection-manager-subject-right/collection-manager-subject-right/collection-manager-subject-right.component.html

@@ -73,27 +73,50 @@
 <ng-template #defaultButtons>
   <button
     mat-icon-button
+    [disabled]="isCollectionOnHold"
     (click)="editSubject.emit(subject)"
     class="control-button"
     [title]="'manage_collection.right_side.control_button_edit_title' | translate"
   >
-    <mat-icon svgIcon="edit" class="control-icon"></mat-icon>
+    <mat-icon
+      svgIcon="edit"
+      [matTooltipPosition]="'above'"
+      [matTooltipDisabled]="!isCollectionOnHold"
+      [matTooltip]="'manage_collection.right_side.control_button_tooltip' | translate"
+      class="control-icon"
+    ></mat-icon>
   </button>
+
   <button
     mat-icon-button
+    [disabled]="isCollectionOnHold"
     (click)="deleteSubject.emit(subject)"
     class="control-button"
     [title]="'manage_collection.right_side.control_button_delete_title' | translate"
   >
-    <mat-icon svgIcon="trash" class="control-icon"></mat-icon>
+    <mat-icon
+      svgIcon="trash"
+      [matTooltipPosition]="'above'"
+      [matTooltipDisabled]="!isCollectionOnHold"
+      [matTooltip]="'manage_collection.right_side.control_button_tooltip' | translate"
+      class="control-icon"
+    ></mat-icon>
   </button>
+
   <button
     mat-icon-button
+    [disabled]="isCollectionOnHold"
     (click)="setMode.emit(subjectModeEnum.BulkSelect)"
     class="control-button"
     [title]="'manage_collection.right_side.control_button_bulk-select_title' | translate"
   >
-    <mat-icon class="control-icon">library_add_check</mat-icon>
+    <mat-icon
+      [matTooltipPosition]="'above'"
+      [matTooltipDisabled]="!isCollectionOnHold"
+      [matTooltip]="'manage_collection.right_side.control_button_tooltip' | translate"
+      class="control-icon"
+      >library_add_check</mat-icon
+    >
   </button>
 </ng-template>
 

ui/src/app/features/collection-manager-subject-right/collection-manager-subject-right/collection-manager-subject-right.component.ts

@@ -28,6 +28,7 @@ export class CollectionManagerSubjectRightComponent implements OnChanges {
   prevItemCollection: CollectionItem[] = [];
   subjectModeEnum = SubjectModeEnum;
   uploadedExamples: CollectionItem[] = [];
+  isCollectionOnHold: boolean = false;
   totalElements: number = 0;
 
   @Input() isPending: boolean;
@@ -51,11 +52,22 @@ export class CollectionManagerSubjectRightComponent implements OnChanges {
   @Output() deleteSelectedExamples = new EventEmitter<string[]>();
   @Output() selectExample = new EventEmitter<CollectionItem>();
   @Output() loadMore = new EventEmitter<CollectionItem>();
+  @Output() restartUploading = new EventEmitter<CollectionItem[]>();
 
   ngOnChanges(changes: SimpleChanges) {
     const change = changes['collectionItems'];
 
     if (change && change['currentValue'] !== change['previousValue']) {
+      const collectionOnHold = this.collectionItems.filter(item => item.status === CircleLoadingProgressEnum.OnHold);
+
+      this.isCollectionOnHold = !!collectionOnHold.length;
+
+      const itemInProgress = this.collectionItems.find(item => item.status === CircleLoadingProgressEnum.InProgress);
+
+      if (this.isCollectionOnHold && !itemInProgress) {
+        this.restartUploading.emit(collectionOnHold);
+      }
+
       const examples = this.collectionItems.filter(
         item => item['totalElements'] === undefined && item.status === CircleLoadingProgressEnum.Uploaded
       );

ui/src/app/store/manage-collectiom/action.ts

@@ -65,7 +65,7 @@ export const uploadImage = createAction(
 );
 export const uploadImageSuccess = createAction(
   '[Collection] Upload File to Collection Success',
-  props<{ item: CollectionItem; continueUpload?: boolean }>()
+  props<{ item: CollectionItem; itemId: string; continueUpload?: boolean }>()
 );
 export const uploadImageFail = createAction(
   '[Collection] Upload File to Collection Fail',

ui/src/app/store/manage-collectiom/effects.ts

@@ -249,7 +249,10 @@ export class CollectionEffects {
       }
 
       return this.collectionService.uploadSubjectExamples(item, subject, apiKey).pipe(
-        map(() => uploadImageSuccess({ item, continueUpload })),
+        map(res => {
+          const itemId = res.image_id;
+          return uploadImageSuccess({ item, itemId, continueUpload });
+        }),
         catchError(error => {
           return of(uploadImageFail({ error: error.error?.message + `! \n File Name: ${item.file.name}`, item, continueUpload }));
         })

ui/src/app/store/manage-collectiom/reducers.ts

@@ -60,7 +60,8 @@ function updateCollectionItemStatus(
   state: CollectionEntityState,
   item: CollectionItem,
   status: CircleLoadingProgressEnum,
-  error?: string
+  error?: string,
+  id?: string
 ): CollectionEntityState {
   const collectionCopy = [...state.collection];
   const targetItemIndex = collectionCopy.findIndex(collectionCopyItem => item.url === collectionCopyItem.url);
@@ -69,6 +70,7 @@ function updateCollectionItemStatus(
     collectionCopy[targetItemIndex] = {
       ...collectionCopy[targetItemIndex],
       status,
+      id,
     };
 
     if (error) {
@@ -173,9 +175,10 @@ const reducer: ActionReducer<CollectionEntityState> = createReducer(
     };
   }),
   on(uploadImage, deleteSubjectExample, (state, { item }) => updateCollectionItemStatus(state, item, CircleLoadingProgressEnum.InProgress)),
-  on(uploadImageSuccess, deleteSubjectExampleSuccess, (state, { item }) =>
-    updateCollectionItemStatus(state, item, CircleLoadingProgressEnum.Uploaded)
+  on(uploadImageSuccess, (state, { item, itemId }) =>
+    updateCollectionItemStatus(state, item, CircleLoadingProgressEnum.Uploaded, null, itemId)
   ),
+  on(deleteSubjectExampleSuccess, (state, { item }) => updateCollectionItemStatus(state, item, CircleLoadingProgressEnum.Uploaded)),
   on(uploadImageFail, deleteSubjectExampleFail, (state, { item, error }) =>
     updateCollectionItemStatus(state, item, CircleLoadingProgressEnum.Failed, error)
   ),

ui/src/assets/i18n/en.json

@@ -144,7 +144,7 @@
   "org_users": {
     "confirm_dialog": {
       "title": "Stop Uploading",
-      "confirmation_question": "You have loading images in the background. If you leave this page, the load will be canceled.Do you really want to leave the page?"
+      "confirmation_question": "You have loading images in the background. If you leave this page, the load will be canceled. Do you really want to leave the page?"
     },
     "delete_dialog": {
       "title": "{{type}} Delete",
@@ -234,7 +234,8 @@
       "control_button_bulk-select-exit_title": "Exit selection mode",
       "control_button_bulk-delete_title": "Delete selected",
       "modal_bulk-delete_type": "Examples",
-      "modal_bulk-delete_name": " item(s)"
+      "modal_bulk-delete_name": " item(s)",
+      "control_button_tooltip": "Uploading is in process"
     }
   },
   "tooltip": {