diff --git a/src/ui/client/builder/pages/bans.py b/src/ui/client/builder/pages/bans.py new file mode 100644 index 000000000..24abd6e20 --- /dev/null +++ b/src/ui/client/builder/pages/bans.py @@ -0,0 +1,384 @@ +from .utils.widgets import ( + button_widget, + button_group_widget, + title_widget, + subtitle_widget, + text_widget, + tabulator_widget, + unmatch_widget, + datepicker_widget, + checkbox_widget, +) +from .utils.table import add_column +from .utils.format import get_fields_from_field +from typing import Optional + + +def bans_tabs(): + return { + "type": "tabs", + "widgets": [ + button_group_widget( + buttons=[ + button_widget( + text="bans_tab_list", + display=["main", 1], + size="tab", + color="info", + iconColor="white", + iconName="list", + ), + button_widget( + text="bans_tab_add", + color="success", + display=["main", 2], + size="tab", + iconColor="white", + iconName="plus", + ), + ] + ) + ], + } + + +def ban_item(id: str, ip: str, reason: str, ban_start_date: int, ban_end_date: int, remain: str) -> dict: + return { + "check": get_fields_from_field( + checkbox_widget( + id=f"check-ban-{id}", + name=f"check-ban-{id}", + label="bans_ban_check", # keep it (a18n) + hideLabel=True, + value="no", + columns={"pc": 12, "tablet": 12, "mobile": 12}, + ) + ), + "ip": text_widget(text=ip)["data"], + "reason": text_widget(text=reason)["data"], + "ban_start_date": get_fields_from_field( + datepicker_widget( + id=f"datepicker-ban-start-{id}", + name=f"datepicker-ban-start-{id}", + label="bans_ban_start_date", # keep it (a18n) + hideLabel=True, + value=ban_start_date, + disabled=True, # Readonly + columns={"pc": 12, "tablet": 12, "mobile": 12}, + ) + ), + "ban_end_date": get_fields_from_field( + datepicker_widget( + id=f"datepicker-ban-end-{id}", + name=f"datepicker-ban-end-{id}", + label="bans_ban_end_date", # keep it (a18n) + hideLabel=True, + value=ban_end_date, + disabled=True, # Readonly + ) + ), + "remain": text_widget(text=remain)["data"], + } + + +def bans_items(bans: Optional[list] = None) -> list: + + if bans is None or len(bans) == 0: + return [] + + items = [] + for index, item in enumerate(bans): + items.append( + ban_item( + id=index, + ip=item.get("ip"), + reason=item.get("reason"), + ban_start_date=item.get("ban_start_date"), + ban_end_date=item.get("ban_end_date"), + remain=item.get("remain"), + ) + ) + + return items + + +def bans_filters(reasons: Optional[list] = None, remains: Optional[list] = None) -> list: + + filters = [ + { + "type": "like", + "fields": ["ip"], + "setting": { + "id": "input-search-ip", + "name": "input-search-ip", + "label": "bans_search_ip", # keep it (a18n) + "value": "", + "inpType": "input", + "columns": {"pc": 3, "tablet": 4, "mobile": 12}, + "popovers": [ + { + "iconName": "info", + "text": "bans_search_ip_desc", + } + ], + }, + }, + ] + + # Case "all" ans + if reasons is not None and len(reasons) >= 2: + filters.append( + { + "type": "=", + "fields": ["reason"], + "setting": { + "id": "select-ban-reason", + "name": "select-ban-reason", + "label": "bans_select_reason", # keep it (a18n) + "value": "all", # keep "all" + "values": ["all"] + reasons, # keep "all" and add your reasons dynamically + "inpType": "select", + "onlyDown": True, + "columns": {"pc": 3, "tablet": 4, "mobile": 12}, + "popovers": [ + { + "iconName": "info", + "text": "bans_select_reason_desc", + } + ], + }, + }, + ) + + if remains is not None and len(remains) >= 2: + filters.append( + { + "type": "=", + "fields": ["remain"], + "setting": { + "id": "select-ban-remain", + "name": "select-ban-remain", + "label": "bans_select_remain", # keep it (a18n) + "value": "all", # keep "all" + "values": ["all"] + remains, # keep everything and format bans to fit in one remain category + "inpType": "select", + "onlyDown": True, + "columns": {"pc": 3, "tablet": 4, "mobile": 12}, + "popovers": [ + { + "iconName": "info", + "text": "bans_select_remain_desc", + } + ], + }, + }, + ) + + return filters + + +def bans_list(bans: Optional[list] = None, reasons: Optional[list] = None, remains: Optional[list] = None) -> dict: + if bans is None or len(bans) == 0: + return { + "type": "card", + "gridLayoutClass": "transparent", + "widgets": [ + unmatch_widget(text="bans_not_found"), + ], + } + + actions_table_list = [ + # Need to create a script on Page.vue level to add a row on click + # + We need to retrieve from the first item a schema to add any new row + button_widget( + id="select-all-list", + type="button", + text="action_select_all", # keep it (a18n) + color="success", + iconColor="white", + iconName="check", + size="sm", + attrs={"data-select-rows": ""}, # we will use this attrs to add a new row + ), + button_widget( + id="unselect-all-list", + type="button", + text="action_unselect_all", # keep it (a18n) + color="delete", + iconColor="white", + iconName="uncheck", + size="sm", + attrs={"data-unselect-rows": ""}, # we will use this attrs to add a new row + ), + ] + + bans_columns = [ + add_column(title="", field="check", formatter="fields", maxWidth=80), + add_column(title="IP", field="ip", formatter="text"), + add_column(title="Reason", field="reason", formatter="text"), + add_column(title="Ban start date", field="ban_start_date", formatter="fields", minWidth=250), + add_column(title="Ban end date", field="ban_end_date", formatter="fields", minWidth=250), + add_column(title="Remain", field="remain", formatter="text"), + ] + + return { + "type": "card", + "display": ["main", 1], + "widgets": [ + title_widget("bans_list_title"), # keep it (a18n) + subtitle_widget("bans_list_subtitle"), # keep it (a18n) + tabulator_widget( + id="table-bans-list", + actionsButtons=actions_table_list, + columns=bans_columns, + items=bans_items(bans), + filters=bans_filters(reasons=reasons, remains=remains), + layout="fitColumns", + ), + button_group_widget( + buttons=[ + button_widget( + id="unban-btn", + type="button", + text="action_unban", # keep it (a18n) + color="success", + size="normal", + modal={ + "widgets": [ + title_widget(title="bans_unban_title"), # keep it (a18n) + text_widget(text="bans_unban_subtitle"), # keep it (a18n) + button_group_widget( + buttons=[ + button_widget( + id="close-unban-btn", + text="action_close", # keep it (a18n) + color="close", + size="normal", + attrs={"data-close-modal": ""}, # a11y + ), + button_widget( + id="unban-btn-confirm", + text="action_unban", # keep it (a18n) + color="success", + size="normal", + attrs={"data-unban": ""}, + ), + ] + ), + ], + }, + ), + ] + ), + ], + } + + +def bans_add() -> dict: + + bans_add_table_actions = [ + # Need to create a script on Page.vue level to add a row on click + # + We need to retrieve from the first item a schema to add any new row + button_widget( + id="add-bans-entry-btn", + type="button", + text="action_entry", # keep it (a18n) + color="success", + iconColor="white", + iconName="plus", + size="sm", + attrs={"data-add-row": ""}, # we will use this attrs to add a new row + ), + # Need to create a script on Page.vue level to delete all rows + button_widget( + id="add-bans-delete-all-btn", + type="button", + text="action_delete_all", # keep it (a18n) + color="error", + iconColor="white", + iconName="trash", + size="sm", + attrs={"data-delete-all": ""}, # we will use this attrs to add a new row + ), + ] + + bans_add_columns = [ + add_column(title="IP", field="ip", formatter="fields"), + add_column(title="Ban end", field="ban_end", formatter="fields"), + add_column(title="delete", field="delete", formatter="buttongroup", maxWidth=100), + ] + + default_add_ban = [ + { + "id": 1, + "ip": get_fields_from_field( + datepicker_widget( + id="datepicker-add-ban-ip-1", + name="datepicker-add-ban-ip-1", + label="bans_add_ban_ip", # keep it (a18n) + hideLabel=True, + value="", + columns={"pc": 12, "tablet": 12, "mobile": 12}, + ) + ), + "ban_end": get_fields_from_field( + datepicker_widget( + id="datepicker-add-ban-end-1", + name="datepicker-add-ban-end-1", + label="bans_add_end_date", # keep it (a18n) + hideLabel=True, + value="", + ) + ), + # Need to create a script on Page.vue level to retrive table data and remove by id + "delete": button_group_widget( + buttons=[ + button_widget( + id="delete-ban-1", + type="button", + text="action_delete", # keep it (a18n) + hideText=True, + iconName="trash", + iconColor="white", + color="error", + size="normal", + attrs={"data-delete-row": "1"}, # we will use this attrs to remove the row + ), + ] + )["data"], + } + ] + + add_ban_action = button_group_widget( + buttons=[ + button_widget( + id="add-bans-btn", + type="button", + text="action_save", # keep it (a18n) + color="success", + size="normal", + ) + ] + ) + + return { + "type": "card", + "display": ["main", 2], + "widgets": [ + title_widget("bans_add_title"), # keep it (a18n) + subtitle_widget("bans_add_subtitle"), # keep it (a18n) + tabulator_widget( + id="table-register-plugins", columns=bans_add_columns, items=default_add_ban, layout="fitColumns", actionsButtons=bans_add_table_actions + ), + add_ban_action, + ], + } + + +def bans_builder(bans: Optional[list] = None, reasons: Optional[list] = None, remains: Optional[list] = None) -> list: + return [ + # Tabs is button group with display value and a size tab inside a tabs container + bans_tabs(), + bans_list(bans=bans, reasons=reasons, remains=remains), + bans_add(), + ] diff --git a/src/ui/client/builder/pages/bans2.py b/src/ui/client/builder/pages/bans2.py deleted file mode 100644 index 91fb3bdf5..000000000 --- a/src/ui/client/builder/pages/bans2.py +++ /dev/null @@ -1,297 +0,0 @@ -from .utils.widgets import button_widget, button_group_widget, title_widget, text_widget, tabulator_widget, datepicker_widget -from .utils.table import add_column -from .utils.format import get_fields_from_field -from typing import Optional - -bans_columns = [ - add_column(title="IP", field="ip", formatter="text"), - add_column(title="Reason", field="reason", formatter="text"), - add_column(title="Ban start date", field="ban_start_date", formatter="fields"), - add_column(title="Ban end date", field="ban_end_date", formatter="fields"), - add_column(title="Remain", field="remain", formatter="text"), -] - - -def bans_filters(reasons: Optional[list] = None, remains: Optional[list] = None) -> list: - - filters = [ - { - "type": "like", - "fields": ["ip"], - "setting": { - "id": "input-search-ip", - "name": "input-search-ip", - "label": "bans_search_ip", # keep it (a18n) - "value": "", - "inpType": "input", - "columns": {"pc": 3, "tablet": 4, "mobile": 12}, - }, - }, - ] - - # Case "all" ans - if reasons is not None and len(reasons) >= 2: - filters.append( - { - "type": "=", - "fields": ["reason"], - "setting": { - "id": "select-ban-reason", - "name": "select-ban-reason", - "label": "bans_select_reason", # keep it (a18n) - "value": "all", # keep "all" - "values": ["all"] + reasons, # keep "all" and add your reasons dynamically - "inpType": "select", - "onlyDown": True, - "columns": {"pc": 3, "tablet": 4, "mobile": 12}, - }, - }, - ) - - if remains is not None and len(remains) >= 2: - filters.append( - { - "type": "=", - "fields": ["remain"], - "setting": { - "id": "select-ban-remain", - "name": "select-ban-remain", - "label": "bans_select_remain", # keep it (a18n) - "value": "all", # keep "all" - "values": ["all"] + remains, # keep everything and format bans to fit in one remain category - "inpType": "select", - "onlyDown": True, - "columns": {"pc": 3, "tablet": 4, "mobile": 12}, - }, - }, - ) - - return filters - - -def ban_item(id: str, ip: str, reason: str, ban_start_date: int, ban_end_date: int, remain: str) -> dict: - return ( - { - "ip": text_widget(text=ip)["data"], - "reason": text_widget(text=reason)["data"], - "ban_start_date": get_fields_from_field( - datepicker_widget( - id=f"datepicker-ban-start-{id}", - name=f"datepicker-ban-start-{id}", - label="bans_ban_start_date", # keep it (a18n) - hideLabel=True, - value=ban_start_date, - disabled=True, # Readonly - columns={"pc": 12, "tablet": 12, "mobile": 12}, - ) - ), - "ban_end_date": get_fields_from_field( - datepicker_widget( - id=f"datepicker-ban-end-{id}", - name=f"datepicker-ban-end-{id}", - label="bans_ban_end_date", # keep it (a18n) - hideLabel=True, - value=ban_end_date, - disabled=True, # Readonly - ) - ), - "remain": text_widget(text=remain)["data"], - }, - ) - - -def bans_items(items: list) -> list: - items = [] - for index, item in enumerate(items): - items.append( - ban_item( - id=index, - ip=item.get("ip"), - reason=item.get("reason"), - ban_start_date=item.get("ban_start_date"), - ban_end_date=item.get("ban_end_date"), - remain=item.get("remain"), - ) - ) - - return items - - -bans_add_columns = [ - add_column(title="IP", field="ip", formatter="fields"), - add_column(title="Ban end", field="ban_end", formatter="fields"), -] - - -default_add_ban = [ - { - "id": 1, - "ip": get_fields_from_field( - datepicker_widget( - id="datepicker-add-ban-ip-1", - name="datepicker-add-ban-ip-1", - label="bans_add_ban_ip", # keep it (a18n) - hideLabel=True, - value="", - columns={"pc": 12, "tablet": 12, "mobile": 12}, - ) - ), - "ban_end": get_fields_from_field( - datepicker_widget( - id="datepicker-add-ban-end-1", - name="datepicker-add-ban-end-1", - label="bans_add_end_date", # keep it (a18n) - hideLabel=True, - value="", - ) - ), - # Need to create a script on Page.vue level to retrive table data and remove by id - "delete": button_group_widget( - buttons=[ - button_widget( - id="delete-ban-1", - type="button", - text="action_delete", # keep it (a18n) - hideText=True, - iconName="trash", - iconColor="white", - color="error", - size="normal", - attrs={"data-delete-row": "1"}, # we will use this attrs to remove the row - ), - ] - ), - } -] - - -bans_add_table_actions = button_group_widget( - buttons=[ - # Need to create a script on Page.vue level to add a row on click - # + We need to retrieve from the first item a schema to add any new row - button_widget( - id="add-bans-entry-btn", - type="button", - text="action_entry", # keep it (a18n) - color="success", - iconColor="white", - iconName="plus", - size="normal", - attrs={"data-add-row": ""}, # we will use this attrs to add a new row - ), - # Need to create a script on Page.vue level to delete all rows - button_widget( - id="add-bans-delete-all-btn", - type="button", - text="action_delete_all", # keep it (a18n) - color="error", - iconColor="white", - iconName="trash", - size="normal", - attrs={"data-delete-all": ""}, # we will use this attrs to add a new row - ), - ] -) - -# Need to create a script on Page.vue level to handle the unban form submission -# Need to retrieve table data, format it to send to the server -# We need to execute only when modal confirm is click (id="unban-btn-confirm") -unban_action = ( - button_widget( - id="unban-btn", - type="button", - text="action_unban", # keep it (a18n) - color="success", - size="normal", - modal={ - "widgets": [ - title_widget(title="bans_unban_title"), # keep it (a18n) - text_widget(text="bans_unban_subtitle"), # keep it (a18n) - button_group_widget( - buttons=[ - button_widget( - id="close-unban-btn", - text="action_close", # keep it (a18n) - color="close", - size="normal", - attrs={"data-close-modal": ""}, # a11y - )["data"], - button_widget( - id="unban-btn-confirm", - text="action_unban", # keep it (a18n) - color="success", - size="normal", - )["data"], - ] - ), - ], - }, - ), -) - -# Need to create a script on Page.vue level to handle the form submission -# Need to retrieve table data, format it to send to the serve -add_ban_action = ( - button_widget( - id="add-bans-btn", - type="button", - text="action_add_bans", # keep it (a18n) - color="success", - size="normal", - ), -) - - -def bans_tabs(): - return [ - button_widget( - text="bans_tab_list", - display=["main", 1], - size="tab", - iconColor="white", - iconName="list", - ), - button_widget( - text="bans_tab_add", - display=["main", 2], - size="tab", - iconColor="white", - iconName="plus", - ), - ] - - -def bans_builder(bans: list, reasons: list, remains: list) -> list: - return [ - # Tabs is button group with display value and a size tab inside a tabs container - { - "type": "tabs", - "widgets": [button_group_widget(buttons=bans_tabs())], - }, - { - "type": "card", - "display": ["main", 1], - "widgets": [ - tabulator_widget( - id="table-bans-list", - columns=bans_columns, - items=bans_items(bans), - filters=bans_filters(reasons=reasons, remains=remains), - ), - unban_action, - ], - }, - { - "type": "card", - "display": ["main", 2], - "widgets": [ - bans_add_table_actions, - tabulator_widget( - id="table-register-plugins", - columns=bans_add_columns, - items=default_add_ban, - ), - add_ban_action, - ], - }, - ] diff --git a/src/ui/client/builder/pages/reports.py b/src/ui/client/builder/pages/reports.py index f1d25bd16..c1d0ad299 100644 --- a/src/ui/client/builder/pages/reports.py +++ b/src/ui/client/builder/pages/reports.py @@ -168,7 +168,7 @@ def reports_builder( reports: list, reasons: Optional[list] = None, countries: Optional[list] = None, methods: Optional[list] = None, codes: Optional[list] = None ) -> str: - if reasons is None or len(reasons) == 0: + if reports is None or len(reports) == 0: return { "type": "card", "gridLayoutClass": "transparent", diff --git a/src/ui/client/builder/pages/utils/table.py b/src/ui/client/builder/pages/utils/table.py index 52f278e9c..30494129d 100644 --- a/src/ui/client/builder/pages/utils/table.py +++ b/src/ui/client/builder/pages/utils/table.py @@ -1,4 +1,4 @@ -def add_column(title, field, formatter="", minWidth=None): +def add_column(title, field, formatter="", minWidth=None, maxWidth=None, visible=None): col = {"title": title, "field": field} @@ -8,4 +8,10 @@ def add_column(title, field, formatter="", minWidth=None): if minWidth: col["minWidth"] = minWidth + if maxWidth: + col["maxWidth"] = maxWidth + + if visible is not None: + col["visible"] = visible + return col diff --git a/src/ui/client/builder/pages/utils/widgets.py b/src/ui/client/builder/pages/utils/widgets.py index 8bbdd7850..01d91e457 100644 --- a/src/ui/client/builder/pages/utils/widgets.py +++ b/src/ui/client/builder/pages/utils/widgets.py @@ -1,29 +1,32 @@ -from typing import Union, Optional +from typing import Union, Optional # Add params to data dict only if value is not the default one def add_key_value(data, key, value, default): if value == default: return data[key] = value - - + def advanced_widget( - template: dict, containerClass: str = "", operation: str = "edit", oldServerName: str = "", columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"} -): - """ + template: dict, + containerClass: str = "", + operation: str = "edit", + oldServerName: str = "", + columns: dict = {"pc":"12","tablet":"12","mobile":"12"} + ): + """ This component is used to create a complete advanced form with plugin selection. - + PARAMETERS - + - `template` **Object** Template object with plugin and settings data. - `containerClass` **string** Container additional class (optional, default `""`) - `operation` **string** Operation type (edit, new, delete). (optional, default `"edit"`) - `oldServerName` **string** Old server name. This is a server name before any changes. (optional, default `""`) - `columns` **Object** Columns object. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`) - + EXAMPLE - + { template: [ { @@ -50,25 +53,21 @@ def advanced_widget( }, ], } - + """ data = { - "template": template, - } + "template" : template, + } + # List of params that will be add only if not default value - list_params = [ - ("containerClass", containerClass, ""), - ("operation", operation, "edit"), - ("oldServerName", oldServerName, ""), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ] + list_params = [("containerClass", containerClass, ""),("operation", operation, "edit"),("oldServerName", oldServerName, ""),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Advanced", "data": data} - + return { "type" : "Advanced", "data" : data } + def button_widget( text: str, @@ -84,13 +83,13 @@ def button_widget( attrs: Optional[dict] = None, modal: Union[dict, bool] = False, tabId: Union[str, int] = "", - containerClass: str = "", -): - """ + containerClass: str = "" + ): + """ This component is a standard button. - + PARAMETERS - + - `id` **String** Unique id of the button (optional, default `uuidv4()`) - `text` **String** Content of the button. Can be a translation key or by default raw text. - `display` **Array** Case display, we will update the display store with the given array. Useful when we want to use button as tabs. (optional, default `[]`) @@ -105,9 +104,9 @@ def button_widget( - `modal` **(Object | boolean)** We can link the button to a Modal component. We need to pass the widgets inside the modal. Button click will open the modal. (optional, default `false`) - `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`) - `containerClass` **String** Additional class to the container (optional, default `""`) - + EXAMPLE - + { id: "open-modal-btn", text: "Open modal", @@ -118,48 +117,38 @@ def button_widget( iconName: "modal", attrs: { data-toggle: "modal", "data-target": "#modal"}, } - + """ data = { - "text": text, - } + "text" : text, + } + # List of params that will be add only if not default value - list_params = [ - ("id", id, ""), - ("display", display, None), - ("type", type, "button"), - ("disabled", disabled, False), - ("hideText", hideText, False), - ("color", color, "primary"), - ("iconColor", iconColor, ""), - ("size", size, "normal"), - ("iconName", iconName, ""), - ("attrs", attrs, None), - ("modal", modal, False), - ("tabId", tabId, ""), - ("containerClass", containerClass, ""), - ] + list_params = [("id", id, ""),("display", display, None),("type", type, "button"),("disabled", disabled, False),("hideText", hideText, False),("color", color, "primary"),("iconColor", iconColor, ""),("size", size, "normal"),("iconName", iconName, ""),("attrs", attrs, None),("modal", modal, False),("tabId", tabId, ""),("containerClass", containerClass, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Button", "data": data} + return { "type" : "Button", "data" : data } + - -def button_group_widget(buttons: list, boutonGroupClass: str = ""): - """ +def button_group_widget( + buttons: list, + boutonGroupClass: str = "" + ): + """ This component allow to display multiple buttons in the same row using flex. We can define additional class too for the flex container. We need a list of buttons to display. - + PARAMETERS - + - `buttons` **Array** List of buttons to display. Button component is used. - `boutonGroupClass` **String** Additional class for the flex container (optional, default `""`) - + EXAMPLE - + { id: "group-btn", boutonGroupClass : "justify-center", @@ -186,32 +175,36 @@ def button_group_widget(buttons: list, boutonGroupClass: str = ""): }, ], } - + """ data = { - "buttons": buttons, - } + "buttons" : buttons, + } + # List of params that will be add only if not default value list_params = [("boutonGroupClass", boutonGroupClass, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Buttongroup", "data": data} + return { "type" : "Buttongroup", "data" : data } + - -def cell_widget(type: str, data: dict): - """ +def cell_widget( + type: str, + data: dict + ): + """ This component includes all elements that can be shown in a table cell. - + PARAMETERS - + - `type` **String** The type of the cell. This needs to be a Vue component. - `data` **Object** The data to display in the cell. This needs to be the props of the Vue component. - + EXAMPLE - + { type : "button", data : { @@ -225,16 +218,17 @@ def cell_widget(type: str, data: dict): attrs: { data-toggle: "modal", "data-target": "#modal"}, } } - + """ data = { - "type": type, - "data": data, - } + "type" : type, + "data" : data, + } - return {"type": "Cell", "data": data} + return { "type" : "Cell", "data" : data } + def checkbox_widget( label: str, @@ -246,20 +240,20 @@ def checkbox_widget( inpType: str = "checkbox", disabled: bool = False, required: bool = False, - columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"}, + columns: dict = {"pc":"12","tablet":"12","mobile":"12"}, hideLabel: bool = False, containerClass: str = "", headerClass: str = "", inpClass: str = "", - tabId: Union[str, int] = "", -): - """ + tabId: Union[str, int] = "" + ): + """ This component is used to create a complete checkbox field input with error handling and label. We can also add popover to display more information. It is mainly use in forms. - + PARAMETERS - + - `id` **String** Unique id (optional, default `uuidv4()`) - `label` **String** The label of the field. Can be a translation key or by default raw text. - `name` **String** The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text. @@ -275,9 +269,9 @@ def checkbox_widget( - `headerClass` **String** (optional, default `""`) - `inpClass` **String** (optional, default `""`) - `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`) - + EXAMPLE - + { columns : {"pc": 6, "tablet": 12, "mobile": 12}, id:"test-check", @@ -295,51 +289,45 @@ def checkbox_widget( }, ] } - + """ data = { - "label": label, - "name": name, - "value": value, - } + "label" : label, + "name" : name, + "value" : value, + } + # List of params that will be add only if not default value - list_params = [ - ("id", id, ""), - ("attrs", attrs, None), - ("popovers", popovers, None), - ("inpType", inpType, "checkbox"), - ("disabled", disabled, False), - ("required", required, False), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ("hideLabel", hideLabel, False), - ("containerClass", containerClass, ""), - ("headerClass", headerClass, ""), - ("inpClass", inpClass, ""), - ("tabId", tabId, ""), - ] + list_params = [("id", id, ""),("attrs", attrs, None),("popovers", popovers, None),("inpType", inpType, "checkbox"),("disabled", disabled, False),("required", required, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("headerClass", headerClass, ""),("inpClass", inpClass, ""),("tabId", tabId, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Checkbox", "data": data} + return { "type" : "Checkbox", "data" : data } + - -def clipboard_widget(id: str = "", isClipboard: bool = False, valueToCopy: str = "", clipboadClass: str = "", copyClass: str = ""): - """ +def clipboard_widget( + id: str = "", + isClipboard: bool = False, + valueToCopy: str = "", + clipboadClass: str = "", + copyClass: str = "" + ): + """ This component can be add to some fields to allow to copy the value of the field. Additional clipboardClass and copyClass can be added to fit the parent container. - + PARAMETERS - + - `id` **String** Unique id (optional, default `uuidv4()`) - `isClipboard` **Boolean** Display a clipboard button to copy a value (optional, default `false`) - `valueToCopy` **String** The value to copy (optional, default `""`) - `clipboadClass` **String** Additional class for the clipboard container. Useful to fit the component in a specific container. (optional, default `""`) - `copyClass` **String** The class of the copy message. Useful to fit the component in a specific container. (optional, default `""`) - + EXAMPLE - + { id: 'test-input', isClipboard: true, @@ -347,24 +335,20 @@ def clipboard_widget(id: str = "", isClipboard: bool = False, valueToCopy: str = clipboadClass: 'mx-2', copyClass: 'mt-2', } - + """ - data = {} + data = { + } + # List of params that will be add only if not default value - list_params = [ - ("id", id, ""), - ("isClipboard", isClipboard, False), - ("valueToCopy", valueToCopy, ""), - ("clipboadClass", clipboadClass, ""), - ("copyClass", copyClass, ""), - ] + list_params = [("id", id, ""),("isClipboard", isClipboard, False),("valueToCopy", valueToCopy, ""),("clipboadClass", clipboadClass, ""),("copyClass", copyClass, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Clipboard", "data": data} - + return { "type" : "Clipboard", "data" : data } + def combobox_widget( label: str, @@ -379,22 +363,22 @@ def combobox_widget( disabled: bool = False, required: bool = False, requiredValues: Optional[list] = None, - columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"}, + columns: dict = {"pc":"12","tablet":"12","mobile":"12"}, hideLabel: bool = False, onlyDown: bool = False, overflowAttrEl: bool = "", containerClass: str = "", inpClass: str = "", headerClass: str = "", - tabId: Union[str, int] = "", -): - """ + tabId: Union[str, int] = "" + ): + """ This component is used to create a complete combobox field input with error handling and label. We can be more precise by adding values that need to be selected to be valid. We can also add popover to display more information. - + PARAMETERS - + - `id` **String** Unique id (optional, default `uuidv4()`) - `label` **String** The label of the field. Can be a translation key or by default raw text. - `name` **String** The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text. @@ -415,9 +399,9 @@ def combobox_widget( - `inpClass` **String** (optional, default `""`) - `headerClass` **String** (optional, default `""`) - `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`) - + EXAMPLE - + { id: 'test-input', value: 'yes', @@ -435,80 +419,64 @@ def combobox_widget( }, ] } - + """ data = { - "label": label, - "name": name, - "value": value, - "values": values, - } + "label" : label, + "name" : name, + "value" : value, + "values" : values, + } + # List of params that will be add only if not default value - list_params = [ - ("id", id, ""), - ("attrs", attrs, None), - ("maxBtnChars", maxBtnChars, ""), - ("popovers", popovers, None), - ("inpType", inpType, "select"), - ("disabled", disabled, False), - ("required", required, False), - ("requiredValues", requiredValues, None), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ("hideLabel", hideLabel, False), - ("onlyDown", onlyDown, False), - ("overflowAttrEl", overflowAttrEl, ""), - ("containerClass", containerClass, ""), - ("inpClass", inpClass, ""), - ("headerClass", headerClass, ""), - ("tabId", tabId, ""), - ] + list_params = [("id", id, ""),("attrs", attrs, None),("maxBtnChars", maxBtnChars, ""),("popovers", popovers, None),("inpType", inpType, "select"),("disabled", disabled, False),("required", required, False),("requiredValues", requiredValues, None),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Combobox", "data": data} - + return { "type" : "Combobox", "data" : data } + def container_widget( - containerClass: str = "", columns: Union[dict, bool] = {"pc": "12", "tablet": "12", "mobile": "12"}, tag: str = "div", display: Optional[list] = None -): - """ + containerClass: str = "", + columns: Union[dict, bool] = {"pc":"12","tablet":"12","mobile":"12"}, + tag: str = "div", + display: Optional[list] = None + ): + """ This component is a basic container that can be used to wrap other components. In case we are working with grid system, we can add columns to position the container. We can define additional class too. This component is mainly use as widget container. - + PARAMETERS - + - `containerClass` **String** Additional class (optional, default `""`) - `columns` **(Object | boolean)** Work with grid system { pc: 12, tablet: 12, mobile: 12} (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`) - `tag` **String** The tag for the container (optional, default `"div"`) - `display` **Array** Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`) - + EXAMPLE - + { containerClass: "w-full h-full bg-white rounded shadow-md", columns: { pc: 12, tablet: 12, mobile: 12} } - + """ - data = {} + data = { + } + # List of params that will be add only if not default value - list_params = [ - ("containerClass", containerClass, ""), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ("tag", tag, "div"), - ("display", display, None), - ] + list_params = [("containerClass", containerClass, ""),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("tag", tag, "div"),("display", display, None)] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Container", "data": data} - + return { "type" : "Container", "data" : data } + def datepicker_widget( label: str, @@ -522,21 +490,21 @@ def datepicker_widget( maxDate: int = "", isClipboard: bool = True, hideLabel: bool = False, - columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"}, + columns: dict = {"pc":"12","tablet":"12","mobile":"12"}, disabled: bool = False, required: bool = False, headerClass: str = "", containerClass: str = "", - tabId: Union[str, int] = "", -): - """ + tabId: Union[str, int] = "" + ): + """ This component is used to create a complete datepicker field input with error handling and label. You can define a default date, a min and max date, and a format. We can also add popover to display more information. It is mainly use in forms. - + PARAMETERS - + - `id` **String** Unique id (optional, default `uuidv4()`) - `label` **String** The label of the field. Can be a translation key or by default raw text. - `name` **String** The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text. @@ -554,9 +522,9 @@ def datepicker_widget( - `headerClass` **String** (optional, default `""`) - `containerClass` **String** (optional, default `""`) - `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`) - + EXAMPLE - + { id: 'test-date', columns : {"pc": 6, "tablet": 12, "mobile": 12}, @@ -574,50 +542,39 @@ def datepicker_widget( }, ], } - + """ data = { - "label": label, - "name": name, - } + "label" : label, + "name" : name, + } + # List of params that will be add only if not default value - list_params = [ - ("id", id, ""), - ("popovers", popovers, None), - ("attrs", attrs, None), - ("inpType", inpType, "datepicker"), - ("value", value, ""), - ("minDate", minDate, ""), - ("maxDate", maxDate, ""), - ("isClipboard", isClipboard, True), - ("hideLabel", hideLabel, False), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ("disabled", disabled, False), - ("required", required, False), - ("headerClass", headerClass, ""), - ("containerClass", containerClass, ""), - ("tabId", tabId, ""), - ] + list_params = [("id", id, ""),("popovers", popovers, None),("attrs", attrs, None),("inpType", inpType, "datepicker"),("value", value, ""),("minDate", minDate, ""),("maxDate", maxDate, ""),("isClipboard", isClipboard, True),("hideLabel", hideLabel, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("disabled", disabled, False),("required", required, False),("headerClass", headerClass, ""),("containerClass", containerClass, ""),("tabId", tabId, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Datepicker", "data": data} + return { "type" : "Datepicker", "data" : data } + - -def details_widget(columns, details: str, filters: Optional[list] = None): - """ +def details_widget( + columns, + details: str, + filters: Optional[list] = None + ): + """ This component is a list of items separate on two columns : one for the title, and other for a list of popovers related to the plugin (type, link...) - + PARAMETERS - + - `details` **string** List of details item that contains a text, disabled state, attrs and list of popovers. We can also add a disabled key to disable the item. - `filters` **array** List of filters to apply on the list of items. (optional, default `[]`) - `columns` **columns** Determine the position of the items in the grid system. (optional, default `{"pc":"4","tablet":"6","mobile":"12"}`) - + EXAMPLE - + { details : [{ text: "name", @@ -637,37 +594,42 @@ def details_widget(columns, details: str, filters: Optional[list] = None): }, ], }] - + """ data = { - "details": details, - } + "details" : details, + } + # List of params that will be add only if not default value - list_params = [("columns", columns, {"pc": "4", "tablet": "6", "mobile": "12"}), ("filters", filters, None)] + list_params = [("columns", columns, {"pc":"4","tablet":"6","mobile":"12"}),("filters", filters, None)] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Details", "data": data} - + return { "type" : "Details", "data" : data } + def easy_widget( - template: dict, containerClass: str = "", operation: str = "edit", oldServerName: str = "", columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"} -): - """ + template: dict, + containerClass: str = "", + operation: str = "edit", + oldServerName: str = "", + columns: dict = {"pc":"12","tablet":"12","mobile":"12"} + ): + """ This component is used to create a complete easy form with plugin selection. - + PARAMETERS - + - `template` **Object** Template object with plugin and settings data. - `containerClass` **string** Container additional class (optional, default `""`) - `operation` **string** Operation type (edit, new, delete). (optional, default `"edit"`) - `oldServerName` **string** Old server name. This is a server name before any changes. (optional, default `""`) - `columns` **Object** Columns object. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`) - + EXAMPLE - + { template: [ { @@ -694,25 +656,21 @@ def easy_widget( }, ], } - + """ data = { - "template": template, - } + "template" : template, + } + # List of params that will be add only if not default value - list_params = [ - ("containerClass", containerClass, ""), - ("operation", operation, "edit"), - ("oldServerName", oldServerName, ""), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ] + list_params = [("containerClass", containerClass, ""),("operation", operation, "edit"),("oldServerName", oldServerName, ""),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Easy", "data": data} - + return { "type" : "Easy", "data" : data } + def editor_widget( label: str, @@ -722,7 +680,7 @@ def editor_widget( attrs: Optional[dict] = None, popovers: Optional[list] = None, inpType: str = "editor", - columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"}, + columns: dict = {"pc":"12","tablet":"12","mobile":"12"}, pattern: str = "", disabled: bool = False, required: bool = False, @@ -731,15 +689,15 @@ def editor_widget( containerClass: str = "", editorClass: str = "", headerClass: str = "", - tabId: Union[str, int] = "", -): - """ + tabId: Union[str, int] = "" + ): + """ This component is used to create a complete editor field with error handling and label. We can also add popover to display more information. It is mainly use in forms. - + PARAMETERS - + - `id` **String** Unique id (optional, default `uuidv4()`) - `label` **String** The label of the field. Can be a translation key or by default raw text. - `name` **String** The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text. @@ -757,9 +715,9 @@ def editor_widget( - `editorClass` **String** (optional, default `""`) - `headerClass` **String** (optional, default `""`) - `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`) - + EXAMPLE - + { id: "test-editor", value: "yes", @@ -771,46 +729,40 @@ def editor_widget( tabId: "1", columns: { pc: 12, tablet: 12, mobile: 12 }, }; - + """ data = { - "label": label, - "name": name, - "value": value, - } + "label" : label, + "name" : name, + "value" : value, + } + # List of params that will be add only if not default value - list_params = [ - ("id", id, ""), - ("attrs", attrs, None), - ("popovers", popovers, None), - ("inpType", inpType, "editor"), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ("pattern", pattern, ""), - ("disabled", disabled, False), - ("required", required, False), - ("isClipboard", isClipboard, True), - ("hideLabel", hideLabel, False), - ("containerClass", containerClass, ""), - ("editorClass", editorClass, ""), - ("headerClass", headerClass, ""), - ("tabId", tabId, ""), - ] + list_params = [("id", id, ""),("attrs", attrs, None),("popovers", popovers, None),("inpType", inpType, "editor"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("pattern", pattern, ""),("disabled", disabled, False),("required", required, False),("isClipboard", isClipboard, True),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("editorClass", editorClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Editor", "data": data} + return { "type" : "Editor", "data" : data } + - -def field_widget(label: str, id: str, name: str, popovers: Optional[list] = None, required: bool = False, hideLabel: bool = False, headerClass: str = ""): - """ +def field_widget( + label: str, + id: str, + name: str, + popovers: Optional[list] = None, + required: bool = False, + hideLabel: bool = False, + headerClass: str = "" + ): + """ This component is used with field in order to link a label to field type. We can add popover to display more information. Always use with field component. - + PARAMETERS - + - `label` **String** The label of the field. Can be a translation key or by default raw text. - `id` **String** The id of the field. This is used to link the label to the field. - `name` **String** The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text. @@ -818,9 +770,9 @@ def field_widget(label: str, id: str, name: str, popovers: Optional[list] = None - `required` **Boolean** (optional, default `false`) - `hideLabel` **Boolean** (optional, default `false`) - `headerClass` **String** (optional, default `""`) - + EXAMPLE - + { label: 'Test', version : "0.1.0", @@ -833,33 +785,36 @@ def field_widget(label: str, id: str, name: str, popovers: Optional[list] = None }, ], } - + """ data = { - "label": label, - "id": id, - "name": name, - } + "label" : label, + "id" : id, + "name" : name, + } + # List of params that will be add only if not default value - list_params = [("popovers", popovers, None), ("required", required, False), ("hideLabel", hideLabel, False), ("headerClass", headerClass, "")] + list_params = [("popovers", popovers, None),("required", required, False),("hideLabel", hideLabel, False),("headerClass", headerClass, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Field", "data": data} + return { "type" : "Field", "data" : data } + - -def fields_widget(setting: dict): - """ +def fields_widget( + setting: dict + ): + """ This component wraps all available fields for a form. - + PARAMETERS - + - `setting` **Object** Setting needed to render a field. - + EXAMPLE - + { columns : {"pc": 6, "tablet": 12, "mobile": 12}, id:"test-check", @@ -877,18 +832,23 @@ def fields_widget(setting: dict): }, ] } - + """ data = { - "setting": setting, - } - - return {"type": "Fields", "data": data} + "setting" : setting, + } -def filter_widget(filters: Optional[list] = None, data: Union[dict, list] = {}, containerClass: str = ""): - """ + return { "type" : "Fields", "data" : data } + + +def filter_widget( + filters: Optional[list] = None, + data: Union[dict, list] = {}, + containerClass: str = "" + ): + """ This component allow to filter any data object or array with a list of filters. For the moment, we have 2 types of filters: select and keyword. We have default values that avoid filter ("all" for select and "" for keyword). @@ -898,15 +858,15 @@ def filter_widget(filters: Optional[list] = None, data: Union[dict, list] = {}, We can set filter "settings" in order to filter settings, data must be an advanced template. We can set filter "table" in order to filter table items. Check example for more details. - + PARAMETERS - + - `filters` **Array** Fields with additional data to be used as filters. (optional, default `[]`) - `data` **(Object | Array)** Data object or array to filter. Emit a filter event with the filtered data. (optional, default `{}`) - `containerClass` **String** Additional class for the container. (optional, default `""`) - + EXAMPLE - + [ { filter: "default", // or "settings" or "table" @@ -932,69 +892,76 @@ def filter_widget(filters: Optional[list] = None, data: Union[dict, list] = {}, }, }, ] - + """ - data = {} + data = { + } + # List of params that will be add only if not default value - list_params = [("filters", filters, None), ("data", data, {}), ("containerClass", containerClass, "")] + list_params = [("filters", filters, None),("data", data, {}),("containerClass", containerClass, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Filter", "data": data} + return { "type" : "Filter", "data" : data } + - -def grid_widget(gridClass: str = "items-start", display: Optional[list] = None): - """ +def grid_widget( + gridClass: str = "items-start", + display: Optional[list] = None + ): + """ This component is a basic container that can be used to wrap other components. This container is based on a grid system and will return a grid container with 12 columns. We can define additional class too. This component is mainly use as widget container or as a child of a GridLayout. - + PARAMETERS - + - `gridClass` **String** Additional class (optional, default `"items-start"`) - `display` **Array** Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`) - + EXAMPLE - + { columns: { pc: 12, tablet: 12, mobile: 12}, gridClass: "items-start" } - + """ - data = {} + data = { + } + # List of params that will be add only if not default value - list_params = [("gridClass", gridClass, "items-start"), ("display", display, None)] + list_params = [("gridClass", gridClass, "items-start"),("display", display, None)] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Grid", "data": data} - + return { "type" : "Grid", "data" : data } + def grid_layout_widget( type: str = "card", id: str = "", title: str = "", link: str = "", - columns: dict = {"pc": 12, "tablet": 12, "mobile": 12}, + columns: dict = {"pc":12,"tablet":12,"mobile":12}, gridLayoutClass: str = "items-start", display: Optional[list] = None, tabId: str = "", - maxWidthScreen: str = "2xl", -): - """ + maxWidthScreen: str = "2xl" + ): + """ This component is used for top level page layout. This will determine the position of layout components based on the grid system. We can create card, modal, table and others top level layout using this component. This component is mainly use as Grid parent component. - + PARAMETERS - + - `type` **String** Type of layout component, we can have "card" (optional, default `"card"`) - `id` **String** Id of the layout component, will be used to identify the component. (optional, default `uuidv4()`) - `title` **String** Title of the layout component, will be displayed at the top if exists. Type of layout component will determine the style of the title. (optional, default `""`) @@ -1004,9 +971,9 @@ def grid_layout_widget( - `display` **Array** Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`) - `tabId` **String** Case the container is converted to an anchor with a link, we can define the tabId, by default it is the contentIndex (optional, default `contentIndex`) - `maxWidthScreen` **string** Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl, 3xl) (optional, default `"2xl"`) - + EXAMPLE - + { type: "card", title: "Test", @@ -1014,65 +981,65 @@ def grid_layout_widget( gridLayoutClass: "items-start", display: ["main", 1], } - + """ - data = {} + data = { + } + # List of params that will be add only if not default value - list_params = [ - ("type", type, "card"), - ("id", id, ""), - ("title", title, ""), - ("link", link, ""), - ("columns", columns, {"pc": 12, "tablet": 12, "mobile": 12}), - ("gridLayoutClass", gridLayoutClass, "items-start"), - ("display", display, None), - ("tabId", tabId, ""), - ("maxWidthScreen", maxWidthScreen, "2xl"), - ] + list_params = [("type", type, "card"),("id", id, ""),("title", title, ""),("link", link, ""),("columns", columns, {"pc":12,"tablet":12,"mobile":12}),("gridLayoutClass", gridLayoutClass, "items-start"),("display", display, None),("tabId", tabId, ""),("maxWidthScreen", maxWidthScreen, "2xl")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Gridlayout", "data": data} + return { "type" : "Gridlayout", "data" : data } + - -def icons_widget(value, iconName: str, iconClass: str = "base", color: str = "", isStick: bool = False, disabled: bool = False): - """ +def icons_widget( + value, + iconName: str, + iconClass: str = "base", + color: str = "", + isStick: bool = False, + disabled: bool = False + ): + """ This component is a wrapper that contains all the icons available in the application (Icons folder). This component is used to display the icon based on the icon name. This component is mainly use inside others widgets. - + PARAMETERS - + - `iconName` **String** The name of the icon to display. The icon name is the name of the file without the extension on lowercase. - `iconClass` **String** Class to apply to the icon. In case the icon is related to a widget, the widget will set the right class automatically. (optional, default `"base"`) - `color` **String** The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker'). (optional, default `""`) - `isStick` **Boolean** If true, the icon will be stick to the top right of the parent container. (optional, default `false`) - `disabled` **Boolean** If true, the icon will be disabled. (optional, default `false`) - `value` **Any** Attach a value to icon. Useful on some cases like table filtering using icons. (optional, default `""`) - + EXAMPLE - + { iconName: 'box', iconClass: 'base', color: 'amber', } - + """ data = { - "iconName": iconName, - } + "iconName" : iconName, + } + # List of params that will be add only if not default value - list_params = [("value", value, ""), ("iconClass", iconClass, "base"), ("color", color, ""), ("isStick", isStick, False), ("disabled", disabled, False)] + list_params = [("value", value, ""),("iconClass", iconClass, "base"),("color", color, ""),("isStick", isStick, False),("disabled", disabled, False)] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Icons", "data": data} - + return { "type" : "Icons", "data" : data } + def input_widget( label: str, @@ -1083,7 +1050,7 @@ def input_widget( attrs: Optional[dict] = None, popovers: Optional[list] = None, inpType: str = "input", - columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"}, + columns: dict = {"pc":"12","tablet":"12","mobile":"12"}, disabled: bool = False, required: bool = False, placeholder: str = "", @@ -1094,17 +1061,17 @@ def input_widget( containerClass: str = "", inpClass: str = "", headerClass: str = "", - tabId: Union[str, int] = "", -): - """ + tabId: Union[str, int] = "" + ): + """ This component is used to create a complete input field input with error handling and label. We can add a clipboard button to copy the input value. We can also add a password button to show the password. We can also add popover to display more information. It is mainly use in forms. - + PARAMETERS - + - `id` **String** Unique id (optional, default `uuidv4()`) - `type` **String** text, email, password, number, tel, url (optional, default `"text"`) - `label` **String** The label of the field. Can be a translation key or by default raw text. @@ -1125,9 +1092,9 @@ def input_widget( - `inpClass` **String** (optional, default `""`) - `headerClass` **String** (optional, default `""`) - `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`) - + EXAMPLE - + { id: 'test-input', value: 'yes', @@ -1145,40 +1112,23 @@ def input_widget( }, ], } - + """ data = { - "label": label, - "name": name, - "value": value, - } + "label" : label, + "name" : name, + "value" : value, + } + # List of params that will be add only if not default value - list_params = [ - ("id", id, ""), - ("type", type, "text"), - ("attrs", attrs, None), - ("popovers", popovers, None), - ("inpType", inpType, "input"), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ("disabled", disabled, False), - ("required", required, False), - ("placeholder", placeholder, ""), - ("pattern", pattern, "(?.*)"), - ("isClipboard", isClipboard, True), - ("readonly", readonly, False), - ("hideLabel", hideLabel, False), - ("containerClass", containerClass, ""), - ("inpClass", inpClass, ""), - ("headerClass", headerClass, ""), - ("tabId", tabId, ""), - ] + list_params = [("id", id, ""),("type", type, "text"),("attrs", attrs, None),("popovers", popovers, None),("inpType", inpType, "input"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("disabled", disabled, False),("required", required, False),("placeholder", placeholder, ""),("pattern", pattern, "(?.*)"),("isClipboard", isClipboard, True),("readonly", readonly, False),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Input", "data": data} - + return { "type" : "Input", "data" : data } + def list_widget( label: str, @@ -1192,21 +1142,21 @@ def list_widget( inpType: str = "list", disabled: bool = False, required: bool = False, - columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"}, + columns: dict = {"pc":"12","tablet":"12","mobile":"12"}, hideLabel: bool = False, onlyDown: bool = False, overflowAttrEl: bool = "", containerClass: str = "", inpClass: str = "", headerClass: str = "", - tabId: Union[str, int] = "", -): - """ + tabId: Union[str, int] = "" + ): + """ This component is used display list of values in a dropdown, remove or add an item in an easy way. We can also add popover to display more information. - + PARAMETERS - + - `id` **String** Unique id (optional, default `uuidv4()`) - `label` **String** The label of the field. Can be a translation key or by default raw text. - `name` **String** The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text. @@ -1226,9 +1176,9 @@ def list_widget( - `inpClass` **String** (optional, default `""`) - `headerClass` **String** (optional, default `""`) - `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`) - + EXAMPLE - + { id: 'test-input', value: 'yes no maybe', @@ -1242,52 +1192,38 @@ def list_widget( }, ] } - + """ data = { - "label": label, - "name": name, - "value": value, - } + "label" : label, + "name" : name, + "value" : value, + } + # List of params that will be add only if not default value - list_params = [ - ("id", id, ""), - ("attrs", attrs, None), - ("separator", separator, " "), - ("maxBtnChars", maxBtnChars, ""), - ("popovers", popovers, None), - ("inpType", inpType, "list"), - ("disabled", disabled, False), - ("required", required, False), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ("hideLabel", hideLabel, False), - ("onlyDown", onlyDown, False), - ("overflowAttrEl", overflowAttrEl, ""), - ("containerClass", containerClass, ""), - ("inpClass", inpClass, ""), - ("headerClass", headerClass, ""), - ("tabId", tabId, ""), - ] + list_params = [("id", id, ""),("attrs", attrs, None),("separator", separator, " "),("maxBtnChars", maxBtnChars, ""),("popovers", popovers, None),("inpType", inpType, "list"),("disabled", disabled, False),("required", required, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "List", "data": data} + return { "type" : "List", "data" : data } + - -def modal_widget(widgets: list): - """ +def modal_widget( + widgets: list + ): + """ This component contains all widgets needed on a modal. This is different from a page builder as we don't need to define the container and grid layout. We can't create multiple grids or containers in a modal. - + PARAMETERS - + - `widgets` **Array** Array of containers and widgets - + EXAMPLE - + [ "id": "modal-delete-plugin", "widgets": [ @@ -1343,30 +1279,36 @@ def modal_widget(widgets: list): } ] ]; - + """ data = { - "widgets": widgets, - } - - return {"type": "Modal", "data": data} + "widgets" : widgets, + } -def multiple_widget(multiples: dict, columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"}, containerClass: str = "", tadId: str = ""): - """ + return { "type" : "Modal", "data" : data } + + +def multiple_widget( + multiples: dict, + columns: dict = {"pc":"12","tablet":"12","mobile":"12"}, + containerClass: str = "", + tadId: str = "" + ): + """ This Will regroup all multiples settings with add and remove logic. This component under the hood is rendering default fields but by group with possibility to add or remove a multiple group. - + PARAMETERS - + - `multiples` **Object** The multiples settings to display. This needs to be a dict of settings using default field format. - `columns` **Object** Field has a grid system. This allow to get multiple field in the same row if needed. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`) - `containerClass` **String** Additionnal class to add to the container (optional, default `""`) - `tadId` **String** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`) - + EXAMPLE - + { "columns": {"pc": 6, "tablet": 12, "mobile": 12}, "multiples": { @@ -1440,61 +1382,72 @@ def multiple_widget(multiples: dict, columns: dict = {"pc": "12", "tablet": "12" } } }, - + """ data = { - "multiples": multiples, - } + "multiples" : multiples, + } + # List of params that will be add only if not default value - list_params = [("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), ("containerClass", containerClass, ""), ("tadId", tadId, "")] + list_params = [("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("containerClass", containerClass, ""),("tadId", tadId, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Multiple", "data": data} + return { "type" : "Multiple", "data" : data } + - -def pairs_widget(pairs: list, columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"}): - """ +def pairs_widget( + pairs: list, + columns: dict = {"pc":"12","tablet":"12","mobile":"12"} + ): + """ This component is used to display key value information in a list. - + PARAMETERS - + - `pairs` **Array** The list of key value information. The key and value can be a translation key or a raw text. - `columns` **Object** Determine the position of the items in the grid system. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`) - + EXAMPLE - + { pairs : [ { key: "Total Users", value: "100" } ], columns: { pc: 12, tablet: 12, mobile: 12 } } - + """ data = { - "pairs": pairs, - } + "pairs" : pairs, + } + # List of params that will be add only if not default value - list_params = [("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"})] + list_params = [("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Pairs", "data": data} - + return { "type" : "Pairs", "data" : data } + def popover_widget( - text: str, color: str, href: str = "#", attrs: Optional[dict] = None, tag: str = "a", iconClass: str = "icon-default", tabId: Union[str, int] = "" -): - """ + text: str, + color: str, + href: str = "#", + attrs: Optional[dict] = None, + tag: str = "a", + iconClass: str = "icon-default", + tabId: Union[str, int] = "" + ): + """ This component is a standard popover. - + PARAMETERS - + - `text` **String** Content of the popover. Can be a translation key or by default raw text. - `href` **String** Link of the anchor. By default it is a # link. (optional, default `"#"`) - `color` **String** Color of the icon between tailwind colors @@ -1502,44 +1455,48 @@ def popover_widget( - `tag` **String** By default it is a anchor tag, but we can use other tag like div in case of popover on another anchor (optional, default `"a"`) - `iconClass` **String** (optional, default `"icon-default"`) - `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`) - + EXAMPLE - + { text: "This is a popover text", href: "#", iconName: "info", attrs: { "data-popover": "test" }, } - + """ data = { - "text": text, - "color": color, - } + "text" : text, + "color" : color, + } + # List of params that will be add only if not default value - list_params = [("href", href, "#"), ("attrs", attrs, None), ("tag", tag, "a"), ("iconClass", iconClass, "icon-default"), ("tabId", tabId, "")] + list_params = [("href", href, "#"),("attrs", attrs, None),("tag", tag, "a"),("iconClass", iconClass, "icon-default"),("tabId", tabId, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Popover", "data": data} + return { "type" : "Popover", "data" : data } + - -def popover_group_widget(popovers: list, groupClasss: str = ""): - """ +def popover_group_widget( + popovers: list, + groupClasss: str = "" + ): + """ This component allow to display multiple popovers in the same row using flex. We can define additional class too for the flex container. We need a list of popovers to display. - + PARAMETERS - + - `popovers` **Array** List of popovers to display. Popover component is used. - `groupClasss` **String** Additional class for the flex container (optional, default `""`) - + EXAMPLE - + { flexClass : "justify-center", popovers: [ @@ -1553,37 +1510,42 @@ def popover_group_widget(popovers: list, groupClasss: str = ""): }, ], } - + """ data = { - "popovers": popovers, - } + "popovers" : popovers, + } + # List of params that will be add only if not default value list_params = [("groupClasss", groupClasss, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Popovergroup", "data": data} - + return { "type" : "Popovergroup", "data" : data } + def raw_widget( - template: dict, operation: str = "edit", oldServerName: str = "", containerClass: str = "", columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"} -): - """ + template: dict, + operation: str = "edit", + oldServerName: str = "", + containerClass: str = "", + columns: dict = {"pc":"12","tablet":"12","mobile":"12"} + ): + """ This component is used to create a complete raw form with settings as JSON format. - + PARAMETERS - + - `template` **Object** Template object with plugin and settings data. - `operation` **String** Operation type (edit, new, delete). (optional, default `"edit"`) - `oldServerName` **String** Old server name. This is a server name before any changes. (optional, default `""`) - `containerClass` **string** Container additional class (optional, default `""`) - `columns` **Object** Columns object. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`) - + EXAMPLE - + { "IS_LOADING": "no", "NGINX_PREFIX": "/etc/nginx/", @@ -1591,25 +1553,21 @@ def raw_widget( "HTTPS_PORT": "8443", "MULTISITE": "yes" } - + """ data = { - "template": template, - } + "template" : template, + } + # List of params that will be add only if not default value - list_params = [ - ("operation", operation, "edit"), - ("oldServerName", oldServerName, ""), - ("containerClass", containerClass, ""), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ] + list_params = [("operation", operation, "edit"),("oldServerName", oldServerName, ""),("containerClass", containerClass, ""),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Raw", "data": data} - + return { "type" : "Raw", "data" : data } + def regular_widget( fields: dict, @@ -1617,22 +1575,22 @@ def regular_widget( containerClass: str = "", endpoint: str = "", maxWidthScreen: str = "lg", - columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"}, -): - """ + columns: dict = {"pc":"12","tablet":"12","mobile":"12"} + ): + """ This component is used to create a basic form with fields. - + PARAMETERS - + - `fields` **Object** List of Fields component to display - `buttons` **Object** We need to send a regular ButtonGroup buttons prop - `containerClass` **string** Container additional class (optional, default `""`) - `endpoint` **string** Form endpoint. Case none, will be ignored. (optional, default `""`) - `maxWidthScreen` **string** Max screen width for the settings based on the breakpoint (xs, sm, md, lg, xl, 2xl) (optional, default `"lg"`) - `columns` **Object** Columns object. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`) - + EXAMPLE - + fields : [ { columns: { pc: 6, tablet: 12, mobile: 12 }, @@ -1657,26 +1615,22 @@ def regular_widget( inpType: "input", }, ], - + """ data = { - "fields": fields, - "buttons": buttons, - } + "fields" : fields, + "buttons" : buttons, + } + # List of params that will be add only if not default value - list_params = [ - ("containerClass", containerClass, ""), - ("endpoint", endpoint, ""), - ("maxWidthScreen", maxWidthScreen, "lg"), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ] + list_params = [("containerClass", containerClass, ""),("endpoint", endpoint, ""),("maxWidthScreen", maxWidthScreen, "lg"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"})] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Regular", "data": data} - + return { "type" : "Regular", "data" : data } + def select_widget( label: str, @@ -1691,23 +1645,23 @@ def select_widget( disabled: bool = False, required: bool = False, requiredValues: Optional[list] = None, - columns: dict = {"pc": "12", "tablet": "12", "mobile": "12"}, + columns: dict = {"pc":"12","tablet":"12","mobile":"12"}, hideLabel: bool = False, onlyDown: bool = False, overflowAttrEl: bool = "", containerClass: str = "", inpClass: str = "", headerClass: str = "", - tabId: Union[str, int] = "", -): - """ + tabId: Union[str, int] = "" + ): + """ This component is used to create a complete select field input with error handling and label. We can be more precise by adding values that need to be selected to be valid. We can also add popover to display more information. It is mainly use in forms. - + PARAMETERS - + - `id` **String** Unique id (optional, default `uuidv4()`) - `label` **String** The label of the field. Can be a translation key or by default raw text. - `name` **String** The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text. @@ -1728,9 +1682,9 @@ def select_widget( - `inpClass` **String** (optional, default `""`) - `headerClass` **String** (optional, default `""`) - `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`) - + EXAMPLE - + { id: 'test-input', value: 'yes', @@ -1748,57 +1702,47 @@ def select_widget( }, ] } - + """ data = { - "label": label, - "name": name, - "value": value, - "values": values, - } + "label" : label, + "name" : name, + "value" : value, + "values" : values, + } + # List of params that will be add only if not default value - list_params = [ - ("id", id, ""), - ("attrs", attrs, None), - ("popovers", popovers, None), - ("inpType", inpType, "select"), - ("maxBtnChars", maxBtnChars, ""), - ("disabled", disabled, False), - ("required", required, False), - ("requiredValues", requiredValues, None), - ("columns", columns, {"pc": "12", "tablet": "12", "mobile": "12"}), - ("hideLabel", hideLabel, False), - ("onlyDown", onlyDown, False), - ("overflowAttrEl", overflowAttrEl, ""), - ("containerClass", containerClass, ""), - ("inpClass", inpClass, ""), - ("headerClass", headerClass, ""), - ("tabId", tabId, ""), - ] + list_params = [("id", id, ""),("attrs", attrs, None),("popovers", popovers, None),("inpType", inpType, "select"),("maxBtnChars", maxBtnChars, ""),("disabled", disabled, False),("required", required, False),("requiredValues", requiredValues, None),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Select", "data": data} + return { "type" : "Select", "data" : data } + - -def stat_widget(title: str, stat: Union[str, int], subtitle: str = "", iconName: str = "", subtitleColor: str = "info"): - """ +def stat_widget( + title: str, + stat: Union[str, int], + subtitle: str = "", + iconName: str = "", + subtitleColor: str = "info" + ): + """ This component is wrapper of all stat components. This component has no grid system and will always get the full width of the parent. This component is mainly use inside a blank card. - + PARAMETERS - + - `title` **String** The title of the stat. Can be a translation key or by default raw text. - `stat` **(String | Number)** The value - `subtitle` **String** The subtitle of the stat. Can be a translation key or by default raw text. (optional, default `""`) - `iconName` **String** A top-right icon to display between icon available in Icons/Stat. Case falsy value, no icon displayed. The icon name is the name of the file without the extension on lowercase. (optional, default `""`) - `subtitleColor` **String** The color of the subtitle between error, success, warning, info (optional, default `"info"`) - + EXAMPLE - + { title: "Total Users", value: 100, @@ -1807,53 +1751,59 @@ def stat_widget(title: str, stat: Union[str, int], subtitle: str = "", iconName: link: "/users", subtitleColor: "info", } - + """ data = { - "title": title, - "stat": stat, - } + "title" : title, + "stat" : stat, + } + # List of params that will be add only if not default value - list_params = [("subtitle", subtitle, ""), ("iconName", iconName, ""), ("subtitleColor", subtitleColor, "info")] + list_params = [("subtitle", subtitle, ""),("iconName", iconName, ""),("subtitleColor", subtitleColor, "info")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Stat", "data": data} + return { "type" : "Stat", "data" : data } + - -def status_widget(id: str, status: str = "info", statusClass: str = ""): - """ +def status_widget( + id: str, + status: str = "info", + statusClass: str = "" + ): + """ This component is a icon used with status. - + PARAMETERS - + - `id` **String** The id of the status icon. - `status` **String** The color of the icon between error, success, warning, info (optional, default `"info"`) - `statusClass` **String** Additional class, for example to use with grid system. (optional, default `""`) - + EXAMPLE - + { id: "instance-1", status: "success", statusClass: "col-span-12", } - + """ data = { - "id": id, - } + "id" : id, + } + # List of params that will be add only if not default value - list_params = [("status", status, "info"), ("statusClass", statusClass, "")] + list_params = [("status", status, "info"),("statusClass", statusClass, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Status", "data": data} - + return { "type" : "Status", "data" : data } + def subtitle_widget( subtitle: str, @@ -1863,13 +1813,13 @@ def subtitle_widget( bold: bool = False, uppercase: bool = False, lowercase: bool = False, - subtitleClass: str = "", -): - """ + subtitleClass: str = "" + ): + """ This component is a general subtitle wrapper. - + PARAMETERS - + - `subtitle` **String** Can be a translation key or by default raw text. - `type` **String** The type of title between "container", "card", "content", "min" or "stat" (optional, default `"card"`) - `tag` **String** The tag of the subtitle. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of subtitle. (optional, default `""`) @@ -1878,9 +1828,9 @@ def subtitle_widget( - `uppercase` **Boolean** If the subtitle should be uppercase or not. (optional, default `false`) - `lowercase` **Boolean** If the subtitle should be lowercase or not. (optional, default `false`) - `subtitleClass` **String** Additional class, useful when component is used directly on a grid system (optional, default `""`) - + EXAMPLE - + { subtitle: "Total Users", type: "card", @@ -1888,28 +1838,21 @@ def subtitle_widget( color : "info", tag: "h2" } - + """ data = { - "subtitle": subtitle, - } + "subtitle" : subtitle, + } + # List of params that will be add only if not default value - list_params = [ - ("type", type, "card"), - ("tag", tag, ""), - ("color", color, ""), - ("bold", bold, False), - ("uppercase", uppercase, False), - ("lowercase", lowercase, False), - ("subtitleClass", subtitleClass, ""), - ] + list_params = [("type", type, "card"),("tag", tag, ""),("color", color, ""),("bold", bold, False),("uppercase", uppercase, False),("lowercase", lowercase, False),("subtitleClass", subtitleClass, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Subtitle", "data": data} - + return { "type" : "Subtitle", "data" : data } + def table_widget( title: str, @@ -1920,16 +1863,16 @@ def table_widget( minWidth: str = "base", containerClass: str = "", containerWrapClass: str = "", - tableClass: str = "", -): - """ + tableClass: str = "" + ): + """ This component is used to create a table. You need to provide a title, a header, a list of positions, and a list of items. Items need to be an array of array with a cell being a regular widget. Not all widget are supported. Check this component import list to see which widget are supported. For example, Text, Icons, Icons, Buttons and Fields are supported. - + PARAMETERS - + - `title` **String** Determine the title of the table. - `header` **Array** Determine the header of the table. - `positions` **Array** Determine the position of each item in the table in a list of number based on 12 columns grid. @@ -1939,9 +1882,9 @@ def table_widget( - `containerClass` **String** Container additional class. (optional, default `""`) - `containerWrapClass` **String** Container wrap additional class. (optional, default `""`) - `tableClass` **String** Table additional class. (optional, default `""`) - + EXAMPLE - + { "title": "Table title", "header": ["Header 1", "Header 2", "Header 3"], @@ -1953,12 +1896,12 @@ def table_widget( "type": "Text", "data": { "text": "whitelist-download" - + } }, ], ], - + filters : [ { filter: "default", @@ -1986,29 +1929,24 @@ def table_widget( }, ]; } - + """ data = { - "title": title, - "header": header, - "positions": positions, - "items": items, - } + "title" : title, + "header" : header, + "positions" : positions, + "items" : items, + } + # List of params that will be add only if not default value - list_params = [ - ("filters", filters, None), - ("minWidth", minWidth, "base"), - ("containerClass", containerClass, ""), - ("containerWrapClass", containerWrapClass, ""), - ("tableClass", tableClass, ""), - ] + list_params = [("filters", filters, None),("minWidth", minWidth, "base"),("containerClass", containerClass, ""),("containerWrapClass", containerWrapClass, ""),("tableClass", tableClass, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Table", "data": data} - + return { "type" : "Table", "data" : data } + def tabulator_widget( id: str, @@ -2016,15 +1954,17 @@ def tabulator_widget( items: list, isStriped: bool = True, filters: Optional[list] = None, + actionsButtons: Optional[list] = None, + layout: str = "fitDataTable", rowHeight: int = 0, colMinWidth: int = 150, colMaxWidth: int = 0, isPagination: bool = True, paginationSize: int = 10, paginationInitialPage: int = 1, - paginationSizeSelector: list = [10, 25, 50, 100], -): - """ + paginationSizeSelector: list = [10,25,50,100] + ): + """ This component allow to display a table using the Tabulator library with utils and custom components around to work with (like filters). Because we can't instantiate Vue component inside the Tabulator cell, I choose to send default component props to the cell and teleport the component inside the cell. The created instance is store in the tableStore using the id as key in order to use it in other components. @@ -2033,14 +1973,16 @@ def tabulator_widget( Filtering : I created isomorphic filters that will get the right data to check for each custom component object. To apply a filter, we need to render a field that will be link to the filterTable() function. A11y :I created a11yTable(), with sortable header tab index. - + PARAMETERS - + - `id` **string** Unique id of the table - `isStriped` **boolean** Add striped class to the table (optional, default `true`) - `filters` **array** List of filters to display (optional, default `[]`) - `columns` **array** List of columns to display - `items` **array** List of items to display + - `actionsButtons` **array** Buttons group props to render buttons that will be after filters and before the table stick left. (optional, default `[]`) + - `layout` **string** Layout of the table. "fitDataTable" useful with wide columns, "fitColumns" useful with narrow columns. (optional, default `"fitDataTable"`) - `rowHeight` **number** Case value is 0, this will be ignored. (optional, default `0`) - `colMinWidth` **number** Minimum width for each col of a row (optional, default `150`) - `colMaxWidth` **number** Maximum width for each col of a row. Case value is 0, this will be ignored. (optional, default `0`) @@ -2048,9 +1990,9 @@ def tabulator_widget( - `paginationSize` **number** Number of items per page (optional, default `10`) - `paginationInitialPage` **number** Initial page (optional, default `1`) - `paginationSizeSelector` **array** Select number of items per page (optional, default `[10,25,50,100]`) - + EXAMPLE - + filter = [{ "type": "like", // isomorphic filter type "fields": ["ip"], // fields to filter @@ -2064,47 +2006,42 @@ def tabulator_widget( "columns": {"pc": 3, "tablet": 4, "mobile": 12}, }, }]; - + Returns **void**; - + """ data = { - "id": id, - "columns": columns, - "items": items, - } + "id" : id, + "columns" : columns, + "items" : items, + } + # List of params that will be add only if not default value - list_params = [ - ("isStriped", isStriped, True), - ("filters", filters, None), - ("rowHeight", rowHeight, 0), - ("colMinWidth", colMinWidth, 150), - ("colMaxWidth", colMaxWidth, 0), - ("isPagination", isPagination, True), - ("paginationSize", paginationSize, 10), - ("paginationInitialPage", paginationInitialPage, 1), - ("paginationSizeSelector", paginationSizeSelector, [10, 25, 50, 100]), - ] + list_params = [("isStriped", isStriped, True),("filters", filters, None),("actionsButtons", actionsButtons, None),("layout", layout, "fitDataTable"),("rowHeight", rowHeight, 0),("colMinWidth", colMinWidth, 150),("colMaxWidth", colMaxWidth, 0),("isPagination", isPagination, True),("paginationSize", paginationSize, 10),("paginationInitialPage", paginationInitialPage, 1),("paginationSizeSelector", paginationSizeSelector, [10,25,50,100])] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Tabulator", "data": data} + return { "type" : "Tabulator", "data" : data } + - -def templates_widget(templates: dict, operation: str = "edit", oldServerName: str = ""): - """ +def templates_widget( + templates: dict, + operation: str = "edit", + oldServerName: str = "" + ): + """ This component is used to create a complete settings form with all modes (advanced, raw, easy). - + PARAMETERS - + - `templates` **Object** List of advanced templates that contains settings. Must be a dict with mode as key, then the template name as key with a list of data (different for each modes). - `operation` **string** Operation type (edit, new, delete). (optional, default `"edit"`) - `oldServerName` **string** Old server name. This is a server name before any changes. (optional, default `""`) - + EXAMPLE - + { advanced : { default : [{SETTING_1}, {SETTING_2}...], @@ -2115,20 +2052,21 @@ def templates_widget(templates: dict, operation: str = "edit", oldServerName: st low : [...], } } - + """ data = { - "templates": templates, - } + "templates" : templates, + } + # List of params that will be add only if not default value - list_params = [("operation", operation, "edit"), ("oldServerName", oldServerName, "")] + list_params = [("operation", operation, "edit"),("oldServerName", oldServerName, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Templates", "data": data} - + return { "type" : "Templates", "data" : data } + def text_widget( text: str, @@ -2138,13 +2076,13 @@ def text_widget( uppercase: bool = False, tag: str = "p", icon: Union[bool, dict] = False, - attrs: Optional[dict] = None, -): - """ + attrs: Optional[dict] = None + ): + """ This component is used for regular paragraph. - + PARAMETERS - + - `text` **String** The text value. Can be a translation key or by default raw text. - `textClass` **String** Style of text. Can be replace by any class starting by 'text-' like 'text-stat'. (optional, default `""`) - `color` **String** The color of the text between error, success, warning, info or tailwind color (optional, default `""`) @@ -2153,43 +2091,44 @@ def text_widget( - `tag` **String** The tag of the text. Can be p, span, div, h1, h2, h3, h4, h5, h6 (optional, default `"p"`) - `icon` **(Boolean | Object)** The icon to add before the text. If true, will add a default icon. If object, will add the icon with the name and the color. (optional, default `false`) - `attrs` **Object** List of attributes to add to the text. (optional, default `{}`) - + EXAMPLE - + { text: "This is a paragraph", textClass: "text-3xl" attrs: { id: "paragraph" }, } - + """ data = { - "text": text, - } + "text" : text, + } + # List of params that will be add only if not default value - list_params = [ - ("textClass", textClass, ""), - ("color", color, ""), - ("bold", bold, False), - ("uppercase", uppercase, False), - ("tag", tag, "p"), - ("icon", icon, False), - ("attrs", attrs, None), - ] + list_params = [("textClass", textClass, ""),("color", color, ""),("bold", bold, False),("uppercase", uppercase, False),("tag", tag, "p"),("icon", icon, False),("attrs", attrs, None)] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Text", "data": data} + return { "type" : "Text", "data" : data } + - -def title_widget(title: str, type: str = "card", tag: str = "", color: str = "", uppercase: bool = False, lowercase: bool = False, titleClass: str = ""): - """ +def title_widget( + title: str, + type: str = "card", + tag: str = "", + color: str = "", + uppercase: bool = False, + lowercase: bool = False, + titleClass: str = "" + ): + """ This component is a general title wrapper. - + PARAMETERS - + - `title` **String** Can be a translation key or by default raw text. - `type` **String** The type of title between "container", "card", "content", "min" or "stat" (optional, default `"card"`) - `tag` **String** The tag of the title. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of title. (optional, default `""`) @@ -2197,9 +2136,9 @@ def title_widget(title: str, type: str = "card", tag: str = "", color: str = "", - `uppercase` **Boolean** If the title should be uppercase or not. (optional, default `false`) - `lowercase` **Boolean** If the title should be lowercase or not. (optional, default `false`) - `titleClass` **String** Additional class, useful when component is used directly on a grid system (optional, default `""`) - + EXAMPLE - + { title: "Total Users", type: "card", @@ -2207,53 +2146,52 @@ def title_widget(title: str, type: str = "card", tag: str = "", color: str = "", color : "info", tag: "h2" } - + """ data = { - "title": title, - } + "title" : title, + } + # List of params that will be add only if not default value - list_params = [ - ("type", type, "card"), - ("tag", tag, ""), - ("color", color, ""), - ("uppercase", uppercase, False), - ("lowercase", lowercase, False), - ("titleClass", titleClass, ""), - ] + list_params = [("type", type, "card"),("tag", tag, ""),("color", color, ""),("uppercase", uppercase, False),("lowercase", lowercase, False),("titleClass", titleClass, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Title", "data": data} + return { "type" : "Title", "data" : data } + - -def unmatch_widget(text: str, unmatchClass: str = ""): - """ +def unmatch_widget( + text: str, + unmatchClass: str = "" + ): + """ Display a default message "no match" with dedicated icon. The message text can be overridden by passing a text prop. - + PARAMETERS - + - `text` **String** The text to display - `unmatchClass` **String** The class to apply to the message. If not provided, the class will be based on the parent component. (optional, default `""`) - + EXAMPLE - + { text: "dashboard_no_match", } - + """ data = { - "text": text, - } + "text" : text, + } + # List of params that will be add only if not default value list_params = [("unmatchClass", unmatchClass, "")] for param in list_params: add_key_value(data, param[0], param[1], param[2]) - return {"type": "Unmatch", "data": data} + return { "type" : "Unmatch", "data" : data } + diff --git a/src/ui/client/builder/test_bans2.py b/src/ui/client/builder/test_bans.py similarity index 86% rename from src/ui/client/builder/test_bans2.py rename to src/ui/client/builder/test_bans.py index 73a9689b5..14676aa4e 100644 --- a/src/ui/client/builder/test_bans2.py +++ b/src/ui/client/builder/test_bans.py @@ -1,5 +1,5 @@ from utils import save_builder -from pages.bans2 import bans_builder +from pages.bans import bans_builder bans = [ { @@ -30,4 +30,4 @@ remains = ["all", "hour(s)", "day(s)"] builder = bans_builder(bans, reasons, remains) -save_builder("bans2", builder) +save_builder(page_name="bans", output=builder, script_name="bans") diff --git a/src/ui/client/dashboard/components/Builder/Bans.vue b/src/ui/client/dashboard/components/Builder/Bans.vue index 029c2933d..1a86181dc 100644 --- a/src/ui/client/dashboard/components/Builder/Bans.vue +++ b/src/ui/client/dashboard/components/Builder/Bans.vue @@ -2,10 +2,12 @@ // Containers import Grid from "@components/Widget/Grid.vue"; import GridLayout from "@components/Widget/GridLayout.vue"; +import Tabulator from "@components/Widget/Tabulator.vue"; +import Button from "@components/Widget/Button.vue"; +import ButtonGroup from "@components/Widget/ButtonGroup.vue"; +import Regular from "@components/Form/Regular.vue"; import Title from "@components/Widget/Title.vue"; import Subtitle from "@components/Widget/Subtitle.vue"; -import Table from "@components/Widget/Table.vue"; -import ListPairs from "@components/List/Pairs.vue"; import MessageUnmatch from "@components/Message/Unmatch.vue"; import { useEqualStr } from "@utils/global.js"; @@ -53,18 +55,29 @@ const props = defineProps({