Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 22x 22x 22x 22x 22x 22x 10x 9x 15x 15x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import { Container, Layout, Pagination } from '@wings-software/uicore'
import { defaultTo } from 'lodash-es'
import { TemplateCard } from '@templates-library/components/TemplateCard/TemplateCard'
import type { TemplateSummaryResponse } from 'services/template-ng'
import type { TemplatesViewProps } from '@templates-library/pages/TemplatesPage/views/TemplatesView'
import css from './TemplatesGridView.module.scss'
export const TemplatesGridView: React.FC<TemplatesViewProps> = (props): JSX.Element => {
const { data, selectedIdentifier, gotoPage, onSelect, onPreview, onOpenEdit, onOpenSettings, onDelete } = props
return (
<Layout.Vertical height={'100%'}>
<Container className={css.gridLayout}>
<Layout.Masonry
center
gutter={25}
items={defaultTo(data.content, [])}
renderItem={(template: TemplateSummaryResponse) => (
<TemplateCard
template={template}
onSelect={onSelect}
isSelected={template.identifier === selectedIdentifier}
onPreview={onPreview}
onOpenEdit={onOpenEdit}
onOpenSettings={onOpenSettings}
onDelete={onDelete}
/>
)}
keyOf={(item: TemplateSummaryResponse) => item.identifier}
/>
</Container>
<Pagination
itemCount={defaultTo(data.totalElements, 0)}
pageSize={defaultTo(data.size, 10)}
pageCount={defaultTo(data.totalPages, 0)}
pageIndex={defaultTo(data.number, 0)}
gotoPage={gotoPage}
/>
</Layout.Vertical>
)
}
|