Fix device description detail

megorei · Oct 30, 2024 · b64b2e8 · b64b2e8
1 parent 0753a38
commit b64b2e8
Show file tree

Hide file tree

Showing 24 changed files with 1,557 additions and 1,241 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -847,7 +847,7 @@ GEM
       rails (>= 3.0)
       rake (>= 0.8.7)
     yard (0.9.36)
-    zeitwerk (2.7.0)
+    zeitwerk (2.6.18)
 
 PLATFORMS
   x86_64-linux

diff --git a/app/assets/stylesheets/global-styles/package-mods/react-datepicker.scss b/app/assets/stylesheets/global-styles/package-mods/react-datepicker.scss
@@ -0,0 +1,10 @@
+.react-datepicker-wrapper {
+  width: 100%;
+  .react-datepicker__input-container input {
+    width: 100%;
+    border-radius: 4px;
+    box-shadow: inset 0 2px 2px $gray-100;
+    border: 1px solid $gray-200;
+    padding: 6px 10px 5px;
+  }
+}
diff --git a/app/assets/stylesheets/global-styles/package-mods/react-select.scss b/app/assets/stylesheets/global-styles/package-mods/react-select.scss
@@ -82,8 +82,8 @@
   }
 
   &__value-container {
-    @extend .flex-nowrap;
     @extend .text-nowrap;
+    @extend .gap-1;
   }
 
   &__value-container.chemotion-select__value-container--is-multi {
@@ -96,11 +96,6 @@
     @extend .m-0;
   }
 
-  &__value-container {
-    @extend .gap-1;
-    @extend .d-flex;
-  }
-
   &__single-value .badge {
     @extend .d-block
   }
@@ -159,3 +154,65 @@
     @include fa-based-remove-icon;
   }
 }
+
+.select-in-inputgroup-text {
+  &__control {
+    @extend .d-flex;
+    @extend .justify-content-between;
+    @extend .align-items-center;
+    @extend .gap-1;
+    min-height: auto !important;
+
+    &:hover {
+      border-color: $form-select-border-color;
+    }
+
+    &--menu-is-open {
+      border-color: color("primary");
+    }
+
+    &:focus, &--is-focused {
+      border-color: $input-focus-border-color;
+      outline: 0;
+      @if $enable-shadows {
+        @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: $form-select-focus-box-shadow;
+      }
+    }
+  }
+
+  &__menu {
+    padding: $form-select-padding-y 0;
+    box-shadow: none;
+    z-index: 10;
+  }
+
+  &__option {
+    padding: $form-select-padding-y $form-select-padding-x;
+
+    &--is-selected, &--is-selected.chemotion-select__option--is-focused {
+      background-color: color("primary");
+    }
+
+    &--is-focused {
+      background-color: $input-focus-border-color;
+    }
+  }
+}
+
+.select-in-inputgroup-text__control {
+  min-height: 30px !important;
+}
+
+.select-in-inputgroup-text__menu-list {
+  @extend .bg-white;
+}
+
+.select-in-inputgroup-text__option, .select-in-inputgroup-text__menu-list {
+  width: 160px;
+  white-space: normal;
+  text-align: left;
+  overflow-x: hidden;
+}
diff --git a/app/assets/stylesheets/global-styles/utilities.scss b/app/assets/stylesheets/global-styles/utilities.scss
@@ -5,4 +5,5 @@
 @import "utilities/detail-card";
 @import "utilities/tabs-container-with-borders";
 @import "utilities/modal";
+@import "utilities/form";
 @import "utilities/draggable-modal";
diff --git a/app/assets/stylesheets/global-styles/utilities/detail-card.scss b/app/assets/stylesheets/global-styles/utilities/detail-card.scss
@@ -2,7 +2,7 @@
   > .card-header {
     @extend .text-bg-primary;
   }
-  &.detail-card--unsaved .card-header {
+  &.detail-card--unsaved > .card-header {
     @extend .text-bg-info;
   }
 }

diff --git a/app/assets/stylesheets/global-styles/utilities/dnd.scss b/app/assets/stylesheets/global-styles/utilities/dnd.scss
@@ -7,6 +7,15 @@
   @extend .text-center;
 }
 
+.dnd-zone-list-item {
+  @extend .w-100;
+  @extend .border;
+  @extend .border-dashed;
+  @extend .border-3;
+  @extend .p-3;
+  @extend .text-start;
+}
+
 .dnd-zone-over {
   @extend .border-primary;
 }

diff --git a/app/assets/stylesheets/global-styles/utilities/form.scss b/app/assets/stylesheets/global-styles/utilities/form.scss
@@ -0,0 +1,20 @@
+.multiple-row-fields {
+  @extend .d-flex;
+  @extend .justify-content-between;
+  @extend .align-items-end;
+  @extend .flex-nowrap;
+  @extend .gap-2;
+  @extend .mb-4;
+}
+
+.multiple-row-fields.components:last-child {
+  @extend .mb-3;
+}
+
+.multiple-row-fields > div {
+  flex: 1;
+}
+
+.multiple-row-fields .dnd-zone + button {
+  @extend .my-auto;
+}
diff --git a/app/assets/stylesheets/global-styles/vendor.scss b/app/assets/stylesheets/global-styles/vendor.scss
@@ -17,3 +17,4 @@
 @import "package-mods/calendar";
 @import "package-mods/react-svg-file-zoom-pan";
 @import "package-mods/react-select";
+@import "package-mods/react-datepicker";
diff --git a/app/packs/src/apps/mydb/elements/details/deviceDescriptions/DeviceDescriptionDetails.js b/app/packs/src/apps/mydb/elements/details/deviceDescriptions/DeviceDescriptionDetails.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext } from 'react';
 import {
-  Panel, ButtonToolbar, Button, Tabs, Tab, Tooltip, OverlayTrigger
+  ButtonToolbar, Button, Tabs, Tab, Tooltip, OverlayTrigger, Card
 } from 'react-bootstrap';
 
 import PropertiesForm from './propertiesTab/PropertiesForm';
@@ -135,95 +135,112 @@ const DeviceDescriptionDetails = ({ toggleFullScreen }) => {
     if (deviceDescription.isNew || hasNoAnalysis) { return null; }
 
     return (
-      <Button bsStyle="info" disabled={!deviceDescriptionIsValid()} onClick={() => handleExportAnalyses()}>
+      <Button
+        variant="info"
+        disabled={!deviceDescriptionIsValid()}
+        onClick={() => handleExportAnalyses()}
+      >
         Download Analysis
-        {' '}
-        {deviceDescriptionsStore.analysis_start_export ? (
-          <span>
-            <i className="fa fa-spin fa-spinner" />
-          </span>
-        ) : null}
+        {deviceDescriptionsStore.analysis_start_export && <i className="fa fa-spin fa-spinner ms-1" />}
       </Button>
     );
   }
 
   const deviceDescriptionHeader = () => {
-    const saveBtnDisplay = deviceDescription.isEdited ? '' : 'none';
     const titleTooltip = formatTimeStampsOfElement(deviceDescription || {});
     const defCol = currentCollection && currentCollection.is_shared === false
       && currentCollection.is_locked === false && currentCollection.label !== 'All' ? currentCollection.id : null;
 
-    const copyButton = (deviceDescription.can_copy && !deviceDescription.isNew) ? (
-      <CopyElementModal
-        element={deviceDescription}
-        defCol={defCol}
-      />
-    ) : null;
-
     return (
-      <div>
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="deviceDescriptionDates">{titleTooltip}</Tooltip>}>
-          <span>
-            <i className="icon-device_description" />
-            &nbsp; <span>{deviceDescription.name}</span> &nbsp;
-          </span>
-        </OverlayTrigger>
-        <ElementCollectionLabels element={deviceDescription} placement="right" />
-        <HeaderCommentSection element={deviceDescription} />
-        <ConfirmClose el={deviceDescription} />
-        <OverlayTrigger
-          placement="bottom"
-          overlay={<Tooltip id="saveDeviceDescription">Save device description</Tooltip>}
-        >
-          <Button
-            bsStyle="warning"
-            bsSize="xsmall"
-            className="button-right"
-            onClick={() => handleSubmit()}
-            style={{ display: saveBtnDisplay }}
+      <div className="d-flex align-items-center justify-content-between">
+        <div className="d-flex align-items-center gap-2">
+          <OverlayTrigger placement="bottom" overlay={<Tooltip id="deviceDescriptionDates">{titleTooltip}</Tooltip>}>
+            <span>
+              <i className="icon-device_description me-1" />
+              {deviceDescription.name}
+            </span>
+          </OverlayTrigger>
+          <ElementCollectionLabels element={deviceDescription} placement="right" />
+          <HeaderCommentSection element={deviceDescription} />
+        </div>
+        <div className="d-flex align-items-center gap-1">
+          <PrintCodeButton element={deviceDescription} />
+          {!deviceDescription.isNew &&
+            <OpenCalendarButton isPanelHeader eventableId={deviceDescription.id} eventableType="DeviceDescription" />}
+          <OverlayTrigger
+            placement="bottom"
+            overlay={<Tooltip id="fullDeviceDescription">FullScreen</Tooltip>}
           >
-            <i className="fa fa-floppy-o " />
-          </Button>
-        </OverlayTrigger>
-        {copyButton}
-        <OverlayTrigger placement="bottom" overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}>
-          <Button bsStyle="info" bsSize="xsmall" className="button-right" onClick={() => toggleFullScreen()}>
-            <i className="fa fa-expand" />
-          </Button>
-        </OverlayTrigger>
-        <PrintCodeButton element={deviceDescription} />
-        {deviceDescription.isNew
-          ? null
-          : <OpenCalendarButton isPanelHeader eventableId={deviceDescription.id} eventableType="DeviceDescription" />}
+            <Button
+              variant="info"
+              size="xxsm"
+              onClick={() => toggleFullScreen()}
+            >
+              <i className="fa fa-expand" />
+            </Button>
+          </OverlayTrigger>
+          {deviceDescription.can_copy && !deviceDescription.isNew && (
+            <CopyElementModal
+              element={deviceDescription}
+              defCol={defCol}
+            />
+          )}
+          {deviceDescription.isEdited && (
+            <OverlayTrigger
+              placement="bottom"
+              overlay={<Tooltip id="saveDeviceDescription">Save device description</Tooltip>}
+            >
+              <Button
+                variant="warning"
+                size="xxsm"
+                onClick={() => handleSubmit()}
+              >
+                <i className="fa fa-floppy-o " />
+              </Button>
+            </OverlayTrigger>
+          )}
+          <ConfirmClose el={deviceDescription} />
+        </div>
       </div>
     );
   }
 
   return (
-    <Panel bsStyle={deviceDescription.isPendingToSave ? 'info' : 'primary'} className="eln-panel-detail">
-      <Panel.Heading>{deviceDescriptionHeader()}</Panel.Heading>
-      <Panel.Body>
+    <Card className={"detail-card" + (deviceDescription.isPendingToSave ? " detail-card--unsaved" : "")}>
+      <Card.Header>
+        {deviceDescriptionHeader()}
+      </Card.Header>
+      <Card.Body>
         <ElementDetailSortTab
           type="device_description"
           availableTabs={Object.keys(tabContentComponents)}
           tabTitles={tabTitles}
           onTabPositionChanged={onTabPositionChanged}
         />
-        <Tabs activeKey={activeTab} onSelect={key => handleTabChange(key)} id="deviceDescriptionDetailsTab">
-          {tabContents}
-        </Tabs>
-        <ButtonToolbar>
-          <Button bsStyle="primary" onClick={() => DetailActions.close(deviceDescription)}>
+        <div className="tabs-container--with-borders">
+          <Tabs
+            activeKey={activeTab}
+            onSelect={key => handleTabChange(key)}
+            id="deviceDescriptionDetailsTab"
+            unmountOnExit
+          >
+            {tabContents}
+          </Tabs>
+        </div>
+        <CommentModal element={deviceDescription} />
+      </Card.Body>
+      <Card.Footer>
+        <ButtonToolbar className="gap-2">
+          <Button variant="primary" onClick={() => DetailActions.close(deviceDescription)}>
             Close
           </Button>
-          <Button bsStyle="warning" disabled={!deviceDescriptionIsValid()} onClick={() => handleSubmit()}>
+          <Button variant="warning" disabled={!deviceDescriptionIsValid()} onClick={() => handleSubmit()}>
             {submitLabel}
           </Button>
           {downloadAnalysisButton()}
         </ButtonToolbar>
-        <CommentModal element={deviceDescription} />
-      </Panel.Body>
-    </Panel>
+      </Card.Footer>
+    </Card>
   );
 }