wip

lib/gui/app/components/drive-selector2/drive-selector.tsx

@@ -43,9 +43,9 @@ interface CompatibilityStatus {
 }
 
 interface DriveSelectorProps {
+	title: string;
 	close: () => void;
-  selectDrive: (drive: Drive) => void;
+	setSelectedDrives: (drives: Drive[]) => void;
-  deselectDrive: (drive: Drive) => void;
 	isDriveSelected: (drive: Drive) => boolean;
 	isDriveValid: (drive: Drive) => boolean;
 	getDriveBadges: (drive: Drive) => CompatibilityStatus[];
@@ -192,8 +192,7 @@ export class DriveSelector2 extends React.Component<
 			);
 		}
 		result.push(
-			...this.props.getDriveBadges(row).map(
+			...this.props.getDriveBadges(row).map((status: CompatibilityStatus) => {
-				(status: CompatibilityStatus) => {
 				const props: {
 					key: string;
 					xsmall: true;
@@ -206,8 +205,7 @@ export class DriveSelector2 extends React.Component<
 					props.warning = true;
 				}
 				return <Badge {...props}>{status.message}</Badge>;
-				},
+			}),
-			),
 		);
 		return <React.Fragment>{result}</React.Fragment>;
 	}
@@ -231,7 +229,7 @@ export class DriveSelector2 extends React.Component<
 				<Modal
 					titleElement={
 						<div style={titleStyle}>
-							Available targets
+							{this.props.title}
 							<span style={subtitleStyle}>
 								{this.state.drives.length} found
 							</span>
@@ -261,13 +259,6 @@ export class DriveSelector2 extends React.Component<
 	}
 
 	private onCheck(checkedDrives: Drive[]): void {
-		const checkedDevices = checkedDrives.map(d => d.device);
+		this.props.setSelectedDrives(checkedDrives);
-		for (const drive of getDrives()) {
-			if (checkedDevices.indexOf(drive.device) !== -1) {
-				this.props.selectDrive(drive);
-			} else {
-				this.props.deselectDrive(drive);
-			}
-		}
 	}
 }

lib/gui/app/components/drive-selector2/index.ts

@@ -25,10 +25,14 @@ angular
 	.module(MODULE_NAME, [])
 	.component(
 		'driveSelector2',
-		react2angular(
+		react2angular(DriveSelector2, [
-			DriveSelector2,
+			'close',
-			['close', 'selectDrive', 'deselectDrive', 'isDriveSelected', 'isDriveValid', 'getDriveBadges']
+			'getDriveBadges',
-		)
+			'isDriveSelected',
-	)
+			'isDriveValid',
+			'setSelectedDrives',
+			'title',
+		]),
+	);
 
 export = MODULE_NAME;

lib/gui/app/pages/main/controllers/drive-selection.js

@@ -22,6 +22,7 @@ const prettyBytes = require('pretty-bytes')
 const store = require('../../../models/store')
 // eslint-disable-next-line node/no-missing-require
 const settings = require('../../../models/settings')
+const availableDrives = require('../../../models/available-drives')
 const selectionState = require('../../../models/selection-state')
 const driveConstraints = require('../../../modules/drive-constraints')
 const analytics = require('../../../modules/analytics')
@@ -171,12 +172,15 @@ module.exports = function ($timeout, DriveSelectorService) {
     $timeout()
   }
 
-  this.selectDrive = (drive) => {
+  this.setSelectedDrives = (drives) => {
-    return selectionState.selectDrive(drive.device)
+		const devices = drives.map(d => d.device);
+		for (const drive of availableDrives.getDrives()) {
+			if (devices.indexOf(drive.device) !== -1) {
+        selectionState.selectDrive(drive.device)
+			} else {
+        selectionState.deselectDrive(drive.device)
+			}
 		}
-
-  this.deselectDrive = (drive) => {
-    return selectionState.deselectDrive(drive.device)
   }
 
   this.isDriveSelected = (drive) => {

lib/gui/app/pages/main/controllers/image-selection.js

@@ -277,28 +277,38 @@ module.exports = function (
     $timeout()
   }
 
-  this.closeDriveSelector = () => {
+  this.closeDriveSelectorModal = () => {
     this.driveSelectorModalOpen = false;
     $timeout()
   }
 
-  this.selectDrive = (drive) => {
+  this.setSelectedDrives = (drives) => {
+    const currentlySelected = this.getSelectedDrive()
+    if (currentlySelected) {
+      drives = drives.filter(d => d.device !== currentlySelected.path)
+    }
+    if (drives.length === 0) {
+      this.deselectImage()
+    } else {
       selectionState.selectImage({
-      path: drive.device,
+        path: drives[0].device,
-      size: drive.size,
+        size: drives[0].size,
         isDrive: true
       })
+
+    }
   }
 
-  this.deselectDrive = (drive) => {
+  this.getSelectedDrive = () => {
-    if (this.isDriveSelected(drive)) {
+    const image = selectionState.getImage()
-      this.deselectImage()
+    if (image && image.isDrive) {
+      return image
     }
   }
 
   this.isDriveSelected = (drive) => {
-    const image = selectionState.getImage()
+    const selectedDrive = this.getSelectedDrive()
-    return image && image.isDrive && image.path === drive.device
+    return selectedDrive && selectedDrive.path === drive.device
   }
 
   this.isDriveValid = (drive) => {

lib/gui/app/pages/main/templates/main.tpl.html

@@ -2,9 +2,9 @@
   <div class="col-xs" ng-controller="ImageSelectionController as image">
     <drive-selector-2
       ng-if="image.driveSelectorModalOpen"
+      title="'Select a source drive'"
       close="image.closeDriveSelectorModal"
-      select-drive="image.selectDrive"
+      set-selected-drives="image.setSelectedDrives"
-      deselect-drive="image.deselectDrive"
       is-drive-selected="image.isDriveSelected"
       is-drive-valid="image.isDriveValid"
       get-drive-badges="image.getDriveBadges"
@@ -39,9 +39,9 @@
   <div class="col-xs" ng-controller="DriveSelectionController as drive">
     <drive-selector-2
       ng-if="drive.driveSelectorModalOpen"
+      title="'Available targets'"
       close="drive.closeDriveSelectorModal"
-      select-drive="drive.selectDrive"
+      set-selected-drives="drive.setSelectedDrives"
-      deselect-drive="drive.deselectDrive"
       is-drive-selected="drive.isDriveSelected"
       is-drive-valid="drive.isDriveValid"
       get-drive-badges="drive.getDriveBadges"