Run formatting.
Build and Deploy Web App / build-and-deploy (push) Successful in 19s
Details
Build and Deploy Web App / build-and-deploy (push) Successful in 19s
Details
This commit is contained in:
parent
8f098f6cac
commit
a007acee8d
|
|
@ -233,42 +233,83 @@ function loadAllParamValues(key: string): string[] {
|
||||||
<AppPage title="Transactions">
|
<AppPage title="Transactions">
|
||||||
<AppForm>
|
<AppForm>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<FormControl label="Search" hint="Free-form text search against description, tags, vendor, category, account.">
|
<FormControl
|
||||||
<input v-model="searchQuery" type="text" placeholder="Search for transactions..." />
|
label="Search"
|
||||||
|
hint="Free-form text search against description, tags, vendor, category, account."
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-model="searchQuery"
|
||||||
|
type="text"
|
||||||
|
placeholder="Search for transactions..."
|
||||||
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<div class="vueselect-control">
|
<div class="vueselect-control">
|
||||||
<h5>Tag</h5>
|
<h5>Tag</h5>
|
||||||
<VueSelect v-model="tagFilters" :options="tagOptions" placeholder="Select tags" is-multi />
|
<VueSelect
|
||||||
|
v-model="tagFilters"
|
||||||
|
:options="tagOptions"
|
||||||
|
placeholder="Select tags"
|
||||||
|
is-multi
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="vueselect-control">
|
<div class="vueselect-control">
|
||||||
<h5>Vendor</h5>
|
<h5>Vendor</h5>
|
||||||
<VueSelect v-model="vendorFilters" :options="vendorOptions" placeholder="Select vendors" is-multi />
|
<VueSelect
|
||||||
|
v-model="vendorFilters"
|
||||||
|
:options="vendorOptions"
|
||||||
|
placeholder="Select vendors"
|
||||||
|
is-multi
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="vueselect-control">
|
<div class="vueselect-control">
|
||||||
<h5>Category</h5>
|
<h5>Category</h5>
|
||||||
<VueSelect v-model="categoryFilters" :options="categoryOptions" placeholder="Select categories" is-multi />
|
<VueSelect
|
||||||
|
v-model="categoryFilters"
|
||||||
|
:options="categoryOptions"
|
||||||
|
placeholder="Select categories"
|
||||||
|
is-multi
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="vueselect-control">
|
<div class="vueselect-control">
|
||||||
<h5>Account</h5>
|
<h5>Account</h5>
|
||||||
<VueSelect v-model="accountFilters" :options="accountOptions" placeholder="Select accounts" is-multi />
|
<VueSelect
|
||||||
|
v-model="accountFilters"
|
||||||
|
:options="accountOptions"
|
||||||
|
placeholder="Select accounts"
|
||||||
|
is-multi
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<FormControl label="Max Amount">
|
<FormControl label="Max Amount">
|
||||||
<input v-model="maxAmountFilter" type="number" min="0" step="1" />
|
<input
|
||||||
|
v-model="maxAmountFilter"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="1"
|
||||||
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormControl label="Min Amount">
|
<FormControl label="Min Amount">
|
||||||
<input v-model="minAmountFilter" type="number" min="0" step="1" />
|
<input
|
||||||
|
v-model="minAmountFilter"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="1"
|
||||||
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<FormControl label="Sort By">
|
<FormControl label="Sort By">
|
||||||
<select v-model="selectedSort">
|
<select v-model="selectedSort">
|
||||||
<option v-for="sortOpt in SORT_PROPERTIES" :key="sortOpt.property" :value="sortOpt.property">
|
<option
|
||||||
|
v-for="sortOpt in SORT_PROPERTIES"
|
||||||
|
:key="sortOpt.property"
|
||||||
|
:value="sortOpt.property"
|
||||||
|
>
|
||||||
{{ sortOpt.label }}
|
{{ sortOpt.label }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
@ -281,19 +322,42 @@ function loadAllParamValues(key: string): string[] {
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<ButtonBar>
|
<ButtonBar>
|
||||||
<AppButton size="sm" icon="home" @click="goToHome()">Back to Homepage</AppButton>
|
<AppButton
|
||||||
<AppButton size="sm" icon="trash" @click="clearFilters()">Clear Filters</AppButton>
|
size="sm"
|
||||||
<AppButton size="sm" icon="file-export" @click="exportToFile()">Export to CSV</AppButton>
|
icon="home"
|
||||||
|
@click="goToHome()"
|
||||||
|
>Back to Homepage</AppButton
|
||||||
|
>
|
||||||
|
<AppButton
|
||||||
|
size="sm"
|
||||||
|
icon="trash"
|
||||||
|
@click="clearFilters()"
|
||||||
|
>Clear Filters</AppButton
|
||||||
|
>
|
||||||
|
<AppButton
|
||||||
|
size="sm"
|
||||||
|
icon="file-export"
|
||||||
|
@click="exportToFile()"
|
||||||
|
>Export to CSV</AppButton
|
||||||
|
>
|
||||||
</ButtonBar>
|
</ButtonBar>
|
||||||
</AppForm>
|
</AppForm>
|
||||||
|
|
||||||
<PaginationControls :page="page" @update="(pr) => fetchPage(pr.page, pr.size)" class="align-right" />
|
<PaginationControls
|
||||||
|
:page="page"
|
||||||
|
@update="(pr) => fetchPage(pr.page, pr.size)"
|
||||||
|
class="align-right"
|
||||||
|
/>
|
||||||
<AppBadge size="sm">
|
<AppBadge size="sm">
|
||||||
{{ page.totalElements }} search
|
{{ page.totalElements }} search
|
||||||
{{ page.totalElements == 1 ? 'result' : 'results' }}
|
{{ page.totalElements == 1 ? 'result' : 'results' }}
|
||||||
in {{ lastFetchTime }} milliseconds
|
in {{ lastFetchTime }} milliseconds
|
||||||
</AppBadge>
|
</AppBadge>
|
||||||
<TransactionCard v-for="txn in page.items" :key="txn.id" :tx="txn" />
|
<TransactionCard
|
||||||
|
v-for="txn in page.items"
|
||||||
|
:key="txn.id"
|
||||||
|
:tx="txn"
|
||||||
|
/>
|
||||||
</AppPage>
|
</AppPage>
|
||||||
</template>
|
</template>
|
||||||
<style lang="css" scoped>
|
<style lang="css" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue