wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

feat: add form validation for ekonomi module admin pages

Browse Source 
- Added isFormValid() and isHtmlEmpty() helper functions
- Disabled submit buttons when required fields are empty
- Applied consistent validation pattern across all create/edit pages
- Validated fields: nama, deskripsi, tahun, jumlah, value, icon, statistik, and more
- Edit pages allow existing data, create pages require all fields

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
nico
2026-02-18 16:13:20 +08:00
parent aa354992e7
commit 1ddc1d7eac
32 changed files with 523 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/edit/page.tsx
View File

@@ -53,6 +53,24 @@ function EditProgramKemiskinan() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState<FormData>(initialForm);
// Helper function to check if HTML content is empty
const isHtmlEmpty = (html: string) => {
// Remove all HTML tags and check if there's any text content
const textContent = html.replace(/<[^>]*>/g, '').trim();
return textContent === '';
};
// Check if form is valid
const isFormValid = () => {
return (
formData.nama?.trim() !== '' &&
formData.icon?.trim() !== '' &&
!isHtmlEmpty(formData.deskripsi) &&
formData.statistik.jumlah?.trim() !== '' &&
formData.statistik.tahun?.trim() !== ''
);
};
// Load data 1x dari global state → isi local state
useEffect(() => {
if (!id) return;
@@ -235,8 +253,11 @@ function EditProgramKemiskinan() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

24
src/app/admin/(dashboard)/ekonomi/program-kemiskinan/create/page.tsx
View File

@@ -29,6 +29,25 @@ function CreateProgramKemiskinan() {
const [lineChart, setLineChart] = useState<any[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false);
// Helper function to check if HTML content is empty
const isHtmlEmpty = (html: string) => {
// Remove all HTML tags and check if there's any text content
const textContent = html.replace(/<[^>]*>/g, '').trim();
return textContent === '';
};
// Check if form is valid
const isFormValid = () => {
return (
programState.create.form.nama?.trim() !== '' &&
programState.create.form.icon?.trim() !== '' &&
!isHtmlEmpty(programState.create.form.deskripsi) &&
programState.create.form.statistik.jumlah?.trim() !== '' &&
programState.create.form.statistik.tahun?.trim() !== ''
);
};
const resetForm = () => {
programState.create.form = {
nama: '',
@@ -172,8 +191,11 @@ function CreateProgramKemiskinan() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? `linear-gradient(135deg, #cccccc, #eeeeee)`
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}