Merge pull request #322 from City-of-Helsinki/develop

Develop

src/app/App.js

@@ -32,6 +32,9 @@ import type {ApiToken} from '../auth/types';
 import type {UserGroups} from '$src/usersPermissions/types';
 import type {RootState} from '../root/types';
 
+const url = window.location.toString();
+const IS_DEVELOPMENT_URL = url.includes('ninja') || url.includes('localhost');
+
 type Props = {
  apiError: ApiError,
  apiToken: ApiToken,
@@ -173,10 +176,11 @@ class App extends Component<Props, State> {
  userGroups,
  } = this.props;
  const {displaySideMenu} = this.state;
+ const appStyle = (IS_DEVELOPMENT_URL) ? 'app-dev' : 'app';
 
  if (isEmpty(user) || isEmpty(apiToken)) {
  return (
- <div className={'app'}>
+ <div className={appStyle}>
  <ReduxToastr
  newestOnTop={true}
  position="bottom-right"
@@ -224,7 +228,7 @@ class App extends Component<Props, State> {
  };
 
  return(
- <div className={'app'}>
+ <div className={appStyle}>
  <ApiErrorModal size={Sizes.LARGE}
  data={apiError}
  isOpen={Boolean(apiError)}

src/app/_app.scss

@@ -65,3 +65,73 @@
  }
  }
 }
+
+.app-dev {
+ margin-top: rem-calc(60px);
+ width: 100%;
+ display: block;
+ overflow: hidden;
+ min-height: 100%;
+ background: url('../assets/images/dev-background.png');
+ background-repeat: repeat;
+
+ [type="radio"] {
+ margin-bottom: 0;
+ transition: none;
+
+ &:disabled {
+ opacity: 0.5;
+ }
+ }
+
+ &__content {
+ flex: 1;
+ display: flex;
+ }
+ .wrapper {
+ display: flex;
+ position: relative;
+ width: 100%;
+ margin: 0 auto;
+ max-width: $content-max-width;
+ }
+
+ input:-ms-input-placeholder {
+ color: $medium-dark-gray;
+ opacity: 1;
+ }
+
+ input::placeholder {
+ color: $medium-dark-gray;
+ opacity: 1;
+ }
+
+ textarea:-ms-input-placeholder {
+ color: $medium-dark-gray;
+ opacity: 1;
+ }
+
+ textarea::placeholder {
+ color: $medium-dark-gray;
+ opacity: 1;
+ }
+
+ a,
+ button {
+ @include focus();
+
+ &:hover {
+ outline: none;
+ }
+ }
+
+ input[type='text'],
+ select,
+ textarea {
+ @include focusInput();
+
+ &:hover {
+ outline: none;
+ }
+ }
+}

src/plotSearch/components/PlotSearchPage.js

@@ -58,6 +58,7 @@ import {
  getContentBasicInformation,
  getContentApplication,
  clearUnsavedChanges,
+ cleanTargets,
 } from '$src/plotSearch/helpers';
 
 import PlotSearchInfo from './plotSearchSections/plotSearchInfo/PlotSearchInfo';
@@ -344,7 +345,7 @@ class PlotSearchPage extends Component<Props, State> {
  if(isApplicationFormDirty) {
  payload = {...payload, application_base: {...applicationFormValues}};
  }
-
+ payload = cleanTargets(payload);
  payload.identifier = currentPlotSearch.identifier;
  editPlotSearch(payload);
  }

src/plotSearch/components/plotSearchSections/basicInfo/PlotSearchSite.js

@@ -12,6 +12,8 @@ import Collapse from '$components/collapse/Collapse';
 import FormText from '$components/form/FormText';
 import FormTextTitle from '$components/form/FormTextTitle';
 import ExternalLink from '$components/links/ExternalLink';
+import WarningContainer from '$components/content/WarningContainer';
+import WarningField from '$components/form/WarningField';
 import {
  formatDate,
  getFieldOptions,
@@ -101,7 +103,7 @@ class PlotSearchSite extends PureComponent<Props, State> {
  plotSearchSite, 
  } = this.props;
  const payload = {
- value: plotSearchSite.plan_unit,
+ value: plotSearchSite.plan_unit.id,
  };
  fetchPlanUnitAttributes(payload);
  fetchPlanUnit(payload);
@@ -118,12 +120,16 @@ class PlotSearchSite extends PureComponent<Props, State> {
  planUnitAttributes,
  } = this.props;
 
- const planUnitAttributesByValue = get(planUnitAttributes, plotSearchSite.plan_unit);
- const currentPlanUnit = get(planUnit, plotSearchSite.plan_unit);
+ const planUnitAttributesByValue = get(planUnitAttributes, plotSearchSite.plan_unit.id);
+ const currentPlanUnit = get(planUnit, plotSearchSite.plan_unit.id);
  const planUnitIntendedUseOptions = getFieldOptions(planUnitAttributesByValue, 'plan_unit_intended_use');
  const planUnitStateOptions = getFieldOptions(planUnitAttributesByValue, 'plan_unit_state');
  const planUnitTypeOptions = getFieldOptions(planUnitAttributesByValue, 'plan_unit_type');
  const plotDivisionStateOptions = getFieldOptions(planUnitAttributesByValue, 'plot_division_state');
+ const isDeleted = get(plotSearchSite, 'is_master_plan_unit_deleted');
+ const isNewer = get(plotSearchSite, 'is_master_plan_unit_newer');
+ const label = get(plotSearchSite, 'message_label');
+
  return (
  <Column large={12}>
  <Collapse
@@ -136,6 +142,12 @@ class PlotSearchSite extends PureComponent<Props, State> {
  {(isFetchingPlanUnitAttributes || isFetchingPlanUnit) &&
  <LoaderWrapper className='relative-overlay-wrapper'><Loader isLoading={true} /></LoaderWrapper>
  }
+ {(isDeleted || isNewer) && <WarningContainer style={{position: 'absolute', right: '15px', top: '-5px'}}>
+ <WarningField
+ meta={{warning: label}}
+ showWarning={(isDeleted || isNewer)}
+ />
+ </WarningContainer>}
  {(currentPlanUnit) && <Fragment>
  <Column small={6} medium={3} large={3}>
  <FormTextTitle>
@@ -188,7 +200,7 @@ class PlotSearchSite extends PureComponent<Props, State> {
  {'Asemakaavan viimeisin käsittelypvm. selite'}
  </FormTextTitle>
  <FormText>
- {formatDate(get(currentPlanUnit, 'detailed_plan_latest_processing_date_note')) || '-'}
+ {get(currentPlanUnit, 'detailed_plan_latest_processing_date_note') || '-'}
  </FormText>
  </Column>
  <Column small={6} medium={3} large={2}>

src/plotSearch/components/plotSearchSections/basicInfo/PlotSearchSiteEdit.js

@@ -22,6 +22,8 @@ import FormText from '$components/form/FormText';
 import FormTextTitle from '$components/form/FormTextTitle';
 import ExternalLink from '$components/links/ExternalLink';
 import {getUsersPermissions} from '$src/usersPermissions/selectors';
+import WarningContainer from '$components/content/WarningContainer';
+import WarningField from '$components/form/WarningField';
 import {
  receiveCollapseStates,
  receiveIsSaveClicked,
@@ -46,6 +48,7 @@ import {
  getPlanUnit,
  getIsFetchingPlanUnit,
  getIsFetchingPlanUnitAttributes,
+ getCurrentPlotSearch,
 } from '$src/plotSearch/selectors';
 import type {Attributes} from '$src/types';
 import type {UsersPermissions as UsersPermissionsType} from '$src/usersPermissions/types';
@@ -154,6 +157,7 @@ type Props = {
  planUnitAttributes: Attributes,
  planUnit: Object,
  change: Function,
+ currentPlotSearch: Object,
 }
 
 type State = {
@@ -225,10 +229,9 @@ class PlotSearchSiteEdit extends Component<Props, State> {
  field,
  } = this.props;
  const planUnitNewValue = get(toPlotSearch, 'value');
- change(`${field}.plan_unit`, planUnitNewValue);
+ change(`${field}.plan_unit_id`, planUnitNewValue);
  }
 
-
  render(){
  const { 
  field,
@@ -241,6 +244,8 @@ class PlotSearchSiteEdit extends Component<Props, State> {
  isFetchingPlanUnit,
  planUnit, 
  planUnitAttributes,
+ currentPlotSearch,
+ index,
  } = this.props;
  const {
  planUnitNew,
@@ -254,6 +259,10 @@ class PlotSearchSiteEdit extends Component<Props, State> {
  const planUnitStateOptions = getFieldOptions(planUnitAttributesByValue, 'plan_unit_state');
  const planUnitTypeOptions = getFieldOptions(planUnitAttributesByValue, 'plan_unit_type');
  const plotDivisionStateOptions = getFieldOptions(planUnitAttributesByValue, 'plot_division_state');
+ const currentTarget = currentPlotSearch.targets[index];
+ const isDeleted = get(currentTarget, 'is_master_plan_unit_deleted');
+ const isNewer = get(currentTarget, 'is_master_plan_unit_newer');
+ const label = get(currentTarget, 'message_label');
 
  return (
  <Collapse
@@ -265,6 +274,12 @@ class PlotSearchSiteEdit extends Component<Props, State> {
  onToggle={this.handleCollapseToggle}
  >
  <Row>
+ {(isDeleted || isNewer) && <WarningContainer style={{position: 'absolute', right: '35px', top: '-5px'}}>
+ <WarningField
+ meta={{warning: label}}
+ showWarning={(isDeleted || isNewer)}
+ />
+ </WarningContainer>}
  <Column small={6} medium={6} large={6} style={{paddingBottom: 10}}>
  <FormTextTitle>
  {'Kohteentunnus'}
@@ -278,8 +293,8 @@ class PlotSearchSiteEdit extends Component<Props, State> {
  <div style={{display: 'none'}}>
  <FormField
  disableTouched={isSaveClicked}
- fieldAttributes={get(attributes, 'targets.child.children.plan_unit')}
- name={`${field}.plan_unit`}
+ fieldAttributes={get(attributes, 'targets.child.children.plan_unit_id')}
+ name={`${field}.plan_unit_id`}
  />
  </div>
  <FormTextTitle>
@@ -353,7 +368,7 @@ class PlotSearchSiteEdit extends Component<Props, State> {
  {'Asemakaavan viimeisin käsittelypvm. selite'}
  </FormTextTitle>
  <FormText>
- {formatDate(get(planUnitByValue, 'detailed_plan_latest_processing_date_note')) || '-'}
+ {get(planUnitByValue, 'detailed_plan_latest_processing_date_note') || '-'}
  </FormText>
  </Column>
  <Column small={6} medium={3} large={2}>
@@ -451,6 +466,7 @@ export default flowRight(
  planUnit: getPlanUnit(state),
  isFetchingPlanUnit: getIsFetchingPlanUnit(state),
  isFetchingPlanUnitAttributes: getIsFetchingPlanUnitAttributes(state),
+ currentPlotSearch: getCurrentPlotSearch(state),
  };
  },
  {

src/plotSearch/helpers.js

@@ -140,3 +140,16 @@ export const getPlanUnitFromObjectKeys = (planUnit: Object, index: any): ?Object
  else
  return null;
 };
+
+/**
+ * clean targets
+ * @param {Object} plan_unit
+ * @returns {Object}
+ */
+export const cleanTargets = (payload: Object): Object => {
+ const targets = payload.targets.map(target => ({
+ plan_unit_id: target.plan_unit_id,
+ target_type: target.target_type,
+ }));
+ return payload = {...payload, targets: targets};
+};