diff --git a/public/components/BatchTag.react.js b/public/components/BatchTag.react.js index 3ab4dcd7..457a0801 100644 --- a/public/components/BatchTag.react.js +++ b/public/components/BatchTag.react.js @@ -3,6 +3,7 @@ import ContentList from './ContentList/ContentList'; import PageNavigator from './utils/PageNavigator.react'; import BatchTagControls from './BatchTagControls/BatchTagControls'; import BatchFilters from './BatchTag/BatchFilters.react'; +import {BatchTagArbitraryUrls} from "./BatchTagControls/BatchTagArbitraryUrls"; import R from 'ramda'; const CAPI_PAGE_SIZE = 10; @@ -35,7 +36,7 @@ export class BatchTag extends React.Component { window.onbeforeunload = function() { return 'Unsaved batch tag changes, are you sure you want to leave?'; }; - } + } if (prevCount > 0 && newCount === 0) { window.onbeforeunload = null; @@ -196,6 +197,7 @@ export class BatchTag extends React.Component { Search by byline + {" OR "} this.setState({selectedContent: R.union(this.state.selectedContent, paths)})}/> { this.state.showFilters ? 'Hide Filters' : 'Show Filters'} diff --git a/public/components/BatchTagControls/BatchTagArbitraryUrls.js b/public/components/BatchTagControls/BatchTagArbitraryUrls.js new file mode 100644 index 00000000..d019d420 --- /dev/null +++ b/public/components/BatchTagControls/BatchTagArbitraryUrls.js @@ -0,0 +1,68 @@ +import React, {useState} from "react"; + +export const BatchTagArbitraryUrls = ({addPathsToSelection}) => { + + const [isModalDisplayed, setIsModalDisplayed] = useState(false); + + const [input, setInput] = useState("") // string + const [cleaned, setCleaned] = useState(); // string[] + + const close = () => { + setInput(""); + setCleaned(null); + setIsModalDisplayed(false); + } + const clean = () => setCleaned([...new Set( + input.split("\n").map(url => { + if(url.startsWith("http")){ + return url.trim().split("/").slice(3).join("/"); + } + return url.trim(); // already just the path + }).filter(_ => !!_) // remove empty + )]); + + const complete = () => { + addPathsToSelection(cleaned); + close(); + } + + return ( + + {isModalDisplayed && ( + + + {cleaned + ? "Please check the paths extracted from the web URLs you entered" + : "Enter web URLs (one per line)" + } + setInput(target.value)} + disabled={!!cleaned} + /> + + Cancel + {cleaned ? ( + + setCleaned(null)}> + Back + + {" "} + + Add {cleaned.length} unique rows + + + ) : ( + + Next + + )} + + + + )} + setIsModalDisplayed(true)}>Add arbitrary URLs + + ); +} diff --git a/public/style/components/batch-tag/_index.scss b/public/style/components/batch-tag/_index.scss index c26b29b8..34834105 100644 --- a/public/style/components/batch-tag/_index.scss +++ b/public/style/components/batch-tag/_index.scss @@ -88,3 +88,50 @@ .batch-tag__filter--clear { @extend %button--red; } + +.batch-tag__arbitrary_modal_background { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.4); + z-index: 5; + padding: 100px; +} +.batch-tag__arbitrary_modal_content { + display: flex; + flex-direction: column; + gap: 5px; + padding: 10px; + background: white; + border-radius: 5px; + width: 100%; + height: 100%; +} +.batch-tag__arbitrary_modal_input { + height: 100%; + width: 100%; +} +.batch-tag__arbitrary_modal_button_bar { + display: flex; + align-items: center; + justify-content: space-between; +} +.batch-tag__arbitrary_button { + @extend %button; + color: $c-grey-700; + margin: 0; +} +.batch-tag__arbitrary_button--green { + @extend %button--green; + margin: 0; +} +.batch-tag__arbitrary_button--green:disabled { + color:$c-grey-200; + border-color: $c-grey-200; +} +.batch-tag__arbitrary_button--red { + @extend %button--red; + margin: 0; +}