Add all locations list view submenu

app/src/App/fhir-apps.tsx

@@ -81,6 +81,8 @@ import {
 import {
   LocationUnitList as FHIRLocationUnitList,
   NewEditLocationUnit as FHIRNewEditLocationUnit,
+  AllLocationListFlat as ListAllLocationsFlat,
+  URL_ALL_LOCATIONS,
 } from '@opensrp/fhir-location-management';
 import {
   teamAffiliationProps,
@@ -361,6 +363,15 @@ const FHIRApps = () => {
         {...locationUnitProps}
         permissions={['Location.read']}
         component={FHIRLocationUnitList}
+      />
+       <PrivateComponent
+        redirectPath={APP_CALLBACK_URL}
+        disableLoginProtection={DISABLE_LOGIN_PROTECTION}
+        exact
+        path={URL_ALL_LOCATIONS}
+        {...locationUnitProps}
+        permissions={['Location.read']}
+        component={ListAllLocationsFlat}
       />
       <PrivateComponent
         redirectPath={APP_CALLBACK_URL}

app/src/components/page/Sidebar/tests/utils.test.tsx

@@ -35,7 +35,7 @@ describe('getActiveKey', () => {
           url: URL_LOCATION_UNIT,
 
           children: [
-            { title: 'Location Units', url: URL_LOCATION_UNIT, key: 'location-unit' },
+            { title: 'Hierarchy', url: URL_LOCATION_UNIT, key: 'location-unit' },
             {
               enabled: !ENABLE_FHIR_LOCATIONS,
               title: 'Location Unit Group',
@@ -87,7 +87,7 @@ describe('getPathKey', () => {
           url: URL_LOCATION_UNIT,
 
           children: [
-            { title: 'Location Units', url: URL_LOCATION_UNIT, key: 'location-unit' },
+            { title: 'Hierarchy', url: URL_LOCATION_UNIT, key: 'location-unit' },
             {
               enabled: !ENABLE_FHIR_LOCATIONS,
               title: 'Location Unit Group',

app/src/containers/ConnectedSidebar/tests/__snapshots__/index.test.tsx.snap

@@ -42,7 +42,15 @@ Array [
           className="admin-link"
           to="/admin/location/unit"
         >
-          Location Units
+          Hierarchy
+        </Link>
+      </MenuItem>
+      <MenuItem>
+        <Link
+          className="admin-link"
+          to="/admin/location/all"
+        >
+          All Locations
         </Link>
       </MenuItem>
     </SubMenu>
@@ -120,7 +128,15 @@ Array [
           className="admin-link"
           to="/admin/location/unit"
         >
-          Location Units
+          Hierarchy
+        </Link>
+      </MenuItem>
+      <MenuItem>
+        <Link
+          className="admin-link"
+          to="/admin/location/all"
+        >
+          All Locations
         </Link>
       </MenuItem>
     </SubMenu>
@@ -232,7 +248,15 @@ Object {
                 className="admin-link"
                 to="/admin/location/unit"
               >
-                Location Units
+                Hierarchy
+              </Link>
+            </MenuItem>
+            <MenuItem>
+              <Link
+                className="admin-link"
+                to="/admin/location/all"
+              >
+                All Locations
               </Link>
             </MenuItem>
           </SubMenu>
@@ -313,7 +337,15 @@ Array [
           className="admin-link"
           to="/admin/location/unit"
         >
-          Location Units
+          Hierarchy
+        </Link>
+      </MenuItem>
+      <MenuItem>
+        <Link
+          className="admin-link"
+          to="/admin/location/all"
+        >
+          All Locations
         </Link>
       </MenuItem>
     </SubMenu>

app/src/routes/index.tsx

@@ -17,6 +17,7 @@ import {
   URL_USER_ROLES,
   URL_FHIR_CARE_TEAM,
 } from '../constants';
+import { URL_ALL_LOCATIONS } from '@opensrp/fhir-location-management';
 import { QUEST_VIEW_URL } from '@opensrp/fhir-views';
 import type { TFunction } from '@opensrp/i18n';
 import { LIST_HEALTHCARE_URL } from '@opensrp/fhir-healthcare-service';
@@ -94,11 +95,17 @@ export function getRoutes(roles: string[], t: TFunction, userRole: UserRole): Ro
           enabled: COMPOSITE_ENABLE_LOCATIONS_MANAGEMENT,
           children: [
             {
-              title: t('Location Units'),
+              title: t('Hierarchy'),
               url: URL_LOCATION_UNIT,
               key: 'location-unit',
               permissions: ['Location.read'],
             },
+            {
+              title: t('All Locations'),
+              url: URL_ALL_LOCATIONS,
+              key: 'all-locations',
+              permissions: ['Location.read'],
+            },
           ],
         },
         {

app/src/routes/tests/index.test.tsx

@@ -145,9 +145,14 @@ describe('routes', () => {
             children: [
               {
                 key: 'location-unit',
-                title: 'Location Units',
+                title: 'Hierarchy',
                 url: '/admin/location/unit',
               },
+              {
+                key: 'all-locations',
+                title: 'All Locations',
+                url: '/admin/location/all',
+              },
             ],
             enabled: true,
             key: 'location-management',

packages/fhir-location-management/src/components/AllLocationListFlat/index.css

@@ -0,0 +1,4 @@
+#all-locations .search-input-wrapper {
+  width: 55%;
+  min-width: 192px;
+}

packages/fhir-location-management/src/components/AllLocationListFlat/index.tsx

@@ -0,0 +1,182 @@
+import React, { useMemo } from 'react';
+import { useSimpleTabularView, NoData } from '@opensrp/react-utils';
+import { RouteComponentProps } from 'react-router';
+import {
+  locationResourceType,
+  URL_LOCATION_UNIT_EDIT,
+  URL_LOCATION_UNIT_ADD,
+} from '../../constants';
+import { BrokenPage, TableLayout, PageHeader, SearchForm } from '@opensrp/react-utils';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from '../../mls';
+import { Row, Col, Button, Divider, Dropdown } from 'antd';
+import { useHistory, Link } from 'react-router-dom';
+import { RbacCheck } from '@opensrp/rbac';
+import { MenuProps } from 'antd';
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
+import { BundleEntry } from '@smile-cdr/fhirts/dist/FHIR-R4/classes/bundleEntry';
+import { getEntryFromBundle, getTableData } from './utils';
+import './index.css';
+
+interface RouteParams {
+  locationId: string | undefined;
+}
+
+export interface Props {
+  fhirBaseURL: string;
+}
+
+const getSearchParams = (search: string | null) => {
+  const baseSearchParam = { _include: 'Location:partof' };
+  if (search) {
+    return { 'name:contains': search, ...baseSearchParam };
+  }
+  return baseSearchParam;
+};
+
+export type LocationListPropTypes = Props & RouteComponentProps<RouteParams>;
+
+/* Function which shows the list of all locations
+ *
+ * @param {Object} props - AllLocationListFlat component props
+ * @returns {Function} returns paginated locations list display
+ */
+export const AllLocationListFlat: React.FC<LocationListPropTypes> = (props) => {
+  const { fhirBaseURL } = props;
+  const { t } = useTranslation();
+  const history = useHistory();
+
+  const {
+    queryValues: { data, isFetching, isLoading, error },
+    tablePaginationProps,
+    searchFormProps,
+  } = useSimpleTabularView<BundleEntry>(
+    fhirBaseURL,
+    locationResourceType,
+    getSearchParams,
+    getEntryFromBundle
+  );
+
+  const tableData = useMemo(() => getTableData(data?.records ?? []), [data]);
+
+  if (error && !data) {
+    return <BrokenPage errorMessage={(error as Error).message} />;
+  }
+
+  type TableData = typeof tableData[0];
+
+  const getItems = (_: TableData): MenuProps['items'] => {
+    // Todo: replace _ above when handling onClick
+    return [
+      {
+        key: '1',
+        label: (
+          <Button disabled type="link">
+            {t('View details')}
+          </Button>
+        ),
+      },
+    ];
+  };
+
+  const columns = [
+    {
+      title: t('Name'),
+      dataIndex: 'name' as const,
+      editable: true,
+    },
+    {
+      title: t('Type'),
+      dataIndex: 'type' as const,
+      editable: true,
+    },
+    {
+      title: t('Status'),
+      dataIndex: 'status' as const,
+      editable: true,
+    },
+    {
+      title: t('Parent'),
+      dataIndex: 'parent' as const,
+      editable: true,
+    },
+    {
+      title: t('Actions'),
+      width: '10%',
+
+      // eslint-disable-next-line react/display-name
+      render: (_: unknown, record: TableData) => (
+        <span className="d-flex align-items-center">
+          <RbacCheck permissions={['Location.update']}>
+            <>
+              <Link to={`${URL_LOCATION_UNIT_EDIT}/${record.id.toString()}`} className="m-0 p-1">
+                {t('Edit')}
+              </Link>
+              <Divider type="vertical" />
+            </>
+          </RbacCheck>
+          <Dropdown
+            menu={{ items: getItems(record) }}
+            placement="bottomRight"
+            arrow
+            trigger={['click']}
+          >
+            <MoreOutlined className="more-options" data-testid="action-dropdown" />
+          </Dropdown>
+        </span>
+      ),
+    },
+  ];
+
+  const AddLocationBtn = () => (
+    <Button type="primary" onClick={() => history.push(URL_LOCATION_UNIT_ADD)}>
+      <PlusOutlined />
+      {t('Add Location')}
+    </Button>
+  );
+
+  const getTableLocale = () => {
+    const urlQuery = history.location.search;
+    const nameSearchActive = urlQuery.includes('search=');
+    if (!tableData.length && (!isFetching || !isLoading)) {
+      const description = nameSearchActive
+        ? ''
+        : t('No data available to display, you can start adding data now');
+      return {
+        emptyText: (
+          <NoData description={description}>{!nameSearchActive && <AddLocationBtn />}</NoData>
+        ),
+      };
+    }
+  };
+
+  const tableProps = {
+    datasource: tableData,
+    columns,
+    loading: isFetching || isLoading,
+    pagination: tablePaginationProps,
+    locale: getTableLocale(),
+  };
+
+  return (
+    <div id="all-locations" className="content-section">
+      <Helmet>
+        <title>{t('All Locations List')}</title>
+      </Helmet>
+      <PageHeader title={t('All Locations')} />
+      <Row className="list-view">
+        <Col className="main-content">
+          <div className="main-content__header">
+            <SearchForm {...searchFormProps} />
+            <RbacCheck permissions={['Location.create']}>
+              <Link to={URL_LOCATION_UNIT_ADD}>
+                <AddLocationBtn />
+              </Link>
+            </RbacCheck>
+          </div>
+          <TableLayout {...tableProps} />
+        </Col>
+      </Row>
+    </div>
+  );
+};

packages/fhir-location-management/src/components/AllLocationListFlat/tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`location-management/src/components/AllLocationListFlat Show data as expected: table data 1`] = `"Good Health Clinic"`;
+
+exports[`location-management/src/components/AllLocationListFlat Show data as expected: table data 2`] = `"Building"`;
+
+exports[`location-management/src/components/AllLocationListFlat Show data as expected: table data 3`] = `"active"`;
+
+exports[`location-management/src/components/AllLocationListFlat Show data as expected: table data 4`] = `""`;
+
+exports[`location-management/src/components/AllLocationListFlat Show data as expected: table data 5`] = `"Edit"`;
+
+exports[`location-management/src/components/AllLocationListFlat Show data as expected: table header 1`] = `"NameTypeStatusParentActions"`;