mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-05 12:01:16 +00:00
344 lines
12 KiB
Vue
344 lines
12 KiB
Vue
|
<template>
|
||
|
|
<q-layout view="hHh lpR fFf">
|
||
|
|
|
||
|
|
<q-header elevated class="bg-primary text-white">
|
||
|
|
<q-toolbar>
|
||
|
|
<q-btn dense flat round icon="fas fa-bars" @click="toggleLeftDrawer"/>
|
||
|
|
|
||
|
|
<q-toolbar-title>
|
||
|
|
<q-avatar>
|
||
|
|
<img src="maskable-icon.svg" alt="Firefly III Logo" title="Firefly III">
|
||
|
|
</q-avatar>
|
||
|
|
Firefly III
|
||
|
|
</q-toolbar-title>
|
||
|
|
|
||
|
|
|
||
|
|
<q-select
|
||
|
|
ref="search" dark dense standout use-input hide-selected
|
||
|
|
class="q-mx-xs"
|
||
|
|
color="black" :stack-label="false" label="Search"
|
||
|
|
v-model="search"
|
||
|
|
style="width: 250px"
|
||
|
|
>
|
||
|
|
|
||
|
|
<template v-slot:append>
|
||
|
|
<img src="https://cdn.quasar.dev/img/layout-gallery/img-github-search-key-slash.svg">
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-slot:option="scope">
|
||
|
|
<q-item
|
||
|
|
v-bind="scope.itemProps"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<q-item-section side>
|
||
|
|
<q-icon name="collections_bookmark"/>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>
|
||
|
|
<q-item-label v-html="scope.opt.label"/>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section side class="default-type">
|
||
|
|
<q-btn outline dense no-caps text-color="blue-grey-5" size="12px" class="bg-grey-1 q-px-sm">
|
||
|
|
{{ 'Jump to' }}
|
||
|
|
<q-icon name="subdirectory_arrow_left" size="14px"/>
|
||
|
|
</q-btn>
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
</template>
|
||
|
|
</q-select>
|
||
|
|
|
||
|
|
<q-separator dark vertical inset/>
|
||
|
|
<q-btn flat icon="fas fa-skull-crossbones" :to="{name: 'development.index'}" class="q-mx-xs"/>
|
||
|
|
<q-separator dark vertical inset/>
|
||
|
|
<q-btn flat icon="fas fa-question-circle" @click="showHelpBox" class="q-mx-xs"/>
|
||
|
|
<q-separator dark vertical inset/>
|
||
|
|
|
||
|
|
<!-- TODO notifications -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- date range -->
|
||
|
|
<q-btn v-if="$q.screen.gt.xs && $route.meta.dateSelector" flat class="q-mx-xs">
|
||
|
|
<div class="row items-center no-wrap">
|
||
|
|
<q-icon name="fas fa-calendar" size="20px"/>
|
||
|
|
<q-icon name="fas fa-caret-down" size="12px" right/>
|
||
|
|
</div>
|
||
|
|
<q-menu>
|
||
|
|
<DateRange></DateRange>
|
||
|
|
</q-menu>
|
||
|
|
</q-btn>
|
||
|
|
<q-separator dark vertical inset v-if="$route.meta.dateSelector"/>
|
||
|
|
|
||
|
|
<!-- specials -->
|
||
|
|
<q-btn v-if="$q.screen.gt.xs" flat class="q-mx-xs">
|
||
|
|
<div class="row items-center no-wrap">
|
||
|
|
<q-icon name="fas fa-dragon" size="20px"/>
|
||
|
|
<q-icon name="fas fa-caret-down" size="12px" right/>
|
||
|
|
</div>
|
||
|
|
<q-menu auto-close>
|
||
|
|
<q-list style="min-width: 120px">
|
||
|
|
<q-item clickable :to="{ name: 'webhooks.index' }">
|
||
|
|
<q-item-section>Webhooks</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable :to="{ name: 'currencies.index' }">
|
||
|
|
<q-item-section>Currencies</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable :to="{ name: 'admin.index' }">
|
||
|
|
<q-item-section>Administration</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
</q-list>
|
||
|
|
</q-menu>
|
||
|
|
</q-btn>
|
||
|
|
<q-separator dark vertical inset/>
|
||
|
|
<!-- profile -->
|
||
|
|
<q-btn v-if="$q.screen.gt.xs" flat class="q-mx-xs">
|
||
|
|
<div class="row items-center no-wrap">
|
||
|
|
<q-icon name="fas fa-user-circle" size="20px"/>
|
||
|
|
<q-icon name="fas fa-caret-down" right size="12px"/>
|
||
|
|
</div>
|
||
|
|
<q-menu auto-close>
|
||
|
|
<q-list style="min-width: 180px">
|
||
|
|
|
||
|
|
<q-item clickable :to="{ name: 'profile.index' }">
|
||
|
|
<q-item-section> Profile</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable :to="{ name: 'profile.daa' }">
|
||
|
|
<q-item-section> Data management</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable :to="{ name: 'preferences.index' }">
|
||
|
|
<q-item-section>Preferences</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable :to="{ name: 'export.index' }">
|
||
|
|
<q-item-section>Export data</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-separator/>
|
||
|
|
<q-item clickable :to="{ name: 'logout' }">
|
||
|
|
<q-item-section>Logout</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
</q-list>
|
||
|
|
</q-menu>
|
||
|
|
</q-btn>
|
||
|
|
</q-toolbar>
|
||
|
|
</q-header>
|
||
|
|
<q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
|
||
|
|
<q-scroll-area class="fit">
|
||
|
|
<div class="q-pa-md">
|
||
|
|
<q-list>
|
||
|
|
<q-item clickable v-ripple :to="{ name: 'index' }">
|
||
|
|
<q-item-section avatar>
|
||
|
|
<q-icon name="fas fa-tachometer-alt"/>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>
|
||
|
|
Dashboard
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple :to="{ name: 'budgets.index' }">
|
||
|
|
<q-item-section avatar>
|
||
|
|
<q-icon name="fas fa-chart-pie"/>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>
|
||
|
|
Budgets
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple :to="{ name: 'subscriptions.index' }">
|
||
|
|
<q-item-section avatar>
|
||
|
|
<q-icon name="far fa-calendar-alt"/>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>
|
||
|
|
Subscriptions
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple :to="{ name: 'piggy-banks.index' }">
|
||
|
|
<q-item-section avatar>
|
||
|
|
<q-icon name="fas fa-piggy-bank"/>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>
|
||
|
|
Piggy banks
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
|
||
|
|
<q-expansion-item
|
||
|
|
expand-separator
|
||
|
|
icon="fas fa-exchange-alt"
|
||
|
|
label="Transactions"
|
||
|
|
:default-opened="this.$route.name === 'transactions.index' || this.$route.name === 'transactions.show'"
|
||
|
|
>
|
||
|
|
<q-item :inset-level="1" clickable v-ripple :to="{ name: 'transactions.index', params: {type: 'withdrawal'} }">
|
||
|
|
<q-item-section>
|
||
|
|
Withdrawals
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'deposit'} }">
|
||
|
|
<q-item-section>
|
||
|
|
Deposits
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple :inset-level="1" :to="{ name: 'transactions.index', params: {type: 'transfers'} }">
|
||
|
|
|
||
|
|
<q-item-section>
|
||
|
|
Transfers
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
|
||
|
|
|
||
|
|
</q-expansion-item>
|
||
|
|
|
||
|
|
|
||
|
|
<q-expansion-item
|
||
|
|
expand-separator
|
||
|
|
icon="fas fa-microchip"
|
||
|
|
label="Automation"
|
||
|
|
default-unopened
|
||
|
|
>
|
||
|
|
<q-item :inset-level="1" clickable v-ripple :to="{ name: 'rules.index' }">
|
||
|
|
<q-item-section>
|
||
|
|
Rules
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item :inset-level="1" clickable v-ripple :to="{ name: 'recurring.index' }">
|
||
|
|
<q-item-section>
|
||
|
|
Recurring transactions
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
|
||
|
|
</q-expansion-item>
|
||
|
|
|
||
|
|
<q-expansion-item
|
||
|
|
expand-separator
|
||
|
|
icon="fas fa-credit-card"
|
||
|
|
label="Accounts"
|
||
|
|
:default-opened="this.$route.name === 'accounts.index' || this.$route.name === 'accounts.show'"
|
||
|
|
>
|
||
|
|
<q-item clickable v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'asset'} }">
|
||
|
|
<q-item-section>
|
||
|
|
Asset accounts
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'expense'} }">
|
||
|
|
<q-item-section>
|
||
|
|
Expense accounts
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'revenue'} }">
|
||
|
|
<q-item-section>
|
||
|
|
Revenue accounts
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple :inset-level="1" :to="{ name: 'accounts.index', params: {type: 'liabilities'} }">
|
||
|
|
<q-item-section>
|
||
|
|
Liabilities
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
|
||
|
|
</q-expansion-item>
|
||
|
|
|
||
|
|
<q-expansion-item
|
||
|
|
expand-separator
|
||
|
|
icon="fas fa-tags"
|
||
|
|
label="Classification"
|
||
|
|
default-unopened
|
||
|
|
>
|
||
|
|
<q-item clickable v-ripple :inset-level="1" :to="{ name: 'categories.index' }">
|
||
|
|
<q-item-section>
|
||
|
|
Categories
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple :inset-level="1" :to="{ name: 'tags.index' }">
|
||
|
|
<q-item-section>
|
||
|
|
Tags
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple :inset-level="1" :to="{ name: 'groups.index'}">
|
||
|
|
<q-item-section>
|
||
|
|
Groups
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
</q-expansion-item>
|
||
|
|
<q-item clickable v-ripple :to="{ name: 'reports.index'}">
|
||
|
|
<q-item-section avatar>
|
||
|
|
<q-icon name="far fa-chart-bar"/>
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>
|
||
|
|
Reports
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
</q-list>
|
||
|
|
</div>
|
||
|
|
</q-scroll-area>
|
||
|
|
</q-drawer>
|
||
|
|
|
||
|
|
|
||
|
|
<q-page-container>
|
||
|
|
<Alert></Alert>
|
||
|
|
|
||
|
|
<!-- breadcrumb, page title? -->
|
||
|
|
<div class="q-ma-md">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-6">
|
||
|
|
<h4 class="q-ma-none q-pa-none">{{ $t($route.meta.pageTitle || 'firefly.welcome_back') }}</h4>
|
||
|
|
</div>
|
||
|
|
<div class="col-6">
|
||
|
|
<q-breadcrumbs align="right">
|
||
|
|
<q-breadcrumbs-el label="Home" :to="{ name: 'index' }"/>
|
||
|
|
<q-breadcrumbs-el v-for="step in $route.meta.breadcrumbs" :label="$t('breadcrumbs.' + step.title)"
|
||
|
|
:to="step.route ? {name: step.route, params: step.params} : ''"/>
|
||
|
|
</q-breadcrumbs>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<router-view/>
|
||
|
|
</q-page-container>
|
||
|
|
|
||
|
|
<q-footer elevated class="bg-grey-8 text-white">
|
||
|
|
<q-toolbar>
|
||
|
|
<div>
|
||
|
|
<small>Firefly III v TODO © James Cole, AGPL-3.0-or-later.</small>
|
||
|
|
</div>
|
||
|
|
</q-toolbar>
|
||
|
|
</q-footer>
|
||
|
|
|
||
|
|
</q-layout>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {defineComponent, ref} from 'vue';
|
||
|
|
import DateRange from "../components/DateRange";
|
||
|
|
import Alert from '../components/Alert';
|
||
|
|
|
||
|
|
export default defineComponent(
|
||
|
|
{
|
||
|
|
name: 'MainLayout',
|
||
|
|
|
||
|
|
components: {
|
||
|
|
DateRange, Alert
|
||
|
|
},
|
||
|
|
|
||
|
|
setup() {
|
||
|
|
const leftDrawerOpen = ref(true)
|
||
|
|
const search = ref('')
|
||
|
|
|
||
|
|
return {
|
||
|
|
search,
|
||
|
|
leftDrawerOpen,
|
||
|
|
toggleLeftDrawer() {
|
||
|
|
leftDrawerOpen.value = !leftDrawerOpen.value
|
||
|
|
},
|
||
|
|
showHelpBox() {
|
||
|
|
$q.dialog({
|
||
|
|
title: 'Help',
|
||
|
|
message: 'The relevant help page will open in a new screen. Doesn\'t work yet.',
|
||
|
|
cancel: true,
|
||
|
|
persistent: false
|
||
|
|
}).onOk(() => {
|
||
|
|
// console.log('>>>> OK')
|
||
|
|
}).onCancel(() => {
|
||
|
|
// console.log('>>>> Cancel')
|
||
|
|
}).onDismiss(() => {
|
||
|
|
// console.log('I am triggered on both OK and Cancel')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|