Skip to content

Commit

Permalink
new paging widget according to figma
Browse files Browse the repository at this point in the history
  • Loading branch information
1azyman committed Aug 8, 2022
1 parent 4ad491c commit ffb0804
Show file tree
Hide file tree
Showing 11 changed files with 219 additions and 178 deletions.
13 changes: 13 additions & 0 deletions gui/admin-gui/src/frontend/js/midpoint-theme.js
Original file line number Diff line number Diff line change
Expand Up @@ -480,4 +480,17 @@ export default class MidPointTheme {
queryParams.set(paramName, paramValue);
history.replaceState(null, null, "?" + queryParams.toString());
}

increment(inputId, increment) {
var input = $('#' + inputId);

var value = parseInt(input.val(), 10) || 0;

value = value + increment;
if (value <= 0) {
value = 5;
}

input.val(value);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,11 @@ protected WebMarkupContainer createButtonToolbar(String id) {
protected Component createHeader(String headerId) {
return createTableHeader(headerId);
}

@Override
protected String getPaginationCssClass() {
return null;
}
};
table.add(new VisibleBehaviour(() -> viewToggleModel.getObject() == ViewToggle.TABLE));
add(table);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@
<span class="align-middle" wicket:id="count"/>
</div>
<div class="mr-2" wicket:id="paging" />
<div wicket:id="menu"/>
<form wicket:id="form">
<div wicket:id="menu"/>
</form>
</div>
</div>
</wicket:fragment>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@

import java.util.List;

import com.evolveum.midpoint.web.component.form.MidpointForm;

import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.behavior.AttributeAppender;
Expand All @@ -17,6 +19,7 @@
import org.apache.wicket.extensions.markup.html.repeater.data.table.ISortableDataProvider;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.panel.Fragment;
import org.apache.wicket.markup.repeater.Item;
import org.apache.wicket.model.IModel;
Expand Down Expand Up @@ -47,6 +50,7 @@ public class BoxedTablePanel<T> extends BasePanel<T> implements Table {
private static final String ID_MENU = "menu";
private static final String ID_FOOTER_CONTAINER = "footerContainer";
private static final String ID_BUTTON_TOOLBAR = "buttonToolbar";
private static final String ID_FORM = "form";

private boolean showAsCard = true;

Expand Down Expand Up @@ -314,10 +318,12 @@ protected String getPaginationCssClass() {
};
footerContainer.add(nb2);

TableConfigurationPanel menu = new TableConfigurationPanel(ID_MENU) {
Form form = new MidpointForm(ID_FORM);
footerContainer.add(form);
PagingSizePanel menu = new PagingSizePanel(ID_MENU) {

@Override
protected void pageSizeChanged(AjaxRequestTarget target) {
protected void onPageSizeChangePerformed(AjaxRequestTarget target) {
Table table = findParent(Table.class);
UserProfileStorage.TableId tableId = table.getTableId();

Expand All @@ -329,9 +335,10 @@ protected void pageSizeChanged(AjaxRequestTarget target) {
target.add(findParent(PagingFooter.class));
target.add((Component) table);
}

};
footerContainer.add(menu);
// todo nasty hack, we should decide whether paging should be normal or "small"
menu.setSmall(getPaginationCssClass() != null);
form.add(menu);
add(footerContainer);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@
<tr>
<td wicket:id="td" style="text-align: right;">
<span wicket:id="count"/>
<div wicket:id="pageSize"/>
<form wicket:id="form">
<div wicket:id="pageSize"/>
</form>
</td>
</tr>
</wicket:panel>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@
*/
package com.evolveum.midpoint.web.component.data;

import com.evolveum.midpoint.web.component.form.MidpointForm;

import org.apache.wicket.AttributeModifier;
import org.apache.wicket.Component;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.extensions.markup.html.repeater.data.table.AbstractToolbar;
import org.apache.wicket.extensions.markup.html.repeater.data.table.DataTable;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.navigation.paging.IPageable;
import org.apache.wicket.markup.repeater.data.DataViewBase;
import org.apache.wicket.model.IModel;
Expand All @@ -27,6 +30,8 @@
public class CountToolbar extends AbstractToolbar {

private static final String ID_TD = "td";

private static final String ID_FORM = "form";
private static final String ID_COUNT = "count";
private static final String ID_PAGE_SIZE = "pageSize";

Expand All @@ -46,15 +51,18 @@ protected void onInitialize() {
count.setRenderBodyOnly(true);
td.add(count);

TableConfigurationPanel popover = new TableConfigurationPanel(ID_PAGE_SIZE) {
Form form = new MidpointForm(ID_FORM);
td.add(form);

PagingSizePanel pageSize = new PagingSizePanel(ID_PAGE_SIZE) {

@Override
protected void pageSizeChanged(AjaxRequestTarget target) {
protected void onPageSizeChangePerformed(AjaxRequestTarget target) {
CountToolbar.this.pageSizeChanged(target);
}
};
popover.add(new VisibleBehaviour(() -> CountToolbar.this.isPageSizePopupVisible()));
td.add(popover);
pageSize.add(new VisibleBehaviour(() -> CountToolbar.this.isPageSizePopupVisible()));
form.add(pageSize);
}

private IModel<String> createModel(Component component, IPageable pageable) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!--
~ Copyright (c) 2010-2017 Evolveum
~
~ This work is dual-licensed under the Apache License 2.0
~ and European Union Public License. See LICENSE file for details.
-->

<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
<input wicket:id="input" type="text" class="form-control" style="max-width: 50px;" wicket:message="title:PagingSizePanel.pageSize">
<div class="input-group-append">
<div class="d-flex flex-column">
<a wicket:id="increment" class="border flex-fill px-1 d-flex align-items-center border-bottom-0" style="line-height: 1; border-color: #ced4da !important; color: #444;">
<i class="fa-solid fa-caret-up fa-xs"></i>
</a>
<a wicket:id="decrement" class="border flex-fill px-1 d-flex align-items-center" style="line-height: 1; border-color: #ced4da !important; color: #444;">
<i class="fa-solid fa-caret-down fa-xs"></i>
</a>
</div>
<a wicket:id="submit" class="btn btn-primary">
<i class="fa fa-check"></i>
</a>
</div>
</wicket:panel>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
/*
* Copyright (c) 2022 Evolveum and contributors
*
* This work is dual-licensed under the Apache License 2.0
* and European Union Public License. See LICENSE file for details.
*/

package com.evolveum.midpoint.web.component.data;

import org.apache.commons.lang3.StringUtils;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxSubmitLink;
import org.apache.wicket.behavior.AttributeAppender;
import org.apache.wicket.markup.ComponentTag;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.IModel;
import org.apache.wicket.validation.validator.RangeValidator;

import com.evolveum.midpoint.gui.api.component.BasePanel;
import com.evolveum.midpoint.web.session.UserProfileStorage;
import com.evolveum.midpoint.web.util.SearchFormEnterBehavior;

/**
* Created by Viliam Repan (lazyman).
*/
public class PagingSizePanel extends BasePanel<Integer> {

private static final long serialVersionUID = 1L;
private static final String ID_INPUT = "input";
private static final String ID_SUBMIT = "submit";
private static final String ID_INCREMENT = "increment";
private static final String ID_DECREMENT = "decrement";

private boolean small;

public PagingSizePanel(String id) {
super(id, null);

initLayout();
}

@Override
protected void onComponentTag(ComponentTag tag) {
checkComponentTag(tag, "div");

super.onComponentTag(tag);
}

@Override
public void renderHead(IHeaderResponse response) {
super.renderHead(response);

response.render(OnDomReadyHeaderItem.forScript(createIncrementScript(ID_INCREMENT, 5)));
response.render(OnDomReadyHeaderItem.forScript(createIncrementScript(ID_DECREMENT, -5)));
}

private String createIncrementScript(String buttonId, int increment) {
return "$(function() { $('#" + get(buttonId).getMarkupId() + "').click( "
+ "function() { "
+ "MidPointTheme.increment('" + get(ID_INPUT).getMarkupId() + "', " + increment + "); "
+ "}); });";
}

private void initLayout() {
add(AttributeAppender.prepend("class",
() -> StringUtils.joinWith(" ", "input-group", small ? "input-group-sm" : "", "flex-nowrap w-auto")));

AjaxSubmitLink submit = new AjaxSubmitLink(ID_SUBMIT) {

@Override
protected void onError(AjaxRequestTarget target) {
target.add(getPageBase().getFeedbackPanel());
}

@Override
protected void onSubmit(AjaxRequestTarget target) {
onPageSizeChangePerformed(target);
}
};
add(submit);

TextField input = new TextField(ID_INPUT, getModel());
input.add(new RangeValidator<>(5, 100));
input.setLabel(createStringResource("PageSizePopover.title"));
input.add(new SearchFormEnterBehavior(submit));
input.setType(Integer.class);
input.setOutputMarkupId(true);
add(input);

WebMarkupContainer increment = new WebMarkupContainer(ID_INCREMENT);
increment.setOutputMarkupId(true);
add(increment);

WebMarkupContainer decrement = new WebMarkupContainer(ID_DECREMENT);
decrement.setOutputMarkupId(true);
add(decrement);
}

protected void onPageSizeChangePerformed(AjaxRequestTarget target) {

}

@Override
public IModel<Integer> createModel() {
return new IModel<>() {

@Override
public Integer getObject() {
Table tablePanel = findParent(Table.class);
UserProfileStorage.TableId tableId = tablePanel.getTableId();
if (tableId == null || !tablePanel.enableSavePageSize()) {
return tablePanel.getItemsPerPage();
}

return getPageBase().getSessionStorage().getUserProfile().getPagingSize(tableId);
}

@Override
public void setObject(Integer o) {
Table tablePanel = findParent(Table.class);
UserProfileStorage.TableId tableId = tablePanel.getTableId();
if (tableId == null || !tablePanel.enableSavePageSize()) {
tablePanel.setItemsPerPage(o);
return;
}

getPageBase().getSessionStorage().getUserProfile().setPagingSize(tableId, o);
}

@Override
public void detach() {
}
};
}

public boolean isSmall() {
return small;
}

public void setSmall(boolean small) {
this.small = small;
}
}

This file was deleted.

0 comments on commit ffb0804

Please sign in to comment.