oa-componentbook 1.0.1-stage.372 → 1.0.1-stage.374

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/build/components/oa-component-accordion/Accordion.js +40 -24
  2. package/build/components/oa-component-accordion/styles.js +1 -1
  3. package/build/layout/EntityOverviewLayout/EntityOverviewLayout.js +32 -9
  4. package/build/layout/EntityOverviewLayout/reducer/entityOverviewLayoutReducer.js +0 -14
  5. package/build/widgets/oa-widget-user-management/UserManagementWidget.js +40 -21
  6. package/package.json +1 -1
package/build/components/oa-component-accordion/Accordion.js CHANGED
@@ -30,30 +30,46 @@ function CollapseIcon(_ref) {
30
30
  }
31
31
  function renderCustomBody(customBody, onActionClick) {
32
32
  if (!customBody || !customBody.items) return null;
33
- return customBody.items.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
34
- key: index,
35
- className: "custom-body-item"
36
- }, item.heading && /*#__PURE__*/_react.default.createElement("div", {
37
- className: "custom-body-heading"
38
- }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
39
- typography: item.heading.type,
40
- color: "primary-content"
41
- }, item.heading.label)), item.dataConfig && item.dataConfig.type === "keyvalue" && /*#__PURE__*/_react.default.createElement("div", {
42
- className: "custom-body-content"
43
- }, /*#__PURE__*/_react.default.createElement(_KeyValueWidget.default, {
44
- data: item.dataConfig.data,
45
- customClassName: "gst-details-keyvalue"
46
- })), item.dataConfig && item.dataConfig.type === "button" && /*#__PURE__*/_react.default.createElement("div", {
47
- className: "custom-body-content"
48
- }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
49
- type: item.dataConfig.subType,
50
- onClick: () => {
51
- if (onActionClick && item.dataConfig.onClick) {
52
- onActionClick(item.dataConfig.onClick, item.dataConfig);
53
- }
54
- },
55
- label: item.dataConfig.label
56
- }))));
33
+ return customBody.items.map((item, index) => {
34
+ var _item$dataConfig;
35
+ return /*#__PURE__*/_react.default.createElement("div", {
36
+ key: index,
37
+ className: "custom-body-item"
38
+ }, item.heading && /*#__PURE__*/_react.default.createElement("div", {
39
+ className: "custom-body-heading"
40
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
41
+ typography: item.heading.type,
42
+ color: item.heading.color || "primary-content"
43
+ }, item.heading.label)), item.dataConfig && item.dataConfig.type === "keyvalue" && /*#__PURE__*/_react.default.createElement("div", {
44
+ className: "custom-body-content"
45
+ }, /*#__PURE__*/_react.default.createElement(_KeyValueWidget.default, {
46
+ data: item.dataConfig.data,
47
+ customClassName: "gst-details-keyvalue"
48
+ })), item.dataConfig && item.dataConfig.type === "titleSubtitle" && /*#__PURE__*/_react.default.createElement("div", {
49
+ className: "custom-body-content-titleSubtitle"
50
+ }, (item === null || item === void 0 || (_item$dataConfig = item.dataConfig) === null || _item$dataConfig === void 0 || (_item$dataConfig = _item$dataConfig.data) === null || _item$dataConfig === void 0 ? void 0 : _item$dataConfig.length) > 0 && item.dataConfig.data.map((field, index) => /*#__PURE__*/_react.default.createElement("div", {
51
+ key: index,
52
+ className: "title-subtitle-item"
53
+ }, /*#__PURE__*/_react.default.createElement("div", {
54
+ className: "user-details"
55
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
56
+ typography: "type-t2-700",
57
+ color: "primary-content"
58
+ }, field.title), /*#__PURE__*/_react.default.createElement(_Typography.default, {
59
+ typography: "type-b1-400",
60
+ color: "secondary-content"
61
+ }, field.subtitle))))), item.dataConfig && item.dataConfig.type === "button" && /*#__PURE__*/_react.default.createElement("div", {
62
+ className: "custom-body-content"
63
+ }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
64
+ type: item.dataConfig.subType,
65
+ onClick: () => {
66
+ if (onActionClick && item.dataConfig.onClick) {
67
+ onActionClick(item.dataConfig.onClick, item.dataConfig);
68
+ }
69
+ },
70
+ label: item.dataConfig.label
71
+ })));
72
+ });
57
73
  }
58
74
  CollapseIcon.propTypes = {
59
75
  isActive: _propTypes.default.bool.isRequired
package/build/components/oa-component-accordion/styles.js CHANGED
@@ -10,4 +10,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
10
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
11
  var _default = exports.default = {};
12
12
  const SmallText = exports.SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: 18px;\n color: #e21616;\n margin: 0 0 0 4px;\n"])));
13
- const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .ant-collapse .ant-collapse-item-disabled {\n background: var(--color-disabled-button);\n }\n /* .ant-collapse-item-active .ant-collapse-expand-icon{\n transform: rotate(180deg);\n } */\n /* .ant-collapse-expand-icon{\n padding-inline-start: 0 !important;\n } */\n .ant-collapse-header-text {\n color: var(--color-primary-content);\n }\n /* .ant-collapse-arrow{\n color: var(--color-secondary-content) !important;\n } */\n .ant-collapse > .ant-collapse-item:last-child,\n .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header,\n .ant-collapse .ant-collapse-item:last-child > .ant-collapse-content {\n border-radius: 0 0 4px 4px;\n }\n .ant-collapse > .ant-collapse-item {\n border: none;\n }\n .ant-collapse {\n border: 1px solid var(--color-divider);\n border-radius: 4px;\n overflow: hidden;\n }\n\n .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n padding: 12px 24px;\n }\n\n /* New styles for header content layout */\n .header-content {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n width: 100%;\n }\n\n .header-main {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1;\n gap: 8px;\n }\n\n .header-tag {\n margin-bottom: 4px;\n }\n\n .header-text {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .header-subtext {\n margin-top: 4px;\n color: var(--color-secondary-content);\n }\n\n /* Custom body styles */\n .custom-body-item {\n margin-bottom: 24px;\n }\n\n .custom-body-heading {\n margin-bottom: 16px;\n }\n\n .custom-body-content {\n // margin-top: 8px;\n }\n\n .custom-body-button {\n margin-top: 16px;\n display: flex;\n justify-content: flex-end;\n }\n\n .gst-details-keyvalue {\n .key-value-item {\n margin-bottom: 4px;\n }\n\n .key {\n font-weight: 400;\n color: var(--color-primary-content);\n }\n\n .value {\n font-weight: 700;\n color: var(--color-primary-content);\n }\n }\n\n @media only screen and (max-width: 600px) {\n .ant-collapse .ant-collapse-content > .ant-collapse-content-box {\n padding: 16px;\n }\n .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n padding: 12px 16px;\n }\n }\n"])));
13
+ const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .ant-collapse .ant-collapse-item-disabled {\n background: var(--color-disabled-button);\n }\n /* .ant-collapse-item-active .ant-collapse-expand-icon{\n transform: rotate(180deg);\n } */\n /* .ant-collapse-expand-icon{\n padding-inline-start: 0 !important;\n } */\n .ant-collapse-header-text {\n color: var(--color-primary-content);\n }\n /* .ant-collapse-arrow{\n color: var(--color-secondary-content) !important;\n } */\n .ant-collapse > .ant-collapse-item:last-child,\n .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header,\n .ant-collapse .ant-collapse-item:last-child > .ant-collapse-content {\n border-radius: 0 0 4px 4px;\n }\n .ant-collapse > .ant-collapse-item {\n border: none;\n }\n .ant-collapse {\n border: 1px solid var(--color-divider);\n border-radius: 4px;\n overflow: hidden;\n }\n\n .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n padding: 12px 24px;\n }\n\n /* New styles for header content layout */\n .header-content {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n width: 100%;\n }\n\n .header-main {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex: 1;\n gap: 8px;\n }\n\n .header-tag {\n margin-bottom: 4px;\n }\n\n .header-text {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .header-subtext {\n margin-top: 4px;\n color: var(--color-secondary-content);\n }\n\n /* Custom body styles */\n .custom-body-item {\n margin-bottom: 24px;\n }\n\n .custom-body-heading {\n margin-bottom: 16px;\n }\n\n .custom-body-content {\n // margin-top: 8px;\n }\n\n .custom-body-button {\n margin-top: 16px;\n display: flex;\n justify-content: flex-end;\n }\n\n .gst-details-keyvalue {\n .key-value-item {\n margin-bottom: 4px;\n }\n\n .key {\n font-weight: 400;\n color: var(--color-primary-content);\n }\n\n .value {\n font-weight: 700;\n color: var(--color-primary-content);\n }\n }\n\n @media only screen and (max-width: 600px) {\n .ant-collapse .ant-collapse-content > .ant-collapse-content-box {\n padding: 16px;\n }\n .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n padding: 12px 16px;\n }\n }\n\n .custom-body-content-titleSubtitle {\n display: flex;\n flex-direction: column;\n gap: 16px; /* spacing between each item */\n }\n\n .title-subtitle-item {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n }\n\n .title-subtitle-item .user-details {\n flex: 1;\n display: flex; /* \uD83D\uDC48 add this */\n flex-direction: column; /* stack name & email vertically */\n gap: 2px; /* optional: tighten spacing between name & email */\n }\n"])));
package/build/layout/EntityOverviewLayout/EntityOverviewLayout.js CHANGED
@@ -119,6 +119,12 @@ function EntityOverviewLayout(_ref) {
119
119
  placement: "bottomRight"
120
120
  });
121
121
  };
122
+ const handleCloseDrawer = () => {
123
+ init();
124
+ dispatch({
125
+ type: _entityOverviewLayoutReducer.actionTypes.CLOSE_DRAWER
126
+ });
127
+ };
122
128
  const handleActionClick = (actionType, actionData) => {
123
129
  var _config$drawer, _drawerDetailData$dat, _state$drawer;
124
130
  switch (actionType) {
@@ -151,6 +157,12 @@ function EntityOverviewLayout(_ref) {
151
157
  className: "oaRightLayouts"
152
158
  }, /*#__PURE__*/_react.default.createElement("div", {
153
159
  className: "oaTopHeaderAndBtnSec"
160
+ }, /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
161
+ loading: state === null || state === void 0 ? void 0 : state.isLoading,
162
+ active: true,
163
+ paragraph: {
164
+ rows: 1
165
+ }
154
166
  }, /*#__PURE__*/_react.default.createElement("div", {
155
167
  className: "headerContent"
156
168
  }, (backButton === null || backButton === void 0 ? void 0 : backButton.visible) && /*#__PURE__*/_react.default.createElement("div", {
@@ -165,17 +177,30 @@ function EntityOverviewLayout(_ref) {
165
177
  })), (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.visible) && (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
166
178
  color: pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.color,
167
179
  typography: pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.type
168
- }, pageTitle.title))), /*#__PURE__*/_react.default.createElement("div", {
180
+ }, pageTitle.title)))), /*#__PURE__*/_react.default.createElement("div", {
169
181
  className: "profileContent"
170
- }, (profileData === null || profileData === void 0 ? void 0 : profileData.visible) && /*#__PURE__*/_react.default.createElement(_ProfileDataWidget.default, _extends({}, profileData === null || profileData === void 0 ? void 0 : profileData.data, {
182
+ }, (profileData === null || profileData === void 0 ? void 0 : profileData.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
183
+ loading: state === null || state === void 0 ? void 0 : state.isLoading,
184
+ active: true,
185
+ paragraph: {
186
+ rows: 1
187
+ }
188
+ }, /*#__PURE__*/_react.default.createElement(_ProfileDataWidget.default, _extends({}, profileData === null || profileData === void 0 ? void 0 : profileData.data, {
171
189
  alignProfile: profileData === null || profileData === void 0 ? void 0 : profileData.alignProfile
172
- })), (accordionData === null || accordionData === void 0 ? void 0 : accordionData.visible) && Array.isArray(accordionData === null || accordionData === void 0 ? void 0 : accordionData.data) && /*#__PURE__*/_react.default.createElement("div", {
190
+ }))), (accordionData === null || accordionData === void 0 ? void 0 : accordionData.visible) && Array.isArray(accordionData === null || accordionData === void 0 ? void 0 : accordionData.data) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
191
+ loading: state === null || state === void 0 ? void 0 : state.isLoading,
192
+ active: true,
193
+ paragraph: {
194
+ rows: 3
195
+ }
196
+ }, /*#__PURE__*/_react.default.createElement("div", {
173
197
  className: "accordionsContainer"
174
198
  }, accordionData.data.map((accordion, index) => /*#__PURE__*/_react.default.createElement("div", {
175
- key: accordion.key || index,
199
+ key: Math.random(),
176
200
  className: "accordion-item"
177
201
  }, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
178
- key: accordion.key || index,
202
+ data: accordion,
203
+ key: Math.random(),
179
204
  headerText: accordion.headerText,
180
205
  defaultActiveKey: accordion.defaultActiveKey,
181
206
  activeKey: accordion.activeKey,
@@ -190,14 +215,12 @@ function EntityOverviewLayout(_ref) {
190
215
  },
191
216
  customBody: accordion.customBody,
192
217
  onActionClick: handleActionClick
193
- })))))), /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
218
+ }))))))), /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
194
219
  ref: notificationRef
195
220
  }), /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
196
221
  className: "oaDrawer",
197
222
  open: (drawer === null || drawer === void 0 ? void 0 : drawer.visible) === true,
198
- onClose: () => dispatch({
199
- type: _entityOverviewLayoutReducer.actionTypes.CLOSE_DRAWER
200
- }),
223
+ onClose: handleCloseDrawer,
201
224
  title: drawer === null || drawer === void 0 || (_drawer$data = drawer.data) === null || _drawer$data === void 0 || (_drawer$data = _drawer$data[drawer === null || drawer === void 0 ? void 0 : drawer.active]) === null || _drawer$data === void 0 ? void 0 : _drawer$data.title,
202
225
  width: 860,
203
226
  footer: null
package/build/layout/EntityOverviewLayout/reducer/entityOverviewLayoutReducer.js CHANGED
@@ -15,8 +15,6 @@ const actionTypes = exports.actionTypes = {
15
15
  INIT: 'INIT',
16
16
  SET_LOADING: 'SET_LOADING',
17
17
  SET_PROFILE_DATA: 'SET_PROFILE_DATA',
18
- SET_ACCORDION_DATA: 'SET_ACCORDION_DATA',
19
- TOGGLE_ACCORDION: 'TOGGLE_ACCORDION',
20
18
  SET_MISC: 'SET_MISC',
21
19
  SET_DRAWER: 'SET_DRAWER',
22
20
  TOGGLE_DRAWER: 'TOGGLE_DRAWER',
@@ -35,18 +33,6 @@ const entityOverviewLayoutReducer = (state, action) => {
35
33
  return _objectSpread(_objectSpread({}, state), {}, {
36
34
  profileData: _objectSpread(_objectSpread({}, state.profileData), action.payload)
37
35
  });
38
- case actionTypes.SET_ACCORDION_DATA:
39
- return _objectSpread(_objectSpread({}, state), {}, {
40
- accordionData: _objectSpread(_objectSpread({}, state.accordionData), action.payload)
41
- });
42
- case actionTypes.TOGGLE_ACCORDION:
43
- return _objectSpread(_objectSpread({}, state), {}, {
44
- accordionData: _objectSpread(_objectSpread({}, state.accordionData), {}, {
45
- data: state.accordionData.data.map(accordion => accordion.key === action.payload ? _objectSpread(_objectSpread({}, accordion), {}, {
46
- isExpanded: !accordion.isExpanded
47
- }) : accordion)
48
- })
49
- });
50
36
  case actionTypes.SET_MISC:
51
37
  return _objectSpread(_objectSpread({}, state), {}, {
52
38
  misc: _objectSpread(_objectSpread({}, state.misc), action.payload)
package/build/widgets/oa-widget-user-management/UserManagementWidget.js CHANGED
@@ -122,37 +122,52 @@ function UserManagementWidget(_ref) {
122
122
  if (editingUserId) {
123
123
  // Update existing user
124
124
  if (editUserClick) {
125
- const success = await editUserClick(editingUserId, userData);
126
- if (success) {
127
- showSuccessNotification("success");
125
+ const {
126
+ error,
127
+ data
128
+ } = await editUserClick(editingUserId, userData);
129
+ if (error) {
130
+ showErrorNotification(error);
131
+ } else {
128
132
  const updatedUsers = users.map(user => user.id === editingUserId ? _objectSpread(_objectSpread({}, user), userData) : user);
129
133
  updateUsers(updatedUsers);
130
134
  setEditingUserId(null);
131
- } else {
132
- showErrorNotification("error");
135
+ showSuccessNotification(data === null || data === void 0 ? void 0 : data.message);
136
+ // Clear the form fields only if operation was successful
137
+ const clearData = {};
138
+ finalFields.forEach(field => {
139
+ clearData["".concat(fieldName, "_").concat(field.key)] = "";
140
+ });
141
+ form.setFieldsValue(clearData);
133
142
  }
134
143
  }
135
144
  } else if (addingUser) {
136
145
  // Add new user
137
146
  if (addUserClick) {
138
- const success = await addUserClick(userData, misc);
139
- if (success) {
147
+ const {
148
+ error,
149
+ data
150
+ } = await addUserClick(userData, misc);
151
+ if (error) {
152
+ showErrorNotification(error);
153
+ } else {
154
+ var _data$data;
140
155
  const newUser = _objectSpread({
141
- id: Date.now()
156
+ id: data === null || data === void 0 || (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.userId
142
157
  }, userData);
143
158
  const updatedUsers = [...users, newUser];
144
159
  updateUsers(updatedUsers);
145
160
  setAddingUser(false);
161
+ showSuccessNotification(data === null || data === void 0 ? void 0 : data.message);
162
+ // Clear the form fields only if operation was successful
163
+ const clearData = {};
164
+ finalFields.forEach(field => {
165
+ clearData["".concat(fieldName, "_").concat(field.key)] = "";
166
+ });
167
+ form.setFieldsValue(clearData);
146
168
  }
147
169
  }
148
170
  }
149
-
150
- // Clear the form fields only if operation was successful
151
- const clearData = {};
152
- finalFields.forEach(field => {
153
- clearData["".concat(fieldName, "_").concat(field.key)] = "";
154
- });
155
- form.setFieldsValue(clearData);
156
171
  } catch (errorInfo) {
157
172
  console.log("Form validation failed:", errorInfo);
158
173
  }
@@ -175,15 +190,19 @@ function UserManagementWidget(_ref) {
175
190
  const confirmDelete = async () => {
176
191
  if (userToDelete) {
177
192
  if (deleteUserClick) {
178
- const success = await deleteUserClick(userToDelete);
179
- if (success) {
180
- showSuccessNotification("success");
193
+ const {
194
+ error,
195
+ data
196
+ } = await deleteUserClick(userToDelete);
197
+ if (error) {
198
+ showErrorNotification(error);
199
+ setDeleteModalVisible(false);
200
+ } else {
181
201
  const updatedUsers = users.filter(user => user.id !== userToDelete);
182
202
  updateUsers(updatedUsers);
183
- setUserToDelete(null);
184
- } else {
185
- showErrorNotification("error");
186
203
  setDeleteModalVisible(false);
204
+ showSuccessNotification(data === null || data === void 0 ? void 0 : data.message);
205
+ setUserToDelete(null);
187
206
  }
188
207
  }
189
208
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "1.0.1-stage.372",
3
+ "version": "1.0.1-stage.374",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",