Merge pull request #120 from weaponsforge/dev

v3.0.7

Author: weaponsforge

README.md

@@ -4,8 +4,24 @@ This project creates rich CSS-styled blog-like **Posts** or **Card-like** thumbn
 
 It also features a lightweight Content Management System (CMS) for creating and managing Google Site embeddable blog-like **Posts** and **Card** content.
 
+### Online App Demo
+
+#### Production App
+https://weaponsforge.github.io/climate-profile-full/
+
+#### Development (Playground) App
+https://climate-profile-dev.web.app/
+
+```
+EXAMPLE USER (Development App Only)
+email: [email protected]
+password: useruser
+```
+
 ### Using with Google Sites
 
+### A. Embed a File Card
+
 1. Copy a File Card's `IFrame Embed URL`.
 2. Paste the `IFrame Embed URL` in Google Site's **Embed from the web** - By URL input prompt.
 3. Preview or Publish the Google Site draft page.
@@ -15,19 +31,18 @@ https://sites.google.com/view/gsites-embed-app/home
 
 ![gsites-embed-03-ez-optimized](https://github.com/weaponsforge/climate-profile-full/assets/56998001/21c07402-904d-4e41-9988-9108c8c683cc)
 
-### Online Demo
+### B. Embed a Full Page Containing a Group of File Cards
 
-#### Production App
-https://weaponsforge.github.io/climate-profile-full/
+1. Copy a File Card's `Cards Gallery URL`.
+2. Create a **Full page embed** Google Site draft page.
+3. Press the **Add embed** button in the resulting blank page and paste the `Cards Gallery URL` in the **Embed from the web** - By URL input prompt.
+   - This page will display all File Cards with similar `"category"` field value like the current Card.
+4. Preview or Publish the Google Site draft page.
 
-#### Development App
-https://climate-profile-dev.web.app/
+Google Sites Sample Web page:<br>
+https://sites.google.com/view/gsites-embed-app/full-page
 
-```
-EXAMPLE USER (Development App Only)
-email: [email protected]
-password: useruser
-```
+![gsites-full-embed-ez](https://github.com/weaponsforge/climate-profile-full/assets/56998001/dce2c297-3e3d-4073-a9f2-5f51a2590a91)
 
 ## Requirements
 

client/components/common/ui/smartnotification/index.js

@@ -27,7 +27,7 @@ function SmartNotification () {
       {(open && notification !== '') &&
       <Snackbar
         open={open}
-        autoHideDuration={4000}
+        autoHideDuration={2000}
         onClose={() => dispatch(resetMessage())}
         sx={{
           maxWidth: '600px',

client/features/filecards/components/formitemsview/index.js

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useMemo } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
 
@@ -20,17 +20,20 @@ import { MESSAGE_SEVERITY } from '@/store/app/appSlice'
 function FormItemsView ({ card }) {
   const [embedUrl, setEmbedUrl] = useState('')
   const dispatch = useDispatch()
+  const notification = useSelector(state => state.app.notification)
   const collapse = useMediaQuery('(max-width:1100px)')
 
   const subDirectory = (process.env.NEXT_PUBLIC_BASE_PATH !== '')
     ? process.env.NEXT_PUBLIC_BASE_PATH
     : ''
 
-  const incrementTimestamp = useCallback(() => {
+  const incrementTimestamp = useCallback((isCard = true) => {
     const timestamp = Math.floor((new Date()).getTime() / 1000)
 
     return (card !== null)
-      ? `${window.location.origin}${subDirectory}/cards/embed?id=${card.id}&ts=${timestamp}`
+      ? (isCard)
+        ? `${window.location.origin}${subDirectory}/cards/embed?id=${card.id}&ts=${timestamp}`
+        : `${window.location.origin}${subDirectory}/cards/gallery?category=${card.category}&ts=${timestamp}`
       : window.location.origin
   }, [card, subDirectory])
 
@@ -41,12 +44,12 @@ function FormItemsView ({ card }) {
   }, [card, subDirectory])
 
   useEffect(() => {
-    const embed = incrementTimestamp()
+    const embed = incrementTimestamp(true)
     setEmbedUrl(embed)
   }, [incrementTimestamp])
 
-  const copyToClipboard = () => {
-    const embed = incrementTimestamp()
+  const copyToClipboard = (isCard = true) => {
+    const embed = incrementTimestamp(isCard)
     setEmbedUrl(embed)
     navigator.clipboard.writeText(embed)
 
@@ -122,13 +125,19 @@ function FormItemsView ({ card }) {
                 </Link>
               </Typography>
 
-              <Button size="small" disableElevation variant="contained" color="secondary" onClick={copyToClipboard}>
+              <Button
+                size="small"
+                disableElevation variant="contained"
+                color="secondary"
+                disabled={notification !== ''}
+                onClick={() => copyToClipboard(true)}
+              >
                 <ContentPasteIcon sx={{ fontSize: '20px' }} />
               </Button>
             </Box>
 
             <Typography variant="caption">
-              Press the Copy Button to copy the IFrame embed URL to clipboard
+              Press the Copy Button to copy this card&apos;s IFrame embed URL to clipboard
             </Typography>
 
             {/** Cards Gallery URL */}
@@ -143,7 +152,21 @@ function FormItemsView ({ card }) {
                     {cardGalleryURL}
                   </Link>
                 </Typography>
+
+                <Button
+                  size="small"
+                  disableElevation variant="contained"
+                  color="secondary"
+                  disabled={notification !== ''}
+                  onClick={() => copyToClipboard(false)}
+                >
+                  <ContentPasteIcon sx={{ fontSize: '20px' }} />
+                </Button>
               </Box>
+
+              <Typography variant="caption">
+                Press the Copy Button to copy the <b>{card.category}</b> cards gallery embed URL to clipboard
+              </Typography>
             </div>
           </Box>
         </Box>