Advertisement
xcage88

Code

Feb 5th, 2024
790
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useEffect, useState } from 'react'
  2. import { useRouter } from 'next/router'
  3. import { WebConfigurationType, WebConfigType } from '@/type/web'
  4. import { getData, postData, putData } from '@/utility/fetch'
  5. import { showMessage } from '@/components/alerts/showMessage';
  6.  
  7. const STATUS_COLORS = {
  8.     active: 'green',
  9.     maintenance: 'red',
  10. };
  11.  
  12. const STATUS_TEXT = {
  13.     active: 'Aktif',
  14.     maintenance: '(Maintenance)',
  15. };
  16.  
  17. const CheckboxSwitch = ({ label, name, checked, onChange }: any) => {
  18.     const labelColor = checked ? STATUS_COLORS.maintenance : STATUS_COLORS.active;
  19.  
  20.     return (
  21.         <div className="input-banner mb-5">
  22.             <div className="mb-2 flex justify-between gap-4">
  23.                 <div className="flex gap-2">
  24.                     <div className="label-banner style={black}">{label}</div>
  25.                     <div className="label-banner" style={{ color: labelColor }}>
  26.                         {checked ? STATUS_TEXT.maintenance : STATUS_TEXT.active}
  27.                     </div>
  28.                 </div>
  29.  
  30.                 <label className="relative h-6 w-12">
  31.                     <input
  32.                         type="checkbox"
  33.                         className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0"
  34.                         id={`custom_switch_checkbox_${name}`}
  35.                         checked={checked}
  36.                         onChange={onChange}
  37.                         name={name}
  38.                     />
  39.                     <span className={`block h-full rounded-full bg-[#ebedf2] before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-300 peer-checked:bg-primary peer-checked:before:left-7 dark:bg-dark dark:before:bg-white-dark dark:peer-checked:before:bg-white`}></span>
  40.                 </label>
  41.             </div>
  42.         </div>
  43.     );
  44. };
  45.  
  46. function WebConfig() {
  47.  
  48.     const router = useRouter()
  49.     const [webConfig, setWebConfig] = useState<WebConfigType>()
  50.     const [config, setConfig] = useState<WebConfigurationType[]>([])
  51.     const [checkStatus, setCheckStatus] = useState(() => {
  52.         const initial: any = {}
  53.         config.forEach((item: any) => {
  54.             initial[item?.name] = item?.is_maintenance
  55.         })
  56.         return initial
  57.     })
  58.     // const initialStatus = {
  59.     //     Beranda: webConfig?.Beranda || false,
  60.     //     Profil: webConfig?.Profil || false,
  61.     //     Template: webConfig?.Template || false,
  62.     //     Pekerjaan: webConfig?.Pekerjaan || false,
  63.     //     Blog: webConfig?.Blog || false,
  64.     //     Bantuan: webConfig?.Bantuan || false        
  65.     // }
  66.     // const [status, setStatus] = useState<any>(initialStatus)
  67.     // config.reduce((item: any, index: any) => {
  68.     //     item[item?.name] = item?.is_maintenance
  69.     //     return item
  70.     // }, {})
  71.  
  72.     useEffect(() => {
  73.         const getDataWeb = async () => {
  74.             try {
  75.                 const {data} = await getData('/page-configuration')
  76.                 setConfig(data.page_configuration)                
  77.             } catch (error: any) {
  78.                 return error
  79.             }
  80.         }
  81.         getDataWeb()
  82.     },[])
  83.  
  84.  
  85.     const handleChangeBox = (name: string) => {
  86.         setCheckStatus({...checkStatus, [name]: !checkStatus[name]})
  87.         // setStatus((prev: any) => ({
  88.         //     ...prev,
  89.         //     [name]: !prev[name]
  90.         // }))
  91.         // setConfig((prev) => prev.map((item: any) => item?.name === name ? {...item, is_maintenance: !item?.is_maintenance} : {...item}))
  92.         // setConfig((prev: any) => prev.map((item: any) => item?.name === name))
  93.        
  94.     }
  95.  
  96.     // console.log(config)
  97.  
  98.     console.log(checkStatus)
  99.  
  100.     const generateDialog = async () => {        
  101.  
  102.         // console.log(checkStatus)
  103.         try {
  104.             await putData('/page-configuration', checkStatus)
  105.             showMessage('Berhasil', 'success')
  106.         } catch (error) {
  107.             showMessage('Gagal', 'error')
  108.         }
  109.     }
  110.  
  111.  
  112.     const handleMultiplyCheck = async (ev: React.FormEvent) => {
  113.         ev.preventDefault()
  114.         generateDialog()
  115.     }
  116.  
  117.  
  118.     return (
  119.         <>
  120.             <div className='h-full w-full p-4'>
  121.                 <div className='w-full h-full bg-white rounded-lg shadow-md border border-slate-200 p-3'>
  122.                     <div className='w-full px-4 py-3 flex justify-between items-center mb-9'>
  123.                         <div>
  124.                             <h3 className='font-semibold text-3xl'>Web Configuration</h3>
  125.                         </div>
  126.                         {/* <button className='bg-[#376DDB] border border-[#2a5bbc] text-white font-semibold whitespace-nowrap px-5 py-2 rounded-md text-base flex items-center gap-3'
  127.                         onClick={() => router.push('./web-config/input')}
  128.                         >
  129.                             <span>+</span>
  130.                             <span>Tambah Data</span>
  131.                         </button> */}
  132.                     </div>
  133.                     <div className='w-full p-3 flex flex-col gap-4'>
  134.                         {config.map((item: any, index: any) => (
  135.                             <CheckboxSwitch
  136.                                 label={item?.name}
  137.                                 name={item?.name}
  138.                                 checked={checkStatus[item?.is_maintenance]}
  139.                                 onChange={() => handleChangeBox(item?.name)}/>
  140.                         ))}
  141.                         {/* <CheckboxSwitch label='Beranda' name='Beranda' checked={status.Beranda} onChange={handleChangeBox}/>
  142.                         <CheckboxSwitch label='Profil' name='Profil' checked={status.Profil} onChange={handleChangeBox}/>
  143.                         <CheckboxSwitch label='Template' name='Template' checked={status.Template} onChange={handleChangeBox}/>
  144.                         <CheckboxSwitch label='Pekerjaan' name='Pekerjaan' checked={status.Pekerjaan} onChange={handleChangeBox}/>
  145.                         <CheckboxSwitch label='Blog' name='Blog' checked={status.Blog} onChange={handleChangeBox}/>
  146.                         <CheckboxSwitch label='Bantuan' name='Bantuan' checked={status.Bantuan} onChange={handleChangeBox}/> */}
  147.                         <button
  148.                             onClick={handleMultiplyCheck}
  149.                             className='p-2 rounded-md bg-blue-400 text-white font-semibold'
  150.                         >
  151.                             Simpan
  152.                         </button>
  153.                     </div>
  154.                 </div>
  155.             </div>
  156.         </>
  157.     )
  158. }
  159.  
  160. export default WebConfig
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement