mirrors/VueTorrent
1
0
Fork 0
mirror of https://github.com/VueTorrent/VueTorrent.git synced 2024-11-28 21:18:54 +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"
style="font-size: 1.1em; max-height: 500px; min-height: 300px;"
>
<v-flex class="mx-auto">
<v-row>
<v-col cols="3">
<h3>Available Tags:</h3>
</v-col>
<v-col>
<v-chip
v-for="tag in availableTags"
:key="tag"
small
class="download white--text caption mx-2"
@click="addTag(tag)"
>
{{ tag }}
</v-chip>
</v-col>
</v-row>
</v-flex>
<v-flex class="mt-12">
<v-row>
<v-col cols="3">
<h3>Current Tags:</h3>
</v-col>
<v-col>
<v-chip
v-for="tag in torrent.tags"
:key="tag"
small
close
class="download white--text caption mx-2"
@click="deleteTag(tag)"
@click:close="deleteTag(tag)"
>{{ tag }}</v-chip
>
</v-col>
</v-row>
</v-flex>
<v-layout class="mx-auto" row wrap>
<v-flex xs12 sm12>
<h3>Available Tags:</h3>
</v-flex>
<v-flex xs12 sm12 class="mt-3">
<v-chip
v-for="tag in availableTags"
:key="tag"
small
class="download white--text caption mx-2"
style="font-size: 0.95em !important;"
@click="addTag(tag)"
>
{{ tag }}
</v-chip>
</v-flex>
</v-layout>
<v-layout class="mx-auto mt-12" row wrap>
<v-flex xs12 sm12>
<h3>Current Tags:</h3>
</v-flex>
<v-flex xs12 sm12 class="mt-3">
<v-chip
v-for="tag in torrent.tags"
:key="tag"
small
close
class="download white--text caption mx-2"
style="font-size: 0.95em !important;"
@click="deleteTag(tag)"
@click:close="deleteTag(tag)"
>{{ tag }}</v-chip
>
</v-flex>
</v-layout>
</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>
</template>
@ -49,11 +70,18 @@
import { difference } from 'lodash'
import { mapGetters } from 'vuex'
import qbit from '@/services/qbit'
import CreateNewTagDialog from './CreateNewTagDialog'
import DeleteTagDialog from './DeleteTagDialog'
export default {
name: 'Tags',
components: { CreateNewTagDialog, DeleteTagDialog },
props: {
hash: String
},
data: () => ({
CreateNewDialog: false,
DeleteDialog: false
}),
computed: {
...mapGetters(['getTorrent', 'getAvailableTags']),
torrent() {

16
src/services/qbit.js
View file

@ -237,6 +237,22 @@ class Qbit {
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) {
const params = {
hashes: hashes.join('|'),