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

fix(ui): cards list loader

Browse source
This commit is contained in:
Shekar Siri 2023-11-02 12:20:41 +01:00
parent 6c8a589960
commit bcd240b242
1 changed files with 50 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
View file

@ -1,6 +1,6 @@
import { observer, useObserver } from 'mobx-react-lite';
import React, { useEffect, useMemo, useState } from 'react';
import { NoContent, Pagination, Icon } from 'UI';
import { NoContent, Pagination, Icon, Loader } from 'UI';
import { useStore } from 'App/mstore';
import { sliceListPerPage } from 'App/utils';
import GridView from './GridView';
@ -22,6 +22,7 @@ function MetricsList({
const dashboard = dashboardStore.selectedDashboard;
const existingCardIds = useMemo(() => dashboard?.widgets?.map(i => parseInt(i.metricId)), [dashboard]);
const cards = useMemo(() => !!onSelectionChange ? metricStore.filteredCards.filter(i => !existingCardIds?.includes(parseInt(i.metricId))) : metricStore.filteredCards, [metricStore.filteredCards]);
const loading = metricStore.isLoading;
useEffect(() => {
metricStore.fetchList();
@ -49,55 +50,57 @@ function MetricsList({
}, []);
return (
<NoContent
show={lenth === 0}
title={
<div className="flex flex-col items-center justify-center">
<AnimatedSVG name={ICONS.NO_CARDS} size={180} />
<div className="text-center mt-4">
{metricsSearch !== '' ? 'No matching results' : "You haven't created any cards yet"}
<Loader loading={loading}>
<NoContent
show={lenth === 0}
title={
<div className="flex flex-col items-center justify-center">
<AnimatedSVG name={ICONS.NO_CARDS} size={180} />
<div className="text-center mt-4">
{metricsSearch !== '' ? 'No matching results' : "You haven't created any cards yet"}
</div>
</div>
</div>
}
subtext="Utilize cards to visualize key user interactions or product performance metrics."
>
{listView ? (
<ListView
disableSelection={!onSelectionChange}
siteId={siteId}
list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
selectedList={selectedMetrics}
existingCardIds={existingCardIds}
toggleSelection={toggleMetricSelection}
allSelected={cards.length === selectedMetrics.length}
toggleAll={({ target: { checked, name } }) =>
setSelectedMetrics(checked ? cards.map((i: any) => i.metricId).slice(0, 30 - existingCardIds!.length) : [])
}
/>
) : (
<GridView
siteId={siteId}
list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
selectedList={selectedMetrics}
toggleSelection={toggleMetricSelection}
/>
)}
}
subtext="Utilize cards to visualize key user interactions or product performance metrics."
>
{listView ? (
<ListView
disableSelection={!onSelectionChange}
siteId={siteId}
list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
selectedList={selectedMetrics}
existingCardIds={existingCardIds}
toggleSelection={toggleMetricSelection}
allSelected={cards.length === selectedMetrics.length}
toggleAll={({ target: { checked, name } }) =>
setSelectedMetrics(checked ? cards.map((i: any) => i.metricId).slice(0, 30 - existingCardIds!.length) : [])
}
/>
) : (
<GridView
siteId={siteId}
list={sliceListPerPage(cards, metricStore.page - 1, metricStore.pageSize)}
selectedList={selectedMetrics}
toggleSelection={toggleMetricSelection}
/>
)}
<div className="w-full flex items-center justify-between py-4 px-6 border-t">
<div className="text-disabled-text">
Showing{' '}
<span className="font-semibold">{Math.min(cards.length, metricStore.pageSize)}</span> out
of <span className="font-semibold">{cards.length}</span> cards
<div className="w-full flex items-center justify-between py-4 px-6 border-t">
<div className="text-disabled-text">
Showing{' '}
<span className="font-semibold">{Math.min(cards.length, metricStore.pageSize)}</span> out
of <span className="font-semibold">{cards.length}</span> cards
</div>
<Pagination
page={metricStore.page}
totalPages={Math.ceil(lenth / metricStore.pageSize)}
onPageChange={(page) => metricStore.updateKey('page', page)}
limit={metricStore.pageSize}
debounceRequest={100}
/>
</div>
<Pagination
page={metricStore.page}
totalPages={Math.ceil(lenth / metricStore.pageSize)}
onPageChange={(page) => metricStore.updateKey('page', page)}
limit={metricStore.pageSize}
debounceRequest={100}
/>
</div>
</NoContent>
</NoContent>
</Loader>
);
}