Implement searching and filtering for all records

.gitignore

@@ -19,6 +19,7 @@
 .env.test.local
 .env.production.local
 
+debug.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

.gitpod.yml

@@ -0,0 +1,18 @@
+tasks:
+  - init: npm install
+    command: echo DANGEROUSLY_DISABLE_HOST_CHECK=true >> .env
+    command: npm start
+ports:
+  - port: 3000
+    onOpen: open-preview
+github:
+  prebuilds:
+    master: true
+    branches: true
+    pullRequests: true
+    pullRequestsFromForks: true
+    addCheck: true
+    addComment: true
+    addBadge: false
+    addLabel: false
+

src/components/applications/ApplicationList.js

@@ -1,26 +1,29 @@
 import React from "react";
 import { useMediaQuery } from "@material-ui/core";
-import {
-  List,
-  Datagrid,
-  TextField,
-  SimpleList,
-  Pagination,
-  ReferenceField,
-} from "react-admin";
-
-const ApplicationPagination = (props) => (
-  <Pagination rowsPerPageOptions={[10, 25, 50]} {...props} />
-);
+import { List, Datagrid, TextField, SimpleList } from "react-admin";
+import Pagination from "../pagination/Pagination";
+import Filter from "../pagination/Filter";
 
 const ApplicationList = (props) => {
   const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const filters = [
+    {
+      label: "Filter by name",
+      source: "applicationName",
+      alwaysOn: true,
+    },
+    {
+      label: "Filter by organization",
+      source: "organizationName",
+    },
+  ];
 
   return (
     <List
       label="Applications"
       title="Applications"
-      pagination={<ApplicationPagination />}
+      pagination={<Pagination />}
+      filters={<Filter filters={filters} />}
       {...props}
     >
       {isSmall ? (
@@ -31,14 +34,7 @@ const ApplicationList = (props) => {
       ) : (
         <Datagrid rowClick="show">
           <TextField label="Name" source="applicationName" />
-          <ReferenceField
-            link="show"
-            label="Organization"
-            source="orgId"
-            reference="Organizations"
-          >
-            <TextField label="Organization Name" source="organizationName" />
-          </ReferenceField>
+          <TextField label="Organization Name" source="organizationName" />
         </Datagrid>
       )}
     </List>

src/components/msadmins/AdminFilter.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Filter, TextInput } from "react-admin";
+
+const AdminFilter = (props) => (
+  <Filter {...props}>
+    <TextInput label="Search by Name" source="fullname" alwaysOn />
+    <TextInput label="Search by Email" source="email" />
+    <TextInput label="Search by Role" source="role" />
+  </Filter>
+);
+
+export default AdminFilter;

src/components/msadmins/AdminList.js

@@ -1,31 +1,33 @@
 import React from "react";
 import { useMediaQuery } from "@material-ui/core";
-import {
-  List,
-  Datagrid,
-  TextField,
-  EmailField,
-  SimpleList,
-  TopToolbar,
-  ExportButton,
-  CreateButton,
-} from "react-admin";
-
-const AdminListActions = ({ basePath, data, resource }) => (
-  <TopToolbar>
-    <CreateButton basePath={basePath} />
-    <ExportButton basePath={basePath} record={data} resource={resource} />
-  </TopToolbar>
-);
+import { List, Datagrid, TextField, EmailField, SimpleList } from "react-admin";
+import Pagination from "../pagination/Pagination";
+import Filter from "../pagination/Filter";
 
 const AdminList = (props) => {
   const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const filters = [
+    {
+      label: "Filter by name",
+      source: "fullname",
+      alwaysOn: true,
+    },
+    {
+      label: "Filter by email",
+      source: "email",
+    },
+    {
+      label: "Filter by role",
+      source: "role",
+    },
+  ];
 
   return (
     <List
       label="Admins"
       title="Admins"
-      actions={<AdminListActions />}
+      pagination={<Pagination />}
+      filters={<Filter filters={filters} />}
       {...props}
     >
       {isSmall ? (
@@ -36,7 +38,7 @@ const AdminList = (props) => {
           tertiaryText={(record) => record.role}
         />
       ) : (
-        <Datagrid rowClick="show" isRowSelectable={(record) => false}>
+        <Datagrid rowClick="show">
           <TextField label="Name" source="fullname" />
           <EmailField source="email" />
           <TextField source="role" />

src/components/msadmins/AdminShow.js

@@ -5,12 +5,10 @@ import {
   TextField,
   TopToolbar,
   DeleteButton,
-  EditButton,
 } from "react-admin";
 
 const AdminShowActions = ({ basePath, data, resource }) => (
   <TopToolbar>
-    <EditButton basePath={basePath} record={data} />
     <DeleteButton basePath={basePath} record={data} resource={resource} />
   </TopToolbar>
 );

src/components/organizations/OrganizationFilter.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Filter, TextInput } from "react-admin";
+
+const OrganizationFilter = (props) => (
+  <Filter {...props}>
+    <TextInput label="Search by Name" source="organizationName" alwaysOn />
+    <TextInput label="Search by Email" source="organizationEmail" />
+  </Filter>
+);
+
+export default OrganizationFilter;

src/components/organizations/OrganizationList.js

@@ -1,26 +1,29 @@
 import React from "react";
 import { useMediaQuery } from "@material-ui/core";
-import {
-  List,
-  Datagrid,
-  TextField,
-  EmailField,
-  SimpleList,
-  Pagination,
-} from "react-admin";
-
-const OrganizationPagination = (props) => (
-  <Pagination rowsPerPageOptions={[10, 25, 50]} {...props} />
-);
+import { List, Datagrid, TextField, EmailField, SimpleList } from "react-admin";
+import Pagination from "../pagination/Pagination";
+import Filter from "../pagination/Filter";
 
 const OrganizationList = (props) => {
   const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const filters = [
+    {
+      label: "Filter by name",
+      source: "organizationName",
+      alwaysOn: true,
+    },
+    {
+      label: "Filter by email",
+      source: "organizationEmail",
+    },
+  ];
 
   return (
     <List
       label="Organizations"
       title="Organizations"
-      pagination={<OrganizationPagination />}
+      pagination={<Pagination />}
+      filters={<Filter filters={filters} />}
       {...props}
     >
       {isSmall ? (

src/components/organizations/OrganizationShow.js

@@ -38,8 +38,8 @@ const OrganizationShow = (props) => {
           <ReferenceManyField
             link="show"
             label=""
-            reference="Applications"
-            target="organizationId"
+            reference="Organizations"
+            target="id"
           >
             <SimpleList
               className={classes.root}

src/components/pagination/Filter.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Filter, TextInput } from "react-admin";
+
+export default ({ filters, ...props }) => (
+  <Filter {...props}>
+    {filters.map((filter) => (
+      <TextInput
+        label={filter.label}
+        source={filter.source}
+        alwaysOn={filter.alwaysOn || false}
+      />
+    ))}
+  </Filter>
+);

src/components/pagination/Pagination.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { Pagination } from "react-admin";
+
+export default (props) => (
+  <Pagination rowsPerPageOptions={[10, 25, 50]} {...props} />
+);

src/components/plans/PlanFilter.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { Filter, TextInput } from "react-admin";
+
+const PlanFilter = (props) => (
+  <Filter {...props}>
+    <TextInput label="Search by Name" source="planName" alwaysOn />
+  </Filter>
+);
+
+export default PlanFilter;

src/components/plans/PlanList.js

@@ -1,31 +1,29 @@
 import React from "react";
 import { useMediaQuery } from "@material-ui/core";
-import {
-  List,
-  Datagrid,
-  TextField,
-  SimpleList,
-  TopToolbar,
-  CreateButton,
-  ExportButton,
-} from "react-admin";
-
-const PlanListActions = ({ basePath, data, resource }) => (
-  <TopToolbar>
-    <CreateButton basePath={basePath} />
-    <ExportButton basePath={basePath} record={data} resource={resource} />
-  </TopToolbar>
-);
+import { List, Datagrid, TextField, SimpleList } from "react-admin";
+import Pagination from "../pagination/Pagination";
+import Filter from "../pagination/Filter";
 
 const PlanList = (props) => {
   const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const filters = [
+    {
+      label: "Filter by name",
+      source: "organizationName",
+      alwaysOn: true,
+    },
+    {
+      label: "Filter by email",
+      source: "organizationEmail",
+    },
+  ];
 
   return (
     <List
       label="Plans"
       title="Plans"
-      actions={<PlanListActions />}
-      pagination={null}
+      pagination={<Pagination />}
+      filters={<Filter filters={filters} />}
       {...props}
     >
       {isSmall ? (

src/services/data-provider.js

@@ -1,7 +1,7 @@
 import { fetchUtils } from "react-admin";
 import endpoints from "../utils/endpoints";
 import { stringify } from "querystring";
-import getPaginateQuery from "../utils/pagination";
+import getPaginateQuery, { filter } from "../utils/pagination";
 import handleProfileData from "../utils/data/profile-data";
 import {
   GET_LIST,
@@ -29,7 +29,7 @@ export default {
     const endpoint = endpoints(GET_LIST, resource, params);
     return httpClient(`${endpoint.url}?${stringify(query)}`).then(
       ({ json }) => ({
-        data: endpoint.getData(json.data),
+        data: filter(endpoint.getData(json.data), params),
         total: json.data.pageInfo
           ? json.data.pageInfo.totalRecord
           : json.data.length,
@@ -56,12 +56,20 @@ export default {
 
   getManyReference: (resource, params) => {
     const endpoint = endpoints(GET_MANY_REFERENCE, resource, params);
-    return httpClient(endpoint.url).then(({ json }) => ({
-      data: endpoint.getData(json.data, endpoint.target, endpoint.targetId),
-      total: json.data.pageInfo
-        ? json.data.pageInfo.totalRecord
-        : json.data.length,
-    }));
+    console.log("REFERENCE", params);
+    const query = {
+      limit: 50,
+      sort: "ASC",
+      page: 1,
+    };
+    return httpClient(`${endpoint.url}?${stringify(query)}`).then(
+      ({ json }) => ({
+        data: endpoint.getData(json.data, endpoint.target, endpoint.targetId),
+        total: json.data.pageInfo
+          ? json.data.pageInfo.totalRecord
+          : json.data.length,
+      })
+    );
   },
 
   update: (resource, params) => {

src/utils/data/admin-data.js

@@ -1,6 +1,10 @@
 export default (data) => {
-  if (data.records && Array.isArray(data.records)) {
-    return data.records.map((item) => ({ id: item.msAdminId, ...item }));
+  if (Array.isArray(data.records)) {
+    const profile = localStorage.getItem("profile");
+    const currentUserId = JSON.parse(profile).msAdminId;
+    return data.records
+      .filter((admin) => admin.msAdminId !== currentUserId)
+      .map((item) => ({ id: item.msAdminId, ...item }));
   } else if (data.msAdminId) {
     return { id: data.msAdminId, ...data };
   }

src/utils/data/application-data.js

@@ -1,14 +1,8 @@
-const getApplicationsData = (data, target, id) => {
+const getApplicationsData = (data) => {
   let mappedData = data;
 
   if (Array.isArray(data.records) && data.records[0].applicationId) {
     mappedData = data.records.map(mapApplicationIdToId);
-
-    if (target && id) {
-      mappedData = mappedData.filter((item) => {
-        return item[target]._id === id;
-      });
-    }
   }
 
   return mappedData;