From d9fe80d0d7c08675a53643c69e02c5a388ec94bd Mon Sep 17 00:00:00 2001
From: Tomasz Rondio <tomasz.rondio@gmail.com>
Date: Wed, 15 Jan 2020 11:18:01 +0100
Subject: [PATCH] content list limitt notification

---
 .../ContentLists/Manual/ArticleItem.jsx       |  7 +-
 .../components/ContentLists/Manual/Manual.jsx | 79 +++++++++++--------
 client/styles/_publisher.scss                 | 31 +++++---
 package.json                                  |  3 +
 4 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/client/components/ContentLists/Manual/ArticleItem.jsx b/client/components/ContentLists/Manual/ArticleItem.jsx
index 122a9d6f..31520551 100644
--- a/client/components/ContentLists/Manual/ArticleItem.jsx
+++ b/client/components/ContentLists/Manual/ArticleItem.jsx
@@ -11,7 +11,8 @@ const ArticleItem = ({
   previewItem,
   index,
   showExtras = false,
-  remove
+  remove,
+  willBeTrimmed
 }) => {
   let thumbnail = null;
 
@@ -24,6 +25,7 @@ const ArticleItem = ({
       className={classNames("sd-list-item", {
         "sd-list-item--activated": previewItem && previewItem.id === item.id
       })}
+      style={willBeTrimmed ? { opacity: 0.5 } : {}}
       onClick={() => openPreview(item)}
     >
       {showExtras && item.isDuplicate && (
@@ -95,7 +97,8 @@ ArticleItem.propTypes = {
   previewItem: PropTypes.object,
   index: PropTypes.number,
   showExtras: PropTypes.bool,
-  remove: PropTypes.func
+  remove: PropTypes.func,
+  willBeTrimmed: PropTypes.bool
 };
 
 export default ArticleItem;
diff --git a/client/components/ContentLists/Manual/Manual.jsx b/client/components/ContentLists/Manual/Manual.jsx
index b7ea570a..e9b0d664 100644
--- a/client/components/ContentLists/Manual/Manual.jsx
+++ b/client/components/ContentLists/Manual/Manual.jsx
@@ -339,16 +339,6 @@ class Manual extends React.Component {
       let list = { ...this.state.list };
       let articles = { ...this.state.articles };
 
-      if (
-        this.props.list.limit &&
-        this.props.list.limit < result.contentList.length
-      ) {
-        this.props.api.notify.error(
-          "This list is limited to " + this.props.list.limit + " articles"
-        );
-        return null;
-      }
-
       list.items = result.contentList;
       articles.items = result.articles;
       this.recordChange("add", destination.index, [...list.items]);
@@ -486,33 +476,54 @@ class Manual extends React.Component {
                           : {}
                       }
                     >
-                      {filteredContentListItems.map((item, index) => (
-                        <Draggable
-                          key={"list" + item.id}
-                          draggableId={this.getDraggableId(item)}
-                          index={index}
-                        >
-                          {(provided, snapshot) => (
+                      {filteredContentListItems.map((item, index) => {
+                        let retArray = [];
+
+                        if (index === this.props.list.limit) {
+                          retArray.push(
                             <li
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                              style={provided.draggableProps.style}
+                              key={"limitnotification"}
+                              className="listLimitNotification"
                             >
-                              <ArticleItem
-                                item={item.content ? item.content : item}
-                                openPreview={item =>
-                                  this.props.openPreview(item)
-                                }
-                                previewItem={this.props.previewItem}
-                                index={index}
-                                showExtras={true}
-                                remove={id => this.removeItem(id)}
-                              />
+                              This list is limited to {this.props.list.limit}{" "}
+                              items. Articles below will be removed.
                             </li>
-                          )}
-                        </Draggable>
-                      ))}
+                          );
+                        }
+
+                        retArray.push(
+                          <Draggable
+                            key={"list" + item.id + "" + index}
+                            draggableId={this.getDraggableId(item)}
+                            index={index}
+                          >
+                            {(provided, snapshot) => (
+                              <li
+                                ref={provided.innerRef}
+                                {...provided.draggableProps}
+                                {...provided.dragHandleProps}
+                                style={provided.draggableProps.style}
+                              >
+                                <ArticleItem
+                                  item={item.content ? item.content : item}
+                                  openPreview={item =>
+                                    this.props.openPreview(item)
+                                  }
+                                  previewItem={this.props.previewItem}
+                                  index={index}
+                                  showExtras={true}
+                                  remove={id => this.removeItem(id)}
+                                  willBeTrimmed={
+                                    this.props.list.limit &&
+                                    this.props.list.limit <= index
+                                  }
+                                />
+                              </li>
+                            )}
+                          </Draggable>
+                        );
+                        return retArray;
+                      })}
                       {provided.placeholder}
 
                       {this.state.list.loading && (
diff --git a/client/styles/_publisher.scss b/client/styles/_publisher.scss
index 4c6f892c..54d07735 100644
--- a/client/styles/_publisher.scss
+++ b/client/styles/_publisher.scss
@@ -2,18 +2,25 @@
 // Styling for the web publisher module
 // ----------------------------------------------------------------------------------------
 
-@import '~mixins.scss';
-@import '~variables.scss';
-@import 'uploadFix.scss';
-@import 'treeList.scss';
-@import 'listElement.scss';
-@import 'helperElements.scss';
-@import 'dragNdrop.scss';
-@import 'articlePreview.scss';
-@import 'wizardThemeBox.scss';
-@import 'wizardThemeDetails.scss';
-@import 'iconOnHover.scss';
+@import "~mixins.scss";
+@import "~variables.scss";
+@import "uploadFix.scss";
+@import "treeList.scss";
+@import "listElement.scss";
+@import "helperElements.scss";
+@import "dragNdrop.scss";
+@import "articlePreview.scss";
+@import "wizardThemeBox.scss";
+@import "wizardThemeDetails.scss";
+@import "iconOnHover.scss";
 
 .sd-list-item-group li + li .sd-list-item {
-    border-top: 1px solid rgba(123, 123, 123, 0.2);
+  border-top: 1px solid rgba(123, 123, 123, 0.2);
+}
+
+.listLimitNotification {
+  padding: 5px;
+  text-align: center;
+  border-top: 2px dashed red;
+  color: red;
 }
diff --git a/package.json b/package.json
index ecc53d6d..6f753daa 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "moment": "^2.24.0",
     "ng-file-upload": "^12.2.13",
     "ng-infinite-scroll": "^1.3.0",
+    "owl.carousel": "^2.3.4",
     "react-awesome-slider": "^1.2.0",
     "react-beautiful-dnd": "^11.0.5",
     "react-select": "^3.0.4",
@@ -61,6 +62,8 @@
     "jest": "^24.8.0",
     "jest-dom": "^3.4.0",
     "jest-transform-css": "^2.0.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "superdesk-code-style": "^1.0.0",
     "superdesk-core": "superdesk/superdesk-client-core#2d4ce24",
     "wait-for-expect": "^1.2.0"