tanner/caremyway-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Working delete shifts functionality

Browse Source
This commit is contained in:
Alexander Wong 2018-04-22 22:10:46 -06:00
parent 4f548d529f
commit 2b15495072
No known key found for this signature in database
GPG Key ID: E90E5D6448C2C663
10 changed files with 177 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/actions/cShift/saga.actions.js
View File

@ -2,7 +2,8 @@ import {
CREATE_MULTIPLE_CSHIFT_REQUEST,
GET_CSHIFTS_REQUEST,
GET_CSHIFT_REQUEST,
EDIT_CSHIFT_REQUEST
EDIT_CSHIFT_REQUEST,
DELETE_CSHIFT_REQUEST
} from "../../constants/cShift.constants";
/**
@ -36,3 +37,10 @@ export function editCShiftRequest(payload) {
data: payload
}
}
export function deleteCShiftRequest(uuid) {
return {
type: DELETE_CSHIFT_REQUEST,
data: uuid
}
}

6
src/api/cShift.api.js
View File

@ -1,4 +1,4 @@
import { get, put, post } from "./baseApi";
import { get, put, post, del } from "./baseApi";
export function createCShifts(postBodies) {
return Promise.all(
@ -23,3 +23,7 @@ export function getCShift(uuid, params) {
export function editCShift(uuid, payload) {
return put(`/cshift/${uuid}/`, payload).then(resp => Promise.resolve(resp));
}
export function deleteCShift(uuid) {
return del(`/cshift/${uuid}/`).then(resp => Promise.resolve(resp));
}

2
src/components/User/Client/ClientAddShiftForm.jsx
View File

@ -162,7 +162,7 @@ class ClientAddShiftForm extends Component {
priceUUID={priceUUID}
startTime={startTime}
duration={duration}
note={note}
note={note || ""}
selectedShiftDates={selectedShiftDates}
changeSelectedEmployee={this.changeSelectedEmployee}
changeSelectedPrice={this.changeSelectedPrice}

3
src/components/User/Client/ClientEditShiftForm.jsx
View File

@ -111,7 +111,6 @@ class ClientEditShiftForm extends Component {
description: note ? note : undefined
});
}
console.log({ ...postRequestBodies[0], uuid: cShiftUUID })
this.props.dispatch(
editCShiftRequest({ ...postRequestBodies[0], uuid: cShiftUUID })
);
@ -196,7 +195,7 @@ class ClientEditShiftForm extends Component {
priceUUID={priceUUID}
startTime={startTime}
duration={duration}
note={note}
note={note || ""}
selectedShiftDates={selectedShiftDates}
changeSelectedEmployee={this.changeSelectedEmployee}
changeSelectedPrice={this.changeSelectedPrice}

5
src/components/User/Client/ClientShiftFormView.jsx
View File

@ -72,6 +72,7 @@ export const ClientShiftFormView = ({
selection
fluid
search
disabled={!!isEditing}
noResultsMessage="No approved employees found."
value={employeeUUID}
/>
@ -85,7 +86,7 @@ export const ClientShiftFormView = ({
selection
fluid
search
disabled={!employeeUUID}
disabled={!employeeUUID || !!isEditing}
noResultsMessage="No prices for given employee."
value={priceUUID}
/>
@ -99,7 +100,7 @@ export const ClientShiftFormView = ({
showTimeSelectOnly
timeIntervals={30}
dateFormat="LT Z"
timeFormat="hh:mm"
timeFormat="h:mm a"
placeholderText="Select shift start time"
/>
</Form.Field>

26
src/components/User/Client/ClientShiftShared.js
View File

@ -11,3 +11,29 @@ export const getEmployeeFromPrice = (priceUUID, selfUser) => {
});
return matchEmployee;
};
export const getWorkTypeFromPrice = (priceUUID, selfUser) => {
const employees = selfUser && selfUser.client && selfUser.client.employees;
let matchWorkType = null;
employees.forEach(employee => {
employee.prices.forEach(price => {
if (price.uuid === priceUUID) {
matchWorkType = price.work_type;
}
});
});
return matchWorkType;
};
export const getPriceFromPrice = (priceUUID, selfUser) => {
const employees = selfUser && selfUser.client && selfUser.client.employees;
let matchPrice = null;
employees.forEach(employee => {
employee.prices.forEach(price => {
if (price.uuid === priceUUID) {
matchPrice = price;
}
});
});
return matchPrice;
};

129
src/components/User/Client/ClientShifts.jsx
View File

@ -1,3 +1,4 @@
import { utc, ISO_8601, duration } from "moment";
import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect, Link } from "react-router-dom";
@ -8,9 +9,15 @@ import {
Item,
Segment,
Pagination,
Loader
Popup,
Loader,
Label
} from "semantic-ui-react";
import { getCShiftsRequest } from "../../../actions/cShift/saga.actions";
import {
getCShiftsRequest,
deleteCShiftRequest
} from "../../../actions/cShift/saga.actions";
import { getEmployeeFromPrice, getPriceFromPrice } from "./ClientShiftShared";
class ClientShifts extends Component {
constructor(props) {
@ -40,6 +47,10 @@ class ClientShifts extends Component {
this.setState({ page: activePage });
};
deleteCShift = uuid => {
this.props.dispatch(deleteCShiftRequest(uuid));
};
render() {
const {
isSendingCShiftRequest,
@ -56,6 +67,7 @@ class ClientShifts extends Component {
pageSize={pageSize}
user={selfUser}
handlePaginationChange={this.handlePaginationChange}
deleteCShift={this.deleteCShift}
/>
);
} else {
@ -74,7 +86,8 @@ const ClientShiftsView = ({
user,
page,
pageSize,
handlePaginationChange
handlePaginationChange,
deleteCShift
}) => {
const { count = 0, results = [] } = cShiftRequestSuccess;
@ -96,27 +109,95 @@ const ClientShiftsView = ({
{!isSendingCShiftRequest &&
results.length > 0 && (
<Item.Group divided>
{results.map(result => (
<Item key={result.uuid}>
<Item.Content>
<Item.Header content={result.uuid} />
<code>{JSON.stringify(result, null, 2)}</code>
</Item.Content>
<Item.Extra>
<Button
primary
floated="right"
as={Link}
to={`/user/profile/client/edit-shift/${result.uuid}`}
>
Edit
</Button>
<Button color="red" floated="right">
Delete
</Button>
</Item.Extra>
</Item>
))}
{results.map(result => {
const employee = getEmployeeFromPrice(result.price, user);
const price = getPriceFromPrice(result.price, user);
const workType = price.work_type;
const min = duration(
utc(result.set_end, ISO_8601) - utc(result.set_start, ISO_8601),
"milliseconds"
).as("minutes");
let displayText = duration(min, "minutes").humanize();
if (min % 60) {
displayText = duration(
Math.floor(min / 60),
"hours"
).humanize();
displayText += ` and ${duration(
min % 60,
"minutes"
).humanize()}`;
}
return (
<Item key={result.uuid}>
<Item.Content>
<Item.Header>
<Label
circular
empty
style={{
backgroundColor: workType.color,
borderColor: workType.color
}}
/>
{workType.label}
</Item.Header>
<Item.Meta>
{"At " +
utc(result.set_start, ISO_8601)
.local(false)
.format("dddd, MMMM Do YYYY, h:mm a Z") +
"; for " +
displayText +
"; rate $" +
price.amount +
"/hour"}
</Item.Meta>
<Item.Description>{result.description}</Item.Description>
<code>{JSON.stringify(result, null, 2)}</code>
<Item.Meta>
<a href={"mailto:" + employee.provider.email}>
{employee.provider.email}
</a>
</Item.Meta>
</Item.Content>
{result.actual_start === null && (
<Item.Extra>
<Button
primary
floated="right"
as={Link}
to={`/user/profile/client/edit-shift/${result.uuid}`}
>
Edit
</Button>
<Popup
content={
<div>
Are you sure you want to delete this shift?<br />
<Button
basic
color="red"
size="small"
onClick={() => deleteCShift(result.uuid)}
>
Confirm Deletion
</Button>
</div>
}
trigger={
<Button color="red" floated="right">
Delete
</Button>
}
on="click"
position="top right"
/>
</Item.Extra>
)}
</Item>
);
})}
</Item.Group>
)}
<div style={{ textAlign: "center" }}>

1
src/constants/cShift.constants.js
View File

@ -18,3 +18,4 @@ export const CREATE_MULTIPLE_CSHIFT_REQUEST = "CREATE_MULTIPLE_CSHIFT_REQUEST";
export const GET_CSHIFTS_REQUEST = "GET_CSHIFTS_REQUEST";
export const GET_CSHIFT_REQUEST = "GET_CSHIFT_REQUEST";
export const EDIT_CSHIFT_REQUEST = "EDIT_CSHIFT_REQUEST";
export const DELETE_CSHIFT_REQUEST = "DELETE_CSHIFT_REQUEST";

22
src/sagas/cShift.sagas.js
View File

@ -18,8 +18,10 @@ import {
createCShifts,
getCShifts,
getCShift,
editCShift
editCShift,
deleteCShift
} from "../api/cShift.api";
import { getCShiftsRequest } from "../actions/cShift/saga.actions";
function* createCShiftsCall(postBodies) {
yield effects.put(isSendingCShiftRequest(true));
@ -80,6 +82,18 @@ function* editCShiftCall(payload) {
}
}
function* deleteCShiftCall(uuid) {
yield effects.put(isSendingCShiftRequest(true));
try {
return yield effects.call(deleteCShift, uuid);
} catch (exception) {
yield effects.put(setCShiftRequestError(exception));
return false;
} finally {
yield effects.put(isSendingCShiftRequest(false));
}
}
export function* createCShiftsFlow(request) {
yield effects.put(clearCShiftRequestSuccess());
yield effects.put(clearCShiftRequestError());
@ -127,3 +141,9 @@ export function* editCShiftFlow(request) {
yield effects.put(setCShiftRequestSuccess(wasSuccessful));
}
}
export function* deleteCShiftFlow(request) {
yield effects.put(clearCShiftRequestError());
yield effects.call(deleteCShiftCall, request.data);
yield effects.put(getCShiftsRequest({ page: 1 }));
}

7
src/sagas/index.js
View File

@ -73,13 +73,15 @@ import {
CREATE_MULTIPLE_CSHIFT_REQUEST,
GET_CSHIFTS_REQUEST,
GET_CSHIFT_REQUEST,
EDIT_CSHIFT_REQUEST
EDIT_CSHIFT_REQUEST,
DELETE_CSHIFT_REQUEST
} from "../constants/cShift.constants";
import {
createCShiftsFlow,
getCShiftsFlow,
getCShiftFlow,
editCShiftFlow
editCShiftFlow,
deleteCShiftFlow
} from "./cShift.sagas";
export default function* rootSaga() {
@ -112,4 +114,5 @@ export default function* rootSaga() {
yield takeLatest(GET_CSHIFTS_REQUEST, getCShiftsFlow);
yield takeLatest(GET_CSHIFT_REQUEST, getCShiftFlow);
yield takeLatest(EDIT_CSHIFT_REQUEST, editCShiftFlow);
yield takeLatest(DELETE_CSHIFT_REQUEST, deleteCShiftFlow);
}