diff --git a/client/components/Coverages/CoverageIcons.tsx b/client/components/Coverages/CoverageIcons.tsx index a24bb7582..08386ef01 100644 --- a/client/components/Coverages/CoverageIcons.tsx +++ b/client/components/Coverages/CoverageIcons.tsx @@ -94,7 +94,7 @@ export class CoverageIcons extends React.PureComponent { return ( (
diff --git a/client/components/Coverages/coverage-icons.scss b/client/components/Coverages/coverage-icons.scss index 02ba64789..2f6791cb9 100644 --- a/client/components/Coverages/coverage-icons.scss +++ b/client/components/Coverages/coverage-icons.scss @@ -3,7 +3,7 @@ border-radius: var(--b-radius--medium); padding: 1.5rem; box-shadow: var(--sd-shadow__dropdown); - max-height: 100%; + max-height: 400px; overflow: auto; } diff --git a/client/components/GeoLookupInput/AddGeoLookupInput.tsx b/client/components/GeoLookupInput/AddGeoLookupInput.tsx index d0f08c601..1ae491ad1 100644 --- a/client/components/GeoLookupInput/AddGeoLookupInput.tsx +++ b/client/components/GeoLookupInput/AddGeoLookupInput.tsx @@ -230,6 +230,7 @@ export class AddGeoLookupInput extends React.Component { qcode: location.guid, address: location.address, details: location.details, + translations: location.translations, }; // external address might not be there. @@ -274,6 +275,7 @@ export class AddGeoLookupInput extends React.Component { {initialValue?.name == null ? null : ( { {this.state.openSuggestsPopUp && ( { } handleEnterKey() { + const {localSuggests, suggests} = this.props; + const localSuggestLen = localSuggests?.length ?? 0; + if (this.state.activeOptionIndex > -1) { - if (this.state.activeOptionIndex < get(this.props.localSuggests, 'length', -1)) { - this.props.onChange(this.props.localSuggests[this.state.activeOptionIndex]); + if (this.state.activeOptionIndex < (localSuggests.length ?? -1)) { + this.props.onChange(localSuggests[this.state.activeOptionIndex]); return; } - if (this.state.activeOptionIndex === get(this.props.localSuggests, 'length', 0)) { + if (this.state.activeOptionIndex === localSuggestLen) { this.onSearch(); return; } - if (this.state.activeOptionIndex >= get(this.props.localSuggests, 'length', 0) + 1) { - this.props.onChange(this.props.suggests[ - this.state.activeOptionIndex - (get(this.props.localSuggests, 'length', 0) + 1)]); + if (this.state.activeOptionIndex >= localSuggestLen + 1) { + this.props.onChange(suggests[this.state.activeOptionIndex - localSuggestLen + 1]); } } } @@ -99,8 +102,8 @@ export class AddGeoLookupResultsPopUp extends React.Component { handleDownArrowKey() { if (this.state.activeOptionIndex < (1 + // External search button - get(this.props.localSuggests, 'length', 0) + - get(this.props.suggests, 'length', 0)) - 1 + (this.props.localSuggests?.length ?? 0) + + (this.props.suggests?.length ?? 0)) - 1 ) { this.setState({activeOptionIndex: this.state.activeOptionIndex + 1}); @@ -140,10 +143,8 @@ export class AddGeoLookupResultsPopUp extends React.Component { render() { const {gettext} = superdeskApi.localization; - const localSuggests = get(this.props.localSuggests, 'length') > 0 ? - this.props.localSuggests : []; - const suggests = get(this.props.suggests, 'length') > 0 ? - this.props.suggests : []; + const localSuggests = this.props.localSuggests ?? []; + const suggests = this.props.suggests ?? []; const tabLabels = [( { ))} - {get(localSuggests, 'length') === 0 && ( + {localSuggests.length === 0 && (
  • {gettext('No results found')}
  • @@ -218,14 +220,12 @@ export class AddGeoLookupResultsPopUp extends React.Component { key={index} location={suggest} onClick={this.props.onChange.bind(null, suggest)} - active={( - index + - get(this.props.localSuggests, 'length', 0) + - 1 - ) === this.state.activeOptionIndex} + active={(index + localSuggests.length + 1) + === this.state.activeOptionIndex + } /> ))} - {get(suggests, 'length') === 0 && ( + {suggests.length === 0 && (
  • {gettext('No results found')}
  • diff --git a/client/components/GeoLookupInput/LocationItem.tsx b/client/components/GeoLookupInput/LocationItem.tsx index b1dda096b..01165d1f4 100644 --- a/client/components/GeoLookupInput/LocationItem.tsx +++ b/client/components/GeoLookupInput/LocationItem.tsx @@ -16,6 +16,7 @@ interface IProps { active?: boolean; readOnly?: boolean; onRemoveLocation?(): void; + languageCode?: string; } export class LocationItem extends React.PureComponent { @@ -23,6 +24,10 @@ export class LocationItem extends React.PureComponent { const {gettext} = superdeskApi.localization; const location = this.props.location; + const locationNameComputed = this.props.languageCode + ? location.translations?.name[`name:${this.props.languageCode}`] ?? location.name + : location.name; + return ( { {(this.props.readOnly || this.props.onRemoveLocation == null) ? null : ( diff --git a/client/components/GeoLookupInput/LocationLookupResultItem.tsx b/client/components/GeoLookupInput/LocationLookupResultItem.tsx index 66124d541..f61147531 100644 --- a/client/components/GeoLookupInput/LocationLookupResultItem.tsx +++ b/client/components/GeoLookupInput/LocationLookupResultItem.tsx @@ -9,6 +9,7 @@ interface IProps { onClick?(): void; active?: boolean; location: Partial; + languageCode?: string; } export class LocationLookupResultItem extends React.PureComponent { @@ -23,7 +24,7 @@ export class LocationLookupResultItem extends React.PureComponent { )} > - {getLocationsShortName(this.props.location)} + {getLocationsShortName(this.props.location, this.props.languageCode)} ); diff --git a/client/components/GeoLookupInput/index.tsx b/client/components/GeoLookupInput/index.tsx index 7248ac540..58112660b 100644 --- a/client/components/GeoLookupInput/index.tsx +++ b/client/components/GeoLookupInput/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {AddGeoLookupInput, GeoLookupInputComponent} from './AddGeoLookupInput'; +import {AddGeoLookupInput} from './AddGeoLookupInput'; import {LineInput, Label} from '../UI/Form'; import {ILocation} from '../../interfaces'; @@ -17,14 +17,14 @@ interface IProps { readOnly?: boolean; boxed?: boolean; noMargin?: boolean; - refNode?: React.RefObject; + refNode?: React.RefObject; language?: string; onChange(field: string, value?: Partial): void; onFocus?(): void; popupContainer?(): HTMLElement; onPopupOpen?(): void; onPopupClose?(): void; - showAddLocationForm(props: any): void; + showAddLocationForm?(props: any): Promise; } export class GeoLookupInput extends React.PureComponent { diff --git a/client/components/UI/Form/LineInput.tsx b/client/components/UI/Form/LineInput.tsx index 89785f43c..aa1d4a1ba 100644 --- a/client/components/UI/Form/LineInput.tsx +++ b/client/components/UI/Form/LineInput.tsx @@ -2,13 +2,32 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +interface IProps { + required?: boolean; + invalid?: boolean; + readOnly?: boolean; + boxed?: boolean; + isSelect?: boolean; + noMargin?: boolean; + noLabel?: boolean; + withButton?: boolean; + labelLeft?: boolean; + labelLeftAuto?: boolean; + hint?: string; + message?: string; + borderBottom?: boolean; + onClick?: (e: any) => void; + halfWidth?: boolean; + children?: React.ReactNode; + className?: string; +} + /** * @ngdoc react * @name LineInput * @description Component to style input component in a line-input style */ export const LineInput = ({ - children, required, invalid, readOnly, @@ -19,13 +38,14 @@ export const LineInput = ({ withButton, labelLeft, labelLeftAuto, + borderBottom = true, + halfWidth, + children, hint, message, className, - borderBottom, onClick, - halfWidth, -}) => ( +}: IProps): JSX.Element => (
    {message}
    }
    ); - -export const LineInputProps = { - required: PropTypes.bool, - invalid: PropTypes.bool, - readOnly: PropTypes.bool, - boxed: PropTypes.bool, - isSelect: PropTypes.bool, - noMargin: PropTypes.bool, - noLabel: PropTypes.bool, - withButton: PropTypes.bool, - labelLeft: PropTypes.bool, - labelLeftAuto: PropTypes.bool, - hint: PropTypes.string, - message: PropTypes.string, - borderBottom: PropTypes.bool, - onClick: PropTypes.func, - halfWidth: PropTypes.bool, -}; - -export const LineInputDefaultProps = { - required: false, - invalid: false, - readOnly: false, - boxed: false, - isSelect: false, - noMargin: false, - noLabel: false, - withButton: false, - labelLeft: false, - labelLeftAuto: false, - borderBottom: true, - halfWidth: false, -}; - -LineInput.propTypes = { - children: PropTypes.node, - className: PropTypes.string, - ...LineInputProps, -}; - -LineInput.defaultProps = {...LineInputDefaultProps}; diff --git a/client/components/UI/List/ActionMenu.tsx b/client/components/UI/List/ActionMenu.tsx index 0a171d6bf..e337c6c2b 100644 --- a/client/components/UI/List/ActionMenu.tsx +++ b/client/components/UI/List/ActionMenu.tsx @@ -1,24 +1,24 @@ import React from 'react'; -import PropTypes from 'prop-types'; import classNames from 'classnames'; +interface IProps { + children: React.ReactNode; + row?: boolean; + className?: string; +} /** * @ngdoc react * @name ActionMenu * @description Component to encapsulate three-dot action menu in list a item */ -export const ActionMenu = ({children, row}) => ( +export const ActionMenu = ({children, className, row = true}: IProps) => (
    {children}
    ); - -ActionMenu.propTypes = { - children: PropTypes.node.isRequired, - row: PropTypes.bool, -}; - -ActionMenu.defaultProps = {row: true}; diff --git a/client/components/UI/Popup/Content.tsx b/client/components/UI/Popup/Content.tsx index ee4f10a6c..76c7c778d 100644 --- a/client/components/UI/Popup/Content.tsx +++ b/client/components/UI/Popup/Content.tsx @@ -2,12 +2,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +interface IProps { + children?: React.ReactNode; + className?: string; + noPadding?: boolean; +} /** * @ngdoc react * @name Content * @description Component to hold contents of a popup */ -const Content = ({children, className, noPadding}) => ( +const Content = ({children, className, noPadding}: IProps) => (
    (
    ); -Content.propTypes = { - children: PropTypes.node, - className: PropTypes.string, - noPadding: PropTypes.bool, -}; - -Content.defaultProps = {noPadding: false}; - export default Content; diff --git a/client/components/fields/editor/Location.tsx b/client/components/fields/editor/Location.tsx index 4a6ca1b8a..6761bde71 100644 --- a/client/components/fields/editor/Location.tsx +++ b/client/components/fields/editor/Location.tsx @@ -22,7 +22,7 @@ export class EditorFieldLocation extends React.PureComponent { {...this.props} field={field} label={this.props.label ?? gettext('Location')} - value={get(this.props.item, field, this.props.defaultValue)} + value={this.props.item[field] ?? this.props.defaultValue} disableSearch={!this.props.enableExternalSearch} disableAddLocation={this.props.disableAddLocation} readOnly={this.props.disabled} diff --git a/client/interfaces.ts b/client/interfaces.ts index 07a5e666a..0b1188fd2 100644 --- a/client/interfaces.ts +++ b/client/interfaces.ts @@ -389,6 +389,7 @@ export interface IEventLocation { lat: number; lon: number; }; + translations?: ILocation['translations']; } export interface IItemAction { diff --git a/client/utils/locations.ts b/client/utils/locations.ts index 781aa88bc..ebd06844b 100644 --- a/client/utils/locations.ts +++ b/client/utils/locations.ts @@ -137,9 +137,9 @@ export function formatLocationToAddress(item: Partial | IEventLocatio formattedAddress; } -export function getLocationsShortName(location: Partial) { +export function getLocationsShortName(location: Partial, languageCode?: string) { const formattedAddress = formatLocationToAddress(location); - const title = location.address?.title ?? location.name; + const title = location.translations?.name?.[`name:${languageCode}`] ?? location.address?.title ?? location.name; return title ? `${title}, ${formattedAddress}` :