Skip to content

Commit

Permalink
Fixed issue with scrollbar on dashboard
Browse files Browse the repository at this point in the history 
Former-commit-id: 8c5c29392d932da493211d12ba7ab96a2fed0182
  • Loading branch information
@rmathis
rmathis committed Aug 2, 2022
1 parent 75b2c3e commit e9f1bd5
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 77 deletions.
151 changes: 77 additions & 74 deletions ui/src/app/metadata/domain/provider/component/ProviderList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,83 +18,86 @@ export function ProviderList({ children, entities, reorder = true, first, last,
const translator = useTranslator();

return (
<Scroller entities={entities}>
{(limited) => <div className="table-responsive mt-3 provider-list!">
<table className="table table-striped w-100 table-hover">
<thead>
<tr>
<th><Translate value="label.order">Order</Translate></th>
<th className="w-25"><Translate value="label.title">Title</Translate></th>
<th className="w-15"><Translate value="label.provider-type">Provider Type</Translate></th>
<th className="w-15"><Translate value="label.author">Author</Translate></th>
<th className="w-15"><Translate value="label.creation-date">Created Date</Translate></th>
<th className="text-end w-15"><Translate value="label.enabled">Enabled</Translate></th>
</tr>
</thead>
<tbody>
{limited.map((provider, idx) =>
<tr key={idx}>
<td className="align-middle">
<div className="d-flex align-items-center">
{reorder ?
<div className="provider-index text-center text-primary font-weight-bold">{idx + 1}</div>
<React.Fragment>
<Scroller entities={entities}>
{(limited) => <div className="table-responsive mt-3 provider-list!">
<table className="table table-striped w-100 table-hover">
<thead>
<tr>
<th><Translate value="label.order">Order</Translate></th>
<th className="w-25"><Translate value="label.title">Title</Translate></th>
<th className="w-15"><Translate value="label.provider-type">Provider Type</Translate></th>
<th className="w-15"><Translate value="label.author">Author</Translate></th>
<th className="w-15"><Translate value="label.creation-date">Created Date</Translate></th>
<th className="text-end w-15"><Translate value="label.enabled">Enabled</Translate></th>
</tr>
</thead>
<tbody>
{limited.map((provider, idx) =>
<tr key={idx}>
<td className="align-middle">
<div className="d-flex align-items-center">
{reorder ?
<div className="provider-index text-center text-primary font-weight-bold">{idx + 1}</div>
:
<div className="provider-index text-center text-primary font-weight-bold">&mdash;</div>
}
&nbsp;
<Button
onClick={ () => onOrderDown(provider.resourceId) }
variant="link"
className=" px-1"
disabled={provider.resourceId === last || !reorder}
aria-label="Decrease reorder by 1">
<FontAwesomeIcon className="text-info" icon={faChevronCircleDown} size="lg" />
<i className="fa text-info fa-lg fa-chevron-circle-down" aria-hidden="true"></i>
</Button>
<Button
onClick={ () => onOrderUp(provider.resourceId) }
variant="link"
className="px-1"
aria-label="Increase reorder by 1"
disabled={provider.resourceId === first || !reorder}>
<FontAwesomeIcon className="text-info" icon={faChevronCircleUp} size="lg" />
<i className="fa text-info fa-lg fa-chevron-circle-up" aria-hidden="true"></i>
</Button>
</div>
</td>
<td className="align-middle">
<Link to={`/metadata/provider/${provider.resourceId}/configuration/options`}>{provider.name}</Link>
</td>
<td className="align-middle">{ provider['@type'] }</td>
<td className="align-middle">{ provider.createdBy }</td>
<td className="align-middle"><FormattedDate date={provider.createdDate} /></td>
<td className="align-middle">
<span className="d-flex justify-content-end">
{onEnable && isAdmin ?
<Form.Check
size="lg"
type="switch"
id={`enable-switch-${provider.resourceId}`}
aria-label={translator(provider.enabled ? 'label.disable' : 'label.enable')}
onChange={({ target: { checked } }) => onEnable(provider, checked)}
checked={provider.enabled}
>
</Form.Check>
:
<div className="provider-index text-center text-primary font-weight-bold">&mdash;</div>
<Badge variant={provider.enabled ? 'success' : 'danger'}>
<Translate value={provider.enabnled ? 'value.enabled' : 'value.disabled'}></Translate>
</Badge>
}
&nbsp;
<Button
onClick={ () => onOrderDown(provider.resourceId) }
variant="link"
className=" px-1"
disabled={provider.resourceId === last || !reorder}
aria-label="Decrease reorder by 1">
<FontAwesomeIcon className="text-info" icon={faChevronCircleDown} size="lg" />
<i className="fa text-info fa-lg fa-chevron-circle-down" aria-hidden="true"></i>
</Button>
<Button
onClick={ () => onOrderUp(provider.resourceId) }
variant="link"
className="px-1"
aria-label="Increase reorder by 1"
disabled={provider.resourceId === first || !reorder}>
<FontAwesomeIcon className="text-info" icon={faChevronCircleUp} size="lg" />
<i className="fa text-info fa-lg fa-chevron-circle-up" aria-hidden="true"></i>
</Button>
</div>
</td>
<td className="align-middle">
<Link to={`/metadata/provider/${provider.resourceId}/configuration/options`}>{provider.name}</Link>
</td>
<td className="align-middle">{ provider['@type'] }</td>
<td className="align-middle">{ provider.createdBy }</td>
<td className="align-middle"><FormattedDate date={provider.createdDate} /></td>
<td className="align-middle">
<span className="d-flex justify-content-end">
{onEnable && isAdmin ?
<Form.Check
size="lg"
type="switch"
id={`enable-switch-${provider.resourceId}`}
aria-label={translator(provider.enabled ? 'label.disable' : 'label.enable')}
onChange={({ target: { checked } }) => onEnable(provider, checked)}
checked={provider.enabled}
>
</Form.Check>
:
<Badge variant={provider.enabled ? 'success' : 'danger'}>
<Translate value={provider.enabnled ? 'value.enabled' : 'value.disabled'}></Translate>
</Badge>
}
</span>
</td>
</tr>
)}
</tbody>
</table>
</span>
</td>
</tr>
)}
</tbody>
</table>
</div>
}
</Scroller>
{children}
</div>
}
</Scroller>
</React.Fragment>

);
}

Expand Down
9 changes: 6 additions & 3 deletions ui/src/app/metadata/domain/source/component/SourceList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ export default function SourceList({ entities, onDelete, onEnable, onChangeGroup
const canEnable = useCanEnable();

return (
<Scroller entities={entities}>
<React.Fragment>
<Scroller entities={entities}>
{(limited) =>
<div className="table-responsive mt-3 source-list">
<table className="table table-striped w-100 table-hover">
Expand Down Expand Up @@ -122,9 +123,11 @@ export default function SourceList({ entities, onDelete, onEnable, onChangeGroup
</GroupsProvider>
</tbody>
</table>
{children}
</div>
}
</Scroller>
</Scroller>
{children}
</React.Fragment>

);
}

0 comments on commit e9f1bd5

Please sign in to comment.