almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-28 19:42:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
cf #2302
This commit is contained in:
Yohan Boniface 2024-12-03 12:40:33 +01:00
parent d99fe70e36
commit 50efbc25be
2 changed files with 33 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
umap/static/umap/css/form.css
View file

@ -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 {

24
umap/static/umap/js/modules/importer.js
View file

@ -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') {