Store and Flow

leftmenu, rightmenu

It is the same for the both. The define dialog menu:

store.state.[ leftmenu | rightmenu ] = {
    value: {
        label: ``label of the selected menu``,
        image: {
            type: [ font-icon ],
            value: ``value in function of type to display the image``,
        },
    },
    values: [
        {
            label: ``label of the selected menu``,
            description: ``Description of the menu``,
            image: {
                type: [ font-icon ],
                value: ``value in function of type to display the image``,
            },
            type: [ SPACE | CLIENT ]
            id: ``space id or custom view name in function of type value``
        },
    ],
}

UPDATE_LEFT_MENU, UPDATE_RIGHT_MENU

Update the menu definition or selected menu:

{
    type: [ UPDATE_LEFT_MENU | UPDATE_RIGHT_MENU ],
    value: {
        label: ``label of the selected menu``,
        image: {
            type: [ font-icon ],
            value: ``value in function of type to display the image``,
        },
    },
    values: [
        {
            label: ``label of the selected menu``,
            description: ``Description of the menu``,
            image: {
                type: [ font-icon ],
                value: ``value in function of type to display the image``,
            },
            type: [ SPACE | CLIENT ]
            id: ``space id or custom view name in function of type value``
        },
    ],
}

Note

value and values is not required

CLEAR_LEFT_MENU, CLEAR_RIGHT_MENU

Clear the menu:

{
    type: [ CLEAR_LEFT_MENU | CLEAR_RIGHT_MENU ]
}

global

Define the context of the application:

store.state.global = {
    title: ``title of the application``,
    modal_custom_view: ``the current modal custom view``,
    breadscrumbs: [
        {
            path: ``the path of the previous action``,
            label: ``label display in the breadcrumb``,
            changes: ``the changes did during the action``,
            position: ``to order the Array``,
        },
        ...
    ],
}

UPDATE_GLOBAL

Update the global values:

{
    type: 'UPDATE_GLOBAL',
    ``params``,
}

Warning

Used for title or modal_custom_view.

CLEAR_GLOBAL

Clear all the parameter in global:

{
    type: 'CLEAR_GLOBAL',
}

ADD_IN_BREADSCRUMB

Add new entry at the end of the breadcrumb:

{
    type: 'ADD_IN_BREADSCRUMB',
    path: ``the path to save``,
    label: ``the label to display``,
    changes: ``the state data changes to save``,
}

REMOVE_FROM_BREADSCRUMB

Remove the breadcrumb entries if the position is higther than the wanted position:

{
    type: 'REMOVE_FROM_BREADSCRUMB',
    position: ``the position to delete``
}

CLEAR_BREADSCRUMB

Clear all the breadcrumb entries:

{
    type: 'CLEAR_BREADSCRUMB',
}

ADD_NOTIFICATION (mutation)

Add new notification in the notification stack:

{
    type: 'ADD_NOTIFICATION',
    process: 'commit',
    id: ``unique id``
    title: ``title of the notification``
    message: ``html template of the message``,
    has_icon: ``display icon only for notification type success, info, warning or error``,
    notification_type: [ '' | success | info | warning | error ],
}

Warning

If you need duration, you must use the action not the mutation

ADD_NOTIFICATION (action)

Add new notification in the notification stack:

{
    type: 'ADD_NOTIFICATION',
    process: 'dispatch',
    id: ``unique id``
    title: ``title of the notification``
    message: ``html template of the message``,
    has_icon: ``display icon only for notification type success, info, warning or error``,
    notification_type: [ '' | success | info | warning | error ],
    duration: ``number of the duration before remove, null for sticky``,
}

REMOVE_NOTIFICATION

Remove from notifications stack the notification id:

{
    type: 'REMOVE_NOTIFICATION',
    id: ``id of the notification``,
}

data

Save all the data for furet_ui:

store.state.data = {
    actions: {
        ``action id``: {
            label: ``Label of the action``,
            views: [
                {
                    viewId: ``view id``,
                    type: ``type of view``,
                },
                ...
            ],
        },
        ...
    },
    views: {
        ``view's id``: {
            model: ``model's name``,
            ``view params which depend of the type of the view``
        },
    },
    client: {
        ``custom view name``: {
            ``params of the custum view``,
        },
        ...
    },
    data: {
        ``Model name``: {
            ``data id``: {
                ``data``,
                ...
            },
            ...
        },
        ...
    },
    changes: {
        new: {
            ``Model name``: {
                ``data id``: [ 'DELETED' || { ``data`` } ],
                ...
            },
            ...
        },
        ``Model name``: {
            ``data id``: [ 'DELETED' || { ``data`` } ],
            ...
        },
        ...
    },
    spaces: {
        left_menu: [
            ``menu params``,
            ...
        ],
        right_menu: [
            ``menu params``,
            ...
        ],
    }
}

the left and right menu definition is the same:

[
    {
        label: ``displayed label``,
        image: {
            type: [ 'font-icon' ],
            value: ``value of the icon``,
        actionId: ``action id``,
        id: ``id of the menu``,
        submenus: [
            ``Same menu definition, to use the submenus don't put actionId``,
            ...
        ],
    },

UPDATE_ACTION

Add action definition:

{
    type: 'UPDATE_ACTION_MANAGER_ADD_ACTION_DATA',
    actionId: ``action id``
    label: ``Label of the action``,
    views: [
        {
            viewId: ``view id``,
            type: ``type of view``,
        },
        ...
    ],
}

UPDATE_VIEW

Update the data of one view:

{
    type: 'UPDATE_VIEW',
    viewId: ``view id``,
    model: ``model name``,
    ``params of the view``,
}

UPDATE_CLIENT

Add params for a custom view:

{
    type: 'UPDATE_CLIENT',
    viewName: ``custom view name``,
    ``params ...``,
}

UPDATE_DATA

Update the data:

{
    type: 'UPDATE_DATA',
    model: ``Model name``,
    data: {
        ``data id``: {
            ``params``,
        },
        ...
    },
}

DELETE_DATA

Delete some data:

{
    type: 'DELETE_DATA',
    data: {
        ``Model name``: [
            ``data id``,
        ],
    },
}

UPDATE_CHANGE

Modify current change:

{
    type: 'UPDATE_CHANGE',
    model: ``Model name``,
    dataId: ``data id``,
    fieldname: ``name of the field``,
    value: ``new value to save``,
}

REPLACE_CHANGE

replace the change by another:

{
    type: 'REPLACE_CHANGE',
    changes: ``object``,
}

CLEAR_CHANGE

replace the change by another:

{
    type: 'CLEAR_CHANGE',
}

CREATE_CHANGE_X2M

Add new change in the new entry, use by One2Many and Many2Many:

{
    type: 'CREATE_CHANGE_X2M',
    model: ``model name``,
    dataId: ``id of the data to create``
}

UPDATE_CHANGE_X2M

Modify current change in new if exist or in the normal place:

{
    type: 'UPDATE_CHANGE_X2M',
    model: ``Model name``,
    dataId: ``data id``,
    fieldname: ``name of the field``,
    value: ``new value to save``,
}

UPDATE_CHANGE_X2M_DELETE

Remove the change in the new entry if exist else add the ‘DELETED’ in the nomal place for the model and the dataIds:

{
    type: 'UPDATE_CHANGE_X2M_DELETE',
    model: ``Model name``,
    dataIds: [
        ``data id``,
        ...
    ],
}

UPDATE_SPACE

Update the space data:

{
    type: 'UPDATE_SPACE',
    spaceId: ``
    left_menu: [
        ``menu params``,
        ...
    ],
    right_menu: [
        ``menu params``,
        ...
    ],
}

CLEAR_DATA

Clear all the data:

{
    type: 'CLEAR_DATA'
}

View definition for store

Note

the params are different for each view type

List

label: ``label of the view``,
model: ``model name``,
creatable: ``true display the create button``,
deletable: ``true display the delete button``,
selectable: ``true display the check box``,
onSelect: ``view id to use if the line is clicked``,
empty: ``html template displayed when no data``,
headers: [
    {
        name: ``column name``,
        label: ``Label of the column``,
        component: ``the vue component name``
        sortable: ``true: the column is sortable``
        numeric: ``true the value is a numeric``
        invisible: ``condition to determinate if the field is displayed or not``
    },
    ...
],
search: [
    {
        key: ``key used by the server to filter the data``,
        label: ``Label display of the key``,
        type: ``what ever if you need to split the filter``,
        operator: ``what ever if you want define this``,
        value: ``the value``,
    },
    ...
],
buttons: [
    {
        label: ``Label of the button``,
        buttonId: ``id of the button``,
    },
    ...
],
onSelect_buttons: [
    {
        label: ``Label of the button``,
        buttonId: ``id of the button``,
    },
    ...
],
fields: [
    ``column name``,
    ...
],

Thumbnail

label: ``label of the view``,
model: ``model name``,
creatable: ``true display the create button``,
deletable: ``true display the delete button``,
onSelect: ``view id to use if the line is clicked``,
border_fieldcolor: ``color to display can be hard coded or come from a field or eval some condition``
background_fieldcolor: ``color to display can be hard coded or come from a field or eval some condition``
search: [
    {
        key: ``key used by the server to filter the data``,
        label: ``Label display of the key``,
        type: ``what ever if you need to split the filter``,
        operator: ``what ever if you want define this``,
        value: ``the value``,
    },
    ...
],
template: ``template definition``,
buttons: [
    {
        label: ``Label of the button``,
        buttonId: ``id of the button``,
    },
    ...
],
fields: [
    ``column name``,
    ...
],

Note

For the template see the template page Template

Form

label: ``label of the view``,
model: ``model name``,
creatable: ``true display the create button``,
deletable: ``true display the delete button``,
editable: ``true display the edit button``,
onClose: ``view id to use if the close button is clicked``,
template: ``template definition``,
buttons: [
    {
        label: ``Label of the button``,
        buttonId: ``id of the button``,
    },
    ...
],
fields: [
    ``column name``,
    ...
],

Note

For the template see the template page Template

dispatchAll method

The dispatchAll is called by the api and do the dispatch to the store. But some type are not in the store and was computed directly by this method.

UPDATE_LOCALES

Update translation for one locale:

{
    type: 'UPDATE_LOCALES',
    locales: [
        {
            locale: ``the local to modify fr | en | ...``
            messages: ``object of translation``
        },
        ...
    ]
}

SET_LOCALE

Force the current locale of furetui:

{
    type: 'SET_LOCALE',
    locale: ``the local to modify fr | en | ...``
}

UPDATE_ROUTE

Change the current route in router:

{
    type: 'UPDATE_ROUTE',
    name: ``route name``,
    params: {
        ``route param``,
        ...
    }
}

or

{
    type: 'UPDATE_ROUTE',
    path: ``path in router``
}

RELOAD

Reload the furetui client