Merge pull request #38 from itk-dev/feature/5260-qr-url-changes

5260: url changes

Author: jeppekroghitk

.gitignore

@@ -4,6 +4,7 @@
 /.env.*.local
 /config/secrets/prod/prod.decrypt.private.php
 /public/bundles/
+/public/uploads/qr-logos/
 /var/
 /vendor/
 ###< symfony/framework-bundle ###

CHANGELOG.md

@@ -8,6 +8,15 @@ See [keep a changelog] for information about writing changes to this log.
 
 ## [Unreleased]
 
+[PR-41](https://github.com/itk-dev/itqr/pull/41)
+    - Added archived concept
+[PR-40](https://github.com/itk-dev/itqr/pull/40)
+    - Added styling to static page.
+[PR-39](https://github.com/itk-dev/itqr/pull/39)
+    - Added various help texts and in-platform-documentation.
+[PR-38](https://github.com/itk-dev/itqr/pull/38)
+    - Limit number of URLs to 1
+    - Increase URL data type from varchar to text
 [PR-37](https://github.com/itk-dev/itqr/pull/37)
     - Rename "theme" to "design" in general
     - Rename "delete" to "archive" in general

assets/app.js

@@ -1,17 +1,21 @@
 import './styles/app.css';
 
 const uploadBasePath = 'uploads/qr_codes/';
+
 document.addEventListener('DOMContentLoaded', () => {
+    // Enforce only one URL per QR code.
+    handleQrUrlCollection();
+
     const qrCodeContainer = document.getElementById('qrCodeContainer');
     const tabsContainer = document.getElementById('qrCodeTabs'); // Navigation tabs
     const tabContentContainer = document.getElementById('qrCodeTabContent'); // Tab content
     const form = document.querySelector('.form-wrapper form');
-    const formName = form.getAttribute('name');
+    const formName = form ? form.getAttribute('name') : '';
     const selectedQrCodes = document.getElementById('selectedQrCodes');
 
     // Ensure all containers and elements exist
     if (!qrCodeContainer || !tabsContainer || !tabContentContainer || !form) {
-        console.error('Required elements not found!');
+        console.log('Required elements not found');
         return;
     }
 
@@ -200,6 +204,37 @@ function handleBatchDisableConfirm() {
     });
 }
 
+function handleQrUrlCollection() {
+    const qrUrlCollectionParent = document.querySelector('.qr-urls-collection');
+    const qrUrlCollectionAddButton = document.querySelector('.qr-urls-collection .field-collection-add-button');
+    const urlCollectionCount = qrUrlCollectionParent ? parseInt(qrUrlCollectionParent.getAttribute('data-num-items')) : null;
+
+    // If the button exists, and no URL is added - add it!
+    if (qrUrlCollectionAddButton) {
+        setTimeout(() => {
+            if (urlCollectionCount !== null && urlCollectionCount === 0) {
+                qrUrlCollectionAddButton.click();
+            }
+        }, 1)
+
+        // Hide the add-button if there is already an URL added.
+        if (parseInt(urlCollectionCount) === 1) {
+            qrUrlCollectionAddButton.classList.add('d-none');
+        }
+
+        // Handle the click event and hide add-button if an URL was added and the number of URLs is 1.
+        qrUrlCollectionAddButton.addEventListener('click', () => {
+            setTimeout(() => {
+                const urlCollectionCount = qrUrlCollectionParent.getAttribute('data-num-items');
+
+                if (parseInt(urlCollectionCount) === 1) {
+                    qrUrlCollectionAddButton.classList.add('d-none');
+                }
+            }, 1)
+        });
+    }
+}
+
 document.addEventListener('readystatechange', function(event) {
     if ('complete' === document.readyState) {
         handleBatchDisableConfirm();

assets/styles/app.css

@@ -101,3 +101,8 @@ form[name="batch_download"] .accordion-button {
     background-color: #fff;
     border-bottom: 1px solid #e9e9e9;
 }
+
+
+.qr-urls-collection .accordion-button {
+    display: none;
+}

assets/styles/archived.css

@@ -0,0 +1,95 @@
+:root {
+    --spacer-md: 1rem;
+    --spacer-lg: calc(var(--spacer-md) * 2);
+    --shadow-color: 240deg 27% 62%;
+    --shadow-elevation-low:
+            0.3px 0.3px 0.4px hsl(var(--shadow-color) / 0.34),
+            0.4px 0.4px 0.6px -1.7px hsl(var(--shadow-color) / 0.28),
+            0.9px 1px 1.3px -3.5px hsl(var(--shadow-color) / 0.21);
+    --shadow-elevation-medium:
+            0.3px 0.3px 0.4px hsl(var(--shadow-color) / 0.29),
+            0.5px 0.6px 0.8px -0.9px hsl(var(--shadow-color) / 0.25),
+            1px 1.2px 1.5px -1.7px hsl(var(--shadow-color) / 0.22),
+            2.2px 2.6px 3.3px -2.6px hsl(var(--shadow-color) / 0.19),
+            4.5px 5.2px 6.7px -3.5px hsl(var(--shadow-color) / 0.16);
+    --shadow-elevation-high:
+            0.3px 0.3px 0.4px hsl(var(--shadow-color) / 0.27),
+            0.7px 0.8px 1px -0.4px hsl(var(--shadow-color) / 0.25),
+            1.2px 1.4px 1.8px -0.8px hsl(var(--shadow-color) / 0.24),
+            1.9px 2.2px 2.8px -1.2px hsl(var(--shadow-color) / 0.22),
+            2.9px 3.4px 4.4px -1.6px hsl(var(--shadow-color) / 0.21),
+            4.5px 5.2px 6.7px -1.9px hsl(var(--shadow-color) / 0.19),
+            6.7px 7.8px 10px -2.3px hsl(var(--shadow-color) / 0.18),
+            9.7px 11.3px 14.5px -2.7px hsl(var(--shadow-color) / 0.16),
+            13.6px 16px 20.5px -3.1px hsl(var(--shadow-color) / 0.14),
+            18.7px 21.9px 28.1px -3.5px hsl(var(--shadow-color) / 0.13);
+}
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+* {
+    margin: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    html {
+        interpolate-size: allow-keywords;
+    }
+}
+
+body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    font-family: 'Roboto', sans-serif;
+    background-color: ghostwhite;
+}
+
+img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+}
+
+input, button, textarea, select {
+    font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+}
+
+p {
+    text-wrap: pretty;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
+}
+
+#root, #__next {
+    isolation: isolate;
+}
+
+.container {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 0 var(--spacer-md);
+    > h1 {
+        font-size: clamp(1.75rem, 4.5vw, 3rem);
+        margin: var(--spacer-md) 0;
+    }
+
+    > p {
+
+    }
+}
+
+@media screen and (min-width: 800px) {
+    .container {
+        padding: 0 var(--spacer-lg);
+    }
+}

assets/styles/static.css

@@ -13,6 +13,9 @@ security:
         dev:
             pattern: ^/(_(profiler|wdt)|css|images|js)/
             security: false
+        api:
+          pattern: ^/api
+          stateless: true
         main:
             custom_authenticators:
                 - App\Security\AzureOIDCAuthenticator

config/packages/security.yaml

@@ -7,5 +7,5 @@ root_redirect:
   path: /
   controller: Symfony\Bundle\FrameworkBundle\Controller\RedirectController
   defaults:
-    route: 'qr_index'
+    route: 'admin'
     permanent: true