com.github.fluorumlabs.disconnect.vaadin.Crud Maven / Gradle / Ivy
Show all versions of disconnect-vaadin Show documentation
package com.github.fluorumlabs.disconnect.vaadin;
import com.github.fluorumlabs.disconnect.core.annotations.WebComponent;
import com.github.fluorumlabs.disconnect.polymer.types.BooleanPropertyChangeEvent;
import com.github.fluorumlabs.disconnect.polymer.types.IntPropertyChangeEvent;
import com.github.fluorumlabs.disconnect.polymer.types.PropertyChangeEvent;
import com.github.fluorumlabs.disconnect.vaadin.constants.CrudEditorPosition;
import com.github.fluorumlabs.disconnect.vaadin.dataproviders.GridDataProvider;
import com.github.fluorumlabs.disconnect.vaadin.elements.CrudElement;
import com.github.fluorumlabs.disconnect.vaadin.i18n.CrudI18n;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasElementMixin;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasThemableMixin;
import com.github.fluorumlabs.disconnect.vaadin.types.ItemEvent;
import com.github.fluorumlabs.disconnect.vaadin.types.ThemeVariant;
import com.github.fluorumlabs.disconnect.zero.component.*;
import com.github.fluorumlabs.disconnect.zero.observable.ObservableEvent;
import js.extras.JsEnum;
import js.lang.Any;
import js.util.collections.Array;
import javax.annotation.Nullable;
/**
* <vaadin-crud> is a Web Component for
* CRUD operations.
*
* Quick Start
* Assign an array to the items property.
*
* A grid and an editor will be automatically generated and configured based on the data structure provided.
*
*
Example:
* <vaadin-crud items='[{"name": "John", "surname":
* "Lennon", "role": "singer"},
* {"name": "Ringo", "surname": "Starr", "
* role": "drums"}]'></vaadin-crud>
*
* Data Provider Function
* Otherwise, you can provide a dataProvider
* function.
*
* Example:
* <vaadin-crud></vaadin-crud>
*
* const crud = document.querySelector('vaadin-crud');
* const users = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'}, ...];
* crud.dataProvider = function(params, callback) {
* const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);
* callback(chunk, people.length);
* };
*
* NOTE: The autogenerated editor only supports string types. If you need to handle special cases
* customizing the editor is discussed below.
*
* Customization
* Alternatively you can fully configure the component by using slot names.
*
*
*
* Slot name Description gridTo replace the autogenerated grid with a custom one. formTo replace the autogenerated form. toolbarTo replace the toolbar content. Add an element with the attribure
* new-button for the new item action. newFor customizing the 'new item' button.
* Example:
* <vaadin-crud items='[{"name": "John", "surname":
* "Lennon", "role": "singer"},
* {"name": "Ringo", "surname": "Starr", "
* role": "drums"}]'>
*
* <vaadin-grid slot="grid">
* <vaadin-crud-edit-column></vaadin-crud-edit-column>
* <vaadin-grid-column>
* <template class="header">Name</template><template>[[item.name]]</template>
* </vaadin-grid-column>
* <vaadin-grid-column>
* <template class="header">Surname</template><template>[[item.surname]]</template>
* </vaadin-grid-column>
* </vaadin-grid>
*
* <vaadin-form-layout slot="form">
* <vaadin-text-field label="First" path="name"></vaadin-text-field>
* <vaadin-text-field label="Surname" path="surname"></vaadin-text-field>
* </vaadin-form-layout>
*
* <div slot="footer">Total singers: [[size]]</div>
*
* <button slot="new">New singer</button>
* </vaadin-crud>
*
* Helpers
* The following elements are used to autoconfigure the grid and the editor
*
*
* Styling
* The following shadow DOM parts are available for styling:
*
*
*
* Part name Description toolbarToolbar container at the bottom. By default it contains the the
* new button
* The following custom properties are available:
*
*
*
* Custom Property Description Default --vaadin-crud-editor-max-height max height of editor when opened on the bottom 40% --vaadin-crud-editor-max-width max width of editor when opened on the side 40%
* See
* ThemableMixin – how to apply styles for shadow parts
*/
@WebComponent
public class Crud- extends AbstractComponent
>
implements HasElementMixin, Crud- >,
HasThemableMixin
, Crud- >,
HasSlots
>,
HasStyle, Crud- >, HasComponents
, Crud- , Component> {
public Crud() {
super(CrudElement.TAGNAME());
}
/**
* An array containing the items which will be stamped to the column template instances.
*/
@Nullable
public Array
- items() {
return getNode().getItems();
}
/**
* An array containing the items which will be stamped to the column template instances.
*/
public Crud
- items(ITEM... items) {
getNode().setItems(items);
return this;
}
public Crud
- items(Array
- items) {
getNode().setItems(items);
return this;
}
/**
* The item being edited in the dialog.
*/
@Nullable
public ITEM editedItem() {
return getNode().getEditedItem();
}
/**
* The item being edited in the dialog.
*/
public Crud
- editedItem(ITEM editedItem) {
getNode().setEditedItem(editedItem);
return this;
}
/**
* Sets how editor will be presented on desktop screen.
*
* Accepted values are:
*
*
* - `` (default) - form will open as overlay
* bottom - form will open below the gridaside - form will open on the grid side (right, if lft and left if rtl)
*/
@Nullable
public CrudEditorPosition editorPosition() {
return getNode().getEditorPosition();
}
/**
* Sets how editor will be presented on desktop screen.
*
* Accepted values are:
*
*
* - `` (default) - form will open as overlay
* bottom - form will open below the gridaside - form will open on the grid side (right, if lft and left if rtl)
*/
public Crud- editorPosition(CrudEditorPosition editorPosition) {
getNode().setEditorPosition(editorPosition);
return this;
}
/**
* Enables user to click on row to edit it.
* Note: When enabled, autogenerated grid won't show the edit column.
*/
public boolean editOnClick() {
return getNode().isEditOnClick();
}
/**
* Enables user to click on row to edit it.
* Note: When enabled, autogenerated grid won't show the edit column.
*/
public Crud
- editOnClick(boolean editOnClick) {
getNode().setEditOnClick(editOnClick);
return this;
}
/**
* Function that provides items lazily. Receives arguments
params, callback
*
* params.page Requested page index
* params.pageSize Current page size
* params.filters Currently applied filters
* params.sortOrders Currently applied sorting orders
*
* callback(items, size) Callback function with arguments:
*
*
* items Current page of itemssize Total number of items
*/
@Nullable
public GridDataProvider- dataProvider() {
return getNode().getDataProvider();
}
/**
* Function that provides items lazily. Receives arguments
params, callback
*
* params.page Requested page index
* params.pageSize Current page size
* params.filters Currently applied filters
* params.sortOrders Currently applied sorting orders
*
* callback(items, size) Callback function with arguments:
*
*
* items Current page of itemssize Total number of items
*/
public Crud- dataProvider(GridDataProvider
- dataProvider) {
getNode().setDataProvider(dataProvider);
return this;
}
/**
* Disable filtering when grid is autofonfigured.
*/
public boolean noFilter() {
return getNode().isNoFilter();
}
/**
* Disable filtering when grid is autofonfigured.
*/
public Crud
- noFilter(boolean noFilter) {
getNode().setNoFilter(noFilter);
return this;
}
/**
* Disable sorting when grid is autofonfigured.
*/
public boolean noSort() {
return getNode().isNoSort();
}
/**
* Disable sorting when grid is autofonfigured.
*/
public Crud
- noSort(boolean noSort) {
getNode().setNoSort(noSort);
return this;
}
/**
* Remove grid headers when it is autoconfigured.
*/
public boolean noHead() {
return getNode().isNoHead();
}
/**
* Remove grid headers when it is autoconfigured.
*/
public Crud
- noHead(boolean noHead) {
getNode().setNoHead(noHead);
return this;
}
/**
* A comma-separated list of fields to include in the generated grid and the generated editor.
*
* It can be used to explicitly define the field order.
*
* When it is defined exclude is ignored.
*
* Default is undefined meaning that all properties in the object should be mapped to fields.
*/
@Nullable
public String include() {
return getNode().getInclude();
}
/**
* A comma-separated list of fields to include in the generated grid and the generated editor.
*
* It can be used to explicitly define the field order.
*
* When it is defined exclude is ignored.
*
* Default is undefined meaning that all properties in the object should be mapped to fields.
*/
public Crud- include(String include) {
getNode().setInclude(include);
return this;
}
/**
* A comma-separated list of fields to be excluded from the generated grid and the generated editor.
*
* When include
* is defined, this parameter is ignored.
*
* Default is to exclude all private fields (those properties starting with underscore)
*/
@Nullable
public String exclude() {
return getNode().getExclude();
}
/**
* A comma-separated list of fields to be excluded from the generated grid and the generated editor.
*
* When include
* is defined, this parameter is ignored.
*
* Default is to exclude all private fields (those properties starting with underscore)
*/
public Crud- exclude(String exclude) {
getNode().setExclude(exclude);
return this;
}
/**
* Reflects the opened status of the editor.
*/
public boolean editorOpened() {
return getNode().isEditorOpened();
}
/**
* Reflects the opened status of the editor.
*/
public Crud
- editorOpened(boolean editorOpened) {
getNode().setEditorOpened(editorOpened);
return this;
}
/**
* Number of items in the data set which is reported by the grid.
* Typically it reflects the number of filtered items displayed in the grid.
*/
public double size() {
return getNode().getSize();
}
/**
* The object used to localize this component.
* For changing the default localization, change the entire
* i18n object or just the property you want to modify.
*
* The object has the following JSON structure and default values:
*
*
{
* newItem: 'New item',
* editItem: 'Edit item',
* saveItem: 'Save',
* cancel: 'Cancel',
* deleteItem: 'Delete...',
* editLabel: 'Edit',
* confirm: {
* delete: {
* title: 'Confirm delete',
* content: 'Are you sure you want to delete the selected item? This action cannot be undone.',
* button: {
* confirm: 'Delete',
* dismiss: 'Cancel'
* }
* },
* cancel: {
* title: 'Unsaved changes',
* content: 'There are unsaved modifications to the item.',
* button: {
* confirm: 'Discard',
* dismiss: 'Continue editing'
* }
* }
* }
* }
*
*/
@Nullable
public CrudI18n i18n() {
return getNode().getI18n();
}
/**
* The object used to localize this component.
* For changing the default localization, change the entire
* i18n object or just the property you want to modify.
*
* The object has the following JSON structure and default values:
*
*
{
* newItem: 'New item',
* editItem: 'Edit item',
* saveItem: 'Save',
* cancel: 'Cancel',
* deleteItem: 'Delete...',
* editLabel: 'Edit',
* confirm: {
* delete: {
* title: 'Confirm delete',
* content: 'Are you sure you want to delete the selected item? This action cannot be undone.',
* button: {
* confirm: 'Delete',
* dismiss: 'Cancel'
* }
* },
* cancel: {
* title: 'Unsaved changes',
* content: 'There are unsaved modifications to the item.',
* button: {
* confirm: 'Discard',
* dismiss: 'Continue editing'
* }
* }
* }
* }
*
*/
public Crud- i18n(CrudI18n i18n) {
getNode().setI18n(i18n);
return this;
}
/**
* Fired when user discards edition. If the default is prevented, then
* no action is performed, user is responsible to close dialog and reset
* item and grid.
*/
public ObservableEvent
> crudCancelEvent() {
return createEvent("cancel");
}
/**
* Fired when user wants to delete item. If the default is prevented, then
* no action is performed, items array is not modified nor dialog closed
*/
public ObservableEvent> crudDeleteEvent() {
return createEvent("delete");
}
/**
* Fired when user wants to edit an existing item. If the default is prevented, then
* a new item is not assigned to the form, giving that responsibility to the app, though
* dialog is always opened.
*/
public ObservableEvent> crudEditEvent() {
return createEvent("edit");
}
/**
* Fired when user wants to create a new item.
*/
public ObservableEvent> crudNewEvent() {
return createEvent("new");
}
/**
* Fired when user wants to save a new or an existing item. If the default is prevented, then
* no action is performed, items array is not modified nor dialog closed
*/
public ObservableEvent> crudSaveEvent() {
return createEvent("save");
}
/**
* Fired when the items property changes.
*/
public ObservableEvent>> itemsChangedEvent() {
return createEvent("items-changed");
}
/**
* Fired when the editorOpened property changes.
*/
public ObservableEvent editorOpenedChangedEvent() {
return createEvent("editor-opened-changed");
}
/**
* Fired when the size property changes.
*/
public ObservableEvent sizeChangedEvent() {
return createEvent("size-changed");
}
public HasSlots.Container gridSlot() {
return slotted("grid");
}
public HasSlots.Container toolbarSlot() {
return slotted("toolbar");
}
public HasSlots.Container formSlot() {
return slotted("form");
}
public abstract static class Variant extends ThemeVariant {
public static final Variant NO_BORDER = JsEnum.of("no-border");
}
}