Event Occurence Status

client/components/EventItem/index.jsx

@@ -10,14 +10,16 @@ export const EventItem = ({ event, onClick }) => {
     const time = eventIsAllDayLong(event.dates) ? '' : moment(event.dates.start).format('HH:mm')
     const location = get(event, 'location[0].name')
     const filesAttachedCount = get(event, 'files', []).length
+    const hasBeenCanceled = get(event, 'occur_status.qcode') === 'eocstat:eos6'
     const classes = [
         'event',
-        event._hasPlanning ? 'event__has-planning' : null,
+        event._hasPlanning ? 'event--has-planning' : null,
+        hasBeenCanceled ? 'event--has-been-canceled' : null,
     ].join(' ')
     return (
         <ListItem item={event} onClick={onClick.bind(this, event)} draggable={true} className={classes}>
             <div className="line">
-                <span className="keyword">{event.name}</span>
+                <span className="event__title keyword">{event.name}</span>
                 <span className="item-heading">{event.definition_short}</span>
                 <time title={time}>{time}</time>
             </div>

client/components/EventItem/style.scss

@@ -1,10 +1,10 @@
 .event {
     border-left: 4px solid #bababa;
     box-sizing: border-box;
-    &__has-planning {
+    &--has-planning {
         border-left: 4px solid #00aa4d;
     }
-    &__has-been-canceled {
-        border-left: 4px solid #DC0026;
+    &--has-been-canceled {
+        .event__title { text-decoration: line-through; }
     }
 }

client/components/EventsList/_test.jsx

@@ -65,8 +65,8 @@ describe('<EventsList />', () => {
         expect(wrapper.find('.events-list__title').map((e) => e.text()))
         .toEqual(['Saturday October 15, 2016', 'Monday October 17, 2016'])
         // check classes
-        expect(wrapper.find('.ListItem__list-item').first().hasClass('event__has-planning')).toBe(true)
-        expect(wrapper.find('.ListItem__list-item').last().hasClass('event__has-planning')).toBe(false)
+        expect(wrapper.find('.ListItem__list-item').first().hasClass('event--has-planning')).toBe(true)
+        expect(wrapper.find('.ListItem__list-item').last().hasClass('event--has-planning')).toBe(false)
         // add a new item
         const newEvent = {
             _id: '123',

client/components/fields/CategoryField.jsx

@@ -1,43 +1,14 @@
-import React from 'react'
-import Select from 'react-select'
-import 'react-select/dist/react-select.css'
+import { SelectField } from './SelectField'
 import { connect } from 'react-redux'
 
-const CategoryFieldComponent = ({ input, label, options, selectedOptions, meta }) => {
-    const { touched, error, warning } = meta
-    return (
-        <div className="field">
-            {label && <label>{label}</label>}
-            <Select
-                value={selectedOptions}
-                multi={true}
-                options={options}
-                onChange={(opts) => (
-                    input.onChange(opts.map((opt) => (opt.value)))
-                )}
-                className="line-input"
-            />
-            {touched && ((error && <span className="help-block">{error}</span>) ||
-            (warning && <span className="help-block">{warning}</span>))}
-        </div>
-    )
-}
-
-CategoryFieldComponent.propTypes = {
-    input: React.PropTypes.object.isRequired,
-    label: React.PropTypes.string,
-    meta: React.PropTypes.object.isRequired,
-    options: React.PropTypes.array.isRequired,
-    selectedOptions: React.PropTypes.array.isRequired,
-}
-
 const mapStateToProps = (state, ownProps) => ({
+    multi: true,
     options: state.vocabularies.categories.map((cat) => (
         { label: cat.name, value: cat }
     )),
-    selectedOptions: (ownProps.input.value || []).map((cat) => (
+    value: (ownProps.input.value || []).map((cat) => (
         { label: cat.name, value: cat }
     )),
 })
 
-export const CategoryField = connect(mapStateToProps)(CategoryFieldComponent)
+export const CategoryField = connect(mapStateToProps)(SelectField)

client/components/fields/OccurStatusField.jsx

@@ -0,0 +1,12 @@
+import { SelectField } from './SelectField'
+import { connect } from 'react-redux'
+
+const mapStateToProps = (state, ownProps) => ({
+    multi: false,
+    options: state.vocabularies.eventoccurstatus.map((s) => (
+        { label: s.name, value: s }
+    )),
+    value: { label: ownProps.input.value.name, value: ownProps.input.value },
+})
+
+export const OccurStatusField = connect(mapStateToProps)(SelectField)

client/components/fields/SelectField.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import Select from 'react-select'
+import 'react-select/dist/react-select.css'
+
+export const SelectField = ({ input, label, options, value, meta, multi }) => {
+    const { touched, error, warning } = meta
+    return (
+        <div className="field">
+            {label && <label>{label}</label>}
+            <Select
+                value={value}
+                multi={multi}
+                options={options}
+                onChange={(opts) => {
+                    input.onChange((Array.isArray(opts)) ? opts.map((opt) => (opt.value)) : opts.value)
+                }}
+                className="line-input"
+            />
+            {touched && ((error && <span className="help-block">{error}</span>) ||
+            (warning && <span className="help-block">{warning}</span>))}
+        </div>
+    )
+}
+
+SelectField.propTypes = {
+    input: React.PropTypes.object.isRequired,
+    label: React.PropTypes.string,
+    meta: React.PropTypes.object.isRequired,
+    multi: React.PropTypes.bool.isRequired,
+    options: React.PropTypes.arrayOf(React.PropTypes.shape({
+        label: React.PropTypes.string,
+        value: React.PropTypes.object,
+    })).isRequired,
+    value: React.PropTypes.oneOfType([
+        React.PropTypes.array,
+        React.PropTypes.shape(undefined),
+        React.PropTypes.shape({
+            label: React.PropTypes.string,
+            value: React.PropTypes.object,
+        })
+    ]),
+}

client/components/fields/index.js

@@ -7,3 +7,4 @@ export { CategoryField } from './CategoryField'
 export { FilesFieldArray } from './FilesFieldArray'
 export { FileField } from './FileField'
 export { InputTextAreaField } from './InputTextAreaField'
+export { OccurStatusField } from './OccurStatusField'

client/containers/AddEventForm/index.jsx

@@ -102,6 +102,11 @@ export class Component extends React.Component {
                         <RepeatEventForm {...this.props} />
                     }
                 </div>
+                <div>
+                    <Field name="occur_status"
+                           component={fields.OccurStatusField}
+                           label="Event Occurence Status"/>
+                </div>
                 <div>
                     <label htmlFor="files">Attached files</label>
                     <FieldArray name="files" component={fields.FilesFieldArray} />

client/reducers/vocabularies.js

@@ -3,6 +3,7 @@ import { zipObject } from 'lodash'
 const initialState = {
     categories: [],
     g2_content_type: [],
+    eventoccurstatus: [],
 }
 
 const vocabularies = (state=initialState, action) => {

client/utils/index.js

@@ -25,8 +25,15 @@ export const createTestStore = (params={}) => {
                     {
                         _id: 'categories',
                         items: [
-                            { qname: 'test:sport', name: 'Sport' },
-                            { qname: 'test:news', name: 'News' },
+                            { qcode: 'test:sport', name: 'Sport' },
+                            { qcode: 'test:news', name: 'News' },
+                        ]
+                    },
+                    {
+                        _id: 'eventoccurstatus',
+                        items: [
+                            { qcode: 'eocstat:eos0', name: 'Unplanned event' },
+                            { qcode: 'eocstat:eos1', name: 'Planned, occurence planned only' },
                         ]
                     }
                 ] })

server/data/vocabularies.json

@@ -15,5 +15,20 @@
             {"is_active": true, "name": "Live blog", "qcode": "live_blog"}
 
         ]
+    },
+    {
+        "_id": "eventoccurstatus",
+        "display_name": "Event Occurence Status",
+        "type": "manageable",
+        "unique_field": "qcode",
+        "items": [
+            {"is_active": true, "qcode": "eocstat:eos0", "name": "Unplanned event"},
+            {"is_active": true, "qcode": "eocstat:eos1", "name": "Planned, occurence planned only"},
+            {"is_active": true, "qcode": "eocstat:eos2", "name": "Planned, occurence highly uncertain"},
+            {"is_active": true, "qcode": "eocstat:eos3", "name": "Planned, May occur"},
+            {"is_active": true, "qcode": "eocstat:eos4", "name": "Planned, occurence highly likely"},
+            {"is_active": true, "qcode": "eocstat:eos5", "name": "Planned, occurs certainly"},
+            {"is_active": true, "qcode": "eocstat:eos6", "name": "Planned, then cancelled"}
+        ]
     }
 ]

server/planning/events.py

@@ -42,15 +42,6 @@
     'eorol:venue': 'Venue organiser'
 }
 
-occurrence_statuses = {
-    'eocstat:eos0': 'Unplanned event',
-    'eocstat:eos1': 'Planned, occurence planned only',
-    'eocstat:eos2': 'Planned, occurence highly uncertain',
-    'eocstat:eos3': 'Planned, May occur',
-    'eocstat:eos4': 'Planned, occurence highly likely',
-    'eocstat:eos5': 'Planned, occurs certainly'
-}
-
 
 class EventsService(superdesk.Service):
     """Service class for the events model."""
@@ -233,6 +224,20 @@ def on_create(self, docs):
                     'byminute': {'type': 'string'}
                 }
             },
+            'occur_status': {
+                'nullable': True,
+                'type': 'dict',
+                'mapping': {
+                    'properties': {
+                        'qcode': not_analyzed,
+                        'name': not_analyzed
+                    }
+                },
+                'schema': {
+                    'qcode': {'type': 'string'},
+                    'name': {'type': 'string'},
+                }
+            },
             'ex_date': {
                 'type': 'list',
                 'mapping': {