|
Lines 28-49
Link Here
|
| 28 |
<label for="agreement_vendor_id" |
28 |
<label for="agreement_vendor_id" |
| 29 |
>{{ $__("Vendor") }}:</label |
29 |
>{{ $__("Vendor") }}:</label |
| 30 |
> |
30 |
> |
| 31 |
<v-select |
31 |
<InfiniteScrollSelect |
| 32 |
id="agreement_vendor_id" |
32 |
:id="'agreement_vendor_id'" |
| 33 |
v-model="agreement.vendor_id" |
33 |
v-model="agreement.vendor_id" |
| 34 |
label="name" |
34 |
:dataType="'vendors'" |
| 35 |
:reduce="vendor => vendor.id" |
35 |
/> |
| 36 |
:options="paginated" |
|
|
| 37 |
@open="onOpen" |
| 38 |
@close="onClose" |
| 39 |
@search="(query) => (search = query)" |
| 40 |
> |
| 41 |
<template #list-footer> |
| 42 |
<li v-show="hasNextPage" ref="load" class="loader"> |
| 43 |
{{ $__("Loading more options...") }} |
| 44 |
</li> |
| 45 |
</template> |
| 46 |
</v-select> |
| 47 |
</li> |
36 |
</li> |
| 48 |
<li> |
37 |
<li> |
| 49 |
<label for="agreement_description" |
38 |
<label for="agreement_description" |
|
Lines 198-212
import UserRoles from "./UserRoles.vue"
Link Here
|
| 198 |
import AgreementLicenses from "./AgreementLicenses.vue" |
187 |
import AgreementLicenses from "./AgreementLicenses.vue" |
| 199 |
import AgreementRelationships from "./AgreementRelationships.vue" |
188 |
import AgreementRelationships from "./AgreementRelationships.vue" |
| 200 |
import Documents from "./Documents.vue" |
189 |
import Documents from "./Documents.vue" |
|
|
190 |
import InfiniteScrollSelect from "./InfiniteScrollSelect.vue" |
| 201 |
import { setMessage, setError, setWarning } from "../../messages" |
191 |
import { setMessage, setError, setWarning } from "../../messages" |
| 202 |
import { fetchAgreement } from "../../fetch" |
192 |
import { fetchAgreement } from "../../fetch" |
| 203 |
import { storeToRefs } from "pinia" |
193 |
import { storeToRefs } from "pinia" |
| 204 |
|
194 |
|
| 205 |
export default { |
195 |
export default { |
| 206 |
setup() { |
196 |
setup() { |
| 207 |
const vendorStore = inject("vendorStore") |
|
|
| 208 |
const { vendors } = storeToRefs(vendorStore) |
| 209 |
|
| 210 |
const AVStore = inject("AVStore") |
197 |
const AVStore = inject("AVStore") |
| 211 |
const { |
198 |
const { |
| 212 |
av_agreement_statuses, |
199 |
av_agreement_statuses, |
|
Lines 219-225
export default {
Link Here
|
| 219 |
} = storeToRefs(AVStore) |
206 |
} = storeToRefs(AVStore) |
| 220 |
|
207 |
|
| 221 |
return { |
208 |
return { |
| 222 |
vendors, |
|
|
| 223 |
av_agreement_statuses, |
209 |
av_agreement_statuses, |
| 224 |
av_agreement_closure_reasons, |
210 |
av_agreement_closure_reasons, |
| 225 |
av_agreement_renewal_priorities, |
211 |
av_agreement_renewal_priorities, |
|
Lines 249-276
export default {
Link Here
|
| 249 |
documents: [], |
235 |
documents: [], |
| 250 |
}, |
236 |
}, |
| 251 |
initialized: false, |
237 |
initialized: false, |
| 252 |
observer: null, |
|
|
| 253 |
limit: 20, |
| 254 |
search: '' |
| 255 |
} |
238 |
} |
| 256 |
}, |
239 |
}, |
| 257 |
computed: { |
|
|
| 258 |
filtered() { |
| 259 |
if(this.vendors){ |
| 260 |
return this.vendors.filter((vendor) => vendor.name.includes(this.search)) |
| 261 |
} |
| 262 |
filtered() |
| 263 |
}, |
| 264 |
paginated() { |
| 265 |
return this.filtered.slice(0, this.limit) |
| 266 |
}, |
| 267 |
hasNextPage() { |
| 268 |
return this.paginated.length < this.filtered.length |
| 269 |
}, |
| 270 |
}, |
| 271 |
mounted() { |
| 272 |
this.observer = new IntersectionObserver(this.infiniteScroll) |
| 273 |
}, |
| 274 |
beforeRouteEnter(to, from, next) { |
240 |
beforeRouteEnter(to, from, next) { |
| 275 |
next(vm => { |
241 |
next(vm => { |
| 276 |
if (to.params.agreement_id) { |
242 |
if (to.params.agreement_id) { |
|
Lines 433-456
export default {
Link Here
|
| 433 |
this.agreement.closure_reason = "" |
399 |
this.agreement.closure_reason = "" |
| 434 |
} |
400 |
} |
| 435 |
}, |
401 |
}, |
| 436 |
async onOpen() { |
|
|
| 437 |
if (this.hasNextPage) { |
| 438 |
await this.$nextTick() |
| 439 |
this.observer.observe(this.$refs.load) |
| 440 |
} |
| 441 |
}, |
| 442 |
onClose() { |
| 443 |
this.observer.disconnect() |
| 444 |
}, |
| 445 |
async infiniteScroll([{ isIntersecting, target }]) { |
| 446 |
if (isIntersecting) { |
| 447 |
const ul = target.offsetParent |
| 448 |
const scrollTop = target.offsetParent.scrollTop |
| 449 |
this.limit += 10 |
| 450 |
await this.$nextTick() |
| 451 |
ul.scrollTop = scrollTop |
| 452 |
} |
| 453 |
}, |
| 454 |
}, |
402 |
}, |
| 455 |
components: { |
403 |
components: { |
| 456 |
AgreementPeriods, |
404 |
AgreementPeriods, |
|
Lines 458-463
export default {
Link Here
|
| 458 |
AgreementLicenses, |
406 |
AgreementLicenses, |
| 459 |
AgreementRelationships, |
407 |
AgreementRelationships, |
| 460 |
Documents, |
408 |
Documents, |
|
|
409 |
InfiniteScrollSelect |
| 461 |
}, |
410 |
}, |
| 462 |
name: "AgreementsFormAdd", |
411 |
name: "AgreementsFormAdd", |
| 463 |
} |
412 |
} |