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

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 +12 -0
  2. package/buerokratt-ria-common-gui-components-0.0.18.tgz +0 -0
  3. package/package.json +1 -1
  4. package/templates/history-page/src/index.tsx +122 -81
  5. package/buerokratt-ria-common-gui-components-0.0.17.tgz +0 -0
package/CHANGELOG.md CHANGED
@@ -4,8 +4,20 @@ 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.18] - 16-05-2025
8
+
9
+ - Made title configurable.
10
+ - Made passed dates configurable dynamically.
11
+ - Made searchbar configrable
12
+ - Updated default column data to handle both null and undefined.
13
+
7
14
  ## [0.0.17] - 13-05-2025
8
15
 
16
+ - Updated csa display and filtering.
17
+
18
+
19
+ ## [0.0.16] - 09-05-2025
20
+
9
21
  - Display feedback rating consistently in history page.
10
22
 
11
23
  ## [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.18",
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
@@ -40,17 +40,35 @@ 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 = delegatedEndDate ?? params.get('end');
54
72
  const passedCustomerSupportIds = params.getAll('customerSupportIds');
55
73
  const [search, setSearch] = useState('');
56
74
  const [selectedChat, setSelectedChat] = useState<ChatType | null>(null);
@@ -81,7 +99,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
81
99
  const [customerSupportAgents, setCustomerSupportAgents] = useState<any[]>([]);
82
100
  const [counterKey, setCounterKey] = useState<number>(0)
83
101
 
84
- const {control, watch} = useForm<{
102
+ const {control, setValue, watch} = useForm<{
85
103
  startDate: Date | string;
86
104
  endDate: Date | string;
87
105
  }>({
@@ -124,6 +142,21 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
124
142
  }
125
143
  }, [passedChatId]);
126
144
 
145
+ useEffect(() => {
146
+ if (delegatedStartDate) {
147
+ setValue('startDate', unifyDateFromat(delegatedStartDate));
148
+ fetchData()
149
+ }
150
+ }, [delegatedStartDate]);
151
+
152
+ useEffect(() => {
153
+ if (delegatedEndDate) {
154
+ setValue('endDate', unifyDateFromat(delegatedEndDate));
155
+ fetchData()
156
+ }
157
+ }, [delegatedEndDate]);
158
+
159
+
127
160
  const fetchData = async () => {
128
161
  setInitialLoad(false);
129
162
  try {
@@ -139,7 +172,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
139
172
  const updatedPagination = updatePagePreference(newPageResults);
140
173
 
141
174
  let newSelectedColumns = [];
142
- if(currentColumns !== undefined && currentColumns.length > 0 && currentColumns[0] !== "") {
175
+ if (currentColumns != null && currentColumns.length > 0 && currentColumns[0] !== "") {
143
176
  newSelectedColumns = currentColumns;
144
177
  }
145
178
  setSelectedColumns(newSelectedColumns)
@@ -687,86 +720,94 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({user, toastContext, o
687
720
 
688
721
  return (
689
722
  <>
690
- <h1>{t('chat.history.title')}</h1>
723
+ {displayTitle && (
724
+ <h1>{t('chat.history.title')}</h1>
725
+ )}
691
726
 
692
727
  <Card>
693
728
  <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
- />
729
+ {displaySearchBar && (
730
+ <FormInput
731
+ className="input-wrapper"
732
+ label={t('chat.history.searchChats')}
733
+ hideLabel
734
+ name="searchChats"
735
+ placeholder={t('chat.history.searchChats') + '...'}
736
+ onChange={(e) => {
737
+ setSearch(e.target.value);
738
+ debouncedGetAllEnded(e.target.value);
739
+ }}
740
+ />)}
741
+
705
742
  <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>
743
+ {displayDateFilter && (
744
+ <>
745
+ <Track gap={10}>
746
+ <p>{t('global.from')}</p>
747
+ <Controller
748
+ name="startDate"
749
+ control={control}
750
+ render={({field}) => {
751
+ return (
752
+ <FormDatepicker
753
+ {...field}
754
+ label={''}
755
+ value={field.value ?? new Date()}
756
+ onChange={(v) => {
757
+ field.onChange(v);
758
+ const start = format(new Date(v), 'yyyy-MM-dd');
759
+ setSearchParams((params) => {
760
+ params.set('start', start);
761
+ return params;
762
+ });
763
+ getAllEndedChats.mutate({
764
+ startDate: start,
765
+ endDate: format(new Date(endDate), 'yyyy-MM-dd'),
766
+ customerSupportIds: passedCustomerSupportIds,
767
+ pagination,
768
+ sorting,
769
+ search,
770
+ });
771
+ }}
772
+ />
773
+ );
774
+ }}
775
+ />
776
+ </Track>
777
+ <Track gap={10}>
778
+ <p>{t('global.to')}</p>
779
+ <Controller
780
+ name="endDate"
781
+ control={control}
782
+ render={({field}) => {
783
+ return (
784
+ <FormDatepicker
785
+ {...field}
786
+ label={''}
787
+ value={field.value ?? new Date()}
788
+ onChange={(v) => {
789
+ field.onChange(v);
790
+ const end = format(new Date(v), 'yyyy-MM-dd');
791
+ setSearchParams((params) => {
792
+ params.set('end', end);
793
+ return params;
794
+ });
795
+ getAllEndedChats.mutate({
796
+ startDate: format(new Date(startDate), 'yyyy-MM-dd'),
797
+ endDate: end,
798
+ customerSupportIds: passedCustomerSupportIds,
799
+ pagination,
800
+ sorting,
801
+ search,
802
+ });
803
+ }}
804
+ />
805
+ );
806
+ }}
807
+ />
808
+ </Track>
809
+ </>
810
+ )}
770
811
  <FormMultiselect
771
812
  key={counterKey}
772
813
  name="visibleColumns"