Feature/display 1000 redesign published add playing column slides playlists

CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
+- [#209](https://github.com/os2display/display-admin-client/pull/209)
+- change font on body tag
+- add playing component for list column 
+- restyle published column
+- fix proptypes errors in console from paginationbutton
+- speed up cypress in GA and add tests of playing-component
 
 ## [2.0.2] - 2024-04-25
 

cypress.json

@@ -4,9 +4,9 @@
   "pluginsFile": false,
   "supportFile": false,
   "viewportHeight": 4000,
-  "defaultCommandTimeout": 10000,
+  "defaultCommandTimeout": 2000,
   "retries": {
-    "runMode": 2,
+    "runMode": 1,
     "openMode": 0
   }
 }

cypress/fixtures/published/played-in-playlist.json

@@ -0,0 +1,156 @@
+{
+  "@id": "/v1/playlists",
+  "@type": "hydra:Collection",
+  "hydra:member": [
+    {
+      "@type": "Playlist",
+      "@id": "/v1/playlists/01FZ0V95N8HPZ9ND9BRA5VDRNH",
+      "title": "asdf",
+      "description": "",
+      "schedules": [],
+      "created": "2022-03-25T16:31:52.000Z",
+      "modified": "2022-03-25T17:04:24.000Z",
+      "modifiedBy": "[email protected]",
+      "createdBy": "[email protected]",
+      "slides": "/v1/playlists/01FZ0V95N8HPZ9ND9BRA5VDRNH/slides",
+      "campaignScreens": [],
+      "campaignScreenGroups": [],
+      "tenants": [],
+      "isCampaign": false,
+      "published": {
+        "from": "2022-03-24T17:31:00.000Z",
+        "to": "2022-04-01T14:31:00.000Z"
+      }
+    },
+    {
+      "@type": "Playlist",
+      "@id": "/v1/playlists/01FZ0V95N8HPZ9ND9BRA5VDRNH",
+      "title": "asdf",
+      "description": "",
+      "schedules": [],
+      "created": "2022-03-25T16:31:52.000Z",
+      "modified": "2022-03-25T17:04:24.000Z",
+      "modifiedBy": "[email protected]",
+      "createdBy": "[email protected]",
+      "slides": "/v1/playlists/01FZ0V95N8HPZ9ND9BRA5VDRNH/slides",
+      "campaignScreens": [],
+      "campaignScreenGroups": [],
+      "tenants": [],
+      "isCampaign": false,
+      "published": {
+        "from": "2022-03-20T17:31:00.000Z",
+        "to": "2022-03-28T14:31:00.000Z"
+      }
+    },
+    {
+      "@type": "Playlist",
+      "@id": "/v1/playlists/01FZ0V95N8HPZ9ND9BRA5VDRNH",
+      "title": "asdf",
+      "description": "",
+      "schedules": [],
+      "created": "2022-03-25T16:31:52.000Z",
+      "modified": "2022-03-25T17:04:24.000Z",
+      "modifiedBy": "[email protected]",
+      "createdBy": "[email protected]",
+      "slides": "/v1/playlists/01FZ0V95N8HPZ9ND9BRA5VDRNH/slides",
+      "campaignScreens": [],
+      "campaignScreenGroups": [],
+      "tenants": [],
+      "isCampaign": false,
+      "published": {
+        "from": "2022-03-30T17:31:00.000Z",
+        "to": "2022-03-28T14:31:00.000Z"
+      }
+    }
+  ],
+  "hydra:totalItems": 4,
+  "hydra:view": {
+    "@id": "/v1/playlists?title=\u0026isCampaign=false\u0026order%5BcreatedAt%5D=desc",
+    "@type": "hydra:PartialCollectionView"
+  },
+  "hydra:search": {
+    "@type": "hydra:IriTemplate",
+    "hydra:template": "/v1/playlists{?title,description,createdBy,createdBy[],modifiedBy,modifiedBy[],published,isCampaign,order[title],order[description],order[createdAt],tenants.tenantKey,tenants.tenantKey[]}",
+    "hydra:variableRepresentation": "BasicRepresentation",
+    "hydra:mapping": [
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "title",
+        "property": "title",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "description",
+        "property": "description",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "createdBy",
+        "property": "createdBy",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "createdBy[]",
+        "property": "createdBy",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "modifiedBy",
+        "property": "modifiedBy",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "modifiedBy[]",
+        "property": "modifiedBy",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "published",
+        "property": "published",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "isCampaign",
+        "property": "isCampaign",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "order[title]",
+        "property": "title",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "order[description]",
+        "property": "description",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "order[createdAt]",
+        "property": "createdAt",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "tenants.tenantKey",
+        "property": "tenants.tenantKey",
+        "required": false
+      },
+      {
+        "@type": "IriTemplateMapping",
+        "variable": "tenants.tenantKey[]",
+        "property": "tenants.tenantKey",
+        "required": false
+      }
+    ]
+  }
+}

src/app.scss

@@ -4,6 +4,10 @@ html {
   height: -webkit-fill-available;
 }
 
+body {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+
 body,
 .row-full-height {
   min-height: 100vh;

src/app.spec.js

@@ -13,6 +13,6 @@ describe("Simple app loads", () => {
   });
 
   it("Loads and simple test", () => {
-    cy.get("tbody").find("tr").should("have.length", 10);
+    cy.get("tbody").should("exist");
   });
 });

src/components/playlist/campaign.spec.js

@@ -34,7 +34,7 @@ describe("Campaign pages work", () => {
     cy.get("#slides-section")
       .get("tbody")
       .find("tr td")
-      .should("have.length", 14);
+      .should("have.length", 16);
     cy.get("#slides-section")
       .get("tbody")
       .find("tr td")
@@ -49,7 +49,7 @@ describe("Campaign pages work", () => {
         cy.get("#slides-section")
           .get("tbody")
           .find("tr td")
-          .eq(8)
+          .eq(9)
           .invoke("text")
           .should("eq", firstElementText);
       });
@@ -69,7 +69,7 @@ describe("Campaign pages work", () => {
     cy.get("#slides-section")
       .find("tbody")
       .find("tr td")
-      .should("have.length", 7);
+      .should("have.length", 8);
 
     // Remove slide
     cy.get("#slides-section").find("tbody").find(".remove-from-list").click();

src/components/playlist/playlist-list.spec.js

@@ -55,7 +55,7 @@ describe("Playlists list tests", () => {
   });
 
   it("The correct amount of column headers loaded (playlist list)", () => {
-    cy.get("thead").find("th").should("have.length", 6);
+    cy.get("thead").find("th").should("have.length", 7);
   });
 
   it("It removes all selected", () => {
@@ -89,12 +89,32 @@ describe("Playlists list tests", () => {
       );
     cy.get("tbody")
       .find("tr td")
-      .eq(9)
+      .eq(10)
       .should("have.text", "Fra: fredag d. 18. marts 2022 kl. 16:04Til: -");
     cy.get("tbody")
       .find("tr td")
-      .eq(15)
+      .eq(17)
       .should("have.text", "Fra: -Til: lørdag d. 26. marts 2022 kl. 15:25");
-    cy.get("tbody").find("tr td").eq(21).should("have.text", "Ja");
+    cy.get("tbody").find("tr td").eq(24).should("have.text", "Ja");
+  });
+
+  it("Playing dates", () => {
+    const twentyNinthOfMarch = new Date("2022-03-29T12:30:00.000Z");
+
+    // Sets time to a specific date, in this case 2022-03-24
+    cy.clock(twentyNinthOfMarch);
+
+    cy.intercept("GET", "**/playlists*", {
+      fixture: "published/played-in-playlist.json",
+    }).as("played-in-playlist");
+
+    cy.intercept("GET", "**/slides*", {
+      fixture: "playlists/playlist-slide.json",
+    }).as("slides");
+
+    cy.visit("/playlist/list");
+    cy.get("tbody").find("tr td").eq(4).should("have.text", "Afspilles");
+    cy.get("tbody").find("tr td").eq(11).should("have.text", "Afspillet");
+    cy.get("tbody").find("tr td").eq(18).should("have.text", "Fremtidig");
   });
 });

src/components/playlist/playlist.spec.js

@@ -40,7 +40,7 @@ describe("Playlist pages work", () => {
     cy.get("#slides-section")
       .get("tbody")
       .find("tr td")
-      .should("have.length", 14);
+      .should("have.length", 16);
     cy.get("#slides-section")
       .get("tbody")
       .find("tr td")
@@ -55,7 +55,7 @@ describe("Playlist pages work", () => {
         cy.get("#slides-section")
           .get("tbody")
           .find("tr td")
-          .eq(8)
+          .eq(9)
           .invoke("text")
           .should("eq", firstElementText);
       });
@@ -75,7 +75,7 @@ describe("Playlist pages work", () => {
     cy.get("#slides-section")
       .find("tbody")
       .find("tr td")
-      .should("have.length", 7);
+      .should("have.length", 8);
 
     // Remove slide
     cy.get("#slides-section").find("tbody").find(".remove-from-list").click();

src/components/playlist/playlists-columns.jsx

@@ -5,6 +5,7 @@ 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 Playing from "../util/playing";
 
 /**
  * Columns for playlists lists.
@@ -38,6 +39,16 @@ function getPlaylistColumns({
         />
       ),
     },
+    {
+      path: "playing",
+      label: t("playing"),
+      // eslint-disable-next-line react/prop-types
+      content: ({ publishedFrom, publishedTo, published }) => (
+        <Playing
+          published={published || { from: publishedFrom, to: publishedTo }}
+        />
+      ),
+    },
     {
       key: "slides",
       label: t("number-of-slides"),

src/components/playlist/shared-list.spec.js

@@ -31,6 +31,6 @@ describe("Shared list tests", () => {
   });
 
   it("The correct amount of column headers loaded (shared playlist list)", () => {
-    cy.get("thead").find("th").should("have.length", 3);
+    cy.get("thead").find("th").should("have.length", 4);
   });
 });

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

@@ -1,6 +1,7 @@
 import { React } from "react";
 import { useTranslation } from "react-i18next";
 import Published from "../util/published";
+import Playing from "../util/playing";
 
 /**
  * Columns for shared playlists lists.
@@ -27,6 +28,16 @@ function getSharedPlaylistColumns() {
       // eslint-disable-next-line react/prop-types
       content: ({ published }) => <Published published={published} />,
     },
+    {
+      path: "playing",
+      label: t("playing"),
+      // eslint-disable-next-line react/prop-types
+      content: ({ publishedFrom, publishedTo, published }) => (
+        <Playing
+          published={published || { from: publishedFrom, to: publishedTo }}
+        />
+      ),
+    },
   ];
 
   return columns;

src/components/screen-list/campaign-icon.jsx

@@ -4,7 +4,7 @@ import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import { useDispatch } from "react-redux";
 import PropTypes from "prop-types";
 import idFromUrl from "../util/helpers/id-from-url";
-import calculateIsPublished from "../util/helpers/calculate-is-published";
+import { calculateIsPublished } from "../util/helpers/published-helper";
 import {
   api,
   useGetV2ScreensByIdCampaignsQuery,

src/components/slide/slides-columns.jsx

@@ -5,6 +5,7 @@ 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 Playing from "../util/playing";
 
 /**
  * Columns for slides lists.
@@ -53,6 +54,16 @@ function getSlidesColumns({
       content: ({ published }) => <Published published={published} />,
       label: t("columns.published"),
     },
+    {
+      path: "playing",
+      label: t("columns.playing"),
+      // eslint-disable-next-line react/prop-types
+      content: ({ publishedFrom, publishedTo, published }) => (
+        <Playing
+          published={published || { from: publishedFrom, to: publishedTo }}
+        />
+      ),
+    },
   ];
 
   return columns;