jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fixed display of paginator and results

Browse source
This commit is contained in:
Lucas Oliveira 2023-11-08 15:52:56 -03:00
commit c8dc529ac3
2 changed files with 162 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/frontend/src/pages/StorePage/index.tsx
View file

@ -1,4 +1,3 @@
import { Search } from "lucide-react";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import PaginatorComponent from "../../components/PaginatorComponent"; import PaginatorComponent from "../../components/PaginatorComponent";
import ShadTooltip from "../../components/ShadTooltipComponent"; import ShadTooltip from "../../components/ShadTooltipComponent";
@ -138,6 +137,7 @@ export default function StorePage(): JSX.Element {
<Header /> <Header />
<div className="community-page-arrangement"> <div className="community-page-arrangement">
<div>
<div className="community-page-nav-arrangement"> <div className="community-page-nav-arrangement">
<span className="community-page-nav-title"> <span className="community-page-nav-title">
<IconComponent name="Store" className="w-6" /> <IconComponent name="Store" className="w-6" />
@ -151,7 +151,9 @@ export default function StorePage(): JSX.Element {
> >
<Button <Button
className={`${ className={`${
errorApiKey && !hasApiKey ? "animate-pulse border-error" : "" errorApiKey && !hasApiKey
? "animate-pulse border-error"
: ""
}`} }`}
variant="primary" variant="primary"
> >
@ -180,11 +182,15 @@ export default function StorePage(): JSX.Element {
}} }}
value={inputText} value={inputText}
/> />
<Search <IconComponent
name={loading ? "Loader2" : "Search"}
onClick={() => { onClick={() => {
setSearchText(inputText); setSearchText(inputText);
}} }}
className="absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground" className={
"absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground" +
(loading ? " animate-spin" : "")
}
/> />
</div> </div>
<div className="ml-4 flex w-full gap-2 border-b border-border"> <div className="ml-4 flex w-full gap-2 border-b border-border">
@ -232,7 +238,7 @@ export default function StorePage(): JSX.Element {
</div> </div>
</div> </div>
<div className="flex items-center gap-2 px-2"> <div className="flex h-6 items-center gap-2 px-2">
{!loadingTags && {!loadingTags &&
tags.map((tag, idx) => ( tags.map((tag, idx) => (
<Badge <Badge
@ -243,7 +249,9 @@ export default function StorePage(): JSX.Element {
size="sq" size="sq"
className={cn( className={cn(
"cursor-pointer", "cursor-pointer",
filteredCategories.some((category) => category === tag.name) filteredCategories.some(
(category) => category === tag.name
)
? "bg-beta-foreground text-background hover:bg-beta-foreground" ? "bg-beta-foreground text-background hover:bg-beta-foreground"
: "" : ""
)} )}
@ -254,9 +262,10 @@ export default function StorePage(): JSX.Element {
</div> </div>
<div className="flex items-end justify-between"> <div className="flex items-end justify-between">
<span className="px-0.5 text-sm text-muted-foreground"> <span className="px-0.5 text-sm text-muted-foreground">
{!loading && ( {(!loading || searchData.length !== 0) && (
<> <>
{totalRowsCount} {totalRowsCount !== 1 ? "results" : "result"} {totalRowsCount}{" "}
{totalRowsCount !== 1 ? "results" : "result"}
</> </>
)} )}
</span> </span>
@ -278,13 +287,7 @@ export default function StorePage(): JSX.Element {
</div> </div>
<div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3"> <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
{loading ? ( {!loading || searchData.length !== 0 ? (
<>
<SkeletonCardComponent />
<SkeletonCardComponent />
<SkeletonCardComponent />
</>
) : (
searchData.map((item, idx) => { searchData.map((item, idx) => {
return ( return (
<> <>
@ -292,12 +295,18 @@ export default function StorePage(): JSX.Element {
</> </>
); );
}) })
) : (
<>
<SkeletonCardComponent />
<SkeletonCardComponent />
<SkeletonCardComponent />
</>
)} )}
</div> </div>
</div> </div>
</div>
{!loading && ( {(!loading || searchData.length !== 0) && (
<div className="relative my-3"> <div className="relative my-6">
<PaginatorComponent <PaginatorComponent
storeComponent={true} storeComponent={true}
pageIndex={pageIndex} pageIndex={pageIndex}

2
src/frontend/src/style/applies.css
View file

@ -241,7 +241,7 @@
} }
.community-page-arrangement { .community-page-arrangement {
@apply flex-max-width h-full flex-col overflow-auto bg-background px-16 pb-4; @apply flex-max-width justify-between h-full flex-col overflow-auto bg-background px-16;
} }
.community-page-nav-arrangement { .community-page-nav-arrangement {