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 { useRouter } from 'next/navigation';
import LayoutModal from '@/module/_global/layout/layout_modal';
import _ from 'lodash';
export default function CreatePaletteColor() {
const [isValModal, setValModal] = useState(false);
@@ -61,7 +62,6 @@ export default function CreatePaletteColor() {
}
function onValidation(kategori: string, val: string) {
console.log('ini',val)
if (kategori == 'name') {
setWarna({ ...isWarna, name: val })
if (val === "") {
@@ -71,47 +71,47 @@ export default function CreatePaletteColor() {
}
} else if (kategori == 'utama') {
setWarna({ ...isWarna, utama: val })
if (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 === "") {
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 === "") {
if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgIcon: true })
} else {
} else {
setTouched({ ...touched, bgIcon: false })
}
}
} else if (kategori == 'bgFiturHome') {
setWarna({ ...isWarna, bgFiturHome: val })
if (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 === "") {
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 === "") {
if (val === "" || val.substring(0, 1) !== '#') {
setTouched({ ...touched, bgTotalKegiatan: true })
} else {
setTouched({ ...touched, bgTotalKegiatan: false })
}
}
}
}
return (
@@ -127,7 +127,7 @@ export default function CreatePaletteColor() {
radius="md"
onChange={
(e) => {
onValidation('name', e.target.value)
onValidation('name', e.target.value)
}
}
error={
@@ -144,12 +144,13 @@ export default function CreatePaletteColor() {
radius="md"
onChange={
(e) => {
onValidation('utama', e)
onValidation('utama', e)
}
}
error={
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"
onChange={
(e) => {
onValidation('bgUtama', e)
onValidation('bgUtama', e)
}
}
error={
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"
onChange={
(e) => {
onValidation('bgIcon', e)
onValidation('bgIcon', e)
}
}
error={
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"
onChange={
(e) => {
onValidation('bgFiturHome', e)
onValidation('bgFiturHome', e)
}
}
error={
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"
onChange={
(e) => {
onValidation('bgFiturDivision', e)
onValidation('bgFiturDivision', e)
}
}
error={
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"
onChange={
(e) => {
onValidation('bgTotalKegiatan', e)
onValidation('bgTotalKegiatan', e)
}
}
error={
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)
} catch (error) {
console.error(error)
toast.error("Gagal menambahkan tema, coba lagi nanti");
toast.error("Gagal mendapatkan data, coba lagi nanti");
} finally {
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 (
<Box>
@@ -102,8 +161,7 @@ export default function EditPaletteColor() {
value={isWarna.name}
onChange={
(e) => {
setWarna({ ...isWarna, name: e.target.value })
setTouched({ ...touched, name: true })
onValidation('name', e.target.value)
}
}
error={
@@ -119,15 +177,15 @@ export default function EditPaletteColor() {
size="md"
radius="md"
value={isWarna.utama}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, utama: color })
setTouched({ ...touched, utama: true })
onChange={
(e) => {
onValidation('utama', e)
}
}
error={
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"
radius="md"
value={isWarna.bgUtama}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgUtama: color })
setTouched({ ...touched, bgUtama: true })
onChange={
(e) => {
onValidation('bgUtama', e)
}
}
error={
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"
radius="md"
value={isWarna.bgIcon}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgIcon: color })
setTouched({ ...touched, bgIcon: true })
onChange={
(e) => {
onValidation('bgIcon', e)
}
}
error={
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"
radius="md"
value={isWarna.bgFiturHome}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgFiturHome: color })
setTouched({ ...touched, bgFiturHome: true })
onChange={
(e) => {
onValidation('bgFiturHome', e)
}
}
error={
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"
radius="md"
value={isWarna.bgFiturDivision}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgFiturDivision: color })
setTouched({ ...touched, bgFiturDivision: true })
onChange={
(e) => {
onValidation('bgFiturDivision', e)
}
}
error={
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"
radius="md"
value={isWarna.bgTotalKegiatan}
onChangeEnd={
(color) => {
setWarna({ ...isWarna, bgTotalKegiatan: color })
setTouched({ ...touched, bgTotalKegiatan: true })
onChange={
(e) => {
onValidation('bgTotalKegiatan', e)
}
}
error={
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}
fullWidth
onClick={() => {
setModal(true)
onCheck()
}}
>
Simpan