chore: add new member dialog

Author: silviyaboteva

examples/kendo-react-freemium/src/pages/Team.tsx

@@ -3,10 +3,13 @@ import { useNavigate } from "react-router-dom";
 import { teamsData } from "./data";
 import { ButtonGroup, Button, FloatingActionButton } from "@progress/kendo-react-buttons";
 import { Breadcrumb, Card, CardBody, Avatar, CardTitle, CardSubtitle, CardFooter, BreadcrumbLinkMouseEvent, GridLayout } from "@progress/kendo-react-layout";
-import { groupIcon, listUnorderedSquareIcon, homeIcon, detailSectionIcon, plusIcon } from "@progress/kendo-svg-icons";
+import { groupIcon, listUnorderedSquareIcon, homeIcon, detailSectionIcon, plusIcon, xIcon } from "@progress/kendo-svg-icons";
 import { SvgIcon } from "@progress/kendo-react-common";
-import { Window } from '@progress/kendo-react-dialogs';
+import { Dialog, DialogActionsBar, Window } from '@progress/kendo-react-dialogs';
 import React from "react";
+import { MaskedTextBox, TextBox } from "@progress/kendo-react-inputs";
+import { FloatingLabel, Hint } from "@progress/kendo-react-labels";
+import { MultiSelect } from "@progress/kendo-react-dropdowns";
 
 interface DataModel {
   id: string;
@@ -20,6 +23,14 @@ export default function Team() {
   const [isGridView, setIsGridView] = React.useState(true);
   const [openWindow, setOpenWindow] = React.useState(false);
   const [windowContent, setWindowContent] = React.useState({ teamMember: '', title: '' });
+  const [openDialog, setOpenDialog] = React.useState(false);
+  const [fNValue, setFNValue] = React.useState('First Name');
+  const [lNValue, setLNValue] = React.useState('Last Name');
+  const [emailValue, setEmailValue] = React.useState('Email');
+  const [titleValue, setTitleValue] = React.useState('Job Title');
+  const [phoneValue, setPhoneValue] = React.useState('(___) ___-___-___');
+  const [reportsToValue, setReportsToValue] = React.useState(['Name', 'Name']);
+
   const team = teamsData.filter(team => team.teamCode === params.teamId)[0];
 
   const breadcrumbItems: DataModel[] = [
@@ -73,6 +84,9 @@ export default function Team() {
     setOpenWindow(!openWindow);
   };
 
+  const addNewMember = () => {
+    setOpenDialog(true);
+  }
   return (
       <>
          <div style={{minHeight: 'calc(100vh - 106px)'}} className="flex flex-col p-10 gap-6">
@@ -112,7 +126,7 @@ export default function Team() {
                </GridLayout>
 
                <div className="flex justify-end mt-auto">
-                  <FloatingActionButton svgIcon={plusIcon} text="Add new member" size="small" alignOffset={{ x: 40, y: 75 }}/>
+                  <FloatingActionButton svgIcon={plusIcon} text="Add new member" size="small" alignOffset={{ x: 40, y: 75 }} onClick={addNewMember} />
                </div>
 
               {openWindow &&
@@ -143,6 +157,38 @@ export default function Team() {
                           </div>
                       </div>
                     </Window>}
+
+                    {openDialog && <Dialog title="Add Member" width={450} onClose={() => setOpenDialog(false)}>
+                      <div className="flex flex-col gap-4">
+                        <FloatingLabel label="First Name" editorId={'first-name'} editorValue={fNValue}>
+                          <TextBox size="large" value={fNValue} onChange={e => setFNValue(e.value as string)} />
+                            </FloatingLabel>
+                        <FloatingLabel label="Last Name" editorId={'last-name'} editorValue={lNValue}>
+                            <TextBox size="large" value={lNValue} onChange={e => setLNValue(e.value as string)} />
+                        </FloatingLabel>
+                        <FloatingLabel label="Job Title" editorId={'job-title'} editorValue={titleValue}>
+                            <TextBox size="large" value={titleValue} onChange={e => setTitleValue(e.value as string)} />
+                        </FloatingLabel>
+                        <FloatingLabel label="Email" editorId={'email'} editorValue={emailValue}>
+                            <TextBox size="large" value={emailValue} onChange={e => setEmailValue(e.value as string)} />
+                        </FloatingLabel>
+                        <FloatingLabel label="Phone Number" editorId={'phone'} editorValue={phoneValue}>
+                            <MaskedTextBox size="large" value={phoneValue} mask="(999) 000-000-000" onChange={e => setPhoneValue(e.value as string)} />
+                        </FloatingLabel>
+                        <FloatingLabel label="Reports to" editorId={'email'} editorValue={emailValue}>
+                            <MultiSelect size="large" data={['William Smith', 'Alex Morgan', 'James Parker', 'Nina Roberts', 'Isabella White']} value={reportsToValue} onChange={e => setReportsToValue([...e.value])} />
+                            <Hint>Multiple options could be selected at once.</Hint>
+                        </FloatingLabel>
+                      </div>
+                      <DialogActionsBar>
+                        <Button type="button" themeColor={'primary'} onClick={() => alert('Member added successfully!')}>
+                            Save
+                        </Button>
+                        <Button type="button" onClick={() => setOpenDialog(false)}>
+                            Cancel
+                        </Button>
+                    </DialogActionsBar>
+                    </Dialog>}
            </div>
            <div className="bg-surface-alt color-subtle p-2 text-center">
                <span>Copyright &#169; 2025 Progress Software. All rights reserved.</span>