diff --git a/.vscode/settings.json b/.vscode/settings.json index e82b1ec..e6c0cf6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,14 @@ { - "workbench.editor.enablePreviewFromCodeNavigation": true + "workbench.editor.enablePreviewFromCodeNavigation": true, + "launch": { + "configurations": [], + "compounds": [] + }, + "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", + "editor.formatOnSave": true, + "notebook.defaultFormatter": "rvest.vs-code-prettier-eslint", + "notebook.formatOnSave.enabled": true, + "[javascript]": { + "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + } } diff --git a/src/features/province/components/create-guilds/CreateGuilds.js b/src/features/province/components/create-guilds/CreateGuilds.js index c77142c..a2075f9 100644 --- a/src/features/province/components/create-guilds/CreateGuilds.js +++ b/src/features/province/components/create-guilds/CreateGuilds.js @@ -22,6 +22,8 @@ import { provinceGetFieldOfWorks } from "../../services/ProvinceGetFieldOfWorks" import { provinceGetTypeActivity } from "../../services/provinceGetTypeActivity"; import { provinceGetRegisterCodeStateService } from "../../services/province-get-register-code-state"; import { mainGetGuildsForUpdateOrCreateService } from "../../services/main-get-guilds-for-update-or-create"; +import { cityGetProvinces } from "../../../city/services/CityGetProvinces"; +import { cityGetCity } from "../../../city/services/city-get-city"; import { getRoleFromUrl } from "../../../../utils/getRoleFromUrl"; import { PersonalInfoSection } from "./components/PersonalInfoSection"; import { InquiryForm } from "./components/InquiryForm"; @@ -87,6 +89,8 @@ export const CreateGuilds = ({ guild, updateTable }) => { return []; }); const [cities, setCities] = useState([]); + const [provinces, setProvinces] = useState([]); + const [provinceCities, setProvinceCities] = useState([]); const [typeActivities, setTypeActivities] = useState([]); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deleteDialogIndex, setDeleteDialogIndex] = useState(null); @@ -109,6 +113,7 @@ export const CreateGuilds = ({ guild, updateTable }) => { const combinedValues = { ...values, // Personal info (shared) ...guildValues, // Guild-specific info (overrides if same keys exist) + national_id: values?.national_id, }; return prepareSubmitData( combinedValues, @@ -117,7 +122,7 @@ export const CreateGuilds = ({ guild, updateTable }) => { hasInquiry ); }); - + console.log(guildsDataArray); dispatch(updateGuildByNationalIdNewService(guildsDataArray)).then( (result) => { if (result.payload.error) { @@ -151,12 +156,78 @@ export const CreateGuilds = ({ guild, updateTable }) => { dispatch(provinceGetTypeActivity()).then((r) => { setTypeActivities(r.payload.data || []); }); + // Fetch provinces for province/city selection + dispatch(cityGetProvinces()).then((r) => { + if (r?.payload?.data) { + setProvinces(r.payload.data); + } + }); }, []); useEffect(() => { + // Initialize Formik's guilds array if we have initial guild data + if (guild && guildsList.length > 0) { + const guildsForFormik = guildsList.map((guildItem) => { + const combinedGuild = { + ...guildItem, + user: guild?.user || {}, + }; + const initialValues = getInitialValues(combinedGuild); + return { + steward: initialValues.steward || false, + guild: initialValues.guild || false, + }; + }); + formik.setFieldValue("guilds", guildsForFormik, false).then(() => { + formik.validateField("guilds"); + }); + } formik.validateForm(); }, []); + // Set province ID from state name when provinces are loaded + useEffect(() => { + if ( + formik.values.state && + provinces.length > 0 && + !formik.values.province + ) { + const province = provinces.find((p) => p.name === formik.values.state); + if (province) { + formik.setFieldValue("province", province.key); + } + } + }, [provinces, formik.values.state, formik.values.province]); + + // Fetch cities when province is selected + useEffect(() => { + if (formik.values.province) { + dispatch(cityGetCity(formik.values.province)).then((r) => { + if (r?.payload?.data) { + setProvinceCities(r.payload.data); + } + }); + } else { + setProvinceCities([]); + } + }, [formik.values.province, dispatch]); + + // Set city ID from person_city name when provinceCities are loaded + useEffect(() => { + if ( + formik.values.person_city && + !formik.values.city && + provinceCities.length > 0 + ) { + const city = provinceCities.find( + (c) => c.name === formik.values.person_city + ); + if (city) { + formik.setFieldValue("city", city.key); + } + } + }, [provinceCities, formik.values.person_city, formik.values.city]); + const mapResponseToFormFields = useCallback( (responseData) => { const guildsData = Array.isArray(responseData.guilds) @@ -187,10 +258,34 @@ export const CreateGuilds = ({ guild, updateTable }) => { return getInitialValues(combinedGuild); }); setGuildsFormValues(initialGuildValues); + + // Update Formik's guilds array for validation + const guildsForFormik = guildsData.map((guildItem) => ({ + steward: + typeof guildItem?.steward === "boolean" + ? guildItem.steward + : typeof guildItem?.isSteward === "boolean" + ? guildItem.isSteward + : false, + guild: + typeof guildItem?.guild === "boolean" + ? guildItem.guild + : typeof guildItem?.isGuild === "boolean" + ? guildItem.isGuild + : false, + })); + formik.setFieldValue("guilds", guildsForFormik, true).then(() => { + formik.validateField("guilds"); + }); + setExpandedAccordion(0); } else { setGuildsList([]); setGuildsFormValues([]); + + formik.setFieldValue("guilds", [], true).then(() => { + formik.validateField("guilds"); + }); } setTimeout(() => { @@ -333,6 +428,19 @@ export const CreateGuilds = ({ guild, updateTable }) => { const newIndex = guildsList.length; setGuildsList([...guildsList, null]); setGuildsFormValues([...guildsFormValues, getInitialValues(null)]); + + // Add to Formik's guilds array for validation + const currentGuilds = formik.values.guilds || []; + formik + .setFieldValue( + "guilds", + [...currentGuilds, { steward: false, guild: false }], + true + ) + .then(() => { + formik.validateField("guilds"); + }); + setExpandedAccordion(newIndex); }; @@ -346,6 +454,19 @@ export const CreateGuilds = ({ guild, updateTable }) => { if (guildsList.length > 1) { setGuildsList(guildsList.filter((_, i) => i !== index)); setGuildsFormValues(guildsFormValues.filter((_, i) => i !== index)); + + // Remove from Formik's guilds array + const currentGuilds = formik.values.guilds || []; + formik + .setFieldValue( + "guilds", + currentGuilds.filter((_, i) => i !== index), + true + ) + .then(() => { + formik.validateField("guilds"); + }); + if (expandedAccordion === index) { setExpandedAccordion(0); } else if (expandedAccordion > index) { @@ -386,6 +507,19 @@ export const CreateGuilds = ({ guild, updateTable }) => { setGuildsFormValues( guildsFormValues.filter((_, i) => i !== deleteDialogIndex) ); + + // Remove from Formik's guilds array + const currentGuilds = formik.values.guilds || []; + formik + .setFieldValue( + "guilds", + currentGuilds.filter((_, i) => i !== deleteDialogIndex), + true + ) + .then(() => { + formik.validateField("guilds"); + }); + // If deleted accordion was expanded, expand the first one if (expandedAccordion === deleteDialogIndex) { setExpandedAccordion(0); @@ -408,19 +542,38 @@ export const CreateGuilds = ({ guild, updateTable }) => { } }; - const handleGuildValuesChange = useCallback((index, fieldName, value) => { - setGuildsFormValues((prev) => { - const newValues = [...prev]; - if (!newValues[index]) { - newValues[index] = getInitialValues(null); + const handleGuildValuesChange = useCallback( + (index, fieldName, value) => { + setGuildsFormValues((prev) => { + const newValues = [...prev]; + if (!newValues[index]) { + newValues[index] = getInitialValues(null); + } + newValues[index] = { + ...newValues[index], + [fieldName]: value, + }; + return newValues; + }); + + // Sync with Formik's guilds array for steward and guild fields + if (fieldName === "steward" || fieldName === "guild") { + const currentGuilds = formik.values.guilds || []; + const updatedGuilds = [...currentGuilds]; + if (!updatedGuilds[index]) { + updatedGuilds[index] = { steward: false, guild: false }; + } + updatedGuilds[index] = { + ...updatedGuilds[index], + [fieldName]: value, + }; + formik.setFieldValue("guilds", updatedGuilds, true).then(() => { + formik.validateField("guilds"); + }); } - newValues[index] = { - ...newValues[index], - [fieldName]: value, - }; - return newValues; - }); - }, []); + }, + [formik] + ); const handleAccordionChange = (index) => (event, isExpanded) => { setExpandedAccordion(isExpanded ? index : false); @@ -438,6 +591,8 @@ export const CreateGuilds = ({ guild, updateTable }) => { const shouldShowInquiryForm = !guild && !isInquiryDone; const shouldShowFormContent = guild || isInquiryDone; + console.log(formik.errors); + return (