feat: add a disabled/active mode to the submit button of import panel

cf #2302
umap-project · Dec 3, 2024 · 3a8c29d · 3a8c29d
1 parent ba3a1cc
commit 3a8c29d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/umap/static/umap/css/form.css b/umap/static/umap/css/form.css
@@ -78,8 +78,7 @@ input[type="submit"] {
     border-radius: 2px;
     font-weight: normal;
     cursor: pointer;
-    padding: 7px;
-    width: 100%;
+    padding: 7px 14px;
     min-height: 32px;
     line-height: 32px;
     border: none;
@@ -92,6 +91,12 @@ input[type="submit"] {
     color: var(--text-color);
     border: 1px solid #1b1f20;
 }
+.dark .button.primary:not([disabled]),
+.dark [type="button"].primary:not([disabled]) {
+    background-color: var(--color-brightCyan);
+    color: var(--color-dark);
+    border: 1px solid #1b1f20;
+}
 .dark .button:hover,
 .dark [type="button"]:hover,
 .dark input[type="submit"]:hover {
@@ -100,6 +105,11 @@ input[type="submit"] {
 .dark a {
     color: var(--text-color);
 }
+.dark [type="button"][disabled],
+.dark input[type="submit"][disabled] {
+    background-color: var(--color-mediumGray);
+    cursor: not-allowed;
+}
 button.flat,
 [type="button"].flat,
 .dark [type="button"].flat {

diff --git a/umap/static/umap/js/modules/importer.js b/umap/static/umap/js/modules/importer.js
@@ -33,15 +33,15 @@ const TEMPLATE = `
     <fieldset id="import-mode" class="formbox">
       <legend class="counter" data-help="importMode">${translate('Choose import mode')}</legend>
       <label>
-        <input type="radio" name="action" value="copy" />
+        <input type="radio" name="action" value="copy" onchange />
         ${translate('Copy into the layer')}
       </label>
       <label>
-        <input type="radio" name="action" value="link" />
+        <input type="radio" name="action" value="link" onchange />
         ${translate('Link to the layer as remote data')}
       </label>
     </fieldset>
-    <input type="button" class="button" name="submit" value="${translate('Import data')}" />
+    <input type="button" class="button primary" name="submit" value="${translate('Import data')}" disabled />
   </div>
     `
 
@@ -121,6 +121,11 @@ export default class Importer extends Utils.WithTemplate {
     return this.qs('textarea').value
   }
 
+  set raw(value) {
+    this.qs('textarea').value = value
+    this.onChange()
+  }
+
   get clear() {
     return Boolean(this.qs('[name=clear]').checked)
   }
@@ -198,6 +203,7 @@ export default class Importer extends Utils.WithTemplate {
     )
     this.qs('[name=layer-name]').toggleAttribute('hidden', Boolean(this.layerId))
     this.qs('#clear').toggleAttribute('hidden', !this.layerId)
+    this.qs('[name=submit').toggleAttribute('disabled', !this.isValid())
   }
 
   onFileChange(e) {
@@ -219,6 +225,7 @@ export default class Importer extends Utils.WithTemplate {
     this.url = null
     this.format = undefined
     this.layerName = null
+    this.raw = null
     const layerSelect = this.qs('[name="layer-id"]')
     layerSelect.innerHTML = ''
     this._umap.eachDataLayerReverse((datalayer) => {
@@ -251,6 +258,17 @@ export default class Importer extends Utils.WithTemplate {
     this.qs('[type=file]').showPicker()
   }
 
+  isValid() {
+    if (!this.format) return false
+    const hasFiles = Boolean(this.files.length)
+    const hasRaw = Boolean(this.raw)
+    const hasUrl = Boolean(this.url)
+    const hasAction = Boolean(this.action)
+    if (!hasFiles && !hasRaw && !hasUrl) return false
+    if (this.url) return hasAction
+    return true
+  }
+
   submit() {
     let hasErrors
     if (this.format === 'umap') {