Feature/2499/show garbage bin next to the loaded maps (#2647)

* migrate remove file button

* fix remove file button

* change remove file button style

* disable remove loaded map button when only one left

* fix test for remove loaded map button

* fix remove file button only visible when at least 2 maps are loaded

* Add test for remove file button #2499

* Change scss #2499

* Fix button hover circle #2499

* Update CHANGELOG.md

Co-authored-by: Clara Schild <clara.schild@maibornwolff.de>
Co-authored-by: cschild <clara.schild@gmail.com>
Co-authored-by: cschild <48218172+cschild@users.noreply.github.com>

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Fixed 🐞
 
 -   Fix flaky string comparison possibly due to puppeteer update [#2659](https://github.com/MaibornWolff/codecharta/pull/2659)
+-   Fix show garbage bin next to the loaded maps [#2647](https://github.com/MaibornWolff/codecharta/pull/2647)
 
 ### Chore 👨‍💻 👩‍💻
 

visualization/app/app.module.ts

@@ -31,6 +31,9 @@ import { threeSceneServiceProvider } from "./codeCharta/services/ajs-upgraded-pr
 import { NodeContextMenuCardModule } from "./codeCharta/state/effects/nodeContextMenu/nodeContextMenuCard/nodeContextMenuCard.module"
 import { OpenNodeContextMenuEffect } from "./codeCharta/state/effects/nodeContextMenu/openNodeContextMenu.effect"
 import { InvertAreaOptionComponent } from "./codeCharta/ui/areaSettingsPanel/invertAreaOption/invertAreaOption.component"
+import { RemoveFileButtonComponent } from "./codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component"
+import { FocusButtonsComponent } from "./codeCharta/state/effects/nodeContextMenu/focusButtons/focusButtons.component"
+import { MarkFolderRowComponent } from "./codeCharta/state/effects/nodeContextMenu/markFolderRow/markFolderRow.component"
 import { IdToBuildingService } from "./codeCharta/services/idToBuilding/idToBuilding.service"
 
 @NgModule({
@@ -59,6 +62,7 @@ import { IdToBuildingService } from "./codeCharta/services/idToBuilding/idToBuil
 		FilePanelStateButtonsComponent,
 		FilePanelDeltaSelectorComponent,
 		InvertAreaOptionComponent,
+		RemoveFileButtonComponent,
 		...dialogs
 	],
 	entryComponents: [
@@ -73,6 +77,9 @@ import { IdToBuildingService } from "./codeCharta/services/idToBuilding/idToBuil
 		FilePanelStateButtonsComponent,
 		FilePanelDeltaSelectorComponent,
 		InvertAreaOptionComponent,
+		FocusButtonsComponent,
+		MarkFolderRowComponent,
+		RemoveFileButtonComponent,
 		...dialogs
 	]
 })

visualization/app/codeCharta/ui/filePanel/filePanel.component.html

@@ -13,6 +13,7 @@
 	[handle-select-zero-partial-files]="$ctrl.selectZeroPartialFiles"
 	[handle-invert-selected-partial-files]="$ctrl.invertPartialFileSelection"
 	[handle-on-selection-closed]="$ctrl.onPartialSelectionClosed"
+	[handle-on-remove-file]="$ctrl.onRemoveFile"
 	[files]="$ctrl._viewModel.files"
 ></cc-file-panel-file-selector>
 

visualization/app/codeCharta/ui/filePanel/filePanel.component.spec.ts

@@ -311,6 +311,13 @@ describe("filePanelController", () => {
 			]
 		})
 
+		it("should delete file", () => {
+			filePanelController.onRemoveFile("fileA", new Event("mouseEvent"))
+
+			const remainingFiles = storeService.getState().files
+			expect(remainingFiles.length).toEqual(3)
+		})
+
 		it("should not change selection when partially selected files still exist", () => {
 			storeService.dispatch(setMultiple([TEST_DELTA_MAP_B, TEST_DELTA_MAP_C]))
 

visualization/app/codeCharta/ui/filePanel/filePanel.component.ts

@@ -56,7 +56,7 @@ export class FilePanelController implements FilesSelectionSubscriber, MapColorsS
 		this._viewModel.pictogramLowerColor = mapColors.negativeDelta
 	}
 
-	onRemoveFile(filename, $event): void {
+	onRemoveFile = (filename: string, $event): void => {
 		this.storeService.dispatch(removeFile(filename))
 		this.storeService.dispatch(removeRecentFile(filename))
 
@@ -69,7 +69,6 @@ export class FilePanelController implements FilesSelectionSubscriber, MapColorsS
 
 	private partialStateFileRemove(files: FileState[]) {
 		const selectedFiles = files.filter(x => x.selectedAs === FileSelectionState.Partial).map(fileState => getFileNameOf(fileState))
-
 		if (selectedFiles.length > 0) {
 			this.onPartialFilesChange(selectedFiles)
 		} else {

visualization/app/codeCharta/ui/filePanel/filePanel.module.ts

@@ -9,10 +9,12 @@ import { downgradeComponent } from "@angular/upgrade/static"
 import { FilePanelFileSelectorComponent } from "./filePanelFileSelector/filePanelFileSelector.component"
 import { FilePanelStateButtonsComponent } from "./filePanelStateButtons/filePanelStateButtons.component"
 import { FilePanelDeltaSelectorComponent } from "./filePanelDeltaSelector/filePanelDeltaSelector.component"
+import { RemoveFileButtonComponent } from "./filePanelFileSelector/removeFileButton/removeFileButton.component"
 
 angular
 	.module("app.codeCharta.ui.filePanel", ["app.codeCharta.state"])
 	.component(filePanelComponent.selector, filePanelComponent)
 	.directive("ccFilePanelFileSelector", downgradeComponent({ component: FilePanelFileSelectorComponent }))
 	.directive("ccFilePanelStateButtons", downgradeComponent({ component: FilePanelStateButtonsComponent }))
 	.directive("ccFilePanelDeltaSelector", downgradeComponent({ component: FilePanelDeltaSelectorComponent }))
+	.directive("ccRemoveFileButton", downgradeComponent({ component: RemoveFileButtonComponent }))

visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.html

@@ -12,7 +12,13 @@
 		<button mat-button (click)="handleSelectZeroPartialFiles()">None</button>
 		<button mat-button (click)="handleInvertSelectedPartialFiles()">Invert</button>
 	</div>
-	<mat-option *ngFor="let file of files" [value]="file.file.fileMeta.fileName">
+	<mat-option class="filenames" *ngFor="let file of files" [value]="file.file.fileMeta.fileName">
 		{{ file.file.fileMeta.fileName }}
+
+		<cc-remove-file-button
+			*ngIf="files.length > 1"
+			[filename]="file.file.fileMeta.fileName"
+			[onRemoveFile]="handleOnRemoveFile"
+		></cc-remove-file-button>
 	</mat-option>
 </mat-select>

visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.scss

@@ -0,0 +1,6 @@
+.filenames {
+	.mat-option-text {
+		display: flex;
+		justify-content: space-between;
+	}
+}

visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.ts

@@ -1,6 +1,6 @@
+import "./filePanelFileSelector.component.scss"
 import { Component, Input } from "@angular/core"
 import { FileState } from "../../../model/files/files"
-
 @Component({
 	selector: "cc-file-panel-file-selector",
 	template: require("./filePanelFileSelector.component.html")
@@ -13,4 +13,5 @@ export class FilePanelFileSelectorComponent {
 	@Input() handleSelectZeroPartialFiles: () => void
 	@Input() handleInvertSelectedPartialFiles: () => void
 	@Input() handleOnSelectionClosed: () => void
+	@Input() handleOnRemoveFile: (filename: string, event) => void
 }

visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.html

@@ -0,0 +1,3 @@
+<button mat-button (click)="onRemoveFile(filename, $event)" title="Remove map">
+	<i class="fa fa-trash delete-symbol"></i>
+</button>

visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.scss

@@ -0,0 +1,9 @@
+cc-remove-file-button {
+	.mat-button {
+		border-radius: 50%;
+		margin: 0;
+		min-width: 0;
+		line-height: 0;
+		padding: 8px 10px;
+	}
+}

visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.ts

@@ -0,0 +1,11 @@
+import "./removeFileButton.component.scss"
+import { Component, Input } from "@angular/core"
+
+@Component({
+	selector: "cc-remove-file-button",
+	template: require("./removeFileButton.component.html")
+})
+export class RemoveFileButtonComponent {
+	@Input() filename: string
+	@Input() onRemoveFile: (filename: string, event) => void
+}