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

Feat/page search result document card integration #61

Merged
2 commits merged into from
Nov 9, 2023
Merged

Feat/page search result document card integration #61

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
33f1b36
feat(redmine 1245005): add DocumentCard component
Nov 8, 2023
81666cc
feat(redmine 1245005): fix display 12 col if filters is desable
Nov 9, 2023
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
1 change: 1 addition & 0 deletions packages/react-front-kit/src/Components/DocumentCard/DocumentCard.style.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const useStyles = createStyles((theme) => ({
border: `1px solid ${theme.colors.gray[2]}`,
borderRadius: '16px',
marginRight: '32px',
minHeight: '164px',
},
imageRoot: {
'@media (max-width: 414px)': {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-front-kit/src/Components/DocumentCard/DocumentCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import defaultImage from '../../../assets/defaultImage.jpg';
import { useStyles } from './DocumentCard.style';

export interface IDocumentCardProps {
author: ReactNode;
author?: ReactNode;
children?: ReactNode;
date?: ReactNode;
iconType?: string;
Expand Down
2 changes: 1 addition & 1 deletion ...ages/react-front-kit/src/Components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`DocumentCard matches snapshot 1`] = `
class="mantine-1iugybl mantine-Image-imageWrapper"
>
<img
class="mantine-Image-image mantine-dc8ibh"
class="mantine-Image-image mantine-1thijn1"
src=""
style="object-fit: cover; width: 100%; height: auto;"
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-front-kit/src/Layouts/FoldableColumnLayout/FoldableColumnLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export function FoldableColumnLayout(
>
{sidebarContent}
</Grid.Col>
<Grid.Col span={9}>{children}</Grid.Col>
<Grid.Col span={!isColumnVisibleState ? 12 : 9}>{children}</Grid.Col>
</Grid>
</Container>
</>
Expand Down
96 changes: 78 additions & 18 deletions packages/react-front-kit/src/Pages/SearchResults/SearchResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,28 @@
'use client';

import type { FormEvent, ReactElement } from 'react';
import type { ReactElement } from 'react';

import {
AppShell,
Box,
Button,
Divider,
Flex,
Paper,
Select,
Space,
Stack,
createStyles,
rem,
} from '@mantine/core';
import { CaretDown } from '@phosphor-icons/react';
import { CaretDown, DownloadSimple } from '@phosphor-icons/react';
import {
isNotNullNorEmpty,
secondaryTheme,
} from '@smile/react-front-kit-shared';
import { useState } from 'react';

import { DocumentCard } from '../../Components/DocumentCard/DocumentCard';
import { Header } from '../../Components/Header/Header';
import Motif from '../../Components/InfoCard/Motif';
import { Pagination } from '../../Components/Pagination/Pagination';
Expand Down Expand Up @@ -54,7 +59,6 @@ export function SearchResults(): ReactElement {
const numberOfResults = 135;
// Search
const [search, setSearch] = useState<string>('567890456');
const [submittedSearch, setSubmittedSearch] = useState<string>(search);
// Pagination
const [page, setPage] = useState<number>(1);
const [rowsPerPage, setRowsPerPage] = useState<number>(10);
Expand Down Expand Up @@ -119,15 +123,6 @@ export function SearchResults(): ReactElement {
const totalPages = Math.ceil(typeFilteredResults / rowsPerPage);
const { classes } = useStyles();

function handleSearchSubmit(event: FormEvent): void {
event.preventDefault();
setSubmittedSearch(search);
}

function handleSearchClear(): void {
setSubmittedSearch('');
}

return (
<AppShell
header={
Expand Down Expand Up @@ -200,18 +195,83 @@ export function SearchResults(): ReactElement {
/>
}
onChange={setSearch}
onSearchClear={handleSearchClear}
onSearchSubmit={handleSearchSubmit}
value={search}
/>
</Box>
}
topBlockTheme={{ ...secondaryTheme, colorScheme: 'dark' }}
>
<Paper mb={24} p={24} style={{ borderRadius: 16, height: 748 }}>
[{rowsPerPage}/{typeFilteredResults} results of search &quot;
{submittedSearch}
&quot;, page {page}/{totalPages}, sorted by {activeSorting}]
<Paper mb={24} p={24} style={{ borderRadius: 16, padding: '8px 56px' }}>
<Stack>
<Space h="40px" />
<DocumentCard
author="Aline Dupon"
date="Published on December 24, 2023"
iconType="PDF"
path="(Customer > 567890456 > Invoices)"
title="Random_File.PDF"
>
<>
<p>
Ceci est une description faite pour cette facture et ajoutée
par le créateur lors de l’import du document dans la GED, en
l’absence de description cet espace est laissé vide...
</p>
<Button color="gray.8">
<DownloadSimple width={12} />
<Space w={8} />
PDF, FR - 1Mo
</Button>
</>
</DocumentCard>
<Space h="28px" />
<Divider color="gray.2" my="sm" />
<Space h="28px" />
<DocumentCard
author="Julien Dominique"
date="Published on December 24, 2023"
iconType="ppt"
path="(Customer > 567890456 > Invoices)"
title="Presentation.PPT"
>
<>
<p>
Ceci est une description faite pour cette facture et ajoutée
par le créateur lors de l’import du document dans la GED, en
l’absence de description cet espace est laissé vide...
</p>
<Button color="gray.8">
<DownloadSimple width={12} />
<Space w={8} />
PTT, FR - 1Mo
</Button>
</>
</DocumentCard>
<Space h="28px" />
<Divider color="gray.2" my="sm" />
<Space h="28px" />
<DocumentCard
author="Mohamed Aldri"
date="Published on December 24, 2023"
iconType="PDF"
path="(Customer > 567890456 > Invoices)"
title="Other_random_File.PDF"
>
<>
<p>
Ceci est une description faite pour cette facture et ajoutée
par le créateur lors de l’import du document dans la GED, en
l’absence de description cet espace est laissé vide...
</p>
<Button color="gray.8">
<DownloadSimple width={12} />
<Space w={8} />
PDF, FR - 1Mo
</Button>
</>
</DocumentCard>
<Space h="40px" />
</Stack>
</Paper>
<Pagination
isTransparent
Expand Down