New: Indexer flags

Closes #2782

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.tsx

@@ -29,6 +29,7 @@ import { align, icons, kinds, scrollDirections } from 'Helpers/Props';
 import SelectEpisodeModal from 'InteractiveImport/Episode/SelectEpisodeModal';
 import { SelectedEpisode } from 'InteractiveImport/Episode/SelectEpisodeModalContent';
 import ImportMode from 'InteractiveImport/ImportMode';
+import SelectIndexerFlagsModal from 'InteractiveImport/IndexerFlags/SelectIndexerFlagsModal';
 import InteractiveImport, {
   InteractiveImportCommandOptions,
 } from 'InteractiveImport/InteractiveImport';
@@ -71,7 +72,8 @@ type SelectType =
   | 'episode'
   | 'releaseGroup'
   | 'quality'
-  | 'language';
+  | 'language'
+  | 'indexerFlags';
 
 type FilterExistingFiles = 'all' | 'new';
 
@@ -135,11 +137,21 @@ const COLUMNS = [
     isSortable: true,
     isVisible: true,
   },
+  {
+    name: 'indexerFlags',
+    label: React.createElement(Icon, {
+      name: icons.FLAG,
+      title: () => translate('IndexerFlags'),
+    }),
+    isSortable: true,
+    isVisible: true,
+  },
   {
     name: 'rejections',
     label: React.createElement(Icon, {
       name: icons.DANGER,
       kind: kinds.DANGER,
+      title: () => translate('Rejections'),
     }),
     isSortable: true,
     isVisible: true,
@@ -284,8 +296,18 @@ function InteractiveImportModalContent(
       }
     }
 
+    const showIndexerFlags = items.some((item) => item.indexerFlags);
+
+    if (!showIndexerFlags) {
+      const indexerFlagsColumn = result.find((c) => c.name === 'indexerFlags');
+
+      if (indexerFlagsColumn) {
+        indexerFlagsColumn.isVisible = false;
+      }
+    }
+
     return result;
-  }, [showSeries]);
+  }, [showSeries, items]);
 
   const selectedIds: number[] = useMemo(() => {
     return getSelectedIds(selectedState);
@@ -343,6 +365,10 @@ function InteractiveImportModalContent(
         key: 'language',
         value: translate('SelectLanguage'),
       },
+      {
+        key: 'indexerFlags',
+        value: translate('SelectIndexerFlags'),
+      },
     ];
 
     if (allowSeriesChange) {
@@ -483,6 +509,7 @@ function InteractiveImportModalContent(
           releaseGroup,
           quality,
           languages,
+          indexerFlags,
           episodeFileId,
         } = item;
 
@@ -532,6 +559,7 @@ function InteractiveImportModalContent(
               releaseGroup,
               quality,
               languages,
+              indexerFlags,
             });
 
             return;
@@ -546,6 +574,7 @@ function InteractiveImportModalContent(
           releaseGroup,
           quality,
           languages,
+          indexerFlags,
           downloadId,
           episodeFileId,
         });
@@ -742,6 +771,22 @@ function InteractiveImportModalContent(
     [selectedIds, dispatch]
   );
 
+  const onIndexerFlagsSelect = useCallback(
+    (indexerFlags: number) => {
+      dispatch(
+        updateInteractiveImportItems({
+          ids: selectedIds,
+          indexerFlags,
+        })
+      );
+
+      dispatch(reprocessInteractiveImportItems({ ids: selectedIds }));
+
+      setSelectModalOpen(null);
+    },
+    [selectedIds, dispatch]
+  );
+
   const orderedSelectedIds = items.reduce((acc: number[], file) => {
     if (selectedIds.includes(file.id)) {
       acc.push(file.id);
@@ -947,6 +992,14 @@ function InteractiveImportModalContent(
         onModalClose={onSelectModalClose}
       />
 
+      <SelectIndexerFlagsModal
+        isOpen={selectModalOpen === 'indexerFlags'}
+        indexerFlags={0}
+        modalTitle={modalTitle}
+        onIndexerFlagsSelect={onIndexerFlagsSelect}
+        onModalClose={onSelectModalClose}
+      />
+
       <ConfirmModal
         isOpen={isConfirmDeleteModalOpen}
         kind={kinds.DANGER}

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.tsx

@@ -12,9 +12,11 @@ import Episode from 'Episode/Episode';
 import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeLanguages from 'Episode/EpisodeLanguages';
 import EpisodeQuality from 'Episode/EpisodeQuality';
+import IndexerFlags from 'Episode/IndexerFlags';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import SelectEpisodeModal from 'InteractiveImport/Episode/SelectEpisodeModal';
 import { SelectedEpisode } from 'InteractiveImport/Episode/SelectEpisodeModalContent';
+import SelectIndexerFlagsModal from 'InteractiveImport/IndexerFlags/SelectIndexerFlagsModal';
 import SelectLanguageModal from 'InteractiveImport/Language/SelectLanguageModal';
 import SelectQualityModal from 'InteractiveImport/Quality/SelectQualityModal';
 import SelectReleaseGroupModal from 'InteractiveImport/ReleaseGroup/SelectReleaseGroupModal';
@@ -41,7 +43,8 @@ type SelectType =
   | 'episode'
   | 'releaseGroup'
   | 'quality'
-  | 'language';
+  | 'language'
+  | 'indexerFlags';
 
 type SelectedChangeProps = SelectStateInputProps & {
   hasEpisodeFileId: boolean;
@@ -60,6 +63,7 @@ interface InteractiveImportRowProps {
   size: number;
   customFormats?: object[];
   customFormatScore?: number;
+  indexerFlags: number;
   rejections: Rejection[];
   columns: Column[];
   episodeFileId?: number;
@@ -84,6 +88,7 @@ function InteractiveImportRow(props: InteractiveImportRowProps) {
     size,
     customFormats,
     customFormatScore,
+    indexerFlags,
     rejections,
     isReprocessing,
     isSelected,
@@ -100,6 +105,10 @@ function InteractiveImportRow(props: InteractiveImportRowProps) {
     () => columns.find((c) => c.name === 'series')?.isVisible ?? false,
     [columns]
   );
+  const isIndexerFlagsColumnVisible = useMemo(
+    () => columns.find((c) => c.name === 'indexerFlags')?.isVisible ?? false,
+    [columns]
+  );
 
   const [selectModalOpen, setSelectModalOpen] = useState<SelectType | null>(
     null
@@ -306,6 +315,27 @@ function InteractiveImportRow(props: InteractiveImportRowProps) {
     [id, dispatch, setSelectModalOpen, selectRowAfterChange]
   );
 
+  const onSelectIndexerFlagsPress = useCallback(() => {
+    setSelectModalOpen('indexerFlags');
+  }, [setSelectModalOpen]);
+
+  const onIndexerFlagsSelect = useCallback(
+    (indexerFlags: number) => {
+      dispatch(
+        updateInteractiveImportItem({
+          id,
+          indexerFlags,
+        })
+      );
+
+      dispatch(reprocessInteractiveImportItems({ ids: [id] }));
+
+      setSelectModalOpen(null);
+      selectRowAfterChange();
+    },
+    [id, dispatch, setSelectModalOpen, selectRowAfterChange]
+  );
+
   const seriesTitle = series ? series.title : '';
   const isAnime = series?.seriesType === 'anime';
 
@@ -332,6 +362,7 @@ function InteractiveImportRow(props: InteractiveImportRowProps) {
   const showReleaseGroupPlaceholder = isSelected && !releaseGroup;
   const showQualityPlaceholder = isSelected && !quality;
   const showLanguagePlaceholder = isSelected && !languages;
+  const showIndexerFlagsPlaceholder = isSelected && !indexerFlags;
 
   return (
     <TableRow>
@@ -448,6 +479,28 @@ function InteractiveImportRow(props: InteractiveImportRowProps) {
         ) : null}
       </TableRowCell>
 
+      {isIndexerFlagsColumnVisible ? (
+        <TableRowCellButton
+          title={translate('ClickToChangeIndexerFlags')}
+          onPress={onSelectIndexerFlagsPress}
+        >
+          {showIndexerFlagsPlaceholder ? (
+            <InteractiveImportRowCellPlaceholder isOptional={true} />
+          ) : (
+            <>
+              {indexerFlags ? (
+                <Popover
+                  anchor={<Icon name={icons.FLAG} kind={kinds.PRIMARY} />}
+                  title={translate('IndexerFlags')}
+                  body={<IndexerFlags indexerFlags={indexerFlags} />}
+                  position={tooltipPositions.LEFT}
+                />
+              ) : null}
+            </>
+          )}
+        </TableRowCellButton>
+      ) : null}
+
       <TableRowCell>
         {rejections.length ? (
           <Popover
@@ -518,6 +571,14 @@ function InteractiveImportRow(props: InteractiveImportRowProps) {
         onLanguagesSelect={onLanguagesSelect}
         onModalClose={onSelectModalClose}
       />
+
+      <SelectIndexerFlagsModal
+        isOpen={selectModalOpen === 'indexerFlags'}
+        indexerFlags={indexerFlags ?? 0}
+        modalTitle={modalTitle}
+        onIndexerFlagsSelect={onIndexerFlagsSelect}
+        onModalClose={onSelectModalClose}
+      />
     </TableRow>
   );
 }