[UI Work] Add Artist, Import Artist, Calendar

2026-04-19 21:44:30 -04:00 · 2017-09-07 23:09:52 -04:00
parent a747c5f135
commit 77f1d2e64c
109 changed files with 891 additions and 1082 deletions
@@ -0,0 +1,185 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { kinds, sizes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import ImportArtistRootFolderRowConnector from './ImportArtistRootFolderRowConnector';
+import styles from './ImportArtistSelectFolder.css';
+
+const rootFolderColumns = [
+  {
+    name: 'path',
+    label: 'Path',
+    isVisible: true
+  },
+  {
+    name: 'freeSpace',
+    label: 'Free Space',
+    isVisible: true
+  },
+  {
+    name: 'unmappedFolders',
+    label: 'Unmapped Folders',
+    isVisible: true
+  },
+  {
+    name: 'actions',
+    isVisible: true
+  }
+];
+
+class ImportArtistSelectFolder 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() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items
+    } = this.props;
+
+    return (
+      <PageContent title="Import Artist">
+        <PageContentBodyConnector>
+          {
+            isFetching && !isPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>Unable to load root folders</div>
+          }
+
+          {
+            !error && isPopulated &&
+              <div>
+                <div className={styles.header}>
+                  Import artist(s) you already have
+                </div>
+
+                <div className={styles.tips}>
+                  Some tips to ensure the import goes smoothly:
+                  <ul>
+                    <li className={styles.tip}>
+                      Point Lidarr to the folder containing all of your music not a specific artist. eg. <span className={styles.code}>"\music\"</span> and not <span className={styles.code}>"\music\alien ant farm\"</span>
+                    </li>
+                  </ul>
+                </div>
+
+                {
+                  items.length > 0 ?
+                    <div className={styles.recentFolders}>
+                      <FieldSet
+                        legend="Recent Folders"
+                      >
+                        <Table
+                          columns={rootFolderColumns}
+                        >
+                          <TableBody>
+                            {
+                              items.map((rootFolder) => {
+                                return (
+                                  <ImportArtistRootFolderRowConnector
+                                    key={rootFolder.id}
+                                    id={rootFolder.id}
+                                    path={rootFolder.path}
+                                    freeSpace={rootFolder.freeSpace}
+                                    unmappedFolders={rootFolder.unmappedFolders}
+                                  />
+                                );
+                              })
+                            }
+                          </TableBody>
+                        </Table>
+                      </FieldSet>
+
+                      <Button
+                        kind={kinds.PRIMARY}
+                        size={sizes.LARGE}
+                        onPress={this.onAddNewRootFolderPress}
+                      >
+                        <Icon
+                          className={styles.importButtonIcon}
+                          name="fa fa-hdd-o"
+                        />
+                        Choose another folder
+                      </Button>
+                    </div> :
+
+                    <div className={styles.startImport}>
+                      <Button
+                        kind={kinds.PRIMARY}
+                        size={sizes.LARGE}
+                        onPress={this.onAddNewRootFolderPress}
+                      >
+                        <Icon
+                          className={styles.importButtonIcon}
+                          name="fa fa-hdd-o"
+                        />
+                        Start Import
+                      </Button>
+                    </div>
+                }
+
+                <FileBrowserModal
+                  isOpen={this.state.isAddNewRootFolderModalOpen}
+                  name="rootFolderPath"
+                  value=""
+                  onChange={this.onNewRootFolderSelect}
+                  onModalClose={this.onAddRootFolderModalClose}
+                />
+              </div>
+          }
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+ImportArtistSelectFolder.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onNewRootFolderSelect: PropTypes.func.isRequired,
+  onDeleteRootFolderPress: PropTypes.func.isRequired
+};
+
+export default ImportArtistSelectFolder;