Skip to content

Commit

Permalink
#106 Filter + style groups on document list views
Browse files Browse the repository at this point in the history
  • Loading branch information
@blms
blms committed Feb 4, 2021
1 parent 8e9ba18 commit 2f199d7
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 71 deletions.
173 changes: 105 additions & 68 deletions src/components/Dashboard/DashboardDocumentList/DashboardDocumentList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@
import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import {
Badge, Button, Card, Col, ListGroup, Row, Tab, Tabs,
Badge, Button, Card, Col, ListGroup, OverlayTrigger, Row, Tab, Tabs, Tooltip,
} from 'react-bootstrap';
import { Plus } from 'react-bootstrap-icons';
import { format } from 'date-fns';
import LoadingSpinner from '../../LoadingSpinner';
import { getSharedDocumentsByGroup, getDocumentsByUser } from '../../../utils/docUtil';
import { getGroupNameById } from '../../../utils/groupUtil';
import { getGroupNameById, filterGroupIdsByUser } from '../../../utils/groupUtil';

const DashboardDocumentList = ({
session,
Expand Down Expand Up @@ -70,73 +71,109 @@ const DashboardDocumentList = ({
}, [documents, documentGroupState]);

return (
<Card data-testid="dash-document-list">
<Card.Header>
<Card.Title><Link href="/documents">Documents</Link></Card.Title>
<Tabs
transition={false}
style={{ justifyContent: 'flex-end', float: 'right', marginTop: '-2rem' }}
activeKey={key}
onSelect={(k) => {
setKey(k);
}}
>
<Tab eventKey="shared" title="Shared" />
<Tab eventKey="mine" title="Mine" />
</Tabs>
</Card.Header>
{listLoading && (
<LoadingSpinner />
)}
{!listLoading && documents && documents.length > 0 && (
<ListGroup>
{documents.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).map(
(document) => (
<ListGroup.Item key={document.slug}>
<Row>
<Col>
<Link href={`/documents/${document.slug}`}>{document.title}</Link>
</Col>
<Col className="text-right">
{document.groups && document.groups.length > 0 && (
<Badge
variant="info"
key={document.groups.sort()[0]}
className="mr-2"
>
{documentGroupState[document.groups.sort()[0]]}
</Badge>
)}
<>
{format(new Date(document.createdAt), 'MM/dd/yyyy')}
</>
</Col>
</Row>
</ListGroup.Item>
),
<>
<Card data-testid="dash-document-list">
<Card.Header>
<Card.Title><Link href="/documents">Documents</Link></Card.Title>
<Tabs
transition={false}
style={{ justifyContent: 'flex-end', float: 'right', marginTop: '-2rem' }}
activeKey={key}
onSelect={(k) => {
setKey(k);
}}
>
<Tab eventKey="shared" title="Shared" />
<Tab eventKey="mine" title="Mine" />
</Tabs>
</Card.Header>
{listLoading && (
<LoadingSpinner />
)}
<ListGroup.Item style={{ fontWeight: 'bold' }} key="all-docs">
<Link href={`/documents?tab=${key}`}>
{`See all ${key === 'shared' ? key : 'created'} documents...`}
</Link>
</ListGroup.Item>
</ListGroup>
)}
{!listLoading && documents && documents.length === 0 && (
<Card.Body>
{`You have no ${key === 'shared' ? key : 'created'} documents.`}
</Card.Body>
)}
<Card.Footer className="text-right" style={{ borderTop: 0 }}>
<Button
size="sm"
variant="outline-primary"
href="/documents/new"
>
+ Create new document
</Button>
</Card.Footer>
</Card>
{!listLoading && documents && documents.length > 0 && (
<ListGroup>
{documents.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).map(
(document) => (
<ListGroup.Item key={document.slug}>
<Row>
<Col>
<Link href={`/documents/${document.slug}`}>{document.title}</Link>
</Col>
<Col className="text-right">
{session && session.user.groups && document.groups
&& filterGroupIdsByUser(document.groups, session.user.groups).length > 0 && (
<Badge
variant="info"
key={filterGroupIdsByUser(document.groups, session.user.groups).sort()[0]}
className="mr-2"
>
{documentGroupState[filterGroupIdsByUser(document.groups, session.user.groups)
.sort()[0]]}
</Badge>
)}
{document.groups && session && session.user.groups
&& filterGroupIdsByUser(document.groups, session.user.groups).length > 1 && (
<OverlayTrigger
overlay={(
<Tooltip id="tooltip-groups">
Shared with additional groups
</Tooltip>
)}
placement="top"
>
<Plus
className="mr-1 ml-n1 mb-1"
title="Tooltip on left"
/>
</OverlayTrigger>
)}
<>
{format(new Date(document.createdAt), 'MM/dd/yyyy')}
</>
</Col>
</Row>
</ListGroup.Item>
),
)}
<ListGroup.Item style={{ fontWeight: 'bold' }} key="all-docs">
<Link href={`/documents?tab=${key}`}>
{`See all ${key === 'shared' ? key : 'created'} documents...`}
</Link>
</ListGroup.Item>
</ListGroup>
)}
{!listLoading && documents && documents.length === 0 && (
<Card.Body>
{`You have no ${key === 'shared' ? key : 'created'} documents.`}
</Card.Body>
)}
<Card.Footer className="text-right" style={{ borderTop: 0 }}>
<Button
size="sm"
variant="outline-primary"
href="/documents/new"
>
+ Create new document
</Button>
</Card.Footer>
</Card>
<style jsx global>
{`
#tooltip-groups .tooltip-inner {
font-size: 12px;
background-color: #f6f6f6;
color: black;
border: 1px solid rgba(0, 0, 0, 0.125);
}
#tooltip-groups .arrow {
background-color: transparent;
}
#tooltip-groups .arrow::before {
border-top-color: rgba(0, 0, 0, 0.125);
}
`}
</style>
</>
);
};

Expand Down
7 changes: 4 additions & 3 deletions src/components/DocumentList/DocumentList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
} from 'react-bootstrap-icons';
import { format } from 'date-fns';
import LoadingSpinner from '../LoadingSpinner';
import { getGroupNameById } from '../../utils/groupUtil';
import { getGroupNameById, filterGroupIdsByUser } from '../../utils/groupUtil';
import { deleteDocumentById } from '../../utils/docUtil';
import ConfirmationDialog from '../ConfirmationDialog';
import { ucFirst } from '../../utils/stringUtil';
Expand All @@ -27,6 +27,7 @@ const DocumentList = ({
userId,
alerts,
setAlerts,
userGroups,
}) => {
const [groupState, setGroupState] = useState({});
const [showModal, setShowModal] = useState('');
Expand Down Expand Up @@ -114,8 +115,8 @@ const DocumentList = ({
{format(new Date(document.createdAt), 'MM/dd/yyyy')}
</td>
<td>
{(document.groups && document.groups.length > 0)
? document.groups.sort().map((group) => (
{(document.groups && document.groups.length > 0 && userGroups)
? filterGroupIdsByUser(document.groups, userGroups).sort().map((group) => (
<Badge
variant="info"
className="mr-1"
Expand Down
1 change: 1 addition & 0 deletions src/pages/documents/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ const DocumentsIndex = ({
setAlerts={setAlerts}
loading={listLoading}
setLoading={setListLoading}
userGroups={session.user.groups}
userId={session.user.id}
/>
)}
Expand Down
9 changes: 9 additions & 0 deletions src/utils/groupUtil.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,13 +358,22 @@ const getGroupById = async (id) => {
return Promise.resolve(res.json());
} return Promise.reject(Error(`Unable to get group ${id}: error ${res.status} received from server`));
};

const filterGroupIdsByUser = (groupIds, userGroups) => {
if (userGroups) {
const filtered = userGroups.filter((grp) => groupIds.includes(grp.id));
return filtered.map((grp) => grp.id);
} return [];
};

export {
addGroupToUser,
addUserToGroup,
changeUserRole,
deleteGroup,
deleteGroupById,
deleteInviteToken,
filterGroupIdsByUser,
generateInviteToken,
getGroupById,
getGroupNameById,
Expand Down

0 comments on commit 2f199d7

Please sign in to comment.