@buerokratt-ria/common-gui-components 0.0.16 → 0.0.17

package/CHANGELOG.md

@@ -4,18 +4,19 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
-## [0.0.16] - 12-05-2025
-
-- Updating CSA display and filtering.
-
-## [0.0.15] - 09-05-2025
+## [0.0.17] - 13-05-2025
 
 - Display feedback rating consistently in history page.
 
-## [0.0.14] - 05-05-2025
+## [0.0.15] - 05-05-2025
 
 - Updated popup duration to be 5 seconds.
 
+## [0.0.14] - 30-04-2025
+
+- Added sorting configurable (disabled by default)
+- Added Email display configurable (disabled by default)
+
 ## [0.0.13] - 25-04-2025
 
 - Adding double scrollbar to history page when size is small.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Common GUI components and pre defined templates.",
   "main": "index.ts",
   "author": "ExiRai",

package/templates/history-page/src/index.tsx

@@ -37,10 +37,12 @@ type HistoryProps = {
     toastContext: ToastContextType | null;
     onMessageClick?: (message: any) => void;
     showComment?: boolean;
+    showEmail?: boolean;
+    showSortingLabel?: boolean;
     showStatus?: boolean;
 }
 
-const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, onMessageClick, showComment = true, showStatus = true}) => {
+const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, onMessageClick, showComment = true, showEmail = false, showSortingLabel = false,showStatus = true}) => {
     const {t, i18n} = useTranslation();
     const toast = toastContext;
     const userInfo = user;
@@ -269,8 +271,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
         },
     });
 
-    const visibleColumnOptions = useMemo(
-        () => [
+    const visibleColumnOptions = useMemo(() => {
+        const columns = [
             {label: t('chat.history.startTime'), value: 'created'},
             {label: t('chat.history.endTime'), value: 'ended'},
             {label: t('chat.history.csaName'), value: 'customerSupportFullName'},
@@ -283,9 +285,14 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
             {label: t('global.status'), value: 'status'},
             {label: 'ID', value: 'id'},
             {label: 'www', value: 'www'},
-        ],
-        [t]
-    );
+        ];
+
+        if (showEmail) {
+            columns.splice(4, 0, {label: t('global.email'), value: 'endUserEmail'}); // insert after name
+        }
+
+        return columns;
+    }, [t, showEmail])
 
     const chatStatusChangeMutation = useMutation({
         mutationFn: async (data: { chatId: string | number; event: string }) => {
@@ -458,8 +465,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
         </Button>
     );
 
-    const endedChatsColumns = useMemo(
-        () => [
+    const endedChatsColumns = useMemo(() => {
+        const columns = [
             columnHelper.accessor('created', {
                 id: 'created',
                 header: t('chat.history.startTime') ?? '',
@@ -527,8 +534,10 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
             columnHelper.accessor('feedbackRating', {
                 id: 'feedbackRating',
                 header: t('chat.history.rating') ?? '',
-                cell: (props) =>
-                    props.getValue() && <span>{`${props.getValue()}/10`}</span>,
+                cell: (props) => {
+                    const value = props.getValue();
+                    return value !== null && value !== undefined ? <span>{`${value}/10`}</span> : null;
+                }
             }),
             columnHelper.accessor('feedbackText', {
                 id: 'feedbackText',
@@ -574,9 +583,62 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
                     sticky: 'right',
                 },
             }),
-        ],
-        []
-    );
+        ];
+
+        if (showEmail) {
+            columns.splice(4, 0, columnHelper.accessor('endUserEmail', {
+                id: 'endUserEmail',
+                header: t('global.email') ?? '',
+            }));
+        }
+
+        return columns;
+    }, [t, showEmail])
+
+    const getSortingString = () => {
+        if(sorting && sorting.length > 0) {
+            const sortingObject = sorting[0];
+            const sortingString = t('sorting.sorting');
+            const orderingString = t(`sorting.${sortingObject.desc ? 'desc' : 'asc'}`);
+            const column = getColumnTranslation(sortingObject.id);
+            return sortingString + ' ' + column + ' ' + orderingString;
+        } else {
+            return '';
+        }
+    }
+
+    const getColumnTranslation = (column: string) : string => {
+        switch (column) {
+            case 'endUserId':
+                return t('global.idCode') ?? ''
+            case 'created':
+                return t('chat.history.startTime') ?? ''
+            case 'ended':
+                return t('chat.history.endTime') ?? ''
+            case 'customerSupportFullName':
+                return t('chat.history.csaName') ?? ''
+            case 'endUserName':
+                return t('global.name') ?? ''
+            case 'endUserEmail':
+                return t('global.email') ?? ''
+            case 'contactsMessage':
+                return t('chat.history.contact') ?? ''
+            case 'comment':
+                return t('chat.history.comment') ?? ''
+            case 'feedbackRating':
+                return t('chat.history.rating') ?? ''
+            case 'feedbackText':
+                return t('chat.history.feedback') ?? ''
+            case 'status':
+                return t('global.status') ?? ''
+            case 'endUserUrl':
+                return 'www'
+            case 'id':
+                return 'id';
+            default:
+                return '';
+        }
+    }
 
     const handleChatStatusChange = (event: string) => {
         if (!selectedChat) return;
@@ -757,6 +819,13 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
                 </Track>
             </Card>
 
+            {sorting && sorting.length > 0 && showSortingLabel && (
+                <div>
+                    <Button disabled={true} appearance="secondary">
+                        {getSortingString()}
+                    </Button>
+                </div>)
+            }
             <div className="card-drawer-container" style={{ height: 'auto', overflow: 'auto' }}>
                 <div className="card-wrapper">
                     <Card>

package/translations/en/common.json

@@ -1,5 +1,6 @@
 {
   "global": {
+    "email": "Email",
     "save": "Save",
     "add": "Add",
     "edit": "Edit",
@@ -46,6 +47,11 @@
     "chosen": "Chosen",
     "read": "Read"
   },
+  "sorting": {
+    "des": "descending",
+    "asc": "ascending",
+    "sorting": "Sorting"
+  },
   "mainMenu": {
     "menuLabel": "Main navigation",
     "closeMenu": "Close menu",

package/translations/et/common.json

@@ -1,5 +1,6 @@
 {
   "global": {
+    "email": "Email",
     "save": "Salvesta",
     "add": "Lisa",
     "edit": "Muuda",
@@ -46,6 +47,11 @@
     "chosen": "Valitud",
     "read": "Loetud"
   },
+  "sorting": {
+    "des": "kahanevalt",
+    "asc": "Kasvavalt",
+    "sorting": "Sorteerimine"
+  },
   "mainMenu": {
     "menuLabel": "Põhinavigatsioon",
     "closeMenu": "Kitsenda menüü",