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

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/buerokratt-ria-common-gui-components-0.0.19.tgz +0 -0
  3. package/package.json +1 -1
  4. package/templates/history-page/src/index.tsx +144 -84
  5. package/buerokratt-ria-common-gui-components-0.0.17.tgz +0 -0
package/CHANGELOG.md CHANGED
@@ -4,8 +4,24 @@ All changes to this project will be documented in this file.
4
4
 
5
5
  ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
6
6
 
7
+ ## [0.0.19] - 19-05-2025
8
+
9
+ - Reduced extra calling of mutation on init.
10
+
11
+ ## [0.0.18] - 16-05-2025
12
+
13
+ - Made title configurable.
14
+ - Made passed dates configurable dynamically.
15
+ - Made searchbar configrable
16
+ - Updated default column data to handle both null and undefined.
17
+
7
18
  ## [0.0.17] - 13-05-2025
8
19
 
20
+ - Updated csa display and filtering.
21
+
22
+
23
+ ## [0.0.16] - 09-05-2025
24
+
9
25
  - Display feedback rating consistently in history page.
10
26
 
11
27
  ## [0.0.15] - 05-05-2025
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@buerokratt-ria/common-gui-components",
3
- "version": "0.0.17",
3
+ "version": "0.0.19",
4
4
  "description": "Common GUI components and pre defined templates.",
5
5
  "main": "index.ts",
6
6
  "author": "ExiRai",
package/templates/history-page/src/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, {FC, PropsWithChildren, useEffect, useMemo, useState} from 'react';
1
+ import React, {FC, PropsWithChildren, useEffect, useRef, useMemo, useState} from 'react';
2
2
  import {useTranslation} from 'react-i18next';
3
3
  import {useMutation} from '@tanstack/react-query';
4
4
  import {ColumnPinningState, createColumnHelper, PaginationState, SortingState,} from '@tanstack/react-table';
@@ -40,17 +40,36 @@ type HistoryProps = {
40
40
  showEmail?: boolean;
41
41
  showSortingLabel?: boolean;
42
42
  showStatus?: boolean;
43
+ displayTitle?: boolean;
44
+ displaySearchBar?: boolean;
45
+ displayDateFilter?: boolean;
46
+ delegatedStartDate?: string;
47
+ delegatedEndDate?: string;
43
48
  }
44
49
 
45
- const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, onMessageClick, showComment = true, showEmail = false, showSortingLabel = false,showStatus = true}) => {
50
+ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
51
+ user,
52
+ toastContext,
53
+ onMessageClick,
54
+ showComment = true,
55
+ showEmail = false,
56
+ showSortingLabel = false,
57
+ showStatus = true,
58
+ displayTitle = true,
59
+ displayDateFilter = true,
60
+ displaySearchBar = true,
61
+ delegatedEndDate = null,
62
+ delegatedStartDate = null
63
+ }) => {
46
64
  const {t, i18n} = useTranslation();
47
65
  const toast = toastContext;
48
66
  const userInfo = user;
49
67
  const routerLocation = useLocation();
50
68
  const params = new URLSearchParams(routerLocation.search);
51
69
  let passedChatId = new URLSearchParams(routerLocation.search).get('chat');
52
- const passedStartDate = params.get('start');
53
- const passedEndDate = params.get('end');
70
+ const passedStartDate = delegatedStartDate ?? params.get('start');
71
+ const passedEndDate = delegatedStartDate ?? params.get('end');
72
+ const skipNextSelectedColumnsEffect = useRef(false);
54
73
  const passedCustomerSupportIds = params.getAll('customerSupportIds');
55
74
  const [search, setSearch] = useState('');
56
75
  const [selectedChat, setSelectedChat] = useState<ChatType | null>(null);
@@ -81,7 +100,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
81
100
  const [customerSupportAgents, setCustomerSupportAgents] = useState<any[]>([]);
82
101
  const [counterKey, setCounterKey] = useState<number>(0)
83
102
 
84
- const {control, watch} = useForm<{
103
+ const {control, setValue, watch} = useForm<{
85
104
  startDate: Date | string;
86
105
  endDate: Date | string;
87
106
  }>({
@@ -124,6 +143,34 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
124
143
  }
125
144
  }, [passedChatId]);
126
145
 
146
+ useEffect(() => {
147
+ const hasStart = delegatedStartDate !== null && delegatedStartDate !== undefined;
148
+ const hasEnd = delegatedEndDate !== null && delegatedEndDate !== undefined;
149
+
150
+ if (hasStart || hasEnd) {
151
+ if (hasStart) {
152
+ setValue('startDate', unifyDateFromat(delegatedStartDate));
153
+ }
154
+ if (hasEnd) {
155
+ setValue('endDate', unifyDateFromat(delegatedEndDate));
156
+ }
157
+
158
+ if(initialLoad) {
159
+ fetchData()
160
+ } else {
161
+ getAllEndedChats.mutate({
162
+ startDate: hasStart ? unifyDateFromat(delegatedStartDate) : format(new Date(startDate), 'yyyy-MM-dd'),
163
+ endDate: hasEnd ? unifyDateFromat(delegatedEndDate) : format(new Date(endDate), 'yyyy-MM-dd'),
164
+ customerSupportIds: passedCustomerSupportIds,
165
+ pagination,
166
+ sorting,
167
+ search,
168
+ });
169
+ }
170
+ }
171
+ }, [delegatedStartDate, delegatedEndDate]);
172
+
173
+
127
174
  const fetchData = async () => {
128
175
  setInitialLoad(false);
129
176
  try {
@@ -133,18 +180,21 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
133
180
  page_name: window.location.pathname,
134
181
  },
135
182
  });
183
+
136
184
  if (response.data) {
137
185
  const currentColumns = response.data.selectedColumns;
138
186
  const newPageResults = response.data.pageResults !== undefined ? response.data.pageResults : 10;
139
187
  const updatedPagination = updatePagePreference(newPageResults);
140
188
 
141
189
  let newSelectedColumns = [];
142
- if(currentColumns !== undefined && currentColumns.length > 0 && currentColumns[0] !== "") {
190
+ if (currentColumns?.length > 0 && currentColumns[0] !== "") {
143
191
  newSelectedColumns = currentColumns;
144
192
  }
145
- setSelectedColumns(newSelectedColumns)
146
193
 
147
- setCounterKey(counterKey + 1)
194
+ skipNextSelectedColumnsEffect.current = true;
195
+ setSelectedColumns(newSelectedColumns);
196
+ setCounterKey(prev => prev + 1);
197
+
148
198
  getAllEndedChats.mutate({
149
199
  startDate: format(new Date(startDate), 'yyyy-MM-dd'),
150
200
  endDate: format(new Date(endDate), 'yyyy-MM-dd'),
@@ -171,6 +221,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
171
221
  useEffect(() => {
172
222
  if (initialLoad) {
173
223
  fetchData();
224
+ } else if (skipNextSelectedColumnsEffect.current) {
225
+ skipNextSelectedColumnsEffect.current = false;
174
226
  } else {
175
227
  getAllEndedChats.mutate({
176
228
  startDate: format(new Date(startDate), 'yyyy-MM-dd'),
@@ -687,86 +739,94 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
687
739
 
688
740
  return (
689
741
  <>
690
- <h1>{t('chat.history.title')}</h1>
742
+ {displayTitle && (
743
+ <h1>{t('chat.history.title')}</h1>
744
+ )}
691
745
 
692
746
  <Card>
693
747
  <Track gap={16}>
694
- <FormInput
695
- className="input-wrapper"
696
- label={t('chat.history.searchChats')}
697
- hideLabel
698
- name="searchChats"
699
- placeholder={t('chat.history.searchChats') + '...'}
700
- onChange={(e) => {
701
- setSearch(e.target.value);
702
- debouncedGetAllEnded(e.target.value);
703
- }}
704
- />
748
+ {displaySearchBar && (
749
+ <FormInput
750
+ className="input-wrapper"
751
+ label={t('chat.history.searchChats')}
752
+ hideLabel
753
+ name="searchChats"
754
+ placeholder={t('chat.history.searchChats') + '...'}
755
+ onChange={(e) => {
756
+ setSearch(e.target.value);
757
+ debouncedGetAllEnded(e.target.value);
758
+ }}
759
+ />)}
760
+
705
761
  <Track style={{width: '100%'}} gap={16}>
706
- <Track gap={10}>
707
- <p>{t('global.from')}</p>
708
- <Controller
709
- name="startDate"
710
- control={control}
711
- render={({field}) => {
712
- return (
713
- <FormDatepicker
714
- {...field}
715
- label={''}
716
- value={field.value ?? new Date()}
717
- onChange={(v) => {
718
- field.onChange(v);
719
- const start = format(new Date(v), 'yyyy-MM-dd');
720
- setSearchParams((params) => {
721
- params.set('start', start);
722
- return params;
723
- });
724
- getAllEndedChats.mutate({
725
- startDate: start,
726
- endDate: format(new Date(endDate), 'yyyy-MM-dd'),
727
- customerSupportIds: passedCustomerSupportIds,
728
- pagination,
729
- sorting,
730
- search,
731
- });
732
- }}
733
- />
734
- );
735
- }}
736
- />
737
- </Track>
738
- <Track gap={10}>
739
- <p>{t('global.to')}</p>
740
- <Controller
741
- name="endDate"
742
- control={control}
743
- render={({field}) => {
744
- return (
745
- <FormDatepicker
746
- {...field}
747
- label={''}
748
- value={field.value ?? new Date()}
749
- onChange={(v) => {
750
- field.onChange(v);
751
- const end = format(new Date(v), 'yyyy-MM-dd');
752
- setSearchParams((params) => {
753
- params.set('end', end);
754
- return params;
755
- });
756
- getAllEndedChats.mutate({
757
- startDate: format(new Date(startDate), 'yyyy-MM-dd'),
758
- endDate: end,
759
- customerSupportIds: passedCustomerSupportIds,
760
- pagination,
761
- sorting,
762
- search,
763
- });
764
- }}
765
- />
766
- );
767
- }}
768
- />
769
- </Track>
762
+ {displayDateFilter && (
763
+ <>
764
+ <Track gap={10}>
765
+ <p>{t('global.from')}</p>
766
+ <Controller
767
+ name="startDate"
768
+ control={control}
769
+ render={({field}) => {
770
+ return (
771
+ <FormDatepicker
772
+ {...field}
773
+ label={''}
774
+ value={field.value ?? new Date()}
775
+ onChange={(v) => {
776
+ field.onChange(v);
777
+ const start = format(new Date(v), 'yyyy-MM-dd');
778
+ setSearchParams((params) => {
779
+ params.set('start', start);
780
+ return params;
781
+ });
782
+ getAllEndedChats.mutate({
783
+ startDate: start,
784
+ endDate: format(new Date(endDate), 'yyyy-MM-dd'),
785
+ customerSupportIds: passedCustomerSupportIds,
786
+ pagination,
787
+ sorting,
788
+ search,
789
+ });
790
+ }}
791
+ />
792
+ );
793
+ }}
794
+ />
795
+ </Track>
796
+ <Track gap={10}>
797
+ <p>{t('global.to')}</p>
798
+ <Controller
799
+ name="endDate"
800
+ control={control}
801
+ render={({field}) => {
802
+ return (
803
+ <FormDatepicker
804
+ {...field}
805
+ label={''}
806
+ value={field.value ?? new Date()}
807
+ onChange={(v) => {
808
+ field.onChange(v);
809
+ const end = format(new Date(v), 'yyyy-MM-dd');
810
+ setSearchParams((params) => {
811
+ params.set('end', end);
812
+ return params;
813
+ });
814
+ getAllEndedChats.mutate({
815
+ startDate: format(new Date(startDate), 'yyyy-MM-dd'),
816
+ endDate: end,
817
+ customerSupportIds: passedCustomerSupportIds,
818
+ pagination,
819
+ sorting,
820
+ search,
821
+ });
822
+ }}
823
+ />
824
+ );
825
+ }}
826
+ />
827
+ </Track>
828
+ </>
829
+ )}
770
830
  <FormMultiselect
771
831
  key={counterKey}
772
832
  name="visibleColumns"