use vue in place of php tpl engine to render settings template

src/components/toggleButton.vue

@@ -15,6 +15,7 @@
 
 <script>
 export default {
+  name: "toggleButton",
   props: {
     disabled: {
       type: Boolean,
@@ -40,6 +41,7 @@ export default {
       default: false,
     },
   },
+  methods: {},
 
   data() {
     return {
@@ -68,7 +70,7 @@ export default {
 
       set(value) {
         this.status = value;
-        this.$emit("change", value);
+        this.$emit("changed", value);
       },
     },
   },

src/index.js

@@ -11,17 +11,32 @@ import App from './App';
 import tippy, { delegate } from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 'use strict'
+import settingsBar from './settingsBar';
 const basePath = "/apps/ncdownloader";
 
 
 window.addEventListener('DOMContentLoaded', function () {
 
     helper.showErrors('[data-error-message]');
-    // inputAction.run();
     updatePage.run();
     buttonActions.run();
     let container = 'ncdownloader-form-wrapper';
+    const settingsID = "app-settings-content";
     let app = createApp(App);
+    let bar = createApp(settingsBar);
+
+    let values;
+    try {
+        const barEle = document.getElementById(settingsID);
+        let settings = barEle.getAttribute("data-settings");
+        values = JSON.parse(settings);
+    } catch (e) {
+        values = {}
+        console.log(e);
+    }
+    bar.provide('settings', values);
+    bar.mount("#" + settingsID);
+
     let vm = app.mount('#' + container);
     helper.addVue(vm.$options.name, vm);
 
@@ -67,7 +82,7 @@ window.addEventListener('DOMContentLoaded', function () {
         const url = helper.generateUrl(basePath + "/personal/save");
         Http.getInstance(url).setData(data).setHandler(resp => {
             if (resp['message']) {
-                helper.message(t("ncdownloader", resp['message']),1000);
+                helper.message(t("ncdownloader", resp['message']), 1000);
             }
         }).send();
     })

src/settingsBar.vue

@@ -0,0 +1,88 @@
+<template>
+  <section id="ncdownloader-settings-collapsible-container">
+    <div class="ncdownloader-settings-item" :data-tippy-content="tippy">
+      <toggleButton
+        :disabledText="toggleText"
+        :enabledText="toggleText"
+        :defaultStatus="toggleStatus"
+        @changed="toggle"
+      ></toggleButton>
+    </div>
+    <div class="ncdownloader-settings-item">
+      <a :href="personal.url" title="">
+        <button>{{ personal.title }}</button>
+      </a>
+    </div>
+    <div class="ncdownloader-settings-item" v-if="isAdmin">
+      <a :href="admin.url" :title="admin.title">
+        <button>{{ admin.title }}</button>
+      </a>
+    </div>
+  </section>
+</template>
+
+<script>
+import toggleButton from "./components/toggleButton";
+import helper from "./utils/helper";
+import { translate as t, translatePlural as n } from "@nextcloud/l10n";
+import Http from "./lib/http";
+const basePath = "/apps/ncdownloader";
+
+export default {
+  name: "settingsBar",
+  inject: ["settings"],
+  data() {
+    let personal = {
+      title: t("ncdownloader", "Personal Settings"),
+      url: this.settings.personal_url,
+    };
+    let admin = {
+      title: t("ncdownloader", "Admin Settings"),
+      url: this.settings.admin_url,
+    };
+    return {
+      personal: personal,
+      admin: admin,
+      isAdmin: this.settings.is_admin,
+      sectionName: t("ncdownloader", "Settings"),
+      toggleText: t("ncdownloader", "Hide Errors"),
+      toggleStatus: helper.str2Boolean(this.settings.ncd_hide_errors),
+      tippy: t("ncdownloader", "enable this to hide errors"),
+    };
+  },
+  created() {},
+  methods: {
+    toggle(value) {
+      let data = {};
+      data["ncd_hide_errors"] = value ? 1 : 0;
+      const url = helper.generateUrl(basePath + "/personal/save");
+      Http.getInstance(url)
+        .setData(data)
+        .setHandler((resp) => {
+          if (resp["message"]) {
+            helper.message(t("ncdownloader", resp["message"]), 1000);
+          }
+        })
+        .send();
+    },
+  },
+  components: {
+    toggleButton,
+  },
+  provide() {
+    return {
+      settings,
+    };
+  },
+
+  mounted() {},
+};
+</script>
+
+<style lang="scss">
+@import "css/variables.scss";
+#ncdownloader-settings-collapsible-container {
+  display: flex;
+  flex-flow: column wrap;
+}
+</style>

src/utils/helper.js

@@ -187,6 +187,23 @@ const helper = {
                 helper.message(msg, 20000);
         })
     },
+    str2Boolean: function (string) {
+        
+        switch (string.toLowerCase().trim()) {
+            case "true":
+            case "yes":
+            case "1":
+                return true;
+
+            case "false":
+            case "no":
+            case "0":
+            case null:
+                return false;
+            default:
+                return Boolean(string);
+        }
+    }
 }
 
 export default helper