mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-04 13:15:24 +00:00
Group rows by field in grid view
This commit is contained in:
Bram Wiepjes
parent
aa6bc75ce0
commit
f6060f8966
33 changed files with 1742 additions and 127 deletions
backend
src/baserow/contrib/database
templates
tests/baserow/contrib/database
changelog/entries/unreleased/feature
web-frontend
modules
core/assets/scss/components
database
components/view/grid
GridView.vueGridViewCell.vueGridViewFieldType.vueGridViewHead.vueGridViewPlaceholder.vueGridViewRow.vueGridViewRowAdd.vueGridViewRowDragging.vueGridViewRowGroup.vueGridViewRows.vueGridViewSection.vue
fieldTypes.jsfields
mixins
services/view
store/view
utils
viewTypes.jstest
fixtures
unit/database
__snapshots__
components/view/grid
|
|
@ -672,6 +672,15 @@ class PublicGridViewRowsView(APIView):
|
|||
"order, but by prepending the field with a '-' it can be ordered "
|
||||
"descending (Z-A).",
|
||||
),
|
||||
OpenApiParameter(
|
||||
name="group_by",
|
||||
location=OpenApiParameter.QUERY,
|
||||
type=OpenApiTypes.STR,
|
||||
description="Optionally the rows can be grouped by provided field ids "
|
||||
"separated by comma. By default no groups are applied. This doesn't "
|
||||
"actually responds with the rows groups, this is just what's needed "
|
||||
"for the Baserow group by feature.",
|
||||
),
|
||||
OpenApiParameter(
|
||||
name="filters",
|
||||
location=OpenApiParameter.QUERY,
|
||||
|
|
@ -823,6 +832,7 @@ class PublicGridViewRowsView(APIView):
|
|||
search = query_params.get("search")
|
||||
search_mode = query_params.get("search_mode")
|
||||
order_by = request.GET.get("order_by")
|
||||
group_by = request.GET.get("group_by")
|
||||
include_fields = request.GET.get("include_fields")
|
||||
exclude_fields = request.GET.get("exclude_fields")
|
||||
filter_type = (
|
||||
|
|
@ -859,6 +869,7 @@ class PublicGridViewRowsView(APIView):
|
|||
search=search,
|
||||
search_mode=search_mode,
|
||||
order_by=order_by,
|
||||
group_by=group_by,
|
||||
include_fields=include_fields,
|
||||
exclude_fields=exclude_fields,
|
||||
filter_type=filter_type,
|
||||
|
|
|
|||
|
|
@ -3159,6 +3159,7 @@ class ViewHandler(metaclass=baserow_trace_methods(tracer)):
|
|||
search: str = None,
|
||||
search_mode: Optional[SearchModes] = None,
|
||||
order_by: str = None,
|
||||
group_by: str = None,
|
||||
include_fields: str = None,
|
||||
exclude_fields: str = None,
|
||||
filter_type: str = None,
|
||||
|
|
@ -3179,6 +3180,7 @@ class ViewHandler(metaclass=baserow_trace_methods(tracer)):
|
|||
:param search: A string to search for in the rows.
|
||||
:param search_mode: The type of search to perform.
|
||||
:param order_by: A string to order the rows by.
|
||||
:param group_by: A string group the rows by.
|
||||
:param include_fields: A comma separated list of field_ids to include.
|
||||
:param exclude_fields: A comma separated list of field_ids to exclude.
|
||||
:param filter_type: The type of filter to apply.
|
||||
|
|
@ -3222,7 +3224,19 @@ class ViewHandler(metaclass=baserow_trace_methods(tracer)):
|
|||
queryset = table_model.objects.all().enhance_by_fields()
|
||||
queryset = self.apply_filters(view, queryset)
|
||||
|
||||
if order_by:
|
||||
if view_type.can_group_by:
|
||||
# If both the group by and order by string is set, then we must merge the
|
||||
# two so that it will be sorted the right way because the grouping is
|
||||
# basically just sorting for the backend. However, the group by will take
|
||||
# precedence.
|
||||
if group_by is not None and order_by is not None:
|
||||
order_by = f"{group_by},{order_by}"
|
||||
# If only the group_by is set, then we can simply replace the order_by
|
||||
# because that must be applied to the queryset.
|
||||
elif group_by is not None:
|
||||
order_by = group_by
|
||||
|
||||
if order_by is not None:
|
||||
queryset = queryset.order_by_fields_string(
|
||||
order_by, False, publicly_visible_field_ids
|
||||
)
|
||||
|
|
|
|||
877
backend/templates/all-fields.json
Normal file
877
backend/templates/all-fields.json
Normal file
|
|
@ -0,0 +1,877 @@
|
|||
{
|
||||
"baserow_template_version": 1,
|
||||
"name": "All fields",
|
||||
"icon": "iconoir-input-field",
|
||||
"keywords": [
|
||||
"All",
|
||||
"Fields",
|
||||
"Baserow"
|
||||
],
|
||||
"categories": [
|
||||
"Baserow"
|
||||
],
|
||||
"export": [
|
||||
{
|
||||
"id": 131,
|
||||
"name": "All field types",
|
||||
"order": 1,
|
||||
"type": "database",
|
||||
"tables": [
|
||||
{
|
||||
"id": 538,
|
||||
"name": "All field types",
|
||||
"order": 1,
|
||||
"fields": [
|
||||
{
|
||||
"id": 4664,
|
||||
"type": "text",
|
||||
"name": "Name",
|
||||
"order": 0,
|
||||
"primary": true,
|
||||
"text_default": ""
|
||||
},
|
||||
{
|
||||
"id": 4665,
|
||||
"type": "long_text",
|
||||
"name": "Notes",
|
||||
"order": 1,
|
||||
"primary": false
|
||||
},
|
||||
{
|
||||
"id": 4666,
|
||||
"type": "number",
|
||||
"name": "Number",
|
||||
"order": 2,
|
||||
"primary": false,
|
||||
"number_decimal_places": 0,
|
||||
"number_negative": false
|
||||
},
|
||||
{
|
||||
"id": 4667,
|
||||
"type": "rating",
|
||||
"name": "Rating",
|
||||
"order": 3,
|
||||
"primary": false,
|
||||
"max_value": 5,
|
||||
"color": "dark-orange",
|
||||
"style": "star"
|
||||
},
|
||||
{
|
||||
"id": 4668,
|
||||
"type": "boolean",
|
||||
"name": "Boolean",
|
||||
"order": 4,
|
||||
"primary": false
|
||||
},
|
||||
{
|
||||
"id": 4669,
|
||||
"type": "date",
|
||||
"name": "Date european",
|
||||
"order": 5,
|
||||
"primary": false,
|
||||
"date_format": "EU",
|
||||
"date_include_time": false,
|
||||
"date_time_format": "24",
|
||||
"date_show_tzinfo": false,
|
||||
"date_force_timezone": null
|
||||
},
|
||||
{
|
||||
"id": 4670,
|
||||
"type": "date",
|
||||
"name": "Date us include time",
|
||||
"order": 6,
|
||||
"primary": false,
|
||||
"date_format": "US",
|
||||
"date_include_time": true,
|
||||
"date_time_format": "12",
|
||||
"date_show_tzinfo": false,
|
||||
"date_force_timezone": null
|
||||
},
|
||||
{
|
||||
"id": 4671,
|
||||
"type": "last_modified",
|
||||
"name": "Last modified",
|
||||
"order": 7,
|
||||
"primary": false,
|
||||
"date_format": "EU",
|
||||
"date_include_time": true,
|
||||
"date_time_format": "24",
|
||||
"date_show_tzinfo": true,
|
||||
"date_force_timezone": null
|
||||
},
|
||||
{
|
||||
"id": 4672,
|
||||
"type": "created_on",
|
||||
"name": "Created on",
|
||||
"order": 8,
|
||||
"primary": false,
|
||||
"date_format": "EU",
|
||||
"date_include_time": true,
|
||||
"date_time_format": "24",
|
||||
"date_show_tzinfo": true,
|
||||
"date_force_timezone": null
|
||||
},
|
||||
{
|
||||
"id": 4673,
|
||||
"type": "url",
|
||||
"name": "URL",
|
||||
"order": 9,
|
||||
"primary": false
|
||||
},
|
||||
{
|
||||
"id": 4674,
|
||||
"type": "email",
|
||||
"name": "Email",
|
||||
"order": 10,
|
||||
"primary": false
|
||||
},
|
||||
{
|
||||
"id": 4675,
|
||||
"type": "file",
|
||||
"name": "File",
|
||||
"order": 11,
|
||||
"primary": false
|
||||
},
|
||||
{
|
||||
"id": 4676,
|
||||
"type": "single_select",
|
||||
"name": "Single select",
|
||||
"order": 12,
|
||||
"primary": false,
|
||||
"select_options": [
|
||||
{
|
||||
"id": 2492,
|
||||
"value": "Option 1",
|
||||
"color": "green",
|
||||
"order": 0
|
||||
},
|
||||
{
|
||||
"id": 2493,
|
||||
"value": "Option 2",
|
||||
"color": "cyan",
|
||||
"order": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 4677,
|
||||
"type": "multiple_select",
|
||||
"name": "Multiple select",
|
||||
"order": 13,
|
||||
"primary": false,
|
||||
"select_options": [
|
||||
{
|
||||
"id": 2494,
|
||||
"value": "Option A",
|
||||
"color": "red",
|
||||
"order": 0
|
||||
},
|
||||
{
|
||||
"id": 2495,
|
||||
"value": "Option B",
|
||||
"color": "green",
|
||||
"order": 1
|
||||
},
|
||||
{
|
||||
"id": 2496,
|
||||
"value": "Option C",
|
||||
"color": "blue",
|
||||
"order": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 4678,
|
||||
"type": "phone_number",
|
||||
"name": "Phone number",
|
||||
"order": 14,
|
||||
"primary": false
|
||||
},
|
||||
{
|
||||
"id": 4679,
|
||||
"type": "formula",
|
||||
"name": "Formula text",
|
||||
"order": 15,
|
||||
"primary": false,
|
||||
"error": null,
|
||||
"date_include_time": null,
|
||||
"nullable": true,
|
||||
"date_show_tzinfo": null,
|
||||
"date_format": null,
|
||||
"date_force_timezone": null,
|
||||
"number_decimal_places": null,
|
||||
"date_time_format": null,
|
||||
"array_formula_type": null,
|
||||
"formula": "field(\"Name\")",
|
||||
"formula_type": "text"
|
||||
},
|
||||
{
|
||||
"id": 4680,
|
||||
"type": "formula",
|
||||
"name": "Formula file",
|
||||
"order": 16,
|
||||
"primary": false,
|
||||
"error": null,
|
||||
"date_include_time": null,
|
||||
"nullable": true,
|
||||
"date_show_tzinfo": null,
|
||||
"date_format": null,
|
||||
"date_force_timezone": null,
|
||||
"number_decimal_places": null,
|
||||
"date_time_format": null,
|
||||
"array_formula_type": "single_file",
|
||||
"formula": "field(\"File\")",
|
||||
"formula_type": "array"
|
||||
},
|
||||
{
|
||||
"id": 4686,
|
||||
"type": "link_row",
|
||||
"name": "Related",
|
||||
"order": 17,
|
||||
"primary": false,
|
||||
"link_row_table_id": 539,
|
||||
"link_row_related_field_id": null,
|
||||
"has_related_field": false
|
||||
},
|
||||
{
|
||||
"id": 4687,
|
||||
"type": "lookup",
|
||||
"name": "Lookup text",
|
||||
"order": 18,
|
||||
"primary": false,
|
||||
"error": null,
|
||||
"date_include_time": null,
|
||||
"nullable": true,
|
||||
"date_show_tzinfo": null,
|
||||
"date_format": null,
|
||||
"date_force_timezone": null,
|
||||
"number_decimal_places": null,
|
||||
"date_time_format": null,
|
||||
"array_formula_type": "text",
|
||||
"through_field_id": 4686,
|
||||
"through_field_name": "Related",
|
||||
"target_field_id": 4681,
|
||||
"target_field_name": "Name"
|
||||
},
|
||||
{
|
||||
"id": 4688,
|
||||
"type": "lookup",
|
||||
"name": "Lookup number",
|
||||
"order": 19,
|
||||
"primary": false,
|
||||
"error": null,
|
||||
"date_include_time": null,
|
||||
"nullable": true,
|
||||
"date_show_tzinfo": null,
|
||||
"date_format": null,
|
||||
"date_force_timezone": null,
|
||||
"number_decimal_places": 0,
|
||||
"date_time_format": null,
|
||||
"array_formula_type": "number",
|
||||
"through_field_id": 4686,
|
||||
"through_field_name": "Related",
|
||||
"target_field_id": 4684,
|
||||
"target_field_name": "Number"
|
||||
},
|
||||
{
|
||||
"id": 4689,
|
||||
"type": "lookup",
|
||||
"name": "Lookup single select",
|
||||
"order": 20,
|
||||
"primary": false,
|
||||
"error": null,
|
||||
"date_include_time": null,
|
||||
"nullable": true,
|
||||
"date_show_tzinfo": null,
|
||||
"date_format": null,
|
||||
"date_force_timezone": null,
|
||||
"number_decimal_places": null,
|
||||
"date_time_format": null,
|
||||
"array_formula_type": "single_select",
|
||||
"through_field_id": 4686,
|
||||
"through_field_name": "Related",
|
||||
"target_field_id": 4685,
|
||||
"target_field_name": "Single select"
|
||||
},
|
||||
{
|
||||
"id": 4691,
|
||||
"type": "lookup",
|
||||
"name": "Lookup",
|
||||
"order": 21,
|
||||
"primary": false,
|
||||
"error": null,
|
||||
"date_include_time": null,
|
||||
"nullable": false,
|
||||
"date_show_tzinfo": null,
|
||||
"date_format": null,
|
||||
"date_force_timezone": null,
|
||||
"number_decimal_places": null,
|
||||
"date_time_format": null,
|
||||
"array_formula_type": "boolean",
|
||||
"through_field_id": 4686,
|
||||
"through_field_name": "Related",
|
||||
"target_field_id": 4690,
|
||||
"target_field_name": "Boolean"
|
||||
},
|
||||
{
|
||||
"id": 4693,
|
||||
"type": "lookup",
|
||||
"name": "Lookup date",
|
||||
"order": 22,
|
||||
"primary": false,
|
||||
"error": null,
|
||||
"date_include_time": false,
|
||||
"nullable": true,
|
||||
"date_show_tzinfo": false,
|
||||
"date_format": "EU",
|
||||
"date_force_timezone": null,
|
||||
"number_decimal_places": null,
|
||||
"date_time_format": "24",
|
||||
"array_formula_type": "date",
|
||||
"through_field_id": 4686,
|
||||
"through_field_name": "Related",
|
||||
"target_field_id": 4692,
|
||||
"target_field_name": "Date"
|
||||
},
|
||||
{
|
||||
"id": 4694,
|
||||
"type": "count",
|
||||
"name": "Count",
|
||||
"order": 23,
|
||||
"primary": false,
|
||||
"error": null,
|
||||
"date_include_time": null,
|
||||
"nullable": false,
|
||||
"date_show_tzinfo": null,
|
||||
"date_format": null,
|
||||
"date_force_timezone": null,
|
||||
"number_decimal_places": 0,
|
||||
"date_time_format": null,
|
||||
"array_formula_type": null,
|
||||
"through_field_id": 4686
|
||||
},
|
||||
{
|
||||
"id": 4695,
|
||||
"type": "rollup",
|
||||
"name": "Rollup sum",
|
||||
"order": 24,
|
||||
"primary": false,
|
||||
"error": null,
|
||||
"date_include_time": null,
|
||||
"nullable": false,
|
||||
"date_show_tzinfo": null,
|
||||
"date_format": null,
|
||||
"date_force_timezone": null,
|
||||
"number_decimal_places": 0,
|
||||
"date_time_format": null,
|
||||
"array_formula_type": null,
|
||||
"through_field_id": 4686,
|
||||
"target_field_id": 4684,
|
||||
"rollup_function": "sum"
|
||||
},
|
||||
{
|
||||
"id": 4696,
|
||||
"type": "multiple_collaborators",
|
||||
"name": "Collaborators",
|
||||
"order": 25,
|
||||
"primary": false,
|
||||
"notify_user_when_added": false
|
||||
},
|
||||
{
|
||||
"id": 4697,
|
||||
"type": "number",
|
||||
"name": "Price",
|
||||
"order": 26,
|
||||
"primary": false,
|
||||
"number_decimal_places": 2,
|
||||
"number_negative": false
|
||||
}
|
||||
],
|
||||
"views": [
|
||||
{
|
||||
"id": 2169,
|
||||
"type": "grid",
|
||||
"name": "Grid",
|
||||
"order": 1,
|
||||
"ownership_type": "collaborative",
|
||||
"created_by": "bram@baserow.io",
|
||||
"filter_type": "AND",
|
||||
"filters_disabled": false,
|
||||
"filters": [],
|
||||
"filter_groups": [],
|
||||
"sortings": [],
|
||||
"group_bys": [],
|
||||
"decorations": [],
|
||||
"public": false,
|
||||
"row_identifier_type": "count",
|
||||
"field_options": [
|
||||
{
|
||||
"id": 14321,
|
||||
"field_id": 4664,
|
||||
"width": 148,
|
||||
"hidden": false,
|
||||
"order": 0,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14319,
|
||||
"field_id": 4665,
|
||||
"width": 191,
|
||||
"hidden": false,
|
||||
"order": 1,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14320,
|
||||
"field_id": 4666,
|
||||
"width": 125,
|
||||
"hidden": false,
|
||||
"order": 2,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14351,
|
||||
"field_id": 4697,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 3,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14341,
|
||||
"field_id": 4686,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 4,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14322,
|
||||
"field_id": 4667,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 5,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14323,
|
||||
"field_id": 4668,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 6,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14324,
|
||||
"field_id": 4669,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 7,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14325,
|
||||
"field_id": 4670,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 8,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14326,
|
||||
"field_id": 4671,
|
||||
"width": 216,
|
||||
"hidden": false,
|
||||
"order": 9,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14327,
|
||||
"field_id": 4672,
|
||||
"width": 236,
|
||||
"hidden": false,
|
||||
"order": 10,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14333,
|
||||
"field_id": 4673,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 11,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14334,
|
||||
"field_id": 4674,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 12,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14335,
|
||||
"field_id": 4675,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 13,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14336,
|
||||
"field_id": 4676,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 14,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14337,
|
||||
"field_id": 4677,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 15,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14338,
|
||||
"field_id": 4678,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 16,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14348,
|
||||
"field_id": 4694,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 17,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14349,
|
||||
"field_id": 4695,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 18,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14339,
|
||||
"field_id": 4679,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 19,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14340,
|
||||
"field_id": 4680,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 20,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14342,
|
||||
"field_id": 4687,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 21,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14343,
|
||||
"field_id": 4688,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 22,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14344,
|
||||
"field_id": 4689,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 23,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14346,
|
||||
"field_id": 4691,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 24,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14347,
|
||||
"field_id": 4693,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 25,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14350,
|
||||
"field_id": 4696,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 26,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"id": 1,
|
||||
"order": "1.00000000000000000000",
|
||||
"created_on": "2023-10-25T19:04:55.554233+00:00",
|
||||
"updated_on": "2023-10-25T19:14:16.559135+00:00",
|
||||
"field_4664": "First row",
|
||||
"field_4665": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium sem id tellus ultricies fringilla. Vivamus vel lorem et lacus luctus pretium. Vestibulum ut tellus at ipsum faucibus venenatis sed vel diam. Cras sit amet leo neque. Nulla efficitur sit amet sapien et hendrerit. Praesent eu elit eu lorem consequat porta molestie in dui. Sed pellentesque urna ipsum, posuere tristique mauris vestibulum ac. Nam malesuada nisl non risus condimentum rutrum. Aliquam suscipit, lectus ut euismod euismod, nibh justo dictum ligula, nec lacinia augue nisi vel arcu.",
|
||||
"field_4666": "100",
|
||||
"field_4667": 4,
|
||||
"field_4668": "true",
|
||||
"field_4669": "2023-10-01",
|
||||
"field_4670": "2023-10-02T19:11:26+00:00",
|
||||
"field_4671": null,
|
||||
"field_4672": null,
|
||||
"field_4673": "https://baserow.io",
|
||||
"field_4674": "bram@baserow.io",
|
||||
"field_4675": [
|
||||
{
|
||||
"name": "1eOyNhZSuyOoGtr7cIuKnqzzofEQLv3N_45e07cf623e634b96b3e82aeaf7ecc74efd03a05808bf1eb69ceef8a9df7d135.doc",
|
||||
"visible_name": "file-sample_100kB.doc",
|
||||
"original_name": "file-sample_100kB.doc"
|
||||
},
|
||||
{
|
||||
"name": "NPE5TiPZyWUiep1sav7XmQpIb5TDKWvf_771b2e98db13f1f683eaf37dd65364a9297ad32679301947f4bea68c3e625244.xls",
|
||||
"visible_name": "file_example_XLS_10.xls",
|
||||
"original_name": "file_example_XLS_10.xls"
|
||||
},
|
||||
{
|
||||
"name": "cFVB2dLV1KGLadXeS6L74H0FXQWvHjQX_71944d7430c461f0cd6e7fd10cee7eb72786352a3678fc7bc0ae3d410f72aece.mp4",
|
||||
"visible_name": "file_example_MP4_480_1_5MG.mp4",
|
||||
"original_name": "file_example_MP4_480_1_5MG.mp4"
|
||||
},
|
||||
{
|
||||
"name": "ZSIWNqJTojLUEvo91Qr4IQVfhosEdUy6_9a2270d5964f64981fb1e91dd13e5941262817bdce873cf357c92adbef906b5d.mp3",
|
||||
"visible_name": "file_example_MP3_700KB.mp3",
|
||||
"original_name": "file_example_MP3_700KB.mp3"
|
||||
},
|
||||
{
|
||||
"name": "ZommpPn0tOFo8q8ISZON8YBGEIGGM8Yx_88aeb1f4467bd1e50cf624de972fbf3f40801632fedb64aaa7b1a8a9ef786fc6.jpg",
|
||||
"visible_name": "file_example_JPG_100kB.jpg",
|
||||
"original_name": "file_example_JPG_100kB.jpg"
|
||||
},
|
||||
{
|
||||
"name": "IyUZDvME0a9RreFstg2Zc7nBTgl46zQd_38c9792d725c45dd431699e6a3b0f0f8e17c63c9ac7331387ee30dcc6e42a511.pdf",
|
||||
"visible_name": "file-sample_150kB.pdf",
|
||||
"original_name": "file-sample_150kB.pdf"
|
||||
}
|
||||
],
|
||||
"field_4676": 2492,
|
||||
"field_4677": [
|
||||
2494,
|
||||
2495
|
||||
],
|
||||
"field_4678": "+12345678",
|
||||
"field_4679": null,
|
||||
"field_4680": null,
|
||||
"field_4686": [
|
||||
1,
|
||||
2
|
||||
],
|
||||
"field_4687": null,
|
||||
"field_4688": null,
|
||||
"field_4689": null,
|
||||
"field_4691": null,
|
||||
"field_4693": null,
|
||||
"field_4694": null,
|
||||
"field_4695": null,
|
||||
"field_4696": [
|
||||
"bram@baserow.io"
|
||||
],
|
||||
"field_4697": "100.00"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 539,
|
||||
"name": "Related",
|
||||
"order": 2,
|
||||
"fields": [
|
||||
{
|
||||
"id": 4681,
|
||||
"type": "text",
|
||||
"name": "Name",
|
||||
"order": 0,
|
||||
"primary": true,
|
||||
"text_default": ""
|
||||
},
|
||||
{
|
||||
"id": 4684,
|
||||
"type": "number",
|
||||
"name": "Number",
|
||||
"order": 1,
|
||||
"primary": false,
|
||||
"number_decimal_places": 0,
|
||||
"number_negative": false
|
||||
},
|
||||
{
|
||||
"id": 4685,
|
||||
"type": "single_select",
|
||||
"name": "Single select",
|
||||
"order": 2,
|
||||
"primary": false,
|
||||
"select_options": [
|
||||
{
|
||||
"id": 2497,
|
||||
"value": "1",
|
||||
"color": "dark-orange",
|
||||
"order": 0
|
||||
},
|
||||
{
|
||||
"id": 2498,
|
||||
"value": "2",
|
||||
"color": "green",
|
||||
"order": 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 4690,
|
||||
"type": "boolean",
|
||||
"name": "Boolean",
|
||||
"order": 3,
|
||||
"primary": false
|
||||
},
|
||||
{
|
||||
"id": 4692,
|
||||
"type": "date",
|
||||
"name": "Date",
|
||||
"order": 4,
|
||||
"primary": false,
|
||||
"date_format": "EU",
|
||||
"date_include_time": true,
|
||||
"date_time_format": "24",
|
||||
"date_show_tzinfo": false,
|
||||
"date_force_timezone": null
|
||||
}
|
||||
],
|
||||
"views": [
|
||||
{
|
||||
"id": 2170,
|
||||
"type": "grid",
|
||||
"name": "Grid",
|
||||
"order": 1,
|
||||
"ownership_type": "collaborative",
|
||||
"created_by": "bram@baserow.io",
|
||||
"filter_type": "AND",
|
||||
"filters_disabled": false,
|
||||
"filters": [],
|
||||
"filter_groups": [],
|
||||
"sortings": [],
|
||||
"group_bys": [],
|
||||
"decorations": [],
|
||||
"public": false,
|
||||
"row_identifier_type": "id",
|
||||
"field_options": [
|
||||
{
|
||||
"id": 14330,
|
||||
"field_id": 4681,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 32767,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14331,
|
||||
"field_id": 4684,
|
||||
"width": 184,
|
||||
"hidden": false,
|
||||
"order": 32767,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14332,
|
||||
"field_id": 4685,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 32767,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
},
|
||||
{
|
||||
"id": 14345,
|
||||
"field_id": 4690,
|
||||
"width": 200,
|
||||
"hidden": false,
|
||||
"order": 32767,
|
||||
"aggregation_type": "",
|
||||
"aggregation_raw_type": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"id": 1,
|
||||
"order": "1.00000000000000000000",
|
||||
"created_on": "2023-10-25T19:09:50.671242+00:00",
|
||||
"updated_on": "2023-10-25T19:12:42.182580+00:00",
|
||||
"field_4681": "Row 1",
|
||||
"field_4684": "1",
|
||||
"field_4685": 2497,
|
||||
"field_4690": "true",
|
||||
"field_4692": "2023-10-01T19:12:41+00:00"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"order": "2.00000000000000000000",
|
||||
"created_on": "2023-10-25T19:09:50.671294+00:00",
|
||||
"updated_on": "2023-10-25T19:12:45.338599+00:00",
|
||||
"field_4681": "Row 2",
|
||||
"field_4684": "2",
|
||||
"field_4685": 2498,
|
||||
"field_4690": "true",
|
||||
"field_4692": "2023-10-02T19:12:44+00:00"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
backend/templates/all-fields.zip
Normal file
BIN
backend/templates/all-fields.zip
Normal file
Binary file not shown.
|
|
@ -2277,6 +2277,95 @@ def test_list_rows_public_with_query_param_order(api_client, data_fixture):
|
|||
assert response_json["error"] == "ERROR_ORDER_BY_FIELD_NOT_POSSIBLE"
|
||||
|
||||
|
||||
@pytest.mark.django_db
|
||||
def test_list_rows_public_with_query_param_group_by(api_client, data_fixture):
|
||||
user, token = data_fixture.create_user_and_token()
|
||||
table = data_fixture.create_database_table(user=user)
|
||||
table_2 = data_fixture.create_database_table(database=table.database)
|
||||
public_field = data_fixture.create_text_field(table=table, name="public")
|
||||
public_field_2 = data_fixture.create_text_field(table=table, name="public2")
|
||||
hidden_field = data_fixture.create_text_field(table=table, name="hidden")
|
||||
link_row_field = FieldHandler().create_field(
|
||||
user=user,
|
||||
table=table,
|
||||
type_name="link_row",
|
||||
name="Link",
|
||||
link_row_table=table_2,
|
||||
)
|
||||
grid_view = data_fixture.create_grid_view(
|
||||
table=table, user=user, public=True, create_options=False
|
||||
)
|
||||
data_fixture.create_grid_view_field_option(grid_view, public_field, hidden=False)
|
||||
data_fixture.create_grid_view_field_option(grid_view, public_field_2, hidden=False)
|
||||
data_fixture.create_grid_view_field_option(grid_view, hidden_field, hidden=True)
|
||||
data_fixture.create_grid_view_field_option(grid_view, link_row_field, hidden=False)
|
||||
|
||||
first_row = RowHandler().create_row(
|
||||
user,
|
||||
table,
|
||||
values={"public": "b", "public2": "2", "hidden": "y"},
|
||||
user_field_names=True,
|
||||
)
|
||||
second_row = RowHandler().create_row(
|
||||
user,
|
||||
table,
|
||||
values={"public": "a", "public2": "2", "hidden": "y"},
|
||||
user_field_names=True,
|
||||
)
|
||||
third_row = RowHandler().create_row(
|
||||
user,
|
||||
table,
|
||||
values={"public": "b", "public2": "1", "hidden": "z"},
|
||||
user_field_names=True,
|
||||
)
|
||||
|
||||
url = reverse(
|
||||
"api:database:views:grid:public_rows", kwargs={"slug": grid_view.slug}
|
||||
)
|
||||
response = api_client.get(
|
||||
f"{url}?group_by=field_{public_field.id}",
|
||||
)
|
||||
response_json = response.json()
|
||||
assert response.status_code == HTTP_200_OK
|
||||
assert len(response_json["results"]) == 3
|
||||
assert response_json["results"][0]["id"] == second_row.id
|
||||
assert response_json["results"][1]["id"] == first_row.id
|
||||
assert response_json["results"][2]["id"] == third_row.id
|
||||
|
||||
url = reverse(
|
||||
"api:database:views:grid:public_rows", kwargs={"slug": grid_view.slug}
|
||||
)
|
||||
response = api_client.get(
|
||||
f"{url}?group_by=-field_{public_field.id}&sort_by=field{public_field_2.id}",
|
||||
)
|
||||
response_json = response.json()
|
||||
assert response.status_code == HTTP_200_OK
|
||||
assert len(response_json["results"]) == 3
|
||||
assert response_json["results"][0]["id"] == first_row.id
|
||||
assert response_json["results"][1]["id"] == third_row.id
|
||||
assert response_json["results"][2]["id"] == second_row.id
|
||||
|
||||
url = reverse(
|
||||
"api:database:views:grid:public_rows", kwargs={"slug": grid_view.slug}
|
||||
)
|
||||
response = api_client.get(
|
||||
f"{url}?group_by=field_{hidden_field.id}",
|
||||
)
|
||||
response_json = response.json()
|
||||
assert response.status_code == HTTP_400_BAD_REQUEST
|
||||
assert response_json["error"] == "ERROR_ORDER_BY_FIELD_NOT_FOUND"
|
||||
|
||||
url = reverse(
|
||||
"api:database:views:grid:public_rows", kwargs={"slug": grid_view.slug}
|
||||
)
|
||||
response = api_client.get(
|
||||
f"{url}?group_by=field_{link_row_field.id}",
|
||||
)
|
||||
response_json = response.json()
|
||||
assert response.status_code == HTTP_400_BAD_REQUEST
|
||||
assert response_json["error"] == "ERROR_ORDER_BY_FIELD_NOT_POSSIBLE"
|
||||
|
||||
|
||||
@pytest.mark.django_db
|
||||
def test_list_rows_public_filters_by_visible_and_hidden_columns(
|
||||
api_client, data_fixture
|
||||
|
|
|
|||
|
|
@ -2204,6 +2204,51 @@ def test_get_public_rows_queryset_and_field_ids_view_order_by(data_fixture):
|
|||
assert list(queryset.values_list(f"field_{field.id}", flat=True)) == [1, 2, 3]
|
||||
|
||||
|
||||
@pytest.mark.django_db
|
||||
def test_get_public_rows_queryset_and_field_ids_view_group_by(data_fixture):
|
||||
grid_view = data_fixture.create_grid_view(public=True)
|
||||
field = data_fixture.create_number_field(table=grid_view.table)
|
||||
field_2 = data_fixture.create_number_field(table=grid_view.table)
|
||||
|
||||
model = grid_view.table.get_model()
|
||||
row_1 = model.objects.create(**{f"field_{field.id}": 1, f"field_{field_2.id}": 4})
|
||||
row_2 = model.objects.create(**{f"field_{field.id}": 2, f"field_{field_2.id}": 3})
|
||||
row_3 = model.objects.create(**{f"field_{field.id}": 3, f"field_{field_2.id}": 2})
|
||||
row_4 = model.objects.create(**{f"field_{field.id}": 3, f"field_{field_2.id}": 1})
|
||||
|
||||
(
|
||||
queryset,
|
||||
field_ids,
|
||||
publicly_visible_field_options,
|
||||
) = ViewHandler().get_public_rows_queryset_and_field_ids(
|
||||
grid_view, group_by=f"-field_{field.id}"
|
||||
)
|
||||
|
||||
assert queryset.count() == 4
|
||||
assert list(queryset.values_list("pk", flat=True)) == [
|
||||
row_3.id,
|
||||
row_4.id,
|
||||
row_2.id,
|
||||
row_1.id,
|
||||
]
|
||||
|
||||
(
|
||||
queryset,
|
||||
field_ids,
|
||||
publicly_visible_field_options,
|
||||
) = ViewHandler().get_public_rows_queryset_and_field_ids(
|
||||
grid_view, group_by=f"field_{field.id}", order_by=f"field_{field_2.id}"
|
||||
)
|
||||
|
||||
assert queryset.count() == 4
|
||||
assert list(queryset.values_list("pk", flat=True)) == [
|
||||
row_1.id,
|
||||
row_2.id,
|
||||
row_4.id,
|
||||
row_3.id,
|
||||
]
|
||||
|
||||
|
||||
@pytest.mark.django_db
|
||||
def test_get_public_rows_queryset_and_field_ids_include_exclude_fields(data_fixture):
|
||||
grid_view = data_fixture.create_grid_view(public=True)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"type": "feature",
|
||||
"message": "Group rows by field.",
|
||||
"issue_number": 143,
|
||||
"bullet_points": [],
|
||||
"created_at": "2023-10-27"
|
||||
}
|
||||
|
|
@ -23,8 +23,6 @@
|
|||
|
||||
.group-bys__item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
@include rounded($rounded);
|
||||
@include flex-align-items(10px);
|
||||
|
|
@ -41,7 +39,7 @@
|
|||
margin-top: -7px;
|
||||
|
||||
@include loading(14px);
|
||||
@include absolute(50%, auto, 0, 10px);
|
||||
@include absolute(50%, auto, 0, 5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -65,8 +63,8 @@
|
|||
}
|
||||
|
||||
.group-bys__description {
|
||||
flex: 0 0 60px;
|
||||
width: 60px;
|
||||
flex: 0 0 50px;
|
||||
width: 50px;
|
||||
margin-right: 10px;
|
||||
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -118,6 +118,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.grid-view__head-group {
|
||||
width: 100px; // must be replaced with dynamic value later.
|
||||
}
|
||||
|
||||
.grid-view__body {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -176,11 +180,18 @@
|
|||
background-size: 66px 66px;
|
||||
}
|
||||
|
||||
.grid-view__placeholder-groups {
|
||||
@include absolute(0, auto, 0, 0);
|
||||
|
||||
background-color: $color-neutral-50;
|
||||
}
|
||||
|
||||
.grid-view__placeholder-column {
|
||||
@include absolute(0, auto, 0, auto);
|
||||
|
||||
border-right: 1px solid $color-neutral-200;
|
||||
|
||||
&.grid-view__placeholder-column--no-border-right,
|
||||
.grid-view__left & {
|
||||
border-right: none;
|
||||
}
|
||||
|
|
@ -229,6 +240,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.grid-view__row-placeholder {
|
||||
height: 32px + 1px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.grid-view__row-warning {
|
||||
@include absolute(auto, auto, -20px, 0);
|
||||
@include fixed-height(20px, 12px);
|
||||
|
|
@ -257,11 +273,13 @@
|
|||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&.grid-view__column--no-border-right,
|
||||
.grid-view__left & {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.grid-view__column--sorted::after,
|
||||
&.grid-view__column--grouped::after,
|
||||
&.grid-view__column--filtered::after {
|
||||
content: '';
|
||||
|
||||
|
|
@ -272,9 +290,70 @@
|
|||
background-color: rgba($color-warning-100, 0.8);
|
||||
}
|
||||
|
||||
&.grid-view__column--grouped::after {
|
||||
background-color: rgba($color-purple-100, 0.5);
|
||||
}
|
||||
|
||||
&.grid-view__column--filtered::after {
|
||||
background-color: rgba($color-success-100, 0.5);
|
||||
}
|
||||
|
||||
&.grid-view__column--group-end::before {
|
||||
@include absolute(auto, auto, -1px, 0);
|
||||
|
||||
content: '';
|
||||
height: 1px;
|
||||
background-color: $color-neutral-400;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-view__group-by-divider {
|
||||
@include absolute(0, auto, 0, auto);
|
||||
|
||||
z-index: 3;
|
||||
width: 1px;
|
||||
background-color: $color-neutral-400;
|
||||
}
|
||||
|
||||
.grid-view__group {
|
||||
position: relative;
|
||||
background-color: $color-neutral-50;
|
||||
|
||||
&.grid-view__group--end::after {
|
||||
@include absolute(auto, auto, 0, 0);
|
||||
|
||||
content: '';
|
||||
height: 1px;
|
||||
background-color: $color-neutral-400;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-view__group-cell {
|
||||
display: flex;
|
||||
height: 33px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.grid-view__group-name {
|
||||
@extend %ellipsis;
|
||||
|
||||
max-width: 50%;
|
||||
line-height: 33px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.grid-view__group-value {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.grid-view__row-info {
|
||||
|
|
@ -581,6 +660,7 @@
|
|||
.grid-view__add-row {
|
||||
color: $color-neutral-900;
|
||||
background-color: $white;
|
||||
padding-left: 8px;
|
||||
height: 100%;
|
||||
|
||||
@include flex-align-items();
|
||||
|
|
@ -592,10 +672,6 @@
|
|||
&.hover {
|
||||
background-color: $color-primary-100;
|
||||
}
|
||||
|
||||
.grid-view__left & {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-view__field-dragging {
|
||||
|
|
|
|||
|
|
@ -15,14 +15,16 @@
|
|||
<GridViewSection
|
||||
ref="left"
|
||||
class="grid-view__left"
|
||||
:fields="leftFields"
|
||||
:visible-fields="leftFields"
|
||||
:all-fields-in-table="fields"
|
||||
:decorations-by-place="decorationsByPlace"
|
||||
:database="database"
|
||||
:table="table"
|
||||
:view="view"
|
||||
:include-field-width-handles="false"
|
||||
:include-row-details="true"
|
||||
:include-grid-view-identifier-dropdown="true"
|
||||
:include-row-details="!viewHasGroupBys"
|
||||
:include-grid-view-identifier-dropdown="!viewHasGroupBys"
|
||||
:include-group-by="true"
|
||||
:read-only="
|
||||
readOnly ||
|
||||
!$hasPermission(
|
||||
|
|
@ -55,13 +57,7 @@
|
|||
@refresh-row="refreshRow"
|
||||
@scroll="scroll($event.pixelY, 0)"
|
||||
@cell-selected="cellSelected"
|
||||
>
|
||||
<template #foot>
|
||||
<div class="grid-view__foot-info">
|
||||
{{ $tc('gridView.rowCount', count, { count }) }}
|
||||
</div>
|
||||
</template>
|
||||
</GridViewSection>
|
||||
></GridViewSection>
|
||||
<GridViewRowsAddContext ref="rowsAddContext" @add-rows="addRows" />
|
||||
<div
|
||||
ref="divider"
|
||||
|
|
@ -69,7 +65,7 @@
|
|||
:style="{ left: leftWidth + 'px' }"
|
||||
></div>
|
||||
<GridViewFieldWidthHandle
|
||||
v-if="canFitInTwoColumns"
|
||||
v-if="primaryFieldIsSticky"
|
||||
class="grid-view__divider-width"
|
||||
:style="{ left: leftWidth + 'px' }"
|
||||
:database="database"
|
||||
|
|
@ -85,12 +81,15 @@
|
|||
<GridViewSection
|
||||
ref="right"
|
||||
class="grid-view__right"
|
||||
:fields="visibleFields"
|
||||
:visible-fields="rightVisibleFields"
|
||||
:all-fields-in-table="fields"
|
||||
:decorations-by-place="decorationsByPlace"
|
||||
:database="database"
|
||||
:can-fit-in-two-columns="canFitInTwoColumns"
|
||||
:primary-field-is-sticky="primaryFieldIsSticky"
|
||||
:table="table"
|
||||
:view="view"
|
||||
:include-row-details="viewHasGroupBys"
|
||||
:include-grid-view-identifier-dropdown="viewHasGroupBys"
|
||||
:include-add-field="true"
|
||||
:can-order-fields="true"
|
||||
:read-only="
|
||||
|
|
@ -113,6 +112,7 @@
|
|||
@update="updateValue"
|
||||
@paste="multiplePasteFromCell"
|
||||
@edit="editValue"
|
||||
@row-dragging="rowDragStart"
|
||||
@cell-mousedown-left="multiSelectStart"
|
||||
@cell-mouseover="multiSelectHold"
|
||||
@cell-mouseup-left="multiSelectStop"
|
||||
|
|
@ -124,14 +124,14 @@
|
|||
@refresh-row="refreshRow"
|
||||
@scroll="scroll($event.pixelY, $event.pixelX)"
|
||||
@cell-selected="cellSelected"
|
||||
>
|
||||
</GridViewSection>
|
||||
></GridViewSection>
|
||||
<GridViewRowDragging
|
||||
ref="rowDragging"
|
||||
:table="table"
|
||||
:view="view"
|
||||
:fields="allVisibleFields"
|
||||
:store-prefix="storePrefix"
|
||||
:offset="activeGroupBys.length * groupWidth"
|
||||
vertical="getVerticalScrollbarElement"
|
||||
@scroll="scroll($event.pixelY, $event.pixelX)"
|
||||
></GridViewRowDragging>
|
||||
|
|
@ -375,14 +375,14 @@ export default {
|
|||
* belong.
|
||||
*/
|
||||
allVisibleFields() {
|
||||
return this.leftFields.concat(this.visibleFields)
|
||||
return this.leftFields.concat(this.rightVisibleFields)
|
||||
},
|
||||
/**
|
||||
* Returns only the visible fields in the correct order that are in
|
||||
* the right section of the grid. Primary must always be
|
||||
* first if in that list.
|
||||
*/
|
||||
visibleFields() {
|
||||
rightVisibleFields() {
|
||||
const fieldOptions = this.fieldOptions
|
||||
return this.rightFields
|
||||
.filter(filterVisibleFieldsFunction(fieldOptions))
|
||||
|
|
@ -397,15 +397,21 @@ export default {
|
|||
.filter(filterHiddenFieldsFunction(fieldOptions))
|
||||
.sort(sortFieldsByOrderAndIdFunction(fieldOptions))
|
||||
},
|
||||
viewHasGroupBys() {
|
||||
return this.activeGroupBys.length > 0
|
||||
},
|
||||
primaryFieldIsSticky() {
|
||||
return this.canFitInTwoColumns && !this.viewHasGroupBys
|
||||
},
|
||||
leftFields() {
|
||||
if (this.canFitInTwoColumns) {
|
||||
if (this.primaryFieldIsSticky) {
|
||||
return this.fields.filter((field) => field.primary)
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
rightFields() {
|
||||
if (this.canFitInTwoColumns) {
|
||||
if (this.primaryFieldIsSticky) {
|
||||
return this.fields.filter((field) => !field.primary)
|
||||
} else {
|
||||
return this.fields
|
||||
|
|
@ -418,7 +424,12 @@ export default {
|
|||
)
|
||||
},
|
||||
leftWidth() {
|
||||
return this.leftFieldsWidth + this.gridViewRowDetailsWidth
|
||||
return (
|
||||
this.leftFieldsWidth +
|
||||
(this.viewHasGroupBys ? 0 : this.gridViewRowDetailsWidth) +
|
||||
// 100 must be replaced with the dynamic width
|
||||
this.activeGroupBys.length * this.groupWidth
|
||||
)
|
||||
},
|
||||
activeSearchTerm() {
|
||||
return this.$store.getters[
|
||||
|
|
@ -467,7 +478,6 @@ export default {
|
|||
...(this.$options.computed || {}),
|
||||
...mapGetters({
|
||||
allRows: this.$options.propsData.storePrefix + 'view/grid/getAllRows',
|
||||
count: this.$options.propsData.storePrefix + 'view/grid/getCount',
|
||||
isMultiSelectActive:
|
||||
this.$options.propsData.storePrefix + 'view/grid/isMultiSelectActive',
|
||||
}),
|
||||
|
|
@ -572,7 +582,7 @@ export default {
|
|||
|
||||
if (scrollDirection !== 'vertical') {
|
||||
const fieldPrimary = field.primary
|
||||
if (elementLeft < 0 && (!this.canFitInTwoColumns || !fieldPrimary)) {
|
||||
if (elementLeft < 0 && (!this.primaryFieldIsSticky || !fieldPrimary)) {
|
||||
// If the field isn't visible in the viewport we need to scroll left in order
|
||||
// to show it.
|
||||
this.horizontalScroll(
|
||||
|
|
@ -581,7 +591,7 @@ export default {
|
|||
this.$refs.scrollbars.updateHorizontal()
|
||||
} else if (
|
||||
elementRight > horizontalContainerWidth &&
|
||||
(!this.canFitInTwoColumns || !fieldPrimary)
|
||||
(!this.primaryFieldIsSticky || !fieldPrimary)
|
||||
) {
|
||||
// If the field isn't visible in the viewport we need to scroll right in order
|
||||
// to show it.
|
||||
|
|
@ -635,10 +645,13 @@ export default {
|
|||
const filterIndex = this.view.filters.findIndex((filter) => {
|
||||
return filter.field === field.id
|
||||
})
|
||||
const groupIndex = this.view.group_bys.findIndex((group) => {
|
||||
return group.field === field.id
|
||||
})
|
||||
const sortIndex = this.view.sortings.findIndex((sort) => {
|
||||
return sort.field === field.id
|
||||
})
|
||||
if (filterIndex > -1 || sortIndex > -1) {
|
||||
if (filterIndex > -1 || groupIndex > -1 || sortIndex > -1) {
|
||||
this.$emit('refresh')
|
||||
}
|
||||
},
|
||||
|
|
@ -1076,6 +1089,13 @@ export default {
|
|||
this.storePrefix + 'view/grid/visibleByScrollTop',
|
||||
this.$refs.right.$refs.body.scrollTop
|
||||
)
|
||||
// The grid view store keeps a copy of the group bys that must only be updated
|
||||
// after the refresh of the page. This is because the group by depends on the rows
|
||||
// being sorted, and this will only be the case after a refresh.
|
||||
await this.$store.dispatch(
|
||||
this.storePrefix + 'view/grid/updateActiveGroupBys',
|
||||
clone(this.view.group_bys)
|
||||
)
|
||||
this.$nextTick(() => {
|
||||
this.fieldsUpdated()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
'grid-view__column--multi-select-left': props.multiSelectPosition.left,
|
||||
'grid-view__column--multi-select-bottom':
|
||||
props.multiSelectPosition.bottom,
|
||||
'grid-view__column--group-end': props.groupEnd,
|
||||
}"
|
||||
:style="data.style"
|
||||
@click.exact="$options.methods.select($event, parent, props.field.id)"
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
'grid-view__column--filtered':
|
||||
!view.filters_disabled &&
|
||||
view.filters.findIndex((filter) => filter.field === field.id) !== -1,
|
||||
'grid-view__column--grouped':
|
||||
view.group_bys.findIndex((groupBy) => groupBy.field === field.id) !==
|
||||
-1,
|
||||
'grid-view__column--sorted':
|
||||
view.sortings.findIndex((sort) => sort.field === field.id) !== -1,
|
||||
}"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<template>
|
||||
<div class="grid-view__head">
|
||||
<div
|
||||
v-for="groupBy in includeGroupBy ? view.group_bys : []"
|
||||
:key="'field-group-' + groupBy.field"
|
||||
class="grid-view__head-group"
|
||||
></div>
|
||||
<div
|
||||
v-if="includeRowDetails"
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
:style="{ width: gridViewRowDetailsWidth + 'px' }"
|
||||
>
|
||||
<GridViewRowIdentifierDropdown
|
||||
|
|
@ -19,7 +24,7 @@
|
|||
></GridViewRowIdentifierDropdown>
|
||||
</div>
|
||||
<GridViewFieldType
|
||||
v-for="field in fields"
|
||||
v-for="field in visibleFields"
|
||||
:key="'field-type-' + field.id"
|
||||
:database="database"
|
||||
:table="table"
|
||||
|
|
@ -80,7 +85,7 @@ export default {
|
|||
},
|
||||
mixins: [gridViewHelpers],
|
||||
props: {
|
||||
fields: {
|
||||
visibleFields: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -106,6 +111,11 @@ export default {
|
|||
required: false,
|
||||
default: () => false,
|
||||
},
|
||||
includeGroupBy: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: () => false,
|
||||
},
|
||||
includeAddField: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
|
|
|
|||
|
|
@ -7,11 +7,18 @@
|
|||
}"
|
||||
>
|
||||
<div
|
||||
v-for="(value, index) in placeholderPositions"
|
||||
:key="'placeholder-column-' + index"
|
||||
class="grid-view__placeholder-column"
|
||||
:style="{ left: value - 1 + 'px' }"
|
||||
v-if="includeGroupBy"
|
||||
class="grid-view__placeholder-groups"
|
||||
:style="{ width: groupByWidth + 'px' }"
|
||||
></div>
|
||||
<template v-if="includeRowDetails || visibleFields.length > 0">
|
||||
<div
|
||||
v-for="(value, index) in placeholderPositions"
|
||||
:key="'placeholder-column-' + index"
|
||||
class="grid-view__placeholder-column"
|
||||
:style="{ left: value - 1 + 'px' }"
|
||||
></div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -24,34 +31,50 @@ export default {
|
|||
name: 'GridViewPlaceholder',
|
||||
mixins: [gridViewHelpers],
|
||||
props: {
|
||||
fields: {
|
||||
visibleFields: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
view: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
includeRowDetails: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
includeGroupBy: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: () => false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
groupByWidth() {
|
||||
return this.includeGroupBy
|
||||
? this.activeGroupBys.length * this.groupWidth
|
||||
: 0
|
||||
},
|
||||
/**
|
||||
* Calculate the left positions of the placeholder columns. These are the gray
|
||||
* vertical lines that are always visible, even when the data hasn't loaded yet.
|
||||
*/
|
||||
placeholderPositions() {
|
||||
let last = 0
|
||||
let last = this.groupByWidth
|
||||
last += this.includeRowDetails ? this.gridViewRowDetailsWidth : 0
|
||||
const placeholderPositions = {}
|
||||
this.fields.forEach((field) => {
|
||||
this.visibleFields.forEach((field) => {
|
||||
last += this.getFieldWidth(field.id)
|
||||
placeholderPositions[field.id] = last
|
||||
})
|
||||
return placeholderPositions
|
||||
},
|
||||
placeholderWidth() {
|
||||
let width = this.fields.reduce(
|
||||
let width = this.visibleFields.reduce(
|
||||
(value, field) => this.getFieldWidth(field.id) + value,
|
||||
0
|
||||
)
|
||||
width += this.groupByWidth
|
||||
if (this.includeRowDetails) {
|
||||
width += this.gridViewRowDetailsWidth
|
||||
}
|
||||
|
|
@ -65,6 +88,8 @@ export default {
|
|||
placeholderHeight:
|
||||
this.$options.propsData.storePrefix +
|
||||
'view/grid/getPlaceholderHeight',
|
||||
activeGroupBys:
|
||||
this.$options.propsData.storePrefix + 'view/grid/getActiveGroupBys',
|
||||
}),
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,6 +20,18 @@
|
|||
@mouseleave="$emit('row-hover', { row, value: false })"
|
||||
@contextmenu.prevent="$emit('row-context', { row, event: $event })"
|
||||
>
|
||||
<template v-if="includeGroupBy">
|
||||
<GridViewRowGroup
|
||||
v-for="group in groups"
|
||||
:key="'group-' + group.id"
|
||||
:width="groupWidth"
|
||||
:start="group.start"
|
||||
:end="group.end"
|
||||
:group-by="group.groupBy"
|
||||
:all-fields-in-table="allFieldsInTable"
|
||||
:row="row"
|
||||
></GridViewRowGroup>
|
||||
</template>
|
||||
<template v-if="includeRowDetails">
|
||||
<div
|
||||
v-if="
|
||||
|
|
@ -38,7 +50,8 @@
|
|||
}}</template>
|
||||
</div>
|
||||
<div
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
:class="{ 'grid-view__column--group-end': groupEnd }"
|
||||
:style="{ width: gridViewRowDetailsWidth + 'px' }"
|
||||
>
|
||||
<div
|
||||
|
|
@ -93,6 +106,7 @@
|
|||
:multi-select-position="getMultiSelectPosition(row.id, field)"
|
||||
:read-only="readOnly"
|
||||
:store-prefix="storePrefix"
|
||||
:group-end="groupEnd"
|
||||
:style="{
|
||||
width: fieldWidths[field.id] + 'px',
|
||||
...getSelectedCellStyle(field),
|
||||
|
|
@ -122,10 +136,17 @@ import GridViewCell from '@baserow/modules/database/components/view/grid/GridVie
|
|||
import gridViewHelpers from '@baserow/modules/database/mixins/gridViewHelpers'
|
||||
import GridViewRowExpandButton from '@baserow/modules/database/components/view/grid/GridViewRowExpandButton'
|
||||
import RecursiveWrapper from '@baserow/modules/database/components/RecursiveWrapper'
|
||||
import GridViewRowGroup from '@baserow/modules/database/components/view/grid/GridViewRowGroup.vue'
|
||||
import groupBy from '@baserow/modules/database/services/groupBy'
|
||||
|
||||
export default {
|
||||
name: 'GridViewRow',
|
||||
components: { GridViewRowExpandButton, GridViewCell, RecursiveWrapper },
|
||||
components: {
|
||||
GridViewRowGroup,
|
||||
GridViewRowExpandButton,
|
||||
GridViewCell,
|
||||
RecursiveWrapper,
|
||||
},
|
||||
mixins: [gridViewHelpers],
|
||||
provide() {
|
||||
return {
|
||||
|
|
@ -145,7 +166,11 @@ export default {
|
|||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
fields: {
|
||||
groups: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
renderedFields: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -153,7 +178,11 @@ export default {
|
|||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
allFields: {
|
||||
visibleFields: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
allFieldsInTable: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -166,6 +195,11 @@ export default {
|
|||
required: false,
|
||||
default: () => false,
|
||||
},
|
||||
includeGroupBy: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: () => false,
|
||||
},
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
|
|
@ -183,7 +217,7 @@ export default {
|
|||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
canFitInTwoColumns: {
|
||||
primaryFieldIsSticky: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: () => true,
|
||||
|
|
@ -207,8 +241,8 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
/**
|
||||
* This component already accepts a `fields` property containing the fields that
|
||||
* must be rendered based on the viewport width and horizontal scroll offset,
|
||||
* This component already accepts a `renderedFields` property containing the fields
|
||||
* that must be rendered based on the viewport width and horizontal scroll offset,
|
||||
* meaning it only renders the fields that are in the viewport. Because a selected
|
||||
* field must always be rendered, this computed property checks if there is a
|
||||
* selected field and if so, it's added to the array. This doesn't influence the
|
||||
|
|
@ -220,12 +254,12 @@ export default {
|
|||
// If the row doesn't have a selected field, we can safely return the fields
|
||||
// because we just want to render the fields inside of the view port.
|
||||
if (!this.row._.selected) {
|
||||
return this.fields
|
||||
return this.renderedFields
|
||||
}
|
||||
|
||||
// Check if the selected field exists in the all fields array, so not just the to
|
||||
// be rendered ones.
|
||||
const selectedField = this.allFields.find(
|
||||
const selectedField = this.visibleFields.find(
|
||||
(field) => field.id === this.row._.selectedFieldId
|
||||
)
|
||||
|
||||
|
|
@ -233,15 +267,16 @@ export default {
|
|||
// add it because it's already rendered.
|
||||
if (
|
||||
selectedField === undefined ||
|
||||
this.fields.find((field) => field.id === selectedField.id) !== undefined
|
||||
this.renderedFields.find((field) => field.id === selectedField.id) !==
|
||||
undefined
|
||||
) {
|
||||
return this.fields
|
||||
return this.renderedFields
|
||||
}
|
||||
|
||||
// If the selected field exists in all fields, but not in fields it must be added
|
||||
// to the fields array because we want to render it. It won't influence the other
|
||||
// cells because it's positioned absolute.
|
||||
const fields = this.fields.slice()
|
||||
const fields = this.renderedFields.slice()
|
||||
fields.unshift(selectedField)
|
||||
return fields
|
||||
},
|
||||
|
|
@ -259,8 +294,12 @@ export default {
|
|||
return this.row.id
|
||||
}
|
||||
},
|
||||
groupEnd() {
|
||||
return this.groups.length > 0 && this.groups[this.groups.length - 1].end
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
groupBy,
|
||||
isCellSelected(fieldId) {
|
||||
return this.row._.selected && this.row._.selectedFieldId === fieldId
|
||||
},
|
||||
|
|
@ -285,9 +324,9 @@ export default {
|
|||
rowId
|
||||
)
|
||||
|
||||
const allFieldIds = this.allFields.map((field) => field.id)
|
||||
const allFieldIds = this.visibleFields.map((field) => field.id)
|
||||
let fieldIndex = allFieldIds.findIndex((id) => field.id === id)
|
||||
fieldIndex += !field.primary && this.canFitInTwoColumns ? 1 : 0
|
||||
fieldIndex += !field.primary && this.primaryFieldIsSticky ? 1 : 0
|
||||
|
||||
const [minRow, maxRow] =
|
||||
this.$store.getters[
|
||||
|
|
@ -346,7 +385,8 @@ export default {
|
|||
* otherwise certain functionality won't work.
|
||||
*/
|
||||
getSelectedCellStyle(field) {
|
||||
const exists = this.fields.find((f) => f.id === field.id) !== undefined
|
||||
const exists =
|
||||
this.renderedFields.find((f) => f.id === field.id) !== undefined
|
||||
|
||||
// If the field already exists in the field list it means that it's already
|
||||
// rendered. In that case we don't have to provide any other styling because it's
|
||||
|
|
@ -360,14 +400,15 @@ export default {
|
|||
// the other cells.
|
||||
const styling = { position: 'absolute' }
|
||||
|
||||
const selectedFieldIndex = this.allFields.findIndex(
|
||||
const selectedFieldIndex = this.visibleFields.findIndex(
|
||||
(field) => field.id === this.row._.selectedFieldId
|
||||
)
|
||||
const firstVisibleFieldIndex = this.allFields.findIndex(
|
||||
(field) => field.id === this.fields[0].id
|
||||
const firstVisibleFieldIndex = this.visibleFields.findIndex(
|
||||
(field) => field.id === this.renderedFields[0].id
|
||||
)
|
||||
const lastVisibleFieldIndex = this.allFields.findIndex(
|
||||
(field) => field.id === this.fields[this.fields.length - 1].id
|
||||
const lastVisibleFieldIndex = this.visibleFields.findIndex(
|
||||
(field) =>
|
||||
field.id === this.renderedFields[this.renderedFields.length - 1].id
|
||||
)
|
||||
|
||||
// Positions the selected field cell on the right position without influencing the
|
||||
|
|
@ -378,14 +419,14 @@ export default {
|
|||
// If the selected field must be positioned before the other fields
|
||||
let spaceBetween = 0
|
||||
for (let i = selectedFieldIndex; i < firstVisibleFieldIndex; i++) {
|
||||
spaceBetween += this.fieldWidths[this.allFields[i].id]
|
||||
spaceBetween += this.fieldWidths[this.visibleFields[i].id]
|
||||
}
|
||||
styling.left = -spaceBetween + 'px'
|
||||
} else if (selectedFieldIndex > lastVisibleFieldIndex) {
|
||||
// If the selected field must be positioned after the other fields.
|
||||
let spaceBetween = 0
|
||||
for (let i = lastVisibleFieldIndex; i < selectedFieldIndex; i++) {
|
||||
spaceBetween += this.fieldWidths[this.allFields[i].id]
|
||||
spaceBetween += this.fieldWidths[this.visibleFields[i].id]
|
||||
}
|
||||
styling.right = -spaceBetween + 'px'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export default {
|
|||
name: 'GridViewRowAdd',
|
||||
mixins: [gridViewHelpers],
|
||||
props: {
|
||||
fields: {
|
||||
visibleFields: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -38,7 +38,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
width() {
|
||||
let width = this.fields.reduce(
|
||||
let width = this.visibleFields.reduce(
|
||||
(value, field) => this.getFieldWidth(field.id) + value,
|
||||
0
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<div v-show="dragging" class="grid-view__row-dragging-container">
|
||||
<div
|
||||
v-show="dragging"
|
||||
class="grid-view__row-dragging-container"
|
||||
:style="{ left: offset + 'px' }"
|
||||
>
|
||||
<div
|
||||
class="grid-view__row-dragging"
|
||||
:style="{ width: width + 'px', top: draggingTop + 'px' }"
|
||||
|
|
@ -37,6 +41,11 @@ export default {
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: () => 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
<template functional>
|
||||
<div
|
||||
class="grid-view__group"
|
||||
:style="{ width: props.width + 'px' }"
|
||||
:class="{
|
||||
'grid-view__group--end': props.end,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="props.start"
|
||||
class="grid-view__group-cell"
|
||||
:set="
|
||||
(field = $options.methods.getField(
|
||||
props.allFieldsInTable,
|
||||
props.groupBy
|
||||
))
|
||||
"
|
||||
>
|
||||
<div class="grid-view__group-name">
|
||||
{{ field.name }}
|
||||
</div>
|
||||
<div class="grid-view__group-value">
|
||||
<component
|
||||
:is="$options.methods.getCardComponent(field, parent)"
|
||||
:field="field"
|
||||
:value="props.row['field_' + field.id]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GridViewRowGroup',
|
||||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
start: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
end: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
groupBy: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
allFieldsInTable: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
row: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getField(allFieldsInTable, groupBy) {
|
||||
const field = allFieldsInTable.find((f) => f.id === groupBy.field)
|
||||
return field
|
||||
},
|
||||
getCardComponent(field, parent) {
|
||||
const fieldType = parent.$registry.get('field', field.type)
|
||||
return fieldType.getGroupByComponent(field)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,23 +2,26 @@
|
|||
<div
|
||||
class="grid-view__rows"
|
||||
:style="{
|
||||
transform: `translateY(${rowsTop}px) translateX(${leftOffset}px)`,
|
||||
transform: `translateY(${rowsTop}px) translateX(${leftOffset || 0}px)`,
|
||||
}"
|
||||
>
|
||||
<GridViewRow
|
||||
v-for="(row, index) in rows"
|
||||
:key="`row-${row._.persistentId}`"
|
||||
:groups="groupsPerRow[row.id]"
|
||||
:view="view"
|
||||
:workspace-id="workspaceId"
|
||||
:row="row"
|
||||
:fields="fields"
|
||||
:all-fields="allFields"
|
||||
:can-fit-in-two-columns="canFitInTwoColumns"
|
||||
:rendered-fields="renderedFields"
|
||||
:visible-fields="visibleFields"
|
||||
:all-fields-in-table="allFieldsInTable"
|
||||
:primary-field-is-sticky="primaryFieldIsSticky"
|
||||
:field-widths="fieldWidths"
|
||||
:include-row-details="includeRowDetails"
|
||||
:include-group-by="includeGroupBy"
|
||||
:decorations-by-place="decorationsByPlace"
|
||||
:read-only="readOnly"
|
||||
:can-drag="view.sortings.length === 0"
|
||||
:can-drag="view.sortings.length === 0 && activeGroupBys.length === 0"
|
||||
:store-prefix="storePrefix"
|
||||
:row-identifier-type="view.row_identifier_type"
|
||||
:count="index + rowsStartIndex + bufferStartIndex + 1"
|
||||
|
|
@ -38,11 +41,26 @@ export default {
|
|||
components: { GridViewRow },
|
||||
mixins: [gridViewHelpers],
|
||||
props: {
|
||||
fields: {
|
||||
/**
|
||||
* The visible fields that are within the viewport. The other ones are not rendered
|
||||
* for performance reasons.
|
||||
*/
|
||||
renderedFields: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
allFields: {
|
||||
/**
|
||||
* The fields that are chosen to be visible within the view.
|
||||
*/
|
||||
visibleFields: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
/**
|
||||
* All the fields in the table, regardless of the visibility, or whether they
|
||||
* should be rendered.
|
||||
*/
|
||||
allFieldsInTable: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -64,6 +82,11 @@ export default {
|
|||
required: false,
|
||||
default: () => false,
|
||||
},
|
||||
includeGroupBy: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: () => false,
|
||||
},
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
|
|
@ -72,7 +95,7 @@ export default {
|
|||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
canFitInTwoColumns: {
|
||||
primaryFieldIsSticky: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: () => true,
|
||||
|
|
@ -81,22 +104,113 @@ export default {
|
|||
computed: {
|
||||
fieldWidths() {
|
||||
const fieldWidths = {}
|
||||
this.allFields.forEach((field) => {
|
||||
this.visibleFields.forEach((field) => {
|
||||
fieldWidths[field.id] = this.getFieldWidth(field.id)
|
||||
})
|
||||
return fieldWidths
|
||||
},
|
||||
/**
|
||||
* This computed property prepares an array with clear instructions on the groups
|
||||
* for each row. It will hold data whether the row is the start of a group, or the
|
||||
* end, and for which group that is.
|
||||
*
|
||||
* We're calculating this for all the rows in the buffer because that way we can
|
||||
* immediately render the correct borders of the rows, even if the user is
|
||||
* scrolling fast through them.
|
||||
*
|
||||
* It returns a structure like:
|
||||
*
|
||||
* {
|
||||
* [rowId]: [
|
||||
* {
|
||||
* id: groupById,
|
||||
* start: false,
|
||||
* end: true,
|
||||
* groupBy: {}
|
||||
* }
|
||||
* ]
|
||||
* }
|
||||
*/
|
||||
groupsPerRow() {
|
||||
const groupBys = this.activeGroupBys
|
||||
const rows = this.allRows
|
||||
const groups = {}
|
||||
const fieldTypeMap = {}
|
||||
const fieldMap = {}
|
||||
|
||||
rows.forEach((row, index) => {
|
||||
const previousRow = rows[index - 1]
|
||||
const nextRow = rows[index + 1]
|
||||
|
||||
let lastGroupStart = false
|
||||
let lastGroupEnd = false
|
||||
|
||||
const startEndPerGroup = groupBys.map((groupBy) => {
|
||||
let start = false // The start of a group based on the group by value.
|
||||
let end = false // The end of a group based on the group by value.
|
||||
let fieldType = fieldTypeMap[groupBy.field]
|
||||
let field = fieldMap[groupBy.field]
|
||||
|
||||
if (fieldType === undefined) {
|
||||
field = this.allFieldsInTable.find((f) => f.id === groupBy.field)
|
||||
fieldType = this.$registry.get('field', field.type)
|
||||
fieldMap[groupBy.field] = field
|
||||
fieldTypeMap[groupBy.field] = fieldType
|
||||
}
|
||||
|
||||
if (
|
||||
previousRow === undefined ||
|
||||
!fieldType.isEqual(
|
||||
field,
|
||||
previousRow[`field_${groupBy.field}`],
|
||||
row[`field_${groupBy.field}`]
|
||||
) ||
|
||||
lastGroupStart
|
||||
) {
|
||||
start = true
|
||||
}
|
||||
|
||||
if (
|
||||
nextRow === undefined ||
|
||||
!fieldType.isEqual(
|
||||
field,
|
||||
nextRow[`field_${groupBy.field}`],
|
||||
row[`field_${groupBy.field}`]
|
||||
) ||
|
||||
lastGroupEnd
|
||||
) {
|
||||
end = true
|
||||
}
|
||||
|
||||
lastGroupStart = start
|
||||
lastGroupEnd = end
|
||||
|
||||
return {
|
||||
id: groupBy.id,
|
||||
start,
|
||||
end,
|
||||
groupBy,
|
||||
}
|
||||
})
|
||||
|
||||
groups[row.id] = startEndPerGroup
|
||||
})
|
||||
return groups
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
this.$options.computed = {
|
||||
...(this.$options.computed || {}),
|
||||
...mapGetters({
|
||||
rows: this.$options.propsData.storePrefix + 'view/grid/getRows',
|
||||
allRows: this.$options.propsData.storePrefix + 'view/grid/getAllRows',
|
||||
rowsTop: this.$options.propsData.storePrefix + 'view/grid/getRowsTop',
|
||||
rowsStartIndex:
|
||||
this.$options.propsData.storePrefix + 'view/grid/getRowsStartIndex',
|
||||
bufferStartIndex:
|
||||
this.$options.propsData.storePrefix + 'view/grid/getBufferStartIndex',
|
||||
activeGroupBys:
|
||||
this.$options.propsData.storePrefix + 'view/grid/getActiveGroupBys',
|
||||
}),
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,12 +11,18 @@
|
|||
},
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-for="(left, index) in groupByDividers"
|
||||
:key="'group-by-divider-' + index"
|
||||
class="grid-view__group-by-divider"
|
||||
:style="{ left: left + 'px' }"
|
||||
></div>
|
||||
<div class="grid-view__inner" :style="{ 'min-width': width + 'px' }">
|
||||
<GridViewHead
|
||||
:database="database"
|
||||
:table="table"
|
||||
:view="view"
|
||||
:fields="fields"
|
||||
:visible-fields="visibleFields"
|
||||
:include-field-width-handles="includeFieldWidthHandles"
|
||||
:include-row-details="includeRowDetails"
|
||||
:include-add-field="includeAddField"
|
||||
|
|
@ -48,20 +54,24 @@
|
|||
>
|
||||
<div class="grid-view__body-inner">
|
||||
<GridViewPlaceholder
|
||||
:fields="fields"
|
||||
:visible-fields="visibleFields"
|
||||
:view="view"
|
||||
:include-row-details="includeRowDetails"
|
||||
:include-group-by="includeGroupBy"
|
||||
:store-prefix="storePrefix"
|
||||
></GridViewPlaceholder>
|
||||
<GridViewRows
|
||||
ref="rows"
|
||||
:view="view"
|
||||
:fields="fieldsToRender"
|
||||
:rendered-fields="fieldsToRender"
|
||||
:visible-fields="visibleFields"
|
||||
:all-fields-in-table="allFieldsInTable"
|
||||
:workspace-id="database.workspace.id"
|
||||
:all-fields="fields"
|
||||
:decorations-by-place="decorationsByPlace"
|
||||
:left-offset="fieldsLeftOffset"
|
||||
:can-fit-in-two-columns="canFitInTwoColumns"
|
||||
:primary-field-is-sticky="primaryFieldIsSticky"
|
||||
:include-row-details="includeRowDetails"
|
||||
:include-group-by="includeGroupBy"
|
||||
:read-only="readOnly"
|
||||
:store-prefix="storePrefix"
|
||||
v-on="$listeners"
|
||||
|
|
@ -69,24 +79,28 @@
|
|||
<GridViewRowAdd
|
||||
v-if="
|
||||
!readOnly &&
|
||||
(includeRowDetails || visibleFields.length > 0) &&
|
||||
$hasPermission(
|
||||
'database.table.create_row',
|
||||
table,
|
||||
database.workspace.id
|
||||
)
|
||||
"
|
||||
:fields="fields"
|
||||
:visible-fields="visibleFields"
|
||||
:include-row-details="includeRowDetails"
|
||||
:store-prefix="storePrefix"
|
||||
v-on="$listeners"
|
||||
></GridViewRowAdd>
|
||||
<div v-else class="grid-view__row-placeholder"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-view__foot">
|
||||
<slot name="foot"></slot>
|
||||
<div v-if="includeRowDetails" class="grid-view__foot-info">
|
||||
{{ $tc('gridView.rowCount', count, { count }) }}
|
||||
</div>
|
||||
<template v-if="!publicGrid">
|
||||
<div
|
||||
v-for="field in fields"
|
||||
v-for="field in visibleFields"
|
||||
:key="field.id"
|
||||
:style="{ width: getFieldWidth(field.id) + 'px' }"
|
||||
>
|
||||
|
|
@ -144,7 +158,11 @@ export default {
|
|||
}
|
||||
},
|
||||
props: {
|
||||
fields: {
|
||||
visibleFields: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
allFieldsInTable: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
|
|
@ -174,6 +192,11 @@ export default {
|
|||
required: false,
|
||||
default: () => false,
|
||||
},
|
||||
includeGroupBy: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: () => false,
|
||||
},
|
||||
includeAddField: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
|
|
@ -189,7 +212,7 @@ export default {
|
|||
required: false,
|
||||
default: () => false,
|
||||
},
|
||||
canFitInTwoColumns: {
|
||||
primaryFieldIsSticky: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: () => true,
|
||||
|
|
@ -203,7 +226,7 @@ export default {
|
|||
return {
|
||||
// Render the first 20 fields by default so that there's at least some data when
|
||||
// the page is server side rendered.
|
||||
fieldsToRender: this.fields.slice(0, 20),
|
||||
fieldsToRender: this.visibleFields.slice(0, 20),
|
||||
// Indicates the offset
|
||||
fieldsLeftOffset: 0,
|
||||
}
|
||||
|
|
@ -214,7 +237,7 @@ export default {
|
|||
* given options.
|
||||
*/
|
||||
width() {
|
||||
let width = Object.values(this.fields).reduce(
|
||||
let width = Object.values(this.visibleFields).reduce(
|
||||
(value, field) => this.getFieldWidth(field.id) + value,
|
||||
0
|
||||
)
|
||||
|
|
@ -231,12 +254,32 @@ export default {
|
|||
return width
|
||||
},
|
||||
draggingFields() {
|
||||
return this.fields.filter((f) => !f.primary)
|
||||
return this.visibleFields.filter((f) => !f.primary)
|
||||
},
|
||||
draggingOffset() {
|
||||
return this.fields
|
||||
let offset = this.visibleFields
|
||||
.filter((f) => f.primary)
|
||||
.reduce((sum, f) => sum + this.getFieldWidth(f.id), 0)
|
||||
|
||||
if (this.includeRowDetails) {
|
||||
offset += this.gridViewRowDetailsWidth
|
||||
}
|
||||
|
||||
return offset
|
||||
},
|
||||
groupByDividers() {
|
||||
if (!this.includeGroupBy) {
|
||||
return []
|
||||
}
|
||||
|
||||
let last = 0
|
||||
const dividers = this.activeGroupBys
|
||||
.filter((groupBy, index) => index < this.activeGroupBys.length - 1)
|
||||
.map(() => {
|
||||
last += this.groupWidth
|
||||
return last
|
||||
})
|
||||
return dividers
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -246,7 +289,7 @@ export default {
|
|||
this.updateVisibleFieldsInRow()
|
||||
},
|
||||
},
|
||||
fields: {
|
||||
visibleFields: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.updateVisibleFieldsInRow()
|
||||
|
|
@ -260,6 +303,7 @@ export default {
|
|||
isMultiSelectHolding:
|
||||
this.$options.propsData.storePrefix +
|
||||
'view/grid/isMultiSelectHolding',
|
||||
count: this.$options.propsData.storePrefix + 'view/grid/getCount',
|
||||
}),
|
||||
}
|
||||
},
|
||||
|
|
@ -332,7 +376,7 @@ export default {
|
|||
|
||||
// Create an array containing the fields that are currently visible in the
|
||||
// viewport and must be rendered.
|
||||
const fieldsToRender = this.fields.filter((field) => {
|
||||
const fieldsToRender = this.visibleFields.filter((field) => {
|
||||
const width = this.getFieldWidth(field.id)
|
||||
const right = left + width
|
||||
const visible = right >= viewportStart && left <= viewportEnd
|
||||
|
|
|
|||
|
|
@ -152,10 +152,10 @@ export default {
|
|||
|
||||
const index = this.loadings.findIndex((l) => l.id === id)
|
||||
this.loadings.splice(index, 1)
|
||||
|
||||
// Indicates that this component can be destroyed if it is not selected.
|
||||
this.$emit('remove-keep-alive')
|
||||
}
|
||||
|
||||
// Indicates that this component can be destroyed if it is not selected.
|
||||
this.$emit('remove-keep-alive')
|
||||
},
|
||||
select() {
|
||||
// While the field is selected we want to open the select row toast by pressing
|
||||
|
|
|
|||
|
|
@ -215,6 +215,15 @@ export class FieldType extends Registerable {
|
|||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* This component should represent the grouped by field's value in the grid view. To
|
||||
* improve performance, this component should be a functional component. The card
|
||||
* component almost always compatible here, so we're returning that one by default.
|
||||
*/
|
||||
getGroupByComponent() {
|
||||
return this.getCardComponent()
|
||||
}
|
||||
|
||||
/**
|
||||
* This component displays row change difference for values of the field type.
|
||||
*/
|
||||
|
|
@ -256,6 +265,14 @@ export class FieldType extends Registerable {
|
|||
return [null, false].includes(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return true if both provided values are equal. This is used to determine
|
||||
* whether they both belong in the same group for example.
|
||||
*/
|
||||
isEqual(field, value1, value2) {
|
||||
return JSON.stringify(value1) === JSON.stringify(value2)
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return a string containing the error if the value is invalid. If the
|
||||
* value is valid, then null must be returned.
|
||||
|
|
@ -1693,6 +1710,21 @@ class BaseDateFieldType extends FieldType {
|
|||
getCanGroupByInView(field) {
|
||||
return true
|
||||
}
|
||||
|
||||
isEqual(field, value1, value2) {
|
||||
if (field.date_include_time) {
|
||||
// Seconds are visually ignored for a field that includes the time, so we'd
|
||||
// have to compare the values without them. A date is normally `null` or
|
||||
// `2023-10-27T18:17:00.758266Z`, and if you only take the first 16
|
||||
// characters, it's the value without the seconds.
|
||||
return (
|
||||
('' + value1).substring(0, 16) ===
|
||||
('' + value2).toString().substring(0, 16)
|
||||
)
|
||||
} else {
|
||||
return super.isEqual(field, value1, value2)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class DateFieldType extends BaseDateFieldType {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
gridViewRowDetailsWidth: 72,
|
||||
groupWidth: 200,
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
|
|
@ -19,6 +20,8 @@ export default {
|
|||
fieldOptions:
|
||||
this.$options.propsData.storePrefix + 'view/grid/getAllFieldOptions',
|
||||
publicGrid: 'page/view/public/getIsPublic',
|
||||
activeGroupBys:
|
||||
this.$options.propsData.storePrefix + 'view/grid/getActiveGroupBys',
|
||||
}),
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export default (client) => {
|
|||
searchMode = '',
|
||||
publicUrl = false,
|
||||
publicAuthToken = null,
|
||||
groupBy = '',
|
||||
orderBy = '',
|
||||
filters = {},
|
||||
includeFields = [],
|
||||
|
|
@ -45,6 +46,10 @@ export default (client) => {
|
|||
}
|
||||
}
|
||||
|
||||
if (groupBy) {
|
||||
params.append('group_by', groupBy)
|
||||
}
|
||||
|
||||
if (orderBy) {
|
||||
params.append('order_by', orderBy)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import {
|
|||
getRowSortFunction,
|
||||
matchSearchFilters,
|
||||
getFilters,
|
||||
getGroupBy,
|
||||
getOrderBy,
|
||||
} from '@baserow/modules/database/utils/view'
|
||||
import { RefreshCancelledError } from '@baserow/modules/core/errors'
|
||||
|
|
@ -125,6 +126,7 @@ export const state = () => ({
|
|||
// have any matching cells will still be displayed.
|
||||
hideRowsNotMatchingSearch: true,
|
||||
fieldAggregationData: {},
|
||||
activeGroupBys: [],
|
||||
})
|
||||
|
||||
export const mutations = {
|
||||
|
|
@ -142,6 +144,9 @@ export const mutations = {
|
|||
state.activeSearchTerm = ''
|
||||
state.hideRowsNotMatchingSearch = true
|
||||
},
|
||||
SET_ACTIVE_GROUP_BYS(state, groupBys) {
|
||||
state.activeGroupBys = groupBys
|
||||
},
|
||||
SET_SEARCH(state, { activeSearchTerm, hideRowsNotMatchingSearch }) {
|
||||
state.activeSearchTerm = activeSearchTerm.trim()
|
||||
state.hideRowsNotMatchingSearch = hideRowsNotMatchingSearch
|
||||
|
|
@ -614,6 +619,7 @@ export const actions = {
|
|||
searchMode: getDefaultSearchModeFromEnv(this.$config),
|
||||
publicUrl: rootGetters['page/view/public/getIsPublic'],
|
||||
publicAuthToken: rootGetters['page/view/public/getAuthToken'],
|
||||
groupBy: getGroupBy(rootGetters, getters.getLastGridId),
|
||||
orderBy: getOrderBy(rootGetters, getters.getLastGridId),
|
||||
filters: getFilters(rootGetters, getters.getLastGridId),
|
||||
})
|
||||
|
|
@ -775,6 +781,7 @@ export const actions = {
|
|||
searchMode: getDefaultSearchModeFromEnv(this.$config),
|
||||
publicUrl: rootGetters['page/view/public/getIsPublic'],
|
||||
publicAuthToken: rootGetters['page/view/public/getAuthToken'],
|
||||
groupBy: getGroupBy(rootGetters, getters.getLastGridId),
|
||||
orderBy: getOrderBy(rootGetters, getters.getLastGridId),
|
||||
filters: getFilters(rootGetters, getters.getLastGridId),
|
||||
})
|
||||
|
|
@ -849,6 +856,7 @@ export const actions = {
|
|||
searchMode: getDefaultSearchModeFromEnv(this.$config),
|
||||
publicUrl: rootGetters['page/view/public/getIsPublic'],
|
||||
publicAuthToken: rootGetters['page/view/public/getAuthToken'],
|
||||
groupBy: getGroupBy(rootGetters, getters.getLastGridId),
|
||||
orderBy: getOrderBy(rootGetters, getters.getLastGridId),
|
||||
filters: getFilters(rootGetters, getters.getLastGridId),
|
||||
})
|
||||
|
|
@ -898,6 +906,9 @@ export const actions = {
|
|||
})
|
||||
return lastRefreshRequest
|
||||
},
|
||||
updateActiveGroupBys({ commit }, groupBys) {
|
||||
commit('SET_ACTIVE_GROUP_BYS', groupBys)
|
||||
},
|
||||
/**
|
||||
* Updates the field options of a given field and also makes an API request to the
|
||||
* backend with the changed values. If the request fails the action is reverted.
|
||||
|
|
@ -1525,6 +1536,7 @@ export const actions = {
|
|||
searchMode: getDefaultSearchModeFromEnv(this.$config),
|
||||
publicUrl: rootGetters['page/view/public/getIsPublic'],
|
||||
publicAuthToken: rootGetters['page/view/public/getAuthToken'],
|
||||
groupBy: getGroupBy(rootGetters, getters.getLastGridId),
|
||||
orderBy: getOrderBy(rootGetters, getters.getLastGridId),
|
||||
filters: getFilters(rootGetters, getters.getLastGridId),
|
||||
includeFields: fields,
|
||||
|
|
@ -2902,6 +2914,9 @@ export const getters = {
|
|||
return row._.selected && row._.selectedFieldId !== -1
|
||||
})
|
||||
},
|
||||
getActiveGroupBys(state) {
|
||||
return state.activeGroupBys
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -425,6 +425,19 @@ export function newFieldMatchesActiveSearchTerm(
|
|||
return false
|
||||
}
|
||||
|
||||
export function getGroupBy(rootGetters, viewId) {
|
||||
if (rootGetters['page/view/public/getIsPublic']) {
|
||||
const view = rootGetters['view/get'](viewId)
|
||||
return view.group_bys
|
||||
.map((groupBy) => {
|
||||
return `${groupBy.order === 'DESC' ? '-' : ''}field_${groupBy.field}`
|
||||
})
|
||||
.join(',')
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
export function getOrderBy(rootGetters, viewId) {
|
||||
if (rootGetters['page/view/public/getIsPublic']) {
|
||||
const view = rootGetters['view/get'](viewId)
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import FormView from '@baserow/modules/database/components/view/form/FormView'
|
|||
import FormViewHeader from '@baserow/modules/database/components/view/form/FormViewHeader'
|
||||
import { FileFieldType } from '@baserow/modules/database/fieldTypes'
|
||||
import { newFieldMatchesActiveSearchTerm } from '@baserow/modules/database/utils/view'
|
||||
import { clone } from '@baserow/modules/core/utils/object'
|
||||
|
||||
export const maxPossibleOrderValue = 32767
|
||||
|
||||
|
|
@ -366,6 +367,13 @@ export class GridViewType extends ViewType {
|
|||
gridId: view.id,
|
||||
fields,
|
||||
})
|
||||
// The grid view store keeps a copy of the group bys that must only be updated
|
||||
// after the refresh of the page. This is because the group by depends on the rows
|
||||
// being sorted, and this will only be the case after a refresh.
|
||||
await store.dispatch(
|
||||
storePrefix + 'view/grid/updateActiveGroupBys',
|
||||
clone(view.group_bys)
|
||||
)
|
||||
}
|
||||
|
||||
async refresh(
|
||||
|
|
|
|||
3
web-frontend/test/fixtures/mockServer.js
vendored
3
web-frontend/test/fixtures/mockServer.js
vendored
|
|
@ -62,11 +62,12 @@ export class MockServer {
|
|||
createGridView(
|
||||
application,
|
||||
table,
|
||||
{ filters = [], sortings = [], decorations = [], ...rest }
|
||||
{ filters = [], sortings = [], groupBys = [], decorations = [], ...rest }
|
||||
) {
|
||||
return createGridView(this.mock, application, table, {
|
||||
filters,
|
||||
sortings,
|
||||
groupBys,
|
||||
decorations,
|
||||
...rest,
|
||||
})
|
||||
|
|
|
|||
2
web-frontend/test/fixtures/view.js
vendored
2
web-frontend/test/fixtures/view.js
vendored
|
|
@ -51,6 +51,7 @@ export function createGridView(
|
|||
viewId = 1,
|
||||
filters = [],
|
||||
sortings = [],
|
||||
groupBys = [],
|
||||
decorations = [],
|
||||
publicView = false,
|
||||
}
|
||||
|
|
@ -74,6 +75,7 @@ export function createGridView(
|
|||
row_identifier_type: 'id',
|
||||
filters,
|
||||
sortings,
|
||||
group_bys: groupBys,
|
||||
decorations,
|
||||
}
|
||||
mock.onGet(`/database/views/table/${tableId}/`).reply(200, [gridView])
|
||||
|
|
|
|||
|
|
@ -226,6 +226,7 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
|
|||
class="grid-view__left"
|
||||
style="width: 72px;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__inner"
|
||||
style="min-width: 72px;"
|
||||
|
|
@ -233,8 +234,9 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
|
|||
<div
|
||||
class="grid-view__head"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
style="width: 72px;"
|
||||
>
|
||||
<!---->
|
||||
|
|
@ -252,19 +254,26 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
|
|||
<div
|
||||
class="grid-view__placeholder"
|
||||
style="height: 33px; width: 72px;"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="grid-view__placeholder-groups"
|
||||
style="width: 0px;"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid-view__rows"
|
||||
style="transform: translateY(0px) translateX(nullpx);"
|
||||
style="transform: translateY(0px) translateX(0px);"
|
||||
>
|
||||
<div
|
||||
class="grid-view__row"
|
||||
>
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
style="width: 72px;"
|
||||
>
|
||||
<div
|
||||
|
|
@ -295,7 +304,9 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
<div
|
||||
class="grid-view__row-placeholder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -341,6 +352,7 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
|
|||
class="grid-view__right"
|
||||
style="left: 72px;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__inner"
|
||||
style="min-width: 1000px;"
|
||||
|
|
@ -348,6 +360,7 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
|
|||
<div
|
||||
class="grid-view__head"
|
||||
>
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
|
|
@ -496,6 +509,8 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
|
|||
class="grid-view__placeholder"
|
||||
style="height: 33px; width: 800px;"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__placeholder-column"
|
||||
style="left: 799px;"
|
||||
|
|
@ -523,6 +538,8 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
|
|||
>
|
||||
<!---->
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
style="width: 200px;"
|
||||
|
|
@ -554,13 +571,16 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
<div
|
||||
class="grid-view__row-placeholder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid-view__foot"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<!---->
|
||||
</div>
|
||||
|
|
@ -583,7 +603,7 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
|
|||
|
||||
<div
|
||||
class="grid-view__row-dragging-container"
|
||||
style="display: none;"
|
||||
style="left: 0px; display: none;"
|
||||
>
|
||||
<div
|
||||
class="grid-view__row-dragging"
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ exports[`GridView component with decoration Default component with first_cell de
|
|||
class="grid-view__left"
|
||||
style="width: 72px;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__inner"
|
||||
style="min-width: 72px;"
|
||||
|
|
@ -24,8 +25,9 @@ exports[`GridView component with decoration Default component with first_cell de
|
|||
<div
|
||||
class="grid-view__head"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
style="width: 72px;"
|
||||
>
|
||||
<div
|
||||
|
|
@ -50,19 +52,26 @@ exports[`GridView component with decoration Default component with first_cell de
|
|||
<div
|
||||
class="grid-view__placeholder"
|
||||
style="height: 66px; width: 72px;"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="grid-view__placeholder-groups"
|
||||
style="width: 0px;"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid-view__rows"
|
||||
style="transform: translateY(0px) translateX(nullpx);"
|
||||
style="transform: translateY(0px) translateX(0px);"
|
||||
>
|
||||
<div
|
||||
class="grid-view__row"
|
||||
>
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
style="width: 72px;"
|
||||
>
|
||||
<div
|
||||
|
|
@ -162,6 +171,7 @@ exports[`GridView component with decoration Default component with first_cell de
|
|||
class="grid-view__right"
|
||||
style="left: 72px;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__inner"
|
||||
style="min-width: 800px;"
|
||||
|
|
@ -169,6 +179,7 @@ exports[`GridView component with decoration Default component with first_cell de
|
|||
<div
|
||||
class="grid-view__head"
|
||||
>
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
|
|
@ -311,6 +322,8 @@ exports[`GridView component with decoration Default component with first_cell de
|
|||
class="grid-view__placeholder"
|
||||
style="height: 66px; width: 600px;"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__placeholder-column"
|
||||
style="left: 199px;"
|
||||
|
|
@ -334,6 +347,8 @@ exports[`GridView component with decoration Default component with first_cell de
|
|||
>
|
||||
<!---->
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
style="width: 200px;"
|
||||
|
|
@ -386,6 +401,7 @@ exports[`GridView component with decoration Default component with first_cell de
|
|||
<div
|
||||
class="grid-view__foot"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
style="width: 200px;"
|
||||
|
|
@ -437,7 +453,7 @@ exports[`GridView component with decoration Default component with first_cell de
|
|||
|
||||
<div
|
||||
class="grid-view__row-dragging-container"
|
||||
style="display: none;"
|
||||
style="left: 0px; display: none;"
|
||||
>
|
||||
<div
|
||||
class="grid-view__row-dragging"
|
||||
|
|
@ -471,6 +487,7 @@ exports[`GridView component with decoration Default component with row wrapper d
|
|||
class="grid-view__left"
|
||||
style="width: 72px;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__inner"
|
||||
style="min-width: 72px;"
|
||||
|
|
@ -478,8 +495,9 @@ exports[`GridView component with decoration Default component with row wrapper d
|
|||
<div
|
||||
class="grid-view__head"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
style="width: 72px;"
|
||||
>
|
||||
<div
|
||||
|
|
@ -504,11 +522,17 @@ exports[`GridView component with decoration Default component with row wrapper d
|
|||
<div
|
||||
class="grid-view__placeholder"
|
||||
style="height: 66px; width: 72px;"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="grid-view__placeholder-groups"
|
||||
style="width: 0px;"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid-view__rows"
|
||||
style="transform: translateY(0px) translateX(nullpx);"
|
||||
style="transform: translateY(0px) translateX(0px);"
|
||||
>
|
||||
<div
|
||||
class="test-wrapper"
|
||||
|
|
@ -576,6 +600,7 @@ exports[`GridView component with decoration Default component with row wrapper d
|
|||
class="grid-view__right"
|
||||
style="left: 72px;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__inner"
|
||||
style="min-width: 800px;"
|
||||
|
|
@ -583,6 +608,7 @@ exports[`GridView component with decoration Default component with row wrapper d
|
|||
<div
|
||||
class="grid-view__head"
|
||||
>
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
|
|
@ -725,6 +751,8 @@ exports[`GridView component with decoration Default component with row wrapper d
|
|||
class="grid-view__placeholder"
|
||||
style="height: 66px; width: 600px;"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__placeholder-column"
|
||||
style="left: 199px;"
|
||||
|
|
@ -769,6 +797,7 @@ exports[`GridView component with decoration Default component with row wrapper d
|
|||
<div
|
||||
class="grid-view__foot"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
style="width: 200px;"
|
||||
|
|
@ -820,7 +849,7 @@ exports[`GridView component with decoration Default component with row wrapper d
|
|||
|
||||
<div
|
||||
class="grid-view__row-dragging-container"
|
||||
style="display: none;"
|
||||
style="left: 0px; display: none;"
|
||||
>
|
||||
<div
|
||||
class="grid-view__row-dragging"
|
||||
|
|
@ -854,6 +883,7 @@ exports[`GridView component with decoration Default component with unavailable d
|
|||
class="grid-view__left"
|
||||
style="width: 72px;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__inner"
|
||||
style="min-width: 72px;"
|
||||
|
|
@ -861,8 +891,9 @@ exports[`GridView component with decoration Default component with unavailable d
|
|||
<div
|
||||
class="grid-view__head"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
style="width: 72px;"
|
||||
>
|
||||
<div
|
||||
|
|
@ -887,19 +918,26 @@ exports[`GridView component with decoration Default component with unavailable d
|
|||
<div
|
||||
class="grid-view__placeholder"
|
||||
style="height: 66px; width: 72px;"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="grid-view__placeholder-groups"
|
||||
style="width: 0px;"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid-view__rows"
|
||||
style="transform: translateY(0px) translateX(nullpx);"
|
||||
style="transform: translateY(0px) translateX(0px);"
|
||||
>
|
||||
<div
|
||||
class="grid-view__row"
|
||||
>
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
style="width: 72px;"
|
||||
>
|
||||
<div
|
||||
|
|
@ -993,6 +1031,7 @@ exports[`GridView component with decoration Default component with unavailable d
|
|||
class="grid-view__right"
|
||||
style="left: 72px;"
|
||||
>
|
||||
|
||||
<div
|
||||
class="grid-view__inner"
|
||||
style="min-width: 800px;"
|
||||
|
|
@ -1000,6 +1039,7 @@ exports[`GridView component with decoration Default component with unavailable d
|
|||
<div
|
||||
class="grid-view__head"
|
||||
>
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
|
|
@ -1142,6 +1182,8 @@ exports[`GridView component with decoration Default component with unavailable d
|
|||
class="grid-view__placeholder"
|
||||
style="height: 66px; width: 600px;"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__placeholder-column"
|
||||
style="left: 199px;"
|
||||
|
|
@ -1165,6 +1207,8 @@ exports[`GridView component with decoration Default component with unavailable d
|
|||
>
|
||||
<!---->
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
style="width: 200px;"
|
||||
|
|
@ -1217,6 +1261,7 @@ exports[`GridView component with decoration Default component with unavailable d
|
|||
<div
|
||||
class="grid-view__foot"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
style="width: 200px;"
|
||||
|
|
@ -1268,7 +1313,7 @@ exports[`GridView component with decoration Default component with unavailable d
|
|||
|
||||
<div
|
||||
class="grid-view__row-dragging-container"
|
||||
style="display: none;"
|
||||
style="left: 0px; display: none;"
|
||||
>
|
||||
<div
|
||||
class="grid-view__row-dragging"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ exports[`GridViewRows component Default component 1`] = `
|
|||
>
|
||||
<!---->
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
style="width: 200px;"
|
||||
|
|
@ -44,6 +46,8 @@ exports[`GridViewRows component Default component 1`] = `
|
|||
>
|
||||
<!---->
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
style="width: 200px;"
|
||||
|
|
@ -78,6 +82,8 @@ exports[`GridViewRows component Default component 1`] = `
|
|||
>
|
||||
<!---->
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
style="width: 200px;"
|
||||
|
|
@ -120,8 +126,10 @@ exports[`GridViewRows component With row details 1`] = `
|
|||
>
|
||||
<!---->
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
style="width: 72px;"
|
||||
>
|
||||
<div
|
||||
|
|
@ -185,8 +193,10 @@ exports[`GridViewRows component With row details 1`] = `
|
|||
>
|
||||
<!---->
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
style="width: 72px;"
|
||||
>
|
||||
<div
|
||||
|
|
@ -250,8 +260,10 @@ exports[`GridViewRows component With row details 1`] = `
|
|||
>
|
||||
<!---->
|
||||
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="grid-view__column"
|
||||
class="grid-view__column grid-view__column--no-border-right"
|
||||
style="width: 72px;"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -82,8 +82,9 @@ describe('GridViewRows component', () => {
|
|||
|
||||
const wrapper1 = await mountComponent({
|
||||
view,
|
||||
fields,
|
||||
allFields: fields,
|
||||
renderedFields: fields,
|
||||
visibleFields: fields,
|
||||
allFieldsInTable: fields,
|
||||
leftOffset: 0,
|
||||
readOnly: false,
|
||||
includeRowDetails: false,
|
||||
|
|
@ -100,8 +101,9 @@ describe('GridViewRows component', () => {
|
|||
|
||||
const wrapper1 = await mountComponent({
|
||||
view,
|
||||
fields,
|
||||
allFields: fields,
|
||||
renderedFields: fields,
|
||||
visibleFields: fields,
|
||||
allFieldsInTable: fields,
|
||||
leftOffset: 0,
|
||||
readOnly: false,
|
||||
includeRowDetails: true,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue