GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 07:28:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: enable drag sorting for plugin market repos

Browse Source
This commit is contained in:
jxxghp
2026-04-17 21:01:33 +08:00
parent 8479099926
commit c66b6649e2
1 changed files with 59 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dialog/PluginMarketSettingDialog.vue
+59 -60
View File
@@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import api from '@/api' import api from '@/api'
import draggable from 'vuedraggable'
import { useToast } from 'vue-toastification' import { useToast } from 'vue-toastification'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useDisplay } from 'vuetify' import { useDisplay } from 'vuetify'
@@ -107,18 +108,8 @@ function formatRepoDisplay(url: string) {
return url return url
} }
function moveUp(index: number) { function repoItemKey(repo: string) {
if (index === 0) return return repo
const temp = repoList.value[index]
repoList.value[index] = repoList.value[index - 1]
repoList.value[index - 1] = temp
}
function moveDown(index: number) {
if (index === repoList.value.length - 1) return
const temp = repoList.value[index]
repoList.value[index] = repoList.value[index + 1]
repoList.value[index + 1] = temp
} }
onMounted(() => { onMounted(() => {
@@ -155,57 +146,65 @@ onMounted(() => {
<div class="plugin-market-list-wrap"> <div class="plugin-market-list-wrap">
<VList v-if="repoList.length > 0" class="px-0"> <VList v-if="repoList.length > 0" class="px-0">
<template v-for="(repo, index) in repoList" :key="index"> <draggable
<VListItem class="py-2"> v-model="repoList"
<template #prepend> :item-key="repoItemKey"
<div class="d-flex align-center me-2"> handle=".drag-handle"
<VBtn animation="200"
icon="mdi-chevron-up" :disabled="editingIndex !== null"
size="x-small" >
variant="text" <template #item="{ element: repo, index }">
@click="moveUp(index)" <div>
:disabled="index === 0" <VListItem class="py-2">
<template #prepend>
<VBtn
icon="mdi-drag-vertical"
size="small"
variant="text"
color="primary"
class="drag-handle me-2"
:disabled="editingIndex !== null"
/>
</template>
<VListItemTitle v-if="editingIndex !== index">
<span class="text-truncate" :title="repo">{{ formatRepoDisplay(repo) }}</span>
</VListItemTitle>
<VTextField
v-else
v-model="editingUrl"
density="compact"
variant="outlined"
hide-details
@keyup.enter="saveEdit"
@keyup.escape="cancelEdit"
/> />
<VBtn
icon="mdi-chevron-down"
size="x-small"
variant="text"
@click="moveDown(index)"
:disabled="index === repoList.length - 1"
/>
</div>
</template>
<VListItemTitle v-if="editingIndex !== index"> <template #append v-if="editingIndex !== index">
<span class="text-truncate" :title="repo">{{ formatRepoDisplay(repo) }}</span> <div class="d-flex align-center">
</VListItemTitle> <IconBtn icon="mdi-pencil" size="small" variant="text" @click="startEdit(index)" />
<IconBtn
icon="mdi-delete"
size="small"
variant="text"
color="error"
@click="removeRepo(index)"
/>
</div>
</template>
<VTextField <template #append v-else>
v-else <div class="d-flex align-center">
v-model="editingUrl" <IconBtn icon="mdi-check" size="small" variant="text" color="success" @click="saveEdit" />
density="compact" <IconBtn icon="mdi-close" size="small" variant="text" @click="cancelEdit" />
variant="outlined" </div>
hide-details </template>
@keyup.enter="saveEdit" </VListItem>
@keyup.escape="cancelEdit" <VDivider v-if="index < repoList.length - 1" class="mx-4" />
/> </div>
</template>
<template #append v-if="editingIndex !== index"> </draggable>
<div class="d-flex align-center">
<IconBtn icon="mdi-pencil" size="small" variant="text" @click="startEdit(index)" />
<IconBtn icon="mdi-delete" size="small" variant="text" color="error" @click="removeRepo(index)" />
</div>
</template>
<template #append v-else>
<div class="d-flex align-center">
<IconBtn icon="mdi-check" size="small" variant="text" color="success" @click="saveEdit" />
<IconBtn icon="mdi-close" size="small" variant="text" @click="cancelEdit" />
</div>
</template>
</VListItem>
<VDivider v-if="index < repoList.length - 1" class="mx-4" />
</template>
</VList> </VList>
<div v-else class="text-center text-medium-emphasis py-8"> <div v-else class="text-center text-medium-emphasis py-8">