y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request 'ProfileComponent' (#6) from ProfileComponent into master

Browse Source 
Reviewed-by: Maciej <glowackimaciej97@gmail.com>
This commit is contained in:
Maciej 2020-06-11 17:43:18 +02:00
commit 52b6953f64
7 changed files with 216 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package-lock.json generated
View File

@ -1101,6 +1101,11 @@
"resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-2.6.3.tgz", "resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-2.6.3.tgz",
"integrity": "sha512-MMOPm+UQdxliq0IidfsgOryYCJsFVRHtILZeMyHMs9I8IFbV8DuDwkhzNNr2/RjRZ3GVm4ZuxnWjbeOSUdft8A==" "integrity": "sha512-MMOPm+UQdxliq0IidfsgOryYCJsFVRHtILZeMyHMs9I8IFbV8DuDwkhzNNr2/RjRZ3GVm4ZuxnWjbeOSUdft8A=="
}, },
"@devexpress/dx-grid-core": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/@devexpress/dx-grid-core/-/dx-grid-core-2.6.3.tgz",
"integrity": "sha512-hYgBM/vv70gjIpuHzS80CagzDenoT20ddIcFOLJQinsAk3mdFJr/fkJAMB819wop225S0Rtb+Z157EGNgMCAXA=="
},
"@devexpress/dx-react-core": { "@devexpress/dx-react-core": {
"version": "2.6.3", "version": "2.6.3",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-core/-/dx-react-core-2.6.3.tgz", "resolved": "https://registry.npmjs.org/@devexpress/dx-react-core/-/dx-react-core-2.6.3.tgz",
@ -1110,6 +1115,23 @@
"prop-types": "^15.7.2" "prop-types": "^15.7.2"
} }
}, },
"@devexpress/dx-react-grid": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-grid/-/dx-react-grid-2.6.3.tgz",
"integrity": "sha512-s2RMhn6Ctbe/Tp066sWgscC2eZVTTQfKs2VOR/p9gD1vMIQFPGUkSS/XyDwMPb5MD7DRvFYJ2U8oQryobB2yoQ==",
"requires": {
"@devexpress/dx-grid-core": "2.6.3"
}
},
"@devexpress/dx-react-grid-material-ui": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-grid-material-ui/-/dx-react-grid-material-ui-2.6.3.tgz",
"integrity": "sha512-7tVQVrbGQNrkbOOF/xd8mTk7vAsDwQ8URRvRJGILthcnewPCJZqzmjsMV4GRQ1bEAQKAiCnRDbPunvR4vW0GEw==",
"requires": {
"clsx": "^1.0.4",
"prop-types": "^15.7.2"
}
},
"@devexpress/dx-react-scheduler": { "@devexpress/dx-react-scheduler": {
"version": "2.6.3", "version": "2.6.3",
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler/-/dx-react-scheduler-2.6.3.tgz", "resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler/-/dx-react-scheduler-2.6.3.tgz",

3
package.json
View File

@ -4,7 +4,10 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"-": "0.0.1", "-": "0.0.1",
"@devexpress/dx-grid-core": "^2.6.3",
"@devexpress/dx-react-core": "^2.6.3", "@devexpress/dx-react-core": "^2.6.3",
"@devexpress/dx-react-grid": "^2.6.3",
"@devexpress/dx-react-grid-material-ui": "^2.6.3",
"@devexpress/dx-react-scheduler": "^2.6.3", "@devexpress/dx-react-scheduler": "^2.6.3",
"@devexpress/dx-react-scheduler-material-ui": "^2.6.3", "@devexpress/dx-react-scheduler-material-ui": "^2.6.3",
"@material-ui/core": "^4.10.0", "@material-ui/core": "^4.10.0",

68
src/App.tsx
View File

@ -2,45 +2,43 @@ import React, { useState } from "react";
import TopBar from "./components/TopBar/"; import TopBar from "./components/TopBar/";
import Transfer from "./components/Transfer/"; import Transfer from "./components/Transfer/";
import "./App.scss"; import "./App.scss";
import Schedule from "./components/Calendar/"; import Calendar from "./components/Calendar";
import { appointments } from "./components/Calendar/appointments"; import { appointments } from "./components/Calendar/appointments";
import RightBar from "./components/RightBar"; import RightBar from "./components/RightBar";
function App() { function App() {
const [isOpenTransfer, setOpenTransfer] = useState(false); const [isOpenTransfer, setOpenTransfer] = useState(false);
const [text, setText] = useState(""); const [text, setText] = useState("");
return ( return (
<div className="App"> <div className="App">
<TopBar <TopBar
textChangeHandler={(e) => { textChangeHandler={(e) => {
setText(e.target.value); setText(e.target.value);
}} }}
handleTransfer={(e) => { handleTransfer={() => {
setOpenTransfer(!isOpenTransfer); setOpenTransfer(!isOpenTransfer);
}} }}
onLangChange={(e) => { onLangChange={() => {
console.log(e); console.log("Language has been changed");
}} }}
/> />
<Transfer <Transfer
isOpen={isOpenTransfer} isOpen={isOpenTransfer}
handleClose={(e) => { handleClose={() => {
setOpenTransfer(!isOpenTransfer); setOpenTransfer(!isOpenTransfer);
}} }}
/> />
<div className="wraper"> <div className="wraper">
<div className="wraper__calendar"> <div className="wraper__calendar">
<Schedule data={appointments} /> <Calendar data={appointments} />
</div> </div>
<div className="wraper__rightbar"> <div className="wraper__rightbar">
<RightBar /> <RightBar />
</div> </div>
</div> </div>
<h1>{text}</h1>
<h1>{text}</h1> </div>
</div> );
);
} }
export default App; export default App;

160
src/components/Calendar/index.tsx
View File

@ -1,127 +1,87 @@
import * as React from "react"; import * as React from "react";
import { ViewState } from "@devexpress/dx-react-scheduler"; import { ViewState } from "@devexpress/dx-react-scheduler";
import { AppointmentModel } from "@devexpress/dx-react-scheduler"; import { AppointmentModel } from "@devexpress/dx-react-scheduler";
import { import { Scheduler, WeekView, Appointments, AppointmentTooltip } from "@devexpress/dx-react-scheduler-material-ui";
Scheduler,
WeekView,
Appointments,
AppointmentTooltip,
} from "@devexpress/dx-react-scheduler-material-ui";
import moment from "moment"; import moment from "moment";
import "moment/locale/pl"; import "moment/locale/pl";
import "./index.scss"; import "./index.scss";
import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; import { makeStyles, createStyles } from "@material-ui/core/styles";
interface CalendarProps { interface CalendarProps {
data: Array<AppointmentModel>; data: Array<AppointmentModel>;
} }
interface CalendarState { interface CalendarState {
currentDate: Date; currentDate: Date;
} }
const formatDayScaleDate = ( const formatDayScaleDate = (date: moment.MomentInput, nextOptions: Intl.DateTimeFormatOptions): string => {
date: moment.MomentInput, const momentDate = moment(date).locale("pl");
options: { weekday: any } return momentDate.format(nextOptions.weekday ? "dddd" : " ").toUpperCase();
) => {
const momentDate = moment(date).locale("pl");
const { weekday } = options;
return momentDate.format(weekday ? "dddd" : " ").toUpperCase();
}; };
const useStyles = makeStyles((theme: Theme) => const useStyles = makeStyles(() =>
createStyles({ createStyles({
dayScaleCell: { dayScaleCell: {
paddingTop: 10, paddingTop: 10,
paddingBottom: 10, paddingBottom: 10,
}, },
timeTableLayout: { timeTableLayout: {
border: "1px solid rgba(224, 224, 224, 1);", border: "1px solid rgba(224, 224, 224, 1);",
borderCollapse: "separate", borderCollapse: "separate",
}, },
timeTableCell: { appointmentLayer: {
//borderRadius: 15, borderRadius: 15,
}, marginLeft: 5,
appointmentLayer: { textAlign: "center",
borderRadius: 15, },
marginLeft: 5, })
textAlign: "center",
},
})
); );
//don't know how to set proper type of function arguments const DayScaleCell = ({ formatDate, ...restProps }: WeekView.DayScaleCellProps) => {
const DayScaleCell = ({ formatDate, ...restProps }: any) => { const classes = useStyles();
const classes = useStyles(); return (
return ( <WeekView.DayScaleCell {...restProps} formatDate={formatDayScaleDate} today={false} className={classes.dayScaleCell} />
<WeekView.DayScaleCell );
{...restProps}
formatDate={formatDayScaleDate}
today={false}
className={classes.dayScaleCell}
/>
);
}; };
const TimeTableCell = ({ ...restProps }: any) => { const TimeTableLayout = ({ ...restProps }: WeekView.TimeTableLayoutProps) => {
const classes = useStyles(); const classes = useStyles();
return ( return <WeekView.TimeTableLayout {...restProps} className={classes.timeTableLayout} />;
<WeekView.TimeTableCell {...restProps} className={classes.timeTableCell} />
);
}; };
const TimeTableLayout = ({ ...restProps }: any) => { const Appointment = ({ ...restProps }: Appointments.AppointmentProps) => {
const classes = useStyles(); const classes = useStyles();
return ( return <Appointments.Appointment {...restProps} className={classes.appointmentLayer} />;
<WeekView.TimeTableLayout
{...restProps}
className={classes.timeTableLayout}
/>
);
}; };
const Appointment = ({ ...restProps }: any) => { export default class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
const classes = useStyles(); constructor(props: CalendarProps) {
return ( super(props);
<Appointments.Appointment
{...restProps}
className={classes.appointmentLayer}
/>
);
};
export default class Calendar extends React.PureComponent< this.state = {
CalendarProps, currentDate: new Date("2020-06-01"),
CalendarState };
> { }
constructor(props: CalendarProps) { render() {
super(props); const { data } = this.props;
const { currentDate } = this.state;
this.state = { return (
currentDate: new Date("2020-06-01"), <Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
}; <ViewState defaultCurrentDate={currentDate} />
} <WeekView
startDayHour={8}
render() { endDayHour={20}
const { data } = this.props; excludedDays={[0, 6]}
const { currentDate } = this.state; cellDuration={60}
dayScaleCellComponent={DayScaleCell}
return ( timeTableLayoutComponent={TimeTableLayout}
<Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}> />
<ViewState defaultCurrentDate={currentDate} /> <Appointments appointmentComponent={Appointment} />
<WeekView <AppointmentTooltip />
startDayHour={8} </Scheduler>
endDayHour={20} );
excludedDays={[0, 6]} }
cellDuration={60}
dayScaleCellComponent={DayScaleCell}
timeTableLayoutComponent={TimeTableLayout}
timeTableCellComponent={TimeTableCell}
/>
<Appointments appointmentComponent={Appointment} />
<AppointmentTooltip />
</Scheduler>
);
}
} }

1
src/components/RightBar/index.tsx
View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import "./index.scss"; import "./index.scss";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
interface RightBarProps {} interface RightBarProps {}
interface RightBarState {} interface RightBarState {}

27
src/components/TopBar/Profile.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Menu, MenuItem } from "@material-ui/core";
import React, { FC } from "react";
interface ProfileProps {
anchorEl: HTMLElement | null;
handleClose: () => void
}
export const Profile : FC<ProfileProps> = ({anchorEl, handleClose, ...restProps}) => {
return (
<Menu
className="top-bar__menu"
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem>Logout</MenuItem>
</Menu>
);
};

171
src/components/TopBar/index.tsx
View File

@ -7,119 +7,88 @@ import UK from "./UK.png";
import PL from "./PL.png"; import PL from "./PL.png";
import User from "./user.png"; import User from "./user.png";
import CloseIcon from "./close.svg"; import CloseIcon from "./close.svg";
import Menu from "@material-ui/core/Menu"; import { Profile } from "./Profile";
import MenuItem from "@material-ui/core/MenuItem";
interface TopBarProps { interface TopBarProps {
handleTransfer: (e: React.MouseEvent) => void; handleTransfer: (e: React.MouseEvent) => void;
onLangChange: (lang:boolean) => void; onLangChange: (lang: boolean) => void;
textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void; textChangeHandler: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
} }
interface TopBarState { interface TopBarState {
isOpenProfile: boolean; isPolish: boolean;
anchorEl: null | HTMLElement; anchorEl: HTMLElement | null;
isPolish: boolean;
} }
export default class TopBar extends React.Component<TopBarProps, TopBarState> { export default class TopBar extends React.Component<TopBarProps, TopBarState> {
constructor(props: TopBarProps) { constructor(props: TopBarProps) {
super(props); super(props);
this.handleProfile = this.handleProfile.bind(this); this.handleProfile = this.handleProfile.bind(this);
this.handleClose = this.handleClose.bind(this); this.handleClose = this.handleClose.bind(this);
this.onLangChange = this.onLangChange.bind(this); this.onLangChange = this.onLangChange.bind(this);
this.handleTransfer = this.handleTransfer.bind(this); this.handleTransfer = this.handleTransfer.bind(this);
this.state = { this.state = {
isOpenProfile: false, isPolish: true,
anchorEl:null, anchorEl: null,
isPolish:true, };
}; }
}
handleChange(e: React.ChangeEvent<HTMLInputElement>) { handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
this.props.textChangeHandler(e); this.props.textChangeHandler(e);
} }
handleTransfer(e: React.MouseEvent) { handleTransfer(e: React.MouseEvent) {
this.props.handleTransfer(e); this.props.handleTransfer(e);
} }
onLangChange(e: React.MouseEvent) { onLangChange(e: React.MouseEvent) {
this.setState({ this.setState({
isPolish:!this.state.isPolish, isPolish: !this.state.isPolish,
}) });
this.props.onLangChange(this.state.isPolish); this.props.onLangChange(this.state.isPolish);
} }
handleProfile(e: React.MouseEvent) { handleProfile(event: React.MouseEvent<HTMLImageElement>) {
this.setState({ this.setState({
isOpenProfile: !this.state.isOpenProfile, anchorEl: event.currentTarget,
anchorEl:e.currentTarget as HTMLElement, });
}); }
}
handleClose(e: React.MouseEvent) { handleClose() {
this.setState({ this.setState({
isOpenProfile: !this.state.isOpenProfile, anchorEl: null,
}); });
} }
render() { render() {
return ( return (
<div className="top-bar"> <div className="top-bar">
<div className="top-bar__logo"> <div className="top-bar__logo">
<img <img className="top-bar__logo-image" alt="logo" src="https://plannaplan.pl/img/logo.svg" />
className="top-bar__logo-image" <div className="top-bar__tekst"> plan na plan </div>
alt="logo" </div>
src="https://plannaplan.pl/img/logo.svg" <div className="top-bar__input-div">
/> <img className="top-bar__input-icon" alt="search" src={Search} />
<div className="top-bar__tekst"> plan na plan </div> <Input
</div> placeholder="Wyszukaj..."
<div className="top-bar__input-div"> inputProps={{ "aria-label": "description" }}
<img className="top-bar__input-icon" alt="search" src={Search} /> className="top-bar__input-field"
<Input onChange={(e) => this.handleChange(e)}
placeholder="Wyszukaj..." />
inputProps={{ "aria-label": "description" }} <img className="top-bar__input-icon" alt="close" src={CloseIcon} />
className="top-bar__input-field" </div>
onChange={(e) => <div className="top-bar__icon-box">
this.handleChange(e as ChangeEvent<HTMLInputElement>) <img className="top-bar__icon" alt="transfer" src={Transfer} onClick={this.handleTransfer} />
} <img
/> className="top-bar__icon"
<img className="top-bar__input-icon" alt="close" src={CloseIcon} /> alt="change_language"
</div> src={this.state.isPolish ? UK : PL}
<div className="top-bar__icon-box"> onClick={this.onLangChange}
<img />
className="top-bar__icon" <img className="top-bar__icon" alt="profile" src={User} onClick={this.handleProfile} />
alt="transfer" <Profile anchorEl={this.state.anchorEl} handleClose={this.handleClose} />
src={Transfer} </div>
onClick={this.handleTransfer} </div>
/> );
<img }
className="top-bar__icon"
alt="change_language"
src={this.state.isPolish ? UK : PL}
onClick={this.onLangChange}
/>
<img
className="top-bar__icon"
alt="profile"
src={User}
onClick={this.handleProfile}
/>
<Menu
className="top-bar__menu"
id="simple-menu"
anchorEl={this.state.anchorEl}
keepMounted
open={this.state.isOpenProfile}
onClose={this.handleClose}
>
<MenuItem>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem>Logout</MenuItem>
</Menu>
</div>
</div>
);
}
} }