djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add basic views

Browse source
This commit is contained in:
dominik-zeglen 2019-09-27 14:21:38 +02:00
parent 2f09cab0c3
commit 8990940fc6
14 changed files with 325 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/services/components/ServiceDetailsPage/ServiceDetailsPage.tsx
View file

@ -97,14 +97,20 @@ const ServiceDetailsPage: React.FC<ServiceDetailsPageProps> = props => {
onDelete={onTokenDelete}
/>
</div>
<AccountPermissions
data={data}
disabled={disabled}
permissions={permissions}
onChange={change}
/>
<CardSpacer />
<AccountStatus data={data} disabled={disabled} onChange={change} />
<div>
<AccountPermissions
data={data}
disabled={disabled}
permissions={permissions}
onChange={change}
/>
<CardSpacer />
<AccountStatus
data={data}
disabled={disabled}
onChange={change}
/>
</div>
</Grid>
<SaveButtonBar
disabled={disabled || !hasChanged}

128
src/services/components/ServiceList/ServiceList.tsx
View file

@ -9,6 +9,7 @@ import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Typography from "@material-ui/core/Typography";
import DeleteIcon from "@material-ui/icons/Delete";
@ -18,13 +19,12 @@ import { FormattedMessage } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
import { maybe, renderCollection } from "@saleor/misc";
import { ListActions, ListProps } from "@saleor/types";
import { ListProps } from "@saleor/types";
import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
export interface ServiceListProps extends ListProps, ListActions {
export interface ServiceListProps extends ListProps {
services: ServiceList_serviceAccounts_edges_node[];
onRemove: (id: string) => void;
}
@ -51,10 +51,13 @@ const styles = (theme: Theme) =>
},
table: {
tableLayout: "fixed"
},
tableRow: {
cursor: "pointer"
}
});
const numberOfColumns = 3;
const numberOfColumns = 2;
const ServiceList = withStyles(styles, {
name: "ServiceList"
@ -69,24 +72,12 @@ const ServiceList = withStyles(styles, {
onRemove,
onRowClick,
pageInfo,
services,
isChecked,
selected,
toggle,
toggleAll,
toolbar
services
}: ServiceListProps & WithStyles<typeof styles>) => (
<Table className={classes.table}>
<TableHead
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={services}
toggleAll={toggleAll}
toolbar={toolbar}
>
<TableHead>
<TableCell className={classes.colName}>
<FormattedMessage defaultMessage="Code" description="voucher code" />
<FormattedMessage defaultMessage="Name" description="service name" />
</TableCell>
<TableCell />
</TableHead>
@ -108,62 +99,49 @@ const ServiceList = withStyles(styles, {
<TableBody>
{renderCollection(
services,
service => {
const isSelected = service ? isChecked(service.id) : false;
return (
<TableRow
className={!!service ? classes.tableRow : undefined}
hover={!!service}
key={service ? service.id : "skeleton"}
selected={isSelected}
onClick={service ? onRowClick(service.id) : undefined}
>
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
disabled={disabled}
disableClickPropagation
onChange={() => toggle(service.id)}
/>
</TableCell>
<TableCell className={classes.colName}>
<span data-tc="name">
{maybe<React.ReactNode>(() => service.name, <Skeleton />)}
</span>
<Typography data-tc="isActive" variant="caption">
{maybe(() =>
service.isActive ? (
<FormattedMessage
defaultMessage="active"
description="account status"
/>
) : (
<FormattedMessage
defaultMessage="inactive"
description="account status"
/>
)
)}
</Typography>
</TableCell>
<TableCell className={classes.colAction}>
<IconButton
color="primary"
onClick={service ? onRowClick(service.id) : undefined}
>
<EditIcon />
</IconButton>
<IconButton
color="primary"
onClick={service ? () => onRemove(service.id) : undefined}
>
<DeleteIcon />
</IconButton>
</TableCell>
</TableRow>
);
},
service => (
<TableRow
className={!!service ? classes.tableRow : undefined}
hover={!!service}
key={service ? service.id : "skeleton"}
onClick={service ? onRowClick(service.id) : undefined}
>
<TableCell className={classes.colName}>
<span data-tc="name">
{maybe<React.ReactNode>(() => service.name, <Skeleton />)}
</span>
<Typography data-tc="isActive" variant="caption">
{maybe(() =>
service.isActive ? (
<FormattedMessage
defaultMessage="active"
description="account status"
/>
) : (
<FormattedMessage
defaultMessage="inactive"
description="account status"
/>
)
)}
</Typography>
</TableCell>
<TableCell className={classes.colAction}>
<IconButton
color="primary"
onClick={service ? onRowClick(service.id) : undefined}
>
<EditIcon />
</IconButton>
<IconButton
color="primary"
onClick={service ? () => onRemove(service.id) : undefined}
>
<DeleteIcon />
</IconButton>
</TableCell>
</TableRow>
),
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>

8
src/services/components/ServiceListPage/ServiceListPage.tsx
View file

@ -8,18 +8,12 @@ import Container from "@saleor/components/Container";
import PageHeader from "@saleor/components/PageHeader";
import SearchBar from "@saleor/components/SearchBar";
import { sectionNames } from "@saleor/intl";
import {
ListActions,
PageListProps,
SearchPageProps,
TabPageProps
} from "@saleor/types";
import { PageListProps, SearchPageProps, TabPageProps } from "@saleor/types";
import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
import ServiceList from "../ServiceList";
export interface ServiceListPageProps
extends PageListProps,
ListActions,
SearchPageProps,
TabPageProps {
services: ServiceList_serviceAccounts_edges_node[];

3
src/services/index.tsx
View file

@ -6,11 +6,13 @@ import { Route, RouteComponentProps, Switch } from "react-router-dom";
import { sectionNames } from "@saleor/intl";
import { WindowTitle } from "../components/WindowTitle";
import {
serviceAddPath,
serviceListPath,
ServiceListUrlQueryParams,
servicePath,
ServiceUrlQueryParams
} from "./urls";
import ServiceCreate from "./views/ServiceCreate";
import ServiceDetailsComponent from "./views/ServiceDetails";
import ServiceListComponent from "./views/ServiceList";
@ -43,6 +45,7 @@ const ServiceSection = () => {
<WindowTitle title={intl.formatMessage(sectionNames.serviceAccounts)} />
<Switch>
<Route exact path={serviceListPath} component={ServiceList} />
<Route exact path={serviceAddPath} component={ServiceCreate} />
<Route path={servicePath(":id")} component={ServiceDetails} />
</Switch>
</>

24
src/services/mutations.ts Normal file
View file

@ -0,0 +1,24 @@
import gql from "graphql-tag";
import { TypedMutation } from "../mutations";
import { serviceFragment } from "./queries";
import { ServiceCreate, ServiceCreateVariables } from "./types/ServiceCreate";
export const serviceCreateMutation = gql`
${serviceFragment}
mutation ServiceCreate($input: ServiceAccountInput!) {
serviceAccountCreate(input: $input) {
errors {
field
message
}
serviceAccount {
...ServiceFragment
}
}
}
`;
export const ServiceCreateMutation = TypedMutation<
ServiceCreate,
ServiceCreateVariables
>(serviceCreateMutation);

3
src/services/queries.ts
View file

@ -37,6 +37,9 @@ const serviceList = gql`
...ServiceFragment
}
}
pageInfo {
...PageInfoFragment
}
}
}
`;

36
src/services/types/ServiceCreate.ts Normal file
View file

@ -0,0 +1,36 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { ServiceAccountInput } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: ServiceCreate
// ====================================================
export interface ServiceCreate_serviceAccountCreate_errors {
__typename: "Error";
field: string | null;
message: string | null;
}
export interface ServiceCreate_serviceAccountCreate_serviceAccount {
__typename: "ServiceAccount";
id: string;
name: string | null;
isActive: boolean | null;
}
export interface ServiceCreate_serviceAccountCreate {
__typename: "ServiceAccountCreate";
errors: ServiceCreate_serviceAccountCreate_errors[] | null;
serviceAccount: ServiceCreate_serviceAccountCreate_serviceAccount | null;
}
export interface ServiceCreate {
serviceAccountCreate: ServiceCreate_serviceAccountCreate | null;
}
export interface ServiceCreateVariables {
input: ServiceAccountInput;
}

9
src/services/types/ServiceList.ts
View file

@ -20,9 +20,18 @@ export interface ServiceList_serviceAccounts_edges {
node: ServiceList_serviceAccounts_edges_node;
}
export interface ServiceList_serviceAccounts_pageInfo {
__typename: "PageInfo";
endCursor: string | null;
hasNextPage: boolean;
hasPreviousPage: boolean;
startCursor: string | null;
}
export interface ServiceList_serviceAccounts {
__typename: "ServiceAccountCountableConnection";
edges: ServiceList_serviceAccounts_edges[];
pageInfo: ServiceList_serviceAccounts_pageInfo;
}
export interface ServiceList {

71
src/services/views/ServiceCreate/ServiceCreate.tsx Normal file
View file

@ -0,0 +1,71 @@
import React from "react";
import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import useShop from "@saleor/hooks/useShop";
import { commonMessages } from "@saleor/intl";
import { getMutationState, maybe } from "@saleor/misc";
import { ServiceCreateMutation } from "@saleor/services/mutations";
import ServiceCreatePage, {
ServiceCreatePageFormData
} from "../../components/ServiceCreatePage";
import { serviceListUrl, serviceUrl, ServiceUrlQueryParams } from "../../urls";
export const ServiceCreate: React.StatelessComponent = () => {
const navigate = useNavigator();
const notify = useNotifier();
const intl = useIntl();
const shop = useShop();
const onSubmit = () => undefined;
const handleBack = () => navigate(serviceListUrl());
return (
<ServiceCreateMutation onCompleted={onSubmit}>
{(serviceCreate, serviceCreateOpts) => {
const handleSubmit = (data: ServiceCreatePageFormData) =>
serviceCreate({
variables: {
input: {
isActive: data.isActive,
name: data.name,
permissions: data.hasFullAccess
? shop.permissions.map(permission => permission.code)
: data.permissions
}
}
});
const formTransitionState = getMutationState(
serviceCreateOpts.called,
serviceCreateOpts.loading,
maybe(() => serviceCreateOpts.data.serviceAccountCreate.errors)
);
return (
<>
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create Service Account",
description: "window title"
})}
/>
<ServiceCreatePage
disabled={false}
errors={[]}
onBack={handleBack}
onSubmit={handleSubmit}
permissions={maybe(() => shop.permissions)}
saveButtonBarState={formTransitionState}
/>
</>
);
}}
</ServiceCreateMutation>
);
};
export default ServiceCreate;

2
src/services/views/ServiceCreate/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./ServiceCreate";
export * from "./ServiceCreate";

39
src/services/views/ServiceDetails/ServiceDetails.tsx
View file

@ -11,7 +11,12 @@ import ServiceDetailsPage, {
ServiceDetailsPageFormData
} from "../../components/ServiceDetailsPage";
import { ServiceDetailsQuery } from "../../queries";
import { serviceListUrl, serviceUrl, ServiceUrlQueryParams } from "../../urls";
import {
serviceListUrl,
serviceUrl,
ServiceUrlDialog,
ServiceUrlQueryParams
} from "../../urls";
interface OrderListProps {
id: string;
@ -27,6 +32,25 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
const intl = useIntl();
const shop = useShop();
const closeModal = () =>
navigate(
serviceUrl(id, {
...params,
action: undefined,
id: undefined
}),
true
);
const openModal = (action: ServiceUrlDialog, tokenId?: string) =>
navigate(
serviceUrl(id, {
...params,
action,
id: tokenId
})
);
return (
<ServiceDetailsQuery
displayLoader
@ -50,14 +74,7 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
}
};
const handleBack = navigate(serviceListUrl());
const handleDelete = navigate(
serviceUrl(id, {
...params,
action: "remove"
})
);
const handleBack = () => navigate(serviceListUrl());
const handleSubmit = (data: ServiceDetailsPageFormData) => undefined;
@ -68,8 +85,10 @@ export const ServiceDetails: React.StatelessComponent<OrderListProps> = ({
disabled={loading}
errors={[]}
onBack={handleBack}
onDelete={handleDelete}
onDelete={() => openModal("remove")}
onSubmit={handleSubmit}
onTokenCreate={() => openModal("create-token")}
onTokenDelete={() => openModal("delete-token")}
permissions={maybe(() => shop.permissions)}
service={maybe(() => data.serviceAccount)}
saveButtonBarState="default"

107
src/services/views/ServiceList/ServiceList.tsx
View file

@ -20,6 +20,7 @@ import { ListViews } from "@saleor/types";
import ServiceListPage from "../../components/ServiceListPage";
import { ServiceListQuery } from "../../queries";
import {
serviceAddUrl,
serviceListUrl,
ServiceListUrlDialog,
ServiceListUrlFilters,
@ -118,72 +119,50 @@ export const ServiceList: React.StatelessComponent<ServiceListProps> = ({
return (
<ServiceListQuery displayLoader variables={queryVariables}>
{({ data, loading }) => (
<TypedServiceMemberAddMutation
onCompleted={handleServiceMemberAddSuccess}
>
{(addServiceMember, addServiceMemberData) => {
const handleServiceMemberAdd = (variables: AddServiceMemberForm) =>
addServiceMember({
variables: {
input: {
email: variables.email,
firstName: variables.firstName,
lastName: variables.lastName,
permissions: variables.fullAccess
? maybe(() => shop.permissions.map(perm => perm.code))
: undefined,
sendPasswordEmail: true
}
}
});
const addTransitionState = getMutationState(
addServiceMemberData.called,
addServiceMemberData.loading,
maybe(() => addServiceMemberData.data.serviceCreate.errors)
);
{({ data, loading }) => {
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
maybe(() => data.serviceAccounts.pageInfo),
paginationState,
params
);
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
maybe(() => data.serviceUsers.pageInfo),
paginationState,
params
);
const handleCreate = () => navigate(serviceAddUrl);
const handleRemove = () =>
navigate(
serviceListUrl({
...params,
action: "remove"
})
);
return (
<>
<ServiceListPage
currentTab={currentTab}
initialSearch={params.query || ""}
onSearchChange={query => changeFilterField({ query })}
onAll={() => navigate(serviceListUrl())}
onTabChange={handleTabChange}
onTabDelete={() => openModal("delete-search")}
onTabSave={() => openModal("save-search")}
tabs={tabs.map(tab => tab.name)}
disabled={loading || addServiceMemberData.loading}
settings={settings}
pageInfo={pageInfo}
serviceMembers={maybe(() =>
data.serviceUsers.edges.map(edge => edge.node)
)}
onAdd={() =>
navigate(
serviceListUrl({
action: "add"
})
)
}
onBack={() => navigate(configurationMenuUrl)}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
onRowClick={id => () => navigate(serviceUrl(id))}
/>
</>
);
}}
</TypedServiceMemberAddMutation>
)}
return (
<>
<ServiceListPage
currentTab={currentTab}
initialSearch={params.query || ""}
onSearchChange={query => changeFilterField({ query })}
onAll={() => navigate(serviceListUrl())}
onTabChange={handleTabChange}
onTabDelete={() => openModal("delete-search")}
onTabSave={() => openModal("save-search")}
tabs={tabs.map(tab => tab.name)}
disabled={loading}
settings={settings}
pageInfo={pageInfo}
services={maybe(() =>
data.serviceAccounts.edges.map(edge => edge.node)
)}
onAdd={handleCreate}
onBack={() => navigate(configurationMenuUrl)}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
onRowClick={id => () => navigate(serviceUrl(id))}
onRemove={handleRemove}
/>
</>
);
}}
</ServiceListQuery>
);
};

31
src/services/views/ServiceList/filter.ts Normal file
View file

@ -0,0 +1,31 @@
import { ServiceAccountFilterInput } from "@saleor/types/globalTypes";
import {
createFilterTabUtils,
createFilterUtils
} from "../../../utils/filters";
import {
ServiceListUrlFilters,
ServiceListUrlFiltersEnum,
ServiceListUrlQueryParams
} from "../../urls";
export const STAFF_FILTERS_KEY = "staffFilters";
export function getFilterVariables(
params: ServiceListUrlFilters
): ServiceAccountFilterInput {
return {
search: params.query
};
}
export const {
deleteFilterTab,
getFilterTabs,
saveFilterTab
} = createFilterTabUtils<ServiceListUrlFilters>(STAFF_FILTERS_KEY);
export const { areFiltersApplied, getActiveFilters } = createFilterUtils<
ServiceListUrlQueryParams,
ServiceListUrlFilters
>(ServiceListUrlFiltersEnum);

6
src/types/globalTypes.ts
View file

@ -655,6 +655,12 @@ export interface ServiceAccountFilterInput {
isActive?: boolean | null;
}
export interface ServiceAccountInput {
name?: string | null;
isActive?: boolean | null;
permissions?: (PermissionEnum | null)[] | null;
}
export interface ShippingPriceInput {
name?: string | null;
price?: any | null;