Feature/cls2 1300 company files tab

src/apps/companies/constants.js

@@ -49,6 +49,11 @@ const LOCAL_NAV = [
     permissions: ['company.view_contact'],
     ariaDescription: 'Company contacts',
   },
+  {
+    path: 'files',
+    label: 'Files',
+    ariaDescription: 'Files',
+  },
   {
     path: 'account-management',
     label: 'Account management',

src/apps/routers.js

@@ -125,6 +125,7 @@ const reactRoutes = [
   '/companies/:companyId/activity',
   '/companies/:companyId/contacts',
   '/companies/:companyId/orders',
+  '/companies/:companyId/files',
   '/companies/:companyId/account-management',
   '/companies/:companyId/investments',
   '/companies/:companyId/investments/projects',

src/client/actions.js

@@ -31,6 +31,8 @@ export const CONTACTS__LOADED = 'CONTACTS__LOADED'
 export const CONTACTS__METADATA_LOADED = 'CONTACTS__METADATA_LOADED'
 export const CONTACTS__ACTIVITIES_LOADED = 'CONTACTS__ACTIVITIES_LOADED'
 
+export const FILES__LOADED = 'FILES__LOADED'
+
 export const ORDERS__LOADED = 'ORDERS__LOADED'
 export const ORDERS__METADATA_LOADED = 'ORDERS__METADATA_LOADED'
 

src/client/components/CollectionList/CollectionSummaryCardItem.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Link from '@govuk-react/link'
+
+const CollectionSummaryCardItem = ({ title, links, rows }) => (
+  <div
+    data-test="collection-item"
+    className="govuk-summary-card govuk-!-margin-top-6"
+  >
+    <div class="govuk-summary-card__title-wrapper">
+      <h2 class="govuk-summary-card__title">{title}</h2>
+      <div className="govuk-summary-card__title-actions">
+        {links &&
+          links.length > 0 &&
+          links.map((link, index) => (
+            <>
+              <Link href={link.url} {...link.attrs}>
+                {link.text}
+              </Link>
+              {index < links.length - 1 && ' | '}
+            </>
+          ))}
+      </div>
+    </div>
+
+    <div class="govuk-summary-card__content">
+      <dl class="govuk-summary-list">
+        {rows.map((row, index) => (
+          <div
+            data-test="metadata"
+            className="govuk-summary-list__row"
+            key={index}
+          >
+            <dt className="govuk-summary-list__key">{row.label}</dt>
+            <dd className="govuk-summary-list__value">{row.value}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  </div>
+)
+
+CollectionSummaryCardItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+      attrs: PropTypes.object,
+    })
+  ),
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string,
+    })
+  ).isRequired,
+}
+
+export default CollectionSummaryCardItem

src/client/components/CompanyTabbedLocalNavigation/constants.js

@@ -28,6 +28,12 @@ export const localNavItems = (companyId) => {
       permissions: ['company.view_contact'],
       ariaDescription: 'Company contacts',
     },
+    // {
+    //   path: 'files',
+    //   url: urls.companies.files(companyId),
+    //   label: 'Files',
+    //   ariaDescription: 'Files',
+    // },
     {
       path: 'account-management',
       url: urls.companies.accountManagement.index(companyId),

src/client/modules/Files/CollectionList/CompanyFilesCollection.jsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { Link, Details } from 'govuk-react'
+import { useParams } from 'react-router-dom'
+
+import { FILES__LOADED } from '../../../actions'
+import { FilteredCollectionList } from '../../../components'
+import { listSkeletonPlaceholder } from '../../../components/SkeletonPlaceholder'
+import { CompanyResource } from '../../../components/Resource'
+import CompanyLayout from '../../../components/Layout/CompanyLayout'
+import DefaultLayoutBase from '../../../components/Layout/DefaultLayoutBase'
+
+import { FILES_LIST_ID, TASK_GET_FILES_LIST, filesState2props } from './state'
+import CollectionSummaryCardItem from '../../../components/CollectionList/CollectionSummaryCardItem'
+
+const CompanyFilesCollection = ({
+  payload,
+  optionMetadata,
+  selectedFilters,
+  ...props
+}) => {
+  const { companyId } = useParams()
+
+  const collectionListTask = {
+    name: TASK_GET_FILES_LIST,
+    id: FILES_LIST_ID,
+    progressMessage: 'loading files',
+    renderProgress: listSkeletonPlaceholder(),
+    startOnRender: {
+      payload: {
+        ...payload,
+        relatedObjectId: companyId,
+      },
+      onSuccessDispatch: FILES__LOADED,
+    },
+  }
+
+  const collectionSummaryCardItemTemplateDefault = (item) => {
+    return <CollectionSummaryCardItem {...item} key={item.id} />
+  }
+
+  return (
+    <DefaultLayoutBase>
+      <CompanyResource id={companyId}>
+        {(company) => (
+          <CompanyLayout
+            company={company}
+            breadcrumbs={[{ text: 'Files' }]}
+            pageTitle="Files"
+          >
+            {company.archived ? (
+              <Details
+                summary="Why can I not add a file?"
+                data-test="archived-details"
+              >
+                Files cannot be added to an archived company.{' '}
+                <Link href={`/companies/${company.id}/unarchive`}>
+                  Click here to unarchive
+                </Link>
+              </Details>
+            ) : null}
+            <FilteredCollectionList
+              {...props}
+              collectionName="File"
+              sortOptions={optionMetadata.sortOptions}
+              taskProps={collectionListTask}
+              collectionItemTemplate={collectionSummaryCardItemTemplateDefault}
+              selectedFilters={selectedFilters}
+              addItemUrl={
+                company.archived ? null : `/files/create?company=${company.id}`
+              }
+              entityName="file"
+              defaultQueryParams={{
+                sortby: '-created_on',
+                page: 1,
+              }}
+            />
+          </CompanyLayout>
+        )}
+      </CompanyResource>
+    </DefaultLayoutBase>
+  )
+}
+
+export default connect(filesState2props)(CompanyFilesCollection)

src/client/modules/Files/CollectionList/constants.js

@@ -0,0 +1,9 @@
+export const SORT_OPTIONS = [
+  { value: '-created_on', name: 'Recently created' },
+  { value: 'created_on', name: 'Oldest' },
+]
+
+export const DOCUMENT_TYPES = {
+  SHAREPOINT: 'documents.sharepointdocument',
+  FILE_UPLOAD: 'documents.document',
+}

src/client/modules/Files/CollectionList/reducer.js

@@ -0,0 +1,19 @@
+import { FILES__LOADED } from '../../../actions'
+
+const initialState = {
+  results: [],
+  isComplete: false,
+}
+
+export default (state = initialState, { type, result }) => {
+  switch (type) {
+    case FILES__LOADED:
+      return {
+        ...state,
+        ...result,
+        isComplete: true,
+      }
+    default:
+      return state
+  }
+}

src/client/modules/Files/CollectionList/state.js

@@ -0,0 +1,19 @@
+import { SORT_OPTIONS } from './constants'
+import { parseQueryString } from '../../../utils'
+
+export const FILES_LIST_ID = 'filesList'
+
+export const TASK_GET_FILES_LIST = 'TASK_GET_FILES_LIST'
+
+export const filesState2props = ({ router, ...state }) => {
+  return {
+    ...state[FILES_LIST_ID],
+    payload: {
+      ...parseQueryString(router.location.search.slice(1)),
+    },
+    selectedFilters: {},
+    optionMetadata: {
+      sortOptions: SORT_OPTIONS,
+    },
+  }
+}

src/client/modules/Files/CollectionList/tasks.js

@@ -0,0 +1,14 @@
+import { transformResponseToCollection } from './transformers'
+import { apiProxyAxios } from '../../../components/Task/utils'
+
+const handleError = (e) => Promise.reject(Error(e.response.data.detail))
+
+export const getFiles = ({ page, limit = 10, sortby, relatedObjectId }) =>
+  apiProxyAxios
+    .get(
+      `v4/document/?related_object_id=${relatedObjectId}&limit=${limit}&offset=${limit * (page - 1)}&sortby=${sortby}`
+    )
+    .then(
+      ({ data }) => transformResponseToCollection(relatedObjectId, data),
+      handleError
+    )

src/client/modules/Files/CollectionList/transformers.js

@@ -0,0 +1,67 @@
+import {
+  formatDate,
+  DATE_FORMAT_MEDIUM_WITH_TIME,
+} from '../../../utils/date-utils'
+import { DOCUMENT_TYPES } from './constants'
+
+export const transformFileToListItem = () => (file) => {
+  let title = ''
+  const links = []
+  let summaryRows = []
+
+  // Function to format the summary rows
+  const addSummaryRow = (label, value) => ({ label, value })
+
+  // Handle different document types
+  switch (file.document_type) {
+    case DOCUMENT_TYPES.SHAREPOINT:
+      title = 'SharePoint link'
+      if (file.document.title) {
+        title += ` - ${file.document.title}`
+      }
+
+      // Add links for SharePoint document
+      links.push(
+        {
+          text: 'View file (opens in new tab)',
+          url: file.document.url,
+          attrs: { target: '_blank', rel: 'noopener noreferrer' },
+        },
+        { text: 'Delete', url: '#' }
+      )
+
+      // Add summary rows for SharePoint document
+      summaryRows = [
+        addSummaryRow(
+          'Date added',
+          formatDate(file.document.created_on, DATE_FORMAT_MEDIUM_WITH_TIME)
+        ),
+        addSummaryRow('Added by', file.created_by.name),
+        addSummaryRow('SharePoint url', file.document.url),
+      ]
+      break
+
+    case DOCUMENT_TYPES.FILE_UPLOAD:
+      // TODO: Handle flow for uploaded files
+      break
+
+    default:
+      // Handle other cases or leave empty if none
+      break
+  }
+
+  return {
+    id: file.id,
+    title,
+    links,
+    rows: summaryRows,
+  }
+}
+
+export const transformResponseToCollection = (
+  file,
+  { count, results = [] }
+) => ({
+  count,
+  results: results.map(transformFileToListItem(file)),
+})

src/client/reducers.js

@@ -90,6 +90,9 @@ import {
 } from './modules/Contacts/CollectionList/state'
 import contactsReducer from './modules/Contacts/CollectionList/reducer'
 
+import { FILES_LIST_ID } from './modules/Files/CollectionList/state'
+import filesReducer from './modules/Files/CollectionList/reducer'
+
 import { ID as INTERACTIONS_ID } from './modules/Interactions/CollectionList/state'
 import interactionsReducer from './modules/Interactions/CollectionList/reducer'
 
@@ -223,6 +226,7 @@ export const reducers = {
   [INVESTMENT_REMINDERS_ID]: investmentRemindersReducer,
   [REMINDER_SUMMARY_ID]: reminderSummaryReducer,
   [CONTACTS_LIST_ID]: contactsReducer,
+  [FILES_LIST_ID]: filesReducer,
   [CONTACT_ACTIVITIES_ID]: contactActivitiesReducer,
   [COMPANY_CONTACTS_LIST_ID]: contactsReducer,
   [INTERACTIONS_ID]: interactionsReducer,

src/client/routes.js

@@ -91,6 +91,7 @@ import RemoveGlobalHQ from './modules/Companies/CompanyBusinessDetails/LinkGloba
 import CompanyActivityCollectionNoAs from './modules/Companies/CompanyActivity/index'
 import CompanyContactsCollection from './modules/Contacts/CollectionList/CompanyContactsCollection'
 import CompanyOrdersCollection from './modules/Omis/CollectionList/CompanyOrdersCollection'
+import CompanyFilesCollection from './modules/Files/CollectionList/CompanyFilesCollection'
 import AccountManagement from './modules/Companies/AccountManagement'
 import CompanyProjectsCollection from './modules/Companies/CompanyInvestments/CompanyProjectsCollection'
 import LargeCapitalProfile from './modules/Companies/CompanyInvestments/LargeCapitalProfile'
@@ -284,6 +285,14 @@ function Routes() {
         </ProtectedRoute>
       ),
     },
+    {
+      path: '/companies/:companyId/files',
+      element: (
+        <ProtectedRoute module={'datahub:companies'}>
+          <CompanyFilesCollection />
+        </ProtectedRoute>
+      ),
+    },
     {
       path: '/companies/:companyId/orders',
       element: (

src/client/tasks.js

@@ -152,6 +152,7 @@ import {
   getContacts,
   getContactsMetadata,
 } from './modules/Contacts/CollectionList/tasks'
+import { getFiles } from './modules/Files/CollectionList/tasks'
 import {
   getInteractions,
   getInteractionsMetadata,
@@ -182,6 +183,8 @@ import {
   TASK_GET_CONTACTS_METADATA,
 } from './modules/Contacts/CollectionList/state'
 
+import { TASK_GET_FILES_LIST } from './modules/Files/CollectionList/state'
+
 import {
   TASK_GET_INTERACTIONS_LIST,
   TASK_GET_INTERACTIONS_ADVISER_NAME,
@@ -532,6 +535,7 @@ export const tasks = {
   'Large investment profiles filters':
     investmentProfilesTasks.loadFilterOptions,
   [TASK_GET_CONTACTS_LIST]: getContacts,
+  [TASK_GET_FILES_LIST]: getFiles,
   [TASK_GET_CONTACTS_METADATA]: getContactsMetadata,
   [TASK_GET_INTERACTIONS_LIST]: getInteractions,
   [TASK_GET_INTERACTIONS_ADVISER_NAME]: getAdviserNames,

src/lib/urls.js

@@ -174,6 +174,7 @@ module.exports = {
     details: url('/companies', '/:companyId/details'),
     archive: url('/companies', '/:companyId/archive'),
     contacts: url('/companies', '/:companyId/contacts'),
+    files: url('/companies', '/:companyId/files'),
     unarchive: url('/companies', '/:companyId/unarchive'),
     businessDetails: url('/companies', '/:companyId/business-details'),
     editOneList: url('/companies', '/:companyId/edit-one-list'),