Populate collection edition form with complete mappings (#981)

## What does this PR do ?

The collection edition form was populating it's content with directly the mappings `properties` despite the API expect to receive a full mappings object (with top level properties: `dynamic`, `properties`)

### Other changes

  - display formatted dates on other view

src/components/Data/Collections/CreateOrUpdate.vue

@@ -67,7 +67,7 @@
               class="float-left mr-3 w-50"
               ref="file-input"
               @change="loadMappingValue($event)"
-              placeholder="Import mapping"
+              placeholder="Select a JSON file to import mappings.."
             />
             <b-button
               class="float-left"
@@ -95,23 +95,25 @@
           <b-col cols="4">
             <div class="d-flex flex-column h-100 text-secondary">
               <div class="CollectionCreateOrUpdate-help">
-                You can (optionally) use this editor to define the mapping for
+                You can (optionally) use this editor to define the mappings for
                 this collection.
                 <br />
-                The mapping of a collection is the definition of how each
+                The mappings of a collection is the definition of how each
                 document in the collection (and its fields) are stored and
                 indexed.
                 <a
                   href="https://docs.kuzzle.io/core/2/guides/main-concepts/data-storage/#mappings-dynamic-policy"
                   target="_blank"
-                  >Read more about mapping</a
+                  >Read more about mappings</a
                 >
                 <br /><br />
                 For example:
                 <pre>
 {
-  "age": { "type": "integer" },
-  "name": { "type": "text" }
+  "properties": {
+    "age": { "type": "integer" },
+    "name": { "type": "keyword" }
+  }
 }
               </pre
                 >

src/components/Data/Collections/Update.vue

@@ -7,7 +7,7 @@
         submit-label="Update"
         :collection="collection.name"
         :index="index.name"
-        :mapping="mappingAttributes"
+        :mapping="fullMappings"
         :realtime-only="collection.isRealtime()"
         @submit="update"
       />
@@ -53,10 +53,13 @@ export default {
         this.collectionName
       )
     },
-    mappingAttributes() {
-      return this.collection
-        ? omit(this.collection.mapping, '_kuzzle_info')
-        : null
+    fullMappings() {
+      const mappings = {
+        dynamic: this.collection.dynamic,
+        properties: omit(this.collection.mapping, '_kuzzle_info')
+      }
+
+      return mappings
     },
     loading() {
       return this.$store.direct.getters.index.loadingCollections(

src/components/Data/Documents/Page.vue

@@ -106,7 +106,7 @@
                     v-if="listViewType === 'column'"
                     :index="indexName"
                     :collection="collectionName"
-                    :documents="documents"
+                    :documents="formattedDocuments"
                     :mapping="collectionMapping"
                     :selected-documents="selectedDocuments"
                     :all-checked="allChecked"
@@ -293,7 +293,7 @@ export default {
       return this.listViewType === 'map' && this.mappingGeoshapes.length === 0
     },
     shapesDocuments() {
-      return this.documents
+      return this.formattedDocuments
         .filter(document => {
           const shape = this.getProperty(document, this.selectedGeoshape)
           return shape ? this.handledGeoShapesTypes.includes(shape.type) : false
@@ -304,7 +304,7 @@ export default {
         }))
     },
     geoDocuments() {
-      return this.documents
+      return this.formattedDocuments
         .filter(document => {
           const [lat, lng] = this.getCoordinates(document)
           const latFloat = parseFloat(lat)
@@ -792,8 +792,9 @@ export default {
 
       const dateFields = []
       const formattedDocuments = _.cloneDeep(this.documents)
-      const findDateFields = (mapping, previousKey) => {
-        for (const [field, value] of Object.entries(mapping)) {
+
+      const findDateFields = (mappings, previousKey) => {
+        for (const [field, value] of Object.entries(mappings)) {
           if (typeof value === 'object') {
             findDateFields(value, field)
           } else if (field === 'type' && value === 'date') {

src/components/Data/Documents/Views/Column.vue

@@ -192,7 +192,7 @@
             </draggable>
           </b-thead>
           <b-tbody>
-            <b-tr v-for="item of formattedItems" :key="`item-row-${item.id}`">
+            <b-tr v-for="item of formattedItems" :key="`item-row-${item._id}`">
               <b-td
                 class="cell"
                 v-for="field of selectedFields"