Examples with Select org.dominokit.domino.ui.forms.Select used on opensource projects

Example 1 with Select

use of org.dominokit.domino.ui.forms.Select in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method allInOne.

@SampleMethod
private void allInOne() {
    ContactsTopPanel<Contact> topPanel = new ContactsTopPanel<>();
    ScrollingPaginationPlugin<Contact> scrollingPaginationPlugin = new ScrollingPaginationPlugin<>(10, 5);
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.addColumn(ColumnConfig.<Contact>create("id", "#").sortable().styleCell(cellElement -> Style.of(cellElement).setCssProperty("vertical-align", "middle")).textAlign("right").asHeader().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + "")).setWidth("70px")).addColumn(ColumnConfig.<Contact>create("status", "Status").setWidth("80px").textAlign("center").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().isActive()) {
            return Style.of(Icons.ALL.check_circle().element()).setColor(Color.GREEN_DARKEN_3.getHex()).element();
        } else {
            return Style.of(Icons.ALL.highlight_off().element()).setColor(Color.RED_DARKEN_3.getHex()).element();
        }
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").sortable().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName())).setWidth("200px")).addColumn(ColumnConfig.<Contact>create("gender", "Gender").setWidth("100px").setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").styleHeader(head -> Style.of(head).setWidth("100px")).setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).textAlign("center").maxWidth("120px")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").sortable().setCellRenderer(cellInfo -> ContactUiUtils.getBalanceElement(cellInfo.getRecord())).setWidth("200px")).addColumn(ColumnConfig.<Contact>create("email", "Email").setWidth("250px").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail()))).addColumn(ColumnConfig.<Contact>create("phone", "Phone").setWidth("200px").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone()))).addColumn(ColumnConfig.<Contact>create("badges", "Badges").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    })).addPlugin(scrollingPaginationPlugin).addPlugin(new TopPanelPlugin<Contact>() {

        @Override
        public HTMLElement element() {
            return topPanel.element();
        }

        @Override
        public void handleEvent(TableEvent event) {
            if (TableDataUpdatedEvent.DATA_UPDATED.equals(event.getType())) {
                topPanel.update((TableDataUpdatedEvent<Contact>) event);
            }
        }
    }).addPlugin(new HeaderBarPlugin<Contact>("Demo table", "this a sample table with all features").addActionElement(dataTable -> {
        Icon selectInactiveIcon = Icons.ALL.highlight_off().clickable().setTooltip("Select Inactive").addClickListener(evt -> dataTable.getRows().forEach(item -> {
            if (!item.getRecord().isActive()) {
                item.select();
            } else {
                item.deselect();
            }
        }));
        return a().add(selectInactiveIcon).element();
    }).addActionElement(dataTable -> {
        Icon selectInactiveIcon = Icons.ALL.check_circle().clickable().setTooltip("Select Active").addClickListener(evt -> dataTable.getRows().forEach(tableRow -> {
            if (tableRow.getRecord().isActive()) {
                tableRow.select();
            } else {
                tableRow.deselect();
            }
        }));
        return a().add(selectInactiveIcon).element();
    }).addActionElement(new HeaderBarPlugin.ClearSearch<>()).addActionElement(new HeaderBarPlugin.SearchTableAction<>()).addActionElement(new HeaderBarPlugin.ShowHideColumnsAction<>())).addPlugin(new RecordDetailsPlugin<>(cell -> new ContactDetails(cell).element())).addPlugin(new SelectionPlugin<>(ColorScheme.BLUE)).addPlugin(new RowMarkerPlugin<>(cellInfo -> ContactUiUtils.getBalanceColor(cellInfo.getRecord()))).addPlugin(new SortPlugin<>()).addPlugin(ColumnHeaderFilterPlugin.<Contact>create().addHeaderFilter("firstName", TextHeaderFilter.<Contact>create()).addHeaderFilter("email", TextHeaderFilter.<Contact>create()).addHeaderFilter("phone", TextHeaderFilter.<Contact>create()).addHeaderFilter("status", BooleanHeaderFilter.<Contact>create("Active", "Inactive", "Both")).addHeaderFilter("gender", EnumHeaderFilter.<Contact, Gender>create(Gender.values())).addHeaderFilter("balance", DoubleHeaderFilter.<Contact>create()).addHeaderFilter("eyeColor", SelectHeaderFilter.<Contact>create().appendChild(SelectOption.create("blue", "Blue")).appendChild(SelectOption.create("brown", "Brown")).appendChild(SelectOption.create("green", "Green")))).addPlugin(new GroupingPlugin<>(tableRow -> tableRow.getRecord().getGender().toString(), cellInfo -> {
        DominoElement.of(cellInfo.getElement()).style().setCssProperty("border-bottom", "1px solid #afafaf").setPadding(px.of(5)).addCss(ColorScheme.INDIGO.lighten_5().getBackground());
        return TextNode.of(cellInfo.getRecord().getGender().getLabel());
    }));
    LocalListDataStore<Contact> localListDataSource = new LocalListDataStore<Contact>().setSearchFilter(new ContactSearchFilter()).setRecordsSorter(new ContactSorter()).setPagination(scrollingPaginationPlugin.getPagination());
    DataTable<Contact> table = new DataTable<>(tableConfig, localListDataSource);
    element.appendChild(Card.create("ALL IN ONE", "Try all plugins and feature works together.").setCollapsible().appendChild(new TableStyleActions(table)).appendChild(table).element());
    contactListParseHandlers.add(contacts -> {
        List<Contact> data = subList(contacts, 0, 100);
        localListDataSource.setData(data);
        table.load();
        topPanel.update(data);
    });
}

Example 2 with Select

use of org.dominokit.domino.ui.forms.Select in project domino-ui-demo by DominoKit.

the class FormsValidationsViewImpl method initValidations.

@SampleMethod
private void initValidations() {
    FieldsGrouping fieldsGrouping = FieldsGrouping.create();
    TextBox name = TextBox.create("Name").groupBy(fieldsGrouping);
    TextBox surename = TextBox.create("Surename").groupBy(fieldsGrouping);
    TextBox email = TextBox.create("Email").groupBy(fieldsGrouping);
    RadioGroup<String> gender = RadioGroup.<String>create("gender", "Gender").appendChild(Radio.create("male", "Male")).appendChild(Radio.create("female", "Female")).horizontal().setShowRequiredIndicator(false).groupBy(fieldsGrouping);
    TextArea description = TextArea.create("Description").groupBy(fieldsGrouping);
    TextBox password = TextBox.password("Password").groupBy(fieldsGrouping);
    CheckBox termsAndConditions = CheckBox.create("I have read and accept the terms").groupBy(fieldsGrouping);
    Select language = Select.create("Language").appendChild(SelectOption.create("english", "English")).appendChild(SelectOption.create("france", "France")).appendChild(SelectOption.create("arabic", "Arabic")).groupBy(fieldsGrouping);
    fieldsGrouping.setAutoValidation(true).setRequired(true);
    validationsCard.appendChild(Row.create().addColumn(Column.span12().appendChild(name))).appendChild(Row.create().addColumn(Column.span12().appendChild(surename))).appendChild(Row.create().addColumn(Column.span12().appendChild(email))).appendChild(Row.create().addColumn(Column.span12().appendChild(gender))).appendChild(Row.create().addColumn(Column.span12().appendChild(description))).appendChild(Row.create().addColumn(Column.span12().appendChild(password))).appendChild(Row.create().addColumn(Column.span12().appendChild(language))).appendChild(Row.create().addColumn(Column.span12().appendChild(termsAndConditions))).appendChild(Row.create().addColumn(Column.span12().appendChild(Button.createPrimary("REGISTER").addClickListener(evt -> {
        ValidationResult validationResult = fieldsGrouping.validate();
        if (validationResult.isValid()) {
            fieldsGrouping.clear();
        } else {
            Notification.createDanger("Error " + validationResult.getErrorMessage()).show();
        }
    }))));
}

Example 3 with Select

use of org.dominokit.domino.ui.forms.Select in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method editableTable.

@SampleMethod
private void editableTable() {
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.addColumn(ColumnConfig.<Contact>create("edit_save", "").styleCell(element -> element.style.setProperty("vertical-align", "top")).setCellRenderer(cell -> Icons.ALL.pencil_mdi().clickable().setTooltip("Edit").addClickListener(evt -> cell.getTableRow().edit()).element()).setEditableCellRenderer(cell -> Icons.ALL.content_save_mdi().clickable().setTooltip("Save").addClickListener(evt -> {
        if (cell.getTableRow().validate().isValid()) {
            cell.getTableRow().save();
        }
    }).element())).addColumn(ColumnConfig.<Contact>create("id", "#").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).textAlign("right").asHeader().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + ""))).addColumn(ColumnConfig.<Contact>create("status", "Status").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).textAlign("center").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().isActive()) {
            return Style.of(Icons.ALL.check_circle()).setColor(Color.GREEN_DARKEN_3.getHex()).element();
        } else {
            return Style.of(Icons.ALL.highlight_off()).setColor(Color.RED_DARKEN_3.getHex()).element();
        }
    }).setEditableCellRenderer(cell -> {
        CheckBox activeCheckBox = CheckBox.create("").setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().isActive());
        cell.setDirtyRecordHandler(dirty -> dirty.setActive(activeCheckBox.getValue()));
        return activeCheckBox.element();
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName())).setEditableCellRenderer(cell -> {
        TextBox nameBox = TextBox.create().setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().getName());
        cell.setDirtyRecordHandler(dirty -> dirty.setName(nameBox.getValue()));
        return nameBox.element();
    })).addColumn(ColumnConfig.<Contact>create("gender", "Gender").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).setEditableCellRenderer(cell -> {
        Select<Gender> genderSelect = Select.<Gender>create().styler(style -> style.setMinWidth("100px")).setFieldStyle(FieldStyle.ROUNDED).appendChild(SelectOption.create(Gender.male, "Male", "Male")).appendChild(SelectOption.create(Gender.female, "female", "female")).value(cell.getRecord().getGender());
        cell.setDirtyRecordHandler(dirty -> dirty.setGender(genderSelect.getValue()));
        return genderSelect.element();
    }).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).setEditableCellRenderer(cell -> {
        Select<EyeColor> eyeColorSelect = Select.<EyeColor>create().setFieldStyle(FieldStyle.ROUNDED).appendChild(SelectOption.create(EyeColor.blue, "Blue", "Blue")).appendChild(SelectOption.create(EyeColor.brown, "Brown", "Brown")).appendChild(SelectOption.create(EyeColor.green, "Green", "Green")).value(cell.getRecord().getEyeColor());
        cell.setDirtyRecordHandler(dirty -> dirty.setEyeColor(eyeColorSelect.getValue()));
        return eyeColorSelect.element();
    }).textAlign("center")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> ContactUiUtils.getBalanceElement(cell.getRecord())).setEditableCellRenderer(cell -> {
        DoubleBox doubleBox = DoubleBox.create().setFieldStyle(FieldStyle.ROUNDED).setMaxValue(4000.0).value(cell.getRecord().getBalance());
        cell.setDirtyRecordHandler(dirty -> dirty.setBalance(doubleBox.getValue().doubleValue()));
        cell.setCellValidator(doubleBox::validate);
        return doubleBox.element();
    })).addColumn(ColumnConfig.<Contact>create("email", "Email").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail())).setEditableCellRenderer(cell -> {
        EmailBox emailBox = EmailBox.create().setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().getEmail());
        cell.setDirtyRecordHandler(dirty -> dirty.setEmail(emailBox.getValue()));
        return emailBox.element();
    })).addColumn(ColumnConfig.<Contact>create("phone", "Phone").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone())).setEditableCellRenderer(cell -> {
        TelephoneBox telephoneBox = TelephoneBox.create().setFieldStyle(FieldStyle.ROUNDED).value(cell.getRecord().getPhone());
        cell.setDirtyRecordHandler(dirty -> dirty.setPhone(telephoneBox.getValue()));
        return telephoneBox.element();
    })).addColumn(ColumnConfig.<Contact>create("badges", "Badges").styleCell(element -> {
        element.style.setProperty("vertical-align", "top");
    }).setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    })).setDirtyRecordHandlers(Contact::new, (originalRecord, dirtyRecord) -> {
        originalRecord.setActive(dirtyRecord.isActive());
        originalRecord.setPhone(dirtyRecord.getPhone());
        originalRecord.setEmail(dirtyRecord.getEmail());
        originalRecord.setBalance(dirtyRecord.getBalance());
        originalRecord.setEyeColor(dirtyRecord.getEyeColor());
        originalRecord.setGender(dirtyRecord.getGender());
        originalRecord.setName(dirtyRecord.getName());
    });
    LocalListDataStore<Contact> localListDataStore = new LocalListDataStore<>();
    DataTable<Contact> table = new DataTable<>(tableConfig, localListDataStore);
    element.appendChild(Card.create("EDITABLE TABLE", "Render cells as editable fields and save the row data.").setCollapsible().appendChild(new TableStyleActions(table)).appendChild(table).element());
    contactListParseHandlers.add(contacts -> {
        localListDataStore.setData(subList(contacts));
    });
}

Example 4 with Select

use of org.dominokit.domino.ui.forms.Select in project domino-ui-demo by DominoKit.

the class DataTableViewImpl method tableHeaderBarPlugin.

@SampleMethod
private void tableHeaderBarPlugin() {
    TableConfig<Contact> tableConfig = new TableConfig<>();
    tableConfig.addColumn(ColumnConfig.<Contact>create("id", "#").textAlign("right").asHeader().setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getIndex() + 1 + ""))).addColumn(ColumnConfig.<Contact>create("status", "Status").textAlign("center").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().isActive()) {
            return Style.of(Icons.ALL.check_circle()).setColor(Color.GREEN_DARKEN_3.getHex()).element();
        } else {
            return Style.of(Icons.ALL.highlight_off()).setColor(Color.RED_DARKEN_3.getHex()).element();
        }
    })).addColumn(ColumnConfig.<Contact>create("firstName", "First name").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getName()))).addColumn(ColumnConfig.<Contact>create("gender", "Gender").setCellRenderer(cell -> ContactUiUtils.getGenderElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("eyeColor", "Eye color").setCellRenderer(cell -> ContactUiUtils.getEyeColorElement(cell.getRecord())).textAlign("center")).addColumn(ColumnConfig.<Contact>create("balance", "Balance").setCellRenderer(cellInfo -> ContactUiUtils.getBalanceElement(cellInfo.getRecord()))).addColumn(ColumnConfig.<Contact>create("email", "Email").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getEmail()))).addColumn(ColumnConfig.<Contact>create("phone", "Phone").setCellRenderer(cell -> TextNode.of(cell.getTableRow().getRecord().getPhone()))).addColumn(ColumnConfig.<Contact>create("badges", "Badges").setCellRenderer(cell -> {
        if (cell.getTableRow().getRecord().getAge() < 35) {
            return Badge.create("Young").setBackground(ColorScheme.GREEN.color()).element();
        }
        return TextNode.of("");
    }));
    tableConfig.addPlugin(new SelectionPlugin<>());
    tableConfig.addPlugin(new HeaderBarPlugin<Contact>("Demo table", "this a sample table with all features").addActionElement(dataTable -> {
        Icon selectInactiveIcon = Icons.ALL.highlight_off().clickable().setTooltip("Select Inactive").addClickListener(evt -> dataTable.getRows().forEach(item -> {
            if (!item.getRecord().isActive()) {
                item.select();
            } else {
                item.deselect();
            }
        }));
        return a().add(selectInactiveIcon).element();
    }).addActionElement(dataTable -> {
        Icon selectInactiveIcon = Icons.ALL.check_circle().clickable().setTooltip("Select Active").addClickListener(evt -> dataTable.getRows().forEach(tableRow -> {
            if (tableRow.getRecord().isActive()) {
                tableRow.select();
            } else {
                tableRow.deselect();
            }
        }));
        return a().add(selectInactiveIcon).element();
    }));
    LocalListDataStore<Contact> localListDataStore = new LocalListDataStore<>();
    DataTable<Contact> defaultTable = new DataTable<>(tableConfig, localListDataStore);
    element.appendChild(Card.create("HEADER BAR PLUGIN", "Adds a title and description for the table, and allow adding elements to the top right side of the table").setCollapsible().appendChild(new TableStyleActions(defaultTable)).appendChild(defaultTable).element());
    contactListParseHandlers.add(contacts -> {
        localListDataStore.setData(subList(contacts));
        defaultTable.load();
    });
}

Example 5 with Select

use of org.dominokit.domino.ui.forms.Select in project playshogi by Tellmarch.

the class UploadKifusPopup method createModalDialog.

private Window createModalDialog() {
    Window modal = new Window("Upload Kifu(s)").setSize(IsModalDialog.ModalSize.LARGE);
    modal.appendChild(TextNode.of("With this dialog you can import a collection of " + "kifus."));
    Select<String> charsetSelect = Select.<String>create().appendChild(SelectOption.create("UTF-8", "Encoding: Unicode (UTF-8) - Ex: 81dojo")).appendChild(SelectOption.create("SHIFT-JIS", "Encoding: Japanese (SHIFT-JIS)")).appendChild(SelectOption.create("windows-932", "Encoding: Japanese (windows-932) - Ex: SC24, " + "KifuForWindows, etc.")).setSearchable(false).selectAt(2);
    fileUpload = FileUpload.create().setIcon(Icons.ALL.touch_app()).setUrl(GWT.getModuleBaseURL() + "uploadKifu").multipleFiles().autoUpload().setName("file").accept("zip,usf,kif,psn").appendChild(Elements.h(3).textContent("Drop files here or click to upload.")).appendChild(Elements.em().textContent("(Supported formats: Zip file containing .usf, .kif or .psn files.)")).onAddFile(fileItem -> {
        Notification.createInfo("File added. " + fileItem.getFileName()).show();
        fileItem.addBeforeUploadHandler((request, formData) -> {
            formData.append("collectionId", draftId);
            formData.append("returnUsf", "false");
            formData.append("returnSummary", "true");
            formData.append("charset", charsetSelect.getValue());
        });
        fileItem.addErrorHandler(request -> Notification.createDanger("Error while uploading").show());
        fileItem.addSuccessUploadHandler(request -> {
            GWT.log("Successful upload");
            parseResponse(request.responseText);
            Notification.createSuccess("File uploaded successfully").show();
            fileItem.remove();
        });
    });
    modal.appendChild(charsetSelect);
    modal.appendChild(fileUpload);
    Tab kifusTab = Tab.create("Kifus").appendChild(b().textContent("Uploaded kifus:")).appendChild(createKifusTable());
    if (enableKifuUpload) {
        kifusTab.appendChild(Button.createPrimary("Upload Kifus only, not in a collection").addClickListener(evt -> {
            eventBus.fireEvent(SaveDraftCollectionEvent.ofKifus(draftId));
            dialog.close();
        }));
    }
    Tab gamesTab = Tab.create("Import as Game Collection").appendChild(b().textContent("Import all kifus as a game collection")).appendChild(createGameCollectionsForm());
    Tab problemsTab = Tab.create("Import as Problem Collection").appendChild(b().textContent("Import all kifus as a problem collection")).appendChild(createProblemCollectionsForm());
    tabs = TabsPanel.create().appendChild(kifusTab);
    if (enableNewGameCollection || enableAddToGameCollection) {
        tabs.appendChild(gamesTab);
    }
    if (enableNewProblemCollection || enableAddToProblemCollection) {
        tabs.appendChild(problemsTab);
    }
    tabs.hide();
    modal.appendChild(tabs);
    Button closeButton = Button.create("CANCEL").linkify();
    closeButton.addClickListener(evt -> modal.close());
    modal.appendFooterChild(closeButton);
    // modal.getBodyElement().style().setOverFlow("scroll").setHeight("100%");
    return modal;
}