Implement related_items archive search modal

client/components/ContentProfiles/FieldTab/index.tsx

@@ -222,9 +222,11 @@ export class FieldTab extends React.Component<IProps, IState> {
     }
 
     render() {
+        debugger
         const unusedFields = getUnusedProfileFields(this.props.profile, this.props.groupFields);
         const systemRequiredFields = this.getSystemRequiredFields();
 
+        console.log(this.props.profile);
         return (
             <div className="sd-column-box--2">
                 <div className="sd-column-box__main-column">

client/components/EventsRelatedArticles/EventsRelatedArticlesModal.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import {SearchBar, Modal, Dropdown} from 'superdesk-ui-framework/react';
+// import {superdeskApi} from '../../superdeskApi';
+import {ISuperdesk} from 'superdesk-api';
+import {RelatedArticleComponent} from './RelatedArticleComponent';
+import {gettext} from 'superdesk-core/scripts/core/utils';
+
+interface IProps {
+    closeModal: () => void;
+
+    // if there were any articles that were already selected, this is the array for them,
+    // is used to determine the data inside the modal and the article
+    selectedArticles: Array<string>;
+}
+
+interface IState {
+    articles: Array<IBelgaArchiveNewsObject>;
+    searchQuery: string;
+}
+
+export interface IBelgaArchiveNewsObject {
+    newsObjectId: string;
+    newsItemId: number;
+    assetType: string;
+    name: string;
+    credit: string;
+    topic?: any;
+    headLine: string;
+    language: string;
+    source: string;
+    city: string;
+    country: string;
+    createDate: number; // ISO
+    validateDate: number; // ISO
+    editorialInfo?: any;
+    comments: string;
+    authors: Array<{name: string; type: string}>;
+    keywords: Array<string>;
+    packages: Array<{newsProduct: string; newsService: string;}>;
+    newsComponents: Array<{
+        newsComponentId: number;
+        name: string;
+        assetType: string;
+        assetFormat: string;
+        componentClass: string;
+        width?: number;
+        height?: number;
+        alternateComponents: Array<any>;
+        proxies: Array<{
+            proxyId: number;
+            assetFormat: string;
+            dataFileName: string;
+            dataDirName: string;
+            physicalDataDirName: string;
+            ingestPath: string;
+            varcharData: string;
+            clobData: string;
+            status: string;
+            protocol: string;
+            size: number;
+            urn?: string;
+        }>;
+    }>;
+}
+
+interface IBelgaArchiveResult {
+    newsObjects: Array<IBelgaArchiveNewsObject>;
+    nrNewsObjects: number;
+    start: number;
+}
+
+export default class EventsRelatedArticlesModal extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            articles: [],
+            searchQuery: '',
+        };
+    }
+
+    fetchArticles() {
+        return fetch(
+            'http://wss-01.staging.belga.be:9000/archivenewsobjects',
+            {
+                method: 'GET'
+            },
+        ).then((result: IBelgaArchiveResult) => {
+            this.setState({
+                articles: result.newsObjects,
+            });
+        });
+    }
+
+    render(): React.ReactNode {
+        const {closeModal} = this.props;
+
+        return (
+            <Modal
+                headerTemplate={gettext('Search Related Articles')}
+                visible
+                contentPadding="medium"
+                contentBg="medium"
+                size="medium"
+                onHide={closeModal}
+            >
+                <SearchBar
+                    value={this.state.searchQuery}
+                    onSubmit={(value: string) => {
+                        this.setState({
+                            searchQuery: value,
+                        });
+                    }}
+                    placeholder={gettext('Search articles')}
+                    boxed
+                >
+                    <Dropdown
+                        maxHeight={300}
+                        append
+                        zIndex={2001}
+                        items={[]}
+                    >
+                        {gettext('All searches')}
+                    </Dropdown>
+                </SearchBar>
+                <ul className="compact-view list-view">
+                    {this.state.articles.map((articleFromArchive) => (
+                        <RelatedArticleComponent
+                            selected={this.props.selectedArticles.includes(articleFromArchive.newsObjectId)}
+                            key={articleFromArchive.newsObjectId}
+                            article={articleFromArchive}
+                        />
+                    ))}
+                </ul>
+            </Modal>
+        );
+    }
+}

client/components/fields/editor/EventRelatedPlannings/EventRelatedArticles.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+
+import {
+    IEditorFieldProps,
+    IEventItem,
+    IPlanningCoverageItem,
+    IPlanningItem,
+    IProfileSchemaTypeList,
+    ISearchProfile
+} from '../../../../interfaces';
+import {planningApi, superdeskApi} from '../../../../superdeskApi';
+
+import {ButtonGroup, Button} from 'superdesk-ui-framework/react';
+import {Row} from '../../../UI/Form';
+import {RelatedPlanningItem} from './RelatedPlanningItem';
+import {PlanningMetaData} from '../../../RelatedPlannings/PlanningMetaData';
+
+import './style.scss';
+import {showModal} from '@superdesk/common';
+import EventsRelatedArticlesModal from 'components/EventsRelatedArticles/EventsRelatedArticlesModal';
+
+interface IProps extends IEditorFieldProps {
+    item: IEventItem;
+    schema?: IProfileSchemaTypeList;
+    coverageProfile?: ISearchProfile;
+
+    getRef(value: DeepPartial<IPlanningItem>): React.RefObject<PlanningMetaData | RelatedPlanningItem>;
+    addPlanningItem(): void;
+    removePlanningItem(item: DeepPartial<IPlanningItem>): void;
+    updatePlanningItem(original: DeepPartial<IPlanningItem>, updates: DeepPartial<IPlanningItem>): void;
+    addCoverageToWorkflow(original: IPlanningItem, coverage: IPlanningCoverageItem, index: number): void;
+}
+
+export class EditorFieldEventRelatedItems extends React.PureComponent<IProps> {
+    render() {
+        const {gettext} = superdeskApi.localization;
+        const disabled = this.props.disabled || this.props.schema?.read_only;
+
+        return (
+            <div className="related-plannings">
+                <Row flex={true} noPadding={true}>
+                    <label className="InputArray__label side-panel__heading side-panel__heading--big">
+                        {gettext('Related Articles')}
+                    </label>
+                    {disabled ? null : (
+                        <ButtonGroup align="end">
+                            <Button
+                                type="primary"
+                                icon="plus-large"
+                                text="plus-large"
+                                shape="round"
+                                size="small"
+                                iconOnly={true}
+                                onClick={this.props.addPlanningItem}
+                            />
+                        </ButtonGroup>
+                    )}
+                </Row>
+                {!this.props.item.related_items?.length ? (
+                    <Row>
+                        <div className="info-box--dashed">
+                            <label>{gettext('No related articles yet')}</label>
+                            <button
+                                onClick={() => {
+                                    showModal(({closeModal}) => (
+                                        <EventsRelatedArticlesModal
+                                            selectedArticles={this.props.item.related_items}
+                                            closeModal={closeModal}
+                                        />
+                                    ));
+                                }}
+                            >
+                                Show search
+                            </button>
+                        </div>
+                    </Row>
+                ) : (
+                    <React.Fragment>
+                        <div>
+                            {JSON.stringify(this.props.item.related_items)}
+                        </div>
+                    </React.Fragment>
+                )}
+            </div>
+        );
+    }
+}