Merge pull request #254 from aroskanalen/feature/1765-change-order-by…

…-published

Added option to sort slides in playlist by "published to" and "status"

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#254](https://github.com/os2display/display-admin-client/pull/254)
+  - Changed playlist.slides list columns.
+  - Set published.to to now when creating new slides.
+  - Added option to sort slides in playlist by published.to and status.
 - [#253](https://github.com/os2display/display-admin-client/pull/253)
   - Refactored scheduling to increase user experience.
   - Added interval and count to rrule inputs.

e2e/campaign.spec.js

@@ -336,7 +336,7 @@ test.describe("Campaign pages work", () => {
       .click();
     await expect(
       page.locator("#slides-section").locator("tbody").locator("tr td")
-    ).toHaveCount(7);
+    ).toHaveCount(6);
 
     // Remove slide
     await page

e2e/playlist.spec.js

@@ -105,6 +105,7 @@ test.describe("Playlist create tests", () => {
     await expect(page.locator("#cancel_playlist")).not.toBeVisible();
   });
 });
+
 test.describe("Playlist list tests", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/admin/playlist/list");
@@ -238,6 +239,6 @@ test.describe("Playlist list tests", () => {
   test("The correct amount of column headers loaded (playlist list)", async ({
     page,
   }) => {
-    await expect(page.locator("thead").locator("th")).toHaveCount(6);
+    await expect(page.locator("thead").locator("th")).toHaveCount(8);
   });
 });

e2e/slides.spec.js

@@ -491,7 +491,7 @@ test.describe("Slides list works", () => {
   });
 
   test("The correct amount of column headers loaded", async ({ page }) => {
-    await expect(page.locator("thead").locator("th")).toHaveCount(7);
+    await expect(page.locator("thead").locator("th")).toHaveCount(9);
   });
 
   test("It removes all selected", async ({ page }) => {

src/components/playlist/playlist-campaign-form.jsx

@@ -82,7 +82,7 @@ function PlaylistCampaignForm({
             type="text"
             label={t("playlist-campaign-form.playlist-description-label")}
             placeholder={t(
-              "playlist-campaign-form.playlist-description-placeholder"
+              "playlist-campaign-form.playlist-description-placeholder",
             )}
             value={playlist.description}
             onChange={handleInput}

src/components/playlist/playlists-columns.jsx

@@ -4,7 +4,10 @@ import ColumnHoc from "../util/column-hoc";
 import SelectColumnHoc from "../util/select-column-hoc";
 import UserContext from "../../context/user-context";
 import ListButton from "../util/list/list-button";
-import Published from "../util/published";
+import Publishing from "../util/publishing.jsx";
+import DateValue from "../util/date-value.jsx";
+import { Button } from "react-bootstrap";
+import PublishingStatus from "../util/publishingStatus.jsx";
 
 /**
  * Columns for playlists lists.
@@ -28,16 +31,6 @@ function getPlaylistColumns({
   });
 
   const columns = [
-    {
-      path: "published",
-      label: t("published"),
-      // eslint-disable-next-line react/prop-types
-      content: ({ publishedFrom, publishedTo, published }) => (
-        <Published
-          published={published || { from: publishedFrom, to: publishedTo }}
-        />
-      ),
-    },
     {
       key: "slides",
       label: t("number-of-slides"),
@@ -61,6 +54,21 @@ function getPlaylistColumns({
         />
       ),
     },
+    {
+      key: "publishing-from",
+      content: ({ published }) => <DateValue date={published.from} />,
+      label: t("publishing-from"),
+    },
+    {
+      key: "publishing-to",
+      content: ({ published }) => <DateValue date={published.to} />,
+      label: t("publishing-to"),
+    },
+    {
+      key: "status",
+      content: ({ published }) => <PublishingStatus published={published} />,
+      label: t("status"),
+    },
   ];
 
   return columns;

src/components/playlist/shared-playlists-column.jsx

@@ -1,6 +1,6 @@
 import { React } from "react";
 import { useTranslation } from "react-i18next";
-import Published from "../util/published";
+import Publishing from "../util/publishing.jsx";
 
 /**
  * Columns for shared playlists lists.
@@ -25,7 +25,7 @@ function getSharedPlaylistColumns() {
       path: "published",
       label: t("published"),
       // eslint-disable-next-line react/prop-types
-      content: ({ published }) => <Published published={published} />,
+      content: ({ published }) => <Publishing published={published} />,
     },
   ];
 

src/components/slide/slide-create.jsx

@@ -30,7 +30,7 @@ function SlideCreate() {
     theme: themeInfo,
     content: {},
     media: [],
-    published: { from: null, to: null },
+    published: { from: new Date(), to: null },
   };
 
   return <SlideManager saveMethod="POST" initialState={data} />;

src/components/slide/slides-columns.jsx

@@ -1,10 +1,12 @@
 import { React } from "react";
 import { useTranslation } from "react-i18next";
+import { Button } from "react-bootstrap";
 import TemplateLabelInList from "../util/template-label-in-list";
 import ListButton from "../util/list/list-button";
-import Published from "../util/published";
 import ColumnHoc from "../util/column-hoc";
 import SelectColumnHoc from "../util/select-column-hoc";
+import PublishingStatus from "../util/publishingStatus";
+import DateValue from "../util/date-value";
 
 /**
  * Columns for slides lists.
@@ -14,26 +16,49 @@ import SelectColumnHoc from "../util/select-column-hoc";
  * @param {string} props.infoModalRedirect - The url for redirecting in the info modal.
  * @param {string} props.infoModalTitle - The info modal title.
  * @param {string} props.dataKey The data key for mapping the data. the list button
+ * @param {object} props.hideColumns Columns to hide.
+ * @param {object} props.sortColumns Columns to sort.
  * @returns {object} The columns for the slides lists.
  */
 function getSlidesColumns({
   apiCall,
   infoModalRedirect,
   infoModalTitle,
   dataKey,
+  hideColumns = {},
+  sortColumns = {},
 }) {
   const { t } = useTranslation("common", { keyPrefix: "slides-list" });
 
-  const columns = [
-    {
+  const columns = [];
+
+  if (!hideColumns?.title) {
+    columns.push({
+      path: "title",
+      label: t("columns.name"),
+    });
+  }
+
+  if (!hideColumns?.createdBy) {
+    columns.push({
+      path: "createdBy",
+      label: t("columns.created-by"),
+    });
+  }
+
+  if (!hideColumns?.template) {
+    columns.push({
       // eslint-disable-next-line react/prop-types
       content: ({ templateInfo }) => (
         <TemplateLabelInList templateInfo={templateInfo} />
       ),
       key: "template",
       label: t("columns.template"),
-    },
-    {
+    });
+  }
+
+  if (!hideColumns?.playlists) {
+    columns.push({
       key: "playlists",
       // eslint-disable-next-line react/prop-types
       content: ({ onPlaylists }) => (
@@ -46,19 +71,55 @@ function getSlidesColumns({
         />
       ),
       label: t("columns.slide-on-playlists"),
-    },
-    {
-      key: "published",
-      // eslint-disable-next-line react/prop-types
-      content: ({ published }) => <Published published={published} />,
-      label: t("columns.published"),
-    },
-  ];
+    });
+  }
+
+  if (!hideColumns?.publishingFrom) {
+    columns.push({
+      key: "publishing-from",
+      content: ({ published }) => <DateValue date={published.from} />,
+      label: t("columns.publishing-from"),
+    });
+  }
+
+  if (!hideColumns?.publishingTo) {
+    columns.push({
+      key: "publishing-to",
+      content: ({ published }) => <DateValue date={published.to} />,
+      label: t("columns.publishing-to"),
+      actions: sortColumns.publishedTo ? (
+        <Button
+          type="button"
+          className=" btn-sm ms-2 p-0 ps-1 pe-1 btn-secondary"
+          onClick={sortColumns.publishedTo}
+        >
+          ↓
+        </Button>
+      ) : null,
+    });
+  }
+
+  if (!hideColumns?.status) {
+    columns.push({
+      key: "status",
+      content: ({ published }) => <PublishingStatus published={published} />,
+      label: t("columns.status"),
+      actions: sortColumns.status ? (
+        <Button
+          type="button"
+          className=" btn-sm ms-2 p-0 ps-1 pe-1 btn-secondary"
+          onClick={sortColumns.status}
+        >
+          ↓
+        </Button>
+      ) : null,
+    });
+  }
 
   return columns;
 }
 
-const SlideColumns = ColumnHoc(getSlidesColumns);
-const SelectSlideColumns = SelectColumnHoc(getSlidesColumns);
+const SlideColumns = ColumnHoc(getSlidesColumns, true);
+const SelectSlideColumns = SelectColumnHoc(getSlidesColumns, true);
 
 export { SelectSlideColumns, SlideColumns };

src/components/util/date-value.jsx

@@ -0,0 +1,18 @@
+import { React } from "react";
+import PropTypes from "prop-types";
+import dayjs from "dayjs";
+
+/**
+ * @param {object} props The props.
+ * @param {string} props.date Date string to format.
+ * @returns {object} Formatted date
+ */
+function DateValue({ date }) {
+  return date ? dayjs(date).format("D/M/YYYY HH:mm") : "";
+}
+
+DateValue.propTypes = {
+  date: PropTypes.string,
+};
+
+export default DateValue;

src/components/util/drag-and-drop-table/drag-and-drop-table.jsx

@@ -15,7 +15,7 @@ import "./drag-and-drop-table.scss";
  * @param {Array} props.columns The columns for the table.
  * @param {Array} props.data The data to display in the table.
  * @param {string} props.name The id of the form element
- * @param {Function} props.onDropped Callback for when an items is dropped and
+ * @param {Function} props.onDropped Callback for when an item is dropped and
  *   the list is reordered.
  * @param {Function} props.callback - The callback.
  * @param {string} props.label - The label.
@@ -134,6 +134,7 @@ function DragAndDropTable({
                             providedSnapshot.isDragging,
                             providedDraggable.draggableProps.style
                           )}
+                          className={data.className ?? ''}
                         >
                           <td>
                             <FontAwesomeIcon
@@ -171,7 +172,7 @@ function DragAndDropTable({
 
 DragAndDropTable.propTypes = {
   data: PropTypes.arrayOf(
-    PropTypes.shape({ name: PropTypes.string, id: PropTypes.string })
+    PropTypes.shape({ name: PropTypes.string, id: PropTypes.string, className: PropTypes.string })
   ).isRequired,
   columns: ColumnProptypes.isRequired,
   name: PropTypes.string.isRequired,

src/components/util/list/toast-component/display-toast.jsx

@@ -10,6 +10,13 @@ export function displaySuccess(text) {
   toast.success(displayText);
 }
 
+/** @param {string} text The toast display text */
+export function displayWarning(text) {
+  const displayText = `${text} ${dayjs().format("HH:mm:ss")}`;
+
+  toast.warning(displayText);
+}
+
 /**
  * @param {string} errorString - The toast display text
  * @param {object} error - The error