Open Source Software: an advanced filter

Liberty — Mon, 19 Jun 2023 05:01:03 +0000

github: https://github.com/Liberty-liu/Everright-filter

Features

1.Supports filtering of multiple data types, including string, number, dropdown, cascade, region, date and time. Whether you need to filter different types of data, it can meet your needs.
2.Provides a wealth of operators, such as equal to, not equal to, greater than, less than, interval, etc., allowing you to flexibly define filtering rules based on specific conditions.
3.Provides great flexibility. It supports filtering on date, year, month and day. It also supports the selection of relative time and absolute time, such as today, this week, this month, this year, past N days/hours, future N days/hours, etc. This makes date filtering more flexible and can meet the needs of various time dimensions.
4.Support conditional grouping settings, you can use logical operators (AND/OR) to combine multiple conditions to implement complex data filtering logic. Data that meets multiple conditions can be filtered out more precisely to meet the needs of advanced data analysis and mining.
5.For behavioral data, it supports setting start and end time, limit times and limit attributes. You can precisely filter out actions that occurred within a specific time period, and further filter based on frequency and attribute conditions.
6.Each filter type is extracted and used separately, and can be easily embedded into different UI interfaces. Whether it is a search box, a filter panel or a table header, everright-filter can provide consistent functions and data structures, eliminating the need to develop separate filter functions for different interfaces, saving development resources and time.
7.Developers can easily configure the data structure of the required functions according to the document UI interface, saving the tedious manual coding and debugging process.
8.Support Chinese and English

Sample screenshot

text

number

time

date

cascader

select

linear

matrix

quick-search

quick-filter

Everright-formEditor low-code drag-and-drop form editor is now open-source

Liberty — Sat, 15 Apr 2023 12:21:33 +0000

About the editor

First come to a gif, have a preliminary understanding

Sorry, the picture is a bit blurry

github: https://github.com/Liberty-liu/Everright-formEditor

demo: https://everright.site/zh-cn/module/formEditor/introduction.html

Everright-formEditor is a visual editor based on vue3, which depends on element-plus and vant for development. An adapter is provided internally for parameter transcoding.

Flexible interaction(You can decide whether to insert a field into a row or a column by dragging and dropping, without a layout container)
Providing multiple components(Input,email,ID number、Cellphone,URL,Textarea,Number,Radio,Checkbox,Time,Date,Rate,Switch,Slider,Html,Cascader,Upload file,Signature,Region)
Layout fields（Grid、Table、Tabs、Collapse、Divider）
i18n（Chinese and English）
Built-in two modes：Fields and layout not separated、Fields and layout separated
The editor,previewer,and configuration panel can all be used independently, and the configuration panel can be selectively used separately according to actual needs to meet the needs of different scenarios

Sample screenshot

Editor

Previewer on PC

Previewer on mobile

Config panel

Internal realization principle

Field

Field as one of the elements

In the form editor, the main operation is an element, the layout container(also one of the elements) is used as the carrier of the Field. use the following figure to represent a Field,and the Field itself will have many attributes.

Note the white pattern in the upper right corner, indicating that the internal properties of this Field are jointly determined by the input of the two pipelines.

From the canvas panel and the selection below the canvas panel
From the configuration panel configuration properties

Field is inserted into the Canvas drawing board by the user's click or drag and drop

Canvas

Use the following figure to represent the Canvas drawing board

The data inside the Canvas drawing board is represented by a two-dimensional array Array[r][c], where r is the row and c is the column. In fact, it is the same as the table, and the interior can be nested infinitely (the layout container can be nested ).

When an element is inserted into the Canvas artboard, the element will be automatically wrapped by Selection.

Selection

Use the following figure to represent the Selection

The white area in the figure represents the slot, where elements are placed.

Selection provides whether it can be dragged, deleted, copied, resized, and parented.

When an element is selected, it will be highlighted on the Canvas panel.

Config panel

Use the following figure to represent the configuration panel

Used to configure field properties.

When an element is selected, the Config panel will display all the properties of the selected element itself

Data Flow Diagram

Combined with the above schematic diagram, the user's behavior is shown in the following diagram

Solid arrows represent user actions
Solid arrow with a dot represents an automatically occurring event
Dashed arrows indicate data flow

Add a paragraph of text description to facilitate understanding

When the user drags an element into the artboard by clicking or dragging, the editor will automatically wrap a selection for the element
When the user selects the selection area, the Config panel will display all the properties of the selected element itself
When the user modifies the attribute of the element through the Config panel or the Selection (Selection), the data will be synchronized to the Canvas drawing board, so that what you see is what you get

Adapter

Use the following figure to represent the adapter

Since pc depends on element-plus, and mobile depends on vant, the functional parameters of the intersection between them are somewhat different, and the adapter does this physical work.

example

The Rate rating component wants to set the number of stars ⭐️, the element-plus parameter is max, and the vant is count.

Insert a little code below to show what the adapter does

if (!isPc) {
  result.count = options.max
} else {
  result.max = options.max
}

Two modes of the editor

Recall that the main data flowing inside the editor is elements, which are divided into fields and layout containers.

The real data inside the editor is a tree structure.

By default, the editor adopts a mode in which the layout and fields are not separated. Of course, the mode in which the layout and fields are separated is also supported.

layoutType1 Fields and layout not separated

Designing the form on the PC side will adapt to the mobile side.
layoutType2 Fields and layout separated

When designing a form on a PC, for example, if a field such as "email" is placed in a tabs container, switching to the mobile end will not synchronize the tabs container. In this case, if a new Collapse container is created on mobile and the email field is placed in it, switching to the PC end will not synchronize the Collapse container. For fields added on one end, when switching to the other end, with newly added fields pushed to the bottom of the canvas and deleted fields removed from the layout structure. All properties of the fields themselves are synchronized.

Regardless of the mode used, the exported data will extract the fields, and for the backend, they are more concerned with the fields rather than the tree structure.

About the internal drag and drop principle

The implementation relies on sortablejs, but inserting rows or columns is not supported by sortablejs. When inserting a row, wrap it with an inline container (inserting an element in a row will automatically wrap it with a virtual inline container). In short, when dragging an element, if a row is inserted, an inline container will be wrapped; if a column is inserted, it will be inserted below the inline container.

Therefore, a sortablejs plugin was written to intercept dragOver and drop events to achieve this.

When dragging, the dragOver event is continuously triggered. Based on the x/y coordinates of the current mouse position, it is determined in which of the four directions of the target element to insert a row or a column. The four directions are determined based on the slope calculation, which can be easily understood by referring to a figure. When dropping, the last dragOver element and instance are recorded to implement the feature.

Existing functional defects

history record
Reflect the tree structure interface
GUI mode to control field display and hiding and logic verification

The above functions will be developed next

DEV Community: Liberty

Open Source Software: an advanced filter

Features

Sample screenshot

text

number

time

date

cascader

select

linear

matrix

quick-search

quick-filter

Everright-formEditor low-code drag-and-drop form editor is now open-source

About the editor

Sample screenshot

Editor

Previewer on PC

Previewer on mobile

Config panel

Internal realization principle

Field

Canvas

Selection

Config panel

Data Flow Diagram

Adapter

Two modes of the editor

About the internal drag and drop principle

Existing functional defects