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

feat: add form validation and disable submit buttons when fields are empty

Browse Source 
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
nico
2026-02-11 17:04:55 +08:00
parent b69df2454e
commit b35874b120
36 changed files with 1287 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/admin/(dashboard)/landing-page/SDGs/[id]/edit/page.tsx
View File

@@ -37,6 +37,15 @@ export default function EditKolaborasiInovasi() {
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
formData.jumlah?.trim() !== '' &&
(formData.imageId?.trim() !== '' || file !== null)
);
};
const [originalData, setOriginalData] = useState({
name: "",
jumlah: "",
@@ -252,8 +261,11 @@ export default function EditKolaborasiInovasi() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

13
src/app/admin/(dashboard)/landing-page/SDGs/create/page.tsx
View File

@@ -19,6 +19,14 @@ function CreateSDGsDesa() {
const [file, setFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
stateSDGSDesa.create.form.name?.trim() !== '' &&
stateSDGSDesa.create.form.jumlah?.trim() !== '' &&
file !== null
);
};
useEffect(() => {
stateSDGSDesa.findMany.load();
@@ -203,8 +211,11 @@ function CreateSDGsDesa() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/landing-page/apbdes/[id]/edit/page.tsx
View File

@@ -53,6 +53,14 @@ function EditAPBDes() {
const params = useParams();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
apbdesState.edit.form.items.length > 0
);
};
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [previewDoc, setPreviewDoc] = useState<string | null>(null);
const [imageFile, setImageFile] = useState<File | null>(null);
@@ -492,9 +500,11 @@ function EditAPBDes() {
<Button
onClick={handleSubmit}
radius="md"
disabled={apbdesState.edit.form.items.length === 0 || apbdesState.edit.loading}
disabled={!isFormValid() || isSubmitting || apbdesState.edit.loading}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting || apbdesState.edit.loading
? 'linear-gradient(135deg, #cccccc, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
}}
>

15
src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx
View File

@@ -47,6 +47,15 @@ function CreateAPBDes() {
const [docFile, setDocFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
imageFile !== null &&
docFile !== null &&
stateAPBDes.create.form.items.length > 0
);
};
// Form sementara untuk input item baru
const [newItem, setNewItem] = useState<ItemForm>({
kode: '',
@@ -468,9 +477,11 @@ function CreateAPBDes() {
<Button
onClick={handleSubmit}
radius="md"
disabled={stateAPBDes.create.form.items.length === 0}
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? 'linear-gradient(135deg, #cccccc, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
}}
>

11
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/[id]/page.tsx
View File

@@ -25,6 +25,11 @@ export default function EditKategoriDesaAntiKorupsi() {
const [originalData, setOriginalData] = useState({ name: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return formData.name?.trim() !== '';
};
// 📥 load data saat pertama kali dibuka
useEffect(() => {
if (!id) return;
@@ -126,9 +131,11 @@ export default function EditKategoriDesaAntiKorupsi() {
onClick={handleSubmit}
radius="md"
size="md"
disabled={isSubmitting}
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? 'linear-gradient(135deg, #cccccc, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

10
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create/page.tsx
View File

@@ -14,6 +14,11 @@ export default function CreateKategoriDesaAntiKorupsi() {
const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return stateKategori.create.form.name?.trim() !== '';
};
useEffect(() => {
stateKategori.findMany.load();
}, []);
@@ -87,8 +92,11 @@ export default function CreateKategoriDesaAntiKorupsi() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/edit/page.tsx
View File

@@ -36,6 +36,15 @@ export default function EditDesaAntiKorupsi() {
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
formData.kategoriId?.trim() !== '' &&
(formData.fileId?.trim() !== '' || file !== null)
);
};
const [originalData, setOriginalData] = useState({
name: "",
deskripsi: "",
@@ -287,8 +296,11 @@ export default function EditDesaAntiKorupsi() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create/page.tsx
View File

@@ -31,6 +31,15 @@ export default function CreateDesaAntiKorupsi() {
const [file, setFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
file !== null &&
stateKorupsi.create.form.name?.trim() !== '' &&
stateKorupsi.create.form.kategoriId?.trim() !== ''
);
};
useEffect(() => {
stateKorupsi.findMany.load();
korupsiState.kategoriDesaAntiKorupsi.findMany.load();
@@ -238,8 +247,11 @@ export default function CreateDesaAntiKorupsi() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

10
src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/[id]/page.tsx
View File

@@ -21,6 +21,11 @@ function EditKategoriPrestasi() {
const [resetData, setResetData] = useState({ name: '' });
const [loading, setLoading] = useState(false);
// Check if form is valid
const isFormValid = () => {
return formData.name?.trim() !== '';
};
// Load data kategori prestasi saat component mount
useEffect(() => {
if (!id) return;
@@ -123,8 +128,11 @@ function EditKategoriPrestasi() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

10
src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/create/page.tsx
View File

@@ -15,6 +15,11 @@ function CreateKategoriPrestasi() {
const stateKategori = useProxy(prestasiState.kategoriPrestasi)
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return stateKategori.create.form.name?.trim() !== '';
};
useEffect(() => {
stateKategori.findMany.load();
}, []);
@@ -84,8 +89,11 @@ function CreateKategoriPrestasi() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/[id]/edit/page.tsx
View File

@@ -31,6 +31,15 @@ export default function EditPrestasiDesa() {
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
formData.kategoriId?.trim() !== '' &&
(formData.imageId?.trim() !== '' || file !== null)
);
};
const [originalData, setOriginalData] = useState({
name: "",
deskripsi: "",
@@ -253,8 +262,11 @@ export default function EditPrestasiDesa() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

13
src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/create/page.tsx
View File

@@ -21,6 +21,14 @@ function CreatePrestasiDesa() {
const [file, setFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
file !== null &&
snapPrestasi.create.form.name?.trim() !== '' &&
snapPrestasi.create.form.kategoriId?.trim() !== ''
);
};
useEffect(() => {
prestasi.findMany.load();
@@ -226,8 +234,11 @@ function CreatePrestasiDesa() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

14
src/app/admin/(dashboard)/landing-page/profil/media-sosial/[id]/edit/page.tsx
View File

@@ -70,6 +70,15 @@ function EditMediaSosial() {
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
const isNameValid = formData.name?.trim() !== '';
const isIconUrlValid = formData.iconUrl?.trim() !== '';
const isCustomIconValid = selectedSosmed !== 'custom' || file !== null;
return isNameValid && isIconUrlValid && isCustomIconValid;
};
const [originalData, setOriginalData] = useState({
name: '',
icon: '',
@@ -340,8 +349,11 @@ function EditMediaSosial() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

31
src/app/admin/(dashboard)/landing-page/profil/media-sosial/create/page.tsx
View File

@@ -24,6 +24,7 @@ import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
import profileLandingPageState from '../../../../_state/landing-page/profile';
import SelectSosialMedia from '@/app/admin/(dashboard)/_com/selectSocialMedia';
import { sosmedMap } from '@/app/admin/(dashboard)/landing-page/profil/_lib/sosmed';
// ⭐ Tambah type SosmedKey
type SosmedKey =
@@ -38,20 +39,6 @@ type SosmedKey =
| 'telephone'
| 'custom';
// ⭐ mapping icon sosmed bawaan
const sosmedMap: Record<SosmedKey, { label: string; src: string | null }> = {
facebook: { label: 'Facebook', src: '/assets/images/sosmed/facebook.png' },
instagram: { label: 'Instagram', src: '/assets/images/sosmed/instagram.png' },
tiktok: { label: 'Tiktok', src: '/assets/images/sosmed/tiktok.png' },
youtube: { label: 'YouTube', src: '/assets/images/sosmed/youtube.png' },
whatsapp: { label: 'WhatsApp', src: '/assets/images/sosmed/whatsapp.png' },
gmail: { label: 'Gmail', src: '/assets/images/sosmed/gmail.png' },
telegram: { label: 'Telegram', src: '/assets/images/sosmed/telegram.png' },
x: { label: 'X (Twitter)', src: '/assets/images/sosmed/x-twitter.png' },
telephone: { label: 'Telephone', src: '/assets/images/sosmed/telephone-call.png' },
custom: { label: 'Custom Icon', src: null },
};
export default function CreateMediaSosial() {
const router = useRouter();
const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial);
@@ -61,6 +48,15 @@ export default function CreateMediaSosial() {
const [file, setFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
const isNameValid = stateMediaSosial.create.form.name?.trim() !== '';
const isIconUrlValid = stateMediaSosial.create.form.iconUrl?.trim() !== '';
const isCustomIconValid = selectedSosmed !== 'custom' || file !== null;
return isNameValid && isIconUrlValid && isCustomIconValid;
};
useEffect(() => {
stateMediaSosial.findMany.load();
}, []);
@@ -85,7 +81,7 @@ export default function CreateMediaSosial() {
// ──────────────── ⭐ CASE 1: PAKAI ICON DEFAULT ────────────────
if (selectedSosmed !== 'custom') {
stateMediaSosial.create.form.imageId = null;
stateMediaSosial.create.form.icon = sosmedMap[selectedSosmed].src!;
stateMediaSosial.create.form.icon = selectedSosmed; // Store the key, not the path
await stateMediaSosial.create.create();
resetForm();
@@ -261,8 +257,11 @@ export default function CreateMediaSosial() {
<Button
radius="md"
onClick={handleSubmit}
disabled={!isFormValid() || isSubmitting}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting
? 'linear-gradient(135deg, #cccccc, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

15
src/app/admin/(dashboard)/landing-page/profil/pejabat-desa/[id]/page.tsx
View File

@@ -40,6 +40,15 @@ function EditPejabatDesa() {
const [file, setFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
formData.position?.trim() !== '' &&
(formData.imageId?.trim() !== '' || file !== null)
);
};
// Load data on mount
useEffect(() => {
const loadData = async () => {
@@ -327,11 +336,13 @@ function EditPejabatDesa() {
<Button
onClick={handleSubmit}
loading={isSubmitting || allState.edit.loading}
disabled={!formData.name}
disabled={!isFormValid() || isSubmitting || allState.edit.loading}
radius="md"
size="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
background: !isFormValid() || isSubmitting || allState.edit.loading
? 'linear-gradient(135deg, #cccccc, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

15
src/app/admin/(dashboard)/landing-page/profil/program-inovasi/[id]/edit/page.tsx
View File

@@ -39,6 +39,16 @@ function EditProgramInovasi() {
})
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
formData.description?.trim() !== '' &&
formData.link?.trim() !== '' &&
(formData.imageId?.trim() !== '' || file !== null)
);
};
const [originalData, setOriginalData] = useState({
name: "",
description: "",
@@ -271,8 +281,11 @@ function EditProgramInovasi() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}

15
src/app/admin/(dashboard)/landing-page/profil/program-inovasi/create/page.tsx
View File

@@ -31,6 +31,16 @@ function CreateProgramInovasi() {
const [file, setFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
stateProgramInovasi.create.form.name?.trim() !== '' &&
stateProgramInovasi.create.form.description?.trim() !== '' &&
stateProgramInovasi.create.form.link?.trim() !== '' &&
file !== null
);
};
useEffect(() => {
stateProgramInovasi.findMany.load();
}, []);
@@ -221,8 +231,11 @@ function CreateProgramInovasi() {
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, #999999)'
: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}