From ec61c849397621f267249903974c7d8a14d2fdca Mon Sep 17 00:00:00 2001
From: ljf <ljf+git@grimaud.me>
Date: Mon, 21 Dec 2020 06:14:24 +0100
Subject: [PATCH] [enh] Add Import and export button

---
 app/src/i18n/locales/en.json    |  1 +
 app/src/scss/main.scss          | 36 +++++++++++++++++++++++++++++++++
 app/src/views/user/UserList.vue | 35 +++++++++++++++++++++++++++-----
 3 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 9bff7d56..8d451b9e 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -491,6 +491,7 @@
     "users_new": "New user",
     "users_no": "No users.",
     "users_import": "Import users",
+    "users_export": "Export users",
     "users_import_csv_file": "CSV File",
     "users_import_update": "Update existing users",
     "users_import_delete": "Delete non listed users",
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 83096b46..dbf1163c 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -117,6 +117,42 @@ body {
   width: 1.25em !important;
 }
 
+// custom css
+.actions {
+  margin-bottom: 2rem;
+  display: flex;
+  justify-content: space-between;
+
+  @include media-breakpoint-down(xs) {
+    .buttons {
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column-reverse;
+    margin-bottom: 2rem;
+
+    .buttons {
+      display: flex;
+      justify-content: space-between;
+
+      .btn {
+        margin-bottom: .5rem;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    .btn ~ .btn {
+      margin-left: .5rem;
+    }
+    .btn ~ .dropdown-toggle-split {
+      margin-left: 0;
+    }
+  }
+}
 // Do not display ligatures in invalid-feedback to avoid confusion.
 .invalid-feedback {
   code {
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 2b81fbb5..77af2cbd 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -12,10 +12,30 @@
         {{ $t('groups_and_permissions_manage') }}
       </b-button>
 
-      <b-button variant="success" :to="{ name: 'user-create' }">
-        <icon iname="plus" />
-        {{ $t('users_new') }}
-      </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>
+
+      </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>
@@ -53,7 +73,12 @@ export default {
       search: ''
     }
   },
-
+  methods: {
+    downloadExport () {
+      const host = this.$store.getters.host
+      window.open(`https://${host}/yunohost/api/users/export`, '_blank')
+    }
+  },
   computed: {
     ...mapGetters(['users']),