@evershop/evershop 1.1.0 → 1.2.1

package/src/modules/cms/pages/admin/widgetEdit+widgetNew/General.jsx

@@ -0,0 +1,185 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Select from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import { Field } from '@components/common/form/Field';
+import { Card } from '@components/admin/cms/Card';
+
+const components = {
+  DropdownIndicator: null
+};
+
+const createOption = (label) => ({
+  label,
+  value: label
+});
+
+function AreaInput({ values }) {
+  const [inputValue, setInputValue] = React.useState('');
+  const [value, setValue] = React.useState(values);
+
+  const handleKeyDown = (event) => {
+    if (!inputValue) return;
+    switch (event.key) {
+      case 'Enter':
+      case 'Tab':
+        setValue((prev) => [...prev, createOption(inputValue)]);
+        setInputValue('');
+        event.preventDefault();
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <CreatableSelect
+      components={components}
+      inputValue={inputValue}
+      name="area[]"
+      isClearable
+      isMulti
+      menuIsOpen={false}
+      onChange={(newValue) => {
+        setValue(newValue);
+      }}
+      onInputChange={(newValue) => setInputValue(newValue)}
+      onKeyDown={handleKeyDown}
+      placeholder="Type area and press enter..."
+      value={value}
+    />
+  );
+}
+
+AreaInput.propTypes = {
+  values: PropTypes.arrayOf(
+    PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })
+  )
+};
+
+AreaInput.defaultProps = {
+  values: []
+};
+
+export default function General({ widget, routes }) {
+  const allRoutes = [
+    {
+      value: 'all',
+      label: 'All',
+      isAdmin: false,
+      isApi: false,
+      method: ['GET']
+    },
+    ...routes
+  ];
+  return (
+    <Card>
+      <Card.Session title="Name">
+        <Field
+          type="text"
+          name="name"
+          value={widget?.name}
+          placeholder="Name"
+          validationRules={['notEmpty']}
+        />
+      </Card.Session>
+      <Card.Session title="Status">
+        <Field
+          type="radio"
+          name="status"
+          options={[
+            { value: 0, text: 'Disabled' },
+            { value: 1, text: 'Enabled' }
+          ]}
+          value={widget ? widget.status : 1}
+        />
+      </Card.Session>
+      <Card.Session title="Area">
+        <AreaInput
+          values={
+            widget?.area?.length > 0
+              ? widget.area.map((a) => ({ value: a, label: a }))
+              : []
+          }
+        />
+      </Card.Session>
+      <Card.Session title="Page">
+        <Select
+          name="route[]"
+          options={allRoutes.filter(
+            (r) =>
+              r.isApi === false &&
+              r.isAdmin === false &&
+              r.method.includes('GET') &&
+              r.method.length === 1
+          )}
+          hideSelectedOptions
+          isMulti
+          aria-label="Select country"
+          defaultValue={
+            widget?.route
+              ? allRoutes.filter((r) => widget.route.includes(r.value))
+              : []
+          }
+          className="page-select relative z-50"
+        />
+      </Card.Session>
+      <Card.Session title="Sort order">
+        <Field
+          type="text"
+          name="sort_order"
+          value={widget?.sortOrder}
+          placeholder="Sort order"
+          validationRules={['notEmpty', 'number']}
+        />
+      </Card.Session>
+    </Card>
+  );
+}
+
+General.propTypes = {
+  widget: PropTypes.shape({
+    status: PropTypes.number,
+    name: PropTypes.string.isRequired,
+    sortOrder: PropTypes.number,
+    area: PropTypes.string,
+    route: PropTypes.string
+  }),
+  routes: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string,
+      isApi: PropTypes.bool,
+      isAdmin: PropTypes.bool,
+      method: PropTypes.arrayOf(PropTypes.string)
+    })
+  ).isRequired
+};
+
+General.defaultProps = {
+  widget: null
+};
+
+export const layout = {
+  areaId: 'rightSide',
+  sortOrder: 15
+};
+
+export const query = `
+  query Query {
+    widget(id: getContextValue("widgetId", null)) {
+      name
+      status
+      sortOrder
+      area
+      route
+    }
+    routes {
+      value: id
+      label: name
+      isApi
+      isAdmin
+      method
+    }
+  }
+`;

package/src/modules/cms/pages/admin/widgetEdit+widgetNew/PageHeading.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import PageHeading from '@components/admin/cms/PageHeading';
+
+export default function WidgetEditPageHeading({ backUrl, widget }) {
+  return (
+    <PageHeading
+      backUrl={backUrl}
+      heading={widget ? `Editing widget ${widget.name}` : 'Create A New Widget'}
+    />
+  );
+}
+
+WidgetEditPageHeading.propTypes = {
+  backUrl: PropTypes.string.isRequired,
+  widget: PropTypes.shape({
+    name: PropTypes.string.isRequired
+  })
+};
+
+WidgetEditPageHeading.defaultProps = {
+  widget: null
+};
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 5
+};
+
+export const query = `
+  query Query {
+    page: widget(id: getContextValue("widgetId", null)) {
+      name
+    }
+    backUrl: url(routeId: "widgetGrid")
+  }
+`;

package/src/modules/cms/pages/admin/widgetEdit+widgetNew/Setting.jsx

@@ -0,0 +1,55 @@
+/* eslint-disable no-param-reassign */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Card } from '@components/admin/cms/Card';
+import Area from '@components/common/Area';
+
+export default function Setting({ type }) {
+  const areaId = `widget_setting_form`;
+  return (
+    <Card title={`${type.name} widget setting`}>
+      <Card.Session>
+        <Area id={areaId} noOurter />
+      </Card.Session>
+    </Card>
+  );
+}
+
+Setting.propTypes = {
+  widget: PropTypes.shape({
+    urlKey: PropTypes.string,
+    metaTitle: PropTypes.string,
+    metaKeywords: PropTypes.string,
+    metaDescription: PropTypes.string
+  }),
+  type: PropTypes.shape({
+    code: PropTypes.string,
+    name: PropTypes.string
+  })
+};
+
+Setting.defaultProps = {
+  widget: {},
+  type: {}
+};
+
+export const layout = {
+  areaId: 'leftSide',
+  sortOrder: 30
+};
+
+export const query = `
+  query Query {
+    widget: widget(id: getContextValue('widgetId', null)) {
+      name
+      status
+      area
+      route
+      settings
+    }
+    type: widgetType(code: getContextValue('type', null)) {
+      code
+      name
+    }
+  }
+`;

package/src/modules/cms/pages/admin/widgetGrid/Grid.jsx

@@ -0,0 +1,415 @@
+/* eslint-disable react/no-unstable-nested-components */
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import axios from 'axios';
+import Pagination from '@components/common/grid/Pagination';
+import { useAlertContext } from '@components/common/modal/Alert';
+import { Checkbox } from '@components/common/form/fields/Checkbox';
+import { Card } from '@components/admin/cms/Card';
+import Area from '@components/common/Area';
+import StatusRow from '@components/common/grid/rows/StatusRow';
+import PageName from '@components/admin/cms/cmsPageGrid/rows/PageName';
+import { Form } from '@components/common/form/Form';
+import { Field } from '@components/common/form/Field';
+import SortableHeader from '@components/common/grid/headers/Sortable';
+import WidgetTypeRow from '@components/admin/cms/widget/grid/WidgetTypeRow';
+
+function Actions({ widgets = [], selectedIds = [] }) {
+  const { openAlert, closeAlert } = useAlertContext();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const updatePages = async (status) => {
+    setIsLoading(true);
+    const promises = widgets
+      .filter((widget) => selectedIds.includes(widget.uuid))
+      .map((widget) =>
+        axios.patch(widget.updateApi, {
+          status
+        })
+      );
+    await Promise.all(promises);
+    setIsLoading(false);
+    // Refresh the page
+    window.location.reload();
+  };
+
+  const deletePages = async () => {
+    setIsLoading(true);
+    const promises = widgets
+      .filter((widget) => selectedIds.includes(widget.uuid))
+      .map((widget) => axios.delete(widget.deleteApi));
+    await Promise.all(promises);
+    setIsLoading(false);
+    // Refresh the page
+    window.location.reload();
+  };
+
+  const actions = [
+    {
+      name: 'Disable',
+      onAction: () => {
+        openAlert({
+          heading: `Disable ${selectedIds.length} widgets`,
+          content: 'Are you sure?',
+          primaryAction: {
+            title: 'Cancel',
+            onAction: closeAlert,
+            variant: 'primary'
+          },
+          secondaryAction: {
+            title: 'Disable',
+            onAction: async () => {
+              await updatePages(0);
+            },
+            variant: 'critical',
+            isLoading: false
+          }
+        });
+      }
+    },
+    {
+      name: 'Enable',
+      onAction: () => {
+        openAlert({
+          heading: `Enable ${selectedIds.length} widgets`,
+          content: 'Are you sure?',
+          primaryAction: {
+            title: 'Cancel',
+            onAction: closeAlert,
+            variant: 'primary'
+          },
+          secondaryAction: {
+            title: 'Enable',
+            onAction: async () => {
+              await updatePages(1);
+            },
+            variant: 'critical',
+            isLoading: false
+          }
+        });
+      }
+    },
+    {
+      name: 'Delete',
+      onAction: () => {
+        openAlert({
+          heading: `Delete ${selectedIds.length} widgets`,
+          content: <div>Can&apos;t be undone</div>,
+          primaryAction: {
+            title: 'Cancel',
+            onAction: closeAlert,
+            variant: 'primary'
+          },
+          secondaryAction: {
+            title: 'Delete',
+            onAction: async () => {
+              await deletePages();
+            },
+            variant: 'critical',
+            isLoading
+          }
+        });
+      }
+    }
+  ];
+
+  return (
+    <tr>
+      {selectedIds.length === 0 && null}
+      {selectedIds.length > 0 && (
+        <td style={{ borderTop: 0 }} colSpan="100">
+          <div className="inline-flex border border-divider rounded justify-items-start">
+            <a href="#" className="font-semibold pt-3 pb-3 pl-6 pr-6">
+              {selectedIds.length} selected
+            </a>
+            {actions.map((action) => (
+              <a
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  action.onAction();
+                }}
+                className="font-semibold pt-3 pb-3 pl-6 pr-6 block border-l border-divider self-center"
+              >
+                <span>{action.name}</span>
+              </a>
+            ))}
+          </div>
+        </td>
+      )}
+    </tr>
+  );
+}
+
+Actions.propTypes = {
+  selectedIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  widgets: PropTypes.arrayOf(
+    PropTypes.shape({
+      uuid: PropTypes.number.isRequired,
+      updateApi: PropTypes.string.isRequired,
+      deleteApi: PropTypes.string.isRequired
+    })
+  ).isRequired
+};
+
+export default function WidgetGrid({
+  widgets: { items, total, currentFilters = [] },
+  widgetTypes
+}) {
+  const page = currentFilters.find((filter) => filter.key === 'page')
+    ? currentFilters.find((filter) => filter.key === 'page').value
+    : 1;
+  const limit = currentFilters.find((filter) => filter.key === 'limit')
+    ? currentFilters.find((filter) => filter.key === 'limit').value
+    : 20;
+
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  return (
+    <Card>
+      <Card.Session
+        title={
+          <Form submitBtn={false}>
+            <Area
+              id="widgetGridFilter"
+              noOuter
+              coreComponents={[
+                {
+                  component: {
+                    default: () => (
+                      <Field
+                        type="text"
+                        id="name"
+                        placeholder="Search"
+                        value={
+                          currentFilters.find((f) => f.key === 'name')?.value
+                        }
+                        onKeyPress={(e) => {
+                          // If the user press enter, we should submit the form
+                          if (e.key === 'Enter') {
+                            const url = new URL(document.location);
+                            const name = document.getElementById('name')?.value;
+                            if (name) {
+                              url.searchParams.set('name[operation]', 'like');
+                              url.searchParams.set('name[value]', name);
+                            } else {
+                              url.searchParams.delete('name[operation]');
+                              url.searchParams.delete('name[value]');
+                            }
+                            window.location.href = url;
+                          }
+                        }}
+                      />
+                    )
+                  },
+                  sortOrder: 10
+                }
+              ]}
+            />
+          </Form>
+        }
+        actions={[
+          {
+            variant: 'interactive',
+            name: 'Clear filter',
+            onAction: () => {
+              // Just get the url and remove all query params
+              const url = new URL(document.location);
+              url.search = '';
+              window.location.href = url.href;
+            }
+          }
+        ]}
+      />
+      <table className="listing sticky">
+        <thead>
+          <tr>
+            <th className="align-bottom">
+              <Checkbox
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setSelectedRows(items.map((p) => p.uuid));
+                  } else {
+                    setSelectedRows([]);
+                  }
+                }}
+              />
+            </th>
+            <Area
+              className=""
+              id="widgetGridHeader"
+              noOuter
+              coreComponents={[
+                {
+                  component: {
+                    default: () => (
+                      <SortableHeader
+                        title="Name"
+                        name="name"
+                        currentFilters={currentFilters}
+                      />
+                    )
+                  },
+                  sortOrder: 10
+                },
+                {
+                  component: {
+                    default: () => (
+                      <SortableHeader
+                        title="Type"
+                        name="type"
+                        currentFilters={currentFilters}
+                      />
+                    )
+                  },
+                  sortOrder: 15
+                },
+                {
+                  component: {
+                    default: () => (
+                      <SortableHeader
+                        title="Status"
+                        name="status"
+                        currentFilters={currentFilters}
+                      />
+                    )
+                  },
+                  sortOrder: 20
+                }
+              ]}
+            />
+          </tr>
+        </thead>
+        <tbody>
+          <Actions
+            widgets={items}
+            selectedIds={selectedRows}
+            setSelectedRows={setSelectedRows}
+          />
+          {items.map((w, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <tr key={i}>
+              <td style={{ width: '2rem' }}>
+                <Checkbox
+                  isChecked={selectedRows.includes(w.uuid)}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      setSelectedRows(selectedRows.concat([w.uuid]));
+                    } else {
+                      setSelectedRows(
+                        selectedRows.filter((row) => row !== w.uuid)
+                      );
+                    }
+                  }}
+                />
+              </td>
+              <Area
+                className=""
+                id="widgetGridRow"
+                row={w}
+                noOuter
+                coreComponents={[
+                  {
+                    component: {
+                      default: () => <PageName url={w.editUrl} name={w.name} />
+                    },
+                    sortOrder: 10
+                  },
+                  {
+                    component: {
+                      default: () => (
+                        <WidgetTypeRow code={w.type} types={widgetTypes} />
+                      )
+                    },
+                    sortOrder: 15
+                  },
+                  {
+                    component: {
+                      default: ({ areaProps }) => (
+                        <StatusRow id="status" areaProps={areaProps} />
+                      )
+                    },
+                    sortOrder: 20
+                  }
+                ]}
+              />
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {items.length === 0 && (
+        <div className="flex w-full justify-center">
+          There is no widget to display
+        </div>
+      )}
+      <Pagination total={total} limit={limit} page={page} />
+    </Card>
+  );
+}
+
+WidgetGrid.propTypes = {
+  widgets: PropTypes.shape({
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        uuid: PropTypes.number.isRequired,
+        name: PropTypes.string.isRequired,
+        editUrl: PropTypes.string.isRequired,
+        updateApi: PropTypes.string.isRequired,
+        deleteApi: PropTypes.string.isRequired
+      })
+    ).isRequired,
+    total: PropTypes.number.isRequired,
+    currentFilters: PropTypes.arrayOf(
+      PropTypes.shape({
+        key: PropTypes.string.isRequired,
+        operation: PropTypes.string.isRequired,
+        value: PropTypes.string.isRequired
+      })
+    )
+  }).isRequired,
+  widgetTypes: PropTypes.arrayOf(
+    PropTypes.shape({
+      code: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
+    })
+  ).isRequired
+};
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 20
+};
+
+export const query = `
+  query Query($filters: [FilterInput]) {
+    widgets (filters: $filters) {
+      items {
+        widgetId
+        uuid
+        name
+        area
+        route
+        type
+        status
+        editUrl
+        updateApi
+        deleteApi
+      }
+      total
+      currentFilters {
+        key
+        operation
+        value
+      }
+    }
+    widgetTypes {
+      code
+      name
+    }
+  }
+`;
+
+export const variables = `
+{
+  filters: getContextValue('filtersFromUrl')
+}`;

package/src/modules/cms/pages/admin/widgetGrid/Heading.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import PageHeading from '@components/admin/cms/PageHeading';
+
+export default function Heading() {
+  return <PageHeading backUrl={null} heading="Widgets" />;
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+};