Fix UserImport validation and use component helpers in UserImport and UserList

(cherry picked from commit c80aad223e640d4d078c7cbe78acae3b0175b6fe)

app/src/scss/main.scss

@@ -112,6 +112,11 @@ body {
   top: 2px;
 }
 
+// limit the size of toggle dropdown buttons to a square
+.dropdown-toggle-split {
+  max-width: 2.5rem;
+}
+
 // Fork-awesome overrides
 .fa-fw {
   width: 1.25em !important;

app/src/store/data.js

@@ -146,6 +146,16 @@ export default {
       return api.fetch('DELETE', param ? `${uri}/${param}` : uri, data, humanKey, options).then(() => {
         commit('DEL_' + storeKey.toUpperCase(), [param, extraParams].filter(item => !isEmptyValue(item)))
       })
+    },
+
+    'RESET_CACHE_DATA' ({ state }, keys = Object.keys(state)) {
+      for (const key of keys) {
+        if (key === 'users_details') {
+          state[key] = {}
+        } else {
+          state[key] = undefined
+        }
+      }
     }
   },
 

app/src/views/user/UserImport.vue

@@ -1,47 +1,30 @@
 <template>
-    <div>
   <card-form
     :title="$t('users_import')" icon="user-plus"
     :validation="$v" :server-error="serverError"
-    @submit.prevent="beforeImport"
+    @submit.prevent="onSubmit"
   >
     <!-- CSV FILE -->
-    <form-field component="FileItem" v-bind="fields.csv" v-model="form.csv"
-                :validation="$v.form.csv" accept=".csv" />
+    <form-field v-bind="fields.csv" v-model="form.csv" :validation="$v.form.csv" />
+
     <!-- UPDATE -->
-    <form-field component="CheckboxItem" v-bind="fields.update" v-model="form.update"
-                :validation="$v.form.update" />
+    <form-field v-bind="fields.update" v-model="form.update" />
+
     <!-- DELETE -->
-    <form-field component="CheckboxItem" v-bind="fields.delete" v-model="form.delete"
-                :validation="$v.form.delete" />
+    <form-field v-bind="fields.delete" v-model="form.delete" />
   </card-form>
-    <!-- CONFIRM DESTRUCTIVE IMPORT MODAL -->
-    <b-modal
-    id="confirm-destructive-import-modal" ref="confirm-destructive-import-modal" centered
-    body-bg-variant="danger" body-text-variant="light"
-    @ok="onSubmit" hide-header
-    :ok-title="$t('users_import_delete_others')"
-    >
-    {{ $t('users_import_confirm_destructive') }}
-    </b-modal>
-    </div>
 </template>
 
 <script>
-// import { mapGetters } from 'vuex'
+import api from '@/api'
 import { validationMixin } from 'vuelidate'
 
 import { formatFormData } from '@/helpers/yunohostArguments'
-import {
-  required
-} from '@/helpers/validators'
-
+import { required, fileMediaTypeMatch } from '@/helpers/validators'
 
 export default {
   name: 'UserImport',
 
-  mixins: [validationMixin],
-
   data () {
     return {
       form: {
@@ -56,21 +39,26 @@ export default {
         csv: {
           label: this.$i18n.t('users_import_csv_file'),
           description: this.$i18n.t('users_import_csv_file_desc'),
+          component: 'FileItem',
           props: {
             id: 'csv',
             placeholder: this.$i18n.t('placeholder.file')
           }
         },
+
         update: {
           label: this.$i18n.t('users_import_update'),
           description: this.$i18n.t('users_import_update_desc'),
+          component: 'CheckboxItem',
           props: {
             id: 'update'
           }
         },
+
         delete: {
           label: this.$i18n.t('users_import_delete'),
           description: this.$i18n.t('users_import_delete_desc'),
+          component: 'CheckboxItem',
           props: {
             id: 'delete'
           }
@@ -79,30 +67,26 @@ export default {
     }
   },
 
-  validations () {
-    return {
-      form: {
-        csv: { required },
-        update: { },
-        delete: { }
-      }
+  validations: {
+    form: {
+      csv: { required, fileMediaTypeMatch: fileMediaTypeMatch('text/csv') }
     }
   },
 
   methods: {
-    beforeImport () {
+    async onSubmit () {
       if (this.form.delete) {
-        this.$refs['confirm-destructive-import-modal'].show()
-      } else {
-        this.onSubmit()
+        const confirmed = await this.$askConfirmation(
+          this.$i18n.t('users_import_confirm_destructive'),
+          { okTitle: this.$i18n.t('users_import_delete_others') }
+        )
+        if (!confirmed) return
       }
-    },
 
-    onSubmit () {
-      const data = formatFormData(this.form, { flatten: true })
-      this.$store.dispatch(
-        'POST', { uri: 'users/import', data }
-      ).then(() => {
+      const data = formatFormData(this.form)
+      api.post('users/import', data, { asFormData: true }).then(() => {
+        // Reset all cached data related to users.
+        this.$store.dispatch('RESET_CACHE_DATA', ['users', 'users_details', 'groups', 'permissions'])
         this.$router.push({ name: 'user-list' })
       }).catch(error => {
         this.serverError = error.message
@@ -110,7 +94,6 @@ export default {
     }
   },
 
-  created () {
-  }
+  mixins: [validationMixin]
 }
 </script>

app/src/views/user/UserList.vue

@@ -8,34 +8,25 @@
   >
     <template #top-bar-buttons>
       <b-button variant="info" :to="{ name: 'group-list' }">
-        <icon iname="key-modern" />
-        {{ $t('groups_and_permissions_manage') }}
+        <icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
       </b-button>
 
-        <div class="btn-group">
-          <b-dropdown split class="m-2" variant="success"
-                      :split-to="{name: 'user-create'}">
-            <template #button-content>
-              <icon iname="plus" />
-              {{ $t('users_new') }}
-            </template>
-            <b-dropdown-item :to="{name: 'user-import'}">
-              <icon iname="plus" /> {{ $t('users_import') }}
-            </b-dropdown-item>
-            <b-dropdown-item @click="downloadExport">
-              <icon iname="download" /> {{ $t('users_export') }}
-            </b-dropdown-item>
-          </b-dropdown>
-        </div>
+      <b-dropdown
+        :split-to="{ name: 'user-create' }"
+        split variant="outline-success" right
+        split-variant="success"
+      >
+        <template #button-content>
+          <icon iname="plus" /> {{ $t('users_new') }}
+        </template>
+        <b-dropdown-item :to="{ name: 'user-import' }">
+          <icon iname="plus" /> {{ $t('users_import') }}
+        </b-dropdown-item>
+        <b-dropdown-item @click="downloadExport">
+          <icon iname="download" /> {{ $t('users_export') }}
+        </b-dropdown-item>
+      </b-dropdown>
 
-      </div>
-    </div>
-
-    <template v-if="users === null">
-      <b-alert variant="warning" show>
-        <icon iname="exclamation-triangle" class="fa-fw mr-1" />
-        {{ $t('users_no') }}
-      </b-alert>
     </template>
 
     <b-list-group>