Add collapsable interface and implementation example (#906)

Introduces the concept of a Collapsable element, harmonizing and paving the way for future elements we want to be collapsed / expanded.

The example implementation addresses #904 and improves the objective display.
---------
Co-authored-by: Tobias Koch <tobias.koch@qbic.uni-tuebingen.de>

user-interface/frontend/themes/datamanager/components/all.css

@@ -204,6 +204,33 @@
 .simple-paragraph {
   font-size: var(--lumo-font-size-m);
   margin-bottom: var(--lumo-space-m);
-  max-width: 40em;
+}
+
+.background-color-grey {
+  background-color: #F9F9F9;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.padding-left-01 {
+  padding-left: 1.5rem
+}
+
+.padding-right-01 {
+  padding-right: 1.5rem
+}
+
+.line-height-01 {
+  line-height: 1.7rem;
+}
+
+.max-width-55rem {
+  max-width: 55rem;
+}
+
+.box-corner-radius-small {
+  border-radius: var(--lumo-space-s);
 }
 

user-interface/src/main/java/life/qbic/datamanager/views/general/Collapsible.java

@@ -0,0 +1,27 @@
+package life.qbic.datamanager.views.general;
+
+/**
+ * <b>Collapsable Element Interface</b>
+ *
+ * <p>Collapsable elements can be collapsed into a concise view representation of an element,
+ * such as e.g. a large text box with information.</p>
+ *
+ * @since 1.7.0
+ */
+public interface Collapsible {
+
+  /**
+   * Collapse the element into its concise view format
+   *
+   * @since 1.7.0
+   */
+  void collapse();
+
+  /**
+   * Expand the element into its expanded view format
+   *
+   * @since 1.7.0
+   */
+  void expand();
+
+}

user-interface/src/main/java/life/qbic/datamanager/views/general/CollapsibleDetails.java

@@ -0,0 +1,40 @@
+package life.qbic.datamanager.views.general;
+
+import com.vaadin.flow.component.details.Details;
+import com.vaadin.flow.component.html.Div;
+import java.util.Objects;
+
+/**
+ * <b>Collapsable Details</b>
+ *
+ * <p>Implementation of the {@link Collapsible} interface for the Vaadin component
+ * {@link Details}.</p>
+ * <p>
+ * For the Vaadin {@link Details} component, it would not be necessary to provide a wrapper object. However
+ * the interface gives a lot of flexibility to add collapsable elements wrapping other custom
+ * components while exposing a unified behaviour.
+ * <p>
+ * Also we favor a more declarative and readable object API, like {@link #collapse()} or {@link #expand() } over
+ * e.g. {@link Details#setOpened(boolean)}.
+ *
+ * @since 1.7.0
+ */
+public class CollapsibleDetails extends Div implements Collapsible  {
+
+  private final Details details;
+
+  public CollapsibleDetails(Details details) {
+    this.details = Objects.requireNonNull(details);
+    add(details);
+  }
+
+  @Override
+  public void collapse() {
+    this.details.setOpened(false);
+  }
+
+  @Override
+  public void expand() {
+    this.details.setOpened(true);
+  }
+}

user-interface/src/main/java/life/qbic/datamanager/views/projects/project/info/ProjectSummaryComponent.java

@@ -7,6 +7,7 @@
 import com.vaadin.flow.component.ComponentEventListener;
 import com.vaadin.flow.component.avatar.AvatarGroup;
 import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.details.Details;
 import com.vaadin.flow.component.html.Anchor;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Span;
@@ -36,6 +37,7 @@
 import life.qbic.datamanager.views.Context;
 import life.qbic.datamanager.views.TagFactory;
 import life.qbic.datamanager.views.account.UserAvatar.UserAvatarGroupItem;
+import life.qbic.datamanager.views.general.CollapsibleDetails;
 import life.qbic.datamanager.views.general.DetailBox;
 import life.qbic.datamanager.views.general.Heading;
 import life.qbic.datamanager.views.general.IconLabel;
@@ -93,11 +95,10 @@
 @SpringComponent
 public class ProjectSummaryComponent extends PageArea {
 
-  private static final String DATE_TIME_PATTERN = "dd.MM.yyyy HH:mm";
   public static final String FIXED_MEDIUM_WIDTH_CSS = "fixed-medium-width";
   public static final String PROJECT_EDIT_CANCEL_CONFIRMATION_MESSAGE = "project.edit.cancel-confirmation.message";
   public static final String PROJECT_UPDATED_SUCCESS = "project.updated.success";
-
+  private static final String DATE_TIME_PATTERN = "dd.MM.yyyy HH:mm";
   private final transient ProjectInformationService projectInformationService;
   private final transient ROCreateBuilder roCrateBuilder;
   private final transient TempDirectory tempDirectory;
@@ -480,12 +481,24 @@ private void buildDesignSection(ProjectOverview projectInformation, Project proj
     projectDesignSection.setHeader(
         new SectionHeader(new SectionTitle("Project Design"), new ActionBar(editButton)));
     var content = new SectionContent();
+
+    // Set up the objective details
+    var details = new Details();
+    details.removeAll();
+    var objectiveTitle = Heading.withIconAndText(VaadinIcon.MODAL_LIST.create(), "Objective");
+    var objective = new SimpleParagraph(project.getProjectIntent().objective().objective());
+    details.setSummary(objectiveTitle);
+    details.add(objective);
+    var collapsableDetails = new CollapsibleDetails(details);
+    collapsableDetails.collapse();
+    collapsableDetails.addClassNames("background-color-grey", "padding-left-01", "padding-right-01",
+        "line-height-01", "max-width-55rem", "text-justify", "box-corner-radius-small");
+
     content.add(
         Heading.withIconAndText(VaadinIcon.NOTEBOOK.create(), "Project ID and Title"));
     content.add(new SimpleParagraph("%s - %s".formatted(projectInformation.projectCode(),
         projectInformation.projectTitle())));
-    content.add(Heading.withIconAndText(VaadinIcon.MODAL_LIST.create(), "Objective"));
-    content.add(new SimpleParagraph(project.getProjectIntent().objective().objective()));
+    content.add(collapsableDetails);
     projectDesignSection.setContent(content);
   }