Preview: Create.jsx
Size: 6.82 KB
//proc/thread-self/root/home/byroehnu/easetack.com/resources/js/Admin/Pages/Categories/Create.jsx
import AdminLayouts from "@/Admin/Layouts/AdminLayouts"
import TextInput from "@/Admin/Components/Inputs/TextInput.jsx"
import CustomSelect from "@/Admin/Components/Inputs/CustomSelect.jsx"
import { useForm, Head } from "@inertiajs/react"
import SuccessButton from "@/Admin/Components/Button/SuccessButton"
import { useState } from "react"
import { useEffect } from "react"
import translate from "@/utils/translate"
import FromValidationError from "@/Admin/Components/Validation/FromValidationError"
export default function Create({ categories, default_lang, languages }) {
const [selectedLang, setSelectedLang] = useState(default_lang)
const [tempLang, setTempLang] = useState(selectedLang)
const { data, setData, errors, post, processing } = useForm({
parent_id: "",
...Object.keys(languages).reduce((acc, code) => {
acc[code + "_title"] = ""
return acc
}, {})
})
// handle publish
const handlePublish = (e) => {
e.preventDefault()
post(route("admin.categories.store"))
}
useEffect(() => {
setSelectedLang(tempLang)
}, [tempLang])
useEffect(() => {
if (errors) {
const [firstKey] = Object.keys(errors)
const [errorLang] = firstKey?.split("_") || []
if (errorLang && errorLang !== default_lang && languages.hasOwnProperty(errorLang)) {
setSelectedLang(errorLang)
}
}
}, [errors, default_lang, languages])
return (
<AdminLayouts>
<Head title="Create categories" />
<div className="yoo-height-b30 yoo-height-lg-b30" />
<div className="container-fluid">
<div className="yoo-uikits-heading">
<h2 className="yoo-uikits-title">{translate("Create category")}</h2>
</div>
<div className="yoo-height-b20 yoo-height-lg-b20"></div>
<form className="row" onSubmit={handlePublish}>
<div className="col-lg-8">
<div className="yoo-card yoo-style1">
<div className="yoo-card-heading">
<div className="yoo-card-heading-left">
<h2 className="yoo-card-title">{translate("Category Details")}</h2>
</div>
<ul className="nav nav-tabs" id="myTab" role="tablist">
{Object.entries(languages).map(([code, language]) => (
<li className="nav-item" key={code}>
<button
type="button"
onClick={() => setTempLang(code)}
className={`nav-link ${selectedLang === code && "active"}`}
style={{ outline: "none" }}
>
{language.name}
</button>
</li>
))}
</ul>
</div>
<div className="yoo-card-body">
<div className="yoo-padd-lr-20">
<div className="yoo-height-b20 yoo-height-lg-b20" />
<div className="form-group category-custom-select">
<label>{translate("Parent Category")}</label>
{/* <CustomSelect
options={categories}
placeholder={translate("None")}
onSelect={(e) =>
setData("parent_id", e)
}
/> */}
<div className="form-group form-group-md">
<div className="yoo-select">
<select
className="form-control"
id="category"
onChange={(e) => setData("parent_id", e.target.value)}
value={data.parent_id}
>
<option value="">{translate("Select Category")}</option>
{categories.data.map((category) => (
<option key={`category_${category.value}`} value={category.value}>
{category.label}
</option>
))}
</select>
<FromValidationError message={errors.parent_id} />
</div>
</div>
</div>
<div className="form-group">
<label htmlFor="title">
{translate("Title")} ({languages[selectedLang].name}) *
</label>
<TextInput
title={`${translate("Enter category title")} *`}
type="text"
id="title"
error={errors[`${selectedLang}_title`]}
value={data[`${selectedLang}_title`]}
onChange={(e) => setData(`${selectedLang}_title`, e.target.value)}
/>
</div>
<SuccessButton isLoading={processing && data.status === "1"}>{translate("Add New Category")}</SuccessButton>
<div className="yoo-height-b20 yoo-height-lg-b20" />
</div>
</div>
</div>
<div className="yoo-height-b20 yoo-height-lg-b20"></div>
</div>
</form>
</div>
</AdminLayouts>
)
}
Directory Contents
Dirs: 0 × Files: 3