From 04cfb0b2f39ef58afb496d668959c7b37d2c7582 Mon Sep 17 00:00:00 2001
From: Johannes HEINZL <jh.heinzl@gmail.com>
Date: Tue, 7 Feb 2023 23:40:33 +0100
Subject: [PATCH] Adds image view and link component for clinical assistance
 and config improvements.

---
 package.json                                  |  4 ++-
 .../components/ControlPropertiesContainer.jsx |  2 +-
 src/form-builder/components/Property.jsx      | 14 +++++++---
 src/form-builder/reducers/translations.js     |  2 +-
 styles/common/_base.scss                      | 10 +++++++
 webpack.dev-form-controls.config.js           | 26 +++++++++++++++++++
 6 files changed, 52 insertions(+), 6 deletions(-)
 create mode 100644 webpack.dev-form-controls.config.js

diff --git a/package.json b/package.json
index ea48c090..feb810f7 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,9 @@
     "eslintFix": "eslint --ext .js --ext .jsx ./src ./test --fix",
     "start": "webpack-dev-server --hot --progress --colors",
     "ci": "yarn run clean && yarn run build && yarn run compress",
-    "watch": "webpack --watch"
+    "watch": "webpack --watch",
+    "watch-dev": "webpack --watch --config webpack.dev.config.js",
+    "watch-dev-form-controls": "webpack --watch --config webpack.dev-form-controls.config.js"
   },
   "author": "",
   "devDependencies": {
diff --git a/src/form-builder/components/ControlPropertiesContainer.jsx b/src/form-builder/components/ControlPropertiesContainer.jsx
index ca34983d..925f9b64 100644
--- a/src/form-builder/components/ControlPropertiesContainer.jsx
+++ b/src/form-builder/components/ControlPropertiesContainer.jsx
@@ -72,7 +72,7 @@ export class ControlPropertiesContainer extends Component {
 
   displayPropertyEditor() {
     const { selectedControl, selectedControl: { id, concept } } = this.props;
-    if (concept || selectedControl.type === 'section') {
+    if (concept || selectedControl.type === 'section' || selectedControl.type === 'imageView') {
       return (
         <PropertyEditor
           metadata={selectedControl}
diff --git a/src/form-builder/components/Property.jsx b/src/form-builder/components/Property.jsx
index ea82f5a5..83d7d144 100644
--- a/src/form-builder/components/Property.jsx
+++ b/src/form-builder/components/Property.jsx
@@ -20,8 +20,8 @@ export class Property extends Component {
         ><i aria-hidden="true" className="fa fa-code" /></button>);
       case 'dropdown':
         return (
-          <select
-            className="fr"
+         <select
+            className="fr property"
             defaultValue={this.props.value}
             key={`${this.props.name}:${this.props.id}`}
             onChange={(e) => this.updateProperty(e, elementType)}
@@ -40,6 +40,14 @@ export class Property extends Component {
           onChange={(e) => this.updateProperty(e, elementType)}
           type="text"
         />);
+      case 'number':
+        return (<input
+          className="fr property"
+          defaultValue={this.props.value}
+          key={`${this.props.name}:${this.props.id}`}
+          onChange={(e) => this.updateProperty(e, elementType)}
+          type="number"
+        />);
       default:
         return (<input
           checked={this.props.value}
@@ -52,7 +60,7 @@ export class Property extends Component {
 
   updateProperty(e, elementType) {
     const { name } = this.props;
-    if (elementType === 'text' || elementType === 'dropdown') {
+    if (elementType === 'text' || elementType === 'dropdown' || elementType === 'number') {
       this.props.onPropertyUpdate({ [name]: e.target.value });
     } else {
       this.props.onPropertyUpdate({ [name]: e.target.checked });
diff --git a/src/form-builder/reducers/translations.js b/src/form-builder/reducers/translations.js
index 35786055..1ec55e34 100644
--- a/src/form-builder/reducers/translations.js
+++ b/src/form-builder/reducers/translations.js
@@ -45,7 +45,7 @@ const translations = (store = {}, action) => {
   switch (action.type) {
     case 'GENERATE_TRANSLATIONS': {
       const { type, label } = action.control;
-      if (type === 'label' || type === 'section') {
+      if (type === 'label' || type === 'section' || type === 'imageView' || type === 'link') {
         return Object.assign({}, store,
           { labels: getLabelTranslations(store.labels, (label || action.control)) });
       } else if (type === 'table') {
diff --git a/styles/common/_base.scss b/styles/common/_base.scss
index 15b7fe71..7b938c1e 100644
--- a/styles/common/_base.scss
+++ b/styles/common/_base.scss
@@ -180,6 +180,16 @@ em {
 .fl, .left {float: left;}
 .fr, .right {float: right;}
 
+.property {
+  width: 100px;
+  background-color: $bahmniPageBg;
+  border: 1px solid $gray400;
+  @include box-shadow-for-section;
+  border-radius: 3px;
+  display: inline-block;
+  position: relative;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
diff --git a/webpack.dev-form-controls.config.js b/webpack.dev-form-controls.config.js
new file mode 100644
index 00000000..40dd4514
--- /dev/null
+++ b/webpack.dev-form-controls.config.js
@@ -0,0 +1,26 @@
+'use strict';
+
+let config = require('./webpack.dev.config');
+const fs = require('fs');
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const doesDirectoryExist = fs.existsSync(path.join(__dirname, '../form-controls'));
+
+if (!doesDirectoryExist) {
+  throw "Attention: form-controls repository must exist on the same level as implementer-interface repository for this webpack config!";
+}
+
+config.plugins.push(
+  new CopyWebpackPlugin([
+    {
+      from: path.join(__dirname, '../form-controls/dist'), to: path.join(__dirname, 'node_modules/bahmni-form-controls/dist'),
+    }
+  ],
+    {
+      copyUnmodified: true
+    }
+  )
+);
+
+module.exports = config;