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

feat: add form validation for keamanan 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: judul, deskripsi, lokasi, tanggal, status, kronologi, penanganan, link video, and image uploads
- Edit pages allow existing images, create pages require new uploads

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
nico
2026-02-18 11:22:30 +08:00
parent d43b07c2ef
commit aa354992e7
16 changed files with 256 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx
View File

@@ -53,6 +53,21 @@ function EditKeamananLingkungan() {
imageUrl: "",
});
// 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.name?.trim() !== '' &&
!isHtmlEmpty(formData.deskripsi)
);
};
// Load data sekali pas mount
useEffect(() => {
const loadData = async () => {
@@ -294,8 +309,11 @@ function EditKeamananLingkungan() {
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)',
}}

21
src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx
View File

@@ -35,6 +35,22 @@ function CreateKeamananLingkungan() {
const router = useRouter();
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 (
keamananState.create.form.name?.trim() !== '' &&
!isHtmlEmpty(keamananState.create.form.deskripsi) &&
file !== null
);
};
const resetForm = () => {
keamananState.create.form = {
name: '',
@@ -237,8 +253,11 @@ function CreateKeamananLingkungan() {
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)',
}}

14
src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx
View File

@@ -39,6 +39,15 @@ function EditKontakItem() {
icon: '',
});
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
formData.nomorTelepon?.trim() !== '' &&
formData.icon?.trim() !== ''
);
};
// Load data sekali dari global state
useEffect(() => {
const loadKontakDarurat = async () => {
@@ -170,8 +179,11 @@ function EditKontakItem() {
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)',
}}

15
src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx
View File

@@ -23,6 +23,16 @@ function CreateKontakItem() {
const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
kontakState.create.form.nama?.trim() !== '' &&
kontakState.create.form.nomorTelepon?.trim() !== '' &&
kontakState.create.form.icon?.trim() !== ''
);
};
const resetForm = () => {
kontakState.create.form = {
nama: '',
@@ -115,8 +125,11 @@ function CreateKontakItem() {
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)',
}}

13
src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx
View File

@@ -46,6 +46,14 @@ export default function EditKontakDaruratKeamanan() {
kategoriId: [],
});
// Check if form is valid
const isFormValid = () => {
return (
formData.name?.trim() !== '' &&
formData.kategoriId.length > 0
);
};
// 🔁 Load data saat ID berubah
useEffect(() => {
const loadInitialData = async () => {
@@ -213,8 +221,11 @@ export default function EditKontakDaruratKeamanan() {
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)',
}}

13
src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/create/page.tsx
View File

@@ -26,6 +26,14 @@ function CreateKontakDaruratKeamanan() {
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
kontakState.create.form.nama?.trim() !== '' &&
kontakState.create.form.icon?.trim() !== ''
);
};
useShallowEffect(() => {
kontakDarurat.kontakDaruratItem.findMany.load();
}, []);
@@ -127,8 +135,11 @@ function CreateKontakDaruratKeamanan() {
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)/keamanan/laporan-publik/[id]/edit/page.tsx
View File

@@ -55,6 +55,25 @@ function EditLaporanPublik() {
kronologi: '',
});
// 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.judul?.trim() !== '' &&
formData.lokasi?.trim() !== '' &&
formData.tanggalWaktu?.trim() !== '' &&
formData.status?.trim() !== '' &&
!isHtmlEmpty(formData.kronologi) &&
!isHtmlEmpty(formData.penanganan)
);
};
useEffect(() => {
const loadLaporanPublik = async () => {
const id = params?.id as string;
@@ -223,8 +242,11 @@ function EditLaporanPublik() {
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)',
}}

15
src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx
View File

@@ -26,6 +26,16 @@ function CreateLaporanPublik() {
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
stateLaporan.create.form.judul?.trim() !== '' &&
stateLaporan.create.form.lokasi?.trim() !== '' &&
stateLaporan.create.form.tanggalWaktu?.trim() !== '' &&
stateLaporan.create.form.kronologi?.trim() !== ''
);
};
const resetForm = () => {
stateLaporan.create.form = {
judul: '',
@@ -123,8 +133,11 @@ function CreateLaporanPublik() {
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)',
}}

22
src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx
View File

@@ -41,6 +41,23 @@ function EditPencegahanKriminalitas() {
linkVideo: '',
});
// 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.judul?.trim() !== '' &&
!isHtmlEmpty(formData.deskripsiSingkat) &&
!isHtmlEmpty(formData.deskripsi) &&
convertYoutubeUrlToEmbed(formData.linkVideo) !== ''
);
};
// load data hanya sekali pas id berubah
useEffect(() => {
const loadKriminalitas = async () => {
@@ -220,8 +237,11 @@ function EditPencegahanKriminalitas() {
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)',
}}

22
src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx
View File

@@ -28,6 +28,23 @@ function CreatePencegahanKriminalitas() {
const embedLink = convertYoutubeUrlToEmbed(link);
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 (
kriminalitasState.create.form.judul?.trim() !== '' &&
!isHtmlEmpty(kriminalitasState.create.form.deskripsiSingkat) &&
!isHtmlEmpty(kriminalitasState.create.form.deskripsi) &&
embedLink !== ''
);
};
const resetForm = () => {
kriminalitasState.create.form = {
judul: "",
@@ -165,8 +182,11 @@ function CreatePencegahanKriminalitas() {
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)',
}}

16
src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/[id]/edit/page.tsx
View File

@@ -67,6 +67,17 @@ function EditPolsekTerdekat() {
layananPolsekId: []
});
// Check if form is valid
const isFormValid = () => {
return (
formData.nama?.trim() !== '' &&
formData.jarakKeDesa?.trim() !== '' &&
formData.alamat?.trim() !== '' &&
formData.nomorTelepon?.trim() !== '' &&
formData.layananPolsekId.length > 0
);
};
useEffect(() => {
statePolsekTerdekat.layananPolsek.findManyAll.load();
}, []);
@@ -261,8 +272,11 @@ function EditPolsekTerdekat() {
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)',
}}

16
src/app/admin/(dashboard)/keamanan/polsek-terdekat/daftar-polsek-terdekat/create/page.tsx
View File

@@ -24,6 +24,17 @@ function CreatePolsekTerdekat() {
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return (
polsekState.create.form.nama?.trim() !== '' &&
polsekState.create.form.jarakKeDesa?.trim() !== '' &&
polsekState.create.form.alamat?.trim() !== '' &&
polsekState.create.form.nomorTelepon?.trim() !== '' &&
polsekState.create.form.layananPolsekId.length > 0
);
};
useEffect(() => {
statePolsekTerdekat.layananPolsek.findManyAll.load();
}, []);
@@ -219,8 +230,11 @@ function CreatePolsekTerdekat() {
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)',
}}

10
src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/[id]/page.tsx
View File

@@ -33,6 +33,11 @@ function EditLayananPolsek() {
nama: '',
});
// Check if form is valid
const isFormValid = () => {
return formData.nama?.trim() !== '';
};
useEffect(() => {
const loadLayananPolsek = async () => {
const id = params?.id as string;
@@ -143,8 +148,11 @@ function EditLayananPolsek() {
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)',
}}

10
src/app/admin/(dashboard)/keamanan/polsek-terdekat/layanan-polsek/create/page.tsx
View File

@@ -22,6 +22,11 @@ function CreateLayananPolsek() {
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
// Check if form is valid
const isFormValid = () => {
return createState.create.form.nama?.trim() !== '';
};
const resetForm = () => {
createState.create.form = {
nama: '',
@@ -93,8 +98,11 @@ function CreateLayananPolsek() {
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)',
}}

20
src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx
View File

@@ -52,6 +52,21 @@ function EditTipsKeamanan() {
imageUrl: "",
});
// 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.judul?.trim() !== '' &&
!isHtmlEmpty(formData.deskripsi)
);
};
// Load data saat pertama kali
useEffect(() => {
const loadData = async () => {
@@ -295,8 +310,11 @@ function EditTipsKeamanan() {
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)',
}}

21
src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx
View File

@@ -30,6 +30,22 @@ function CreateKeamananLingkungan() {
const router = useRouter();
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 (
stateKeamanan.create.form.judul?.trim() !== '' &&
!isHtmlEmpty(stateKeamanan.create.form.deskripsi) &&
file !== null
);
};
const resetForm = () => {
stateKeamanan.create.form = {
judul: '',
@@ -199,8 +215,11 @@ function CreateKeamananLingkungan() {
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)',
}}