From fdac03bfe327269835aa25b0e7841f21c5ed00b4 Mon Sep 17 00:00:00 2001
From: Daan Wijns <dw.daanwijns@gmail.com>
Date: Thu, 4 Jun 2020 19:09:45 +0200
Subject: [PATCH] tag mobile layout fix + creating new/deleting tags

---
 .../TorrentDetailModal/CreateNewTagDialog.vue |  68 ++++++++++++
 .../TorrentDetailModal/DeleteTagDialog.vue    |  59 ++++++++++
 src/components/TorrentDetailModal/Tags.vue    | 102 +++++++++++-------
 src/services/qbit.js                          |  16 +++
 4 files changed, 208 insertions(+), 37 deletions(-)
 create mode 100644 src/components/TorrentDetailModal/CreateNewTagDialog.vue
 create mode 100644 src/components/TorrentDetailModal/DeleteTagDialog.vue

diff --git a/src/components/TorrentDetailModal/CreateNewTagDialog.vue b/src/components/TorrentDetailModal/CreateNewTagDialog.vue
new file mode 100644
index 00000000..7913bd63
--- /dev/null
+++ b/src/components/TorrentDetailModal/CreateNewTagDialog.vue
@@ -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>
diff --git a/src/components/TorrentDetailModal/DeleteTagDialog.vue b/src/components/TorrentDetailModal/DeleteTagDialog.vue
new file mode 100644
index 00000000..fd8a0e84
--- /dev/null
+++ b/src/components/TorrentDetailModal/DeleteTagDialog.vue
@@ -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>
diff --git a/src/components/TorrentDetailModal/Tags.vue b/src/components/TorrentDetailModal/Tags.vue
index b74d813e..59111532 100644
--- a/src/components/TorrentDetailModal/Tags.vue
+++ b/src/components/TorrentDetailModal/Tags.vue
@@ -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() {
diff --git a/src/services/qbit.js b/src/services/qbit.js
index 52634d07..1fe2d342 100644
--- a/src/services/qbit.js
+++ b/src/services/qbit.js
@@ -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('|'),