transcriptor-web/bootstrap/ssr/assets/TeamMemberManager-vS8Og7eY.js
2025-04-05 15:58:14 +02:00

437 lines
18 KiB
JavaScript

import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { u as useRoute } from "../app.js";
import { u as useTypedPage } from "./useTypedPage-Do3SqtsL.js";
import { A as ActionMessage } from "./ActionMessage-s_mcCJ3s.js";
import { A as ActionSection } from "./Modal-D5yHmTM4.js";
import { C as ConfirmationModal } from "./ConfirmationModal-BYr2Juy2.js";
import { D as DangerButton } from "./DangerButton-BAZynYAq.js";
import { D as DialogModal } from "./DialogModal-D0pyMzH2.js";
import { F as FormSection } from "./FormSection-DI6t3wFC.js";
import { T as TextInput, I as InputError } from "./TextInput-CMJy2hIv.js";
import { I as InputLabel } from "./InputLabel-DhqxoV6M.js";
import { P as PrimaryButton } from "./PrimaryButton-C2B8UWiv.js";
import { S as SecondaryButton } from "./SecondaryButton-G68tKuYQ.js";
import { S as SectionBorder } from "./SectionBorder-Dh4nHf2e.js";
import { router } from "@inertiajs/core";
import { useForm } from "@inertiajs/react";
import classNames from "classnames";
import { useState } from "react";
import "axios";
import "lodash";
import "react-dom/client";
import "@headlessui/react";
import "./SectionTitle-DnuUNpyS.js";
import "react-dom";
function TeamMemberManager({
team,
availableRoles,
userPermissions
}) {
const route = useRoute();
const addTeamMemberForm = useForm({
email: "",
role: null
});
const updateRoleForm = useForm({
role: null
});
const leaveTeamForm = useForm({});
const removeTeamMemberForm = useForm({});
const [currentlyManagingRole, setCurrentlyManagingRole] = useState(false);
const [managingRoleFor, setManagingRoleFor] = useState(null);
const [confirmingLeavingTeam, setConfirmingLeavingTeam] = useState(false);
const [teamMemberBeingRemoved, setTeamMemberBeingRemoved] = useState(null);
const page = useTypedPage();
function addTeamMember() {
addTeamMemberForm.post(route("team-members.store", [team]), {
errorBag: "addTeamMember",
preserveScroll: true,
onSuccess: () => addTeamMemberForm.reset()
});
}
function cancelTeamInvitation(invitation) {
router.delete(route("team-invitations.destroy", [invitation]), {
preserveScroll: true
});
}
function manageRole(teamMember) {
setManagingRoleFor(teamMember);
updateRoleForm.setData("role", teamMember.membership.role);
setCurrentlyManagingRole(true);
}
function updateRole() {
if (!managingRoleFor) {
return;
}
updateRoleForm.put(route("team-members.update", [team, managingRoleFor]), {
preserveScroll: true,
onSuccess: () => setCurrentlyManagingRole(false)
});
}
function confirmLeavingTeam() {
setConfirmingLeavingTeam(true);
}
function leaveTeam() {
leaveTeamForm.delete(
route("team-members.destroy", [team, page.props.auth.user])
);
}
function confirmTeamMemberRemoval(teamMember) {
setTeamMemberBeingRemoved(teamMember);
}
function removeTeamMember() {
if (!teamMemberBeingRemoved) {
return;
}
removeTeamMemberForm.delete(
route("team-members.destroy", [team, teamMemberBeingRemoved]),
{
errorBag: "removeTeamMember",
preserveScroll: true,
preserveState: true,
onSuccess: () => setTeamMemberBeingRemoved(null)
}
);
}
function displayableRole(role) {
var _a;
return (_a = availableRoles.find((r) => r.key === role)) == null ? void 0 : _a.name;
}
return /* @__PURE__ */ jsxs("div", { children: [
userPermissions.canAddTeamMembers ? /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(SectionBorder, {}),
/* @__PURE__ */ jsxs(
FormSection,
{
onSubmit: addTeamMember,
title: "Add Team Member",
description: "Add a new team member to your team, allowing them to collaborate with you.",
renderActions: () => /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
ActionMessage,
{
on: addTeamMemberForm.recentlySuccessful,
className: "mr-3",
children: "Added."
}
),
/* @__PURE__ */ jsx(
PrimaryButton,
{
className: classNames({
"opacity-25": addTeamMemberForm.processing
}),
disabled: addTeamMemberForm.processing,
children: "Add"
}
)
] }),
children: [
/* @__PURE__ */ jsx("div", { className: "col-span-6", children: /* @__PURE__ */ jsx("div", { className: "max-w-xl text-sm text-gray-600 dark:text-gray-400", children: "Please provide the email address of the person you would like to add to this team." }) }),
/* @__PURE__ */ jsxs("div", { className: "col-span-6 sm:col-span-4", children: [
/* @__PURE__ */ jsx(InputLabel, { htmlFor: "email", value: "Email" }),
/* @__PURE__ */ jsx(
TextInput,
{
id: "email",
type: "email",
className: "mt-1 block w-full",
value: addTeamMemberForm.data.email,
onChange: (e) => addTeamMemberForm.setData("email", e.currentTarget.value)
}
),
/* @__PURE__ */ jsx(
InputError,
{
message: addTeamMemberForm.errors.email,
className: "mt-2"
}
)
] }),
availableRoles.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "col-span-6 lg:col-span-4", children: [
/* @__PURE__ */ jsx(InputLabel, { htmlFor: "roles", value: "Role" }),
/* @__PURE__ */ jsx(
InputError,
{
message: addTeamMemberForm.errors.role,
className: "mt-2"
}
),
/* @__PURE__ */ jsx("div", { className: "relative z-0 mt-1 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer", children: availableRoles.map((role, i) => /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: classNames(
"relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-hidden focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-600",
{
"border-t border-gray-200 dark:border-gray-700 focus:border-none rounded-t-none": i > 0,
"rounded-b-none": i != Object.keys(availableRoles).length - 1
}
),
onClick: () => addTeamMemberForm.setData("role", role.key),
children: /* @__PURE__ */ jsxs(
"div",
{
className: classNames({
"opacity-50": addTeamMemberForm.data.role && addTeamMemberForm.data.role != role.key
}),
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
/* @__PURE__ */ jsx(
"div",
{
className: classNames(
"text-sm text-gray-600 dark:text-gray-400",
{
"font-semibold": addTeamMemberForm.data.role == role.key
}
),
children: role.name
}
),
addTeamMemberForm.data.role == role.key ? /* @__PURE__ */ jsx(
"svg",
{
className: "ml-2 h-5 w-5 text-green-400",
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsx("path", { d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" })
}
) : null
] }),
/* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-gray-600 dark:text-gray-400", children: role.description })
]
}
)
},
role.key
)) })
] }) : null
]
}
)
] }) : null,
team.team_invitations.length > 0 && userPermissions.canAddTeamMembers ? /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(SectionBorder, {}),
/* @__PURE__ */ jsx("div", { className: "mt-10 sm:mt-0" }),
/* @__PURE__ */ jsx(
ActionSection,
{
title: "Pending Team Invitations",
description: "These people have been invited to your team and have been sent an invitation email. They may join the team by accepting the email invitation.",
children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: team.team_invitations.map((invitation) => /* @__PURE__ */ jsxs(
"div",
{
className: "flex items-center justify-between",
children: [
/* @__PURE__ */ jsx("div", { className: "text-gray-600 dark:text-gray-400", children: invitation.email }),
/* @__PURE__ */ jsx("div", { className: "flex items-center", children: userPermissions.canRemoveTeamMembers ? /* @__PURE__ */ jsx(
"button",
{
className: "cursor-pointer ml-6 text-sm text-red-500 focus:outline-hidden",
onClick: () => cancelTeamInvitation(invitation),
children: "Cancel"
}
) : null })
]
},
invitation.id
)) })
}
)
] }) : null,
team.users.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(SectionBorder, {}),
/* @__PURE__ */ jsx("div", { className: "mt-10 sm:mt-0" }),
/* @__PURE__ */ jsx(
ActionSection,
{
title: "Team Members",
description: "All of the people that are part of this team.",
children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: team.users.map((user) => {
var _a;
return /* @__PURE__ */ jsxs(
"div",
{
className: "flex items-center justify-between",
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
/* @__PURE__ */ jsx(
"img",
{
className: "w-8 h-8 rounded-full",
src: user.profile_photo_url,
alt: user.name
}
),
/* @__PURE__ */ jsx("div", { className: "ml-4 dark:text-white", children: user.name })
] }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
userPermissions.canAddTeamMembers && availableRoles.length ? /* @__PURE__ */ jsx(
"button",
{
className: "ml-2 text-sm text-gray-400 underline",
onClick: () => manageRole(user),
children: displayableRole(user.membership.role)
}
) : availableRoles.length ? /* @__PURE__ */ jsx("div", { className: "ml-2 text-sm text-gray-400", children: displayableRole(user.membership.role) }) : null,
((_a = page.props.auth.user) == null ? void 0 : _a.id) === user.id ? /* @__PURE__ */ jsx(
"button",
{
className: "cursor-pointer ml-6 text-sm text-red-500",
onClick: confirmLeavingTeam,
children: "Leave"
}
) : null,
userPermissions.canRemoveTeamMembers ? /* @__PURE__ */ jsx(
"button",
{
className: "cursor-pointer ml-6 text-sm text-red-500",
onClick: () => confirmTeamMemberRemoval(user),
children: "Remove"
}
) : null
] })
]
},
user.id
);
}) })
}
)
] }) : null,
/* @__PURE__ */ jsxs(
DialogModal,
{
isOpen: currentlyManagingRole,
onClose: () => setCurrentlyManagingRole(false),
children: [
/* @__PURE__ */ jsx(DialogModal.Content, { title: "Manage Role" }),
managingRoleFor ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "relative z-0 mt-1 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer", children: availableRoles.map((role, i) => /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: classNames(
"relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-hidden focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-600",
{
"border-t border-gray-200 dark:border-gray-700 focus:border-none rounded-t-none": i > 0,
"rounded-b-none": i !== Object.keys(availableRoles).length - 1
}
),
onClick: () => updateRoleForm.setData("role", role.key),
children: /* @__PURE__ */ jsxs(
"div",
{
className: classNames({
"opacity-50": updateRoleForm.data.role && updateRoleForm.data.role !== role.key
}),
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
/* @__PURE__ */ jsx(
"div",
{
className: classNames(
"text-sm text-gray-600 dark:text-gray-400",
{
"font-semibold": updateRoleForm.data.role === role.key
}
),
children: role.name
}
),
updateRoleForm.data.role === role.key ? /* @__PURE__ */ jsx(
"svg",
{
className: "ml-2 h-5 w-5 text-green-400",
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: /* @__PURE__ */ jsx("path", { d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" })
}
) : null
] }),
/* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-gray-600 dark:text-gray-400", children: role.description })
]
}
)
},
role.key
)) }) }) : null,
/* @__PURE__ */ jsxs(DialogModal.Footer, { children: [
/* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setCurrentlyManagingRole(false), children: "Cancel" }),
/* @__PURE__ */ jsx(
PrimaryButton,
{
onClick: updateRole,
className: classNames("ml-2", {
"opacity-25": updateRoleForm.processing
}),
disabled: updateRoleForm.processing,
children: "Save"
}
)
] })
]
}
),
/* @__PURE__ */ jsxs(
ConfirmationModal,
{
isOpen: confirmingLeavingTeam,
onClose: () => setConfirmingLeavingTeam(false),
children: [
/* @__PURE__ */ jsx(ConfirmationModal.Content, { title: "Leave Team", children: "Are you sure you would like to leave this team?" }),
/* @__PURE__ */ jsxs(ConfirmationModal.Footer, { children: [
/* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setConfirmingLeavingTeam(false), children: "Cancel" }),
/* @__PURE__ */ jsx(
DangerButton,
{
onClick: leaveTeam,
className: classNames("ml-2", {
"opacity-25": leaveTeamForm.processing
}),
disabled: leaveTeamForm.processing,
children: "Leave"
}
)
] })
]
}
),
/* @__PURE__ */ jsxs(
ConfirmationModal,
{
isOpen: !!teamMemberBeingRemoved,
onClose: () => setTeamMemberBeingRemoved(null),
children: [
/* @__PURE__ */ jsx(ConfirmationModal.Content, { title: "Remove Team Member", children: "Are you sure you would like to remove this person from the team?" }),
/* @__PURE__ */ jsxs(ConfirmationModal.Footer, { children: [
/* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setTeamMemberBeingRemoved(null), children: "Cancel" }),
/* @__PURE__ */ jsx(
DangerButton,
{
onClick: removeTeamMember,
className: classNames("ml-2", {
"opacity-25": removeTeamMemberForm.processing
}),
disabled: removeTeamMemberForm.processing,
children: "Remove"
}
)
] })
]
}
)
] });
}
export {
TeamMemberManager as default
};