jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more search field fixes

Browse source
This commit is contained in:
sylenien 2022-05-12 16:34:11 +02:00 • committed by Delirium
parent 64ebd07e57
commit 0d00cf0349
3 changed files with 57 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
View file

@ -15,7 +15,7 @@ interface Props {
searchQuery?: string,
}
function FilterModal(props: Props) {
const {
const {
filters,
metaOptions,
onFilterClick = () => null,
@ -32,13 +32,20 @@ function FilterModal(props: Props) {
_filter.value = [filter.value];
onFilterClick(_filter);
}
const isResultEmpty = !filterSearchList || Object.keys(filterSearchList).length === 0
return (
<div className={stl.wrapper} style={{ width: '480px', maxHeight: '380px', overflowY: 'auto'}}>
{ showSearchList && (
<Loader size="small" loading={fetchingFilterSearchList}>
<div className="-mx-6 px-6">
{ filterSearchList && Object.keys(filterSearchList).map((key, index) => {
{isResultEmpty && !fetchingFilterSearchList ? (
<div className="flex items-center">
<Icon className="color-gray-medium" name="binoculars" size="24" />
<div className="color-gray-medium font-medium px-3"> No Suggestions Found </div>
</div>
) : Object.keys(filterSearchList).map((key, index) => {
const filter = filterSearchList[key];
const option = filtersMap[key];
return option ? (
@ -65,7 +72,7 @@ function FilterModal(props: Props) {
</div>
</Loader>
)}
{ !hasSearchQuery && (
<div className="" style={{ columns: "auto 200px" }}>
{filters && Object.keys(filters).map((key) => (
@ -92,4 +99,4 @@ export default connect(state => ({
filterSearchList: state.getIn([ 'search', 'filterSearchList' ]),
metaOptions: state.getIn([ 'customFields', 'list' ]),
fetchingFilterSearchList: state.getIn([ 'search', 'fetchFilterSearch', 'loading' ]),
}))(FilterModal);
}))(FilterModal);

39
frontend/app/components/shared/Filters/LiveFilterModal/LiveFilterModal.tsx
View file

@ -15,7 +15,7 @@ interface Props {
searchQuery?: string,
}
function LiveFilterModal(props: Props) {
const {
const {
filters,
metaOptions,
onFilterClick = () => null,
@ -32,7 +32,9 @@ function LiveFilterModal(props: Props) {
_filter.value = [filter.value];
onFilterClick(_filter);
}
const isResultEmpty = !filterSearchList || Object.keys(filterSearchList).filter(i => filtersMap[i].isLive).length === 0
return (
<div className={stl.wrapper} style={{ width: '490px', maxHeight: '400px', overflowY: 'auto'}}>
{ showSearchList && (
@ -62,10 +64,39 @@ function LiveFilterModal(props: Props) {
</div>
);
})}
{isResultEmpty && !fetchingFilterSearchList ? (
<div className="flex items-center">
<Icon className="color-gray-medium" name="binoculars" size="24" />
<div className="color-gray-medium font-medium px-3"> No Suggestions Found </div>
</div>
) : Object.keys(filterSearchList).filter(i => filtersMap[i].isLive).map((key, index) => {
const filter = filterSearchList[key];
const option = filtersMap[key];
return (
<div
key={index}
className={cn('mb-3')}
>
<div className="font-medium uppercase color-gray-medium text-sm mb-2">{option.label}</div>
<div>
{filter.map((f, i) => (
<div
key={i}
className={cn(stl.filterSearchItem, "cursor-pointer px-3 py-1 text-sm flex items-center")}
onClick={() => onFilterSearchClick({ type: key, value: f.value })}
>
<Icon className="mr-2" name={option.icon} size="16" />
<div className="whitespace-nowrap text-ellipsis overflow-hidden">{f.value}</div>
</div>
))}
</div>
</div>
);
})}
</div>
</Loader>
)}
{ !hasSearchQuery && (
<div className="">
{filters && Object.keys(filters).map((key) => (
@ -92,4 +123,4 @@ export default connect(state => ({
filterSearchList: state.getIn([ 'search', 'filterSearchList' ]),
metaOptions: state.getIn([ 'customFields', 'list' ]),
fetchingFilterSearchList: state.getIn([ 'search', 'fetchFilterSearch', 'loading' ]),
}))(LiveFilterModal);
}))(LiveFilterModal);

13
frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
View file

@ -6,8 +6,15 @@ import { useObserver } from 'mobx-react-lite';
const str = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)
const d = str && str[1] || 'UTC';
const localMachineFormat = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)
const middlePoint = localMachineFormat && localMachineFormat[1].length - 2
const readableLocalTimezone = localMachineFormat && middlePoint ?
`${localMachineFormat[1].substring(0, 3)} ${localMachineFormat[1].substring(3, middlePoint)}:${localMachineFormat[1].substring(middlePoint)}`
: null
const timezoneOptions = [
{ label: d, value: 'local' },
{ label: readableLocalTimezone, value: 'local' },
{ label: 'UTC', value: 'UTC' },
]
@ -38,9 +45,9 @@ function DefaultTimezone(props) {
}}>Update</Button>
</div>
</div>
<div className="text-sm mt-3">This change will impact the timestamp on session card and player.</div>
<div className="text-sm mt-3">This change will impact the timestamp on session card and player.</div>
</>
);
}
export default DefaultTimezone;
export default DefaultTimezone;