payment-kit 1.13.162 → 1.13.163

package/api/src/routes/products.ts

@@ -2,7 +2,6 @@ import { fromTokenToUnit } from '@ocap/util';
 import { Router } from 'express';
 import Joi from 'joi';
 import pick from 'lodash/pick';
-import type { WhereOptions } from 'sequelize';
 
 import { getWhereFromKvQuery, getWhereFromQuery } from '../libs/api';
 import logger from '../libs/logger';
@@ -112,22 +111,33 @@ const paginationSchema = Joi.object<{
   pageSize: number;
   livemode?: boolean;
   active?: boolean;
+  status?: string;
   name?: string;
   description?: string;
+  q?: string;
+  o?: string;
 }>({
   page: Joi.number().integer().min(1).default(1),
   pageSize: Joi.number().integer().min(1).max(100).default(20),
   livemode: Joi.boolean().empty(''),
   active: Joi.boolean().empty(''),
+  status: Joi.string().empty(''),
   name: Joi.string().empty(''),
   description: Joi.string().empty(''),
+  q: Joi.string().empty(''), // query
+  o: Joi.string().empty(''), // order
 });
 router.get('/', auth, async (req, res) => {
   const { page, pageSize, active, livemode, name, description, ...query } = await paginationSchema.validateAsync(
     req.query,
     { stripUnknown: false, allowUnknown: true }
   );
-  const where: WhereOptions<Product> = {};
+  const where = getWhereFromKvQuery(query.q);
+
+  if (query.status) {
+    // 兼容处理，支持 status
+    where.active = query.status === 'active';
+  }
 
   if (typeof active === 'boolean') {
     where.active = active;
@@ -151,7 +161,7 @@ router.get('/', auth, async (req, res) => {
 
   const { rows: list, count } = await Product.findAndCountAll({
     where,
-    order: [['created_at', 'DESC']],
+    order: [['created_at', query.o === 'asc' ? 'ASC' : 'DESC']],
     offset: (page - 1) * pageSize,
     limit: pageSize,
     include: [{ model: Price, as: 'prices' }],

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.162
+version: 1.13.163
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.162",
+  "version": "1.13.163",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -50,7 +50,7 @@
     "@arcblock/jwt": "^1.18.110",
     "@arcblock/ux": "^2.9.39",
     "@blocklet/logger": "1.16.23",
-    "@blocklet/payment-react": "1.13.162",
+    "@blocklet/payment-react": "1.13.163",
     "@blocklet/sdk": "1.16.23",
     "@blocklet/ui-react": "^2.9.39",
     "@blocklet/uploader": "^0.0.74",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.162",
+    "@blocklet/payment-types": "1.13.163",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "e11cae8972d35cde567d4784511aacd33a29c1bc"
+  "gitHead": "2f485afbabe92bb6e63b09c4e69cb2ae06d3d2be"
 }

package/src/components/filter-toolbar.tsx

@@ -2,6 +2,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, usePaymentContext } from '@blocklet/payment-react';
 import type { TCustomer } from '@blocklet/payment-types';
 import { Add, Close } from '@mui/icons-material';
+import { ClickAwayListener, Menu, MenuItem } from '@mui/material';
 import { Box, styled } from '@mui/system';
 import { useEffect, useState } from 'react';
 
@@ -41,6 +42,7 @@ type Props = {
 
 export default function FilterTooolbar(props: Props) {
   const { setSearch, search, status, currency } = props;
+  const isProduct = window.location.pathname.includes('product');
   const handleSearch = (obj: any) => {
     setSearch({
       ...search,
@@ -50,11 +52,15 @@ export default function FilterTooolbar(props: Props) {
 
   return (
     <Root>
-      <div className="table-toolbar-left">
+      <Box className="table-toolbar-left">
         <SearchStatus setSearch={handleSearch} status={status} />
-        <SearchCustomers setSearch={handleSearch} />
-        {currency ? <SearchCurrency setSearch={handleSearch} /> : <SearchProducts setSearch={handleSearch} />}
-      </div>
+        {isProduct ? null : (
+          <>
+            <SearchCustomers setSearch={handleSearch} />
+            {currency ? <SearchCurrency setSearch={handleSearch} /> : <SearchProducts setSearch={handleSearch} />}
+          </>
+        )}
+      </Box>
     </Root>
   );
 }
@@ -72,13 +78,13 @@ SearchProducts.defaultProps = defaultProps;
 SearchCustomers.defaultProps = defaultProps;
 
 function SearchStatus({ status = [], setSearch }: Pick<Props, 'status' | 'setSearch'>) {
-  const [show, setShow] = useState(false);
+  const [show, setShow] = useState(null);
   const [display, setDisplay] = useState('');
   const { t } = useLocaleContext();
   return (
     <section
-      onClick={() => {
-        setShow(!show);
+      onClick={(e) => {
+        setShow(e.currentTarget as any);
       }}>
       <div className="option-btn">
         {display ? (
@@ -90,6 +96,7 @@ function SearchStatus({ status = [], setSearch }: Pick<Props, 'status' | 'setSea
                 status: '',
               });
               setDisplay('');
+              setShow(null);
             }}
           />
         ) : (
@@ -98,20 +105,29 @@ function SearchStatus({ status = [], setSearch }: Pick<Props, 'status' | 'setSea
         {t('common.status')}
         <span>{display}</span>
       </div>
-      <ul className="status-options" style={{ display: show ? 'block' : 'none' }}>
+      <Menu
+        anchorEl={show}
+        open={Boolean(show)}
+        onClose={(e: any) => {
+          e.stopPropagation();
+          setShow(null);
+        }}
+        className="status-options">
         {status.map((x: any) => (
-          <li
-            onClick={() => {
+          <MenuItem
+            onClick={(e) => {
+              e.stopPropagation();
               setSearch({
                 status: x,
               });
               setDisplay(x);
+              setShow(null);
             }}
             key={x}>
             {x}
-          </li>
+          </MenuItem>
         ))}
-      </ul>
+      </Menu>
     </section>
   );
 }
@@ -128,7 +144,7 @@ function filterCurrency(methods: any) {
 }
 
 function SearchCurrency({ setSearch }: Pick<Props, 'setSearch'>) {
-  const [show, setShow] = useState(false);
+  const [show, setShow] = useState(null);
   const [display, setDisplay] = useState('');
   const { settings } = usePaymentContext();
   const currencies = filterCurrency(settings.paymentMethods);
@@ -136,8 +152,8 @@ function SearchCurrency({ setSearch }: Pick<Props, 'setSearch'>) {
 
   return (
     <section
-      onClick={() => {
-        setShow(!show);
+      onClick={(e) => {
+        setShow(e.currentTarget as any);
       }}>
       <div className="option-btn">
         {display ? (
@@ -149,6 +165,7 @@ function SearchCurrency({ setSearch }: Pick<Props, 'setSearch'>) {
                 currency_id: '',
               });
               setDisplay('');
+              setShow(null);
             }}
           />
         ) : (
@@ -157,27 +174,36 @@ function SearchCurrency({ setSearch }: Pick<Props, 'setSearch'>) {
         {t('common.currency')}
         <span>{display}</span>
       </div>
-      <ul className="status-options" style={{ display: show ? 'block' : 'none' }}>
+      <Menu
+        anchorEl={show}
+        open={Boolean(show)}
+        onClose={(e: any) => {
+          e.stopPropagation();
+          setShow(null);
+        }}
+        className="status-options">
         {Object.keys(currencies).map((k: any) => (
-          <li
-            onClick={() => {
+          <MenuItem
+            onClick={(e) => {
+              e.stopPropagation();
               setSearch({
                 currency_id: currencies[k],
               });
               setDisplay(k);
+              setShow(null);
             }}
             key={k}>
             {k}
-          </li>
+          </MenuItem>
         ))}
-      </ul>
+      </Menu>
     </section>
   );
 }
 
 function SearchCustomers({ setSearch }: Pick<Props, 'setSearch'>) {
   const [customers, setCustomers] = useState([]);
-  const [show, setShow] = useState(false);
+  const [show, setShow] = useState(null);
   const [text, setText] = useState('');
   const [display, setDisplay] = useState('');
   const { t } = useLocaleContext();
@@ -199,7 +225,7 @@ function SearchCustomers({ setSearch }: Pick<Props, 'setSearch'>) {
   }, [text]);
 
   return (
-    <section onClick={() => setShow(!show)}>
+    <section onClick={(e: any) => setShow(e.currentTarget)}>
       <div className="option-btn">
         {display ? (
           <Close
@@ -210,6 +236,7 @@ function SearchCustomers({ setSearch }: Pick<Props, 'setSearch'>) {
                 customer_id: '',
               });
               setDisplay('');
+              setShow(null);
             }}
           />
         ) : (
@@ -218,22 +245,41 @@ function SearchCustomers({ setSearch }: Pick<Props, 'setSearch'>) {
         {t('common.customer')}
         <span>{display}</span>
       </div>
-      <ul className="status-options" style={{ display: show ? 'block' : 'none' }} onClick={(e) => e.stopPropagation()}>
-        <input
-          type="text"
-          placeholder="search customers"
-          onChange={(e) => {
-            setText(e.target.value);
-          }}
-        />
+
+      <Menu
+        anchorEl={show}
+        open={Boolean(show)}
+        onClose={(e: any) => {
+          e.stopPropagation();
+          setShow(null);
+        }}>
+        <section style={{ padding: '10px 10px 0 10px' }}>
+          <input
+            style={{
+              width: '100%',
+              boxSizing: 'border-box',
+              border: '1px solid #eee',
+              padding: '5px 10px',
+              borderRadius: '20px',
+              marginBottom: '10px',
+            }}
+            type="text"
+            placeholder="search customers"
+            onChange={(e) => {
+              setText(e.target.value);
+            }}
+          />
+        </section>
         {customers.map((x: any) => (
-          <li
+          <MenuItem
             key={x.id}
-            onClick={() => {
+            onClick={(e) => {
+              e.stopPropagation();
               setSearch({
                 customer_id: x.id,
               });
               setDisplay(x.name);
+              setShow(null);
             }}>
             <InfoCard
               logo={`/.well-known/service/user/avatar/${x.did}?imageFilter=resize&w=48&h=48`}
@@ -241,9 +287,9 @@ function SearchCustomers({ setSearch }: Pick<Props, 'setSearch'>) {
               key={x.id}
               description={`${x.did.slice(0, 6)}...${x.did.slice(-6)}`}
             />
-          </li>
+          </MenuItem>
         ))}
-      </ul>
+      </Menu>
     </section>
   );
 }
@@ -275,37 +321,50 @@ function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
   }, [price]);
 
   return (
-    <section onClick={() => setShow(!show)}>
-      <div className="option-btn">
-        {display ? (
-          <Close
-            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
-            onClick={(e) => {
-              e.stopPropagation();
-              setSearch({
-                q: '',
-              });
-              setDisplay('');
-            }}
-          />
-        ) : (
-          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
-        )}
-        {t('admin.subscription.product')}
-        <span>{display}</span>
-      </div>
-      <ul className="status-options" style={{ display: show ? 'block' : 'none' }} onClick={(e) => e.stopPropagation()}>
-        <ProductsProvider>
-          <FilterProducts
-            hasSelected={() => false}
-            onSelect={(p: any) => {
-              setPrice(p);
-              setDisplay(`${p.productName}(${p.displayPrice})`);
-            }}
-          />
-        </ProductsProvider>
-      </ul>
-    </section>
+    <ClickAwayListener
+      onClickAway={(e) => {
+        e.stopPropagation();
+        setShow(false);
+      }}>
+      <section onClick={() => setShow(!show)}>
+        <div className="option-btn">
+          {display ? (
+            <Close
+              sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+              onClick={(e) => {
+                e.stopPropagation();
+                setSearch({
+                  q: '',
+                });
+                setDisplay('');
+                setShow(false);
+              }}
+            />
+          ) : (
+            <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+          )}
+          {t('admin.subscription.product')}
+          <span>{display}</span>
+        </div>
+
+        <ul
+          className="status-options"
+          style={{ display: show ? 'block' : 'none' }}
+          onClick={(e) => e.stopPropagation()}>
+          <Box sx={{ height: '10px' }} />
+          <ProductsProvider>
+            <FilterProducts
+              hasSelected={() => false}
+              onSelect={(p: any) => {
+                setPrice(p);
+                setDisplay(`${p.productName}(${p.displayPrice})`);
+                setShow(false);
+              }}
+            />
+          </ProductsProvider>
+        </ul>
+      </section>
+    </ClickAwayListener>
   );
 }
 
@@ -343,29 +402,21 @@ const Root = styled(Box)`
 
   .status-options {
     position: absolute;
-    padding: 10px;
+    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+    padding: 0;
     background: #fff;
     border: 1px solid #eee;
-    border-radius: 5px;
     z-index: 999999;
-    top: 25px;
+    top: 15px;
     display: block;
     max-height: 500px;
     overflow-y: auto;
     overflow-x: hidden;
   }
 
-  .status-options input {
-    width: 100%;
-    border: 1px solid #eee;
-    padding: 5px 10px;
-    border-radius: 20px;
-    margin-bottom: 10px;
-  }
-
   .status-options li {
     list-style: none;
-    padding: 5px;
     line-height: normal;
   }
 

package/src/pages/admin/products/products/index.tsx

@@ -3,12 +3,11 @@ import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Status, api, formatTime, usePaymentContext } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
-import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup } from '@mui/material';
-import { useRequest } from 'ahooks';
+import { CircularProgress } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import useBus from 'use-bus';
 
+import FilterTooolbar from '../../../../components/filter-toolbar';
 import InfoCard from '../../../../components/info-card';
 import ProductActions from '../../../../components/product/actions';
 import Table from '../../../../components/table';
@@ -17,7 +16,13 @@ import { formatProductPrice } from '../../../../libs/util';
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TProductExpanded[]; count: number }> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
-    search.set(key, String(params[key]));
+    let v = params[key];
+    if (key === 'q') {
+      v = Object.entries(v)
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    search.set(key, String(v));
   });
   return api.get(`/api/products?${search.toString()}`).then((res) => res.data);
 };
@@ -29,24 +34,24 @@ export default function ProductsList() {
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
   const { settings } = usePaymentContext();
-  const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
+  const [search, setSearch] = useState<{ active: string; pageSize: number; page: any; q?: any; o?: any }>({
     active: '',
     pageSize: persisted.rowsPerPage || 20,
     page: persisted.page ? persisted.page + 1 : 1,
   });
 
-  const { loading, error, data, refresh } = useRequest(() => fetchData(search));
-  useEffect(() => {
-    refresh();
-  }, [search, refresh]);
+  const [data, setData] = useState({}) as any;
 
-  useBus('project.created', () => refresh(), []);
+  const refresh = () =>
+    fetchData(search).then((res: any) => {
+      setData(res);
+    });
 
-  if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
-  }
+  useEffect(() => {
+    refresh();
+  }, [search]);
 
-  if (loading || !data) {
+  if (!data.list) {
     return <CircularProgress />;
   }
 
@@ -125,30 +130,45 @@ export default function ProductsList() {
     <Table
       durable={listKey}
       durableKeys={['page', 'rowsPerPage']}
-      title={
-        <div className="table-toolbar-left">
-          <ToggleButtonGroup
-            value={search.active}
-            onChange={(_, value) => setSearch((x) => ({ ...x, active: value }))}
-            exclusive>
-            <ToggleButton value="">All</ToggleButton>
-            <ToggleButton value="true">Active</ToggleButton>
-            <ToggleButton value="false">Archived</ToggleButton>
-          </ToggleButtonGroup>
-        </div>
-      }
+      title={<FilterTooolbar setSearch={setSearch} search={search} status={['active', 'archived']} />}
       data={data.list}
       columns={columns}
       options={{
         count: data.count,
         page: search.page - 1,
         rowsPerPage: search.pageSize,
+        onColumnSortChange(_: any, order: any) {
+          setSearch({
+            ...search,
+            q: search.q || {},
+            o: order,
+          });
+        },
+        onSearchChange: (text: string) => {
+          if (text) {
+            setSearch({
+              q: {
+                'like-description': text,
+                'like-name': text,
+              },
+              active: '',
+              pageSize: 100,
+              page: 1,
+            });
+          } else {
+            setSearch({
+              active: '',
+              pageSize: 100,
+              page: 1,
+            });
+          }
+        },
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TProductExpanded;
           navigate(`/admin/products/${item.id}`);
         },
       }}
-      loading={loading}
+      loading={!data.list}
       onChange={onTableChange}
     />
   );