Skip to content

Commit

Permalink
(fix) Various UI fixes for the Audit Details tab (openmrs#196)
Browse files Browse the repository at this point in the history
  • Loading branch information
denniskigen committed Oct 23, 2023
1 parent 07cadce commit 7639fbd
Show file tree
Hide file tree
Showing 12 changed files with 151 additions and 115 deletions.
115 changes: 115 additions & 0 deletions src/components/audit-details/audit-details.component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { formatDatetime, parseDate } from '@openmrs/esm-framework';
import { StructuredListWrapper, StructuredListRow, StructuredListCell, StructuredListBody } from '@carbon/react';
import type { EncounterType } from '../../types';

interface AuditDetailsProps {
form: FormGroupData;
}

export interface AuditInfo {
creator: Creator;
dateCreated: string;
changedBy: ChangedBy;
dateChanged: string;
}

interface Creator {
display: string;
}

interface ChangedBy {
uuid: string;
display: string;
}

interface FormGroupData {
auditInfo: AuditInfo;
name: string;
uuid: string;
version: string;
encounterType: EncounterType;
description: string;
display?: string;
published?: boolean;
retired?: boolean;
}

const AuditDetails: React.FC<AuditDetailsProps> = ({ form }) => {
console.log('form: ', form);

const { t } = useTranslation();
const [description, setDescription] = useState('');
const [encounterType, setEncounterType] = useState('');
const [name, setName] = useState('');
const [published, setPublished] = useState(false);
const [retired, setRetired] = useState(false);
const [version, setVersion] = useState('');

useEffect(() => {
if (form) {
setName(form.name);
setDescription(form.description);
setEncounterType(`${form.encounterType.display} - ${form.encounterType.uuid}`);
setVersion(form.version);
setPublished(form.published);
setRetired(form.retired);
}
}, [form]);

return (
<StructuredListWrapper isCondensed selection={false}>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell>
<b>{t('formName', 'Form Name')}</b>
</StructuredListCell>
<StructuredListCell>{name}</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell>{t('description', 'Description')}</StructuredListCell>
<StructuredListCell>{description}</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell>{t('formUuid', 'Form UUID')}</StructuredListCell>
<StructuredListCell>{form?.uuid}</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell>{t('version', 'Version')}</StructuredListCell>
<StructuredListCell>{version}</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell>{t('encounterType', 'Encounter Type')}</StructuredListCell>
<StructuredListCell>{encounterType}</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell>{t('createdBy', 'Created By')}</StructuredListCell>
<StructuredListCell>
{`${form?.auditInfo?.creator?.display ?? t('unknownUser', 'Unknown')} on ${formatDatetime(
parseDate(form?.auditInfo?.dateCreated),
)}`}
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell>{t('lastEditedBy', 'Last Edited By')}</StructuredListCell>
<StructuredListCell>
{form?.auditInfo?.dateChanged
? `${form?.auditInfo?.changedBy.display} on ${formatDatetime(parseDate(form?.auditInfo?.dateChanged))}`
: t('uneditedFormMsg', 'This form has never been edited')}
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell>{t('published', 'Published')}</StructuredListCell>
<StructuredListCell>{published ? t('yes', 'Yes') : t('no', 'No')}</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell>{t('retired', 'Retired')}</StructuredListCell>
<StructuredListCell>{retired ? t('yes', 'Yes') : t('no', 'No')}</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
);
};

export default AuditDetails;
97 changes: 0 additions & 97 deletions src/components/audit-form/audit-form.component.tsx

This file was deleted.

6 changes: 3 additions & 3 deletions src/components/form-editor/form-editor.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ import type { Schema } from '../../types';
import { useClobdata } from '../../hooks/useClobdata';
import { useForm } from '../../hooks/useForm';
import ActionButtons from '../action-buttons/action-buttons.component';
import AuditDetails from '../audit-details/audit-details.component';
import FormRenderer from '../form-renderer/form-renderer.component';
import InteractiveBuilder from '../interactive-builder/interactive-builder.component';
import SchemaEditor from '../schema-editor/schema-editor.component';
import styles from './form-editor.scss';
import AuditForm from '../audit-form/audit-form.component';

interface ErrorProps {
error: Error;
Expand Down Expand Up @@ -311,7 +311,7 @@ const FormEditor: React.FC = () => {
<TabList aria-label="Form previews">
<Tab>{t('preview', 'Preview')}</Tab>
<Tab>{t('interactiveBuilder', 'Interactive Builder')}</Tab>
{<Tab>{form && t('auditForm')}</Tab>}
{<Tab>{form && t('auditDetails', 'Audit Details')}</Tab>}
</TabList>
<TabPanels>
<TabPanel>
Expand All @@ -320,7 +320,7 @@ const FormEditor: React.FC = () => {
<TabPanel>
<InteractiveBuilder schema={schema} onSchemaChange={updateSchema} isLoading={isLoadingFormOrSchema} />
</TabPanel>
<TabPanel>{form && <AuditForm form={form} />}</TabPanel>
<TabPanel>{form && <AuditDetails form={form} />}</TabPanel>
</TabPanels>
</Tabs>
</Column>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const NewFormModal: React.FC<NewFormModalProps> = ({ schema, onSchemaChange, sho
<FormGroup legendText={''}>
<TextInput
id="formName"
labelText={t('formName', 'Form name')}
labelText={t('formName', 'Form Name')}
placeholder={t('namePlaceholder', 'What the form is called in the system')}
value={formName}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => setFormName(event.target.value)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/modals/save-form-modal.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
<Stack gap={5}>
<TextInput
id="name"
labelText={t('formName', 'Form name')}
labelText={t('formName', 'Form Name')}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => setName(event.target.value)}
placeholder={t('formNamePlaceholder', 'e.g. OHRI Express Care Patient Encounter Form')}
required
Expand Down
2 changes: 1 addition & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { RenderType } from '@openmrs/openmrs-form-engine-lib';
import type { AuditInfo } from './components/audit-form/audit-form.component';
import type { AuditInfo } from './components/audit-details/audit-details.component';

export interface Form {
uuid: string;
Expand Down
7 changes: 5 additions & 2 deletions translations/am.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"addPage": "Add Page",
"addQuestion": "Add Question",
"addSection": "Add Section",
"auditForm": "",
"auditDetails": "Audit Details",
"autogeneratedUuid": "UUID (auto-generated",
"cancel": "Cancel",
"cancelButtonText": "Cancel",
Expand Down Expand Up @@ -42,7 +42,6 @@
"duplicated": "Duplicated",
"duplicateQuestion": "Duplicate question",
"editButton": "Edit {elementType}",
"editedBy": "",
"editQuestion": "Edit question",
"editSchema": "Edit schema",
"encounterType": "Encounter Type",
Expand Down Expand Up @@ -88,13 +87,15 @@
"forms": "Forms",
"formUnpublished": "Form unpublished",
"formUnpublishedSuccessfully": "form was unpublished successfully",
"formUuid": "Form UUID",
"import": "Import",
"inputDummySchema": "Input dummy schema",
"interactiveBuilder": "Interactive Builder",
"interactiveBuilderHelperText": "The Interactive Builder lets you build your form schema without writing JSON code. The Preview tab automatically updates as you build your form. When done, click Save Form to save your form.",
"invalidVersionWarning": "Version can only start with with a number",
"isQuestionRequiredOrOptional": "Is this question a required or optional field? Required fields must be answered before the form can be submitted.",
"labelPlaceholder": "e.g. Type of Anaesthesia",
"lastEditedBy": "Last Edited By",
"loadDraft": "Load draft",
"loading": "Loading",
"loadingSchema": "Loading schema",
Expand Down Expand Up @@ -166,6 +167,8 @@
"success": "Success!",
"tryAgain": "Try again",
"typeRequired": "Type is required",
"uneditedFormMsg": "This form has never been edited",
"unknownUser": "Unknown",
"unpublishConfirmation": "Are you sure you want to unpublish this form?",
"unpublishExplainerText": "Unpublishing a form means you can no longer access it from your frontend. Unpublishing forms does not delete their associated schemas, it only affects whether or not you can access them in your frontend.",
"unpublishForm": "Unpublish form",
Expand Down
7 changes: 5 additions & 2 deletions translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"addPage": "Add Page",
"addQuestion": "Add Question",
"addSection": "Add Section",
"auditForm": "Form Audit Details",
"auditDetails": "Audit Details",
"autogeneratedUuid": "Form UUID",
"cancel": "Cancel",
"cancelButtonText": "Cancel",
Expand Down Expand Up @@ -42,7 +42,6 @@
"duplicated": "Duplicated",
"duplicateQuestion": "Duplicate question",
"editButton": "Edit {elementType}",
"editedBy": "Last Edited By",
"editQuestion": "Edit question",
"editSchema": "Edit schema",
"encounterType": "Encounter Type",
Expand Down Expand Up @@ -88,13 +87,15 @@
"forms": "Forms",
"formUnpublished": "Form unpublished",
"formUnpublishedSuccessfully": "form was unpublished successfully",
"formUuid": "Form UUID",
"import": "Import",
"inputDummySchema": "Input dummy schema",
"interactiveBuilder": "Interactive Builder",
"interactiveBuilderHelperText": "The Interactive Builder lets you build your form schema without writing JSON code. The Preview tab automatically updates as you build your form. When done, click Save Form to save your form.",
"invalidVersionWarning": "Version can only start with with a number",
"isQuestionRequiredOrOptional": "Is this question a required or optional field? Required fields must be answered before the form can be submitted.",
"labelPlaceholder": "e.g. Type of Anaesthesia",
"lastEditedBy": "Last Edited By",
"loadDraft": "Load draft",
"loading": "Loading",
"loadingSchema": "Loading schema",
Expand Down Expand Up @@ -166,6 +167,8 @@
"success": "Success!",
"tryAgain": "Try again",
"typeRequired": "Type is required",
"uneditedFormMsg": "This form has never been edited",
"unknownUser": "Unknown",
"unpublishConfirmation": "Are you sure you want to unpublish this form?",
"unpublishExplainerText": "Unpublishing a form means you can no longer access it from your frontend. Unpublishing forms does not delete their associated schemas, it only affects whether or not you can access them in your frontend.",
"unpublishForm": "Unpublish Form",
Expand Down
7 changes: 5 additions & 2 deletions translations/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"addPage": "Add Page",
"addQuestion": "Add Question",
"addSection": "Add Section",
"auditForm": "",
"auditDetails": "Audit Details",
"autogeneratedUuid": "UUID (auto-generated",
"cancel": "Cancel",
"cancelButtonText": "Cancel",
Expand Down Expand Up @@ -42,7 +42,6 @@
"duplicated": "Duplicated",
"duplicateQuestion": "Duplicate question",
"editButton": "Edit {elementType}",
"editedBy": "",
"editQuestion": "Edit question",
"editSchema": "Edit schema",
"encounterType": "Encounter Type",
Expand Down Expand Up @@ -88,13 +87,15 @@
"forms": "Forms",
"formUnpublished": "Form unpublished",
"formUnpublishedSuccessfully": "form was unpublished successfully",
"formUuid": "Form UUID",
"import": "Import",
"inputDummySchema": "Input dummy schema",
"interactiveBuilder": "Interactive Builder",
"interactiveBuilderHelperText": "The Interactive Builder lets you build your form schema without writing JSON code. The Preview tab automatically updates as you build your form. When done, click Save Form to save your form.",
"invalidVersionWarning": "Version can only start with with a number",
"isQuestionRequiredOrOptional": "Is this question a required or optional field? Required fields must be answered before the form can be submitted.",
"labelPlaceholder": "e.g. Type of Anaesthesia",
"lastEditedBy": "Last Edited By",
"loadDraft": "Load draft",
"loading": "Loading",
"loadingSchema": "Loading schema",
Expand Down Expand Up @@ -166,6 +167,8 @@
"success": "Success!",
"tryAgain": "Try again",
"typeRequired": "Type is required",
"uneditedFormMsg": "This form has never been edited",
"unknownUser": "Unknown",
"unpublishConfirmation": "Are you sure you want to unpublish this form?",
"unpublishExplainerText": "Unpublishing a form means you can no longer access it from your frontend. Unpublishing forms does not delete their associated schemas, it only affects whether or not you can access them in your frontend.",
"unpublishForm": "Unpublish form",
Expand Down
Loading

0 comments on commit 7639fbd

Please sign in to comment.