@nocobase/plugin-multi-app-share-collection 0.9.2-alpha.1

package/src/client/TableTransfer.tsx

@@ -0,0 +1,388 @@
+import { css } from '@emotion/css';
+import { connect } from '@formily/react';
+import { useCollectionManager, useRecord, useRequest } from '@nocobase/client';
+import { CollectionsGraph } from '@nocobase/utils/client';
+import { Col, Input, Modal, Row, Select, Spin, Table, Tag } from 'antd';
+import debounce from 'lodash/debounce';
+import uniq from 'lodash/uniq';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const excludeCollections = ['users', 'roles', 'applications'];
+
+const useCollectionsGraph = ({ removed = [] }) => {
+  const { collections } = useCollectionManager();
+
+  const findAddable = useCallback(
+    (name) => {
+      return CollectionsGraph.connectedNodes({
+        collections,
+        nodes: [name],
+        excludes: excludeCollections,
+      }).filter((name) => removed.includes(name));
+    },
+    [removed],
+  );
+
+  const findRemovable = useCallback(
+    (name) => {
+      return CollectionsGraph.connectedNodes({
+        collections,
+        nodes: [name],
+        excludes: excludeCollections,
+        direction: 'reverse',
+      }).filter((name) => !removed.includes(name));
+    },
+    [removed],
+  );
+
+  return {
+    findAddable,
+    findRemovable,
+  };
+};
+
+const useCollections = () => {
+  const record = useRecord();
+  const [selected, setSelected] = useState<any>([]);
+
+  const res1 = useRequest(
+    {
+      url: `applications/${record.name}/collectionBlacklist:list`,
+      params: {
+        paginate: false,
+        params: {
+          fields: ['name'],
+        },
+      },
+    },
+    {
+      onSuccess(data) {
+        setSelected(data.data?.map((data) => data.name));
+      },
+    },
+  );
+
+  const res2 = useRequest({
+    url: `collections`,
+    params: {
+      fields: ['name', 'title', 'hidden', 'category.name', 'category.color', 'category.sort'],
+      sort: 'sort',
+      paginate: false,
+    },
+  });
+
+  const res3 = useRequest({
+    url: `collectionCategories`,
+    params: {
+      sort: 'sort',
+      paginate: false,
+    },
+  });
+
+  return {
+    loading: res1.loading || res2.loading || res3.loading,
+    collections: (res2.data?.data || []).filter((item) => !item.hidden && !excludeCollections.includes(item.name)),
+    removed: selected,
+    setSelected,
+    categories: (res3.data?.data || []).map((cat) => ({ label: cat.name, value: cat.name })),
+  };
+};
+
+const includes = (text: string, s: string | string[]) => {
+  const values = Array.isArray(s) ? s : [s];
+  for (const val of values) {
+    if (text.toLowerCase().includes(val)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+const useRemovedDataSource = ({ collections, removed }) => {
+  const [filter, setFilter] = useState({ name: '', category: [] });
+  const dataSource = useMemo(() => {
+    return collections.filter((collection) => {
+      const { name, title, category = [] } = collection;
+      const results = [removed.includes(collection.name)];
+      if (filter.name) {
+        results.push(includes(name, filter.name) || includes(title, filter.name));
+      }
+      if (filter.category.length > 0) {
+        results.push(category.some((item) => includes(item.name, filter.category)));
+      }
+      return !results.includes(false);
+    });
+  }, [collections, removed, filter]);
+  const setNameFilter = useMemo(
+    () =>
+      debounce((name) => {
+        setFilter({
+          ...filter,
+          name,
+        });
+      }, 300),
+    [],
+  );
+  return {
+    dataSource,
+    setNameFilter,
+    setCategoryFilter: (category) => {
+      setFilter({
+        ...filter,
+        category,
+      });
+    },
+  };
+};
+
+const useAddedDataSource = ({ collections, removed }) => {
+  const [filter, setFilter] = useState({ name: '', category: [] });
+  const dataSource = collections.filter((collection) => {
+    const { name, title, category = [] } = collection;
+    const results = [!removed.includes(collection.name)];
+    if (filter.name) {
+      results.push(includes(name, filter.name) || includes(title, filter.name));
+    }
+    if (filter.category.length > 0) {
+      results.push(category.some((item) => includes(item.name, filter.category)));
+    }
+    return !results.includes(false);
+  });
+  const setNameFilter = useMemo(
+    () =>
+      debounce((name) => {
+        setFilter({
+          ...filter,
+          name,
+        });
+      }, 300),
+    [],
+  );
+  return {
+    dataSource,
+    setNameFilter,
+    setCategoryFilter: (category) => {
+      setFilter({
+        ...filter,
+        category,
+      });
+    },
+  };
+};
+
+export const TableTransfer = connect((props) => {
+  const { onChange } = props;
+  const { loading, collections, categories, removed, setSelected } = useCollections();
+  const [selectedRowKeys1, setSelectedRowKeys1] = useState([]);
+  const [selectedRowKeys2, setSelectedRowKeys2] = useState([]);
+  const { findAddable, findRemovable } = useCollectionsGraph({ removed });
+  const addedDataSource = useAddedDataSource({ collections, removed });
+  const removedDataSource = useRemovedDataSource({ collections, removed });
+  const { t } = useTranslation('multi-app-share-collection');
+  const columns = useMemo(
+    () => [
+      {
+        title: t('Collection display name'),
+        dataIndex: 'title',
+      },
+      {
+        title: t('Collection name'),
+        dataIndex: 'name',
+      },
+      {
+        title: t('Collection category'),
+        dataIndex: 'category',
+        render: (categories) => categories.map((category) => <Tag color={category.color}>{category.name}</Tag>),
+      },
+    ],
+    [],
+  );
+  if (loading) {
+    return <Spin />;
+  }
+  return (
+    <div>
+      <Row
+        gutter={24}
+        className={css`
+          .ant-table-tbody > tr.ant-table-row:hover > td {
+            background: #e6f7ff;
+            cursor: pointer;
+          }
+        `}
+      >
+        <Col span={12}>
+          <div
+            className={css`
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              width: 100%;
+              margin-bottom: 8px;
+            `}
+          >
+            <strong style={{ fontSize: 16 }}>{t('Unshared collections')}</strong>
+            <Input.Group compact style={{ width: 360 }}>
+              <Select
+                onChange={(value) => {
+                  removedDataSource.setCategoryFilter(value);
+                }}
+                mode={'multiple'}
+                style={{ width: '35%' }}
+                size={'middle'}
+                placeholder={t('All categories')}
+                options={categories}
+                allowClear
+              />
+              <Input
+                onChange={(e) => removedDataSource.setNameFilter(e.target.value)}
+                style={{ width: '65%' }}
+                placeholder={t('Enter name or title...')}
+                allowClear
+              />
+            </Input.Group>
+          </div>
+          <Table
+            bordered
+            rowKey={'name'}
+            rowSelection={{
+              type: 'checkbox',
+              selectedRowKeys: selectedRowKeys1,
+              onChange(selectedRowKeys) {
+                const values = removed.filter((s) => !selectedRowKeys.includes(s));
+                setSelected(values);
+                onChange(values);
+                setSelectedRowKeys1([]);
+              },
+            }}
+            pagination={false}
+            size={'small'}
+            columns={columns}
+            // dataSource={collections.filter((collection) => removed.includes(collection.name))}
+            dataSource={removedDataSource.dataSource}
+            scroll={{ y: 'calc(100vh - 260px)' }}
+            onRow={({ name, disabled }) => ({
+              onClick: () => {
+                if (disabled) return;
+                const adding = findAddable(name);
+                const change = () => {
+                  const values = removed.filter((s) => !adding.includes(s));
+                  setSelected(values);
+                  onChange(values);
+                };
+                if (adding.length === 1) {
+                  return change();
+                }
+                Modal.confirm({
+                  title: t('Are you sure to add the following collections?'),
+                  width: '60%',
+                  content: (
+                    <div>
+                      <Table
+                        size={'small'}
+                        columns={columns}
+                        dataSource={collections.filter((collection) => adding.includes(collection.name))}
+                        pagination={false}
+                        scroll={{ y: '60vh' }}
+                      />
+                    </div>
+                  ),
+                  onOk() {
+                    change();
+                  },
+                });
+              },
+            })}
+          />
+        </Col>
+        <Col span={12}>
+          <div
+            className={css`
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              width: 100%;
+              margin-bottom: 8px;
+            `}
+          >
+            <strong style={{ fontSize: 16 }}>{t('Shared collections')}</strong>
+            <Input.Group compact style={{ width: 360 }}>
+              <Select
+                onChange={(value) => {
+                  addedDataSource.setCategoryFilter(value);
+                }}
+                mode={'multiple'}
+                style={{ width: '35%' }}
+                size={'middle'}
+                placeholder={t('All categories')}
+                options={categories}
+                allowClear
+              />
+              <Input
+                onChange={(e) => addedDataSource.setNameFilter(e.target.value)}
+                style={{ width: '65%' }}
+                placeholder={t('Enter name or title...')}
+                allowClear
+              />
+            </Input.Group>
+          </div>
+          <Table
+            bordered
+            rowKey={'name'}
+            rowSelection={{
+              type: 'checkbox',
+              selectedRowKeys: selectedRowKeys2,
+              onChange(selectedRowKeys) {
+                const values = uniq(removed.concat(selectedRowKeys));
+                setSelected(values);
+                onChange(values);
+                setSelectedRowKeys2([]);
+              },
+            }}
+            pagination={false}
+            size={'small'}
+            columns={columns}
+            dataSource={addedDataSource.dataSource}
+            // dataSource={collections.filter((collection) => !selected.includes(collection.name))}
+            scroll={{ y: 'calc(100vh - 260px)' }}
+            onRow={({ name }) => ({
+              onClick: () => {
+                const removing = findRemovable(name);
+                const change = () => {
+                  removed.push(...removing);
+                  const values = uniq([...removed]);
+                  setSelected(values);
+                  onChange(values);
+                };
+                if (removing.length === 1) {
+                  return change();
+                }
+                Modal.confirm({
+                  title: t('Are you sure to remove the following collections?'),
+                  width: '60%',
+                  content: (
+                    <div>
+                      <Table
+                        size={'small'}
+                        columns={columns}
+                        dataSource={collections.filter((collection) => removing.includes(collection.name))}
+                        pagination={false}
+                        scroll={{ y: '60vh' }}
+                      />
+                    </div>
+                  ),
+                  onOk() {
+                    change();
+                  },
+                });
+              },
+            })}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+});
+
+export default TableTransfer;

package/src/client/index.tsx

@@ -0,0 +1,86 @@
+import { useForm } from '@formily/react';
+import { useActionContext, useAPIClient, useRecord } from '@nocobase/client';
+import { tableActionColumnSchema } from '@nocobase/plugin-multi-app-manager/client';
+import { message } from 'antd';
+import React from 'react';
+import { TableTransfer } from './TableTransfer';
+import { i18nText } from './utils';
+
+const useShareCollectionAction = () => {
+  const form = useForm();
+  const ctx = useActionContext();
+  const api = useAPIClient();
+  const record = useRecord();
+  return {
+    async run() {
+      console.log(form.values.names);
+      await api.request({
+        url: `applications/${record.name}/collectionBlacklist`,
+        data: form.values.names,
+        method: 'post',
+      });
+      ctx.setVisible(false);
+      form.reset();
+      message.success('Saved successfully');
+    },
+  };
+};
+
+const updateSchema = tableActionColumnSchema.properties.update;
+const deleteSchema = tableActionColumnSchema.properties.delete;
+
+delete tableActionColumnSchema.properties.update;
+delete tableActionColumnSchema.properties.delete;
+
+tableActionColumnSchema.properties['collection'] = {
+  type: 'void',
+  title: i18nText('Share collections'),
+  'x-component': 'Action.Link',
+  'x-component-props': {},
+  properties: {
+    drawer: {
+      type: 'void',
+      'x-component': 'Action.Drawer',
+      'x-component-props': {
+        width: '95vw',
+      },
+      'x-decorator': 'Form',
+      title: i18nText('Share collections'),
+      properties: {
+        names: {
+          type: 'array',
+          'x-component': TableTransfer,
+          'x-decorator': 'FormItem',
+        },
+        footer: {
+          type: 'void',
+          'x-component': 'Action.Drawer.Footer',
+          properties: {
+            cancel: {
+              title: '{{t("Cancel")}}',
+              'x-component': 'Action',
+              'x-component-props': {
+                useAction: '{{ cm.useCancelAction }}',
+              },
+            },
+            submit: {
+              title: '{{t("Submit")}}',
+              'x-component': 'Action',
+              'x-component-props': {
+                type: 'primary',
+                useAction: useShareCollectionAction,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+tableActionColumnSchema.properties.update = updateSchema;
+tableActionColumnSchema.properties.delete = deleteSchema;
+
+export default (props) => {
+  return <>{props.children}</>;
+};

package/src/client/locale/pt-BR.ts

@@ -0,0 +1,13 @@
+export default {
+  'Share collections': 'Compartilhar tabelas',
+  'Unshared collections': 'Tabelas não compartilhadas',
+  'Shared collections': 'Tabelas compartilhadas',
+  'All categories': 'Todas as categorias',
+  'Enter name or title...': 'Digite o nome ou título...',
+  'Are you sure to add the following collections?': 'Tem certeza de que deseja adicionar as seguintes tabelas?',
+  'Are you sure to remove the following collections?': 'Tem certeza de que deseja remover as seguintes tabelas?',
+  'Collection display name': 'Nome de exibição da tabela',
+  'Collection name': 'Nome da tabela',
+  'Collection category': 'Categoria da tabela',
+};
+

package/src/client/locale/zh-CN.ts

@@ -0,0 +1,13 @@
+export default {
+  'Share collections': '共享数据表',
+  'Unshared collections': '未共享的数据表',
+  'Shared collections': '已共享的数据表',
+  'All categories': '所有分类',
+  'Enter name or title...': '输入数据表标题或标识',
+  'Are you sure to add the following collections?': '确定添加以下数据表？',
+  'Are you sure to remove the following collections?': '确定移除以下数据表？',
+  'Collection display name': '标题',
+  'Collection name': '标识',
+  'Collection category': '分类',
+};
+

package/src/client/utils.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next';
+
+export const usePluginUtils = () => {
+  const { t } = useTranslation('multi-app-share-collection');
+
+  return { t };
+};
+
+export const i18nText = (text) => {
+  return `{{t("${text}", { ns: 'multi-app-share-collection' })}}`;
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from './server';