feat: Wellplate change size after creation

app/api/chemotion/wellplate_api.rb

@@ -145,6 +145,8 @@ class WellplateAPI < Grape::API # rubocop:disable Metrics/ClassLength
         optional :wells, type: Array
         optional :readout_titles, type: Array
         requires :container, type: Hash
+        requires :height, type: Integer, values: 0..100
+        requires :width, type: Integer, values: 0..100
         optional :segments, type: Array, desc: 'Segments'
       end
       route_param :id do
@@ -180,8 +182,8 @@ class WellplateAPI < Grape::API # rubocop:disable Metrics/ClassLength
         optional :readout_titles, type: Array
         requires :collection_id, type: Integer
         requires :container, type: Hash
-        optional :height, type: Integer, default: 8, values: 1..100
-        optional :width, type: Integer, default: 12, values: 1..100
+        optional :height, type: Integer, default: 8, values: 0..100
+        optional :width, type: Integer, default: 12, values: 0..100
         optional :segments, type: Array, desc: 'Segments'
       end
       post do

app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js

@@ -17,6 +17,7 @@ import WellplateList from 'src/apps/mydb/elements/details/wellplates/listTab/Wel
 import WellplateProperties from 'src/apps/mydb/elements/details/wellplates/propertiesTab/WellplateProperties';
 import WellplateDetailsContainers from
   'src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers';
+// eslint-disable-next-line import/no-named-as-default
 import WellplateDetailsAttachments from
   'src/apps/mydb/elements/details/wellplates/attachmentsTab/WellplateDetailsAttachments';
 import PrintCodeButton from 'src/components/common/PrintCodeButton';
@@ -156,6 +157,9 @@ export default class WellplateDetails extends Component {
       case 'readoutTitles':
         wellplate.readout_titles = value;
         break;
+      case 'size':
+        if (wellplate.size !== wellplate.originalSize) wellplate.changed = !wellplate.changed;
+        break;
       default:
         break;
     }
@@ -241,6 +245,15 @@ export default class WellplateDetails extends Component {
   wellplateHeader(wellplate) {
     const saveBtnDisplay = wellplate.isEdited || wellplate.isNew ? '' : 'none';
     const datetp = formatTimeStampsOfElement(wellplate || {});
+    const saveTooltip = (
+      <Tooltip placement="left" className="in" id="tooltip-bottom">
+        Save Wellplate
+        <br />
+        {wellplate.size !== 0 && (wellplate.isNew || wellplate.originalSize === 0)
+          ? 'The size of this wellplate cannot be changed after saving.'
+          : ''}
+      </Tooltip>
+    );
 
     return (
       <div>
@@ -255,7 +268,7 @@ export default class WellplateDetails extends Component {
         <ElementCollectionLabels element={wellplate} placement="right" />
         <HeaderCommentSection element={wellplate} />
         <ConfirmClose el={wellplate} />
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="saveWellplate">Save Wellplate</Tooltip>}>
+        <OverlayTrigger placement="bottom" overlay={saveTooltip}>
           <Button
             bsStyle="warning"
             bsSize="xsmall"
@@ -300,7 +313,7 @@ export default class WellplateDetails extends Component {
     const {
       wellplate, showWellplate, visible
     } = this.state;
-    const printButtonDisabled = wellplate.width > 12;
+    const printButtonDisabled = wellplate.width > 12 || wellplate.size === 0;
     const readoutTitles = wellplate.readout_titles;
     const exportButton = (wellplate && wellplate.isNew)
       ? null : <ExportSamplesBtn type="wellplate" id={wellplate.id} />;

app/packs/src/apps/mydb/elements/details/wellplates/propertiesTab/CustomSizeModal.js

@@ -34,7 +34,7 @@ export default class CustomSizeModal extends Component {
     const { handleClose, wellplate, triggerUIUpdate } = this.props;
     const { height, width } = this.state;
     wellplate.changeSize(width, height);
-    triggerUIUpdate();
+    triggerUIUpdate({ type: 'size' });
     handleClose();
   }
 

app/packs/src/apps/mydb/elements/details/wellplates/propertiesTab/WellplateProperties.js

@@ -125,7 +125,7 @@ export default class WellplateProperties extends Component {
     const { name, description } = wellplate;
 
     const { showCustomSizeModal } = this.state;
-
+    const customModalDisabled = !wellplate.is_new && wellplate.originalSize > 0;
     return (
       <div>
         <CustomSizeModal
@@ -163,7 +163,7 @@ export default class WellplateProperties extends Component {
                 >
                   <Button
                     className="create-own-size-button"
-                    disabled={!wellplate.is_new}
+                    disabled={customModalDisabled}
                     onClick={() => this.showCustomSizeModal()}
                   >
                     <i className="fa fa-braille" />

app/packs/src/apps/mydb/elements/details/wellplates/propertiesTab/WellplateSizeDropdown.js

@@ -11,15 +11,24 @@ class Option {
   }
 
   get label() {
-    return `${this.height * this.width} (${this.width}x${this.height})`;
+    const size = this.height * this.width;
+    if (size === 0) {
+      return 'not yet chosen';
+    }
+    return `${size} (${this.width}x${this.height})`;
   }
 }
 
 export default class WellplateSizeDropdown extends Component {
   constructor(props) {
     super(props);
 
-    const rawOptions = [new Option(24, 16), new Option(12, 8), new Option(6, 4), new Option(4, 3)];
+    const rawOptions = [
+      new Option(0, 0),
+      new Option(24, 16),
+      new Option(12, 8),
+      new Option(6, 4),
+      new Option(4, 3)];
 
     const options = rawOptions.map((option) => (
       { value: option, label: option.label }
@@ -54,7 +63,7 @@ export default class WellplateSizeDropdown extends Component {
   render() {
     const { wellplate } = this.props;
 
-    const isNew = wellplate.is_new;
+    const shouldBeDisabled = !wellplate.is_new && wellplate.originalSize > 0;
     const { options } = this.state;
 
     return (
@@ -63,7 +72,7 @@ export default class WellplateSizeDropdown extends Component {
         value={this.selectOptionOfWellplate(wellplate)}
         onChange={(option) => this.changeSizeOption(option)}
         options={options}
-        disabled={!isNew}
+        disabled={shouldBeDisabled}
       />
     );
   }

app/packs/src/models/Wellplate.js

@@ -7,10 +7,11 @@ import Segment from 'src/models/Segment';
 export default class Wellplate extends Element {
   constructor(args) {
     super(args);
+    this.originalSize = this.width * this.height;
     this.#initEmptyWells();
   }
 
-  static buildEmpty(collectionId, width = 12, height = 8) {
+  static buildEmpty(collectionId, width = 0, height = 0) {
     return new Wellplate(
       {
         collection_id: collectionId,
@@ -130,8 +131,8 @@ export default class Wellplate extends Element {
   }
 
   #initEmptyWells() {
-    if (!this.isNew) return
-    
+    if (!this.isNew && this.originalSize > 0) return;
+
     this.wells = Array(this.size).fill({});
     this.wells = this.wells.map((well, i) => this.#initWellWithPositionByIndex(well, i));
     this._checksum = this.checksum();