Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: bug fixes on filter #11

Merged
merged 2 commits into from
Sep 6, 2024
Merged

fix: bug fixes on filter #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e09020e
fix: bug fixes on filter
Saelmala Sep 6, 2024
665641c
fix: test fail
Saelmala Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 41 additions & 15 deletions src/components/filter/FilterDropdown.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading