fixed form for create guilds basiclly

This commit is contained in:
2026-01-26 15:22:33 +03:30
parent eed6904646
commit 66d71c9c25
12 changed files with 536 additions and 123 deletions

View File

@@ -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}
/>