Merge pull request #826 from ubyssey/818-breaking-news

818 breaking news

dispatch/api/serializers.py

@@ -563,6 +563,8 @@ class ArticleSerializer(DispatchModelSerializer, DispatchPublishableSerializer):
 
     integrations = JSONField(required=False)
 
+    currently_breaking = serializers.BooleanField(source='is_currently_breaking', read_only=True)
+
     class Meta:
         model = Article
         fields = (
@@ -585,6 +587,9 @@ class Meta:
             'section_id',
             'published_at',
             'is_published',
+            'is_breaking',
+            'breaking_timeout',
+            'currently_breaking',
             'published_version',
             'current_version',
             'latest_version',
@@ -630,6 +635,8 @@ def update(self, instance, validated_data):
         instance.snippet = validated_data.get('snippet', instance.snippet)
         instance.reading_time = validated_data.get('reading_time', instance.reading_time)
         instance.importance = validated_data.get('importance', instance.importance)
+        instance.is_breaking = validated_data.get('is_breaking', instance.is_breaking)
+        instance.breaking_timeout = validated_data.get('breaking_timeout', instance.breaking_timeout)
         instance.seo_keyword = validated_data.get('seo_keyword', instance.seo_keyword)
         instance.seo_description = validated_data.get('seo_description', instance.seo_description)
         instance.integrations = validated_data.get('integrations', instance.integrations)

dispatch/migrations/0016_breaking_news.py

@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11 on 2018-07-17 21:30
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('dispatch', '0015_image_wrap'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='article',
+            name='breaking_timeout',
+            field=models.DateTimeField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='article',
+            name='is_breaking',
+            field=models.BooleanField(default=False),
+        ),
+    ]

dispatch/modules/content/models.py

@@ -2,6 +2,7 @@
 import os
 import re
 import uuid
+import datetime
 
 from jsonfield import JSONField
 from PIL import Image as Img
@@ -304,6 +305,9 @@ class Article(Publishable, AuthorMixin):
     topic = ForeignKey('Topic', null=True)
     tags = ManyToManyField('Tag')
 
+    is_breaking = BooleanField(default=False)
+    breaking_timeout = DateTimeField(blank=True, null=True)
+
     IMPORTANCE_CHOICES = [(i,i) for i in range(1,6)]
 
     importance = PositiveIntegerField(validators=[MaxValueValidator(5)], choices=IMPORTANCE_CHOICES, default=3)
@@ -335,6 +339,12 @@ def get_reading_list(self, ref=None, dur=None):
             'name': name
         }
 
+    def is_currently_breaking(self):
+        if self.is_published and self.is_breaking:
+            if self.breaking_timeout:
+                return timezone.now() < self.breaking_timeout
+        return False
+
     def save_tags(self, tag_ids):
         self.tags.clear()
         for tag_id in tag_ids:

dispatch/static/manager/src/js/components/ArticleEditor/ArticleSidebar.js

@@ -98,6 +98,8 @@ export default function ArticleSidebar(props) {
             importance={props.article.importance}
             reading_time={props.article.reading_time}
             integrations={props.article.integrations}
+            is_breaking={props.article.is_breaking}
+            breaking_timeout={props.article.breaking_timeout}
             availableIntegrations={props.integrations} />
         </TabPanel>
 

dispatch/static/manager/src/js/components/ArticleEditor/ArticleToolbar.js

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { AnchorButton, Intent } from '@blueprintjs/core'
-
 import { Toolbar } from '../Toolbar'
 import VersionsDropdown from '../Editor/toolbar/VersionsDropdown'
 
@@ -25,6 +24,10 @@ export default function ArticleToolbar(props) {
     </AnchorButton>
   )
 
+  const breakingNews = (
+    <span className='c-article-toolbar__breaking'>Breaking</span>
+  )
+
   return (
     <Toolbar>
       <div className='c-article-editor__toolbar'>
@@ -45,6 +48,7 @@ export default function ArticleToolbar(props) {
             published_version={props.article.published_version}
             latest_version={props.article.latest_version}
             getVersion={props.getVersion} />
+          {props.article.currently_breaking ? breakingNews : null}
         </div>
       </div>
     </Toolbar>

dispatch/static/manager/src/js/components/ArticleEditor/index.js

@@ -130,6 +130,10 @@ class ArticleEditorComponent extends React.Component {
     this.props.setArticle(R.assoc(field, value, this.getArticle()))
   }
 
+  toggleBreakingNews() {
+    this.handleUpdate('is_breaking', !this.getArticle().is_breaking)
+  }
+
   setVersion(version) {
     this.props.push({
       pathname: this.props.location.pathname,
@@ -151,7 +155,7 @@ class ArticleEditorComponent extends React.Component {
     }
 
     const title = this.props.isNew ? 'New article' : `Edit - ${article.headline}`
-    
+
     return (
       <DocumentTitle title={title}>
         <div className='u-container-main'>
@@ -160,6 +164,7 @@ class ArticleEditorComponent extends React.Component {
             publishArticle={() => this.publishArticle()}
             unpublishArticle={() => this.unpublishArticle()}
             previewArticle={() => this.previewArticle()}
+            toggleBreakingNews={() => this.toggleBreakingNews()}
             getVersion={(version) => this.setVersion(version)}
             article={article}
             isNew={this.props.isNew} />

dispatch/static/manager/src/js/components/Editor/tabs/DeliveryTab.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import R from 'ramda'
 
-import { FormInput, SelectInput, LinkButton } from '../../inputs'
+import { FormInput, SelectInput, LinkButton, DateTimeInput } from '../../inputs'
 import { Switch } from '@blueprintjs/core'
 
 const IMPORTANCE_OPTIONS = [
@@ -50,6 +50,16 @@ export default function DeliveryTab(props) {
     )
   }
 
+  const timeoutPicker = props.is_breaking ?
+    <div>
+      <p>Timeout</p>
+      <DateTimeInput
+        hidden={!props.is_breaking}
+        value={props.breaking_timeout}
+        onChange={dt => props.update('breaking_timeout', dt)} />
+    </div> : null
+
+
   return (
     <div>
 
@@ -76,6 +86,15 @@ export default function DeliveryTab(props) {
         {warningMessage}
       </FormInput>
 
+      <FormInput
+        label='Breaking news'>
+        <Switch
+          className='pt-large'
+          checked={props.is_breaking}
+          onChange={e => props.update('is_breaking', e.target.checked)} />
+          {timeoutPicker}
+      </FormInput>
+
     </div>
   )
 

dispatch/static/manager/src/js/components/inputs/ConfirmButton.js

@@ -30,7 +30,7 @@ export default class ConfirmButton extends React.Component {
         <Alert
           isOpen={this.state.alertOpen}
           cancelButtonText='Cancel'
-          confirmButtonText='Delete'
+          confirmButtonText={this.props.confirmButtonText}
           iconName='trash'
           onCancel={() => this.setState({ alertOpen: false })}
           onConfirm={() => this.onConfirm()}
@@ -43,5 +43,6 @@ export default class ConfirmButton extends React.Component {
 }
 
 ConfirmButton.defaultProps = {
-  message: 'Are you sure you want to delete this?'
+  message: 'Are you sure you want to delete this?',
+  confirmButtonText: 'Delete'
 }

dispatch/static/manager/src/js/pages/Articles/ArticleIndexPage.js

@@ -63,15 +63,20 @@ function ArticlePageComponent(props) {
       update={(tags) => props.searchArticles(props.location.query.author, props.location.query.section, tags, props.location.query.q)} />
   ]
 
+  const breakingNews = (
+    <div className='c-article-editor__breaking'>Breaking</div>
+  )
+
   return (
     <ItemIndexPage
       pageTitle={title}
       typePlural='articles'
       typeSingular='article'
       displayColumn='headline'
       filters={filters}
-      headers={[ 'Headline', 'Authors', 'Published', 'Revisions']}
+      headers={[ 'Headline', '', 'Authors', 'Published', 'Revisions']}
       extraColumns={[
+        item => item.currently_breaking ? breakingNews : '',
         item => item.authors_string,
         item => item.published_at ? humanizeDatetime(item.published_at) : 'Unpublished',
         item => item.latest_version + ' revisions'

dispatch/static/manager/src/styles/components/article_editor.scss

@@ -20,6 +20,22 @@
   width: 100%;
 }
 
+.c-article-editor__breaking {
+    background-color:#e41818;
+    color:white;
+    font-weight: bold;
+    display:inline-block;
+    padding:0.3rem;
+}
+
+.c-article-toolbar__breaking {
+  background-color: #e41818;
+  color:white;
+  font-weight: bold;
+  padding:0.3rem;
+  padding-bottom: 0.5rem;
+}
+
 .c-article-editor__toolbar__article-buttons {
   // Structure
   flex: 1;
@@ -29,6 +45,24 @@
   }
 }
 
+.c-article-editor__toolbar__breaking {
+  display: flex;
+  align-items: center;
+
+  .c-article-editor__toolbar__breaking__checkbox {
+    float: right;
+    position:relative;
+    margin-bottom: 0;
+    padding-left: 0;
+    height:100%;
+  }
+
+  span {
+    float: left;
+    padding-right: 0.5rem;
+  }
+}
+
 // 1.0 - Main content editor
 
 .c-article-editor {