nhs-notify-web-template-management/frontend/src/components/molecules/MessageTemplates/MessageTemplates.tsx at beb3e468f7fddbaa08be2a4fd1fa7947436bf335 · NHSDigital/nhs-notify-web-template-management · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/* eslint-disable jsx-a11y/anchor-is-valid */

'use client';

import { Table, Tag } from 'nhsuk-react-components';
import content from '@content/content';
import { format } from 'date-fns';
import Link from 'next/link';
import {
  letterTypeDisplayMappings,
  previewTemplatePages,
  templateTypeDisplayMappings,
  previewSubmittedTemplatePages,
  templateDisplayCopyAction,
  templateDisplayDeleteAction,
  statusToDisplayMapping,
  statusToColourMapping,
} from 'nhs-notify-web-template-management-utils';
import { TemplateDto } from 'nhs-notify-backend-client';
import style from './MessageTemplates.module.scss';

const messageTemplatesContent = content.pages.messageTemplates;

const generateViewTemplateLink = (template: TemplateDto): string => {
  if (template.templateStatus === 'SUBMITTED') {
    return `/${previewSubmittedTemplatePages(template.templateType)}/${template.id}`;
  }

  return `/${previewTemplatePages(template.templateType)}/${template.id}`;
};

const typeDisplayMappings = (template: TemplateDto): string =>
  template.templateType === 'LETTER' &&
  'letterType' in template &&
  template.letterType &&
  'language' in template &&
  template.language
    ? letterTypeDisplayMappings(template.letterType, template.language)
    : templateTypeDisplayMappings(template.templateType);

export function MessageTemplates({
  templateList,
}: {
  templateList: TemplateDto[];
}) {
  return (
    <div className='nhsuk-grid-row'>
      <div className='nhsuk-grid-column-full'>
        <Table
          caption={messageTemplatesContent.listOfTemplates}
          data-testid='manage-template-table'
          id='manage-template-table'
          responsive
        >
          <Table.Head role='rowgroup'>
            <Table.Row>
              <Table.Cell data-testid='manage-template-table-header-template-name'>
                {messageTemplatesContent.tableHeadings.name}
              </Table.Cell>
              <Table.Cell data-testid='manage-template-table-header-template-type'>
                {messageTemplatesContent.tableHeadings.type}
              </Table.Cell>
              <Table.Cell data-testid='manage-template-table-header-template-status'>
                {messageTemplatesContent.tableHeadings.status}
              </Table.Cell>
              <Table.Cell data-testid='manage-template-table-header-template-date-created'>
                {messageTemplatesContent.tableHeadings.lastEdited}
              </Table.Cell>
              <Table.Cell data-testid='manage-template-table-header-action'>
                {messageTemplatesContent.tableHeadings.action.text}
              </Table.Cell>
            </Table.Row>
          </Table.Head>
          <Table.Body>
            {templateList.map((template, index) => (
              <Table.Row key={template.id}>
                <Table.Cell>
                  <Link href={generateViewTemplateLink(template)}>
                    {template.name}
                  </Link>
                </Table.Cell>
                <Table.Cell>{typeDisplayMappings(template)}</Table.Cell>
                <Table.Cell>
                  <Tag color={statusToColourMapping(template)}>
                    {statusToDisplayMapping(template)}
                  </Tag>
                </Table.Cell>
                <Table.Cell>
                  {format(`${template.updatedAt}`, 'do MMM yyyy')}
                  <br />
                  {format(`${template.updatedAt}`, 'HH:mm')}
                </Table.Cell>
                <Table.Cell>
                  <div className={style.actionLinksWrapper}>
                    {templateDisplayCopyAction(template) ? (
                      <p className='nhsuk-u-margin-bottom-2'>
                        <Link
                          href={`/copy-template/${template.id}`}
                          id={`copy-template-link-${index}`}
                          aria-label={`${messageTemplatesContent.tableHeadings.action.copy} ${template.name}`}
                          data-testid='copy-link'
                        >
                          {messageTemplatesContent.tableHeadings.action.copy}
                        </Link>
                      </p>
                    ) : null}
                    {templateDisplayDeleteAction(template) ? (
                      <p className='nhsuk-u-margin-bottom-2'>
                        <Link
                          href={`/delete-template/${template.id}`}
                          aria-label={`${messageTemplatesContent.tableHeadings.action.delete} ${template.name}`}
                          data-testid='delete-link'
                        >
                          {messageTemplatesContent.tableHeadings.action.delete}
                        </Link>
                      </p>
                    ) : null}
                  </div>
                </Table.Cell>
              </Table.Row>
            ))}
          </Table.Body>
        </Table>
      </div>
    </div>
  );
}