mirrors/VueTorrent
1
0
Fork 0
mirror of https://github.com/VueTorrent/VueTorrent.git synced 2025-03-30 05:20:55 +03:00
Code Issues Projects Releases Packages Wiki Activity

tag mobile layout fix + creating new/deleting tags

Browse source
This commit is contained in:
Daan Wijns 2020-06-04 19:09:45 +02:00
parent acb35be257
commit fdac03bfe3
4 changed files with 208 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/components/TorrentDetailModal/CreateNewTagDialog.vue Normal file
View file

@ -0,0 +1,68 @@
<template>
<v-dialog v-model="dialog" max-width="600px">
<v-card>
<v-container
style="min-height: 200px;"
:class="`pa-0 project done`"
>
<v-card-title class="justify-center">
<h2>Create New Tag</h2>
</v-card-title>
<v-form class="px-6 mt-3">
<v-container>
<v-text-field
class="mx-auto"
style="max-width: 200px;"
v-model="tagname"
:rules="rules"
:counter="10"
label="Tag name"
required
></v-text-field>
</v-container>
</v-form>
</v-container>
<v-card-actions class="justify-center pb-5 project done">
<v-btn text @click="cancel" class="error white--text mt-3"
>Cancel</v-btn
>
<v-btn
text
@click="create"
class="green_accent white--text mt-3"
>Save</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import qbit from '@/services/qbit'
export default {
name: 'createNewTagDialog',
props: {
dialog: Boolean
},
data: () => ({
tagname: '',
rules: [
v => !!v || 'Tag is required',
v => v.length <= 10 || 'Tag must be less than 10 characters'
]
}),
methods: {
create() {
qbit.createTag(this.tagname)
this.cancel()
},
cancel() {
this.tagname = ''
this.$emit('close')
}
}
}
</script>
<style></style>

59
src/components/TorrentDetailModal/DeleteTagDialog.vue Normal file
View file

@ -0,0 +1,59 @@
<template>
<v-dialog v-model="dialog" max-width="600px">
<v-card>
<v-container
style="min-height: 200px;"
:class="`pa-0 project done`"
>
<v-card-title class="justify-center">
<h2>Delete Tag</h2>
</v-card-title>
<v-list
rounded
v-if="tags"
class="text-center mx-auto"
style="max-width: 200px;"
>
<v-list-item
@click="deleteTag(t)"
v-for="(t, i) in tags"
:key="i"
>
<v-list-item-content>
<v-list-item-title v-text="t"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-container>
<v-card-actions class="justify-center pb-5 project done">
<v-btn text @click="cancel" class="error white--text mt-3"
>Close</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import qbit from '@/services/qbit'
export default {
name: 'DeleteTagDialog',
props: {
dialog: Boolean,
tags: Array
},
methods: {
deleteTag(tag) {
qbit.deleteTag(tag)
this.cancel()
},
cancel() {
this.tagname = ''
this.$emit('close')
}
}
}
</script>
<style></style>

102
src/components/TorrentDetailModal/Tags.vue
View file

@ -4,44 +4,65 @@
class="mx-auto mt-5" class="mx-auto mt-5"
style="font-size: 1.1em; max-height: 500px; min-height: 300px;" style="font-size: 1.1em; max-height: 500px; min-height: 300px;"
> >
<v-flex class="mx-auto"> <v-layout class="mx-auto" row wrap>
<v-row> <v-flex xs12 sm12>
<v-col cols="3"> <h3>Available Tags:</h3>
<h3>Available Tags:</h3> </v-flex>
</v-col> <v-flex xs12 sm12 class="mt-3">
<v-col> <v-chip
<v-chip v-for="tag in availableTags"
v-for="tag in availableTags" :key="tag"
:key="tag" small
small class="download white--text caption mx-2"
class="download white--text caption mx-2" style="font-size: 0.95em !important;"
@click="addTag(tag)" @click="addTag(tag)"
> >
{{ tag }} {{ tag }}
</v-chip> </v-chip>
</v-col> </v-flex>
</v-row> </v-layout>
</v-flex> <v-layout class="mx-auto mt-12" row wrap>
<v-flex class="mt-12"> <v-flex xs12 sm12>
<v-row> <h3>Current Tags:</h3>
<v-col cols="3"> </v-flex>
<h3>Current Tags:</h3> <v-flex xs12 sm12 class="mt-3">
</v-col> <v-chip
<v-col> v-for="tag in torrent.tags"
<v-chip :key="tag"
v-for="tag in torrent.tags" small
:key="tag" close
small class="download white--text caption mx-2"
close style="font-size: 0.95em !important;"
class="download white--text caption mx-2" @click="deleteTag(tag)"
@click="deleteTag(tag)" @click:close="deleteTag(tag)"
@click:close="deleteTag(tag)" >{{ tag }}</v-chip
>{{ tag }}</v-chip >
> </v-flex>
</v-col> </v-layout>
</v-row>
</v-flex>
</v-card-text> </v-card-text>
<v-card-actions class="justify-center pb-5">
<v-btn
text
class="error white--text mt-3"
@click="DeleteDialog = true"
>Delete</v-btn
>
<v-btn
text
class="green_accent white--text mt-3"
@click="CreateNewDialog = true"
>Create new</v-btn
>
</v-card-actions>
<CreateNewTagDialog
:dialog="CreateNewDialog"
@close="CreateNewDialog = false"
/>
<DeleteTagDialog
:dialog="DeleteDialog"
@close="DeleteDialog = false"
:tags="availableTags"
/>
</v-card> </v-card>
</template> </template>
@ -49,11 +70,18 @@
import { difference } from 'lodash' import { difference } from 'lodash'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import qbit from '@/services/qbit' import qbit from '@/services/qbit'
import CreateNewTagDialog from './CreateNewTagDialog'
import DeleteTagDialog from './DeleteTagDialog'
export default { export default {
name: 'Tags', name: 'Tags',
components: { CreateNewTagDialog, DeleteTagDialog },
props: { props: {
hash: String hash: String
}, },
data: () => ({
CreateNewDialog: false,
DeleteDialog: false
}),
computed: { computed: {
...mapGetters(['getTorrent', 'getAvailableTags']), ...mapGetters(['getTorrent', 'getAvailableTags']),
torrent() { torrent() {

16
src/services/qbit.js
View file

@ -237,6 +237,22 @@ class Qbit {
return this.axios.post('/torrents/addTags ', data) return this.axios.post('/torrents/addTags ', data)
} }
createTag(tag) {
const params = {
tags: tag
}
const data = new URLSearchParams(params)
return this.axios.post('/torrents/createTags ', data)
}
deleteTag(tag) {
const params = {
tags: tag
}
const data = new URLSearchParams(params)
return this.axios.post('/torrents/deleteTags ', data)
}
actionTorrents(action, hashes, extra) { actionTorrents(action, hashes, extra) {
const params = { const params = {
hashes: hashes.join('|'), hashes: hashes.join('|'),