Adds slugline in event and planning lists

superdesk · Jun 27, 2017 · c6e78e1 · c6e78e1
1 parent 45f6dbc
commit c6e78e1
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/client/actions/planning.js b/client/actions/planning.js
@@ -245,8 +245,8 @@ const fetchPlannings = (params={}) => (
         // fetch the plannings through the api
         let q = {}
         if (params.planningIds) {
-            q = { query: { bool: {} } }
-            q.query.bool.should = params.planningIds.map(
+            q = { source: { query: { bool: {} } } }
+            q.source.query.bool.should = params.planningIds.map(
                 (pid) => ({ term: { _id: pid } })
             )
         }

diff --git a/client/components/EventItem/index.jsx b/client/components/EventItem/index.jsx
@@ -60,10 +60,10 @@ export const EventItem = ({
                     }
                     <PubStatusLabel status={event.pubstatus}/>
                     <span className="sd-overflow-ellipsis sd-list-item--element-grow event__title">
-                        {event.name}
-                        {(event.definition_short && event.name !== event.definition_short) &&
-                            <span>&nbsp;|&nbsp;{event.definition_short}</span>
+                        {event.slugline &&
+                            <span className="ListItem__slugline">{event.slugline}</span>
                         }
+                        <span className="ListItem__headline">{event.name}</span>
                     </span>
                     <TimeEvent event={event}/>
                 </div>

diff --git a/client/components/EventMetadata/index.jsx b/client/components/EventMetadata/index.jsx
@@ -5,6 +5,7 @@ import { Datetime } from '../index'
 const formatDate = (d) => React.createElement(Datetime, { date: d })
 const FIELDS = [
     // 'Label', 'key1', 'key2', ['key3', func(value)] etc...
+    ['Slugline', 'slugline'],
     ['Name', 'name'],
     ['From', ['dates.start', formatDate]],
     ['To', ['dates.end', formatDate]],
@@ -54,6 +55,7 @@ export function EventMetadata ({ event }) {
 
 EventMetadata.propTypes = {
     event: React.PropTypes.shape({
+        slugline: React.PropTypes.string,
         name: React.PropTypes.string.isRequired,
         dates: React.PropTypes.object.isRequired,
         definition_short: React.PropTypes.string,

diff --git a/client/components/ListItem/style.scss b/client/components/ListItem/style.scss
@@ -0,0 +1,9 @@
+@import '~superdesk-core/styles/sass/variables.scss';
+
+.ListItem__slugline {
+    color: $sd-keyword;
+    font-weight: 700;
+    text-transform: uppercase;
+    margin-right: 1rem;
+}
+.ListItem__headline { color: $gray; }
diff --git a/client/components/PlanningItem/index.jsx b/client/components/PlanningItem/index.jsx
@@ -40,10 +40,10 @@ const PlanningItem = ({ item, event, agenda, onClick, active, onSpike, onUnspike
                         <span className="label label--alert">spiked</span>
                     }
                     <span className="sd-overflow-ellipsis sd-list-item--element-grow">
-                        {item.slugline}
-                        {(item.headline && item.slugline !== item.headline) &&
-                            <span>&nbsp;|&nbsp;{item.headline}</span>
+                        {item.slugline &&
+                            <span className="ListItem__slugline">{item.slugline}</span>
                         }
+                        <span className="ListItem__headline">{item.headline}</span>
                     </span>
                     {event &&
                         <span className="PlanningItem__event">