Skip to content

Commit

Permalink
feat: add a disabled/active mode to the submit button of import panel (
Browse files Browse the repository at this point in the history
#2341)

cf #2302

Warning: I removed the historic `width: 100%` on all buttons, who knows
where this will break? :p

Disabled:


![image](https://github.com/user-attachments/assets/000ff44b-bd6e-485b-b27f-39b0a189bf56)

Form valid:


![image](https://github.com/user-attachments/assets/afdbd4b6-7168-4dff-b314-e6556a289369)
  • Loading branch information
yohanboniface authored Dec 5, 2024
2 parents d99fe70 + b692cb0 commit 0b818e8
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 8 deletions.
6 changes: 3 additions & 3 deletions docs-users/fr/tutorials/6-one-click-data-import.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Voici un bref passage en revu des différents imports proposés et pour finir l

## 1. Importer le contour d’une commune

Cliquez sur l’outil d’importation en bas de la barre de droite, puis descendez jusqu’au cadre « Assistants d’import ».
Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».

Cliquez sur « Communes France » et sélectionnez la commune souhaitée dans une liste déroulante. Une fois la commune sélectionnée, le format est reconnu automatiquement (geojson) puis le type de calque (cliquer sur « ? » pour savoir quel choix opérer)

Expand All @@ -64,15 +64,15 @@ Une fois cet import réalisé, tout est réglable : couleur de contour, de fond,

## 2. Importer les contours des départements ou des régions

Cliquez sur l’outil d’importation en bas de la barre de droite, puis descendez jusqu’au cadre « Assistants d’import ».
Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».

Cliquez sur « Contours nationaux » puis soit départements, soit régions et enfin le type de calque (voir supra l’explication). Tous les départements sont importés :

![Une carte avec le dessin de chaque département importé](../../static/tutoriels/importer-departements.png)

## 3. Importer un point d’intérêt issu de GeoDataMine

Cliquez sur l’outil d’importation en bas de la barre de droite, puis descendez jusqu’au cadre « Assistants d’import ».
Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».

Cliquez sur « GeoDataMine (thèmes OSM) » et sélectionnez les informations souhaitées, routes, bâtiments, commerces, services publics, …
Par exemple, en sélectionnant les points d’eau potable de la CA du Grand Avignon, puis « Copier dans un calque »
Expand Down
Binary file modified docs-users/static/tutoriels/importer.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 12 additions & 2 deletions umap/static/umap/css/form.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down
24 changes: 21 additions & 3 deletions umap/static/umap/js/modules/importer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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" checked 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>
`

Expand Down Expand Up @@ -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)
}
Expand Down Expand Up @@ -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.canSubmit())
}

onFileChange(e) {
Expand All @@ -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) => {
Expand Down Expand Up @@ -251,6 +258,17 @@ export default class Importer extends Utils.WithTemplate {
this.qs('[type=file]').showPicker()
}

canSubmit() {
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') {
Expand Down

0 comments on commit 0b818e8

Please sign in to comment.