mirror of
https://github.com/VueTorrent/VueTorrent.git
synced 2024-11-24 02:15:42 +03:00
perf(add-torrent): Use scrollable dialog instead of manual infinite scroll (#1442)
This commit is contained in:
Rémi Marseault
GitHub
parent
b261d1547a
commit
7288861515
1 changed files with 217 additions and 220 deletions
|
|
@ -181,6 +181,7 @@ const onCategoryChanged = () => {
|
|||
v-model="isOpened"
|
||||
:class="$vuetify.display.mobile ? '' : 'w-75'"
|
||||
:fullscreen="$vuetify.display.mobile"
|
||||
scrollable
|
||||
:transition="openSuddenly ? 'none' : 'dialog-bottom-transition'">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
|
|
@ -190,236 +191,232 @@ const onCategoryChanged = () => {
|
|||
</v-toolbar>
|
||||
</v-card-title>
|
||||
|
||||
<v-infinite-scroll mode="manual">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-file-input
|
||||
v-model="files"
|
||||
:label="t('dialogs.add.files')"
|
||||
:show-size="vueTorrentStore.useBinarySize ? 1024 : 1000"
|
||||
accept=".torrent"
|
||||
counter
|
||||
multiple
|
||||
persistent-clear
|
||||
persistent-hint
|
||||
prepend-icon=""
|
||||
variant="outlined">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-paperclip</v-icon>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-file-input
|
||||
v-model="files"
|
||||
:label="t('dialogs.add.files')"
|
||||
:show-size="vueTorrentStore.useBinarySize ? 1024 : 1000"
|
||||
accept=".torrent"
|
||||
counter
|
||||
multiple
|
||||
persistent-clear
|
||||
persistent-hint
|
||||
prepend-icon=""
|
||||
variant="outlined">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-paperclip</v-icon>
|
||||
</template>
|
||||
<template v-slot:selection="{ fileNames }">
|
||||
<template v-for="(filename, index) in fileNames">
|
||||
<v-chip v-if="index < fileOverflowDisplayLimit" class="mr-2" color="accent" label size="small">
|
||||
{{ filename }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<template v-slot:selection="{ fileNames }">
|
||||
<template v-for="(filename, index) in fileNames">
|
||||
<v-chip v-if="index < fileOverflowDisplayLimit" class="mr-2" color="accent" label size="small">
|
||||
{{ filename }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<span v-if="fileNames.length === fileOverflowDisplayLimit + 1" class="text-overline text-grey-darken-2 ml-2">
|
||||
{{ t('dialogs.add.fileOverflow', fileNames.length - fileOverflowDisplayLimit) }}
|
||||
</span>
|
||||
</template>
|
||||
</v-file-input>
|
||||
<v-textarea v-model="urls" :label="t('dialogs.add.links')" clearable>
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-link</v-icon>
|
||||
</template>
|
||||
</v-textarea>
|
||||
<HistoryField
|
||||
v-if="!!urls"
|
||||
v-model="cookie"
|
||||
:historyKey="HistoryKey.COOKIE"
|
||||
ref="cookieField"
|
||||
clearable
|
||||
:label="$t('dialogs.add.cookie')"
|
||||
:placeholder="$t('dialogs.add.cookiePlaceholder')">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-cookie</v-icon>
|
||||
</template>
|
||||
</HistoryField>
|
||||
<v-text-field v-model="rename" clearable hide-details :label="$t('dialogs.add.rename')">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-rename</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<span v-if="fileNames.length === fileOverflowDisplayLimit + 1" class="text-overline text-grey-darken-2 ml-2">
|
||||
{{ t('dialogs.add.fileOverflow', fileNames.length - fileOverflowDisplayLimit) }}
|
||||
</span>
|
||||
</template>
|
||||
</v-file-input>
|
||||
<v-textarea v-model="urls" :label="t('dialogs.add.links')" clearable>
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-link</v-icon>
|
||||
</template>
|
||||
</v-textarea>
|
||||
<HistoryField
|
||||
v-if="!!urls"
|
||||
v-model="cookie"
|
||||
:historyKey="HistoryKey.COOKIE"
|
||||
ref="cookieField"
|
||||
clearable
|
||||
:label="$t('dialogs.add.cookie')"
|
||||
:placeholder="$t('dialogs.add.cookiePlaceholder')">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-cookie</v-icon>
|
||||
</template>
|
||||
</HistoryField>
|
||||
<v-text-field v-model="rename" clearable hide-details :label="$t('dialogs.add.rename')">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-rename</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-combobox
|
||||
v-model="tags"
|
||||
v-model:search="tagSearch"
|
||||
:hide-no-data="false"
|
||||
:items="maindataStore.tags"
|
||||
:label="t('dialogs.add.tags')"
|
||||
chips
|
||||
clearable
|
||||
hide-details
|
||||
multiple
|
||||
autocomplete="tags">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-tag</v-icon>
|
||||
</template>
|
||||
<template v-slot:no-data>
|
||||
<v-list-item>
|
||||
<v-list-item-title v-if="tagSearch?.length > 0">
|
||||
{{ t('dialogs.add.noTagMatch', { query: tagSearch }) }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-title v-else>
|
||||
{{ t('dialogs.add.noTags') }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-combobox
|
||||
v-model="tags"
|
||||
v-model:search="tagSearch"
|
||||
:hide-no-data="false"
|
||||
:items="maindataStore.tags"
|
||||
:label="t('dialogs.add.tags')"
|
||||
chips
|
||||
clearable
|
||||
hide-details
|
||||
multiple
|
||||
autocomplete="tags">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-tag</v-icon>
|
||||
</template>
|
||||
<template v-slot:no-data>
|
||||
<v-list-item>
|
||||
<v-list-item-title v-if="tagSearch?.length > 0">
|
||||
{{ t('dialogs.add.noTagMatch', { query: tagSearch }) }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-title v-else>
|
||||
{{ t('dialogs.add.noTags') }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-combobox
|
||||
v-model="category"
|
||||
v-model:search="categorySearch"
|
||||
:hide-no-data="false"
|
||||
:items="categories"
|
||||
:label="$t('dialogs.add.category')"
|
||||
clearable
|
||||
hide-details
|
||||
autocomplete="categories"
|
||||
@update:modelValue="onCategoryChanged">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-label</v-icon>
|
||||
</template>
|
||||
<template v-slot:no-data>
|
||||
<v-list-item>
|
||||
<v-list-item-title v-if="categorySearch?.length > 0">
|
||||
{{ t('dialogs.add.noCategoryMatch', { query: categorySearch }) }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-title v-else>
|
||||
{{ t('dialogs.add.noCategories') }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-combobox
|
||||
v-model="category"
|
||||
v-model:search="categorySearch"
|
||||
:hide-no-data="false"
|
||||
:items="categories"
|
||||
:label="$t('dialogs.add.category')"
|
||||
clearable
|
||||
hide-details
|
||||
autocomplete="categories"
|
||||
@update:modelValue="onCategoryChanged">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-label</v-icon>
|
||||
</template>
|
||||
<template v-slot:no-data>
|
||||
<v-list-item>
|
||||
<v-list-item-title v-if="categorySearch?.length > 0">
|
||||
{{ t('dialogs.add.noCategoryMatch', { query: categorySearch }) }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-title v-else>
|
||||
{{ t('dialogs.add.noCategories') }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<HistoryField
|
||||
v-model="downloadPath"
|
||||
:history-key="HistoryKey.TORRENT_PATH"
|
||||
ref="dlPathField"
|
||||
:disabled="form.autoTMM"
|
||||
:label="t('dialogs.add.downloadPath')"
|
||||
hide-details>
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-tray-arrow-down</v-icon>
|
||||
</template>
|
||||
</HistoryField>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<HistoryField
|
||||
v-model="downloadPath"
|
||||
:history-key="HistoryKey.TORRENT_PATH"
|
||||
ref="dlPathField"
|
||||
:disabled="form.autoTMM"
|
||||
:label="t('dialogs.add.downloadPath')"
|
||||
hide-details>
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-tray-arrow-down</v-icon>
|
||||
</template>
|
||||
</HistoryField>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<HistoryField
|
||||
v-model="form.savepath"
|
||||
:history-key="HistoryKey.TORRENT_PATH"
|
||||
ref="savePathField"
|
||||
:disabled="form.autoTMM"
|
||||
:label="t('dialogs.add.savePath')"
|
||||
hide-details>
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-content-save</v-icon>
|
||||
</template>
|
||||
</HistoryField>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<HistoryField
|
||||
v-model="form.savepath"
|
||||
:history-key="HistoryKey.TORRENT_PATH"
|
||||
ref="savePathField"
|
||||
:disabled="form.autoTMM"
|
||||
:label="t('dialogs.add.savePath')"
|
||||
hide-details>
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-content-save</v-icon>
|
||||
</template>
|
||||
</HistoryField>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="form.contentLayout"
|
||||
:items="contentLayoutOptions"
|
||||
:label="t('constants.contentLayout.title')"
|
||||
color="accent"
|
||||
hide-details
|
||||
rounded="xl"
|
||||
variant="solo-filled" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="form.contentLayout"
|
||||
:items="contentLayoutOptions"
|
||||
:label="t('constants.contentLayout.title')"
|
||||
color="accent"
|
||||
hide-details
|
||||
rounded="xl"
|
||||
variant="solo-filled" />
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="form.stopCondition"
|
||||
:items="stopConditionOptions"
|
||||
:label="t('constants.stopCondition.title')"
|
||||
color="accent"
|
||||
hide-details
|
||||
rounded="xl"
|
||||
variant="solo-filled" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="form.stopCondition"
|
||||
:items="stopConditionOptions"
|
||||
:label="t('constants.stopCondition.title')"
|
||||
color="accent"
|
||||
hide-details
|
||||
rounded="xl"
|
||||
variant="solo-filled" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="mx-3">
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="startNow" :label="t('dialogs.add.startNow')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="form.addToTopOfQueue" :label="t('dialogs.add.addToTopOfQueue')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="form.skip_checking" :label="t('dialogs.add.skipChecking')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="form.autoTMM" :label="t('dialogs.add.autoTMM')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="form.sequentialDownload" :label="t('dialogs.add.sequentialDownload')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="form.firstLastPiecePrio" :label="t('dialogs.add.firstLastPiecePrio')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="mx-3">
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="startNow" :label="t('dialogs.add.startNow')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="form.addToTopOfQueue" :label="t('dialogs.add.addToTopOfQueue')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="form.skip_checking" :label="t('dialogs.add.skipChecking')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="form.autoTMM" :label="t('dialogs.add.autoTMM')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="form.sequentialDownload" :label="t('dialogs.add.sequentialDownload')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-checkbox v-model="form.firstLastPiecePrio" :label="t('dialogs.add.firstLastPiecePrio')" color="accent" density="compact" hide-details />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel color="primary" :title="$t('dialogs.add.limitCollapse')">
|
||||
<v-expansion-panel-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field v-model="dlLimit" :label="$t('dialogs.add.dlLimit')" hide-details suffix="KiB/s">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-download</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field v-model="upLimit" :label="$t('dialogs.add.upLimit')" hide-details suffix="KiB/s">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-upload</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-expansion-panels>
|
||||
<v-expansion-panel color="primary" :title="$t('dialogs.add.limitCollapse')">
|
||||
<v-expansion-panel-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field v-model="dlLimit" :label="$t('dialogs.add.dlLimit')" hide-details suffix="KiB/s">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-download</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field v-model="upLimit" :label="$t('dialogs.add.upLimit')" hide-details suffix="KiB/s">
|
||||
<template v-slot:prepend>
|
||||
<v-icon color="accent">mdi-upload</v-icon>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field v-model="ratioLimit" :hint="$t('dialogs.add.limitHint')" :label="$t('dialogs.add.ratioLimit')" type="number" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="seedingTimeLimit"
|
||||
:label="$t('dialogs.add.seedingTimeLimit')"
|
||||
:hint="$t('dialogs.add.limitHint')"
|
||||
:suffix="$t('units.minutes')"
|
||||
type="number" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="inactiveSeedingTimeLimit"
|
||||
:label="$t('dialogs.add.inactiveSeedingTimeLimit')"
|
||||
:hint="$t('dialogs.add.limitHint')"
|
||||
:suffix="$t('units.minutes')"
|
||||
type="number" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<template v-slot:load-more></template>
|
||||
</v-infinite-scroll>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field v-model="ratioLimit" :hint="$t('dialogs.add.limitHint')" :label="$t('dialogs.add.ratioLimit')" type="number" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="seedingTimeLimit"
|
||||
:label="$t('dialogs.add.seedingTimeLimit')"
|
||||
:hint="$t('dialogs.add.limitHint')"
|
||||
:suffix="$t('units.minutes')"
|
||||
type="number" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="inactiveSeedingTimeLimit"
|
||||
:label="$t('dialogs.add.inactiveSeedingTimeLimit')"
|
||||
:hint="$t('dialogs.add.limitHint')"
|
||||
:suffix="$t('units.minutes')"
|
||||
type="number" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="mb-2">
|
||||
<v-btn :text="$t('dialogs.add.resetForm')" color="error" variant="flat" @click="addTorrentStore.resetForm()" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue