Add settings dialog starter

src/Api.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/camelcase */
-import Axios, { AxiosInstance, AxiosResponse } from 'axios';
-import { RssNode, RssRule, SearchPlugin, ApiCategory, SearchTaskResponse } from '@/types';
+import Axios, { AxiosInstance, AxiosPromise, AxiosResponse } from 'axios';
+import { RssNode, RssRule, SearchPlugin, ApiCategory, SearchTaskResponse, Preferences } from '@/types';
 
 const apiEndpoint = 'api/v2';
 
@@ -54,7 +54,7 @@ class Api {
     return this.axios.get('/transfer/info');
   }
 
-  public getAppPreferences() {
+  public getAppPreferences(): AxiosPromise<Preferences> {
     return this.axios.get('/app/preferences');
   }
 

src/App.vue

@@ -37,6 +37,10 @@
       v-model="drawerOptions.showSearch"
     />
 
+    <SettingsDialog
+      v-if="drawerOptions.showSettings"
+      v-model="drawerOptions.showSettings"
+    />
     <v-footer
       app
       class="elevation-4"
@@ -68,8 +72,10 @@ import AppFooter from './components/Footer.vue';
 import LogsDialog from './components/dialogs/LogsDialog.vue';
 import RssDialog from './components/dialogs/RssDialog.vue';
 import SearchDialog from './components/dialogs/searchDialog/SearchDialog.vue';
+import SettingsDialog from './components/dialogs/settingsDialog/SettingsDialog.vue';
 import DrawerFooter from './components/drawer/DrawerFooter.vue';
 
+
 import api from './Api';
 import Component from 'vue-class-component';
 import { Watch } from 'vue-property-decorator';
@@ -93,6 +99,7 @@ let appWrapEl: HTMLElement;
     RssDialog,
     SearchDialog,
     DrawerFooter,
+    SettingsDialog
   },
   computed: {
     ...mapState([
@@ -117,6 +124,7 @@ export default class App extends Vue {
   drawerOptions = {
     showLogs: false,
     showRss: false,
+    showSettings: false
   }
   task = 0
   mql?: MediaQueryList
@@ -174,7 +182,7 @@ export default class App extends Vue {
     } else {
       Api.changeBaseUrl(this.config.baseUrl);
     }
-    
+
     try {
       await this.getMainData();
     } catch (e) {

src/components/Drawer.vue

@@ -152,7 +152,7 @@ export default class Drawer extends Vue {
   readonly value: any
 
   basicItems: MenuItem[] = [
-    { icon: 'mdi-cog-box', title: tr('settings'), click: () => alert(tr('todo')) },
+    { icon: 'mdi-cog-box', title: tr('settings'), click: () => this.updateOptions('showSettings', true) },
   ]
 
   endItems: MenuItem[] = [

src/components/dialogs/settingsDialog/SettingsDialog.vue

@@ -0,0 +1,58 @@
+/* eslint-disable vue/max-attributes-per-line */
+<template>
+  <div>
+    <v-dialog
+      :value="value"
+      @input="$emit('input', $event)"
+      scrollable
+      persistent
+    >
+      <v-card>
+        <v-card-title class="headline">
+          <v-icon class="mr-2">mdi-cog</v-icon>
+          <span v-text="$t('settings')" />
+          <v-spacer />
+          <v-btn
+            icon
+            @click="closeDialog"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text> Placeholder </v-card-text>
+        <v-card-actions />
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component, Emit, Prop } from "vue-property-decorator";
+import { mapGetters } from "vuex";
+
+@Component({
+  components: {},
+  computed: {
+    ...mapGetters({
+      preferences: "preferences",
+    }),
+  },
+  methods: {},
+})
+export default class SearchDialog extends Vue {
+  @Prop(Boolean)
+  readonly value!: boolean;
+
+  @Emit("input")
+  closeDialog() {
+    return false;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles.scss";
+
+@include dialog-title;
+</style>