Skip to content

Commit

Permalink
Reimplement list view, preview and more utilising existing UIF compon…
Browse files Browse the repository at this point in the history 
…ents
  • Loading branch information
@thecalcc
thecalcc committed Mar 25, 2024
1 parent 61090d1 commit 61c3feb
Show file tree
Hide file tree
Showing 5 changed files with 306 additions and 270 deletions.
8 changes: 4 additions & 4 deletions client/extensions/relatedArticles/src/EventsRelatedArticles/EditorFieldEventRelatedItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ import {Row} from 'superdesk-planning/client/components/UI/Form/Row';
import {showModal} from '@superdesk/common';
import EventsRelatedArticlesModal from './EventsRelatedArticlesModal';
import {superdeskApi} from 'superdesk-planning/client/superdeskApi';
import {RelatedArticleComponent} from './RelatedArticleComponent';
import {IArticle} from 'superdesk-api';
import {cleanArticlesFields} from './utils';
import {RelatedArticlesListComponent} from './RelatedArticlesListComponent';

interface IProps extends IEditorFieldProps {
item: IEventItem;
Expand Down Expand Up @@ -87,12 +87,12 @@ export class EditorFieldEventRelatedItems extends React.PureComponent<IProps, IS
</div>
</Row>
) : (
<Spacer v gap="0" justifyContent='center' alignItems='center' noWrap>
<Spacer v gap="4" justifyContent='center' alignItems='center' noWrap>
{
(this.state.selectedRelatedArticles ?? []).map((relItem) => (
<RelatedArticleComponent
<RelatedArticlesListComponent
key={relItem.guid}
editorPreview
key={`${relItem.guid} + ${this.state.selectedRelatedArticles.length}`}
removeArticle={(articleId) => {
this.props.onChange(
this.props.field,
Expand Down
143 changes: 82 additions & 61 deletions client/extensions/relatedArticles/src/EventsRelatedArticles/EventsRelatedArticlesModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
import React from 'react';
import {SearchBar, Modal, Dropdown, Spacer, Button, WithPagination, Loader, IconButton} from 'superdesk-ui-framework/react';
import {RelatedArticleComponent} from './RelatedArticleComponent';
import {
SearchBar,
Modal,
Dropdown,
Spacer,
Button,
WithPagination,
Loader,
Panel,
PanelHeader,
PanelContent,
PanelContentBlock,
} from 'superdesk-ui-framework/react';
import {getProjectedFieldsArticle, gettext} from 'superdesk-core/scripts/core/utils';
import {httpRequestJsonLocal} from 'superdesk-core/scripts/core/helpers/network';
import {toElasticQuery} from 'superdesk-core/scripts/core/query-formatting';
import {IArticle, IRestApiResponse, ISuperdeskQuery} from 'superdesk-api';
import {PreviewArticle} from './PreviewArticle';
import {cleanArticlesFields} from './utils';
import {RelatedArticlesListComponent} from './RelatedArticlesListComponent';

interface IProps {
closeModal: () => void;
Expand Down Expand Up @@ -97,7 +109,7 @@ export default class EventsRelatedArticlesModal extends React.Component<IProps,
<Modal
headerTemplate={gettext('Search Related Articles')}
visible
contentPadding="medium"
contentPadding="none"
contentBg="medium"
size="x-large"
onHide={closeModal}
Expand All @@ -116,43 +128,50 @@ export default class EventsRelatedArticlesModal extends React.Component<IProps,
closeModal();
}}
disabled={JSON.stringify(this.props.selectedArticles) === JSON.stringify(this.state.currentlySelectedArticles)}
text={gettext('Add Selected')}
text={gettext('Apply')}
style="filled"
type="primary"
/>
</Spacer>
)}
>
<Spacer v gap="16">
<SearchBar
value={this.state.searchQuery}
onSubmit={(value: string) => {
this.setState({
searchQuery: value,
});
<Spacer v gap="0">
<div
style={{
padding: 12,
backgroundColor: 'white'
}}
placeholder={gettext('Search...')}
boxed
>
<Dropdown
maxHeight={300}
append
zIndex={2001}
items={[
{
type: 'group',
items: allLanguages.map((language) => ({
label: language.label,
onSelect: () => onSelectLanguage(language)
}))
},
]}
<SearchBar
value={this.state.searchQuery}
onSubmit={(value: string) => {
this.setState({
searchQuery: value,
});
}}
placeholder={gettext('Search...')}
boxed
>
{this.state.activeLanguage.label}
</Dropdown>
</SearchBar>
<Dropdown
maxHeight={300}
append
zIndex={2001}
items={[
{
type: 'group',
items: allLanguages.map((language) => ({
label: language.label,
onSelect: () => onSelectLanguage(language)
}))
},
]}
>
{this.state.activeLanguage.label}
</Dropdown>
</SearchBar>
</div>
<Spacer h gap="8" justifyContent='start' alignItems='start' noWrap>
<div style={this.state.previewItem ? {width: '65%'} : {width: '100%'}}>
<div style={{...{width: this.state.previewItem ? '65%' : '100%'}, ...{padding: 12}}}>
<WithPagination
key={this.state.activeLanguage.code + this.state.searchQuery + this.state.repo}
pageSize={20}
Expand Down Expand Up @@ -199,23 +218,16 @@ export default class EventsRelatedArticlesModal extends React.Component<IProps,
{
(items: Array<Partial<IArticle>>) => {
return (
<Spacer v gap="0" justifyContent='center' alignItems='center' noWrap>
<Spacer v gap="4" justifyContent='center' alignItems='center' noWrap>
{items.map((articleFromArchive) => (
<RelatedArticleComponent
<RelatedArticlesListComponent
key={articleFromArchive.guid}
article={articleFromArchive}
setPreview={(itemToPreview) => {
this.setState({
previewItem: itemToPreview,
})
}}
addArticle={(article: Partial<IArticle>) => {
this.setState({
currentlySelectedArticles: [
...(this.state.currentlySelectedArticles ?? []),
article,
]
});
}}
removeArticle={(articleId: string) => {
const filteredArray = [...(this.state.currentlySelectedArticles ?? [])]
.filter(({guid}) => guid !== articleId);
Expand All @@ -227,7 +239,15 @@ export default class EventsRelatedArticlesModal extends React.Component<IProps,
prevSelected={(this.props.selectedArticles ?? [])
.find((x) => x.guid === articleFromArchive.guid) != null
}
article={articleFromArchive}
addArticle={(article: Partial<IArticle>) => {
this.setState({
currentlySelectedArticles: [
...(this.state.currentlySelectedArticles ?? []),
article,
]
});
}}
openInPreview={this.state.previewItem?.guid === articleFromArchive.guid}
/>
))}
</Spacer>
Expand All @@ -249,26 +269,27 @@ export default class EventsRelatedArticlesModal extends React.Component<IProps,
<Loader overlay />
</div>
}
{this.state.previewItem && (
<div
style={{
width: '35%',
overflowY: 'scroll',
height: '100%',
}}
>
<div style={{backgroundColor: 'white', padding: 8, borderRadius: 4, width: '100%'}}>
<PreviewArticle
onClose={() => {
this.setState({
previewItem: null,
})
}}
item={this.state.previewItem}
/>
</div>
</div>
)}
<div>
<Panel background='light' open={this.state.previewItem != null} side='right' size="medium">
<PanelHeader
title={gettext("Article preview")}
onClose={() => {
this.setState({
previewItem: null,
})
}}
/>
<PanelContent empty={this.state.previewItem == null} >
<PanelContentBlock>
{this.state.previewItem && (
<PreviewArticle
item={this.state.previewItem}
/>
)}
</PanelContentBlock>
</PanelContent>
</Panel>
</div>
</Spacer>
</Spacer>
</Modal>
Expand Down
76 changes: 32 additions & 44 deletions client/extensions/relatedArticles/src/EventsRelatedArticles/PreviewArticle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ import {gettext} from 'superdesk-core/scripts/core/utils';
import {formatDate} from 'superdesk-core/scripts/core/get-superdesk-api-implementation';
import {getSortedFields} from 'superdesk-core/scripts/apps/authoring/preview/utils';
import {fakeEditor} from './utils';
import {IconButton, Spacer} from 'superdesk-ui-framework/react';
import {ContentDivider, Heading} from 'superdesk-ui-framework/react';

interface IProps {
item: Partial<IArticle>;
onClose: () => void;
}

interface IState {
Expand Down Expand Up @@ -60,55 +59,44 @@ export class PreviewArticle extends React.PureComponent<IProps, IState> {
return (
<div style={{width: '100%'}} className="preview-content">
<div>
<Spacer style={{width: '100%'}} h gap="16" justifyContent='space-between' alignItems='start' noWrap>
<div style={{flexGrow: 1}} className="css-table">
<div className="tr">
<div className="td" style={paddingBlockEnd}>
<span className="form-label">{gettext('Last modified')}</span>
</div>
<div style={{flexGrow: 1}} className="css-table">
<div className="tr">
<div className="td" style={paddingBlockEnd}>
<span className="form-label">{gettext('Last modified')}</span>
</div>

<div
className="td"
style={{paddingInlineStart: 30, ...paddingBlockEnd}}
>
{formatDate(new Date(this.props.item.versioncreated))}
</div>
<div
className="td"
style={{paddingInlineStart: 30, ...paddingBlockEnd}}
>
{formatDate(new Date(this.props.item.versioncreated))}
</div>
</div>

{
getSortedFields('header', fakeEditor, this.props.item, false, this.state.customFieldVocabularies)
.map((field) => (
<div key={field.id} className="tr">
<div className="td" style={paddingBlockEnd}>
<span className="form-label">{this.getLabel(field.id)}</span>
</div>
{
getSortedFields('header', fakeEditor, this.props.item, false, this.state.customFieldVocabularies)
.map((field) => (
<div key={field.id} className="tr">
<div className="td" style={paddingBlockEnd}>
<span className="form-label">{this.getLabel(field.id)}</span>
</div>

<div
className="td"
style={{paddingInlineStart: 30, ...paddingBlockEnd}}
>
<PreviewFieldType field={field} language={this.props.item.language} />
</div>
<div
className="td"
style={{paddingInlineStart: 30, ...paddingBlockEnd}}
>
<PreviewFieldType field={field} language={this.props.item.language} />
</div>
))
}
</div>
<div>
<IconButton
onClick={() => {
this.props.onClose();
}}
icon='close-small'
ariaValue='Close preview'
/>
</div>
</Spacer>
<br />
</div>
))
}
</div>
<ContentDivider />
{
headlineField?.id && (
<div style={{marginTop: 4}} key={headlineField.id}>
<div><h1>{headlineField.value}</h1></div>
</div>
<Heading type='h1'>
{headlineField.value}
</Heading>
)
}
{
Expand Down
Loading

0 comments on commit 61c3feb

Please sign in to comment.