import * as React from 'react' ; import { IFormGroup , IGenericListPageComponent , ISuperdesk , } from 'superdesk-api' ; import { IKnowledgeBaseItem , IKnowledgeBaseItemBase } from './interfaces' ; import { getFields } from './GetFields' ; export function getAnnotationsLibraryPage ( superdesk ) { return class AnnotationsLibraryPage extends React . Component { render ( ) { const { gettext } = superdesk . localization ; const { getGenericListPageComponent , ListItem , ListItemColumn , ListItemActionsMenu , } = superdesk . components ; const { getFormFieldPreviewComponent } = superdesk . forms ; const { nameField , languageField , definitionField , } = getFields ( superdesk ) ; const formConfig = { direction : 'vertical' , type : 'inline' , form : [ nameField , languageField , definitionField , ] , } ; const AnnotationsLibraryPageComponent = getGenericListPageComponent < IKnowledgeBaseItem > ( 'concept_items' , formConfig ) ; const renderRow = ( key , item , page ) => ( < ListItem key = { key } onClick = { ( ) => page . openPreview ( item . _id ) } > < ListItemColumn bold noBorder > { getFormFieldPreviewComponent ( item , nameField ) } < /ListItemColumn> < ListItemColumn ellipsisAndGrow noBorder > { getFormFieldPreviewComponent ( item , definitionField , { showAsPlainText : true } ) } < /ListItemColumn> < ListItemActionsMenu > < div style = { { display : 'flex' } } > < button onClick = { ( e ) => { e . stopPropagation ( ) ; page . startEditing ( item . _id ) ; } } title = { gettext ( 'Edit' ) } aria - label = { gettext ( 'Edit' ) } > < i className = "icon-pencil" / > < /button> < button onClick = { ( e ) => { e . stopPropagation ( ) ; page . deleteItem ( item ) ; } } title = { gettext ( 'Remove' ) } aria - label = { gettext ( 'Remove' ) } > < i className = "icon-trash" / > < /button> < /div> < /ListItemActionsMenu> < /ListItem>); return ( < AnnotationsLibraryPageComponent defaultSortOption = { { field : 'name' , direction : 'ascending' } } formConfig = { formConfig } renderRow = { renderRow } getNewItemTemplate = { ( page ) => { const baseTemplate = { cpnat_type : 'cpnat:abstract' , } ; const filteredLanguage = page . getActiveFilters ( ) . language ; if ( filteredLanguage != null ) { return { ... baseTemplate , language : filteredLanguage , } ; } else if ( superdesk . instance . config . default_language != null ) { return { ... baseTemplate , language : superdesk . instance . config . default_language , } ; } else { return baseTemplate ; } } } fieldForSearch = { nameField } defaultFilters = { superdesk . instance . config . default_language == null ? { } : { language : superdesk . instance . config . default_language } } / > ) ; } } ; }