Skip to content

Commit

Permalink
feature: companies can now quick edit their offers
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomaspalma
tomaspalma committed Oct 15, 2023
1 parent 33eb94b commit 6f30dbd
Show file tree
Hide file tree
Showing 7 changed files with 525 additions and 164 deletions.
40 changes: 40 additions & 0 deletions src/components/Company/Offers/Manage/CollapsedQuickOfferEdit.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import { Box, Button, Collapse, Typography } from "@material-ui/core";
import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
import { QuickOfferEditForm } from "./QuickOfferEditForm";

const CollapsedQuickOfferEdit = ({ offerId, isMobile }) => {
const [collapse, setCollapse] = useState(false);

return isMobile ? (
<>
<Box
display="flex"
alignSelf="center"
alignItems="center"
flexDirection="row"
>
<Typography align="center">Quick Edit Offer</Typography>
<Button
onClick={() => setCollapse(!collapse)}
size="small"
margin="dense"
endIcon={collapse ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
/>
</Box>
<Collapse in={collapse}>
<QuickOfferEditForm offerId={offerId} />
</Collapse>
</>
) : (
<QuickOfferEditForm offerId={offerId} showTitle={true} />
);
};

CollapsedQuickOfferEdit.propTypes = {
offerId: PropTypes.string.isRequired,
isMobile: PropTypes.bool.isRequired,
};

export default CollapsedQuickOfferEdit;
11 changes: 11 additions & 0 deletions src/components/Company/Offers/Manage/CompanyOffersActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,17 @@ const CompanyOffersActions = ({
</IconButton>
</Link>
</Tooltip>
<Tooltip title="Quick Offer Edit Actions">
<IconButton
aria-label="More Actions"
edge="end"
onClick={(e) => {
e.stopPropagation(); toggleCollapse();
}}
>
{!isCollapseOpen ? <ExpandMore /> : <ExpandLess />}
</IconButton>
</Tooltip>
</>
) : (
<IconButton
Expand Down
170 changes: 101 additions & 69 deletions src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,32 @@ import useSession from "../../../../hooks/useSession";
import { fetchCompanyOffers } from "../../../../services/companyOffersService";
import ControlledSortableSelectableTable from "../../../../utils/Table/ControlledSortableSelectableTable";
import FilterableTable from "../../../../utils/Table/FilterableTable";
import { alphabeticalSorter, GenerateTableCellFromField } from "../../../../utils/Table/utils";
import {
alphabeticalSorter,
GenerateTableCellFromField,
} from "../../../../utils/Table/utils";
import { columns } from "./CompanyOffersManagementSchema";
import PropTypes from "prop-types";
import useSession from "../../../../hooks/useSession";
import {
OfferTitleFilter,
PublishDateFilter,
PublishEndDateFilter,
LocationFilter,
} from "../Filters/index";
import { Edit as EditIcon } from "@material-ui/icons";
import { Link } from "react-router-dom";
import { addSnackbar } from "../../../../actions/notificationActions";
import { connect } from "react-redux";
import { RowActions } from "./CompanyOffersActions";
import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer";
import { OfferConstants } from "../../../Offers/Form/OfferUtils";
import { LocationFilter, OfferTitleFilter, PublishDateFilter, PublishEndDateFilter } from "../Filters/index";
import { RowActions } from "./CompanyOffersActions";
import { columns } from "./CompanyOffersManagementSchema";
import OfferTitle from "./CompanyOffersTitle";
import CompanyOffersVisibilityActions from "./CompanyOffersVisibilityActions";
import CollapsedQuickOfferEdit from "./CollapsedQuickOfferEdit";

const generateRow = ({
title, location, publishDate, publishEndDate, isHidden, isArchived, hiddenReason,
Expand Down Expand Up @@ -53,25 +71,35 @@ const sorters = {

const filters = [
{ id: "offer-title-filter", render: OfferTitleFilter },
{ id: "publish-date-filter",
{
id: "publish-date-filter",
render: PublishDateFilter,
props: {
onChange: (date, filtersContext, setFiltersContext) => {
setFiltersContext((filtersContext) => ({ ...filtersContext, minDate: date }));
setFiltersContext((filtersContext) => ({
...filtersContext,
minDate: date,
}));
},
},
},
{ id: "publish-end-date-filter",
{
id: "publish-end-date-filter",
render: PublishEndDateFilter,
props: {
onChange: (date, filtersContext, setFiltersContext) => {
setFiltersContext((filtersContext) => ({ ...filtersContext, minDate: date }));
setFiltersContext((filtersContext) => ({
...filtersContext,
minDate: date,
}));
},
},
},
{ id: "location-filter", render: LocationFilter },
];

export const OfferManagementContext = React.createContext();

const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => {
const { data, isLoggedIn } = useSession();
const [offers, setOffers] = useState({});
Expand Down Expand Up @@ -176,80 +204,84 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => {
const offerRoute = `/offer/${rowKey}`;
const mobileFieldKeys = ["location", "publishEndDate"];

return (
isMobile && (
<>
<div className={classes.payloadSection}>
<Grid container alignItems="center">
<Grid item xs={6}>
<Typography className={classes.collapsableTitles} variant="body1">
Actions
</Typography>
</Grid>
<Grid item xs={6} justifyContent="center">
<CompanyOffersVisibilityActions
offer={row?.payload.offer}
getOfferVisibility={row?.payload.getOfferVisibility}
setOfferVisibility={row?.payload.setOfferVisibility}
offerId={row?.payload.offerId}
/>
<Tooltip title="Edit Offer">
<Link to={offerRoute}>
<IconButton aria-label="Edit Offer">
<EditIcon color="secondary" fontSize="medium" />
</IconButton>
</Link>
</Tooltip>
</Grid>
</Grid>
</div>

{mobileFieldKeys.map((colKey) => (
<div key={colKey} className={classes.payloadSection}>
<Divider />
return !isMobile ? (
<CollapsedQuickOfferEdit
offerId={rowKey}
offers={offers}
setOffers={setOffers}
/>
) : (
<>
<div className={classes.payloadSection}>
<Grid container alignItems="center">
<Grid item xs={6}>
<Typography className={classes.collapsableTitles} variant="body1">
{columns[colKey]?.label}
Actions
</Typography>
<Typography variant="body2">
{row.fields[colKey].value}
</Typography>
</div>
))}
</>
)
</Grid>
<Grid item xs={6} justifyContent="center">
<CompanyOffersVisibilityActions offer={row?.payload.offer} />
<Tooltip title="Edit Offer">
<Link to={offerRoute}>
<IconButton aria-label="Edit Offer">
<EditIcon color="secondary" fontSize="medium" />
</IconButton>
</Link>
</Tooltip>
</Grid>
</Grid>
<CollapsedQuickOfferEdit
offerId={rowKey}
isMobile={isMobile}
/>
</div>

{mobileFieldKeys.map((colKey) => (
<div key={colKey} className={classes.payloadSection}>
<Divider />
<Typography className={classes.collapsableTitles} variant="body1">
{columns[colKey]?.label}
</Typography>
<Typography variant="body2">
{row.fields[colKey].value}
</Typography>
</div>
))}
</>
);
}, [classes.collapsableTitles, classes.payloadSection, isMobile, offers]);

RowCollapseComponent.propTypes = {
rowKey: PropTypes.string.isRequired,
};


return (
<FilterableTable
title="Offers Management"
tableComponent={ControlledSortableSelectableTable}
defaultSort="publishStartDate"
defaultOrderAscending={false}
rows={offers}
setInitialRows={setOffers}
columns={columns}
sorters={sorters}
filters={filters}
RowActions={RowActions}
rowsPerPage={5}
stickyHeader
emptyMessage="No offers here."
RowContent={RowContent}
RowCollapseComponent={RowCollapseComponent}
handleSelect={() => {}}
handleSelectAll={() => {}}
isSelectableTable={false}
isLoading={isLoading}
error={error}
mobileColumns={mobileCols}
hasMaxHeight={false}
/>
<OfferManagementContext.Provider value={{ offers, setOffers }}>
<FilterableTable
title="Offers Management"
tableComponent={ControlledSortableSelectableTable}
defaultSort="publishStartDate"
defaultOrderAscending={false}
rows={offers}
setInitialRows={setOffers}
columns={columns}
sorters={sorters}
filters={filters}
RowActions={RowActions}
rowsPerPage={5}
stickyHeader
emptyMessage="No offers here."
RowContent={RowContent}
RowCollapseComponent={RowCollapseComponent}
handleSelect={() => {}}
handleSelectAll={() => {}}
isSelectableTable={false}
isLoading={isLoading}
error={error}
mobileColumns={mobileCols}
hasMaxHeight={false}
/>
</OfferManagementContext.Provider>
);
};

Expand Down
Loading

0 comments on commit 6f30dbd

Please sign in to comment.