Frontend: Add accounts tab to settings #225
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer
parent
a1feb1c99e
commit
79144bbde1
5 changed files with 99 additions and 18 deletions
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
74
frontend/src/pages/settings/accounts.vue
Normal file
74
frontend/src/pages/settings/accounts.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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"),
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue