Bug 4211: added ListView and BoatClassListView + fixed styling

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/desktop/places/user/profile/sailorprofiletab/SailorProfileOverviewImpl.ui.xml

@@ -19,7 +19,7 @@
     </ui:style>
     <g:HTMLPanel addStyleNames="{res.mediaCss.grid} {res.mainCss.spacermarginbottommediumsmall}">
 
-        <div class="{res.mediaCss.column} {res.mediaCss.small12} {res.mainCss.spacermargintopmediumsmall}">
+        <div class="{res.mediaCss.column} {res.mediaCss.small12} {res.mediaCss.medium12} {res.mediaCss.large12} {res.mainCss.spacermargintopmediumsmall}">
             <c:CellTable ui:field="sailorProfilesTable" addStyleNames="{style.table}">
                 <c:emptyTableWidget>
                     <g:Label text="{i18n.noDataFound}" addStyleNames="{style.empty}" />

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/editable/EditableCompetitorSuggestedMultiSelection.ui.xml

@@ -10,7 +10,7 @@
         .toggleEditButton {
         position: absolute;
         right: 2em;
-        top: 1em;
+        top: 0.9em;
         }
 
     </ui:style>

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/listview/BoatClassListView.java

@@ -0,0 +1,19 @@
+package com.sap.sailing.gwt.home.shared.partials.listview;
+
+import java.util.function.Function;
+
+import com.google.gwt.user.client.ui.IsWidget;
+import com.sap.sailing.domain.common.dto.BoatClassDTO;
+import com.sap.sailing.gwt.home.shared.partials.multiselection.SuggestedMultiSelectionBoatClassItemDescription;
+
+public class BoatClassListView extends ListView<BoatClassDTO> {
+
+    public BoatClassListView() {
+        super(new Function<BoatClassDTO, IsWidget>() {
+            @Override
+            public IsWidget apply(BoatClassDTO t) {
+                return new SuggestedMultiSelectionBoatClassItemDescription(t);
+            }
+        });
+    }
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/listview/ListView.java

@@ -0,0 +1,82 @@
+package com.sap.sailing.gwt.home.shared.partials.listview;
+
+import java.util.List;
+import java.util.function.Function;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.DivElement;
+import com.google.gwt.dom.client.SpanElement;
+import com.google.gwt.dom.client.Style.Position;
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.FlowPanel;
+import com.google.gwt.user.client.ui.HasText;
+import com.google.gwt.user.client.ui.IsWidget;
+import com.google.gwt.user.client.ui.Widget;
+import com.sap.sailing.domain.common.dto.BoatClassDTO;
+
+public class ListView<T> extends Composite implements HasText {
+
+    private static SuggestedMultiSelectionUiBinder uiBinder = GWT.create(SuggestedMultiSelectionUiBinder.class);
+
+    interface SuggestedMultiSelectionUiBinder extends UiBinder<Widget, ListView<?>> {
+    }
+
+    @UiField
+    SpanElement headerTitleUi;
+
+    @UiField
+    FlowPanel itemContainerUi;
+
+    @UiField
+    DivElement listContainerUi;
+
+    private final Function<T, IsWidget> itemProducer;
+
+    public ListView(Function<T, IsWidget> itemProducer) {
+        this.itemProducer = itemProducer;
+        initWidget(uiBinder.createAndBindUi(this));
+        headerTitleUi.setInnerText("Title");
+    }
+
+    public void addListItem(T val) {
+        GWT.log("adding list item: " + ((BoatClassDTO) val).getName());
+        Widget item = itemProducer.apply(val).asWidget();
+
+        itemContainerUi.add(item);
+
+        // TODO: move to CSS file
+        if (itemContainerUi.getElement().getChild(0) != item.getElement()) {
+            item.getElement().getStyle().setProperty("borderTop", "1px solid #ddd");
+        }
+        item.getElement().getStyle().setPaddingTop(0.333333333333333333, Unit.EM);
+        item.getElement().getStyle().setPaddingBottom(0.333333333333333333, Unit.EM);
+        item.getElement().getStyle().setPaddingLeft(0.333333333333333333, Unit.EM);
+
+        DOM.getChild(item.getElement(), 1).getStyle().setPosition(Position.RELATIVE);
+        DOM.getChild(item.getElement(), 1).getStyle().setTop(-0.333333333333333333, Unit.EM);
+
+        if (DOM.getChild(item.getElement(), 2) != null) {
+            DOM.getChild(item.getElement(), 2).getStyle().setPosition(Position.RELATIVE);
+            DOM.getChild(item.getElement(), 2).getStyle().setTop(-0.333333333333333333, Unit.EM);
+        }
+    }
+
+    public void setItems(List<T> competitors) {
+        itemContainerUi.clear();
+        competitors.forEach(c -> addListItem(c));
+    }
+
+    @Override
+    public String getText() {
+        return headerTitleUi.getInnerText();
+    }
+
+    @Override
+    public void setText(String text) {
+        headerTitleUi.setInnerText(text);
+    }
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/listview/ListView.ui.xml

@@ -0,0 +1,23 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"
+    xmlns:sp="urn:import:com.sap.sailing.gwt.home.shared.partials">
+    <ui:with field="i18n" type="com.sap.sailing.gwt.ui.client.StringMessages" />
+    <ui:with field="res" type="com.sap.sailing.gwt.common.client.SharedResources" />
+    <ui:with field="local_res"
+        type="com.sap.sailing.gwt.home.shared.partials.multiselection.SuggestedMultiSelectionResources" />
+
+    <ui:style>
+
+    </ui:style>
+    <g:HTMLPanel>
+        <div ui:field="listContainerUi" class="{local_res.css.suggestions}">
+            <div class="{local_res.css.suggestionsHeader}">
+                <span class="{local_res.css.suggestionsHeaderTitle}" ui:field="headerTitleUi" />
+            </div>
+            <div class="{local_res.css.suggestionsContent}">
+                <g:FlowPanel addStyleNames="{local_res.css.suggestionsContentTable}"
+                    ui:field="itemContainerUi" />
+            </div>
+        </div>
+    </g:HTMLPanel>
+</ui:UiBinder> 

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/multiselection/SuggestedMultiSelectionBoatClassItemDescription.java

@@ -10,7 +10,7 @@ import com.google.gwt.user.client.ui.Widget;
 import com.sap.sailing.domain.common.dto.BoatClassDTO;
 import com.sap.sailing.gwt.common.client.BoatClassImageResolver;
 
-class SuggestedMultiSelectionBoatClassItemDescription extends Widget {
+public class SuggestedMultiSelectionBoatClassItemDescription extends Widget {
 
     private static LocalUiBinder uiBinder = GWT.create(LocalUiBinder.class);
 
@@ -20,7 +20,7 @@ class SuggestedMultiSelectionBoatClassItemDescription extends Widget {
     @UiField DivElement imageUi;
     @UiField SpanElement nameUi;
     
-    SuggestedMultiSelectionBoatClassItemDescription(BoatClassDTO boatClass) {
+    public SuggestedMultiSelectionBoatClassItemDescription(BoatClassDTO boatClass) {
         setElement(uiBinder.createAndBindUi(this));
         imageUi.getStyle().setBackgroundImage("url('" + BoatClassImageResolver.getBoatClassIconResource(
                 boatClass.getName()).getSafeUri().asString() + "')");

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/places/user/profile/sailorprofile/EditSailorProfile.java

@@ -9,6 +9,7 @@ import com.google.gwt.user.client.ui.Widget;
 import com.sap.sailing.gwt.common.client.SharedResources;
 import com.sap.sailing.gwt.home.shared.partials.editable.EditableCompetitorSuggestedMultiSelection;
 import com.sap.sailing.gwt.home.shared.partials.editable.InlineEditLabel;
+import com.sap.sailing.gwt.home.shared.partials.listview.BoatClassListView;
 import com.sap.sailing.gwt.home.shared.places.user.profile.sailorprofile.domain.SailorProfileEntry;
 import com.sap.sailing.gwt.ui.client.FlagImageResolver;
 
@@ -35,10 +36,13 @@ public class EditSailorProfile extends Composite implements SharedSailorProfileV
     EditableCompetitorSuggestedMultiSelection competitorSelectionUi;
     @UiField
     InlineEditLabel titleUi;
+    @UiField
+    BoatClassListView boatClassesUi;
 
     public EditSailorProfile(SharedSailorProfileView.Presenter presenter, FlagImageResolver flagImageResolver) {
         competitorSelectionUi = new EditableCompetitorSuggestedMultiSelection(presenter, flagImageResolver);
         initWidget(uiBinder.createAndBindUi(this));
+        boatClassesUi.setText("Boatclasses");
         // TODO hide notificationsTextUi if the user's mail address is already verified
     }
 
@@ -50,5 +54,6 @@ public class EditSailorProfile extends Composite implements SharedSailorProfileV
     public void setEntry(SailorProfileEntry entry) {
         competitorSelectionUi.setSelectedItems(entry.getCompetitors());
         titleUi.setText(entry.getName());
+        boatClassesUi.setItems(entry.getBoatclasses());
     }
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/places/user/profile/sailorprofile/EditSailorProfile.ui.xml

@@ -1,6 +1,7 @@
 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"
             xmlns:um="urn:import:com.sap.sailing.gwt.home.shared.usermanagement.decorator"
+            xmlns:lv="urn:import:com.sap.sailing.gwt.home.shared.partials.listview"
             xmlns:ms="urn:import:com.sap.sailing.gwt.home.shared.partials.editable">
     <ui:with field="i18n" type="com.sap.sailing.gwt.ui.client.StringMessages" />
     <ui:with field="res" type="com.sap.sailing.gwt.common.client.SharedResources" />
@@ -15,14 +16,22 @@
             font-size: 1.866666666666667em;
             font-weight: bold;
             color: #333;
-            margin-top: 10px;
-            margin-left: 50px;
+            margin-top: 0.3333333em;
+            margin-left: 3em;
+        }
+        .competitors {
+            margin-left: 3em;
+        }
+        .boatclasses {
+            margin-left: 3em;
         }
     </ui:style>
     <g:HTMLPanel addStyleNames="{res.mediaCss.grid} {res.mainCss.spacermarginbottommediumsmall}">
         <ms:InlineEditLabel ui:field="titleUi" addStyleNames="{style.header}" />
-        <div class="{res.mediaCss.column} {res.mediaCss.small12} {res.mediaCss.medium6} {res.mainCss.spacermargintopmediumsmall}">
-            <ms:EditableCompetitorSuggestedMultiSelection ui:field="competitorSelectionUi"/>
+        <div class="{res.mediaCss.column} {res.mainCss.spacermargintopmediumsmall}">
+            <ms:EditableCompetitorSuggestedMultiSelection ui:field="competitorSelectionUi" addStyleNames="{res.mediaCss.column} {res.mainCss.spacermargintopmediumsmall} {res.mediaCss.small6}"/>
+            <lv:BoatClassListView ui:field="boatClassesUi" addStyleNames="{res.mediaCss.column} {res.mainCss.spacermargintopmediumsmall} {res.mediaCss.small6}"/>
+            
         </div>
     </g:HTMLPanel>
 </ui:UiBinder>