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

Hide toolbar, checkboxes, Fix small issues

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-08-29 16:16:16 +02:00
parent be5be600c7
commit 89de66be65
11 changed files with 101 additions and 888 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/TableHead/TableHead.tsx
View file

@ -23,10 +23,10 @@ export interface TableHeadProps extends MuiTableHeadProps {
colSpan: number;
disabled: boolean;
dragRows?: boolean;
selected: number;
selected?: number;
items: Node[];
toolbar?: React.ReactNode | React.ReactNodeArray;
toggleAll: (items: Node[], selected: number) => void;
toggleAll?: (items: Node[], selected: number) => void;
}
const styles = (theme: Theme) =>
@ -101,25 +101,26 @@ const TableHead = withStyles(styles, {
})}
/>
)}
{(items === undefined || items.length > 0) && (
<TableCell
padding="checkbox"
className={classNames({
[classes.checkboxSelected]: selected,
[classes.dragRows]: dragRows
})}
>
<Checkbox
{(items === undefined || items.length > 0) &&
(selected && (
<TableCell
padding="checkbox"
className={classNames({
[classes.checkboxPartialSelect]:
items && items.length > selected && selected > 0
[classes.checkboxSelected]: selected,
[classes.dragRows]: dragRows
})}
checked={selected === 0 ? false : true}
disabled={disabled}
onChange={() => toggleAll(items, selected)}
/>
</TableCell>
)}
>
<Checkbox
className={classNames({
[classes.checkboxPartialSelect]:
items && items.length > selected && selected > 0
})}
checked={selected === 0 ? false : true}
disabled={disabled}
onChange={() => toggleAll(items, selected)}
/>
</TableCell>
))}
{selected ? (
<>
<TableCell

8
src/plugins/components/PluginInfo/PluginInfo.tsx
View file

@ -18,13 +18,9 @@ interface PluginInfoProps {
const styles = createStyles({
status: {
color: "#3D3D3D",
fontSize: 16,
fontWeight: 400,
paddingTop: 20
},
title: {
color: "#616161",
fontSize: 14,
paddingTop: 10
}
@ -58,9 +54,7 @@ const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
)}
<FormSpacer />
<Hr />
<Typography className={classes.status} variant="h6">
{i18n.t("Status")}
</Typography>
<Typography className={classes.status}>{i18n.t("Status")}</Typography>
<ControlledSwitch
checked={data.active}
label={"Set plugin as Active"}

8
src/plugins/components/PluginSettings/PluginSettings.tsx
View file

@ -4,6 +4,7 @@ import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch";
import { FormErrors } from "@saleor/types";
import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
import React from "react";
import i18n from "../../../i18n";
@ -11,11 +12,7 @@ import { FormData } from "../PluginsDetailsPage";
interface PluginSettingsProps {
data: FormData;
errors: Partial<{
description: string;
domain: string;
name: string;
}>;
errors: FormErrors<"name" | "configuration">;
disabled: boolean;
onChange: (event: React.ChangeEvent<any>) => void;
}
@ -64,6 +61,7 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
? configuration.value === "true"
: configuration.value
}
disabled={disabled}
label={configuration.label}
name={configuration.name}
onChange={onChange}

16
src/plugins/components/PluginsDetailsPage/PluginsDetailsPage.tsx
View file

@ -11,6 +11,7 @@ import { UserError } from "@saleor/types";
import React from "react";
import i18n from "../../../i18n";
import { Plugin_plugin } from "../../types/Plugin";
import PluginInfo from "../PluginInfo";
import PluginSettings from "../PluginSettings";
@ -30,7 +31,7 @@ export interface FormData {
export interface PluginsDetailsPageProps {
disabled: boolean;
errors: UserError[];
plugin: FormData;
plugin: Plugin_plugin;
saveButtonBarState: ConfirmButtonTransitionState;
onBack: () => void;
onSubmit: (data: FormData) => void;
@ -54,23 +55,22 @@ const PluginsDetailsPage: React.StatelessComponent<PluginsDetailsPageProps> = ({
return (
<Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
{({ data, errors, hasChanged, submit, set, triggerChange }) => {
const newData = {
active: data.active,
configuration: data.configuration
};
const onChange = event => {
const newData = {
active: data.active,
configuration: data.configuration
};
const { name, value } = event.target;
name === "active"
? (newData.active = value)
: (newData.active = data.active);
newData.configuration &&
if (newData.configuration) {
newData.configuration.map(item => {
if (item.name === name) {
item.value = value;
}
});
}
triggerChange();
set(newData);
};

27
src/plugins/components/PluginsList/PluginsList.tsx
View file

@ -13,17 +13,17 @@ import TableRow from "@material-ui/core/TableRow";
import EditIcon from "@material-ui/icons/Edit";
import React from "react";
import Checkbox from "@saleor/components/Checkbox";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
import i18n from "@saleor/i18n";
import { maybe, renderCollection } from "@saleor/misc";
import { ListActionsWithoutToolbar, ListProps } from "@saleor/types";
import { ListProps } from "@saleor/types";
import { translateBoolean } from "@saleor/utils/i18n";
import { Plugins_plugins_edges_node } from "../../types/Plugins";
export interface PluginListProps extends ListProps, ListActionsWithoutToolbar {
export interface PluginListProps extends ListProps {
plugins: Plugins_plugins_edges_node[];
}
@ -59,21 +59,15 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
pageInfo,
onRowClick,
onUpdateListSettings,
onPreviousPage,
isChecked,
selected,
toggle,
toggleAll
onPreviousPage
}: PluginListProps & WithStyles<typeof styles>) => {
return (
<Card>
<Table>
<TableHead
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={plugins}
toggleAll={toggleAll}
>
<TableCell className={classes.colName} padding="dense">
{i18n.t("Name", { context: "table header" })}
@ -106,24 +100,13 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
{renderCollection(
plugins,
plugin => {
const isSelected = plugin ? isChecked(plugin.id) : false;
return (
<TableRow
hover={!!plugin}
className={!!plugin ? classes.link : undefined}
onClick={plugin ? onRowClick(plugin.id) : undefined}
key={plugin ? plugin.id : "skeleton"}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
disabled={disabled}
disableClickPropagation
onChange={() => toggle(plugin.id)}
/>
</TableCell>
<TableCell className={classes.colName}>
{maybe<React.ReactNode>(() => plugin.name, <Skeleton />)}
</TableCell>
@ -131,7 +114,7 @@ const PluginList = withStyles(styles, { name: "PluginList" })(
{maybe<React.ReactNode>(
() => (
<StatusLabel
label={plugin.active ? i18n.t("Yes") : i18n.t("No")}
label={translateBoolean(plugin.active)}
status={plugin.active ? "success" : "error"}
/>
),

16
src/plugins/components/PluginsListPage/PluginsListPage.tsx
View file

@ -4,13 +4,11 @@ import AppHeader from "@saleor/components/AppHeader";
import Container from "@saleor/components/Container";
import PageHeader from "@saleor/components/PageHeader";
import i18n from "@saleor/i18n";
import { ListActionsWithoutToolbar, PageListProps } from "@saleor/types";
import { PageListProps } from "@saleor/types";
import { Plugins_plugins_edges_node } from "../../types/Plugins";
import PluginsList from "../PluginsList/PluginsList";
export interface PluginsListPageProps
extends PageListProps,
ListActionsWithoutToolbar {
export interface PluginsListPageProps extends PageListProps {
plugins: Plugins_plugins_edges_node[];
onBack: () => void;
}
@ -24,11 +22,7 @@ const PluginsListPage: React.StatelessComponent<PluginsListPageProps> = ({
onRowClick,
onUpdateListSettings,
pageInfo,
plugins,
isChecked,
selected,
toggle,
toggleAll
plugins
}) => (
<Container>
<AppHeader onBack={onBack}>{i18n.t("Configuration")}</AppHeader>
@ -42,10 +36,6 @@ const PluginsListPage: React.StatelessComponent<PluginsListPageProps> = ({
onUpdateListSettings={onUpdateListSettings}
onRowClick={onRowClick}
pageInfo={pageInfo}
isChecked={isChecked}
selected={selected}
toggle={toggle}
toggleAll={toggleAll}
/>
</Container>
);

11
src/plugins/urls.ts
View file

@ -1,21 +1,16 @@
import { stringify as stringifyQs } from "qs";
import urlJoin from "url-join";
import { BulkAction, Dialog, Pagination, SingleAction } from "../types";
import { Pagination, SingleAction } from "../types";
export const pluginsSection = "/plugins/";
export const pluginsListPath = pluginsSection;
export type PluginsListUrlDialog = "remove" | "remove-many";
export type PluginsListUrlQueryParams = BulkAction &
Dialog<PluginsListUrlDialog> &
Pagination &
SingleAction;
export type PluginsListUrlQueryParams = Pagination & SingleAction;
export const pluginsListUrl = (params?: PluginsListUrlQueryParams) =>
pluginsListPath + "?" + stringifyQs(params);
export const pluginsPath = (id: string) => urlJoin(pluginsSection, id);
export type PluginsUrlDialog = "edit-item" | "remove";
export type PluginsUrlQueryParams = Dialog<PluginsUrlDialog> & SingleAction;
export type PluginsUrlQueryParams = SingleAction;
export const pluginsUrl = (id: string, params?: PluginsUrlQueryParams) =>
pluginsPath(encodeURIComponent(id)) + "?" + stringifyQs(params);

9
src/plugins/views/PluginsDetails.tsx
View file

@ -62,20 +62,23 @@ export const PluginsDetails: React.StatelessComponent<PluginsDetailsProps> = ({
plugin={maybe(() => PluginDetails.data.plugin)}
onBack={() => navigate(pluginsListUrl())}
onSubmit={formData => {
const configurationInput = [];
formData.configuration &&
formData.configuration.map(item => {
let configurationInput = [];
if (formData.configuration) {
configurationInput = formData.configuration.map(item => {
configurationInput.push({
name: item.name,
value: item.value.toString()
});
});
}
pluginUpdate({
variables: {
id,
input: {
active: formData.active,
configuration: configurationInput
? configurationInput
: null
}
}
});

8
src/plugins/views/PluginsList.tsx
View file

@ -1,5 +1,4 @@
import { configurationMenuUrl } from "@saleor/configuration";
import useBulkActions from "@saleor/hooks/useBulkActions";
import useListSettings from "@saleor/hooks/useListSettings";
import useNavigator from "@saleor/hooks/useNavigator";
import usePaginator, {
@ -21,9 +20,6 @@ export const PluginsList: React.StatelessComponent<PluginsListProps> = ({
}) => {
const navigate = useNavigator();
const paginate = usePaginator();
const { isSelected, listElements, toggle, toggleAll } = useBulkActions(
params.ids
);
const { updateListSettings, settings } = useListSettings(
ListViews.PLUGINS_LIST
);
@ -50,10 +46,6 @@ export const PluginsList: React.StatelessComponent<PluginsListProps> = ({
onPreviousPage={loadPreviousPage}
onUpdateListSettings={updateListSettings}
onRowClick={id => () => navigate(pluginsUrl(id))}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
/>
</>
);

841
src/storybook/__snapshots__/Stories.test.ts.snap
View file

File diff suppressed because it is too large Load diff

6
src/storybook/stories/plugins/PluginsListPage.tsx
View file

@ -10,12 +10,8 @@ import Decorator from "../../Decorator";
const props: PluginsListPageProps = {
...pageListProps.default,
isChecked: () => undefined,
onBack: () => undefined,
plugins: pluginList,
selected: undefined,
toggle: () => undefined,
toggleAll: () => undefined
plugins: pluginList
};
storiesOf("Views / Plugins / Plugin list", module)