Merge pull request #45 from tomaszrondio/master

feature: targeted publishing loading spinner
superdesk · Jun 20, 2018 · 3fa6145 · 3fa6145
2 parents 90fe528 + 71db088
commit 3fa6145
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 6 deletions.
diff --git a/client/extensions/targetedPublishing/TargetedPublishing.js b/client/extensions/targetedPublishing/TargetedPublishing.js
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import {ToggleBox} from './components/ToggleBox.jsx';
 import Tenant from './Tenant';
 import NewDestination from './NewDestination';
+import Loading from './components/Loading.jsx';
 import styles from './targetedPublishing.css';
 
 
@@ -51,7 +52,8 @@ export class TargetedPublishing extends React.Component {
             sites: [],
             rules: [],
             addWebsiteOpen: false,
-            newSite: {}
+            newSite: {},
+            loading: true
         };
     }
 
@@ -67,12 +69,16 @@ export class TargetedPublishing extends React.Component {
     }
 
     evaluate() {
+        this.setState({
+            loading: true
+        });
         return axios.post(this.state.apiUrl + 'organization/rules/evaluate',this.state.item, {headers: this.state.apiHeader})
             .then(res => {
                 if (!_.isEmpty(res.data)) {
                     let rules = res.data.tenants.filter(rule => rule.route);
                     this.setState({
-                        rules: rules
+                        rules: rules,
+                        loading: false
                     });
                 }
                 return res;
@@ -129,7 +135,7 @@ export class TargetedPublishing extends React.Component {
     render() {
         const siteRules = (
             <div>
-                {!this.state.rules.length &&
+                {!this.state.rules.length && !this.state.loading &&
                     <div className="sp-targetedPublshing__alert">
                         No websites have been set, this article won't show up on any website. It will go to: <br />
                         <span>Publisher > Output Control > Incoming list</span>
@@ -164,7 +170,7 @@ export class TargetedPublishing extends React.Component {
 
         let addButton = null;
 
-        if (remainingSites.length) {
+        if (remainingSites.length && !this.state.loading) {
             addButton = (
                 <button className="navbtn dropdown sd-create-btn" onClick={this.addButtonHandler.bind(this)}>
                     <i className="icon-plus-large"></i>
@@ -207,9 +213,10 @@ export class TargetedPublishing extends React.Component {
             );
         }
 
-
         return (
+
             <ToggleBox title="Web publishing" style="toggle-box--dark sp--dark-ui" isOpen={true}>
+                {this.state.loading && <Loading />}
                 {siteRules}
                 {addButton}
                 {addWebsite}

diff --git a/client/extensions/targetedPublishing/components/Loading.css b/client/extensions/targetedPublishing/components/Loading.css
@@ -0,0 +1,40 @@
+.spinner {
+    margin: 10px auto 0;
+    width: 70px;
+    text-align: center;
+  }
+
+  .spinner > div {
+    width: 10px;
+    height: 10px;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  }
+
+  .spinner .bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  .spinner .bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+
+  @-webkit-keyframes sk-bouncedelay {
+    0%, 80%, 100% { -webkit-transform: scale(0) }
+    40% { -webkit-transform: scale(1.0) }
+  }
+
+  @keyframes sk-bouncedelay {
+    0%, 80%, 100% {
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    } 40% {
+      -webkit-transform: scale(1.0);
+      transform: scale(1.0);
+    }
+  }
diff --git a/client/extensions/targetedPublishing/components/Loading.jsx b/client/extensions/targetedPublishing/components/Loading.jsx
@@ -0,0 +1,15 @@
+/* eslint-disable */
+import React from 'react'
+import './Loading.css';
+
+function Loading() {
+    return (
+        <div className="spinner">
+            <div className="bounce1"></div>
+            <div className="bounce2"></div>
+            <div className="bounce3"></div>
+        </div>
+    );
+}
+
+export default Loading
diff --git a/client/views/monitoring/list-item.html b/client/views/monitoring/list-item.html
@@ -23,7 +23,18 @@
             <div ng-repeat="item in i.articles"
                 class="state-label flex-pull-right"
                 ng-class="{'state-published': item.status == 'published', 'state-killed': item.status == 'unpublished'}">
-                <span sd-tooltip="{{item.tenant.subdomain}}.{{item.tenant.domainName}}" flow="left">{{item.tenant.name}}</span>
+                <a
+                    ng-if="item.status == 'published'"
+                    ng-href="https://{{item.tenant.subdomain}}.{{item.tenant.domainName}}{{item._links.online.href}}"
+                    target="_blank"
+                    style="color: inherit"
+                    ng-click="$event.stopPropagation()"
+                    sd-tooltip="{{item.tenant.subdomain}}.{{item.tenant.domainName}}"
+                    flow="left">{{item.tenant.name}}</a>
+                <span
+                    ng-if="item.status != 'published'"
+                    sd-tooltip="{{item.tenant.subdomain}}.{{item.tenant.domainName}}"
+                    flow="left">{{item.tenant.name}}</span>
                 <span sd-tooltip="impressions/page views" flow="left"
                     ng-if="item.status != 'unpublished'">
                     {{item.articleStatistics.impressionsNumber}}/{{item.articleStatistics.pageViewsNumber}}