New: Add root folder from Media Management settings

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
This commit is contained in:
Qstick 2019-08-04 22:49:44 -04:00
parent d41a10df21
commit 2366ce0931
4 changed files with 93 additions and 0 deletions

View File

@ -12,6 +12,7 @@ import FormLabel from 'Components/Form/FormLabel';
import FormInputGroup from 'Components/Form/FormInputGroup'; import FormInputGroup from 'Components/Form/FormInputGroup';
import RootFoldersConnector from 'RootFolder/RootFoldersConnector'; import RootFoldersConnector from 'RootFolder/RootFoldersConnector';
import NamingConnector from './Naming/NamingConnector'; import NamingConnector from './Naming/NamingConnector';
import AddRootFolderConnector from './RootFolder/AddRootFolderConnector';
const rescanAfterRefreshOptions = [ const rescanAfterRefreshOptions = [
{ key: 'always', value: 'Always' }, { key: 'always', value: 'Always' },
@ -395,6 +396,7 @@ class MediaManagement extends Component {
<FieldSet legend="Root Folders"> <FieldSet legend="Root Folders">
<RootFoldersConnector /> <RootFoldersConnector />
<AddRootFolderConnector />
</FieldSet> </FieldSet>
</PageContentBodyConnector> </PageContentBodyConnector>
</PageContent> </PageContent>

View File

@ -0,0 +1,7 @@
.addRootFolderButtonContainer {
margin-top: 20px;
}
.importButtonIcon {
margin-right: 8px;
}

View File

@ -0,0 +1,71 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { icons, kinds, sizes } from 'Helpers/Props';
import Button from 'Components/Link/Button';
import Icon from 'Components/Icon';
import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
import styles from './AddRootFolder.css';
class AddRootFolder extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
isAddNewRootFolderModalOpen: false
};
}
//
// Lifecycle
onAddNewRootFolderPress = () => {
this.setState({ isAddNewRootFolderModalOpen: true });
}
onNewRootFolderSelect = ({ value }) => {
this.props.onNewRootFolderSelect(value);
}
onAddRootFolderModalClose = () => {
this.setState({ isAddNewRootFolderModalOpen: false });
}
//
// Render
render() {
return (
<div className={styles.addRootFolderButtonContainer}>
<Button
kind={kinds.PRIMARY}
size={sizes.LARGE}
onPress={this.onAddNewRootFolderPress}
>
<Icon
className={styles.importButtonIcon}
name={icons.DRIVE}
/>
Add Root Folder
</Button>
<FileBrowserModal
isOpen={this.state.isAddNewRootFolderModalOpen}
name="rootFolderPath"
value=""
onChange={this.onNewRootFolderSelect}
onModalClose={this.onAddRootFolderModalClose}
/>
</div>
);
}
}
AddRootFolder.propTypes = {
onNewRootFolderSelect: PropTypes.func.isRequired
};
export default AddRootFolder;

View File

@ -0,0 +1,13 @@
import { connect } from 'react-redux';
import AddRootFolder from './AddRootFolder';
import { addRootFolder } from 'Store/Actions/rootFolderActions';
function createMapDispatchToProps(dispatch) {
return {
onNewRootFolderSelect(path) {
dispatch(addRootFolder({ path }));
}
};
}
export default connect(null, createMapDispatchToProps)(AddRootFolder);