Resources modals consistency

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## Current (in progress)
 
 - Prevent UnicodeError on unicode URL validation error [#1844](https://github.com/opendatateam/udata/pull/1844)
+- Hide save button in "Add resource" modal until form is visible (and prevent error) [#1846](https://github.com/opendatateam/udata/pull/1846)
 
 ## 1.5.2 (2018-08-08)
 

js/components/dataset/resource/add-modal.vue

@@ -1,23 +1,23 @@
 <template>
 <div>
 <modal class="modal-primary add-resource-modal" v-ref:modal
-    :title="_('Add a resource')">
+    :title="_('Add a resource')" :large="editing">
 
     <div class="modal-body">
         <resource-form v-ref:form :dataset="dataset"></resource-form>
     </div>
 
     <footer class="modal-footer text-center">
+        <button type="button" class="btn btn-sm btn-primary btn-flat pull-left"
+            @click="$refs.modal.close">
+            {{ _('Cancel') }}
+        </button>
         <button type="button"
-            class="btn btn-primary btn-flat pull-left"
-            v-show="$refs.form.resource.filetype"
+            class="btn btn-outline btn-flat"
+            v-show="editing"
             @click="save">
             {{ _('Save') }}
         </button>
-        <button type="button" class="btn btn-outline btn-flat"
-            @click="$refs.modal.close">
-            {{ _('Cancel') }}
-        </button>
     </footer>
 </modal>
 </div>
@@ -37,6 +37,17 @@ export default {
         }
     },
     components: {Modal, ResourceForm},
+    data() {
+        return {ready: false};
+    },
+    computed: {
+        editing() {
+            return this.ready && this.$refs && this.$refs.form && this.$refs.form.hasData;
+        }
+    },
+    ready() {
+        this.ready = true; // Artificially force editing update because $refs is not reactive
+    },
     methods: {
         save() {
             if (this.$refs.form.validate()) {

js/components/dataset/resource/form.vue

@@ -99,7 +99,7 @@
 
 <template>
 <div>
-    <form-horizontal v-if="resource.url || hasChosenRemoteFile" class="resource-form file-resource-form"
+    <form-horizontal v-if="hasData" class="resource-form file-resource-form"
         :fields="fields" :model="resource" v-ref:form>
     </form-horizontal>
     <div v-show="files.length" v-for="file in files" class="info-box bg-aqua">
@@ -192,6 +192,7 @@ export default {
                 }, {
                     id: 'description',
                     label: this._('Description'),
+                    rows:3,
                 }, {
                     id: 'published',
                     label: this._('Publication date'),
@@ -226,6 +227,9 @@ export default {
         };
     },
     computed: {
+        hasData() {
+            return Boolean(this.resource.url || this.hasChosenRemoteFile);
+        },
         showUploadZone() {
             if (this.files.length) return false;
             if (this.hasChosenRemoteFile) return false;

js/components/dataset/resource/modal.vue

@@ -16,7 +16,7 @@
 
 <template>
 <div>
-<modal :title="resource.title" class="resource-modal"
+<modal :title="resource.title" class="resource-modal" :large="edit"
     :class="{ 'modal-danger': confirm, 'modal-primary': !confirm }"
     v-ref:modal>
     <div class="modal-body">

js/components/form/markdown-editor.vue

@@ -40,7 +40,7 @@
 </style>
 
 <template>
-<textarea class="form-control" :rows="rows || 6"
+<textarea class="form-control" :rows="field.rows || rows || 6"
     :id="field.id"
     :name="field.id"
     :placeholder="placeholder"