@asaleh37/ui-base 26.2.13 → 26.2.131

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 (6) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGridTopBar.tsx +159 -142
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@asaleh37/ui-base",
3
- "version": "26.2.13",
3
+ "version": "26.2.131",
4
4
  "description": "",
5
5
  "license": "ISC",
6
6
  "author": "Ahmed Saleh Mohamed",
package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGridTopBar.tsx CHANGED
@@ -48,7 +48,7 @@ const StyledToolbarButton = styled(ToolbarButton)<{ ownerState: OwnerState }>(
48
48
  opacity: ownerState.expanded ? 0 : 1,
49
49
  pointerEvents: ownerState.expanded ? "none" : "auto",
50
50
  transition: theme.transitions.create(["opacity"]),
51
- })
51
+ }),
52
52
  );
53
53
 
54
54
  const StyledTextField = styled(TextField)<{
@@ -62,7 +62,7 @@ const StyledTextField = styled(TextField)<{
62
62
  }));
63
63
 
64
64
  const TemplateGridTopBar: React.FC<TemplateGridTopBarProps> = (
65
- props: TemplateGridTopBarProps
65
+ props: TemplateGridTopBarProps,
66
66
  ) => {
67
67
  const { t } = useTranslation();
68
68
  const session = useSession();
@@ -76,158 +76,175 @@ const TemplateGridTopBar: React.FC<TemplateGridTopBarProps> = (
76
76
  type: "include",
77
77
  },
78
78
  props?.templateProps?.data || [],
79
- props?.templateProps?.keyColumnName || "id"
79
+ props?.templateProps?.keyColumnName || "id",
80
80
  );
81
81
  return (
82
- <Toolbar>
83
- {isCreationEnabled &&
84
- isCreationAuthorized &&
85
- props?.templateProps?.editMode?.editMode != "none" ? (
86
- props?.templateProps?.hideCreateBtn === undefined ||
87
- props?.templateProps?.hideCreateBtn === false ? (
88
- <Button onClick={props?.handleCreateNewRecord}>
89
- <FontAwesomeIcon
90
- icon="add"
91
- style={{ marginRight: 5, marginLeft: 5 }}
92
- />
93
- {t("ADD_BTN_LABEL")}
94
- </Button>
82
+ <>
83
+ <Toolbar>
84
+ {isCreationEnabled &&
85
+ isCreationAuthorized &&
86
+ props?.templateProps?.editMode?.editMode != "none" ? (
87
+ props?.templateProps?.hideCreateBtn === undefined ||
88
+ props?.templateProps?.hideCreateBtn === false ? (
89
+ <Button onClick={props?.handleCreateNewRecord}>
90
+ <FontAwesomeIcon
91
+ icon="add"
92
+ style={{ marginRight: 5, marginLeft: 5 }}
93
+ />
94
+ {t("ADD_BTN_LABEL")}
95
+ </Button>
96
+ ) : (
97
+ <></>
98
+ )
95
99
  ) : (
96
100
  <></>
97
- )
98
- ) : (
99
- <></>
100
- )}
101
- {props?.templateProps?.rowActions ? (
102
- props.templateProps.rowActions.map((rowAction, index) =>
103
- rowAction?.gridActionProps?.multiRecord === true ? (
104
- <TemplateGridMultiRecordAction
105
- {...rowAction}
106
- key={index}
107
- reloadData={async () => {
108
- props.templateProps.apiActions.reloadData(
109
- props?.templateProps?.gridLoadParametersValues
110
- );
111
- }}
112
- recordIdsToProcessActionOn={gridSelection.selectedRecordIds}
113
- recordsToProcessActionOn={gridSelection.selectedRecords}
114
- />
115
- ) : null
116
- )
117
- ) : (
118
- <></>
119
- )}
120
- <Box sx={{ flex: 1, mx: 0.5, my: 0.5, padding: 1 }}>
121
- {props?.templateProps?.tBar}
122
- </Box>
123
-
124
- <Tooltip title="Columns">
125
- <ColumnsPanelTrigger render={<ToolbarButton />}>
126
- <GridViewColumnIcon fontSize="small" />
127
- </ColumnsPanelTrigger>
128
- </Tooltip>
101
+ )}
102
+ {props?.templateProps?.rowActions ? (
103
+ props.templateProps.rowActions.map((rowAction, index) =>
104
+ rowAction?.gridActionProps?.multiRecord === true ? (
105
+ <TemplateGridMultiRecordAction
106
+ {...rowAction}
107
+ key={index}
108
+ reloadData={async () => {
109
+ props.templateProps.apiActions.reloadData(
110
+ props?.templateProps?.gridLoadParametersValues,
111
+ );
112
+ }}
113
+ recordIdsToProcessActionOn={gridSelection.selectedRecordIds}
114
+ recordsToProcessActionOn={gridSelection.selectedRecords}
115
+ />
116
+ ) : null,
117
+ )
118
+ ) : (
119
+ <></>
120
+ )}
121
+ <Box
122
+ sx={{
123
+ flex: 1,
124
+ }}
125
+ ></Box>
129
126
 
130
- <Tooltip title="Filters">
131
- <FilterPanelTrigger
132
- render={(props, state) => (
133
- <ToolbarButton {...props} color="default">
134
- <Badge
135
- badgeContent={state.filterCount}
136
- color="primary"
137
- variant="dot"
138
- >
139
- <GridFilterListIcon fontSize="small" />
140
- </Badge>
141
- </ToolbarButton>
142
- )}
143
- />
144
- </Tooltip>
127
+ <Tooltip title="Columns">
128
+ <ColumnsPanelTrigger render={<ToolbarButton />}>
129
+ <GridViewColumnIcon fontSize="small" />
130
+ </ColumnsPanelTrigger>
131
+ </Tooltip>
145
132
 
146
- {props?.templateProps?.gridStateKey ? (
147
- <Tooltip title={t("RESET_GRID_STATE")}>
148
- <IconButton onClick={props?.clearGridState}>
149
- <FontAwesomeIcon icon="eraser" />
150
- </IconButton>
133
+ <Tooltip title="Filters">
134
+ <FilterPanelTrigger
135
+ render={(props, state) => (
136
+ <ToolbarButton {...props} color="default">
137
+ <Badge
138
+ badgeContent={state.filterCount}
139
+ color="primary"
140
+ variant="dot"
141
+ >
142
+ <GridFilterListIcon fontSize="small" />
143
+ </Badge>
144
+ </ToolbarButton>
145
+ )}
146
+ />
151
147
  </Tooltip>
152
- ) : (
153
- <></>
154
- )}
155
148
 
156
- <Divider
157
- orientation="vertical"
158
- variant="middle"
159
- flexItem
160
- sx={{ mx: 0.5 }}
161
- />
149
+ {props?.templateProps?.gridStateKey ? (
150
+ <Tooltip title={t("RESET_GRID_STATE")}>
151
+ <IconButton onClick={props?.clearGridState}>
152
+ <FontAwesomeIcon icon="eraser" />
153
+ </IconButton>
154
+ </Tooltip>
155
+ ) : (
156
+ <></>
157
+ )}
158
+
159
+ <Divider
160
+ orientation="vertical"
161
+ variant="middle"
162
+ flexItem
163
+ sx={{ mx: 0.5 }}
164
+ />
162
165
 
163
- <Tooltip title={t("EXPORT_EXECL_LABEL")}>
164
- <ExportExcel render={<MenuItem />}>
165
- <FontAwesomeIcon icon="file-excel" color="green" />
166
- </ExportExcel>
167
- </Tooltip>
166
+ <Tooltip title={t("EXPORT_EXECL_LABEL")}>
167
+ <ExportExcel render={<MenuItem />}>
168
+ <FontAwesomeIcon icon="file-excel" color="green" />
169
+ </ExportExcel>
170
+ </Tooltip>
168
171
 
169
- <StyledQuickFilter>
170
- <QuickFilterTrigger
171
- render={(triggerProps, state) => (
172
- <Tooltip title={t("SEARCH_BTN_LABEL")} enterDelay={0}>
173
- <StyledToolbarButton
174
- {...triggerProps}
172
+ <StyledQuickFilter>
173
+ <QuickFilterTrigger
174
+ render={(triggerProps, state) => (
175
+ <Tooltip title={t("SEARCH_BTN_LABEL")} enterDelay={0}>
176
+ <StyledToolbarButton
177
+ {...triggerProps}
178
+ ownerState={{ expanded: state.expanded }}
179
+ color="default"
180
+ aria-disabled={state.expanded}
181
+ >
182
+ <FontAwesomeIcon icon="search" />
183
+ </StyledToolbarButton>
184
+ </Tooltip>
185
+ )}
186
+ />
187
+ <QuickFilterControl
188
+ render={({ ref, ...controlProps }, state) => (
189
+ <StyledTextField
190
+ {...controlProps}
175
191
  ownerState={{ expanded: state.expanded }}
176
- color="default"
177
- aria-disabled={state.expanded}
178
- >
179
- <FontAwesomeIcon icon="search" />
180
- </StyledToolbarButton>
181
- </Tooltip>
182
- )}
183
- />
184
- <QuickFilterControl
185
- render={({ ref, ...controlProps }, state) => (
186
- <StyledTextField
187
- {...controlProps}
188
- ownerState={{ expanded: state.expanded }}
189
- inputRef={ref}
190
- aria-label="Search"
191
- placeholder={`${t("SEARCH_BTN_LABEL")}...`}
192
- size="small"
193
- slotProps={{
194
- input: {
195
- startAdornment: (
196
- <InputAdornment position="start">
197
- <FontAwesomeIcon icon="search" />
198
- </InputAdornment>
199
- ),
200
- endAdornment: state.value ? (
201
- <InputAdornment position="end">
202
- <QuickFilterClear
203
- edge="end"
204
- size="small"
205
- aria-label="Clear search"
206
- // material={{ sx: { marginRight: -0.75 } }}
207
- >
208
- <FontAwesomeIcon icon="xmark" />
209
- </QuickFilterClear>
210
- </InputAdornment>
211
- ) : null,
212
- ...controlProps.slotProps?.input,
213
- },
214
- ...controlProps.slotProps,
215
- }}
216
- />
217
- )}
218
- />
219
- </StyledQuickFilter>
192
+ inputRef={ref}
193
+ aria-label="Search"
194
+ placeholder={`${t("SEARCH_BTN_LABEL")}...`}
195
+ size="small"
196
+ slotProps={{
197
+ input: {
198
+ startAdornment: (
199
+ <InputAdornment position="start">
200
+ <FontAwesomeIcon icon="search" />
201
+ </InputAdornment>
202
+ ),
203
+ endAdornment: state.value ? (
204
+ <InputAdornment position="end">
205
+ <QuickFilterClear
206
+ edge="end"
207
+ size="small"
208
+ aria-label="Clear search"
209
+ // material={{ sx: { marginRight: -0.75 } }}
210
+ >
211
+ <FontAwesomeIcon icon="xmark" />
212
+ </QuickFilterClear>
213
+ </InputAdornment>
214
+ ) : null,
215
+ ...controlProps.slotProps?.input,
216
+ },
217
+ ...controlProps.slotProps,
218
+ }}
219
+ />
220
+ )}
221
+ />
222
+ </StyledQuickFilter>
223
+
224
+ <IconButton
225
+ onClick={() => {
226
+ props.templateProps.apiActions.reloadData(
227
+ props?.templateProps?.gridLoadParametersValues,
228
+ );
229
+ }}
230
+ >
231
+ <FontAwesomeIcon icon="refresh" />
232
+ </IconButton>
233
+ </Toolbar>
220
234
 
221
- <IconButton
222
- onClick={() => {
223
- props.templateProps.apiActions.reloadData(
224
- props?.templateProps?.gridLoadParametersValues
225
- );
226
- }}
227
- >
228
- <FontAwesomeIcon icon="refresh" />
229
- </IconButton>
230
- </Toolbar>
235
+ {props?.templateProps?.tBar ? (
236
+ <Box
237
+ sx={{
238
+ display: "flex",
239
+ padding: 2,
240
+ }}
241
+ >
242
+ {props?.templateProps?.tBar}
243
+ </Box>
244
+ ) : (
245
+ <></>
246
+ )}
247
+ </>
231
248
  );
232
249
  };
233
250