@visns-studio/visns-components 6.24.3 → 6.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -2
- package/src/components/Autocomplete.jsx +189 -119
- package/src/components/DataGrid.jsx +472 -31
- package/src/components/Navigation.jsx +475 -51
- package/src/components/auth/ClientAuthFrame.jsx +5 -0
- package/src/components/auth/ClientAuthScreen.jsx +29 -0
- package/src/components/columns/ColumnRenderers.jsx +3 -46
- package/src/components/columns/StackedRow.jsx +186 -0
- package/src/components/controls/DataGridSearch.jsx +110 -2
- package/src/components/controls/DataGridSortSheet.jsx +155 -0
- package/src/components/generic/GenericAuth.jsx +50 -18
- package/src/components/generic/GenericDashboard.jsx +20 -1
- package/src/components/generic/GenericDetail.jsx +446 -259
- package/src/components/mapboxSearchBox.js +640 -0
- package/src/components/navBadges.js +63 -1
- package/src/components/navDrawer.js +147 -0
- package/src/components/sms/SmsThreadPanel.jsx +34 -6
- package/src/components/sms/smsHelpers.js +15 -0
- package/src/components/styles/ClientAuth.module.scss +39 -0
- package/src/components/styles/DataGrid.module.scss +158 -5
- package/src/components/styles/Field.module.scss +52 -1
- package/src/components/styles/Form.module.scss +82 -0
- package/src/components/styles/GenericClientPortal.module.scss +72 -20
- package/src/components/styles/GenericDashboard.module.scss +50 -0
- package/src/components/styles/GenericDetail.module.scss +63 -1
- package/src/components/styles/GenericDynamic.module.scss +23 -0
- package/src/components/styles/GenericFormBuilder.module.scss +11 -0
- package/src/components/styles/GenericIndex.module.scss +6 -1
- package/src/components/styles/Navigation.module.scss +460 -7
- package/src/components/styles/Sms.module.scss +92 -0
- package/src/components/styles/StackedRow.module.scss +182 -0
- package/src/components/styles/TicketConversation.module.scss +76 -0
- package/src/components/styles/Vault.module.scss +192 -0
- package/src/components/styles/density.css +10 -0
- package/src/components/styles/global-datagrid.css +220 -0
- package/src/components/styles/global.css +20 -0
- package/src/components/tickets/TicketConversation.jsx +13 -8
- package/src/components/utils/ConfirmDialog.js +22 -3
- package/src/components/utils/cardLayout.js +666 -0
- package/src/components/utils/contactChannels.js +130 -0
- package/src/components/utils/editPlacement.js +95 -0
- package/src/components/utils/useDensity.js +303 -7
- package/src/index.js +32 -0
|
@@ -21,6 +21,10 @@ import Verify from '../auth/Verify';
|
|
|
21
21
|
import TwoFactorAuth from '../auth/TwoFactorAuth';
|
|
22
22
|
import ClientLogin from '../auth/ClientLogin';
|
|
23
23
|
import ClientOTPVerify from '../auth/ClientOTPVerify';
|
|
24
|
+
// Both client steps are route elements here, so they own the page and have to
|
|
25
|
+
// say so: the split layout is sized by a parent that, on a bare route, has no
|
|
26
|
+
// height to give. See ClientAuthScreen.
|
|
27
|
+
import ClientAuthScreen from '../auth/ClientAuthScreen';
|
|
24
28
|
import {
|
|
25
29
|
resolveAuthEndpoints,
|
|
26
30
|
resolveClientPaths,
|
|
@@ -100,6 +104,14 @@ const GenericAuth = ({
|
|
|
100
104
|
clientPortalConfig = null, // Configuration for client portal with component and URLs
|
|
101
105
|
config = {}, // Configuration object for auth features
|
|
102
106
|
density = 'default', // 'default' | 'large' — app-wide display density
|
|
107
|
+
// Whether every DataGrid in this app draws stacked card rows below 640px
|
|
108
|
+
// instead of a table that scrolls sideways. Opt-in per APPLICATION, not
|
|
109
|
+
// per library version: the mapping that decides what a card says is a
|
|
110
|
+
// heuristic over a view's columns, and three apps consume this library —
|
|
111
|
+
// a title picked badly on a screen nobody has looked at is worse than the
|
|
112
|
+
// sideways table it replaced. A single view can still opt itself in with
|
|
113
|
+
// `tableSetting.cardLayout`, and out with `cardLayout: false`.
|
|
114
|
+
cardRows = false,
|
|
103
115
|
// Every URL the auth journey talks to, merged over the 6.6.3 literals.
|
|
104
116
|
// Threaded from here into each screen so one object configures the lot.
|
|
105
117
|
// See auth/authEndpoints.js for the keys and their defaults.
|
|
@@ -154,6 +166,22 @@ const GenericAuth = ({
|
|
|
154
166
|
};
|
|
155
167
|
}, [density]);
|
|
156
168
|
|
|
169
|
+
// Same mechanism, same node, same reasoning: `useCardRowsEnabled` in
|
|
170
|
+
// utils/useDensity.js reads this attribute off <html>, so an app opts its
|
|
171
|
+
// grids in from one place and every grid — including one mounted inside a
|
|
172
|
+
// modal on a detail tab — sees it without a prop being threaded to it.
|
|
173
|
+
// Absent means absent: an app that never passes the prop writes no
|
|
174
|
+
// attribute and nothing in the DataGrid changes.
|
|
175
|
+
useInsertionEffect(() => {
|
|
176
|
+
if (typeof document === 'undefined' || !cardRows) {
|
|
177
|
+
return undefined;
|
|
178
|
+
}
|
|
179
|
+
document.documentElement.setAttribute('data-card-rows', 'on');
|
|
180
|
+
return () => {
|
|
181
|
+
document.documentElement.removeAttribute('data-card-rows');
|
|
182
|
+
};
|
|
183
|
+
}, [cardRows]);
|
|
184
|
+
|
|
157
185
|
const updateAuthStatus = async () => {
|
|
158
186
|
// The loading curtain covers two moments and stays down for neither
|
|
159
187
|
// more nor less: the first profile check of a page load (no usable
|
|
@@ -539,15 +567,17 @@ const ClientLoginComponent = React.memo(
|
|
|
539
567
|
paths,
|
|
540
568
|
options,
|
|
541
569
|
}) => (
|
|
542
|
-
<
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
570
|
+
<ClientAuthScreen>
|
|
571
|
+
<ClientLogin
|
|
572
|
+
loginBg={loginBg}
|
|
573
|
+
logo={logo}
|
|
574
|
+
setSystemAuth={setIsAuthenticated}
|
|
575
|
+
setUserProfile={setUserProfile}
|
|
576
|
+
urls={urls}
|
|
577
|
+
paths={paths}
|
|
578
|
+
{...(options || {})}
|
|
579
|
+
/>
|
|
580
|
+
</ClientAuthScreen>
|
|
551
581
|
)
|
|
552
582
|
);
|
|
553
583
|
|
|
@@ -561,15 +591,17 @@ const ClientOTPVerifyComponent = React.memo(
|
|
|
561
591
|
paths,
|
|
562
592
|
options,
|
|
563
593
|
}) => (
|
|
564
|
-
<
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
594
|
+
<ClientAuthScreen>
|
|
595
|
+
<ClientOTPVerify
|
|
596
|
+
loginBg={loginBg}
|
|
597
|
+
logo={logo}
|
|
598
|
+
setSystemAuth={setIsAuthenticated}
|
|
599
|
+
setUserProfile={setUserProfile}
|
|
600
|
+
urls={urls}
|
|
601
|
+
paths={paths}
|
|
602
|
+
{...(options || {})}
|
|
603
|
+
/>
|
|
604
|
+
</ClientAuthScreen>
|
|
573
605
|
)
|
|
574
606
|
);
|
|
575
607
|
|
|
@@ -1297,7 +1297,26 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
|
|
|
1297
1297
|
};
|
|
1298
1298
|
|
|
1299
1299
|
const renderWidget = (widget) => {
|
|
1300
|
-
const
|
|
1300
|
+
const rawWidgetData = data[widget.id];
|
|
1301
|
+
/*
|
|
1302
|
+
* `??` FOR A COUNTER, AND THAT IS THE WHOLE OF A LONG-STANDING BUG.
|
|
1303
|
+
*
|
|
1304
|
+
* A counter's value is a scalar and ZERO IS A PERFECTLY GOOD ONE —
|
|
1305
|
+
* no unassigned tickets, no support hours left. `|| []` swapped that
|
|
1306
|
+
* zero for an empty array, and the `typeof` gate on the value below
|
|
1307
|
+
* (number or string, or else ` `) then rejected the array and
|
|
1308
|
+
* drew a blank. So the two cards reporting the best possible news
|
|
1309
|
+
* were the two that rendered as an empty box with a button under it,
|
|
1310
|
+
* at every width, while the card reporting one open ticket worked.
|
|
1311
|
+
*
|
|
1312
|
+
* Everything else keeps the `|| []` it has always had: a chart handed
|
|
1313
|
+
* a falsy scalar where it expects rows throws inside the chart
|
|
1314
|
+
* library, and `[]` is the shape those widgets already fall back to.
|
|
1315
|
+
*/
|
|
1316
|
+
const widgetData =
|
|
1317
|
+
widget.type === 'counter'
|
|
1318
|
+
? rawWidgetData ?? []
|
|
1319
|
+
: rawWidgetData || [];
|
|
1301
1320
|
|
|
1302
1321
|
// More detailed check for valid data
|
|
1303
1322
|
const hasData =
|