Add sorting modal [#39]

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vuetorrent",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve",

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>

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>

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

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
             }
         }
     }