fixup! Migrate Admin Settings to Vuetechdebt/noid/admin-settings-vue

Signed-off-by: Gary Kim <gary@garykim.dev>

5 files changed, 56 insertions, 16 deletions

diff --git a/lib/Settings/AdminSettings.php b/lib/Settings/AdminSettings.php
index 9377e432..85735e2b 100644
--- a/lib/Settings/AdminSettings.php
+++ b/lib/Settings/AdminSettings.php
@@ -7,6 +7,7 @@ use OCP\IRequest;
 use OCP\IL10N;
 use OCP\IConfig;
 use OCP\Settings\ISettings;
+use OCP\IInitialStateService;
 use OCP\Util;
 use OCP\IURLGenerator;
 
@@ -22,17 +23,22 @@ class AdminSettings implements ISettings {
     private $urlGenerator;
     private $l;
 
+    /** @var IInitialStateService */
+    private $initialStateService
+
     public function __construct(
                         IniGetWrapper $iniWrapper,
                         IL10N $l,
                         IRequest $request,
                         IConfig $config,
-                        IURLGenerator $urlGenerator) {
+                        IURLGenerator $urlGenerator,
+						IInitialStateService $initialStateService) {
         $this->urlGenerator = $urlGenerator;
         $this->iniWrapper = $iniWrapper;
         $this->request = $request;
         $this->l = $l;
         $this->config = $config;
+        $this->initialStateService = $initialStateService;
     }
 
     /**
@@ -48,13 +54,12 @@ class AdminSettings implements ISettings {
             'mapboxAPIKEY',
             'graphhopperURL'
         ];
-        $parameters = [];
         foreach ($keys as $k) {
-            $v = $this->config->getAppValue('maps', $k);
-            $parameters[$k] = $v;
+            $data = $this->config->getAppValue('maps', $k, '');
+            $this->initialStateService->provideInitialState('maps', $k, $data);
         }
 
-        return new TemplateResponse('maps', 'adminSettings', $parameters, '');
+        return new TemplateResponse('maps', 'adminSettings');
     }
 
     /**
diff --git a/package-lock.json b/package-lock.json
index cdfc9513..7317089b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -956,6 +956,21 @@
       "integrity": "sha512-f+sKpdLZXkODV+OY39K1M+Spmd4RgxmtEXmNn4Bviv4R7uBFHXuw+JX9ZdfDeOryfHjJ/TRQxQEp0GMpBwZFUw==",
       "dev": true
     },
+    "@nextcloud/initial-state": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@nextcloud/initial-state/-/initial-state-1.1.2.tgz",
+      "integrity": "sha512-AmewfDmsCgL9j062VWkgWPg+dfyu63xxqv29ErAJ1WZiEQK/gb2IyiILDMTXdVeNHGDY874mzBcAAkpFO/DxnQ==",
+      "requires": {
+        "core-js": "^3.6.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+          "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+        }
+      }
+    },
     "@nextcloud/router": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@nextcloud/router/-/router-1.0.0.tgz",
diff --git a/package.json b/package.json
index 7915839a..c880f772 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   ],
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.12.1",
+    "@nextcloud/initial-state": "^1.1.2",
     "@nextcloud/router": "^1.0.0",
     "d3": "^3.5.17",
     "i18next-client": "^1.11.4",
diff --git a/src/adminSettings.js b/src/adminSettings.js
index 3ea01640..3cc4482d 100644
--- a/src/adminSettings.js
+++ b/src/adminSettings.js
@@ -1,4 +1,7 @@
+import Vue from 'vue';
+
 import { generateUrl } from "@nextcloud/router";
+import AdminSettings from "./components/AdminSettings";
 
 (function() {
     if (!OCA.Maps) {
@@ -30,6 +33,8 @@ function setMapsRoutingSettings(key, value) {
 }
 
 $(document).ready(function() {
+	const View = Vue.extend(AdminSettings);
+	new View().$mount('#routing');
     $('body').on('change',
         'input#osrmFootURL, ' +
         'input#osrmCarURL, ' +
diff --git a/src/components/AdminSettings.vue b/src/components/AdminSettings.vue
index 2bb68b1c..bc160ce0 100644
--- a/src/components/AdminSettings.vue
+++ b/src/components/AdminSettings.vue
@@ -2,32 +2,32 @@
 	<div>
 		<h2>{{ t('maps', 'Maps routing settings') }}</h2>
 		<p class="settings-hint">{{ t('maps', 'To enable routing, you must set up a routing engine below.') }}</p>
-		<h3><a href="http://project-osrm.org/" title="{{ t('maps', 'ORSM website') }}" target="_blank">{{ t('maps', 'OSRM settings') }}</a></h3>
+		<h3><a href="http://project-osrm.org/" :title="t('maps', 'ORSM website')" target="_blank">{{ t('maps', 'OSRM settings') }}</a></h3>
 		<p>{{ t('maps', 'An OSRM server URL looks like this : https://my.osrm.server.org:5000/route/v1') }}</p>
 		<p>{{ t('maps', 'Leave URL fields empty to disable OSRM routing provider.') }}</p><br/>
 		<div id="osrm">
 			<label for="osrmCarURL">{{ t('maps', 'OSRM server URL (car profile)') }}</label><br/>
-			<input id="osrmCarURL" type="text" value="<?php if (isset($_['osrmCarURL'])) p($_['osrmCarURL']); ?>"/><br/>
+			<input id="osrmCarURL" type="text" :v-model="osrmCarURL"/><br/>
 
 			<label for="osrmBikeURL">{{ t('maps', 'OSRM server URL (bicycle profile)') }}</label><br/>
-			<input id="osrmBikeURL" type="text" value="<?php if (isset($_['osrmBikeURL'])) p($_['osrmBikeURL']); ?>"/><br/>
+			<input id="osrmBikeURL" type="text" :v-model="osrmBikeURL"/><br/>
 
 			<label for="osrmFootURL">{{ t('maps', 'OSRM server URL (foot profile)') }}</label><br/>
-			<input id="osrmFootURL" type="text" value="<?php if (isset($_['osrmFootURL'])) p($_['osrmFootURL']); ?>"/><br/>
+			<input id="osrmFootURL" type="text" :v-model="osrmFootURL"/><br/>
 
 			<br/>
 			<input id="osrmDEMO" type="checkbox" class="checkbox" <?php p($osrmDemoChecked); ?>/>
 			<label for="osrmDEMO">{{ t('maps', 'Show OSRM demo server') }}</label>
 		</div><br/>
 
-		<h3><a href="https://www.graphhopper.com/" title="<?php p($l->t('Graphhopper Website')) ?>" target="_blank">{{ t('maps', 'GraphHopper settings') }}</a></h3>
+		<h3><a href="https://www.graphhopper.com/" :title="t('maps', 'Graphhopper website')" target="_blank">{{ t('maps', 'GraphHopper settings') }}</a></h3>
 		<p>{{ t('maps', 'A GraphHopper server URL looks like this : https://my.graphhopper.server.org:8989/route') }}</p><br />
 
 		<div id="graphhopper">
 			<label for="graphhopperURL">{{ t('maps', 'GraphHopper server URL (will use main graphhopper server if empty)') }}</label><br/>
-			<input id="graphhopperURL" type="text" value="<?php if (isset($_['graphhopperURL'])) p($_['graphhopperURL']); ?>"/><br/>
+			<input id="graphhopperURL" type="text" :v-model="graphhopperURL"/><br/>
 			<label for="graphhopperAPIKEY">{{ t('maps', 'GraphHopper API key (mandatory if main server used)') }}</label><br/>
-			<input id="graphhopperAPIKEY" type="text" value="<?php if (isset($_['graphhopperAPIKEY'])) p($_['graphhopperAPIKEY']); ?>"/>
+			<input id="graphhopperAPIKEY" type="text" :v-model="graphhopperAPIKEY"/>
 		</div><br/>
 
 		<h3><a href="https://www.mapbox.com/" title="<?php p($l->t('Mapbox Website')) ?>" target="_blank">{{ t('maps', 'Mapbox settings') }}</a></h3>
@@ -35,15 +35,29 @@
 		<p>{{ t('maps', 'Leave empty to disable.') }}</p><br/>
 		<div id="mapbox">
 			<label for="mapboxAPIKEY">{{ t('maps', 'Mapbox API key') }}</label><br/>
-			<input id="mapboxAPIKEY" type="text" value="<?php if (isset($_['mapboxAPIKEY'])) p($_['mapboxAPIKEY']); ?>"/>
+			<input id="mapboxAPIKEY" type="text" :v-model="mapboxAPIKEY"/>
 		</div>
 	</div>
 </template>
 
 <script>
-	export default {
-		name: "AdminSettings"
-	}
+import { loadState } from '@nextcloud/initial-state';
+
+export default {
+	name: "AdminSettings",
+	data() {
+		return {
+			osrmCarURL: loadState('maps', 'osrmCarURL') || '',
+			osrmBikeURL: loadState('maps', 'osrmBikeURL') || '',
+			osrmFootURL: loadState('maps', 'osrmFootURL') || '',
+			osrmDEMO: loadState('maps', 'osrmDEMO') === '1',
+			graphhopperURL: loadState('maps', 'graphhopperURL') || '',
+			graphhopperAPIKEY: loadState('maps', 'graphhopperAPIKEY') || '',
+			mapboxAPIKEY: loadState('maps', 'mapboxAPIKEY') || '',
+		}
+	},
+
+}
 </script>
 
 <style scoped>