Inertia + React: Maintaining Radio Button Behavior with a Select Drop Down dependency
I have previously blogged about maintaining Checkbox behavior and dependencies before but this post is a different use case.
Regards to the same project I had to create different behavior in another React form.
Create User Roles with Additional Privileges
The use case was that a user could be given a role: an Owner, a manager or Staff responsibilities. In leu of using the Spatie Permissions package with Laravel on the back end I wanted more control for staff members.
Such as a team leader or a project leader. It makes sense to give those privileges to staff and not a manager, when a manager has those responsibilities anyway.
Permitting a manager to hand off some of his or her responsibilities to trusted staff members is a must in any application. Let's see how I did it with Inertia and React.
The first place to begin with is the User model. The implementation that is most relevant to you is the following class methods below.
/**
* @note determine if the authenticated user is a team leader or not
*
*/
public function isTeamLeader() : bool
{
return $this->privileges === Privileges::TEAM_LEADER->value || $this->isProjectLeader();
}
/**
* @note determine if the authenticated user is a project leader or not
*
*/
public function isProjectLeader() : bool
{
return $this->privileges === Privileges::PROJECT_LEADER->value || $this->isManager();
}
/**
* @note determine if the authenticated user is a manager or not
*
*/
public function isManager() : bool
{
return $this->hasRole('owner') || $this->hasRole('manager');
}
This set up allows for a Team Leader, a Project Leader and roles other than Staff, to also act with the same privileges the staff enjoy. Inertia's middleware follows next. The implementation below allows you to use the model state on the front end.
public function share(Request $request): array
{
$user = $request->user();
return [
...parent::share($request),
'auth' => [
// use auth?.user?.name
'user' => $user ? $user->only('id', 'name', 'email') : null,
/**
* @note users with the role of Staff, some are given extra responsibilities,
* such as being a team leader, whereby they can also:
*
* - create a team, and assign users to a team
* - modify a team, and reassign users
* - assign users to a task
*/
'isTeamLeader' => $user ? $user->isTeamLeader() : false,
/**
* @note users with the role of Staff, some are given extra responsibilities,
* such as being a project leader, whereby they can also:
*
* - create a project, and assign teams to a project
* - modify a project, and reassign teams
* - assign team leadership to teams
*/
'isProjectLeader' => $user ? $user->isProjectLeader() : false,
/**
* @note users with the role of a manager, have overall greater
* responsibilities, without question
*/
'isManager' => $user ? $user->isManager() : false,
],
'flash' => [
'success' => fn() => $request->session()->get('success'),
'failure' => fn() => $request->session()->get('failure'),
],
];
}
The controller in question has the following implementation below.
public function create() : Response
{
$roles = Role::where([
'guard_name' => 'web',
])
->where('name', '!=', 'owner')
->orderByDesc('name')
->get();
return inertia('User/User/Create', [
'roles' => $roles,
]);
}
That's about it regards to the back end set up.
The expected behavior is this. Selecting either the default option or the manager will disable the radio buttons. Selecting the staff option will enable the radio buttons, allowing you to choose either a team leader or project leader for the user. Or not as the case leaving alone with the default.
Having chosen a privilege and deciding the user isn't for the staff role then the radio buttons are reset (to default) and disabled.
The front-end form is below but with the markup shortened for brevity.
export default function Form() {
const [selectedRole, setSelectedRole] = useState("");
const [disableRadioButtons, setDisableRadioButtons] = useState(true);
const { roles } = usePage().props;
const { data, setData, post, processing, errors } = useForm({
name: "",
email: "",
role: null,
privileges: "none",
password: "",
active: false,
password_confirmation: "",
});
const handleRolesSelect = (e) => {
const selectedOptions = Array.from(e.target.selectedOptions);
/**
* @note need both the ID and NAME, from a data source, for this to work
*/
const selectedRole = selectedOptions.map(option => ({
id: option.value,
name: option.dataset.name,
}));
/**
* @note disable the radio buttons if any role selected other than staff,
* and reset the radio buttons to default option
*/
const isStaffSelected = selectedRole.some(item => item.name === "staff");
setDisableRadioButtons(!isStaffSelected);
if(!isStaffSelected) {
setData({
...data,
privileges: "none",
});
}
/**
* @note finally, reclaim and store the role ID in the form state, whilst preserving current privilege state
*/
const r = selectedRole[0].id;
setData({
...data,
role: r,
privileges: !isStaffSelected ? "none" : data.privileges,
});
};
const handlePrivilegesChange = (e) => {
setData("privileges", e.target.value);
};
function submit(e) {
e.preventDefault();
post(route("users.store"));
}
return (
<>
<form onSubmit={ submit }>
<div className="mt-4">
<InputLabel htmlFor="role" value="Role Selection" />
<Select
className="mt-1 block w-full"
size={ 10 }
multiple={ false }
name="role"
handleSelect={ handleRolesSelect }
rows={ roles }>
Roles Selection
</Select>
<InputError message={ errors?.role } className="mt-2" />
</div>
<div className="block mt-4">
<InputLabel htmlFor="privileges" value="Staff Privileges" />
<label className="flex items-center mt-2">
<RadioButton
name="privileges"
value="none"
checked={ data?.privileges === "none" }
onChange={ handlePrivilegesChange }
disabled={ disableRadioButtons }
/>
<span className="ms-2 text-sm text-gray-600">None</span>
</label>
<label className="flex items-center">
<RadioButton
name="privileges"
value="team_leader"
checked={ data?.privileges === "team_leader" }
onChange={ handlePrivilegesChange }
disabled={ disableRadioButtons }
/>
<span className="ms-2 text-sm text-gray-600">Team Leader</span>
</label>
<label className="flex items-center">
<RadioButton
name="privileges"
value="project_leader"
checked={ data?.privileges === "project_leader" }
onChange={ handlePrivilegesChange }
disabled={ disableRadioButtons }
/>
<span className="ms-2 text-sm text-gray-600">Project Leader</span>
</label>
</div>
<div className="flex items-center justify-end mt-4">
<PrimaryButton className="ms-4" disabled={ processing }>
Create
</PrimaryButton>
<Cancel route={ route("users.index") } />
</div>
</form>
</>
);
}
Now a user with a role of staff can also be either a team leader or a project leader. I must also show you the SELECT component because the primary key of the role is used as the option value.
But with this implementation it must rely on the role name. So, I shoved that into a data attribute on every option making it available via Javascript. The component implementation is below.
export default function Select({ className = '', size, multiple, name, handleSelect, value, disabled, rows, children, isFocused = false }) {
useEffect(() => {
if(isFocused) {
input.current.focus();
}
}, []);
return (
<select
className={
'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm ' + className}
size={ size }
multiple={ multiple }
name={ name }
onChange={ handleSelect }
value={ value }
disabled={ disabled || false }>
<option value="0">{ children }</option>
{
rows.map((row) => (
<option key={ row.id } value={ row.id } data-name={ row.name }>{ row.name }</option>
))
}
</select>
);
}
In many use cases you won't need both the ID and NAME but when you do, it's a life saver. Otherwise, it is harmless and can be left alone. If for whatever reason you would want to use Checkboxes instead of Radio buttons, keep reading.
The following implementation will aid you greatly.
export default function Form() {
const { roles } = usePage().props;
const [selectedData, setSelectedData] = useState([]);
const [checkboxDisabled, setCheckboxDisabled] = useState(true);
const { data, setData, post, processing, errors } = useForm({
name: "",
email: "",
role: null,
password: "",
active: false,
password_confirmation: "",
team_leader: false,
project_leader: false,
});
useEffect(() => {
const isStaffSelected = selectedData.some(item => item.name === "staff");
if(!isStaffSelected) {
setData({
...data,
team_leader: false,
project_leader: false,
});
setCheckboxDisabled(true);
} else {
setCheckboxDisabled(false);
}
}, [selectedData]);
function handleRolesSelect(e) {
const selectedOptions = Array.from(e.target.selectedOptions);
const selectedData = selectedOptions.map(option => ({
id: option.value,
name: option.dataset.name,
}));
setSelectedData(selectedData);
const isStaffSelected = selectedData.some(item => item.name === "staff");
setCheckboxDisabled(!isStaffSelected);
if(!isStaffSelected) {
setData('team_leader', false);
setData('project_leader', false);
}
setData("role", selectedData.map(item => item.id).pop());
}
function submit(e) {
e.preventDefault();
post(route("users.store"));
}
// etc,...
The markup finishes of this post. It is with my best wishes this helps you solve any problem you have and gets you out of a sticky spot.
<div className="mt-4">
<InputLabel htmlFor="role" value="Role Selection" />
<Select
className="mt-1 block w-full"
size={ 10 }
multiple={ false }
name="role"
handleSelect={ handleRolesSelect }
rows={ roles }>Roles Selection</Select>
<InputError message={ errors?.role } className="mt-2" />
</div>
<div className="mt-4">
<label className="flex items-center mb-2">
<Checkbox
name="team_leader"
checked={ data?.team_leader }
disabled={ checkboxDisabled }
onChange={ (e) => setData("team_leader", e.target.checked) }
/>
<span className="ms-2 text-sm text-gray-600">Check, if this User has Team Leader privilege</span>
</label>
<label className="flex items-center">
<Checkbox
name="project_leader"
checked={ data?.project_leader }
disabled={ checkboxDisabled }
onChange={ (e) => setData("project_leader", e.target.checked) }
/>
<span className="ms-2 text-sm text-gray-600">Check, if this User has Project Leader privilege</span>
</label>
</div>
Let's say you have a pivot table on the User model with a many-to-many relation with a Team model. The Team model also would have the withPivot in the relation. With this implementation of using the Checkboxes you can give either or both privilege (team leader and project leader) to a user.
The Team model would have the following below.
/**
* @note a Team has one or more users, so there is a n:n relation
*
*/
public function users()
{
return $this->belongsToMany(User::class)->withPivot([
'team_leader',
'project_leader',
]);
}
The pivot table would have the obligatory team_leader and project_leader columns of course. That set up would allow for either or both a team leader and project leader for a user on a per team basis.
If your project requires greater flexibility, then by all means go with the Checkboxes because as many as need can be checked.
