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

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

@ -241,7 +241,7 @@
}
.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 {