From 79144bbde19166b59f1335e240644e3be1b43826 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Sat, 28 Mar 2020 18:59:02 +0100
Subject: [PATCH] Frontend: Add accounts tab to settings #225

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 frontend/src/pages/library.vue           | 17 ++----
 frontend/src/pages/settings.vue          | 15 ++++-
 frontend/src/pages/settings/accounts.vue | 74 ++++++++++++++++++++++++
 frontend/src/pages/settings/general.vue  |  4 +-
 frontend/src/routes.js                   |  7 +++
 5 files changed, 99 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/pages/settings/accounts.vue

diff --git a/frontend/src/pages/library.vue b/frontend/src/pages/library.vue
index 033642dfe..c6fa4943f 100644
--- a/frontend/src/pages/library.vue
+++ b/frontend/src/pages/library.vue
@@ -22,13 +22,6 @@
                 <p-tab-import></p-tab-import>
             </v-tab-item>
 
-            <!-- v-tab id="tab-upload" :disabled="readonly" ripple @click="changePath('/library/upload')">
-                <translate>Upload</translate>
-            </v-tab>
-            <v-tab-item :disabled="readonly">
-                <p-tab-upload></p-tab-upload>
-            </v-tab-item -->
-
             <v-tab id="tab-logs" ripple @click="changePath('/library/logs')">
                 <translate>Logs</translate>
             </v-tab>
@@ -40,9 +33,8 @@
 </template>
 
 <script>
-    // import uploadTab from "pages/library/upload.vue";
-    import importTab from "pages/library/import.vue";
-    import originalsTab from "pages/library/originals.vue";
+    import tabImport from "pages/library/import.vue";
+    import tabOriginals from "pages/library/originals.vue";
     import tabLogs from "pages/library/logs.vue";
 
     export default {
@@ -51,9 +43,8 @@
             tab: Number
         },
         components: {
-            'p-tab-originals': originalsTab,
-            'p-tab-import': importTab,
-            // 'p-tab-upload': uploadTab,
+            'p-tab-originals': tabOriginals,
+            'p-tab-import': tabImport,
             'p-tab-logs': tabLogs,
         },
         data() {
diff --git a/frontend/src/pages/settings.vue b/frontend/src/pages/settings.vue
index 9350e17fe..9526d1516 100644
--- a/frontend/src/pages/settings.vue
+++ b/frontend/src/pages/settings.vue
@@ -11,8 +11,15 @@
             <v-tab id="tab-settings-general" ripple @click="changePath('/settings')">
                 <translate>General</translate>
             </v-tab>
-            <v-tab-item>
-                <p-tab-general></p-tab-general>
+            <v-tab-item lazy>
+                <p-settings-general></p-settings-general>
+            </v-tab-item>
+
+            <v-tab id="tab-settings-accounts" ripple @click="changePath('/settings/accounts')">
+                <translate>Accounts</translate>
+            </v-tab>
+            <v-tab-item lazy>
+                <p-settings-accounts></p-settings-accounts>
             </v-tab-item>
         </v-tabs>
     </div>
@@ -20,6 +27,7 @@
 
 <script>
     import tabGeneral from "pages/settings/general.vue";
+    import tabAccounts from "pages/settings/accounts.vue";
 
     export default {
         name: 'p-page-settings',
@@ -27,7 +35,8 @@
             tab: Number
         },
         components: {
-            'p-tab-general': tabGeneral,
+            'p-settings-general': tabGeneral,
+            'p-settings-accounts': tabAccounts,
         },
         data() {
             return {
diff --git a/frontend/src/pages/settings/accounts.vue b/frontend/src/pages/settings/accounts.vue
new file mode 100644
index 000000000..5e7a45942
--- /dev/null
+++ b/frontend/src/pages/settings/accounts.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="p-tab p-settings-accounts">
+        <v-data-table
+                :headers="listColumns"
+                :items="accounts"
+                hide-actions
+                disable-initial-sort
+                class="elevation-0 p-accounts p-accounts-list p-results"
+                item-key="ID"
+                v-model="selected"
+                :no-data-text="this.$gettext('No accounts configured')"
+        >
+            <template slot="items" slot-scope="props" class="p-account">
+                <td>{{ props.item.AccName }}</td>
+                <td>{{ formatBool(props.item.AccPush) }}</td>
+                <td>{{ formatBool(props.item.AccSync) }}</td>
+                <td>{{ formatDate(props.item.AccSyncedAt) }}</td>
+            </template>
+        </v-data-table>
+    </div>
+</template>
+
+<script>
+    import Settings from "model/settings";
+    import options from "resources/options.json";
+    import Account from "../../model/account";
+    import {DateTime} from "luxon";
+
+    export default {
+        name: 'p-settings-accounts',
+        data() {
+            return {
+                config: this.$config.values,
+                readonly: this.$config.getValue("readonly"),
+                settings: new Settings(this.$config.values.settings),
+                options: options,
+                model: new Account(),
+                accounts: [],
+                labels: {},
+                selected: [],
+                listColumns: [
+                    {text: this.$gettext('Name'), value: 'AccName', sortable: false, align: 'left'},
+                    {text: this.$gettext('Share'), value: 'AccPush', sortable: false},
+                    {text: this.$gettext('Sync'), value: 'AccSync', sortable: false},
+                    {text: this.$gettext('Synced'), value: 'AccSyncedAt', sortable: false, align: 'left'},
+                ],
+            };
+        },
+        methods: {
+            formatBool(b) {
+                if (b) {
+                    return this.$gettext('Yes');
+                }
+
+                return this.$gettext('No');
+            },
+            formatDate(d) {
+                if (!d) {
+                    return this.$gettext('Never');
+                }
+
+                return DateTime.fromISO(d).toFormat('dd/MM/yyyy hh:mm:ss');
+            },
+            load() {
+                Account.search({count: 100}).then(r => this.accounts = r.models);
+            },
+            save() {
+            },
+        },
+        created() {
+            this.load();
+        },
+    };
+</script>
diff --git a/frontend/src/pages/settings/general.vue b/frontend/src/pages/settings/general.vue
index 87f2d0125..2bcbdba2a 100644
--- a/frontend/src/pages/settings/general.vue
+++ b/frontend/src/pages/settings/general.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-tab p-tab-general">
+    <div class="p-tab p-settings-general">
         <v-container fluid>
             <v-form lazy-validation dense
                     ref="form" class="p-form-settings" accept-charset="UTF-8"
@@ -43,7 +43,7 @@
     import options from "resources/options.json";
 
     export default {
-        name: 'p-tab-general',
+        name: 'p-settings-general',
         data() {
             return {
                 readonly: this.$config.getValue("readonly"),
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index 8a3792d86..b7b0f7137 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -128,6 +128,13 @@ export default [
         meta: {title: "Settings", auth: true, background: "application-light"},
         props: {tab: 0},
     },
+    {
+        name: "settings",
+        path: "/settings/accounts",
+        component: Settings,
+        meta: {title: "Settings", auth: true, background: "application-light"},
+        props: {tab: 1},
+    },
     {
         name: "discover",
         path: "/discover",