Skip to content

Commit

Permalink
ACQUI-122: Implement InfiniteScrollSelect where needed
Browse files Browse the repository at this point in the history
  • Loading branch information
@mblenk
mblenk committed Mar 14, 2024
1 parent 7d5772e commit 53f970e
Show file tree
Hide file tree
Showing 7 changed files with 165 additions and 165 deletions.
34 changes: 15 additions & 19 deletions src/components/FundManagement/FundAllocationFormAdd.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,16 @@
<label for="fund_allocation_fund_id" class="required"
>Fund:</label
>
<v-select
<InfiniteScrollSelect
id="fund_allocation_fund_id"
v-model="fund_allocation.fund_id"
:reduce="av => av.fund_id"
:options="funds"
:selectedData="selectedFund"
dataType="funds"
dataIdentifier="fund_id"
label="name"
>
<template #search="{ attributes, events }">
<input
:required="!fund_allocation.fund_id"
class="vs__search"
v-bind="attributes"
v-on="events"
/>
</template>
</v-select>
apiClient="acquisition"
:required="true"
/>
<span class="required">Required</span>
</li>
<li>
Expand Down Expand Up @@ -86,6 +80,7 @@
import { inject } from "vue"
import { APIClient } from "../../fetch/api-client.js"
import { setMessage, setWarning } from "../../messages"
import InfiniteScrollSelect from "../InfiniteScrollSelect.vue"
export default {
setup() {
Expand Down Expand Up @@ -123,7 +118,7 @@ export default {
methods: {
async getDataRequiredForPageLoad(route) {
const { params } = route
this.getFunds(params).then(() => {
this.getFund(params).then(() => {
if(params.fund_allocation_id) {
this.getFundAllocation(params.fund_allocation_id)
}
Expand All @@ -136,12 +131,10 @@ export default {
this.fund_allocation = fund_allocation
})
},
async getFunds(params) {
async getFund(params) {
const client = APIClient.acquisition
await client.funds.getAll(null, {}).then(
funds => {
this.funds = funds
const fund = funds.find(fund => fund.fund_id = params.fund_id)
await client.funds.get(params.fund_id).then(
fund => {
this.selectedFund = fund
this.fund_allocation.fund_id = fund.fund_id
this.fund_allocation.ledger_id = fund.ledger_id
Expand Down Expand Up @@ -188,6 +181,9 @@ export default {
)
}
}
},
components: {
InfiniteScrollSelect
}
}
</script>
Expand Down
80 changes: 41 additions & 39 deletions src/components/FundManagement/FundFormAdd.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,23 +49,17 @@
<label for="fund_fiscal_yr_id" class="required"
>Fiscal year:</label
>
<v-select
<InfiniteScrollSelect
id="fund_fiscal_yr_id"
v-model="fund.fiscal_yr_id"
:reduce="av => av.fiscal_yr_id"
:options="fiscal_years"
:selectedData="fund"
dataType="fiscal_years"
dataIdentifier="fiscal_yr_id"
label="code"
apiClient="acquisition"
:required="true"
@update:modelValue="filterLedgersBySelectedFiscalYear($event)"
>
<template #search="{ attributes, events }">
<input
:required="!fund.fiscal_yr_id"
class="vs__search"
v-bind="attributes"
v-on="events"
/>
</template>
</v-select>
/>
<span class="required">Required</span>
</li>
<li>
Expand Down Expand Up @@ -191,6 +185,7 @@ import { inject } from "vue"
import { storeToRefs } from "pinia"
import { APIClient } from "../../fetch/api-client.js"
import { setMessage, setWarning } from "../../messages"
import InfiniteScrollSelect from "../InfiniteScrollSelect.vue"
export default {
setup() {
Expand Down Expand Up @@ -248,7 +243,7 @@ export default {
fund_type: '',
visible_to: [],
},
fiscal_years: [],
fiscalYear: null,
ledgers: [],
ledger_groups: [],
}
Expand All @@ -260,29 +255,29 @@ export default {
},
methods: {
async getDataRequiredForPageLoad(fund_id) {
this.getFiscalYears().then(() => {
if(fund_id) {
this.getFund(fund_id)
} else {
this.initialized = true
}
})
if(fund_id) {
this.getFund(fund_id).then(() => {
this.getFiscalYear(this.fund.fiscal_yr_id)
})
} else {
this.initialized = true
}
},
async getFund(fund_id) {
const client = APIClient.acquisition
await client.funds.get(fund_id).then(fund => {
this.fund = fund
this.fund.visible_to = this.formatLibraryGroupIds(fund.visible_to)
this.filterLedgersBySelectedFiscalYear(fund.fiscal_yr_id)
this.filterGroupsBySelectedLedger(fund.ledger_id)
this.initialized = true
})
},
async getFiscalYears() {
async getFiscalYear(fiscal_yr_id) {
const client = APIClient.acquisition
await client.fiscal_years.getAll(null, {}, "koha_plugin_acquire_ledgers").then(
fiscal_years => {
this.fiscal_years = fiscal_years
await client.fiscal_years.get(fiscal_yr_id, { "x-koha-embed": "koha_plugin_acquire_ledgers" }).then(
fiscalYear => {
this.fiscalYear = fiscalYear
this.filterGroupsBySelectedLedger(this.fund.ledger_id)
this.initialized = true
},
error => {}
)
Expand All @@ -294,24 +289,28 @@ export default {
this.fund.visible_to = []
return
}
const fiscalYear = this.fiscal_years.find(fy => fy.fiscal_yr_id === e)
const { koha_plugin_acquire_ledgers: ledgers } = fiscalYear
if(!ledgers || ledgers.length === 0) {
setWarning("There are no ledgers attached to this fiscal year. Please create one or select a different fiscal year.")
this.ledger.fiscal_yr_id = null
return
}
this.ledgers = ledgers
this.getFiscalYear(e).then(() => {
const { koha_plugin_acquire_ledgers: ledgers } = this.fiscalYear
if(!ledgers || ledgers.length === 0) {
setWarning("There are no ledgers attached to this fiscal year. Please create one or select a different fiscal year.")
this.ledger.fiscal_yr_id = null
return
}
this.ledgers = ledgers
})
if(e !== this.fund.fiscal_yr_id) {
this.fund.ledger_id = null
this.fund.visible_to = []
}
},
filterGroupsBySelectedLedger(e) {
const selectedLedger = this.ledgers.find(ledger => ledger.ledger_id === e)
const applicableGroups = this.formatLibraryGroupIds(selectedLedger.visible_to)
this.ledger_groups = applicableGroups
this.resetOwnersAndVisibleGroups(applicableGroups)
const selectedLedger = this.fiscalYear.koha_plugin_acquire_ledgers.find(ledger => ledger.ledger_id === e)
if(selectedLedger) {
const applicableGroups = this.formatLibraryGroupIds(selectedLedger.visible_to)
this.ledger_groups = applicableGroups
this.resetOwnersAndVisibleGroups(applicableGroups)
}
},
onSubmit(e) {
e.preventDefault()
Expand Down Expand Up @@ -354,6 +353,9 @@ export default {
},
unmounted() {
this.resetOwnersAndVisibleGroups()
},
components: {
InfiniteScrollSelect
}
}
</script>
Expand Down
55 changes: 29 additions & 26 deletions src/components/FundManagement/FundManagementHome.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,41 +93,31 @@
<label for="fiscal_year" class="filter-label"
>Fiscal year:</label
>
<v-select
<InfiniteScrollSelect
id="fiscal_year"
v-model="filters.fiscal_yr_id"
:reduce="av => av.fiscal_yr_id"
:options="fiscal_years"
:selectedData="null"
dataType="fiscal_years"
dataIdentifier="fiscal_yr_id"
label="code"
>
<template #search="{ attributes, events }">
<input
class="vs__search"
v-bind="attributes"
v-on="events"
/>
</template>
</v-select>
apiClient="acquisition"
:filters="filterLimitations"
/>
</div>
<div class="filter-grid-cell">
<label for="ledger" class="filter-label"
>Ledger:</label
>
<v-select
<InfiniteScrollSelect
id="ledger"
v-model="filters.ledger_id"
:reduce="av => av.ledger_id"
:options="ledgers"
:selectedData="null"
dataType="ledgers"
dataIdentifier="ledger_id"
label="name"
>
<template #search="{ attributes, events }">
<input
class="vs__search"
v-bind="attributes"
v-on="events"
/>
</template>
</v-select>
apiClient="acquisition"
:filters="filterLimitations"
/>
</div>
</div>
<input
Expand Down Expand Up @@ -167,6 +157,7 @@
import Toolbar from "../Toolbar.vue"
import ToolbarLink from "../ToolbarLink.vue"
import KohaTable from "../KohaTable.vue"
import InfiniteScrollSelect from "../InfiniteScrollSelect.vue"
import { inject, ref } from "vue"
import { storeToRefs } from "pinia"
import { APIClient } from "../../fetch/api-client.js"
Expand Down Expand Up @@ -233,6 +224,17 @@ export default {
initialized: false
}
},
computed: {
filterLimitations() {
const filterLimitations = {}
Object.keys(this.filters).forEach(key => {
if(this.filters[key]) {
filterLimitations[key] = this.filters[key]
}
})
return filterLimitations
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.getDataRequiredForPageLoad()
Expand Down Expand Up @@ -309,7 +311,7 @@ export default {
this.$refs.ledgersTable.redraw(this.tableUrl('ledgers', filters))
},
clearFilters() {
this.filters = {
this.filters = {
status: null,
fund_type: null,
owner: null,
Expand All @@ -321,7 +323,8 @@ export default {
components: {
Toolbar,
ToolbarLink,
KohaTable
KohaTable,
InfiniteScrollSelect
}
}
</script>
Expand Down
2 changes: 1 addition & 1 deletion src/components/FundManagement/FundShow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export default {
methods: {
async getFund(fund_id) {
const client = APIClient.acquisition
await client.funds.get(fund_id, "fiscal_yr,ledger,koha_plugin_acquire_fund_allocations").then(
await client.funds.get(fund_id, { "x-koha-embed": "fiscal_yr,ledger,koha_plugin_acquire_fund_allocations" }).then(
fund => {
this.fund = fund
this.initialized = true
Expand Down
Loading

0 comments on commit 53f970e

Please sign in to comment.