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

lib/Controller/MainController.php

@@ -60,13 +60,15 @@ class MainController extends Controller
         $params['youtube_installed'] = $this->youtube->isInstalled();
         $params['youtube_bin'] = $this->youtube->getBin();
         $params['youtube_executable'] = $this->youtube->isExecutable();
-        $params['ncd_hide_errors'] = $this->settings->get("ncd_hide_errors",null);
-
-        
+        $params['ncd_hide_errors'] = $this->settings->get("ncd_hide_errors", false);
         $params['counter'] = $this->counters->getCounters();
-        $params['settings_url'] = $this->urlGenerator->linkToRoute("settings.PersonalSettings.index", ['section' => 'ncdownloader']);
-        $params['admin_settings_url'] = $this->urlGenerator->linkToRoute("settings.AdminSettings.index", ['section' => 'ncdownloader']);
-        $params['is_admin'] = \OC_User::isAdminUser($this->uid);
+
+        $params['settings'] = json_encode([
+            'is_admin' =>\OC_User::isAdminUser($this->uid),
+            'admin_url' => $this->urlGenerator->linkToRoute("settings.AdminSettings.index", ['section' => 'ncdownloader']),
+            'personal_url' =>  $this->urlGenerator->linkToRoute("settings.PersonalSettings.index", ['section' => 'ncdownloader']),
+            'ncd_hide_errors' =>  $params['ncd_hide_errors'],
+         ]);
         $response = new TemplateResponse($this->appName, 'Index', $params);
 
         return $response;

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);
 

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

templates/Navigation.php

@@ -108,5 +108,16 @@ if ($youtube_installed && !$youtube_executable) {
             </div>
         </li>
     </ul>
-    <?php print_unescaped($this->inc('settings/Settings'));?>
+    <div id="app-settings">
+      <div id="app-settings-header">
+        <button
+          name="app settings"
+          class="settings-button"
+          data-apps-slide-toggle="#app-settings-content"
+        >
+        <?php p($l->t('Settings'));?>
+        </button>
+      </div>
+      <div id="app-settings-content" data-settings='<?php print($settings);?>' ></div>
+    </div>
 </div>

templates/settings/Settings.php

@@ -1,36 +0,0 @@
-<?php
-extract($_);
-$checked = '';
-$checkbox = $ncd_hide_errors ? "true" : "false";
-if ($ncd_hide_errors) {
-    $checked = "checked";
-}
-?>
-<div id="app-settings">
-    <div id="app-settings-header">
-        <button name="app settings"
-                class="settings-button"
-                data-apps-slide-toggle="#app-settings-content">
-            <?php p($l->t('Settings'));?>
-        </button>
-    </div>
-    <div id="app-settings-content">
-        <ul id="ncdownloader-settings-collapsible-container">
-        <li class="ncdownloader-settings-item" data-tippy-content="check this to show or suppress errors">
-                <input class="checkbox" type="checkbox" value="<?php print($checkbox);?>" <?php print($checked);?> id="ncd-hide-errors"><label for="ncd-hide-errors"><?php p($l->t('Hide Errors'));?></label>
-            </li>
-            <li class="ncdownloader-settings-item">
-                <a href="<?php p($l->t($settings_url));?>" title="<?php p($l->t('Personal Settings'));?>" >
-                    <?php p($l->t('Personal Settings'));?>
-                </a>
-            </li>
-         <?php if ($is_admin): ?>
-            <li class="ncdownloader-settings-item">
-                <a href="<?php p($l->t($admin_settings_url));?>" title="<?php p($l->t('Admin Settings'));?>" >
-                    <?php p($l->t('Admin Settings'));?>
-                </a>
-            </li>
-        <?php endif;?>
-        </ul>
-    </div>
-</div>