Skip to content

Commit

Permalink
Merge pull request #11 from Eyevinn/bug-fix-solve-filter-logic-errors
Browse files Browse the repository at this point in the history 
fix: bug fixes on filter
  • Loading branch information
@Saelmala
Saelmala authored Sep 6, 2024
2 parents b01577e + 665641c commit 37c5d8e
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 84 deletions.
56 changes: 41 additions & 15 deletions src/components/filter/FilterDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,15 @@ function FilterDropdown({
showNdiType,
showBmdType,
showSrtType,
showMediaSourceGeneratorType,
setIsTypeHidden,
setIsLocationHidden,
setSelectedTags,
setOnlyShowActiveSources: setOnlyShowConfigSources,
setOnlyShowNdiSources: setOnlyShowNdiSources,
setOnlyShowBmdSources: setOnlyShowBmdSources,
setOnlyShowSrtSources: setOnlyShowSrtSources,
setOnlyShowMediaSourceGeneratorSources,
handleSorting
}: {
close: () => void;
Expand All @@ -35,13 +37,17 @@ function FilterDropdown({
showNdiType: boolean;
showSrtType: boolean;
showBmdType: boolean;
showMediaSourceGeneratorType: boolean;
setIsTypeHidden: React.Dispatch<React.SetStateAction<boolean>>;
setIsLocationHidden: React.Dispatch<React.SetStateAction<boolean>>;
setOnlyShowActiveSources: React.Dispatch<React.SetStateAction<boolean>>;
setSelectedTags: React.Dispatch<React.SetStateAction<Set<string>>>;
setOnlyShowNdiSources: React.Dispatch<React.SetStateAction<boolean>>;
setOnlyShowBmdSources: React.Dispatch<React.SetStateAction<boolean>>;
setOnlyShowSrtSources: React.Dispatch<React.SetStateAction<boolean>>;
setOnlyShowMediaSourceGeneratorSources: React.Dispatch<
React.SetStateAction<boolean>
>;
handleSorting: (reversedOrder: boolean) => void;
}) {
const t = useTranslate();
Expand Down Expand Up @@ -75,22 +81,26 @@ function FilterDropdown({
setIsTypeHidden(true);
};

const showSelectedConfigSources = () => {
const toggleConfigSources = () => {
setOnlyShowConfigSources(!showConfigSources);
};

const showSelectedNdiType = () => {
const toggleNdiType = () => {
setOnlyShowNdiSources(!showNdiType);
};

const showSelectedSrtType = () => {
const toggleSrtType = () => {
setOnlyShowSrtSources(!showSrtType);
};

const showSelectedBmdType = () => {
const toggleBmdType = () => {
setOnlyShowBmdSources(!showBmdType);
};

const toggleMediaSourceGeneratorType = () => {
setOnlyShowMediaSourceGeneratorSources(!showMediaSourceGeneratorType);
};

const deleteTag = (value: string) => {
const temp = selectedTags;
temp.delete(value);
Expand Down Expand Up @@ -148,10 +158,11 @@ function FilterDropdown({

const handleClear = () => {
setSelectedTags(new Set<string>());
setOnlyShowConfigSources(false);
setOnlyShowBmdSources(false);
setOnlyShowNdiSources(false);
setOnlyShowSrtSources(false);
setOnlyShowConfigSources(true);
setOnlyShowBmdSources(true);
setOnlyShowNdiSources(true);
setOnlyShowSrtSources(true);
setOnlyShowMediaSourceGeneratorSources(false);
};

const typesSearch = (event: ChangeEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -259,7 +270,7 @@ function FilterDropdown({
})}
</div>
<div
className="absolute border w-full z-20 rounded-lg shadow divide-y bg-zinc-700 divide-gray-600"
className="absolute border w-full z-50 rounded-lg shadow divide-y bg-zinc-700 divide-gray-600"
hidden={isLocationHidden}
>
<ul className="px-3 pb-3 text-sm text-p">
Expand Down Expand Up @@ -305,7 +316,7 @@ function FilterDropdown({
type="checkbox"
className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
checked={showConfigSources}
onChange={showSelectedConfigSources}
onChange={toggleConfigSources}
/>
<label
className="ml-2 mt-1 text-left text-zinc-300"
Expand All @@ -320,7 +331,7 @@ function FilterDropdown({
type="checkbox"
className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
checked={showNdiType}
onChange={showSelectedNdiType}
onChange={toggleNdiType}
/>
<label
className="ml-2 mt-1 text-left text-zinc-300"
Expand All @@ -335,7 +346,7 @@ function FilterDropdown({
type="checkbox"
className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
checked={showSrtType}
onChange={showSelectedSrtType}
onChange={toggleSrtType}
/>
<label
className="ml-2 mt-1 text-left text-zinc-300"
Expand All @@ -350,7 +361,7 @@ function FilterDropdown({
type="checkbox"
className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
checked={showBmdType}
onChange={showSelectedBmdType}
onChange={toggleBmdType}
/>
<label
className="ml-2 mt-1 text-left text-zinc-300"
Expand All @@ -359,19 +370,34 @@ function FilterDropdown({
SDI/HDMI
</label>
</div>
<div className="flex flex-row">
<input
id="showMediaSourceCheckbox"
type="checkbox"
className="flex ml-2 w-4 justify-center rounded-lg text-zinc-300"
checked={showMediaSourceGeneratorType}
onChange={toggleMediaSourceGeneratorType}
/>
<label
className="ml-2 mt-1 text-left text-zinc-300"
htmlFor="showMediaSourceCheckbox"
>
Test pattern
</label>
</div>
</div>
<div className="flex self-end justify-end mt-4">
<button
onClick={handleClear}
id="dropdownCheckboxButton"
className="flex ml-2 mb-2 min-w-[30%] justify-center font-medium rounded-lg py-2.5 text-zinc-300 bg-zinc-800 hover:ring-2 focus:outline-none bg-zink-800 hover:bg-zinc-700 opacity-70"
className="flex ml-2 mb-2 min-w-[30%] justify-center font-medium rounded-lg py-2.5 text-zinc-300 hover:ring-2 focus:outline-none bg-zinc-800 hover:bg-zinc-700 opacity-70"
type="button"
>
{t('clear')}
</button>
<button
onClick={() => close()}
className="flex ml-2 mb-2 min-w-[30%] justify-center font-medium rounded-lg py-2.5 text-zinc-300 bg-zinc-800 hover:ring-2 focus:outline-none bg-zink-800 hover:bg-zinc-700"
className="flex ml-2 mb-2 min-w-[30%] justify-center font-medium rounded-lg py-2.5 text-zinc-300 hover:ring-2 focus:outline-none bg-zinc-800 hover:bg-zinc-700"
type="button"
>
{t('apply')}
Expand Down
129 changes: 61 additions & 68 deletions src/components/filter/FilterOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,56 +14,47 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
const { locations, types, sources } = useContext(FilterContext);

const [onlyShowActiveSources, setOnlyShowActiveSources] = useState(false);
const [onlyShowNdiSources, setOnlyShowNdiSources] = useState(false);
const [onlyShowBmdSources, setOnlyShowBmdSources] = useState(false);
const [onlyShowSrtSources, setOnlyShowSrtSources] = useState(false);
const [showNdiType, setShowNdiType] = useState(true);
const [showBmdType, setShowBmdType] = useState(true);
const [showSrtType, setShowSrtType] = useState(true);
const [showMediaSourceGeneratorType, setShowMediaGeneratorSourceType] =
useState(false);
const [isFilterHidden, setIsFilterHidden] = useState(true);
const [isTypeHidden, setIsTypeHidden] = useState(true);
const [isLocationHidden, setIsLocationHidden] = useState(true);
const [searchString, setSearchString] = useState<string>('');
const [selectedTags, setSelectedTags] = useState<Set<string>>(
new Set<string>()
);
let tempSet = new Map<string, SourceWithId>(sources);
const [filteredSources, setFilteredSources] = useState<
Map<string, SourceWithId>
>(new Map<string, SourceWithId>());

useEffect(() => {
if (
selectedTags.size === 0 &&
searchString.length === 0 &&
!onlyShowActiveSources &&
!onlyShowNdiSources &&
!onlyShowBmdSources &&
!onlyShowSrtSources
) {
resetFilter();
return;
const tempSet = new Map<string, SourceWithId>(sources);

if (searchString.length > 0 || selectedTags.size > 0) {
handleSearch(tempSet);
handleTags(tempSet);
}

handleSearch();
handleTags();
filterSources();
filterSources(tempSet);

setFilteredSources(tempSet);
onFilteredSources(tempSet);
tempSet.clear();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
searchString,
selectedTags,
onlyShowActiveSources,
onlyShowNdiSources,
onlyShowBmdSources,
onlyShowSrtSources
showNdiType,
showBmdType,
showSrtType,
showMediaSourceGeneratorType,
sources
]);

const resetFilter = () => {
tempSet = new Map<string, SourceWithId>(sources);
onFilteredSources(sources);
};

const handleSearch = () => {
if (searchString.length === 0) {
tempSet = new Map<string, SourceWithId>(sources);
} else {
const handleSearch = (tempSet: Map<string, SourceWithId>) => {
if (searchString.length > 0) {
for (const source of tempSet.values()) {
const searchValues = [
source.name,
Expand All @@ -82,8 +73,8 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
}
};

const handleTags = () => {
if (selectedTags.size !== 0) {
const handleTags = (tempSet: Map<string, SourceWithId>) => {
if (selectedTags.size > 0) {
const typeTags = new Set<string>();
const locationTags = new Set<string>();
selectedTags.forEach((tag) => {
Expand All @@ -103,30 +94,26 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
}
};

const filterSources = async () => {
for (const source of tempSet.values()) {
let shouldDelete = false;
const filterSources = (tempSet: Map<string, SourceWithId>) => {
const isFilteringByType =
showNdiType || showBmdType || showSrtType || showMediaSourceGeneratorType;

const isFilteringByType =
onlyShowNdiSources || onlyShowBmdSources || onlyShowSrtSources;

if (isFilteringByType && !source.ingest_type) {
shouldDelete = true;
} else if (source.ingest_type) {
const ingestType = source.ingest_type.toUpperCase();

const isNdiSelected = onlyShowNdiSources && ingestType === 'NDI';
const isBmdSelected = onlyShowBmdSources && ingestType === 'BMD';
const isSrtSelected = onlyShowSrtSources && ingestType === 'SRT';
if (!isFilteringByType) {
tempSet.clear();
return;
}

if (
isFilteringByType &&
!isNdiSelected &&
!isBmdSelected &&
!isSrtSelected
) {
shouldDelete = true;
}
for (const source of tempSet.values()) {
const ingestType = source.ingest_type?.toUpperCase() || '';
let shouldDelete = true;

if (
(showNdiType && ingestType === 'NDI') ||
(showBmdType && ingestType === 'BMD') ||
(showSrtType && ingestType === 'SRT') ||
(showMediaSourceGeneratorType && ingestType === 'MEDIASOURCEGENERATOR')
) {
shouldDelete = false;
}

if (onlyShowActiveSources && source.status === 'gone') {
Expand All @@ -140,15 +127,17 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
};

const handleSorting = (reversedOrder: boolean) => {
const sortedSourcesArray = Array.from(tempSet.values()).sort((a, b) => {
const dateA = new Date(a.lastConnected).getTime();
const dateB = new Date(b.lastConnected).getTime();
return reversedOrder ? dateA - dateB : dateB - dateA;
});
tempSet = new Map(
const sortedSourcesArray = Array.from(filteredSources.values()).sort(
(a, b) => {
const dateA = new Date(a.lastConnected).getTime();
const dateB = new Date(b.lastConnected).getTime();
return reversedOrder ? dateA - dateB : dateB - dateA;
}
);
const sortedMap = new Map(
sortedSourcesArray.map((source) => [source._id.toString(), source])
);
onFilteredSources(tempSet);
onFilteredSources(sortedMap);
};

return (
Expand Down Expand Up @@ -178,12 +167,16 @@ function FilterOptions({ onFilteredSources }: FilterOptionsProps) {
setIsLocationHidden={setIsLocationHidden}
setSelectedTags={setSelectedTags}
setOnlyShowActiveSources={setOnlyShowActiveSources}
setOnlyShowNdiSources={setOnlyShowNdiSources}
setOnlyShowBmdSources={setOnlyShowBmdSources}
setOnlyShowSrtSources={setOnlyShowSrtSources}
showBmdType={onlyShowBmdSources}
showNdiType={onlyShowNdiSources}
showSrtType={onlyShowSrtSources}
setOnlyShowNdiSources={setShowNdiType}
setOnlyShowBmdSources={setShowBmdType}
setOnlyShowSrtSources={setShowSrtType}
setOnlyShowMediaSourceGeneratorSources={
setShowMediaGeneratorSourceType
}
showBmdType={showBmdType}
showNdiType={showNdiType}
showSrtType={showSrtType}
showMediaSourceGeneratorType={showMediaSourceGeneratorType}
handleSorting={handleSorting}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/inventory/Inventory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function Inventory() {
filteredSources: Map<string, SourceWithId>
): React.ReactNode {
return Array.from(
filteredSources.size > 0 ? filteredSources.values() : sources.values()
filteredSources.size >= 0 ? filteredSources.values() : sources.values()
).map((source, index) => {
if (source.status !== 'purge') {
return (
Expand Down

0 comments on commit 37c5d8e

Please sign in to comment.