disabled xlsx download for current page

CivicDataLab · Feb 28, 2024 · 40974ac · 40974ac
1 parent d7bb14e
commit 40974ac
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/pages/datasets/index.tsx b/pages/datasets/index.tsx
@@ -25,6 +25,7 @@ type Props = {
   data: any;
   facets: any;
 };
+
 export const sortItems = [
   {
     id: 'bidOpeningDate:asc',
@@ -51,8 +52,10 @@ export const sortItems = [
     name: 'Relevance',
   },
 ];
+const defaultSort = 'bidOpeningDate:asc';
 
 const filterList = '"organization", "fiscalYear", "mainProcurementCategory"';
+
 export function formatFilterName(name: string) {
   if (name == 'fiscalYear') {
     return 'fiscal year';
@@ -62,8 +65,6 @@ export function formatFilterName(name: string) {
   else return name;
 }
 
-const defaultSort = 'bidOpeningDate:asc';
-
 const Datasets: React.FC<Props> = ({ data, facets }) => {
   const router = useRouter();
   const { q, sort, size, fq, from } = router.query;
@@ -255,30 +256,36 @@ const Datasets: React.FC<Props> = ({ data, facets }) => {
                               setDownloadType(e.target.value)
                             }
                           >
-                            <label htmlFor="downloadFormat1">
+                            <label htmlFor="downloadFormat2">
                               <input
                                 type="radio"
-                                id="downloadFormat1"
+                                id="downloadFormat2"
                                 name="dialog-download"
-                                value="xlsx"
+                                value="json"
                                 defaultChecked
                               />
-                              XLSX File{' '}
+                              JSON File{' '}
                               {downloadMethod === 'download-all' ? (
-                                <span>(~6MB)</span>
+                                <span>(~27MB)</span>
                               ) : null}
                             </label>
 
-                            <label htmlFor="downloadFormat2">
+                            <label htmlFor="downloadFormat1">
                               <input
                                 type="radio"
-                                id="downloadFormat2"
+                                id="downloadFormat1"
                                 name="dialog-download"
-                                value="json"
+                                value="xlsx"
+                                disabled={downloadMethod !== 'download-all'}
                               />
-                              JSON File{' '}
+                              XLSX File
                               {downloadMethod === 'download-all' ? (
-                                <span>(~27MB)</span>
+                                <span>(~6MB)</span>
+                              ) : null}
+                              {downloadMethod !== 'download-all' ? (
+                                <span className="text-xs">
+                                  (Not supported)
+                                </span>
                               ) : null}
                             </label>
                           </fieldset>

diff --git a/styles/components/shared/_modal.scss b/styles/components/shared/_modal.scss
@@ -100,6 +100,16 @@
         margin-left: 8px;
         color: $text-light-medium;
       }
+
+      label {
+        &:has(input:disabled) {
+          color: $text-light-medium;
+
+          span {
+            font-size: 0.75rem;
+          }
+        }
+      }
     }
   }
 

diff --git a/styles/style.css b/styles/style.css
@@ -1353,6 +1353,12 @@ button {
   margin-left: 8px;
   color: hsla(0, 0%, 0%, 0.6);
 }
+.dialog__format fieldset label:has(input:disabled) {
+  color: hsla(0, 0%, 0%, 0.6);
+}
+.dialog__format fieldset label:has(input:disabled) span {
+  font-size: 0.75rem;
+}
 .dialog__submit {
   justify-self: center;
   margin-top: 1rem;