Fixed: Calendar Missing Search Not Functional, Other Tweaks

frontend/src/Calendar/CalendarPageConnector.js

@@ -25,7 +25,7 @@ function createMissingMovieIdsSelector() {
           moment(inCinemas).isAfter(start) &&
           moment(inCinemas).isBefore(end) &&
           isBefore(movie.inCinemas) &&
-          !queueDetails.some((details) => !!details.movie && details.movie.id === movie.id)
+          !queueDetails.some((details) => details.movieId === movie.id)
         ) {
           acc.push(movie.id);
         }

frontend/src/Calendar/Events/CalendarEvent.css

@@ -11,23 +11,35 @@
   }
 }
 
+.link {
+  composes: link from '~Components/Link/Link.css';
+
+  display: block;
+  color: $defaultColor;
+
+  &:hover {
+    color: $defaultColor;
+    text-decoration: none;
+  }
+}
+
 .info,
-.episodeInfo {
+.movieInfo {
   display: flex;
 }
 
-.episodeInfo {
+.movieInfo {
   color: $calendarTextDim;
 }
 
-.seriesTitle,
-.episodeTitle {
+.movieTitle,
+.genres {
   @add-mixin truncate;
   flex: 1 0 1px;
   margin-right: 10px;
 }
 
-.seriesTitle {
+.movieTitle {
   color: #3a3f51;
   font-size: $defaultFontSize;
 }

frontend/src/Calendar/Events/CalendarEvent.js

@@ -7,7 +7,6 @@ import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import CalendarEventQueueDetails from './CalendarEventQueueDetails';
-import MovieTitleLink from 'Movie/MovieTitleLink';
 import styles from './CalendarEvent.css';
 
 class CalendarEvent extends Component {
@@ -19,25 +18,10 @@ class CalendarEvent extends Component {
     super(props, context);
 
     this.state = {
-      isDetailsModalOpen: false
+      // isDetailsModalOpen: false
     };
   }
 
-  //
-  // Listeners
-
-  onPress = () => {
-    this.setState({ isDetailsModalOpen: true }, () => {
-      this.props.onEventModalOpenToggle(true);
-    });
-  }
-
-  onDetailsModalClose = () => {
-    this.setState({ isDetailsModalOpen: false }, () => {
-      this.props.onEventModalOpenToggle(false);
-    });
-  }
-
   //
   // Render
 
@@ -47,10 +31,12 @@ class CalendarEvent extends Component {
       inCinemas,
       title,
       titleSlug,
+      genres,
       monitored,
       hasFile,
       grabbed,
       queueItem,
+      showMovieInformation,
       showCutoffUnmetIcon,
       colorImpairedMode
     } = this.props;
@@ -59,24 +45,24 @@ class CalendarEvent extends Component {
     const isDownloading = !!(queueItem || grabbed);
     const isMonitored = monitored;
     const statusStyle = getStatusStyle(hasFile, isDownloading, startTime, isMonitored);
+    const joinedGenres = genres.slice(0, 2).join(', ');
+    const link = `/movie/${titleSlug}`;
 
     return (
       <div>
         <Link
           className={classNames(
             styles.event,
+            styles.link,
             styles[statusStyle],
             colorImpairedMode && 'colorImpaired'
           )}
-          component="div"
-          onPress={this.onPress}
+          // component="div"
+          to={link}
         >
           <div className={styles.info}>
-            <div className={styles.seriesTitle}>
-              <MovieTitleLink
-                titleSlug={titleSlug}
-                title={title}
-              />
+            <div className={styles.movieTitle}>
+              {title}
             </div>
 
             {
@@ -109,6 +95,15 @@ class CalendarEvent extends Component {
                 />
             }
           </div>
+
+          {
+            showMovieInformation &&
+              <div className={styles.movieInfo}>
+                <div className={styles.genres}>
+                  {joinedGenres}
+                </div>
+              </div>
+          }
         </Link>
 
       </div>
@@ -118,6 +113,7 @@ class CalendarEvent extends Component {
 
 CalendarEvent.propTypes = {
   id: PropTypes.number.isRequired,
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
   movieFile: PropTypes.object,
   title: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
@@ -126,10 +122,15 @@ CalendarEvent.propTypes = {
   hasFile: PropTypes.bool.isRequired,
   grabbed: PropTypes.bool,
   queueItem: PropTypes.object,
+  showMovieInformation: PropTypes.bool.isRequired,
   showCutoffUnmetIcon: PropTypes.bool.isRequired,
   timeFormat: PropTypes.string.isRequired,
-  colorImpairedMode: PropTypes.bool.isRequired,
-  onEventModalOpenToggle: PropTypes.func.isRequired
+  colorImpairedMode: PropTypes.bool.isRequired
+  // onEventModalOpenToggle: PropTypes.func.isRequired
+};
+
+CalendarEvent.defaultProps = {
+  genres: []
 };
 
 export default CalendarEvent;

frontend/src/Calendar/Events/CalendarEventQueueDetails.js

@@ -25,7 +25,7 @@ function CalendarEventQueueDetails(props) {
       status={status}
       errorMessage={errorMessage}
       progressBar={
-        <div title={`Episode is downloading - ${progress.toFixed(1)}% ${title}`}>
+        <div title={`Movie is downloading - ${progress.toFixed(1)}% ${title}`}>
           <CircularProgressBar
             progress={progress}
             size={20}

frontend/src/Calendar/Options/CalendarOptionsModalContent.js

@@ -92,9 +92,7 @@ class CalendarOptionsModalContent extends Component {
   render() {
     const {
       collapseMultipleEpisodes,
-      showEpisodeInformation,
-      showFinaleIcon,
-      showSpecialIcon,
+      showMovieInformation,
       showCutoffUnmetIcon,
       onModalClose
     } = this.props;
@@ -128,37 +126,13 @@ class CalendarOptionsModalContent extends Component {
               </FormGroup>
 
               <FormGroup>
-                <FormLabel>Show Episode Information</FormLabel>
+                <FormLabel>Show Movie Information</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.CHECK}
-                  name="showEpisodeInformation"
-                  value={showEpisodeInformation}
-                  helpText="Show episode title and number"
-                  onChange={this.onOptionInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>Icon for Finales</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="showFinaleIcon"
-                  value={showFinaleIcon}
-                  helpText="Show icon for series/season finales based on available episode information"
-                  onChange={this.onOptionInputChange}
-                />
-              </FormGroup>
-
-              <FormGroup>
-                <FormLabel>Icon for Specials</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.CHECK}
-                  name="showSpecialIcon"
-                  value={showSpecialIcon}
-                  helpText="Show icon for special episodes (season 0)"
+                  name="showMovieInformation"
+                  value={showMovieInformation}
+                  helpText="Show movie genres and certification"
                   onChange={this.onOptionInputChange}
                 />
               </FormGroup>
@@ -242,7 +216,7 @@ class CalendarOptionsModalContent extends Component {
 
 CalendarOptionsModalContent.propTypes = {
   collapseMultipleEpisodes: PropTypes.bool.isRequired,
-  showEpisodeInformation: PropTypes.bool.isRequired,
+  showMovieInformation: PropTypes.bool.isRequired,
   showFinaleIcon: PropTypes.bool.isRequired,
   showSpecialIcon: PropTypes.bool.isRequired,
   showCutoffUnmetIcon: PropTypes.bool.isRequired,

frontend/src/Store/Actions/calendarActions.js

@@ -39,9 +39,7 @@ export const defaultState = {
 
   options: {
     collapseMultipleEpisodes: false,
-    showEpisodeInformation: true,
-    showFinaleIcon: false,
-    showSpecialIcon: false,
+    showMovieInformation: true,
     showCutoffUnmetIcon: false
   },
 
@@ -346,11 +344,11 @@ export const actionHandlers = handleThunks({
   },
 
   [SEARCH_MISSING]: function(getState, payload, dispatch) {
-    const { episodeIds } = payload;
+    const { movieIds } = payload;
 
     const commandPayload = {
       name: commandNames.MOVIE_SEARCH,
-      episodeIds
+      movieIds
     };
 
     executeCommandHelper(commandPayload, dispatch).then((data) => {