@platforma-sdk/ui-vue 1.30.22 → 1.30.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.30.22",
+  "version": "1.30.24",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -23,8 +23,8 @@
     "canonicalize": "~2.1.0",
     "ag-grid-enterprise": "^33.0.4",
     "ag-grid-vue3": "^33.0.4",
-    "@platforma-sdk/model": "^1.30.21",
-    "@milaboratories/uikit": "^2.2.74"
+    "@milaboratories/uikit": "^2.2.75",
+    "@platforma-sdk/model": "^1.30.24"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",

package/src/components/PlAgDataTable/PlAgDataTableV2.vue

@@ -55,6 +55,7 @@ import { autoSizeRowNumberColumn, PlAgDataTableRowNumberColId } from './sources/
 import { focusRow, makeOnceTracker, trackFirstDataRendered } from './sources/focus-row';
 import PlAgCsvExporter from '../PlAgCsvExporter/PlAgCsvExporter.vue';
 import { Deferred, isJsonEqual } from '@milaboratories/helpers';
+import PlAgRowCount from './PlAgRowCount.vue';
 
 ModuleRegistry.registerModules([
   ClientSideRowModelModule,
@@ -319,6 +320,11 @@ const gridOptions = shallowRef<GridOptions<PlAgDataTableRow>>({
     suppressQuotes: true,
     fileName: 'table.csv',
   },
+  statusBar: {
+    statusPanels: [
+      { statusPanel: PlAgRowCount, align: 'left' },
+    ],
+  },
 });
 
 const onGridReady = (event: GridReadyEvent) => {

package/src/components/PlAgDataTable/PlAgRowCount.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import type { GridApi } from 'ag-grid-enterprise';
+import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue';
+
+const { params } = defineProps<{
+  params: { api: GridApi };
+}>();
+
+const totalRowCount = ref(params.api.getDisplayedRowCount());
+const selectedRowCount = ref(params.api.getSelectedRows().length);
+
+const pluralRules = new Intl.PluralRules('en');
+const numberFormatter = new Intl.NumberFormat('en');
+
+const output = computed(() => {
+  let result = numberFormatter.format(totalRowCount.value) + ' ';
+  result += pluralRules.select(totalRowCount.value) === 'one' ? 'row' : 'rows';
+  if (selectedRowCount.value > 0) {
+    result += ' (' + numberFormatter.format(selectedRowCount.value) + ' selected)';
+  }
+  return result;
+});
+
+function updateRowCounts() {
+  totalRowCount.value = params.api.getDisplayedRowCount();
+  selectedRowCount.value = params.api.getSelectedRows().length;
+}
+
+onBeforeMount(() => {
+  params.api.addEventListener('selectionChanged', updateRowCounts);
+  params.api.addEventListener('rowDataUpdated', updateRowCounts);
+  params.api.addEventListener('modelUpdated', updateRowCounts);
+});
+
+onBeforeUnmount(() => {
+  params.api.removeEventListener('selectionChanged', updateRowCounts);
+  params.api.removeEventListener('rowDataUpdated', updateRowCounts);
+  params.api.removeEventListener('modelUpdated', updateRowCounts);
+});
+</script>
+
+<template>
+  {{ output }}
+</template>

package/src/components/PlAgDataTable/sources/row-number.ts

@@ -1,6 +1,7 @@
 import { isColumnSelectionCol, type ColDef, type GridApi, type ValueGetterParams } from 'ag-grid-enterprise';
 import { nextTick } from 'vue';
 import { PlAgRowNumCheckbox } from '../../PlAgRowNumCheckbox';
+import PlAgRowNumHeader from '../../PlAgRowNumHeader.vue';
 
 export const PlAgDataTableRowNumberColId = '"##RowNumberColumnId##"';
 
@@ -11,6 +12,7 @@ export function makeRowNumberColDef<TData = any>(): ColDef<TData> {
   return {
     colId: PlAgDataTableRowNumberColId,
     headerName: '#',
+    headerComponent: PlAgRowNumHeader,
     valueGetter: (params: ValueGetterParams) => {
       if (params.node === null) return null;
       if (params.node.rowIndex === null) return null;

package/src/components/PlAgRowNumCheckbox/PlAgRowNumCheckbox.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { ICellRendererParams, RowSelectionOptions } from 'ag-grid-enterprise';
+import type { ICellRendererParams } from 'ag-grid-enterprise';
 import { PlCheckbox } from '@milaboratories/uikit';
-import { ref, computed } from 'vue';
+import { ref, computed, onBeforeMount, onBeforeUnmount } from 'vue';
 import $styles from './pl-ag-row-num-checkbox.module.scss';
 
 const props = defineProps<{ params: ICellRendererParams }>();
@@ -11,19 +11,6 @@ const isChecked = ref(!!props.params.node.isSelected());
 const forceShowCheckbox = computed(() => isChecked.value || api.getGridOption('rowSelection'));
 const allowedSelection = ref(api.getGridOption('rowSelection'));
 
-const rowSelection = api.getGridOption('rowSelection');
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function isRowSelectionWithMode(obj: any): obj is RowSelectionOptions<any, any> {
-  return obj && typeof obj === 'object' && 'mode' in obj;
-}
-
-if (isRowSelectionWithMode(rowSelection) && rowSelection.mode === 'singleRow') {
-  props.params.node.addEventListener('rowSelected', (val) => {
-    isChecked.value = !!val.node.isSelected();
-  });
-}
-
 const updateSelection = () => {
   isChecked.value = !!props.params.node.isSelected();
 };
@@ -34,6 +21,14 @@ const setSelection = (val: boolean) => {
     updateSelection();
   }
 };
+
+onBeforeMount(() => {
+  props.params.node.addEventListener('rowSelected', updateSelection);
+});
+
+onBeforeUnmount(() => {
+  props.params.node.removeEventListener('rowSelected', updateSelection);
+});
 </script>
 
 <template>

package/src/components/PlAgRowNumHeader.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { PlCheckbox } from '@milaboratories/uikit';
+import type { IHeaderParams } from 'ag-grid-enterprise';
+import { computed, onBeforeMount, onBeforeUnmount, ref } from 'vue';
+
+const { params } = defineProps<{
+  params: IHeaderParams;
+}>();
+
+const selectedRowCount = ref(params.api.getSelectedRows().length);
+const totalRowCount = ref(params.api.getDisplayedRowCount());
+const isSelectable = ref(Boolean(params.api.getGridOption('rowSelection')));
+
+const allRowsSelected = computed(() =>
+  selectedRowCount.value === totalRowCount.value
+  && selectedRowCount.value > 0,
+);
+
+function updateRowCounts() {
+  selectedRowCount.value = params.api.getSelectedRows().length;
+  totalRowCount.value = params.api.getDisplayedRowCount();
+}
+
+function updateIsSelectable() {
+  isSelectable.value = Boolean(params.api.getGridOption('rowSelection'));
+}
+
+onBeforeMount(() => {
+  params.api.addEventListener('selectionChanged', updateRowCounts);
+  params.api.addEventListener('rowDataUpdated', updateRowCounts);
+  params.api.addEventListener('modelUpdated', updateRowCounts);
+  params.api.addEventListener('stateUpdated', updateIsSelectable);
+});
+
+onBeforeUnmount(() => {
+  params.api.removeEventListener('selectionChanged', updateRowCounts);
+  params.api.removeEventListener('rowDataUpdated', updateRowCounts);
+  params.api.removeEventListener('modelUpdated', updateRowCounts);
+  params.api.removeEventListener('stateUpdated', updateIsSelectable);
+});
+</script>
+
+<template>
+  <div
+    style="
+      position: absolute;
+      inset: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    "
+  >
+    <PlCheckbox
+      v-if="isSelectable"
+      :model-value="allRowsSelected"
+      :indeterminate="!allRowsSelected && selectedRowCount > 0"
+      @update:model-value="
+        allRowsSelected
+          ? params.api.deselectAll()
+          : params.api.selectAll()
+      "
+    />
+    <span v-else>
+      {{ params.displayName }}
+    </span>
+  </div>
+</template>