3204 Add expanded information for each reviewer

This commit is contained in:
Andreas Svanberg 2023-12-07 10:48:10 +01:00
parent 625cc68153
commit 6d076b2b77
3 changed files with 52 additions and 20 deletions

@ -53,30 +53,35 @@
Managing targets for <strong wicket:id="period"></strong>.
</p>
<div class="card mb-3" wicket:id="reviewers">
<div class="row g-0" wicket:id="reviewer">
<div class="col-auto">
<img class="img-fluid rounded-start profile-picture-md" wicket:id="profile_image">
</div>
<div class="col-auto">
<div class="card-body">
<h4 class="card-title" wicket:id="name">[John Doe]</h4>
<wicket:container wicket:id="reviewer">
<div class="row g-0">
<div class="col-auto">
<img class="img-fluid rounded-start profile-picture-md" wicket:id="profile_image">
</div>
</div>
<div class="col">
<form class="card-body row justify-content-end" wicket:id="form">
<div class="col-auto" wicket:id="feedback"></div>
<div class="col-auto">
<input type="number" class="form-control form-control-sm" min="0" wicket:id="target">
<div class="col-auto">
<div class="card-body">
<h4 class="card-title" wicket:id="name">[John Doe]</h4>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-success btn-sm">Set target for selected period</button>
</div>
</form>
</div>
<div class="col">
<form class="card-body row justify-content-end" wicket:id="form">
<div class="col-auto" wicket:id="feedback"></div>
<div class="col-auto">
<input type="number" class="form-control form-control-sm" min="0" wicket:id="target">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-success btn-sm">Set target for selected period</button>
</div>
</form>
</div>
<a class="col-auto w-64-px align-self-center" wicket:id="expand">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><clipPath><path fill="#00f" fill-opacity=".514" d="m-7 1024.36h34v34h-34z"/></clipPath><clipPath><path fill="#aade87" fill-opacity=".472" d="m-6 1028.36h32v32h-32z"/></clipPath></defs><path d="m345.44 248.29l-194.29 194.28c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744l171.91-171.91-171.91-171.9c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.29 194.28c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373" transform="matrix(.03541-.00013.00013.03541 2.98 3.02)" fill="#4d4d4d"/></svg>
</a>
</div>
<div class="col-auto w-64-px align-self-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><clipPath><path fill="#00f" fill-opacity=".514" d="m-7 1024.36h34v34h-34z"/></clipPath><clipPath><path fill="#aade87" fill-opacity=".472" d="m-6 1028.36h32v32h-32z"/></clipPath></defs><path d="m345.44 248.29l-194.29 194.28c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744l171.91-171.91-171.91-171.9c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.29 194.28c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373" transform="matrix(.03541-.00013.00013.03541 2.98 3.02)" fill="#4d4d4d"/></svg>
<div wicket:id="expanded" class="card-body">
<p>A very long note. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</wicket:container>
</div>
</div>
</div>

@ -1,7 +1,10 @@
package se.su.dsv.scipro.admin.pages;
import org.apache.wicket.AttributeModifier;
import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.form.AjaxFormComponentUpdatingBehavior;
import org.apache.wicket.ajax.markup.html.AjaxLink;
import org.apache.wicket.feedback.FencedFeedbackPanel;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.basic.Label;
@ -149,6 +152,21 @@ public class AdminReviewerCapacityManagementPage extends AbstractAdminProjectPag
add(new UserProfileImage("profile_image", reviewer, UserProfileImage.Size.MEDIUM));
add(new UserLabel("name", reviewer));
add(new AssignTargetForm("form", reviewer));
ExpandedInformation expandedInformation = new ExpandedInformation("expanded", reviewer);
expandedInformation.setOutputMarkupPlaceholderTag(true);
expandedInformation.setVisible(false);
add(expandedInformation);
AjaxLink<Object> expandToggle = new AjaxLink<>("expand") {
@Override
public void onClick(AjaxRequestTarget target) {
expandedInformation.setVisible(!expandedInformation.isVisible());
target.add(expandedInformation);
target.add(this);
}
};
expandToggle.add(AttributeModifier.append("class", () -> expandedInformation.isVisible() ? "rotate-90" : ""));
expandToggle.setOutputMarkupId(true);
add(expandToggle);
}
private class AssignTargetForm extends Form<User> {
@ -179,5 +197,11 @@ public class AdminReviewerCapacityManagementPage extends AbstractAdminProjectPag
success("Target assigned");
}
}
private class ExpandedInformation extends WebMarkupContainer {
public ExpandedInformation(String id, IModel<User> reviewer) {
super(id, reviewer);
}
}
}
}

@ -541,6 +541,9 @@ th.wicket_orderUp, th.sorting_asc {
.w-64-px {
width: 64px;
}
.rotate-90 {
transform: rotate(90deg);
}
.read-state {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;