Merge branch 'content-entity' into ping-feature

README.md

@@ -4,4 +4,4 @@
 - Run `npm install` in the module directory to setup dependencies.
 - Run `npm run build` to generate a production build of JS file.
 - There is also `npm run start` to use in development mode.
-- The module attaches the JS library on the `admin/site-dashboard` page of the module.
+- The module attaches the JS library on the `/admin/config/services/site-dashboard` page of the module.

js/src/components/dashboard/buttons.css

@@ -7,6 +7,7 @@
   padding: 0 0.75rem;
   transition: all 0.15s ease-in-out;
   min-width: 80px;
+  cursor: pointer;
   letter-spacing: 1px;
 }
 

js/src/components/dashboard/index.js

@@ -10,6 +10,43 @@ const Dashboard = () => {
   const [addSiteOpen, setAddSiteModalOpen] = useState(false);
   const closeAddSiteModal = () => setAddSiteModalOpen(false);
 
+  // @todo: This is to be fetched from API or drupalSettings.
+  const siteList = [
+    {
+      "id": "1",
+      "name": "Mothercare",
+      "url": "https://www.mothercare.com.kw/en",
+      "endpoint": "https://www.mothercare.com.kw/en/api",
+      "favicon": "https://www.axelerant.com/themes/custom/axe/favicon.ico",
+      "token": "ABC123",
+    },
+    {
+      "id": "2",
+      "name": "HM",
+      "url": "https://kw.hm.com/en",
+      "endpoint": "https://kw.hm.com/en/api",
+      "favicon": "https://www.axelerant.com/themes/custom/axe/favicon.ico",
+      "token": "XYZ789",
+    },
+  ];
+
+  const getSiteList = () => {
+    let sites = [];
+    siteList.forEach((site) => {
+      sites.push(
+        <SiteTile
+          id={site.id}
+          name={site.name}
+          url={site.url}
+          endpoint={site.endpoint}
+          token={site.token}
+          faviconUrl={site.favicon}
+        />
+      );
+    });
+    return sites;
+  };
+
   return (
     <>
       <div className="site-dashboard-header">
@@ -32,24 +69,7 @@ const Dashboard = () => {
         </Popup>
       </div>
       <div className="site-list">
-        <SiteTile
-          id={1}
-          name="Site Name 1"
-          url="https://www.example.com"
-          faviconUrl="https://www.axelerant.com/themes/custom/axe/favicon.ico"
-        />
-        <SiteTile
-          id={2}
-          name="Site Name 2"
-          url="https://www.example.com"
-          faviconUrl="https://www.axelerant.com/themes/custom/axe/favicon.ico"
-        />
-        <SiteTile
-          id={3}
-          name="Site Name 3"
-          url="https://www.example.com"
-          faviconUrl="https://www.axelerant.com/themes/custom/axe/favicon.ico"
-        />
+        { getSiteList() }
       </div>
     </>
   );

js/src/components/overview/index.js

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import TabContent from './tab-content';
+import './overview-modal.css';
+import './tabs.css';
+
+const Overview = ({ closeOverviewModal }) => {
+  const [activeTab, setActiveTab] = useState("1");
+  const [activeTabMethod, setActiveTabMethod] = useState("http-check");
+
+  const tabClick = (e) => {
+    setActiveTab(e.target.dataset.tabIndex);
+    setActiveTabMethod(e.target.dataset.callbackMethod);
+    // Set classes.
+    document.querySelector('.tab-item.active').classList.remove('active');
+    e.target.classList.add('active');
+  };
+
+  return (
+    <div className="overview-wrapper">
+      <div className="header">
+        <h2>Site Overview</h2>
+        <button className="site-tile-btn tertiary" onClick={() => closeOverviewModal()}>Close</button>
+      </div>
+      <div className="tabs">
+        <ul>
+          <li
+            onClick={(e) => tabClick(e)}
+            data-tab-index="1"
+            data-callback-method="http-check"
+            className="tab-item active"
+          >
+            Availability
+          </li>
+          <li
+            onClick={(e) => tabClick(e)}
+            data-tab-index="2"
+            data-callback-method="status-check"
+            className="tab-item"
+          >
+            Status Report
+          </li>
+          <li
+            onClick={(e) => tabClick(e)}
+            data-tab-index="3"
+            data-callback-method="logs-check"
+            className="tab-item"
+          >
+            Recent Logs
+          </li>
+          <li
+            onClick={(e) => tabClick(e)}
+            data-tab-index="4"
+            data-callback-method="stats-check"
+            className="tab-item"
+          >
+            Content Statistics
+          </li>
+          <li
+            onClick={(e) => tabClick(e)}
+            data-tab-index="5"
+            data-callback-method="update-check"
+            className="tab-item"
+          >
+            Update Information
+          </li>
+        </ul>
+      </div>
+      <div className="tab-content">
+        <TabContent
+          activeTab={activeTab}
+          activeTabMethod={activeTabMethod}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Overview;

js/src/components/overview/overview-modal.css

@@ -0,0 +1,8 @@
+.site-dash-modal-content.overview-modal-content {
+  width: 600px
+}
+
+.site-dash-modal-content.overview-modal-content .header {
+  display: flex;
+  justify-content: space-between;
+}

js/src/components/overview/tab-content/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const TabContent = ({ activeTab, activeTabMethod }) => {
+  // @todo: We call the respective API here to get the details.
+  const response = `Content from ${activeTabMethod} API, active tab ${activeTab}`;
+
+  return (
+    <div>
+      {response}
+    </div>
+  );
+};
+
+export default TabContent;

js/src/components/overview/tabs.css

@@ -0,0 +1,21 @@
+.tabs > ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0 0 20px 0;
+  margin: 0 0 20px 0;
+  gap: 4px;
+  border-bottom: 1px solid #6200EE;
+}
+
+li.tab-item {
+  padding: 10px;
+  background: rgba(204, 204, 204, 0.28);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+li.tab-item.active {
+  background: #6200EE;
+  color: white;
+}

js/src/components/site-add-form/index.js

@@ -3,33 +3,57 @@ import TextField from '../textfield';
 import Popup from "reactjs-popup";
 import SiteDeleteConfirm from "../site-delete-confirm";
 
-const SiteAddForm = ({ closeModalCallback }) => {
+const SiteAddForm = ({ closeModalCallback, id, name, faviconUrl, url, endpoint, token }) => {
   const [deleteSiteOpen, setDeleteSiteModalOpen] = useState(false);
   const closeDeleteSiteModal = () => setDeleteSiteModalOpen(false);
 
+  const saveNewSite = () => {
+    // @todo: Save new site API.
+    console.log('New site added!');
+    closeModalCallback();
+  };
+
   return (
     <div className="site-add-form">
       <div className="form-elements">
         <TextField
           name="site-name"
           description="The Site Name."
           placeholder="Site Name"
+          defaultValue={name}
         />
         <TextField
           name="site-url"
           description="The Site URL."
           placeholder="Site URL"
+          defaultValue={url}
         />
         <TextField
           name="site-endpoint-url"
           description="The Site API Endpoint URL."
           placeholder="API Endpoint"
+          defaultValue={endpoint}
+        />
+        <TextField
+          name="site-token"
+          description="The Site API Token."
+          placeholder="API Token"
+          defaultValue={token}
+        />
+        <TextField
+          name="site-favicon-url"
+          description="The Site faviconURL."
+          placeholder="Favicon URL"
+          defaultValue={faviconUrl}
         />
       </div>
       <div className="actions">
-        <button className="site-tile-btn primary" type="submit">Save</button>
+        <button className="site-tile-btn primary" onClick={() => saveNewSite()} type="submit">Save</button>
         <button className="site-tile-btn secondary" onClick={() => closeModalCallback() }>Cancel</button>
-        <button className="site-tile-btn tertiary" onClick={() => setDeleteSiteModalOpen(o => !o)}>Delete Site</button>
+        {id !== undefined &&
+          <button className="site-tile-btn tertiary" onClick={() => setDeleteSiteModalOpen(o => !o)}>Delete
+            Site</button>
+        }
       </div>
       <Popup
         closeOnEscape
@@ -39,7 +63,7 @@ const SiteAddForm = ({ closeModalCallback }) => {
         open={deleteSiteOpen}
         onClose={closeDeleteSiteModal}
       >
-        <SiteDeleteConfirm closeModalCallback={closeDeleteSiteModal} />
+        <SiteDeleteConfirm closeModalCallback={closeModalCallback} closeDeleteSiteModal={closeDeleteSiteModal} />
       </Popup>
     </div>
   )

js/src/components/site-delete-confirm/index.js

@@ -1,7 +1,14 @@
 import React from 'react';
 import './site-delete-confirm.css';
 
-const SiteDeleteConfirm = ({ closeModalCallback }) => {
+const SiteDeleteConfirm = ({ closeModalCallback, closeDeleteSiteModal }) => {
+  const deleteSiteCallback = () => {
+    // @todo: Call delete site API.
+    console.log('site deleted');
+    closeDeleteSiteModal();
+    closeModalCallback();
+  };
+
   return (
     <div className="site-delete-form">
       <div className="form-elements">
@@ -10,8 +17,8 @@ const SiteDeleteConfirm = ({ closeModalCallback }) => {
         </div>
       </div>
       <div className="actions">
-        <button className="site-tile-btn tertiary" type="submit">I Confirm, Delete this Site</button>
-        <button className="site-tile-btn secondary" onClick={() => closeModalCallback() }>Cancel</button>
+        <button className="site-tile-btn tertiary" onClick={() => deleteSiteCallback()} type="submit">I Confirm, Delete this Site</button>
+        <button className="site-tile-btn secondary" onClick={() => closeDeleteSiteModal() }>Cancel</button>
       </div>
     </div>
   )

js/src/components/site-tile/index.js

@@ -1,6 +1,14 @@
-import React from 'react';
+import React, {useState} from 'react';
+import Popup from "reactjs-popup";
+import SiteAddForm from "../site-add-form";
+import Overview from "../overview";
+
+const SiteTile = ({id, name, faviconUrl, url, endpoint, token}) => {
+  const [addSiteOpen, setAddSiteModalOpen] = useState(false);
+  const [overviewOpen, setOverviewOpen] = useState(false);
+  const closeAddSiteModal = () => setAddSiteModalOpen(false);
+  const closeOverviewModal = () => setOverviewOpen(false);
 
-const SiteTile = ({id, name, faviconUrl, url}) => {
   return (
     <div
       className="site-tile"
@@ -12,15 +20,40 @@ const SiteTile = ({id, name, faviconUrl, url}) => {
           <h2>{name}</h2>
           <a href={url}>{url}</a>
         </div>
-        <div>
-          <button className="site-tile-btn--secondary">Edit</button>
-        </div>
       </div>
       <div className="site-tile--action">
-        <button className="site-tile-btn secondary">Status</button>
-        <button className="site-tile-btn secondary">Logs</button>
-        <button className="site-tile-btn secondary">Overview</button>
+        <button className="site-tile-btn secondary" onClick={() => setAddSiteModalOpen(o => !o)}>Edit</button>
+        <button className="site-tile-btn secondary" onClick={() => setOverviewOpen(o => !o)}>Overview</button>
       </div>
+      <Popup
+        closeOnEscape
+        lockScroll
+        closeOnDocumentClick={false}
+        className="site-dash-modal"
+        open={addSiteOpen}
+        onClose={closeAddSiteModal}
+      >
+        <SiteAddForm
+          id={id}
+          name={name}
+          favicon={faviconUrl}
+          url={url}
+          endpoint={endpoint}
+          token={token}
+          faviconUrl={faviconUrl}
+          closeModalCallback={closeAddSiteModal}
+        />
+      </Popup>
+      <Popup
+        closeOnEscape
+        lockScroll
+        closeOnDocumentClick={false}
+        className="site-dash-modal overview-modal"
+        open={overviewOpen}
+        onClose={closeOverviewModal}
+      >
+        <Overview closeOverviewModal={closeOverviewModal}/>
+      </Popup>
     </div>
   );
 };

js/src/components/textfield/textfield.css

@@ -3,8 +3,11 @@
   border-radius: 4px;
   border: 1px solid #ccc;
   padding: 6px 16px;
-  font-size: 1rem;
-  min-width: 300px;
+  font-size: 13px;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  color: #333;
 }
 
 .site-dash--desc {

sitedash.info.yml

@@ -1,5 +1,8 @@
 name: Site Dashboard
 description: A single dashboard allowing you to view/manage multiple sites.
 package: Site Dashboard
+
 type: module
 core_version_requirement: ^8.8 || ^9
+
+configure: sitedash.dashboard