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

upd: tema

Browse Source 
Deskripsi:
- validasi form tema

No Issues
This commit is contained in:
amel
2024-09-30 12:19:03 +08:00
parent dd4a63d9b5
commit 6709ccd229
2 changed files with 121 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/module/color_palette/ui/create_palette_color.tsx
View File

@@ -7,6 +7,7 @@ import { funCreateTheme } from '../lib/api_theme';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import LayoutModal from '@/module/_global/layout/layout_modal'; import LayoutModal from '@/module/_global/layout/layout_modal';
import _ from 'lodash';
export default function CreatePaletteColor() { export default function CreatePaletteColor() {
const [isValModal, setValModal] = useState(false); const [isValModal, setValModal] = useState(false);
@@ -61,7 +62,6 @@ export default function CreatePaletteColor() {
} }
function onValidation(kategori: string, val: string) { function onValidation(kategori: string, val: string) {
console.log('ini',val)
if (kategori == 'name') { if (kategori == 'name') {
setWarna({ ...isWarna, name: val }) setWarna({ ...isWarna, name: val })
if (val === "") { if (val === "") {
@@ -71,47 +71,47 @@ export default function CreatePaletteColor() {
} }
} else if (kategori == 'utama') { } else if (kategori == 'utama') {
setWarna({ ...isWarna, utama: val }) setWarna({ ...isWarna, utama: val })
if (val === "") { if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, utama: true }) setTouched({ ...touched, utama: true })
} else { } else {
setTouched({ ...touched, utama: false }) setTouched({ ...touched, utama: false })
} }
} else if (kategori == 'bgUtama') { } else if (kategori == 'bgUtama') {
setWarna({ ...isWarna, bgUtama: val }) setWarna({ ...isWarna, bgUtama: val })
if (val === "") { if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgUtama: true }) setTouched({ ...touched, bgUtama: true })
} else { } else {
setTouched({ ...touched, bgUtama: false }) setTouched({ ...touched, bgUtama: false })
} }
} else if (kategori == 'bgIcon') { } else if (kategori == 'bgIcon') {
setWarna({ ...isWarna, bgIcon: val }) setWarna({ ...isWarna, bgIcon: val })
if (val === "") { if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgIcon: true }) setTouched({ ...touched, bgIcon: true })
} else { } else {
setTouched({ ...touched, bgIcon: false }) setTouched({ ...touched, bgIcon: false })
} }
} else if (kategori == 'bgFiturHome') { } else if (kategori == 'bgFiturHome') {
setWarna({ ...isWarna, bgFiturHome: val }) setWarna({ ...isWarna, bgFiturHome: val })
if (val === "") { if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgFiturHome: true }) setTouched({ ...touched, bgFiturHome: true })
} else { } else {
setTouched({ ...touched, bgFiturHome: false }) setTouched({ ...touched, bgFiturHome: false })
} }
} else if (kategori == 'bgFiturDivision') { } else if (kategori == 'bgFiturDivision') {
setWarna({ ...isWarna, bgFiturDivision: val }) setWarna({ ...isWarna, bgFiturDivision: val })
if (val === "") { if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgFiturDivision: true }) setTouched({ ...touched, bgFiturDivision: true })
} else { } else {
setTouched({ ...touched, bgFiturDivision: false }) setTouched({ ...touched, bgFiturDivision: false })
} }
} else if (kategori == 'bgTotalKegiatan') { } else if (kategori == 'bgTotalKegiatan') {
setWarna({ ...isWarna, bgTotalKegiatan: val }) setWarna({ ...isWarna, bgTotalKegiatan: val })
if (val === "") { if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgTotalKegiatan: true }) setTouched({ ...touched, bgTotalKegiatan: true })
} else { } else {
setTouched({ ...touched, bgTotalKegiatan: false }) setTouched({ ...touched, bgTotalKegiatan: false })
} }
} }
} }
return ( return (
@@ -127,7 +127,7 @@ export default function CreatePaletteColor() {
radius="md" radius="md"
onChange={ onChange={
(e) => { (e) => {
onValidation('name', e.target.value) onValidation('name', e.target.value)
} }
} }
error={ error={
@@ -144,12 +144,13 @@ export default function CreatePaletteColor() {
radius="md" radius="md"
onChange={ onChange={
(e) => { (e) => {
onValidation('utama', e) onValidation('utama', e)
} }
} }
error={ error={
touched.utama && ( touched.utama && (
isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" :
isWarna.utama.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null
) )
} }
/> />
@@ -161,12 +162,13 @@ export default function CreatePaletteColor() {
radius="md" radius="md"
onChange={ onChange={
(e) => { (e) => {
onValidation('bgUtama', e) onValidation('bgUtama', e)
} }
} }
error={ error={
touched.bgUtama && ( touched.bgUtama && (
isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" :
isWarna.bgUtama.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null
) )
} }
/> />
@@ -178,12 +180,13 @@ export default function CreatePaletteColor() {
radius="md" radius="md"
onChange={ onChange={
(e) => { (e) => {
onValidation('bgIcon', e) onValidation('bgIcon', e)
} }
} }
error={ error={
touched.bgIcon && ( touched.bgIcon && (
isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" :
isWarna.bgIcon.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null
) )
} }
/> />
@@ -195,12 +198,13 @@ export default function CreatePaletteColor() {
radius="md" radius="md"
onChange={ onChange={
(e) => { (e) => {
onValidation('bgFiturHome', e) onValidation('bgFiturHome', e)
} }
} }
error={ error={
touched.bgFiturHome && ( touched.bgFiturHome && (
isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" :
isWarna.bgFiturHome.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null
) )
} }
/> />
@@ -212,12 +216,13 @@ export default function CreatePaletteColor() {
radius="md" radius="md"
onChange={ onChange={
(e) => { (e) => {
onValidation('bgFiturDivision', e) onValidation('bgFiturDivision', e)
} }
} }
error={ error={
touched.bgFiturDivision && ( touched.bgFiturDivision && (
isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" :
isWarna.bgFiturDivision.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null
) )
} }
/> />
@@ -229,12 +234,13 @@ export default function CreatePaletteColor() {
radius="md" radius="md"
onChange={ onChange={
(e) => { (e) => {
onValidation('bgTotalKegiatan', e) onValidation('bgTotalKegiatan', e)
} }
} }
error={ error={
touched.bgTotalKegiatan && ( touched.bgTotalKegiatan && (
isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" :
isWarna.bgTotalKegiatan.substring(0, 1) != "#" ? "Kode Warna Tidak Valid" : null
) )
} }
/> />

126
src/module/color_palette/ui/edit_palette_color.tsx
View File

@@ -49,7 +49,7 @@ export default function EditPaletteColor() {
setLoading(false) setLoading(false)
} catch (error) { } catch (error) {
console.error(error) console.error(error)
toast.error("Gagal menambahkan tema, coba lagi nanti"); toast.error("Gagal mendapatkan data, coba lagi nanti");
} finally { } finally {
setLoading(false) setLoading(false)
} }
@@ -75,6 +75,65 @@ export default function EditPaletteColor() {
} }
} }
function onCheck() {
if (Object.values(touched).some((v) => v == true))
return false
setModal(true)
}
function onValidation(kategori: string, val: string) {
if (kategori == 'name') {
setWarna({ ...isWarna, name: val })
if (val === "") {
setTouched({ ...touched, name: true })
} else {
setTouched({ ...touched, name: false })
}
} else if (kategori == 'utama') {
setWarna({ ...isWarna, utama: val })
if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, utama: true })
} else {
setTouched({ ...touched, utama: false })
}
} else if (kategori == 'bgUtama') {
setWarna({ ...isWarna, bgUtama: val })
if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgUtama: true })
} else {
setTouched({ ...touched, bgUtama: false })
}
} else if (kategori == 'bgIcon') {
setWarna({ ...isWarna, bgIcon: val })
if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgIcon: true })
} else {
setTouched({ ...touched, bgIcon: false })
}
} else if (kategori == 'bgFiturHome') {
setWarna({ ...isWarna, bgFiturHome: val })
if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgFiturHome: true })
} else {
setTouched({ ...touched, bgFiturHome: false })
}
} else if (kategori == 'bgFiturDivision') {
setWarna({ ...isWarna, bgFiturDivision: val })
if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgFiturDivision: true })
} else {
setTouched({ ...touched, bgFiturDivision: false })
}
} else if (kategori == 'bgTotalKegiatan') {
setWarna({ ...isWarna, bgTotalKegiatan: val })
if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgTotalKegiatan: true })
} else {
setTouched({ ...touched, bgTotalKegiatan: false })
}
}
}
return ( return (
<Box> <Box>
@@ -102,8 +161,7 @@ export default function EditPaletteColor() {
value={isWarna.name} value={isWarna.name}
onChange={ onChange={
(e) => { (e) => {
setWarna({ ...isWarna, name: e.target.value }) onValidation('name', e.target.value)
setTouched({ ...touched, name: true })
} }
} }
error={ error={
@@ -119,15 +177,15 @@ export default function EditPaletteColor() {
size="md" size="md"
radius="md" radius="md"
value={isWarna.utama} value={isWarna.utama}
onChangeEnd={ onChange={
(color) => { (e) => {
setWarna({ ...isWarna, utama: color }) onValidation('utama', e)
setTouched({ ...touched, utama: true })
} }
} }
error={ error={
touched.utama && ( touched.utama && (
isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" : null isWarna.utama == "" ? "Warna Utama Tidak Boleh Kosong" :
isWarna.utama.substring(0, 1) !== '#' ? "Kode Warna Tidak Valid" : null
) )
} }
/> />
@@ -138,15 +196,15 @@ export default function EditPaletteColor() {
size="md" size="md"
radius="md" radius="md"
value={isWarna.bgUtama} value={isWarna.bgUtama}
onChangeEnd={ onChange={
(color) => { (e) => {
setWarna({ ...isWarna, bgUtama: color }) onValidation('bgUtama', e)
setTouched({ ...touched, bgUtama: true })
} }
} }
error={ error={
touched.bgUtama && ( touched.bgUtama && (
isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" : null isWarna.bgUtama == "" ? "Background Utama Tidak Boleh Kosong" :
isWarna.bgUtama.substring(0, 1) !== '#' ? "Kode Warna Tidak Valid" : null
) )
} }
/> />
@@ -157,15 +215,15 @@ export default function EditPaletteColor() {
size="md" size="md"
radius="md" radius="md"
value={isWarna.bgIcon} value={isWarna.bgIcon}
onChangeEnd={ onChange={
(color) => { (e) => {
setWarna({ ...isWarna, bgIcon: color }) onValidation('bgIcon', e)
setTouched({ ...touched, bgIcon: true })
} }
} }
error={ error={
touched.bgIcon && ( touched.bgIcon && (
isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" : null isWarna.bgIcon == "" ? "Background Icon Tidak Boleh Kosong" :
isWarna.bgIcon.substring(0, 1) !== '#' ? "Kode Warna Tidak Valid" : null
) )
} }
/> />
@@ -176,15 +234,15 @@ export default function EditPaletteColor() {
size="md" size="md"
radius="md" radius="md"
value={isWarna.bgFiturHome} value={isWarna.bgFiturHome}
onChangeEnd={ onChange={
(color) => { (e) => {
setWarna({ ...isWarna, bgFiturHome: color }) onValidation('bgFiturHome', e)
setTouched({ ...touched, bgFiturHome: true })
} }
} }
error={ error={
touched.bgFiturHome && ( touched.bgFiturHome && (
isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" : null isWarna.bgFiturHome == "" ? "Background Fitur Home Tidak Boleh Kosong" :
isWarna.bgFiturHome.substring(0, 1) !== '#' ? "Kode Warna Tidak Valid" : null
) )
} }
/> />
@@ -195,15 +253,15 @@ export default function EditPaletteColor() {
size="md" size="md"
radius="md" radius="md"
value={isWarna.bgFiturDivision} value={isWarna.bgFiturDivision}
onChangeEnd={ onChange={
(color) => { (e) => {
setWarna({ ...isWarna, bgFiturDivision: color }) onValidation('bgFiturDivision', e)
setTouched({ ...touched, bgFiturDivision: true })
} }
} }
error={ error={
touched.bgFiturDivision && ( touched.bgFiturDivision && (
isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" : null isWarna.bgFiturDivision == "" ? "Background Fitur Divisi Tidak Boleh Kosong" :
isWarna.bgFiturDivision.substring(0, 1) !== '#' ? "Kode Warna Tidak Valid" : null
) )
} }
/> />
@@ -214,15 +272,15 @@ export default function EditPaletteColor() {
size="md" size="md"
radius="md" radius="md"
value={isWarna.bgTotalKegiatan} value={isWarna.bgTotalKegiatan}
onChangeEnd={ onChange={
(color) => { (e) => {
setWarna({ ...isWarna, bgTotalKegiatan: color }) onValidation('bgTotalKegiatan', e)
setTouched({ ...touched, bgTotalKegiatan: true })
} }
} }
error={ error={
touched.bgTotalKegiatan && ( touched.bgTotalKegiatan && (
isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" : null isWarna.bgTotalKegiatan == "" ? "Background Total Kegiatan Tidak Boleh Kosong" :
isWarna.bgTotalKegiatan.substring(0, 1) !== '#' ? "Kode Warna Tidak Valid" : null
) )
} }
/> />
@@ -314,7 +372,7 @@ export default function EditPaletteColor() {
radius={30} radius={30}
fullWidth fullWidth
onClick={() => { onClick={() => {
setModal(true) onCheck()
}} }}
> >
Simpan Simpan