feat: add logic for TemplateSelector

dhis2 · Dec 5, 2023 · 2d0a1cd · 2d0a1cd
1 parent 1269d80
commit 2d0a1cd
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 17 deletions.
diff --git a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js
@@ -18,7 +18,6 @@ const getStyles = () => ({
         padding: 0,
         gap: '4px',
         marginBottom: spacers.dp8,
-        overflow: 'hidden',
     },
     chipContainer: {
         padding: 0,

diff --git a/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js
@@ -1,15 +1,33 @@
 // @flow
 import React, { useCallback } from 'react';
-import { Chip } from '@dhis2/ui';
+import { Chip, Tooltip } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core/styles';
 import type { WorkingListTemplate } from './workingListsBase.types';
 
 type Props = {
     template: WorkingListTemplate,
     onSelectTemplate: (template: WorkingListTemplate) => void,
+    ...CssClasses,
 };
 
-export const TemplateSelectorChip = (props: Props) => {
-    const { template, onSelectTemplate } = props;
+const styles = {
+    // button style reset
+    button: {
+        border: 'none',
+        backgroundColor: 'transparent',
+        borderRadius: '16px',
+        padding: 0,
+        margin: 0,
+        minWidth: 0,
+        minHeight: 0,
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
+    },
+};
+
+const TemplateSelectorChipPlain = (props: Props) => {
+    const { template, onSelectTemplate, classes } = props;
     const { displayName } = template;
 
     const selectTemplateHandler = useCallback(() => {
@@ -19,8 +37,35 @@ export const TemplateSelectorChip = (props: Props) => {
     const text = displayName.length > 30 ? `${displayName.substring(0, 27)}...` : displayName;
 
     return (
-        <Chip marginTop="0" marginBottom="0" marginLeft="0" marginRight="0" dataTest="workinglist-template-selector-chip" onClick={selectTemplateHandler}>
-            {text}
-        </Chip>
+        <Tooltip
+            content={displayName}
+            placement={'top'}
+            openDelay={800}
+        >
+            {({ ref, onMouseOver, onMouseOut }) => (
+                <button
+                    ref={ref}
+                    onClick={selectTemplateHandler}
+                    className={classes.button}
+                    onMouseOver={onMouseOver}
+                    onMouseOut={onMouseOut}
+                    onFocus={onMouseOver}
+                    onBlur={onMouseOut}
+                >
+                    <Chip
+                        marginTop="0"
+                        marginBottom="0"
+                        marginLeft="0"
+                        marginRight="0"
+                        dataTest="workinglist-template-selector-chip"
+                        onClick={selectTemplateHandler}
+                    >
+                        {text}
+                    </Chip>
+                </button>
+            )}
+        </Tooltip>
     );
 };
+
+export const TemplateSelectorChip = withStyles(styles)(TemplateSelectorChipPlain);
diff --git a/...s/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js b/...s/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js
@@ -31,14 +31,6 @@ const styles = {
             backgroundColor: 'transparent',
         },
     },
-    // Override default chip margin
-    chip: {
-        marginTop: '0 !important',
-        marginBottom: '0 !important',
-        marginRight: '0 !important',
-        marginLeft: '0 !important',
-        backgroundColor: 'red',
-    },
 };
 
 export const TemplateSelectorChipPlain = (props: Props) => {
@@ -69,9 +61,11 @@ export const TemplateSelectorChipPlain = (props: Props) => {
                     onBlur={onMouseOut}
                 >
                     <Chip
+                        marginTop="0"
+                        marginBottom="0"
+                        marginLeft="0"
+                        marginRight="0"
                         dataTest="workinglist-template-selector-chip"
-                        tabIndex="0"
-                        className={classes.chip}
                         selected={id === currentTemplateId}
                     >
                         <TemplateSelectorChipContent