Introduce stepper dialog

user-interface/front-end-components.md

@@ -1,7 +1,7 @@
 # Frontend components 
 Some visual aid of our custom view components structure.
 
-## Dialog window
+## App dialog
 
 ```mermaid
 ---
@@ -71,3 +71,70 @@ classDiagram
     }
 
 ```
+
+## Stepper dialog
+
+```mermaid
+
+classDiagram
+
+    StepperDialogFooter ..|> NavigationListener
+    StepperDialogFooter --> StepperDialog
+    StepperDialog --> NavigationListener
+    DialogStep ..|> Step
+    StepperDialog --> AppDialog
+    StepperDialog --> Step
+    StepDisplay ..|> NavigationListener
+    StepDisplay --> StepperDialog
+
+
+    class Step {
+        <<interface>>
+        + name() String
+        + content() Component
+        + userInput() UserInput
+    }
+
+    class AppDialog {
+
+    }
+
+    class DialogStep {
+
+    }
+
+    class StepperDialog {
+        AppDialog dialog
+        Step[] steps
+        + registerCancelAction(Action action)
+        + registerConfirmAction(Action action)
+        + registerNavigationListener(NavigationListener listener)
+        + setFooter(Component component)
+        + setHeader(Component component)
+        + setStepDisplay(Component component)
+        + cancel()
+        + confirm()
+        + next()
+        + previous()
+
+    }
+
+    class NavigationListener {
+        <<interface>>
+        + onNavigationUpdate(NavigationInfo info)
+    }
+
+    class StepDisplay {
+        StepperDialog dialog
+    }
+
+    class StepperDialogFooter {
+        DialogFooter currentState
+        StepperDialog dialog
+
+    }
+
+```
+
+
+

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

@@ -25,11 +25,16 @@ First some general property definitions
   --font-weight-medium: 500;
   --font-weight-semi-bold: 600;
   --font-weight-bold: 700;
+  --icon-color-primary: var(--lumo-primary-color);
   --icon-color-info: rgba(22, 118, 243, 1);
   --icon-color-error: rgba(255, 66, 56, 1);
   --icon-color-success: rgba(21, 193, 93, 1);
   --icon-color-warning: rgba(254, 201, 1, 1);
-  --icon-size-m: var(--lumo-icon-size-m);
+  --icon-color-default: rgba(28, 46, 69, 0.6);
+  --icon-size-xs: 1rem;
+  --icon-size-s: 1.25rem;
+  --icon-size-m: 1.5rem;
+  --icon-size-l: 2rem;
   --spacing-01: 0.125rem;
   --spacing-02: 0.25rem;
   --spacing-03: 0.5rem;
@@ -147,6 +152,16 @@ Body text
 Padding & gaps
 ***************************/
 
+.padding-left-right-02 {
+  padding-left: var(--spacing-02);
+  padding-right: var(--spacing-02);
+}
+
+.padding-left-right-03 {
+  padding-left: var(--spacing-03);
+  padding-right: var(--spacing-03);
+}
+
 .padding-left-right-04 {
   padding-left: var(--spacing-04);
   padding-right: var(--spacing-04);
@@ -187,6 +202,14 @@ Padding & gaps
   padding-bottom: var(--spacing-07);
 }
 
+.gap-02 {
+  gap: var(--spacing-02);
+}
+
+.gap-03 {
+  gap: var(--spacing-03);
+}
+
 .gap-04 {
   gap: var(--spacing-04);
 }
@@ -275,6 +298,35 @@ Dialog flavours
   color: var(--lumo-header-text-color);
 }
 
+.dialog-step-name-text {
+  font-size: var(--lumo-font-size-m);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lumo-line-height-xs);
+}
+
+.dialog-step-icon-arrow {
+  font-size: 12px;
+}
+
+.footer {
+  justify-content: flex-end;
+}
+
+.footer-intermediate {
+  justify-content: space-between;
+  width: 100%;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.border-bottom-solid {
+  border-bottom-style: solid;
+  border-bottom-color: rgba(26, 56, 96, 0.1);
+  border-bottom-width: 1px;
+}
+
 /***************************
 Buttons
  **************************/
@@ -301,10 +353,68 @@ Icons
   color: var(--icon-color-warning)
 }
 
+.icon-size-xs {
+  height: var(--icon-size-xs);
+  width: var(--icon-size-xs);
+}
+
+.icon-size-s {
+  height: var(--icon-size-s);
+  width: var(--icon-size-s);
+}
+
 .icon-size-m {
   height: var(--icon-size-m);
+  width: var(--icon-size-m);
+}
+
+.icon-size-l {
+  height: var(--icon-size-l);
+  width: var(--icon-size-l);
+}
+
+.round {
+  border-radius: 50%;
+}
+
+.icon-background-color-default {
+  background-color: var(--icon-color-default);
 }
 
+.icon-background-color-primary {
+  background-color: var(--icon-color-primary);
+}
+
+.icon-color-default {
+  color: var(--icon-color-default);
+}
+
+.icon-text-white {
+  color: white;
+}
+
+.icon-text-inner {
+  font-size: 0.875rem;
+}
+
+.icon-label-text {
+  font-size: 0.875rem;
+}
+
+.icon-label-text-color-default {
+  color: var(--icon-color-default);
+}
+
+.icon-label-text-color-primary {
+  color: var(--icon-color-primary);
+}
+
+.icon-content-center {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+}
 
 
 /****************************
@@ -315,11 +425,20 @@ Layout
   align-items: center;
 }
 
+.flex-align-items-bottom {
+  align-items: self-end;
+}
+
 .flex-horizontal {
   display: flex;
   flex-direction: row;
 }
 
+.flex-vertical {
+  display: flex;
+  flex-direction: column;
+}
+
 
 
 /****************************

user-interface/src/main/java/life/qbic/datamanager/views/demo/ComponentDemo.java

@@ -9,7 +9,9 @@
 import com.vaadin.flow.router.Route;
 import com.vaadin.flow.server.auth.AnonymousAllowed;
 import com.vaadin.flow.spring.annotation.UIScope;
+import java.util.ArrayList;
 import java.util.Arrays;
+import java.util.List;
 import java.util.Objects;
 import life.qbic.datamanager.views.general.dialog.AppDialog;
 import life.qbic.datamanager.views.general.dialog.DialogBody;
@@ -18,6 +20,10 @@
 import life.qbic.datamanager.views.general.dialog.DialogSection;
 import life.qbic.datamanager.views.general.dialog.InputValidation;
 import life.qbic.datamanager.views.general.dialog.UserInput;
+import life.qbic.datamanager.views.general.dialog.stepper.Step;
+import life.qbic.datamanager.views.general.dialog.stepper.StepperDisplay;
+import life.qbic.datamanager.views.general.dialog.stepper.StepperDialog;
+import life.qbic.datamanager.views.general.dialog.stepper.StepperDialogFooter;
 import life.qbic.datamanager.views.general.icon.IconFactory;
 import org.springframework.context.annotation.Profile;
 import org.springframework.lang.NonNull;
@@ -38,6 +44,8 @@
 public class ComponentDemo extends Div {
 
   public static final String HEADING_2 = "heading-2";
+  public static final String GAP_04 = "gap-04";
+  public static final String FLEX_VERTICAL = "flex-vertical";
   Div title = new Div("Data Manager - Component Demo");
 
   public ComponentDemo() {
@@ -50,6 +58,7 @@ public ComponentDemo() {
     add(dialogShowCase(AppDialog.medium(), "Medium Dialog Type"));
     add(dialogShowCase(AppDialog.large(), "Large Dialog Type"));
     add(dialogSectionShowCase());
+    add(stepperDialogShowCase(threeSteps(), "Three steps example"));
   }
 
   private static Div dialogSectionShowCase() {
@@ -88,7 +97,7 @@ private static Div fontsShowCase() {
     Div header = new Div("Body Font Styles");
     header.addClassName(HEADING_2);
     container.add(header);
-    container.addClassNames("flex-vertical", "gap-04");
+    container.addClassNames(FLEX_VERTICAL, GAP_04);
 
     Arrays.stream(BodyFontStyles.fontStyles).forEach(fontStyle -> {
       Div styleHeader = new Div();
@@ -109,6 +118,69 @@ private static Div fontsShowCase() {
     return container;
   }
 
+  private static Div stepperDialogShowCase(List<Step> steps, String dialogTitle) {
+    Div content = new Div();
+    Div title = new Div("Stepper Dialog");
+    title.addClassName(HEADING_2);
+    Button showDialog = new Button("Show Stepper");
+    AppDialog dialog = AppDialog.medium();
+
+    DialogHeader.with(dialog, dialogTitle);
+    StepperDialog stepperDialog = StepperDialog.create(dialog, steps);
+    StepperDialogFooter.with(stepperDialog);
+
+    StepperDisplay.with(stepperDialog, steps.stream().map(Step::name).toList());
+
+    showDialog.addClickListener(listener -> stepperDialog.open());
+
+    content.add(title);
+    content.add(showDialog);
+    content.addClassNames(FLEX_VERTICAL, GAP_04);
+
+    Div confirmBox = new Div("Click the button and press 'Cancel' or 'Save'");
+    dialog.registerConfirmAction(() -> {
+      confirmBox.setText("Stepper dialog has been confirmed");
+      dialog.close();
+    });
+
+    dialog.registerCancelAction(() -> {
+      confirmBox.setText("Stepper dialog has been cancelled");
+      dialog.close();
+    });
+
+    content.add(confirmBox);
+
+    return content;
+  }
+
+  private static List<Step> threeSteps() {
+    List<Step> steps = new ArrayList<>();
+    for (int step= 0; step < 3; step++) {
+      int stepNumber = step + 1;
+      steps.add(new Step() {
+
+        final ExampleUserInput userInput = new ExampleUserInput("example step " + stepNumber );
+
+
+        @Override
+        public String name() {
+          return "Step " + stepNumber;
+        }
+
+        @Override
+        public com.vaadin.flow.component.Component component() {
+          return userInput;
+        }
+
+        @Override
+        public UserInput userInput() {
+          return userInput;
+        }
+      });
+    }
+    return steps;
+  }
+
   private static Div dialogShowCase(AppDialog dialog, String dialogType) {
     Div content = new Div();
     Div title = new Div();
@@ -142,7 +214,7 @@ private static Div dialogShowCase(AppDialog dialog, String dialogType) {
     });
 
     content.add(showDialog, confirmBox);
-    content.addClassNames("flex-vertical", "gap-04");
+    content.addClassNames(FLEX_VERTICAL, GAP_04);
     return content;
   }