@solidstarters/solid-core-ui 1.1.73 → 1.1.74

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 (12) hide show
  1. package/dist/components/core/form/SolidFormActionHeader.d.ts +2 -0
  2. package/dist/components/core/form/SolidFormActionHeader.d.ts.map +1 -0
  3. package/dist/components/core/form/SolidFormActionHeader.js +66 -0
  4. package/dist/components/core/form/SolidFormActionHeader.js.map +1 -0
  5. package/dist/components/core/form/SolidFormActionHeader.tsx +216 -0
  6. package/dist/components/core/form/SolidFormView.d.ts.map +1 -1
  7. package/dist/components/core/form/SolidFormView.js +3 -68
  8. package/dist/components/core/form/SolidFormView.js.map +1 -1
  9. package/dist/components/core/form/SolidFormView.tsx +14 -241
  10. package/package.json +1 -1
  11. package/src/components/core/form/SolidFormActionHeader.tsx +216 -0
  12. package/src/components/core/form/SolidFormView.tsx +14 -241
package/src/components/core/form/SolidFormView.tsx CHANGED
@@ -50,6 +50,7 @@ import Download from "yet-another-react-lightbox/plugins/download";
50
50
  import "yet-another-react-lightbox/styles.css";
51
51
  import "yet-another-react-lightbox/plugins/counter.css";
52
52
  import { SolidChatter } from "../chatter/SolidChatter";
53
+ import { SolidFormActionHeader } from "./SolidFormActionHeader";
53
54
 
54
55
  export type SolidFormViewProps = {
55
56
  moduleName: string;
@@ -533,12 +534,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
533
534
  isEntityUpdateError
534
535
  ]);
535
536
 
536
- const showError = async () => {
537
- // Trigger validation and get the updated errors
538
- const errors = await formik.validateForm();
539
- const errorMessages = Object.values(errors);
540
- };
541
-
542
537
  const showToast = (severity: "success" | "error", summary: string, detail: string) => {
543
538
  toast.current?.show({
544
539
  severity,
@@ -763,9 +758,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
763
758
  const solidView = solidFormViewMetaData.data.solidView;
764
759
  const solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
765
760
 
766
- const createHeaderTitle = `Create ${solidView.model.displayName}`;
767
- const editHeaderTitle = `Edit ${solidView.model.displayName}`;
768
-
769
761
  const validationSchema = {};
770
762
  const initialValues = {};
771
763
 
@@ -1033,72 +1025,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
1033
1025
  const onDeleteClose = () => {
1034
1026
  setDeleteDialogVisible(false);
1035
1027
  }
1036
-
1037
- const formActionDropdown = () => {
1038
- return (
1039
- <div>
1040
- <Button
1041
- outlined
1042
- severity="secondary"
1043
- type="button"
1044
- icon={'pi pi-cog'}
1045
- size="small"
1046
- className="surface-card p-0"
1047
- style={{
1048
- height: 33.06,
1049
- width: 33.06
1050
- }}
1051
- onClick={(e) =>
1052
- // @ts-ignore
1053
- op.current.toggle(e)
1054
- }
1055
- />
1056
- <OverlayPanel ref={op} className="solid-custom-overlay">
1057
- <div className="flex flex-column gap-1 p-1">
1058
- {/* <Button
1059
- text
1060
- type="button"
1061
- className="w-8rem text-left gap-2 text-color"
1062
- label="Duplicate"
1063
- size="small"
1064
- iconPos="left"
1065
- icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
1066
- <path d="M6 11.9997C5.63333 11.9997 5.31944 11.8691 5.05833 11.608C4.79722 11.3469 4.66667 11.033 4.66667 10.6663V2.66634C4.66667 2.29967 4.79722 1.98579 5.05833 1.72467C5.31944 1.46356 5.63333 1.33301 6 1.33301H12C12.3667 1.33301 12.6806 1.46356 12.9417 1.72467C13.2028 1.98579 13.3333 2.29967 13.3333 2.66634V10.6663C13.3333 11.033 13.2028 11.3469 12.9417 11.608C12.6806 11.8691 12.3667 11.9997 12 11.9997H6ZM6 10.6663H12V2.66634H6V10.6663ZM3.33333 14.6663C2.96667 14.6663 2.65278 14.5358 2.39167 14.2747C2.13056 14.0136 2 13.6997 2 13.333V3.99967H3.33333V13.333H10.6667V14.6663H3.33333Z" fill="black" fill-opacity="0.88" />
1067
- </svg>}
1068
- /> */}
1069
- {params.embeded !== true &&
1070
- params.id !== "new" &&
1071
- actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
1072
- !formViewLayout.attrs.readonly &&
1073
- <Button
1074
- text
1075
- type="button"
1076
- className="w-8rem text-left gap-2"
1077
- label="Delete"
1078
- size="small"
1079
- iconPos="left"
1080
- severity="danger"
1081
- icon={'pi pi-trash'}
1082
- onClick={() => setDeleteDialogVisible(true)}
1083
- />
1084
- }
1085
- <Button
1086
- text
1087
- type="button"
1088
- className="w-8rem text-left gap-2 purple-200"
1089
- label="Layout"
1090
- size="small"
1091
- iconPos="left"
1092
- severity="contrast"
1093
- icon={'pi pi-objects-column'}
1094
- onClick={() => setLayoutDialogVisible(true)}
1095
- />
1096
- </div>
1097
- </OverlayPanel>
1098
- </div>
1099
- )
1100
- }
1101
-
1102
1028
  // TODO: This was simply to demonstrate how we can use dynamic components, we will remove this and use it in a more sensible way in the layout.
1103
1029
  // TODO: to demonstrated this you can simply add the below to the layout of the book form view.
1104
1030
  // TODO: "header": "BookFormViewDynamicComponent",
@@ -1113,173 +1039,20 @@ const SolidFormView = (params: SolidFormViewProps) => {
1113
1039
  <Toast ref={toast} />
1114
1040
  <div className="solid-form-section" style={{ borderRight: params.embeded !== true ? '1px solid var(--primary-light-color' : '' }} >
1115
1041
  <form style={{ width: '100%' }} onSubmit={formik.handleSubmit}>
1116
- <div className="solid-form-header">
1117
- {params.id === "new" ? (
1118
- <>
1119
- <div className="flex align-items-center gap-3">
1120
- {params.embeded !== true && <BackButton />}
1121
- <div className="form-wrapper-title"> {createHeaderTitle}</div>
1122
- </div>
1123
- <div className="gap-3 flex">
1124
- {params.embeded !== true &&
1125
- actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
1126
- !formViewLayout.attrs.readonly &&
1127
- formik.dirty &&
1128
- <div>
1129
- <Button
1130
- label="Save"
1131
- size="small"
1132
- onClick={() => showError()}
1133
- type="submit"
1134
- />
1135
- </div>
1136
- }
1137
- {/* {params.embeded !== true &&
1138
- actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
1139
- !formViewLayout.attrs.readonly &&
1140
- <div>
1141
- <Button
1142
- label="Save & Close"
1143
- size="small"
1144
- onClick={() => {
1145
- setRedirectToList(true);
1146
- showError()
1147
- }}
1148
- type="submit"
1149
- />
1150
- </div>
1151
- } */}
1152
-
1153
- {/* Inline */}
1154
- {params.embeded == true &&
1155
- actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
1156
- !formViewLayout.attrs.readonly &&
1157
- formik.dirty &&
1158
- <div>
1159
- <Button
1160
- label="Save"
1161
- size="small"
1162
- onClick={() => {
1163
- setRedirectToList(false);
1164
- showError()
1165
- }}
1166
- type="submit"
1167
- />
1168
- </div>
1169
- }
1170
- {params.embeded == true &&
1171
- <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
1172
-
1173
- }
1174
- {params.embeded !== true &&
1175
- <SolidCancelButton />
1176
- }
1177
- {formActionDropdown()}
1178
- </div>
1179
- </>
1180
- ) : (
1181
- <>
1182
- <div className="flex align-items-center gap-3">
1183
- {params.embeded !== true && <BackButton />}
1184
- <div className="form-wrapper-title"> {editHeaderTitle}</div>
1185
- </div>
1186
- <div className="gap-3 flex">
1187
- {params.embeded !== true && viewMode === "view" &&
1188
- <div>
1189
- <Button
1190
- label="Edit"
1191
- size="small"
1192
- onClick={() => updateViewMode("edit")}
1193
- type="button"
1194
- />
1195
- </div>
1196
- }
1197
-
1198
- {params.embeded !== true &&
1199
- actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
1200
- !formViewLayout.attrs.readonly &&
1201
- formik.dirty &&
1202
- <div>
1203
- <Button
1204
- label="Save"
1205
- size="small"
1206
- onClick={() => showError()}
1207
- type="submit"
1208
- />
1209
- </div>
1210
- }
1211
-
1212
- {/* Inline */}
1213
- {params.embeded == true &&
1214
- actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
1215
- !formViewLayout.attrs.readonly &&
1216
- formik.dirty &&
1217
- <div>
1218
- <Button
1219
- label="Save"
1220
- size="small"
1221
- onClick={() => showError()}
1222
- type="submit"
1223
- />
1224
- </div>
1225
- }
1226
- {/* {params.embeded !== true &&
1227
- actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
1228
- !formViewLayout.attrs.readonly &&
1229
- <div>
1230
- <Button
1231
- label="Save & Close"
1232
- size="small"
1233
- onClick={() => {
1234
- setRedirectToList(true);
1235
- showError()
1236
- }}
1237
- type="submit"
1238
- />
1239
- </div>
1240
- } */}
1241
- {params.embeded == true &&
1242
- actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
1243
- !formViewLayout.attrs.readonly &&
1244
- <div>
1245
- <Button
1246
- size="small"
1247
- type="button"
1248
- label="Delete"
1249
- severity="danger"
1250
- onClick={() => setDeleteDialogVisible(true)}
1251
- />
1252
- </div>
1253
- }
1254
- {params.embeded == true &&
1255
- <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
1256
-
1257
- }
1258
- {params.embeded !== true &&
1259
- <SolidCancelButton />
1260
- }
1261
- {formActionDropdown()}
1262
- </div>
1263
- </>
1264
- )}
1265
- </div>
1266
- {/* {params.embeded !== true &&
1267
- <SolidBreadcrumb
1268
- solidViewData={solidFormViewMetaData?.data?.solidView?.model}
1042
+ <SolidFormActionHeader
1043
+ formik={formik}
1044
+ params={params}
1045
+ actionsAllowed={actionsAllowed}
1046
+ formViewLayout={formViewLayout}
1047
+ solidView={solidView}
1048
+ solidFormViewMetaData={solidFormViewMetaData}
1269
1049
  initialEntityData={initialEntityData}
1050
+ setDeleteDialogVisible={setDeleteDialogVisible}
1051
+ setLayoutDialogVisible={setLayoutDialogVisible}
1052
+ setRedirectToList={setRedirectToList}
1053
+ viewMode={viewMode}
1054
+ setViewMode={setViewMode}
1270
1055
  />
1271
- } */}
1272
- {params.embeded !== true &&
1273
- // <div className="solid-form-stepper">
1274
- <SolidFormHeader
1275
- // solidFormViewMetaData={solidFormViewMetaData?.data?.solidView?.model}
1276
- solidFormViewMetaData={solidFormViewMetaData}
1277
- initialEntityData={initialEntityData}
1278
- modelName={params.modelName}
1279
- id={params.id}
1280
- />
1281
- // </div>
1282
- }
1283
1056
  <div className="p-4 solid-form-content">
1284
1057
  {DynamicHeaderComponent && <DynamicHeaderComponent />}
1285
1058
  {renderFormDynamically(formViewMetaData)}
@@ -1308,7 +1081,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
1308
1081
  size="small"
1309
1082
  className="px-0"
1310
1083
  style={{ width: 30 }}
1311
- onClick={() => {setShowChatter(true); setRefreshChatterMessage(true);}}
1084
+ onClick={() => { setShowChatter(true); setRefreshChatterMessage(true); }}
1312
1085
  />
1313
1086
  </div>
1314
1087
  : <SolidChatter solidFormViewMetaData={solidFormViewMetaData} id={params.id} refreshChatterMessage={refreshChatterMessage} setRefreshChatterMessage={setRefreshChatterMessage} />