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; border-radius: 2px;
font-weight: normal; font-weight: normal;
cursor: pointer; cursor: pointer;
padding: 7px; padding: 7px 14px;
width: 100%;
min-height: 32px; min-height: 32px;
line-height: 32px; line-height: 32px;
border: none; border: none;
@ -92,6 +91,12 @@ input[type="submit"] {
color: var(--text-color); color: var(--text-color);
border: 1px solid #1b1f20; 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 .button:hover,
.dark [type="button"]:hover, .dark [type="button"]:hover,
.dark input[type="submit"]:hover { .dark input[type="submit"]:hover {
@ -100,6 +105,11 @@ input[type="submit"] {
.dark a { .dark a {
color: var(--text-color); color: var(--text-color);
} }
.dark [type="button"][disabled],
.dark input[type="submit"][disabled] {
background-color: var(--color-mediumGray);
cursor: not-allowed;
}
button.flat, button.flat,
[type="button"].flat, [type="button"].flat,
.dark [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"> <fieldset id="import-mode" class="formbox">
<legend class="counter" data-help="importMode">${translate('Choose import mode')}</legend> <legend class="counter" data-help="importMode">${translate('Choose import mode')}</legend>
<label> <label>
<input type="radio" name="action" value="copy" /> <input type="radio" name="action" value="copy" onchange />
${translate('Copy into the layer')} ${translate('Copy into the layer')}
</label> </label>
<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')} ${translate('Link to the layer as remote data')}
</label> </label>
</fieldset> </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> </div>
` `
@ -121,6 +121,11 @@ export default class Importer extends Utils.WithTemplate {
return this.qs('textarea').value return this.qs('textarea').value
} }
set raw(value) {
this.qs('textarea').value = value
this.onChange()
}
get clear() { get clear() {
return Boolean(this.qs('[name=clear]').checked) 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('[name=layer-name]').toggleAttribute('hidden', Boolean(this.layerId))
this.qs('#clear').toggleAttribute('hidden', !this.layerId) this.qs('#clear').toggleAttribute('hidden', !this.layerId)
this.qs('[name=submit').toggleAttribute('disabled', !this.isValid())
} }
onFileChange(e) { onFileChange(e) {
@ -219,6 +225,7 @@ export default class Importer extends Utils.WithTemplate {
this.url = null this.url = null
this.format = undefined this.format = undefined
this.layerName = null this.layerName = null
this.raw = null
const layerSelect = this.qs('[name="layer-id"]') const layerSelect = this.qs('[name="layer-id"]')
layerSelect.innerHTML = '' layerSelect.innerHTML = ''
this._umap.eachDataLayerReverse((datalayer) => { this._umap.eachDataLayerReverse((datalayer) => {
@ -251,6 +258,17 @@ export default class Importer extends Utils.WithTemplate {
this.qs('[type=file]').showPicker() 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() { submit() {
let hasErrors let hasErrors
if (this.format === 'umap') { if (this.format === 'umap') {