Skip to content

Commit

Permalink
chore: update remaining
Browse files Browse the repository at this point in the history
  • Loading branch information
eirikhaugstulen committed Nov 8, 2023
1 parent c42160c commit e868c0b
Show file tree
Hide file tree
Showing 12 changed files with 80 additions and 64 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -557,7 +557,7 @@ When('you create a copy of the working list', () => {

cy.intercept('POST', '**/trackedEntityInstanceFilters**').as('newTrackerFilter');

cy.get('button')
cy.get('[data-test="dhis2-uicore-button"]')
.contains('Save')
.click();

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import * as React from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
import { PolygonField as UIPolygonField } from 'capture-ui';
import { Dialog, DialogTitle } from '@material-ui/core';
import { Modal, ModalTitle } from '@dhis2/ui';
import { typeof orientations } from '../../../New';

const getStyles = () => ({
Expand Down Expand Up @@ -44,11 +44,12 @@ class PolygonFieldPlain extends React.Component<Props> {
// $FlowFixMe[cannot-spread-inexact] automated comment
<UIPolygonField
mapDialog={
<Dialog
<Modal
classes={this.dialogClasses}
large
>
<DialogTitle key="title">{dialogLabel}</DialogTitle>
</Dialog>
<ModalTitle key="title">{dialogLabel}</ModalTitle>
</Modal>
}
{...passOnProps}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
import React, { PureComponent, type ComponentType } from 'react';
import i18n from '@dhis2/d2-i18n';
import { withStyles } from '@material-ui/core/styles';
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
import { Button } from '@dhis2/ui';
import { Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
import type { Props } from './downloadDialog.types';

const getStyles = () => ({
Expand Down Expand Up @@ -82,21 +81,21 @@ class DownloadDialogPlain extends PureComponent<Props & CssClasses> {
const { open, onClose } = this.props;
return (
<span>
<Dialog
open={!!open}
<Modal
hide={!open}
onClose={onClose}
fullWidth
position={'center'}
>
<DialogTitle>{i18n.t('Download with current filters')}</DialogTitle>
<DialogContent>
<ModalTitle>{i18n.t('Download with current filters')}</ModalTitle>
<ModalContent>
{this.renderButtons()}
</DialogContent>
<DialogActions>
</ModalContent>
<ModalActions>
<Button onClick={onClose} color="primary">
{i18n.t('Close')}
</Button>
</DialogActions>
</Dialog>
</ModalActions>
</Modal>
</span>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import i18n from '@dhis2/d2-i18n';
import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@material-ui/core';
import { Button } from '@dhis2/ui';
import { Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';

const getStyles = () => ({
buttonContainer: {
Expand All @@ -30,17 +29,15 @@ const DeleteConfirmationDialogPlain = (props: Props) => {
} = props;

return (
<Dialog
open={open}
<Modal
hide={!open}
onClose={onClose}
>
<DialogTitle>{i18n.t('Delete view')}</DialogTitle>
<DialogContent>
<DialogContentText>
{i18n.t('Do you really want to delete the \'{{templateName}}\' view?', { templateName })}
</DialogContentText>
</DialogContent>
<DialogActions
<ModalTitle>{i18n.t('Delete view')}</ModalTitle>
<ModalContent>
{i18n.t('Do you really want to delete the \'{{templateName}}\' view?', { templateName })}
</ModalContent>
<ModalActions
className={classes.buttonContainer}
>
<Button onClick={onClose}>
Expand All @@ -49,8 +46,8 @@ const DeleteConfirmationDialogPlain = (props: Props) => {
<Button onClick={onDeleteTemplate} primary>
{i18n.t('Confirm')}
</Button>
</DialogActions>
</Dialog>
</ModalActions>
</Modal>
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import i18n from '@dhis2/d2-i18n';
import { DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
import { Button } from '@dhis2/ui';
import { Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';

const getStyles = () => ({
buttonContainer: {
Expand All @@ -22,9 +21,9 @@ const ExistingTemplateContentsPlain = (props: Props) => {
const { onSaveTemplate, onClose, classes } = props;
return (
<React.Fragment>
<DialogTitle>{i18n.t('Save')}</DialogTitle>
<DialogContent />
<DialogActions
<ModalTitle>{i18n.t('Save')}</ModalTitle>
<ModalContent />
<ModalActions
className={classes.buttonContainer}
>
<Button onClick={onClose}>
Expand All @@ -33,7 +32,7 @@ const ExistingTemplateContentsPlain = (props: Props) => {
<Button onClick={onSaveTemplate} primary>
{i18n.t('Save')}
</Button>
</DialogActions>
</ModalActions>
</React.Fragment>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// @flow
import * as React from 'react';
import { Dialog } from '@material-ui/core';
import { Modal } from '@dhis2/ui';
import { ExistingTemplateContents } from './ExistingTemplateContents.component';

type Props = {
Expand All @@ -17,15 +17,15 @@ export const ExistingTemplateDialog = (props: Props) => {
} = props;

return (
<Dialog
open={open}
<Modal
hide={!open}
onClose={onClose}
fullWidth
position={'center'}
>
<ExistingTemplateContents
onSaveTemplate={onSaveTemplate}
onClose={onClose}
/>
</Dialog>
</Modal>
);
};
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
// @flow
import * as React from 'react';
import { colors, Button } from '@dhis2/ui';
import { colors, Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
import { withStyles } from '@material-ui/core/styles';
import i18n from '@dhis2/d2-i18n';
import { DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
import { NewTemplateTextField } from './NewTemplateTextField.component';

const getStyles = (theme: Theme) => ({
Expand Down Expand Up @@ -46,8 +45,8 @@ const NewTemplateContentsPlain = (props: Props) => {

return (
<React.Fragment>
<DialogTitle>{i18n.t('Save As view')}</DialogTitle>
<DialogContent>
<ModalTitle>{i18n.t('Save As view')}</ModalTitle>
<ModalContent>
<NewTemplateTextField
onBlur={nameBlurHandler}
className={classes.input}
Expand All @@ -64,8 +63,8 @@ const NewTemplateContentsPlain = (props: Props) => {
>
{error}
</div>
</DialogContent>
<DialogActions
</ModalContent>
<ModalActions
className={classes.buttonContainer}
>
<Button onClick={onClose}>
Expand All @@ -74,7 +73,7 @@ const NewTemplateContentsPlain = (props: Props) => {
<Button onClick={handleSave} primary>
{i18n.t('Save')}
</Button>
</DialogActions>
</ModalActions>
</React.Fragment>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// @flow
import * as React from 'react';
import { Dialog } from '@material-ui/core';
import { Modal } from '@dhis2/ui';
import { NewTemplateContents } from './NewTemplateContents.component';

type Props = {
Expand All @@ -17,15 +17,15 @@ export const NewTemplateDialog = (props: Props) => {
} = props;

return (
<Dialog
open={open}
<Modal
hide={!open}
onClose={onClose}
fullWidth
position={'center'}
>
<NewTemplateContents
onSaveTemplate={onSaveTemplate}
onClose={onClose}
/>
</Dialog>
</Modal>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ export class CoordinateField extends React.Component<Props, State> {
key="map"
ref={(mapInstance) => { this.setMapInstance(mapInstance); }}
>
<WrappedLeafletSearch position="topright" inputPlaceholder="Search" closeResultsOnClick search={null} mapStateModifier={this.search} showMarker={false} />
<WrappedLeafletSearch position="topleft" inputPlaceholder="Search" closeResultsOnClick search={null} mapStateModifier={this.search} showMarker={false} />
<TileLayer
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@
width: 100%;
}

/*Really cant get this map to work - need to have a look*/
.dialogContent {
display: flex;
height: 600px;
Expand Down
37 changes: 29 additions & 8 deletions src/core_modules/capture-ui/PolygonField/PolygonField.component.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import i18n from '@dhis2/d2-i18n';
import { IconCheckmark16, IconLocation16, colors, Button } from '@dhis2/ui';
import { IconCheckmark16, IconLocation16, colors, Button, ModalContent, ModalActions } from '@dhis2/ui';
import L from 'leaflet';
import { Map, TileLayer, FeatureGroup, withLeaflet } from 'react-leaflet';
import { ReactLeafletSearch } from 'react-leaflet-search-unpolyfilled';
Expand Down Expand Up @@ -62,6 +62,8 @@ function coordsToFeatureCollection(coordinates): ?FeatureCollection {
}

export class PolygonField extends React.Component<Props, State> {
mapInstance: ?any;

static defaultProps = {
mapCenter: [51.505, -0.09],
}
Expand All @@ -75,6 +77,13 @@ export class PolygonField extends React.Component<Props, State> {
};
}

componentDidUpdate() {
// Invalidate map size to fix rendering bug
if (this.mapInstance && this.state.showMap) {
this.mapInstance.leafletElement.invalidateSize();
}
}

onFeatureGroupReady = (reactFGref: any, featureCollection: ?FeatureCollection) => {
if (featureCollection) {
const leafletGeoJSON = new L.GeoJSON(featureCollection);
Expand Down Expand Up @@ -134,19 +143,25 @@ export class PolygonField extends React.Component<Props, State> {
this.closeMap();
}

setMapInstance = (mapInstance: any) => {
this.mapInstance = mapInstance;
}

renderMapDialog = () => {
const clonedDialog = React.cloneElement(

// $FlowFixMe[incompatible-type] automated comment
this.props.mapDialog,
{ open: this.state.showMap, onClose: this.closeMap },
{ hide: !this.state.showMap, onClose: this.closeMap },

// $FlowFixMe[incompatible-use] automated comment
[...React.Children.toArray(this.props.mapDialog.props.children), (
<div className={defaultClasses.dialogContent} key="dialogContent">
{this.renderMap()}
<>
<ModalContent className={defaultClasses.dialogContent} key="dialogContent">
{this.renderMap()}
</ModalContent>
{this.renderDialogActions()}
</div>
</>
)],
);
return clonedDialog;
Expand All @@ -159,7 +174,13 @@ export class PolygonField extends React.Component<Props, State> {
const center = this.getCenter(featureCollection);
return (
<div className={defaultClasses.mapContainer}>
<Map zoom={zoom} center={center} className={defaultClasses.map} key="map">
<Map
zoom={zoom}
center={center}
className={defaultClasses.map}
key="map"
ref={(mapInstance) => { this.setMapInstance(mapInstance); }}
>
<WrappedLeafletSearch position="topleft" inputPlaceholder="Search" closeResultsOnClick />
<TileLayer
url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
Expand Down Expand Up @@ -190,7 +211,7 @@ export class PolygonField extends React.Component<Props, State> {
}

renderDialogActions = () => (
<div className={defaultClasses.dialogActionOuterContainer}>
<ModalActions className={defaultClasses.dialogActionOuterContainer}>
<div className={defaultClasses.dialogActionInnerContainer}>
{/* $FlowFixMe[prop-missing] automated comment */}
<Button secondary onClick={this.closeMap}>
Expand All @@ -203,7 +224,7 @@ export class PolygonField extends React.Component<Props, State> {
{i18n.t('Set area')}
</Button>
</div>
</div>
</ModalActions>
);

render() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
.mapContainer {
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}

.map {
Expand All @@ -30,9 +32,8 @@
}

.dialogContent {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 0px 24px 24px 24px;
height: 600px;
}

0 comments on commit e868c0b

Please sign in to comment.