From 6c88313c901b16827355a7e9097847b4c128700e Mon Sep 17 00:00:00 2001
From: Daan <dw.daanwijns@gmail.com>
Date: Tue, 15 Sep 2020 12:51:58 +0200
Subject: [PATCH] Add sorting modal [#39]

---
 package.json                                  |   2 +-
 .../SettingsModal/Tabs/TagsAndCategories.vue  |   6 +-
 src/components/Modals/SortModal.vue           | 105 ++++++++++++++++++
 src/components/Navbar/TopActions.vue          |  10 ++
 src/plugins/vuetify.js                        |   6 +-
 5 files changed, 125 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Modals/SortModal.vue

diff --git a/package.json b/package.json
index e6117bc8..00fc3305 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vuetorrent",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve",
diff --git a/src/components/Modals/SettingsModal/Tabs/TagsAndCategories.vue b/src/components/Modals/SettingsModal/Tabs/TagsAndCategories.vue
index 0701a2a0..ca68254e 100644
--- a/src/components/Modals/SettingsModal/Tabs/TagsAndCategories.vue
+++ b/src/components/Modals/SettingsModal/Tabs/TagsAndCategories.vue
@@ -35,7 +35,7 @@
                 <v-flex xs12 sm12>
                     <h3>Available Categories:</h3>
                 </v-flex>
-                <v-flex class="d-flex flex-wrap  mt-3" xs12 sm12>
+                <v-flex class="d-flex flex-wrap mt-3" xs12 sm12>
                     <v-chip
                         v-for="cat in availableCategories"
                         :key="cat.name"
@@ -122,3 +122,7 @@ export default {
     }
 }
 </script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/SettingsTab.scss';
+</style>
diff --git a/src/components/Modals/SortModal.vue b/src/components/Modals/SortModal.vue
new file mode 100644
index 00000000..d6655721
--- /dev/null
+++ b/src/components/Modals/SortModal.vue
@@ -0,0 +1,105 @@
+<template>
+    <v-dialog v-model="dialog" scrollable max-width="500px">
+        <v-card>
+            <v-container :class="`pa-0 project done`">
+                <v-card-title class="justify-center">
+                    <h2>Sort Torrents</h2>
+                </v-card-title>
+                <v-card-text>
+                    <v-form class="px-6 mt-3 justify-center mx-auto">
+                        <v-container class="sortmodal">
+                            <v-select
+                                :value="sortProperty"
+                                v-model="sort_options.sort"
+                                flat
+                                class="ml-2 mr-2"
+                                :items="options"
+                                item-text="name"
+                                item-value="value"
+                                dense
+                                solo
+                                background-color="select"
+                                height="55"
+                            ></v-select>
+                            <v-switch
+                                class="v-input--reverse v-input--expand pa-0 ma-0"
+                                inset
+                                v-model="sort_options.reverse"
+                                color="green_accent"
+                                style="padding-left: 10px !important"
+                            >
+                                <template #label> Reverse </template>
+                            </v-switch>
+                        </v-container>
+                    </v-form>
+                </v-card-text>
+            </v-container>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { Modal } from '@/mixins'
+export default {
+    name: 'Sort',
+    mixins: [Modal],
+    data() {
+        return {
+            sortProperty: { value: '', name: 'Default' },
+            reverse: false,
+            options: [
+                { value: 'default', name: 'Default' },
+                { value: 'availability', name: 'Availability' },
+                { value: 'category', name: 'Category' },
+                { value: 'completed', name: 'Completed' },
+                { value: 'dlspeed', name: 'Download Speed' },
+                { value: 'downloaded', name: 'Downloaded' },
+                { value: 'eta', name: 'ETA' },
+                { value: 'name', name: 'Name' },
+                { value: 'num_leechs', name: 'Peers' },
+                { value: 'priority', name: 'Priority' },
+                { value: 'progress', name: 'Progress' },
+                { value: 'ratio', name: 'Ratio' },
+                { value: 'size', name: 'Size' },
+                { value: 'state', name: 'State' },
+                { value: 'time_active', name: 'Time Active' },
+                { value: 'uploaded', name: 'Uploaded' },
+                { value: 'upspeed', name: 'Upload Speed' }
+            ]
+        }
+    },
+    methods: {
+        close() {
+            this.$store.commit('DELETE_MODAL', this.guid)
+        }
+    },
+    computed: {
+        ...mapState(['sort_options'])
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.sortmodal .v-select__selection,
+.v-input__icon i {
+    color: var(--search) !important;
+}
+// Reversed input variant
+::v-deep .v-input--reverse .v-input__slot {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    .v-application--is-ltr & {
+        .v-input--selection-controls__input {
+            margin-right: 0;
+            margin-left: 8px;
+        }
+    }
+    .v-application--is-rtl & {
+        .v-input--selection-controls__input {
+            margin-left: 0;
+            margin-right: 8px;
+        }
+    }
+}
+</style>
diff --git a/src/components/Navbar/TopActions.vue b/src/components/Navbar/TopActions.vue
index 997f1174..89acb0e5 100644
--- a/src/components/Navbar/TopActions.vue
+++ b/src/components/Navbar/TopActions.vue
@@ -1,5 +1,15 @@
 <template>
     <div>
+        <v-btn
+            text
+            small
+            fab
+            color="grey"
+            class="mr-0 ml-0"
+            @click="addModal('SortModal')"
+        >
+            <v-icon color="grey">sort</v-icon>
+        </v-btn>
         <v-btn
             text
             small
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index cd1db950..8177c893 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -27,7 +27,8 @@ export default new Vuetify({
                 torrent_selected: colors.grey.lighten2,
                 background: colors.grey.lighten4,
                 search: colors.grey.darken1,
-                torrentmodaltext: colors.grey.darken4
+                torrentmodaltext: colors.grey.darken4,
+                select: colors.grey.lighten4
             },
             dark: {
                 primary: '#35495e',
@@ -43,7 +44,8 @@ export default new Vuetify({
                 torrent_selected: colors.blueGrey.darken1,
                 background: colors.grey.darken4,
                 search: colors.grey.darken3,
-                torrentmodaltext: colors.grey.lighten4
+                torrentmodaltext: colors.grey.lighten4,
+                select: colors.grey.darken3
             }
         }
     }