[SDESK-4852] Limit calendar and agenda display in lists (#1444)

* [SDESK-4852] Limit calendar and agenda display in lists * changes tooltip to list element
superdesk · Mar 2, 2020 · 6068c8a · 6068c8a
1 parent 302fd7d
commit 6068c8a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 29 deletions.
diff --git a/client/components/Agendas/AgendaNameList.jsx b/client/components/Agendas/AgendaNameList.jsx
@@ -1,24 +1,32 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import PropTypes from 'prop-types';
 import {get, sortBy} from 'lodash';
 import {gettext} from '../../utils';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 
-export const AgendaNameList = ({agendas}) => (
-    <span>
-        {get(agendas, 'length', 0) === 0 ? gettext('No Agenda Assigned.') :
-            sortBy(agendas.filter((a) => a), [(a) => get(a, 'name', '').toLowerCase()])
-                .map((agenda, index, arr) => {
-                    const className = !agenda.is_enabled ? 'sd-list-item__text--disabled' : '';
+export const AgendaNameList = ({agendas}) => {
+    let tooltipElem = (agendas || []).map((a) =>
+        <div key={a._id}>{a.name}{!a.is_enabled ? ' (Disabled)' : ''}</div>);
 
-                    return (
-                        <span key={index} className={className}>
-                            {agenda.name}{arr.length - 1 > index && ', '}
-                        </span>
-                    );
-                })
+    return (<span>
+        {get(agendas, 'length', 0) === 0 ? gettext('No Agenda Assigned.') :
+            (<OverlayTrigger
+                placement="left"
+                overlay={<Tooltip id="agenda_tooltip" className="tooltip--text-left">
+                    {tooltipElem}
+                </Tooltip>}>
+                <span>
+                    {sortBy(agendas.filter((a) => a), [(a) => get(a, 'name', '').toLowerCase()])
+                        .map((a, index, arr) => (<span
+                            key={a._id}
+                            className={!a.is_enabled ? 'sd-list-item__text--disabled' : ''}>
+                            {a.name}{index === arr.length - 1 ? '' : ', '}
+                        </span>))}</span>
+            </OverlayTrigger>)
         }
-    </span>
-);
+    </span>);
+};
 
 AgendaNameList.propTypes = {
     agendas: PropTypes.array,

diff --git a/client/components/fields/agendas.jsx b/client/components/fields/agendas.jsx
@@ -1,16 +1,16 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
 import {get} from 'lodash';
 
 import {AgendaNameList} from '../Agendas';
 
 export const agendas = ({item, fieldsProps}) => (
-    <div className="sd-list-item--element-grow">
+    <Fragment>
         <span className="sd-list-item__text-label">Agenda:</span>
-        <span className="sd-overflow-ellipsis sd-list-item__text-strong">
+        <span className="sd-overflow-ellipsis sd-list-item__text-strong sd-list-item--element-grow">
             <AgendaNameList agendas={get(fieldsProps, 'agendas.agendas')}/>
         </span>
-    </div>
+    </Fragment>
 
 );
 

diff --git a/client/components/fields/calendars.jsx b/client/components/fields/calendars.jsx
@@ -1,24 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+/* eslint-disable react/no-multi-comp */
 
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
 import {get} from 'lodash';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 
 export const calendars = ({item, calendars, grow}) => {
     const isCalendarActive = (cal) => (get((calendars || []).find((c) => c.qcode === cal.qcode), 'is_active', false));
+    let tooltipElem = get(item, 'calendars', []).map((c) =>
+        <div key={c.qcode}>{c.name}{!isCalendarActive(c) ? ' (Disabled)' : ''}</div>);
 
-    return (<div className={classNames({'sd-list-item--element-grow sd-overflow-ellipsis': grow})}>
+    return (<Fragment>
         <span className="sd-list-item__text-label">{gettext('Calendar:')}</span>
         {<span className="sd-overflow-ellipsis sd-list-item__text-strong sd-list-item--element-rm-10">
-            {get(item, 'calendars.length', 0) > 0 && item.calendars.map((c, index, arr) =>
-                <span key={c.qcode}
-                    className={!isCalendarActive(c) ? 'sd-list-item__text--disabled' : ''}>
-                    {c.name}{arr.length - 1 > index && ', '}
-                </span>)
-            }
+            {get(item, 'calendars.length', 0) > 0 && (<OverlayTrigger
+                placement="left" overlay={<Tooltip id="location_tooltip" className="tooltip--text-left">
+                    {tooltipElem}
+                </Tooltip>}>
+                <span>
+                    {item.calendars.map((c, index, arr) => (
+                        <span
+                            key={c.qcode}
+                            className={!isCalendarActive(c) ? 'sd-list-item__text--disabled' : ''}>
+                            {c.name}{index === arr.length - 1 ? '' : ', '}
+                        </span>
+                    ))}</span>
+            </OverlayTrigger>)}
             {get(item, 'calendars.length', 0) === 0 && <span>{gettext('No  calendar assigned')}</span>}
         </span>}
-    </div>);
+    </Fragment>);
 };
 
 calendars.propTypes = {