admin: add on select feature

packages/admin/src/PrismaTable/Form/index.tsx

@@ -111,6 +111,8 @@ const Form: React.FC<FormProps> = ({
                   );
                 if (field.editor)
                   return <InputComponents.Editor {...options} />;
+                if (field.upload)
+                  return <InputComponents.Upload {...options} />;
                 switch (field.type) {
                   case 'Boolean':
                     return <InputComponents.Boolean {...options} />;

packages/admin/src/PrismaTable/Table/index.tsx

@@ -14,6 +14,7 @@ import { initPages } from './utils';
 import { TableContext } from '../Context';
 import Spinner from '@paljs/ui/Spinner';
 import Tooltip from '@paljs/ui/Tooltip';
+import { Checkbox } from '@paljs/ui';
 
 interface TableProps {
   inEdit?: boolean;
@@ -49,6 +50,7 @@ export const Table: React.FC<TableProps> = ({
     pageSizeOptions,
     paginationOptions,
     tableColumns,
+    onSelect,
   } = useContext(TableContext);
   const model = models.find((item) => item.id === modelName);
   const columnList = columns(model, tableColumns);
@@ -82,7 +84,27 @@ export const Table: React.FC<TableProps> = ({
   );
   const tableRef = useRef<HTMLTableElement>(null);
   const [columnSize, setColumnSize] = useState(1);
+  const [selected, setSelected] = useState<number[]>([]);
   // Listen for changes in pagination and use the state to fetch our new data
+
+  const onSelectHandler = (state: boolean, id?: any) => {
+    let newValues: any[];
+    if (!state && !id) {
+      newValues = [];
+      setSelected(newValues);
+    } else if (state && !id && model) {
+      newValues = data.map((row) => row[model.idField]);
+      setSelected(newValues);
+    } else if (!state && id) {
+      newValues = selected.filter((value) => value !== id);
+      setSelected(newValues);
+    } else {
+      newValues = [...selected, id];
+      setSelected(newValues);
+    }
+    onSelect && onSelect(newValues);
+  };
+
   React.useEffect(() => {
     fetchMore(pageSize, pageIndex);
   }, [fetchMore, pageIndex, pageSize]);
@@ -115,6 +137,8 @@ export const Table: React.FC<TableProps> = ({
     update: model?.update,
     delete: model?.delete,
   };
+
+  const isSelect = onSelect && !inEdit;
   // Render the UI for your table
   return (
     <Card style={{ marginBottom: 0, maxHeight: '100vh' }}>
@@ -140,6 +164,7 @@ export const Table: React.FC<TableProps> = ({
             {headerGroups.map((headerGroup: any, index: number) => (
               <React.Fragment key={index}>
                 <tr {...headerGroup.getHeaderGroupProps()}>
+                  {isSelect && <th>Select</th>}
                   <th colSpan={2}>Actions</th>
                   {headerGroup.headers.map((column: any, index2: number) => (
                     <th
@@ -158,6 +183,19 @@ export const Table: React.FC<TableProps> = ({
                   ))}
                 </tr>
                 <tr>
+                  {isSelect && (
+                    <th>
+                      <Checkbox
+                        onChange={onSelectHandler}
+                        checked={
+                          data.length > 0 && selected.length === data.length
+                        }
+                        indeterminate={
+                          selected.length > 0 && selected.length !== data.length
+                        }
+                      />
+                    </th>
+                  )}
                   {connect ? (
                     <th colSpan={2} />
                   ) : (
@@ -185,6 +223,24 @@ export const Table: React.FC<TableProps> = ({
               prepareRow(row);
               return (
                 <tr key={index} {...row.getRowProps()}>
+                  {isSelect && (
+                    <td>
+                      <Checkbox
+                        onChange={(value) =>
+                          onSelectHandler(
+                            value,
+                            model && row.original[model.idField],
+                          )
+                        }
+                        checked={
+                          !!(
+                            model &&
+                            selected.includes(row.original[model.idField])
+                          )
+                        }
+                      />
+                    </td>
+                  )}
                   {connect && (
                     <td colSpan={2}>
                       <Button

packages/admin/src/SchemaQueries.ts

@@ -18,6 +18,7 @@ const fieldFragment = gql`
     sort
     filter
     editor
+    upload
     relationField
   }
 `;

packages/admin/src/Settings/UpdateField.tsx

@@ -14,15 +14,17 @@ type Fields =
   | 'filter'
   | 'sort'
   | 'title'
-  | 'editor';
+  | 'editor'
+  | 'upload';
 
 const fieldsArray: Fields[] = [
   'read',
-  'create',
-  'update',
   'filter',
   'sort',
+  'create',
+  'update',
   'editor',
+  'upload',
 ];
 
 const UpdateField: React.FC<{ field: SchemaField; model: string }> = ({

packages/admin/src/types.ts

@@ -29,7 +29,7 @@ export type GetColumnsPartial = (
   model?: SchemaModel,
 ) => Partial<Columns>;
 export type FormInputs = Record<
-  'Default' | 'Editor' | 'Enum' | 'Object' | 'Date' | 'Boolean',
+  'Default' | 'Editor' | 'Enum' | 'Object' | 'Date' | 'Boolean' | 'Upload',
   React.FC<InputProps>
 >;
 
@@ -49,6 +49,7 @@ interface SameProps {
   formInputs?: Partial<FormInputs>;
   push: (url: string) => void;
   query: { [key: string]: any };
+  onSelect?: (values: any[]) => void;
 }
 
 export interface ModelTableProps

packages/create/examples/apollo-nexus-schema/package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@nexus/schema": "0.x",
     "@prisma/client": "2.x",
-    "@paljs/nexus": "1.0.0",
+    "@paljs/nexus": "1.0.1",
     "apollo-server": "2.x",
     "graphql": "15.x"
   },

packages/create/examples/apollo-sdl-first/package.json

@@ -15,7 +15,7 @@
     "dev": "ts-node-dev --no-notify --respawn --transpileOnly src/server"
   },
   "dependencies": {
-    "@paljs/plugins": "1.0.0",
+    "@paljs/plugins": "1.0.1",
     "@prisma/client": "2.x",
     "apollo-server": "2.x",
     "graphql": "15.x",

packages/create/examples/full-stack-gatsbyjs/packages/server/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@nexus/schema": "0.x",
-    "@paljs/nexus": "1.0.0",
+    "@paljs/nexus": "1.0.1",
     "@prisma/client": "2.x",
     "apollo-server": "2.x",
     "bcryptjs": "2.x",

packages/create/examples/full-stack-gatsbyjs/packages/ui/package.json

@@ -6,9 +6,9 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "3.x",
-    "@paljs/admin": "1.0.0",
+    "@paljs/admin": "1.0.1",
     "@paljs/ui": "1.x",
-    "@paljs/eva-icon": "1.x",
+    "@paljs/icons": "1.x",
     "babel-plugin-styled-components": "1.x",
     "gatsby": "2.x",
     "gatsby-image": "2.x",

packages/create/examples/full-stack-nextjs/package.json

@@ -18,10 +18,10 @@
     "@apollo/client": "3.x",
     "@apollo/react-ssr": "4.x",
     "@nexus/schema": "0.x",
-    "@paljs/nexus": "1.0.0",
-    "@paljs/admin": "1.0.0",
+    "@paljs/nexus": "1.0.1",
+    "@paljs/admin": "1.0.1",
     "@paljs/ui": "1.x",
-    "@paljs/eva-icon": "1.x",
+    "@paljs/icons": "1.x",
     "@prisma/client": "2.x",
     "apollo-server-micro": "2.x",
     "bcryptjs": "2.x",

packages/create/examples/graphql-modules/package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@graphql-modules/core": "0.x",
     "@graphql-modules/di": "0.x",
-    "@paljs/plugins": "1.0.0",
+    "@paljs/plugins": "1.0.1",
     "@prisma-tools/graphql-modules": "0.x",
     "@prisma/client": "2.x",
     "apollo-server": "2.x",

packages/create/examples/nexus/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@prisma/client": "2.x",
     "nexus": "0.x",
-    "nexus-plugin-paljs": "1.0.0"
+    "nexus-plugin-paljs": "1.0.1"
   },
   "devDependencies": {
     "@prisma/cli": "2.x",

packages/generator/src/admin/mergeSchema.ts

@@ -42,6 +42,7 @@ export function mergeSchema(object: SchemaObject, schemaPath: string): Schema {
           newItem.fields.push(handleNewField(field, schemaItem.name));
         } else {
           newItem.fields.push({
+            upload: false,
             ...schemaField,
             ...getOriginalField(field, schemaItem.name),
           });
@@ -84,6 +85,7 @@ function handleNewField(field: Field, modelName: string): SchemaField {
     create: !defaultField.includes(field.name) && !field.relationField,
     update: !defaultField.includes(field.name) && !field.relationField,
     editor: false,
+    upload: false,
     read: true,
     filter: true,
     sort: true,

packages/nexus/src/admin.ts

@@ -97,6 +97,7 @@ export function adminNexusSchemaSettings(path = 'prisma/adminSettings.json') {
           t.boolean('filter');
           t.boolean('sort');
           t.boolean('editor');
+          t.boolean('upload');
           t.boolean('relationField', { nullable: true });
           t.int('order');
           t.field('kind', { type: 'KindEnum' });
@@ -137,6 +138,7 @@ export function adminNexusSchemaSettings(path = 'prisma/adminSettings.json') {
           t.boolean('filter');
           t.boolean('sort');
           t.boolean('editor');
+          t.boolean('upload');
           t.boolean('relationField', { nullable: true });
           t.int('order');
           t.field('kind', { type: 'KindEnum' });

packages/types/src/index.ts

@@ -37,6 +37,7 @@ export interface SchemaField
   sort: boolean;
   order: number;
   editor: boolean;
+  upload: boolean;
 }
 
 export interface SchemaModel extends Omit<Model, 'documentation' | 'map'> {