fixed form for create guilds basiclly
This commit is contained in:
@@ -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 (
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<Grid
|
||||
@@ -483,6 +638,9 @@ export const CreateGuilds = ({ guild, updateTable }) => {
|
||||
isAdmin={isAdmin}
|
||||
isSuperAdmin={isSuperAdmin}
|
||||
isKillHouse={isKillHouse}
|
||||
provinces={provinces}
|
||||
provinceCities={provinceCities}
|
||||
guildsList={guildsList}
|
||||
/>
|
||||
|
||||
<Grid
|
||||
@@ -507,7 +665,10 @@ export const CreateGuilds = ({ guild, updateTable }) => {
|
||||
guildData={guildItem}
|
||||
guildActive={guildActive}
|
||||
isAdmin={isAdmin}
|
||||
cities={cities}
|
||||
isSuperAdmin={isSuperAdmin}
|
||||
cities={
|
||||
provinceCities.length > 0 ? provinceCities : cities
|
||||
}
|
||||
typeActivities={typeActivities}
|
||||
onDelete={() => handleDeleteGuild(index)}
|
||||
canDelete={
|
||||
@@ -561,6 +722,18 @@ export const CreateGuilds = ({ guild, updateTable }) => {
|
||||
!isSuperAdmin &&
|
||||
!isKillHouse
|
||||
}
|
||||
formData={guildsList.map((guildItem, index) => {
|
||||
const guildValues = guildsFormValues[index];
|
||||
const combinedValues = {
|
||||
...guildValues, // Guild-specific info (overrides if same keys exist)
|
||||
};
|
||||
return prepareSubmitData(
|
||||
combinedValues,
|
||||
guildItem,
|
||||
originalPhoneNumber,
|
||||
hasInquiry
|
||||
);
|
||||
})}
|
||||
isKillHouse={isKillHouse}
|
||||
onSubmit={formik.handleSubmit}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user