From 868a35337cbc548c9d883f9fd28b6557174c3eda Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Tue, 16 Jul 2019 13:17:46 +0200 Subject: [PATCH] wip --- .../drive-selector2/drive-selector.tsx | 49 ++++++++----------- .../app/components/drive-selector2/index.ts | 14 ++++-- .../pages/main/controllers/drive-selection.js | 16 +++--- .../pages/main/controllers/image-selection.js | 34 ++++++++----- .../app/pages/main/templates/main.tpl.html | 8 +-- 5 files changed, 65 insertions(+), 56 deletions(-) diff --git a/lib/gui/app/components/drive-selector2/drive-selector.tsx b/lib/gui/app/components/drive-selector2/drive-selector.tsx index 097b636f..5bc8c91c 100644 --- a/lib/gui/app/components/drive-selector2/drive-selector.tsx +++ b/lib/gui/app/components/drive-selector2/drive-selector.tsx @@ -43,10 +43,10 @@ interface CompatibilityStatus { } interface DriveSelectorProps { + title: string; close: () => void; - selectDrive: (drive: Drive) => void; - deselectDrive: (drive: Drive) => void; - isDriveSelected: (drive: Drive) => boolean; + setSelectedDrives: (drives: Drive[]) => void; + isDriveSelected: (drive: Drive) => boolean; isDriveValid: (drive: Drive) => boolean; getDriveBadges: (drive: Drive) => CompatibilityStatus[]; } @@ -139,7 +139,7 @@ export class DriveSelector2 extends React.Component< for (let i = 0; i < drives.length; i++) { drives[i] = { ...drives[i] }; } - drives = sortBy(drives, 'device'); + drives = sortBy(drives, 'device'); const selected = drives.filter(d => this.props.isDriveSelected(d)); const disabledDrives = drives .filter(d => !this.props.isDriveValid(d)) @@ -192,22 +192,20 @@ export class DriveSelector2 extends React.Component< ); } result.push( - ...this.props.getDriveBadges(row).map( - (status: CompatibilityStatus) => { - const props: { - key: string; - xsmall: true; - danger?: boolean; - warning?: boolean; - } = { xsmall: true, key: status.message }; - if (status.type === COMPATIBILITY_STATUS_TYPES.ERROR) { - props.danger = true; - } else if (status.type === COMPATIBILITY_STATUS_TYPES.WARNING) { - props.warning = true; - } - return {status.message}; - }, - ), + ...this.props.getDriveBadges(row).map((status: CompatibilityStatus) => { + const props: { + key: string; + xsmall: true; + danger?: boolean; + warning?: boolean; + } = { xsmall: true, key: status.message }; + if (status.type === COMPATIBILITY_STATUS_TYPES.ERROR) { + props.danger = true; + } else if (status.type === COMPATIBILITY_STATUS_TYPES.WARNING) { + props.warning = true; + } + return {status.message}; + }), ); return {result}; } @@ -231,7 +229,7 @@ export class DriveSelector2 extends React.Component< - Available targets + {this.props.title} {this.state.drives.length} found @@ -261,13 +259,6 @@ export class DriveSelector2 extends React.Component< } private onCheck(checkedDrives: Drive[]): void { - const checkedDevices = checkedDrives.map(d => d.device); - for (const drive of getDrives()) { - if (checkedDevices.indexOf(drive.device) !== -1) { - this.props.selectDrive(drive); - } else { - this.props.deselectDrive(drive); - } - } + this.props.setSelectedDrives(checkedDrives); } } diff --git a/lib/gui/app/components/drive-selector2/index.ts b/lib/gui/app/components/drive-selector2/index.ts index 819d7b5a..a9fa8f30 100644 --- a/lib/gui/app/components/drive-selector2/index.ts +++ b/lib/gui/app/components/drive-selector2/index.ts @@ -25,10 +25,14 @@ angular .module(MODULE_NAME, []) .component( 'driveSelector2', - react2angular( - DriveSelector2, - ['close', 'selectDrive', 'deselectDrive', 'isDriveSelected', 'isDriveValid', 'getDriveBadges'] - ) - ) + react2angular(DriveSelector2, [ + 'close', + 'getDriveBadges', + 'isDriveSelected', + 'isDriveValid', + 'setSelectedDrives', + 'title', + ]), + ); export = MODULE_NAME; diff --git a/lib/gui/app/pages/main/controllers/drive-selection.js b/lib/gui/app/pages/main/controllers/drive-selection.js index 09a5fbe0..91524281 100644 --- a/lib/gui/app/pages/main/controllers/drive-selection.js +++ b/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) => { - return selectionState.selectDrive(drive.device) - } - - this.deselectDrive = (drive) => { - return selectionState.deselectDrive(drive.device) + this.setSelectedDrives = (drives) => { + 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.isDriveSelected = (drive) => { diff --git a/lib/gui/app/pages/main/controllers/image-selection.js b/lib/gui/app/pages/main/controllers/image-selection.js index 3ca76367..c38359e4 100644 --- a/lib/gui/app/pages/main/controllers/image-selection.js +++ b/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) => { - selectionState.selectImage({ - path: drive.device, - size: drive.size, - isDrive: true - }) + 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: drives[0].device, + size: drives[0].size, + isDrive: true + }) + + } } - this.deselectDrive = (drive) => { - if (this.isDriveSelected(drive)) { - this.deselectImage() + this.getSelectedDrive = () => { + const image = selectionState.getImage() + if (image && image.isDrive) { + return image } } this.isDriveSelected = (drive) => { - const image = selectionState.getImage() - return image && image.isDrive && image.path === drive.device + const selectedDrive = this.getSelectedDrive() + return selectedDrive && selectedDrive.path === drive.device } this.isDriveValid = (drive) => { diff --git a/lib/gui/app/pages/main/templates/main.tpl.html b/lib/gui/app/pages/main/templates/main.tpl.html index 3425d7f8..d2b099d1 100644 --- a/lib/gui/app/pages/main/templates/main.tpl.html +++ b/lib/gui/app/pages/main/templates/main.tpl.html @@ -2,9 +2,9 @@