@visns-studio/visns-components 5.8.7 → 5.8.8

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/crm/Form.jsx +288 -242
  3. package/src/components/crm/generic/GenericIndex.jsx +1145 -26
  4. package/src/components/crm/generic/styles/GenericIndex.module.scss +334 -0
package/package.json CHANGED
@@ -82,7 +82,7 @@
82
82
  "react-dom": "^17.0.0 || ^18.0.0"
83
83
  },
84
84
  "name": "@visns-studio/visns-components",
85
- "version": "5.8.7",
85
+ "version": "5.8.8",
86
86
  "description": "Various packages to assist in the development of our Custom Applications.",
87
87
  "main": "src/index.js",
88
88
  "files": [
package/src/components/crm/Form.jsx CHANGED
@@ -700,278 +700,324 @@ function Form({
700
700
  if (validation) {
701
701
  toast.error(<div>{parse(validation)}</div>);
702
702
  } else {
703
- let url = formSettings.url;
704
- let method = 'POST';
705
- let fileUpload = false;
706
- let fileKey = '';
707
- let fileFieldSetting = '';
708
-
709
- if (formSettings.customUrl && formSettings.customMethod) {
710
- url = formSettings.customUrl;
711
- if (formSettings.customDataId) {
712
- url += `/${formData[formSettings.primaryKey]}`;
713
- }
714
- method = formSettings.customMethod;
715
- } else {
716
- switch (formType) {
717
- case 'create':
718
- if (formSettings.json) {
719
- url += '/json/store';
720
- }
721
- break;
722
- case 'update':
723
- case 'delete':
724
- if (formSettings.json) {
725
- url +=
703
+ // Define the form submission function
704
+ const submitForm = async () => {
705
+ let url = formSettings.url;
706
+ let method = 'POST';
707
+ let fileUpload = false;
708
+ let fileKey = '';
709
+ let fileFieldSetting = '';
710
+
711
+ if (
712
+ formSettings.customUrl &&
713
+ formSettings.customMethod
714
+ ) {
715
+ url = formSettings.customUrl;
716
+ if (formSettings.customDataId) {
717
+ url += `/${formData[formSettings.primaryKey]}`;
718
+ }
719
+ method = formSettings.customMethod;
720
+ } else {
721
+ switch (formType) {
722
+ case 'create':
723
+ if (formSettings.json) {
724
+ url += '/json/store';
725
+ }
726
+ break;
727
+ case 'update':
728
+ case 'delete':
729
+ if (formSettings.json) {
730
+ url +=
731
+ formType === 'update'
732
+ ? '/json/update'
733
+ : `/json/delete/${
734
+ formData[
735
+ formSettings
736
+ .primaryKey
737
+ ]
738
+ }`;
739
+ } else {
740
+ url += `/${
741
+ formData[formSettings.primaryKey]
742
+ }`;
743
+ }
744
+ method =
726
745
  formType === 'update'
727
- ? '/json/update'
728
- : `/json/delete/${
729
- formData[
730
- formSettings.primaryKey
731
- ]
732
- }`;
733
- } else {
734
- url += `/${
735
- formData[formSettings.primaryKey]
736
- }`;
737
- }
738
- method =
739
- formType === 'update' ? 'PUT' : 'DELETE';
740
- break;
746
+ ? 'PUT'
747
+ : 'DELETE';
748
+ break;
749
+ }
741
750
  }
742
- }
743
751
 
744
- if (!_.isEmpty(formData)) {
745
- Object.keys(formData).forEach((item) => {
746
- const value = formData[item];
752
+ if (!_.isEmpty(formData)) {
753
+ Object.keys(formData).forEach((item) => {
754
+ const value = formData[item];
747
755
 
748
- // Check if it's a single File or an array of File objects
749
- if (
750
- value instanceof File ||
751
- (Array.isArray(value) &&
752
- value.every((file) => file instanceof File))
753
- ) {
754
- fileUpload = true;
755
- fileKey = item;
756
+ // Check if it's a single File or an array of File objects
757
+ if (
758
+ value instanceof File ||
759
+ (Array.isArray(value) &&
760
+ value.every(
761
+ (file) => file instanceof File
762
+ ))
763
+ ) {
764
+ fileUpload = true;
765
+ fileKey = item;
756
766
 
757
- if (formSettings.fields.length > 0) {
758
- formSettings.fields.forEach((field) => {
759
- if (field.id === item) {
760
- fileFieldSetting = field;
761
- }
762
- });
767
+ if (formSettings.fields.length > 0) {
768
+ formSettings.fields.forEach((field) => {
769
+ if (field.id === item) {
770
+ fileFieldSetting = field;
771
+ }
772
+ });
773
+ }
763
774
  }
764
- }
765
- });
766
- }
767
-
768
- if (fileUpload && formData[fileKey]) {
769
- if (Array.isArray(formData[fileKey])) {
770
- const uploadPromises = formData[fileKey].map(
771
- async (file) => {
772
- // Optimize image if it's an image file
773
- const optimizedFile =
774
- await optimizeImageIfNeeded(file);
775
-
776
- const toastId = toast.info(
777
- `Uploading ${file.name}`,
778
- {
779
- progress: 0,
780
- autoClose: false,
781
- }
782
- );
775
+ });
776
+ }
783
777
 
784
- const fileRes = await Vapor.store(
785
- optimizedFile,
786
- {
787
- progress: (progress) => {
788
- setUploadProgress(
789
- progress * 100
790
- );
791
- toast.update(toastId, {
792
- progress,
793
- });
794
- },
795
- }
796
- );
778
+ if (fileUpload && formData[fileKey]) {
779
+ if (Array.isArray(formData[fileKey])) {
780
+ const uploadPromises = formData[fileKey].map(
781
+ async (file) => {
782
+ // Optimize image if it's an image file
783
+ const optimizedFile =
784
+ await optimizeImageIfNeeded(file);
785
+
786
+ const toastId = toast.info(
787
+ `Uploading ${file.name}`,
788
+ {
789
+ progress: 0,
790
+ autoClose: false,
791
+ }
792
+ );
797
793
 
798
- toast.update(toastId, {
799
- render: `${file.name} uploaded successfully!`,
800
- type: 'success',
801
- autoClose: 3000,
802
- });
803
-
804
- return {
805
- uuid: fileRes.uuid,
806
- key: fileRes.key,
807
- bucket: fileRes.bucket,
808
- filename: file.name,
809
- filesize: optimizedFile.size,
810
- extension: fileRes.extension,
811
- file_relationship: fileKey,
812
- fileable_field:
813
- fileFieldSetting.fileable_field,
814
- };
815
- }
816
- );
794
+ const fileRes = await Vapor.store(
795
+ optimizedFile,
796
+ {
797
+ progress: (progress) => {
798
+ setUploadProgress(
799
+ progress * 100
800
+ );
801
+ toast.update(toastId, {
802
+ progress,
803
+ });
804
+ },
805
+ }
806
+ );
817
807
 
818
- updatedFormData['uploadedFiles'] =
819
- await Promise.all(uploadPromises);
820
- } else {
821
- // Optimize image if it's an image file
822
- const optimizedFile = await optimizeImageIfNeeded(
823
- updatedFormData[fileKey]
824
- );
808
+ toast.update(toastId, {
809
+ render: `${file.name} uploaded successfully!`,
810
+ type: 'success',
811
+ autoClose: 3000,
812
+ });
813
+
814
+ return {
815
+ uuid: fileRes.uuid,
816
+ key: fileRes.key,
817
+ bucket: fileRes.bucket,
818
+ filename: file.name,
819
+ filesize: optimizedFile.size,
820
+ extension: fileRes.extension,
821
+ file_relationship: fileKey,
822
+ fileable_field:
823
+ fileFieldSetting.fileable_field,
824
+ };
825
+ }
826
+ );
825
827
 
826
- const toastId = toast.info(
827
- `Uploading ${updatedFormData[fileKey].name}`,
828
- {
829
- progress: 0,
830
- autoClose: false,
831
- }
832
- );
828
+ updatedFormData['uploadedFiles'] =
829
+ await Promise.all(uploadPromises);
830
+ } else {
831
+ // Optimize image if it's an image file
832
+ const optimizedFile =
833
+ await optimizeImageIfNeeded(
834
+ updatedFormData[fileKey]
835
+ );
833
836
 
834
- const fileRes = await Vapor.store(optimizedFile, {
835
- progress: (progress) => {
836
- setUploadProgress(progress * 100);
837
- toast.update(toastId, {
838
- progress,
839
- });
840
- },
841
- });
837
+ const toastId = toast.info(
838
+ `Uploading ${updatedFormData[fileKey].name}`,
839
+ {
840
+ progress: 0,
841
+ autoClose: false,
842
+ }
843
+ );
842
844
 
843
- toast.update(toastId, {
844
- render: `${updatedFormData[fileKey].name} uploaded successfully!`,
845
- type: 'success',
846
- autoClose: 3000,
847
- });
845
+ const fileRes = await Vapor.store(
846
+ optimizedFile,
847
+ {
848
+ progress: (progress) => {
849
+ setUploadProgress(progress * 100);
850
+ toast.update(toastId, {
851
+ progress,
852
+ });
853
+ },
854
+ }
855
+ );
848
856
 
849
- updatedFormData['uuid'] = fileRes.uuid;
850
- updatedFormData['key'] = fileRes.key;
851
- updatedFormData['bucket'] = fileRes.bucket;
852
- updatedFormData['filename'] =
853
- updatedFormData[fileKey].name;
854
- updatedFormData['filesize'] = optimizedFile.size;
855
- updatedFormData['extension'] = fileRes.extension;
856
- updatedFormData['file_relationship'] = fileKey;
857
- updatedFormData['fileable_field'] =
858
- fileFieldSetting.fileable_field;
859
- }
860
- }
857
+ toast.update(toastId, {
858
+ render: `${updatedFormData[fileKey].name} uploaded successfully!`,
859
+ type: 'success',
860
+ autoClose: 3000,
861
+ });
861
862
 
862
- // Transform keys with dots into nested objects
863
- const payload = Object.keys(updatedFormData).reduce(
864
- (acc, key) => {
865
- if (key.includes('.')) {
866
- const [root, sub] = key.split('.');
867
- if (!acc[root]) acc[root] = {};
868
- acc[root][sub] = updatedFormData[key];
869
- } else {
870
- acc[key] = updatedFormData[key];
863
+ updatedFormData['uuid'] = fileRes.uuid;
864
+ updatedFormData['key'] = fileRes.key;
865
+ updatedFormData['bucket'] = fileRes.bucket;
866
+ updatedFormData['filename'] =
867
+ updatedFormData[fileKey].name;
868
+ updatedFormData['filesize'] =
869
+ optimizedFile.size;
870
+ updatedFormData['extension'] =
871
+ fileRes.extension;
872
+ updatedFormData['file_relationship'] = fileKey;
873
+ updatedFormData['fileable_field'] =
874
+ fileFieldSetting.fileable_field;
871
875
  }
872
- return acc;
873
- },
874
- {}
875
- );
876
+ }
876
877
 
877
- const res = await CustomFetch(url, method, payload);
878
+ // Transform keys with dots into nested objects
879
+ const payload = Object.keys(updatedFormData).reduce(
880
+ (acc, key) => {
881
+ if (key.includes('.')) {
882
+ const [root, sub] = key.split('.');
883
+ if (!acc[root]) acc[root] = {};
884
+ acc[root][sub] = updatedFormData[key];
885
+ } else {
886
+ acc[key] = updatedFormData[key];
887
+ }
888
+ return acc;
889
+ },
890
+ {}
891
+ );
878
892
 
879
- if (res.data.error === '') {
880
- if (fetchTable) fetchTable();
881
- if (closeModal) {
882
- closeModal();
883
- if (type === 'saveAnother') {
884
- const { saveAnother } =
885
- formSettings?.update ||
886
- formSettings?.create ||
887
- {};
893
+ const res = await CustomFetch(url, method, payload);
888
894
 
889
- if (
890
- saveAnother?.url &&
891
- saveAnother?.method &&
892
- saveAnother?.data
893
- ) {
894
- // Process data object to handle now() timestamps
895
- const processedData = Object.entries(
896
- saveAnother.data
897
- ).reduce((acc, [key, value]) => {
898
- acc[key] =
899
- value === 'now()'
900
- ? moment().format(
901
- 'YYYY-MM-DD HH:mm:ss'
902
- ) // Format that strtotime() can parse
903
- : value;
904
- return acc;
905
- }, {});
906
-
907
- const saveAnotherUrl = `${
908
- saveAnother.url
909
- }/${formData[saveAnother.dataKey]}`;
910
- const resSaveAnother = await CustomFetch(
911
- saveAnotherUrl,
912
- saveAnother.method,
913
- processedData
914
- );
895
+ if (res.data.error === '') {
896
+ if (formSettings?.save?.pageReload) {
897
+ setTimeout(() => {
898
+ location.reload();
899
+ }, 1000);
900
+ }
901
+ if (fetchTable) fetchTable();
902
+ if (closeModal) {
903
+ closeModal();
904
+ if (type === 'saveAnother') {
905
+ const { saveAnother } =
906
+ formSettings?.update ||
907
+ formSettings?.create ||
908
+ {};
915
909
 
916
- if (resSaveAnother.data.error === '') {
917
- toast.success(saveAnother.message);
918
- fetchTable();
910
+ if (
911
+ saveAnother?.url &&
912
+ saveAnother?.method &&
913
+ saveAnother?.data
914
+ ) {
915
+ // Process data object to handle now() timestamps
916
+ const processedData = Object.entries(
917
+ saveAnother.data
918
+ ).reduce((acc, [key, value]) => {
919
+ acc[key] =
920
+ value === 'now()'
921
+ ? moment().format(
922
+ 'YYYY-MM-DD HH:mm:ss'
923
+ ) // Format that strtotime() can parse
924
+ : value;
925
+ return acc;
926
+ }, {});
927
+
928
+ const saveAnotherUrl = `${
929
+ saveAnother.url
930
+ }/${formData[saveAnother.dataKey]}`;
931
+ const resSaveAnother =
932
+ await CustomFetch(
933
+ saveAnotherUrl,
934
+ saveAnother.method,
935
+ processedData
936
+ );
937
+
938
+ if (resSaveAnother.data.error === '') {
939
+ toast.success(saveAnother.message);
940
+ fetchTable();
941
+ }
942
+ } else {
943
+ fetchData();
944
+ modalOpen('create', 0);
945
+ }
946
+ } else if (type === 'saveExit') {
947
+ const { saveExit } =
948
+ formSettings?.update ||
949
+ formSettings?.create ||
950
+ {};
951
+
952
+ if (saveExit?.redirectUrl) {
953
+ navigate(saveExit.redirectUrl);
919
954
  }
920
- } else {
921
- fetchData();
922
- modalOpen('create', 0);
923
- }
924
- } else if (type === 'saveExit') {
925
- const { saveExit } =
926
- formSettings?.update ||
927
- formSettings?.create ||
928
- {};
929
-
930
- if (saveExit?.redirectUrl) {
931
- console.info('aa');
932
- navigate(saveExit.redirectUrl);
933
955
  }
956
+ } else {
957
+ toast.success(
958
+ formSettings?.save?.toast?.success ||
959
+ 'Entry successfully saved into the system.'
960
+ );
934
961
  }
935
- } else {
936
- toast.success(
937
- formSettings?.save?.toast?.success ||
938
- 'Entry successfully saved into the system.'
939
- );
940
- }
941
962
 
942
- if (formSettings.redirect && res.data.data?.id) {
943
- navigate(
944
- `${formSettings.redirect}${res.data.data.id}`
945
- );
946
- }
963
+ if (formSettings.redirect && res.data.data?.id) {
964
+ navigate(
965
+ `${formSettings.redirect}${res.data.data.id}`
966
+ );
967
+ }
947
968
 
948
- if (res.data.redirect) {
949
- navigate(res.data.redirect);
950
- }
969
+ if (res.data.redirect) {
970
+ navigate(res.data.redirect);
971
+ }
951
972
 
952
- if (
953
- formSettings?.save?.return?.type === 'table' &&
954
- formSettings?.save?.return?.param
955
- ) {
956
973
  if (
957
- res.data[formSettings.save.return.param]
958
- ?.length > 0
974
+ formSettings?.save?.return?.type === 'table' &&
975
+ formSettings?.save?.return?.param
959
976
  ) {
960
- const td = parseTableData(
977
+ if (
961
978
  res.data[formSettings.save.return.param]
962
- );
963
- setTableData((prevState) => ({
964
- ...prevState,
965
- ...td,
966
- }));
967
- } else {
968
- setTableData((prevState) => ({
969
- ...prevState,
970
- columns: [],
971
- dataSource: [],
972
- }));
979
+ ?.length > 0
980
+ ) {
981
+ const td = parseTableData(
982
+ res.data[formSettings.save.return.param]
983
+ );
984
+ setTableData((prevState) => ({
985
+ ...prevState,
986
+ ...td,
987
+ }));
988
+ } else {
989
+ setTableData((prevState) => ({
990
+ ...prevState,
991
+ columns: [],
992
+ dataSource: [],
993
+ }));
994
+ }
973
995
  }
974
996
  }
997
+ };
998
+
999
+ // Check if confirmation is required
1000
+ if (formSettings.save && formSettings.save.confirmation) {
1001
+ confirmDialog({
1002
+ title: '',
1003
+ message:
1004
+ formSettings.save.confirmation.message ||
1005
+ 'Are you sure you want to proceed?',
1006
+ data: formData,
1007
+ buttons: [
1008
+ {
1009
+ label: 'Yes',
1010
+ onClick: submitForm,
1011
+ },
1012
+ {
1013
+ label: 'No',
1014
+ onClick: () => {},
1015
+ },
1016
+ ],
1017
+ });
1018
+ } else {
1019
+ // No confirmation required, submit directly
1020
+ await submitForm();
975
1021
  }
976
1022
  }
977
1023
  }