diff --git a/src/index.tsx b/src/index.tsx index aa59affac..1cf61065b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -41,6 +41,8 @@ import PageSection from "./pages"; import PluginsSection from "./plugins"; import ProductSection from "./products"; import ProductTypesSection from "./productTypes"; +import ServiceSection from "./services"; +import { serviceSection } from "./services/urls"; import ShippingSection from "./shipping"; import SiteSettingsSection from "./siteSettings"; import StaffSection from "./staff"; @@ -227,6 +229,11 @@ const Routes: React.FC = () => { path={attributeSection} component={AttributeSection} /> + {createConfigurationMenu(intl).filter(menu => menu.menuItems.map(item => hasPermission(item.permission, user)) ).length > 0 && ( diff --git a/src/services/components/ServiceCreatePage/ServiceCreatePage.tsx b/src/services/components/ServiceCreatePage/ServiceCreatePage.tsx index 9105526f8..94c787c67 100644 --- a/src/services/components/ServiceCreatePage/ServiceCreatePage.tsx +++ b/src/services/components/ServiceCreatePage/ServiceCreatePage.tsx @@ -17,7 +17,7 @@ import { UserError } from "@saleor/types"; import { PermissionEnum } from "@saleor/types/globalTypes"; import ServiceInfo from "../ServiceInfo"; -export interface ServiceDetailsPageFormData { +export interface ServiceCreatePageFormData { hasFullAccess: boolean; isActive: boolean; name: string; @@ -29,7 +29,7 @@ export interface ServiceCreatePageProps { permissions: ShopInfo_shop_permissions[]; saveButtonBarState: ConfirmButtonTransitionState; onBack: () => void; - onSubmit: (data: ServiceDetailsPageFormData) => void; + onSubmit: (data: ServiceCreatePageFormData) => void; } const ServiceCreatePage: React.FC = props => { @@ -43,7 +43,7 @@ const ServiceCreatePage: React.FC = props => { } = props; const intl = useIntl(); - const initialForm: ServiceDetailsPageFormData = { + const initialForm: ServiceCreatePageFormData = { hasFullAccess: false, isActive: false, name: "", diff --git a/src/services/index.tsx b/src/services/index.tsx index cb7675187..e2d950ca9 100644 --- a/src/services/index.tsx +++ b/src/services/index.tsx @@ -7,45 +7,46 @@ import { sectionNames } from "@saleor/intl"; import { WindowTitle } from "../components/WindowTitle"; import { serviceListPath, - ServiceListUrlQueryParams - // servicePath + ServiceListUrlQueryParams, + servicePath, + ServiceUrlQueryParams } from "./urls"; -// import ServiceDetailsComponent from "./views/ServiceDetails"; +import ServiceDetailsComponent from "./views/ServiceDetails"; import ServiceListComponent from "./views/ServiceList"; -const PluginList: React.StatelessComponent> = ({ - location -}) => { +const ServiceList: React.FC = ({ location }) => { const qs = parseQs(location.search.substr(1)); const params: ServiceListUrlQueryParams = qs; + return ; }; -// const ServiceDetails: React.StatelessComponent> = ({ -// match -// }) => { -// const qs = parseQs(location.search.substr(1)); -// const params: ServiceListUrlQueryParams = qs; +const ServiceDetails: React.FC> = ({ + match +}) => { + const qs = parseQs(location.search.substr(1)); + const params: ServiceUrlQueryParams = qs; -// return ( -// -// ); -// }; + return ( + + ); +}; -const Component = () => { +const ServiceSection = () => { const intl = useIntl(); + return ( <> - - {/* */} + + ); }; -export default Component; +export default ServiceSection; diff --git a/src/services/queries.ts b/src/services/queries.ts index a1be77734..13dff2f79 100644 --- a/src/services/queries.ts +++ b/src/services/queries.ts @@ -68,7 +68,7 @@ const serviceDetails = gql` } } `; -export const ServiceDetailsFragmentQuery = TypedQuery< +export const ServiceDetailsQuery = TypedQuery< ServiceDetails, ServiceDetailsVariables >(serviceDetails); diff --git a/src/services/views/ServiceDetails/ServiceDetails.tsx b/src/services/views/ServiceDetails/ServiceDetails.tsx new file mode 100644 index 000000000..25fd059e7 --- /dev/null +++ b/src/services/views/ServiceDetails/ServiceDetails.tsx @@ -0,0 +1,84 @@ +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 ServiceDetailsPage, { + ServiceDetailsPageFormData +} from "../../components/ServiceDetailsPage"; +import { ServiceDetailsQuery } from "../../queries"; +import { serviceListUrl, serviceUrl, ServiceUrlQueryParams } from "../../urls"; + +interface OrderListProps { + id: string; + params: ServiceUrlQueryParams; +} + +export const ServiceDetails: React.StatelessComponent = ({ + id, + params +}) => { + const navigate = useNavigator(); + const notify = useNotifier(); + const intl = useIntl(); + const shop = useShop(); + + return ( + + {({ data, loading }) => { + const onServiceUpdate = (data: ServiceUpdate) => { + if (!maybe(() => data.serviceUpdate.errors.length !== 0)) { + notify({ + text: intl.formatMessage(commonMessages.savedChanges) + }); + } + }; + const onServiceDelete = (data: ServiceDelete) => { + if (!maybe(() => data.serviceDelete.errors.length !== 0)) { + notify({ + text: intl.formatMessage(commonMessages.savedChanges) + }); + navigate(serviceListUrl()); + } + }; + + const handleBack = navigate(serviceListUrl()); + + const handleDelete = navigate( + serviceUrl(id, { + ...params, + action: "remove" + }) + ); + + const handleSubmit = (data: ServiceDetailsPageFormData) => undefined; + + return ( + <> + data.serviceAccount.name)} /> + shop.permissions)} + service={maybe(() => data.serviceAccount)} + saveButtonBarState="default" + /> + + ); + }} + + ); +}; + +export default ServiceDetails; diff --git a/src/services/views/ServiceDetails/index.ts b/src/services/views/ServiceDetails/index.ts new file mode 100644 index 000000000..f7b2a2d0c --- /dev/null +++ b/src/services/views/ServiceDetails/index.ts @@ -0,0 +1,2 @@ +export { default } from "./ServiceDetails"; +export * from "./ServiceDetails"; diff --git a/src/services/views/ServiceList/ServiceList.tsx b/src/services/views/ServiceList/ServiceList.tsx index e69de29bb..4ff43e746 100644 --- a/src/services/views/ServiceList/ServiceList.tsx +++ b/src/services/views/ServiceList/ServiceList.tsx @@ -0,0 +1,191 @@ +import React from "react"; + +import useListSettings from "@saleor/hooks/useListSettings"; +import useNavigator from "@saleor/hooks/useNavigator"; +import useNotifier from "@saleor/hooks/useNotifier"; +import usePaginator, { + createPaginationState +} from "@saleor/hooks/usePaginator"; +import { useIntl } from "react-intl"; + +import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog"; +import SaveFilterTabDialog, { + SaveFilterTabDialogFormData +} from "@saleor/components/SaveFilterTabDialog"; +import { configurationMenuUrl } from "@saleor/configuration"; +import useShop from "@saleor/hooks/useShop"; +import { commonMessages } from "@saleor/intl"; +import { getMutationState, maybe } from "@saleor/misc"; +import { ListViews } from "@saleor/types"; +import ServiceListPage from "../../components/ServiceListPage"; +import { ServiceListQuery } from "../../queries"; +import { + serviceListUrl, + ServiceListUrlDialog, + ServiceListUrlFilters, + ServiceListUrlQueryParams, + serviceUrl +} from "../../urls"; +import { + areFiltersApplied, + deleteFilterTab, + getActiveFilters, + getFilterTabs, + getFilterVariables, + saveFilterTab +} from "./filter"; + +interface ServiceListProps { + params: ServiceListUrlQueryParams; +} + +export const ServiceList: React.StatelessComponent = ({ + params +}) => { + const navigate = useNavigator(); + const notify = useNotifier(); + const paginate = usePaginator(); + const { updateListSettings, settings } = useListSettings( + ListViews.STAFF_MEMBERS_LIST + ); + const intl = useIntl(); + const shop = useShop(); + + const tabs = getFilterTabs(); + + const currentTab = + params.activeTab === undefined + ? areFiltersApplied(params) + ? tabs.length + 1 + : 0 + : parseInt(params.activeTab, 0); + + const changeFilterField = (filter: ServiceListUrlFilters) => + navigate( + serviceListUrl({ + ...getActiveFilters(params), + ...filter, + activeTab: undefined + }) + ); + + const closeModal = () => + navigate( + serviceListUrl({ + ...params, + action: undefined, + ids: undefined + }), + true + ); + + const openModal = (action: ServiceListUrlDialog, ids?: string[]) => + navigate( + serviceListUrl({ + ...params, + action, + ids + }) + ); + + const handleTabChange = (tab: number) => { + navigate( + serviceListUrl({ + activeTab: tab.toString(), + ...getFilterTabs()[tab - 1].data + }) + ); + }; + + const handleTabDelete = () => { + deleteFilterTab(currentTab); + navigate(serviceListUrl()); + }; + + const handleTabSave = (data: SaveFilterTabDialogFormData) => { + saveFilterTab(data.name, getActiveFilters(params)); + handleTabChange(tabs.length + 1); + }; + + const paginationState = createPaginationState(settings.rowNumber, params); + const queryVariables = React.useMemo( + () => ({ + ...paginationState, + filter: getFilterVariables(params) + }), + [params] + ); + + return ( + + {({ data, loading }) => ( + + {(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) + ); + + const { loadNextPage, loadPreviousPage, pageInfo } = paginate( + maybe(() => data.serviceUsers.pageInfo), + paginationState, + params + ); + + return ( + <> + 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))} + /> + + ); + }} + + )} + + ); +}; + +export default ServiceList;