refactor(doc-item): IDocItem-Typ durch Doc-Modell aus API ersetzen

src/client/dd-hub-react/src/api/document-service.ts

@@ -15,14 +15,14 @@ export type DocQuery = {
     name?: string | undefined
 }
 
-export function getDocuments({ id, name }: DocQuery): Promise<Doc[]> {
+export function getDocuments(query: DocQuery | undefined = undefined): Promise<Doc[]> {
     let documents = _documents;
 
-    if (id)
-        documents = documents.filter(d => d.id = id)
+    if (query?.id)
+        documents = documents.filter(d => d.id === query.id);
 
-    if (name)
-        documents = documents.filter(d => d.name = name)
+    if (query?.name)
+        documents = documents.filter(d => d.name === query.name);
 
     return Promise.resolve(documents);
 }

src/client/dd-hub-react/src/pages/doc-search.tsx

@@ -1,16 +1,27 @@
+import { useEffect, useState } from 'react';
+
 import { _posts } from 'src/_mock';
 import { CONFIG } from 'src/config-global';
+import { Doc, getDocuments } from 'src/api/document-service';
 
 import { DocSearchView } from 'src/sections/document/view';
 
 // ----------------------------------------------------------------------
 
 export default function Page() {
+  const [docs, setDocs] = useState<Doc[]>([]);
+
+  useEffect(() => {
+    getDocuments({}).then((res) => {
+      setDocs(res);
+    });
+  }, []);
+
   return (
     <>
       <title>{`Document Search - ${CONFIG.appName}`}</title>
 
-      <DocSearchView posts={_posts} />
+      <DocSearchView docs={docs} />
     </>
   );
 }

src/client/dd-hub-react/src/sections/document/doc-item.tsx

@@ -10,202 +10,187 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 
 import { fDate } from 'src/utils/format-time';
-import { fShortenNumber } from 'src/utils/format-number';
+
+import { Doc } from 'src/api/document-service';
 
 import { Iconify } from 'src/components/iconify';
 import { SvgColor } from 'src/components/svg-color';
 
 // ----------------------------------------------------------------------
 
-export type IDocItem = {
-  id: string;
-  title: string;
-  coverUrl: string;
-  totalViews: number;
-  description: string;
-  totalShares: number;
-  totalComments: number;
-  totalFavorites: number;
-  postedAt: string | number | null;
-  author: {
-    name: string;
-    avatarUrl: string;
-  };
-};
-
 export function DocItem({
-  sx,
-  doc,
-  long,
-  large,
-  ...other
+    sx,
+    doc,
+    long,
+    large,
+    ...other
 }: CardProps & {
-  doc: IDocItem;
-  long: boolean;
-  large: boolean;
+    doc: Doc;
+    long: boolean;
+    large: boolean;
 }) {
-  const renderAvatar = (
-    <Avatar
-      alt={doc.author.name}
-      src={doc.author.avatarUrl}
-      sx={{
-        left: 24,
-        zIndex: 9,
-        bottom: -24,
-        position: 'absolute',
-        ...((large || long) && {
-          top: 24,
-        }),
-      }}
-    />
-  );
+    const renderAvatar = (
+        <Avatar
+            alt={doc.addedWho}
+            src={doc.addedWho}
+            sx={{
+                left: 24,
+                zIndex: 9,
+                bottom: -24,
+                position: 'absolute',
+                ...((large || long) && {
+                    top: 24,
+                }),
+            }}
+        />
+    );
 
-  const renderTitle = (
-    <Link
-      color="inherit"
-      variant="subtitle2"
-      underline="hover"
-      sx={{
-        height: 44,
-        overflow: 'hidden',
-        WebkitLineClamp: 2,
-        display: '-webkit-box',
-        WebkitBoxOrient: 'vertical',
-        ...(large && { typography: 'h5', height: 60 }),
-        ...((large || long) && {
-          color: 'common.white',
-        }),
-      }}
-    >
-      {doc.title}
-    </Link>
-  );
-
-  const renderInfo = (
-    <Box
-      sx={{
-        mt: 3,
-        gap: 1.5,
-        display: 'flex',
-        flexWrap: 'wrap',
-        color: 'text.disabled',
-        justifyContent: 'flex-end',
-      }}
-    >
-      {[
-        { number: doc.totalComments, icon: 'solar:chat-round-dots-bold' },
-        { number: doc.totalViews, icon: 'solar:eye-bold' },
-        { number: doc.totalShares, icon: 'solar:share-bold' },
-      ].map((info, _index) => (
-        <Box
-          key={_index}
-          sx={{
-            display: 'flex',
-            ...((large || long) && {
-              opacity: 0.64,
-              color: 'common.white',
-            }),
-          }}
+    const renderTitle = (
+        <Link
+            color="inherit"
+            variant="subtitle2"
+            underline="hover"
+            sx={{
+                height: 44,
+                overflow: 'hidden',
+                WebkitLineClamp: 2,
+                display: '-webkit-box',
+                WebkitBoxOrient: 'vertical',
+                ...(large && { typography: 'h5', height: 60 }),
+                ...((large || long) && {
+                    color: 'common.white',
+                }),
+            }}
         >
-          <Iconify width={16} icon={info.icon as IconifyName} sx={{ mr: 0.5 }} />
-          <Typography variant="caption">{fShortenNumber(info.number)}</Typography>
+            {doc.name}
+        </Link>
+    );
+
+    const renderInfo = (
+        <Box
+            sx={{
+                mt: 3,
+                gap: 1.5,
+                display: 'flex',
+                flexWrap: 'wrap',
+                color: 'text.disabled',
+                justifyContent: 'flex-end',
+            }}
+        >
+            {[
+                { data: doc.addedWho, icon: 'solar:chat-round-dots-bold' },
+                { data: doc.changedWho, icon: 'solar:eye-bold' },
+                { data: doc.changedWhen, icon: 'solar:share-bold' },
+            ].map((info, _index) => (
+                <Box
+                    key={_index}
+                    sx={{
+                        display: 'flex',
+                        ...((large || long) && {
+                            opacity: 0.64,
+                            color: 'common.white',
+                        }),
+                    }}
+                >
+                    <Iconify width={16} icon={info.icon as IconifyName} sx={{ mr: 0.5 }} />
+                    <Typography variant="caption">{info.data?.toString()}</Typography>
+                </Box>
+            ))}
         </Box>
-      ))}
-    </Box>
-  );
+    );
 
-  const renderCover = (
-    <Box
-      component="img"
-      alt={doc.title}
-      src={doc.coverUrl}
-      sx={{
-        top: 0,
-        width: 1,
-        height: 1,
-        objectFit: 'cover',
-        position: 'absolute',
-      }}
-    />
-  );
+    const renderCover = (
+        <Box
+            component="img"
+            alt={doc.name}
+            src={doc.name}
+            sx={{
+                top: 0,
+                width: 1,
+                height: 1,
+                objectFit: 'cover',
+                position: 'absolute',
+            }}
+        />
+    );
 
-  const renderDate = (
-    <Typography
-      variant="caption"
-      component="div"
-      sx={{
-        mb: 1,
-        color: 'text.disabled',
-        ...((large || long) && {
-          opacity: 0.48,
-          color: 'common.white',
-        }),
-      }}
-    >
-      {fDate(doc.postedAt)}
-    </Typography>
-  );
+    const renderDate = (
+        <Typography
+            variant="caption"
+            component="div"
+            sx={{
+                mb: 1,
+                color: 'text.disabled',
+                ...((large || long) && {
+                    opacity: 0.48,
+                    color: 'common.white',
+                }),
+            }}
+        >
+            {fDate(doc.addedWhen)}
+        </Typography>
+    );
 
-  const renderShape = (
-    <SvgColor
-      src="/assets/icons/shape-avatar.svg"
-      sx={{
-        left: 0,
-        width: 88,
-        zIndex: 9,
-        height: 36,
-        bottom: -16,
-        position: 'absolute',
-        color: 'background.paper',
-        ...((large || long) && { display: 'none' }),
-      }}
-    />
-  );
+    const renderShape = (
+        <SvgColor
+            src="/assets/icons/shape-avatar.svg"
+            sx={{
+                left: 0,
+                width: 88,
+                zIndex: 9,
+                height: 36,
+                bottom: -16,
+                position: 'absolute',
+                color: 'background.paper',
+                ...((large || long) && { display: 'none' }),
+            }}
+        />
+    );
 
-  return (
-    <Card sx={sx} {...other}>
-      <Box
-        sx={(theme) => ({
-          position: 'relative',
-          pt: 'calc(100% * 3 / 4)',
-          ...((large || long) && {
-            pt: 'calc(100% * 4 / 3)',
-            '&:after': {
-              top: 0,
-              content: "''",
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-              bgcolor: varAlpha(theme.palette.grey['900Channel'], 0.72),
-            },
-          }),
-          ...(large && {
-            pt: {
-              xs: 'calc(100% * 4 / 3)',
-              sm: 'calc(100% * 3 / 4.66)',
-            },
-          }),
-        })}
-      >
-        {renderShape}
-        {renderAvatar}
-        {renderCover}
-      </Box>
+    return (
+        <Card sx={sx} {...other}>
+            <Box
+                sx={(theme) => ({
+                    position: 'relative',
+                    pt: 'calc(100% * 3 / 4)',
+                    ...((large || long) && {
+                        pt: 'calc(100% * 4 / 3)',
+                        '&:after': {
+                            top: 0,
+                            content: "''",
+                            width: '100%',
+                            height: '100%',
+                            position: 'absolute',
+                            bgcolor: varAlpha(theme.palette.grey['900Channel'], 0.72),
+                        },
+                    }),
+                    ...(large && {
+                        pt: {
+                            xs: 'calc(100% * 4 / 3)',
+                            sm: 'calc(100% * 3 / 4.66)',
+                        },
+                    }),
+                })}
+            >
+                {renderShape}
+                {renderAvatar}
+                {renderCover}
+            </Box>
 
-      <Box
-        sx={(theme) => ({
-          p: theme.spacing(6, 3, 3, 3),
-          ...((large || long) && {
-            width: 1,
-            bottom: 0,
-            position: 'absolute',
-          }),
-        })}
-      >
-        {renderDate}
-        {renderTitle}
-        {renderInfo}
-      </Box>
-    </Card>
-  );
+            <Box
+                sx={(theme) => ({
+                    p: theme.spacing(6, 3, 3, 3),
+                    ...((large || long) && {
+                        width: 1,
+                        bottom: 0,
+                        position: 'absolute',
+                    }),
+                })}
+            >
+                {renderDate}
+                {renderTitle}
+                {renderInfo}
+            </Box>
+        </Card>
+    );
 }

src/client/dd-hub-react/src/sections/document/doc-search.tsx

@@ -4,14 +4,14 @@ import TextField from '@mui/material/TextField';
 import InputAdornment from '@mui/material/InputAdornment';
 import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
 
-import { Iconify } from 'src/components/iconify';
+import { Doc } from 'src/api/document-service';
 
-import type { IDocItem } from './doc-item';
+import { Iconify } from 'src/components/iconify';
 
 // ----------------------------------------------------------------------
 
 type DocSearchProps = {
-  posts: IDocItem[];
+  posts: Doc[];
   sx?: SxProps<Theme>;
 };
 
@@ -33,7 +33,7 @@ export function DocSearch({ posts, sx }: DocSearchProps) {
         },
       }}
       options={posts}
-      getOptionLabel={(post) => post.title}
+      getOptionLabel={(post) => post.name}
       isOptionEqualToValue={(option, value) => option.id === value.id}
       renderInput={(params) => (
         <TextField

src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx

@@ -6,6 +6,7 @@ import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
 
+import { Doc } from 'src/api/document-service';
 import { DashboardContent } from 'src/layouts/dashboard';
 import { Filter, getAttributesAsync } from 'src/api/attribute-service';
 
@@ -17,15 +18,13 @@ import { TextFilter } from '../text-filter';
 import CreateFilterModal from './create-filter-modal';
 import { DecimalFilter, IntFilter } from '../num-filter';
 import { DateFilter, DateTimeFilter, TimeFilter } from '../date-filter';
-
-import type { IDocItem } from '../doc-item';
 // ----------------------------------------------------------------------
 
 type Props = {
-  posts: IDocItem[];
+  docs: Doc[];
 };
 
-export function DocSearchView({ posts }: Props) {
+export function DocSearchView({ docs }: Props) {
   const [sortBy, setSortBy] = useState('latest');
 
   const [filters, setFilters] = useState<Filter[]>([])
@@ -51,7 +50,7 @@ export function DocSearchView({ posts }: Props) {
   //     justifyContent: 'space-between',
   //   }}
   // >
-  //   <DocSearch posts={posts} />
+  //   <DocSearch docs={docs} />
   //   <DocSort
   //     sortBy={sortBy}
   //     onSort={handleSort}
@@ -145,20 +144,20 @@ export function DocSearchView({ posts }: Props) {
       </Grid>
 
       <Grid container spacing={3}>
-        {posts.map((post, index) => {
+        {docs.map((doc, index) => {
           const large = false;
           const long = false;
 
           return (
             <Grid
-              key={post.id}
+              key={doc.id}
               size={{
                 xs: 12,
                 sm: large ? 12 : 6,
                 md: large ? 6 : 3,
               }}
             >
-              <DocItem doc={post} long={long} large={large} />
+              <DocItem doc={doc} long={long} large={large} />
             </Grid>
           );
         })}