Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add tabulator jsdoc +update bans2.py + table utils

Browse source 
* create utils to get the right data part for tabulator fields format
*add tabulator jsdoc
* update bans2.py with new utils and fix misspell widgets name
This commit is contained in:
Jordan Blasenhauer 2024-08-12 16:54:11 +02:00
parent 60bacbe30f
commit 0c84bba4fc
3 changed files with 118 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
src/ui/client/builder/pages/bans2.py
View file

@ -1,15 +1,12 @@
import json
import base64
from builder.utils.widgets import button, button_group, title, text, tabulator, datepicker
from builder.utils.table import add_column
from builder.utils.widgets import button_widget, button_group_widget, title_widget, text_widget, tabulator_widget, datepicker_widget
from builder.utils.table import add_column, format_field
bans_columns = [
{"title": "IP", "field": "ip", "formatter": "text"},
{"title": "Reason", "field": "reason", "formatter": "text"},
{"title": "Ban start date", "field": "ban_start_date", "formatter": "fields"},
{"title": "Ban end date", "field": "ban_end_date", "formatter": "fields"},
{"title": "Remain", "field": "remain", "formatter": "text"},
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"),
]
@ -73,28 +70,32 @@ def bans_filters(reasons: list = ["all"], remains: list = ["all"]) -> list:
def ban_item(id: str, ip: str, reason: str, ban_start_date: int, ban_end_date: int, remain: str) -> dict:
return (
{
"ip": text(text=ip)["data"],
"reason": text(text=reason)["data"],
"ban_start_date": datepicker(
id=f"datepicker-ban-start-{id}",
name=f"datepicker-ban-start-{id}",
label="bans_ban_start_date", # keep it (a18n)
hideLabel=True,
inputType="datepicker",
value=ban_start_date,
disabled=True, # Readonly
columns={"pc": 12, "tablet": 12, " mobile": 12},
)["data"],
"ban_end_date": datepicker(
id=f"datepicker-ban-end-{id}",
name=f"datepicker-ban-end-{id}",
label="bans_ban_end_date", # keep it (a18n)
hideLabel=True,
inputType="datepicker",
value=ban_end_date,
disabled=True, # Readonly
)["data"],
"remain": text(text=remain)["data"],
"ip": text_widget(text=ip)["data"],
"reason": text_widget(text=reason)["data"],
"ban_start_date": format_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,
inputType="datepicker",
value=ban_start_date,
disabled=True, # Readonly
columns={"pc": 12, "tablet": 12, " mobile": 12},
)
),
"ban_end_date": format_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,
inputType="datepicker",
value=ban_end_date,
disabled=True, # Readonly
)
),
"remain": text_widget(text=remain)["data"],
},
)
@ -117,37 +118,41 @@ def bans_items(items: list) -> list:
bans_add_columns = [
{"title": "ip", "field": "ip", "formatter": "fields"}, # input
{"title": "Ban end", "field": "ban_end", "formatter": "fields"},
add_column(title="IP", field="ip", formatter="fields"),
add_column(title="Ban end", field="ban_end", formatter="fields"),
]
default_add_ban = [
{
"id": 1,
"ip": datepicker(
id="datepicker-add-ban-ip-1",
name="datepicker-add-ban-ip-1",
label="bans_add_ban_ip", # keep it (a18n)
hideLabel=True,
value="",
type="text",
pattern="", # replace by ip pattern
inputType="input",
columns={"pc": 12, "tablet": 12, " mobile": 12},
)["data"],
"ban_end": datepicker(
id="datepicker-add-ban-end-1",
name="datepicker-add-ban-end-1",
label="bans_add_end_date", # keep it (a18n)
hideLabel=True,
inputType="datepicker",
value="",
)["data"],
"ip": format_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="",
type="text",
pattern="", # replace by ip pattern
inputType="input",
columns={"pc": 12, "tablet": 12, " mobile": 12},
)
),
"ban_end": format_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,
inputType="datepicker",
value="",
)
),
# Need to create a script on Page.vue level to retrive table data and remove by id
"delete": button_group(
"delete": button_group_widget(
buttons=[
button(
button_widget(
id="delete-ban-1",
type="button",
text="action_delete", # keep it (a18n)
@ -164,11 +169,11 @@ default_add_ban = [
]
bans_add_table_actions = button_group(
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(
button_widget(
id="add-bans-entry-btn",
type="button",
text="action_entry", # keep it (a18n)
@ -179,7 +184,7 @@ bans_add_table_actions = button_group(
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(
button_widget(
id="add-bans-delete-all-btn",
type="button",
text="action_delete_all", # keep it (a18n)
@ -196,7 +201,7 @@ bans_add_table_actions = button_group(
# 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(
button_widget(
id="unban-btn",
type="button",
text="action_unban", # keep it (a18n)
@ -204,18 +209,18 @@ unban_action = (
size="normal",
modal={
"widgets": [
title(title="bans_unban_title"), # keep it (a18n)
text(text="bans_unban_subtitle"), # keep it (a18n)
button_group(
title_widget(title="bans_unban_title"), # keep it (a18n)
text_widget(text="bans_unban_subtitle"), # keep it (a18n)
button_group_widget(
buttons=[
button(
button_widget(
id="close-unban-btn",
text="action_close", # keep it (a18n)
color="close",
size="normal",
attrs={"data-close-modal": ""}, # a11y
)["data"],
button(
button_widget(
id="unban-btn-confirm",
text="action_unban", # keep it (a18n)
color="success",
@ -231,7 +236,7 @@ unban_action = (
# 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(
button_widget(
id="add-bans-btn",
type="button",
text="action_add_bans", # keep it (a18n)
@ -247,9 +252,9 @@ def bans_builder(bans: list, reasons: list, remains: list) -> list:
{
type: "tabs",
"widgets": [
button_group(
button_group_widget(
buttons=[
button(
button_widget(
text="bans_tab_list",
display=["main", 1],
isTab=True,
@ -257,7 +262,7 @@ def bans_builder(bans: list, reasons: list, remains: list) -> list:
iconColor="white",
iconName="list",
),
button(
button_widget(
text="bans_tab_add",
display=["main", 2],
isTab=True,
@ -273,7 +278,7 @@ def bans_builder(bans: list, reasons: list, remains: list) -> list:
"type": "card",
"display": ["main", 1],
"widgets": [
tabulator(
tabulator_widget(
id="table-bans-list",
columns=bans_columns,
items=bans_items(bans),
@ -287,7 +292,7 @@ def bans_builder(bans: list, reasons: list, remains: list) -> list:
"display": ["main", 2],
"widgets": [
bans_add_table_actions,
tabulator(
tabulator_widget(
id="table-register-plugins",
columns=bans_add_columns,
items=default_add_ban,

4
src/ui/client/builder/utils/table.py
View file

@ -4,3 +4,7 @@ def add_column(title, field, formatter=""):
return {"title": title, "field": field, "formatter": formatter}
return {"title": title, "field": field}
def format_field(field):
return {"setting": field["data"]}

42
src/ui/client/dashboard/components/Widget/Tabulator.vue
View file

@ -19,8 +19,44 @@ import { useTableStore } from "@store/global.js";
const tableStore = useTableStore();
// TODO : ADD JSDOC COMPONENT
/**
* @name Widget/Tabulator.vue
* @description 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.
* UI : I created a formatter for each custom component that will return an empty string.
* Sorting : because we aren't working with primitives but props object, each columns that have a custom component will have a custom sorter to avoid sorting error.
* 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.
* @example
* filter = [{
* "type": "like", // isomorphic filter type
* "fields": ["ip"], // fields to filter
* // setting is a regular Fields props object
* "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},
* },
* }];
* @param {string} id - Unique id of the table
* @param {boolean} [isStriped=true] - Add striped class to the table
* @param {array} [filters=[]] - List of filters to display
* @param {array} columns - List of columns to display
* @param {array} items - List of items to display
* @param {number} [rowHeight= 0] - Case value is 0, this will be ignored.
* @param {number} [colMinWidth=150] - Minimum width for each col of a row
* @param {number} [colMaxWidth=0] - Maximum width for each col of a row. Case value is 0, this will be ignored.
* @param {boolean} [isPagination=true] - Add pagination to the table
* @param {number} [paginationSize=10] - Number of items per page
* @param {number} [paginationInitialPage=1] - Initial page
* @param {array} [paginationSizeSelector=[10, 25, 50, 100, true]] - Select number of items per page
* @returns {void}
*/
const customComponents = ["Icons", "Text", "Fields", "Button", "ButtonGroup"];
const props = defineProps({
@ -46,7 +82,7 @@ const props = defineProps({
},
items: {
type: Array,
required: false,
required: true,
default: [],
},
rowHeight: {