Introduce VueJS, make not-grocy a SPA.

.eslintrc.js

@@ -1,18 +1,21 @@
+/* eslint-disable indent */
+// eslint-disable-next-line no-undef
 module.exports = {
   env: {
     browser: true,
     es2021: true
   },
   extends: [
     'plugin:vue/essential',
-    "eslint:recommended"
+    "eslint:recommended",
   ],
   parserOptions: {
     ecmaVersion: 12,
     sourceType: 'module'
   },
   plugins: [
-    'vue'
+    'vue',
+    '@typescript-eslint',
   ],
   globals: {
     // from vendor.js:
@@ -28,5 +31,30 @@ module.exports = {
     "indent": ["error", "tab"],
     "brace-style": ["error", "allman", { "allowSingleLine": true }],
     "semi": ["error", "always", { "omitLastInOneLineBlock": true }],
-  }
-}
+  },
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      parser: '@typescript-eslint/parser',
+      extends: [
+        'plugin:vue/essential',
+        "eslint:recommended",
+        'plugin:@typescript-eslint/recommended',
+      ],
+      parserOptions: {
+        project: "./tsconfig.json",
+      }
+    },
+    {
+      files: ["*.vue"],
+      parser: "vue-eslint-parser",
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        vueFeatures: {
+          filter: false,
+          interpolationAsNonHTML: true
+        }
+      }
+    }
+  ]
+};

.vscode/extensions.json

@@ -1,3 +1,6 @@
 {
-	"recommendations": []
+	"recommendations": [
+		"octref.vetur",
+		"dbaeumer.vscode-eslint"
+	]
 }

.vscode/settings.json

@@ -10,4 +10,12 @@
 	"php-cs-fixer.formatHtml": true,
 	"php-cs-fixer.autoFixBySemicolon": true,
 	"php-cs-fixer.onsave": true,
+	"eslint.validate": [
+		"javascript",
+		"typescript",
+		"vue"
+	],
+	"eslint.options": {
+		"useEslintrc": true,
+	}
 }

Makefile

@@ -124,6 +124,7 @@ watch:
 	${SASS} ${SASSFLAGS} --watch ${SASS_INPUT} ${TMPSASS} & \
 	${POSTCSS} ${TMPSASS} --config . -o ${SASS_OUTPUT} --watch & \
 	${ROLLUP} --watch --no-watch.clearScreen --config ${RFLAGS} & \
+	${ROLLUP} --watch --no-watch-clearScreen --config rollup.vue.js ${RFLAGS} & \
 	${PHP} ${RUNFLAGS} & \
 	trap "trap - SIGTERM && kill -- -$$" SIGINT SIGTERM EXIT & \
 	wait
@@ -141,6 +142,10 @@ css: yarn.lock | $(OBJDIRS)
 	${SASS} ${SASSFLAGS} ${SASS_INPUT} ${SASS_OUTPUT}
 	${POSTCSS} --config . ${SASS_OUTPUT} -r
 
+.PHONY=frontend
+frontend:
+	${ROLLUP} --config rollup.vue.js ${RFLAGS}
+
 
 # To bundle all resources, there are a few prerequisites:
 # First, the public output folders need to be created.

js/App.vue

@@ -0,0 +1,14 @@
+<template>
+	<p> lol</p>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	data() 
+	{
+		return {};
+	}
+});
+</script>

js/grocy.js

@@ -1,26 +1,27 @@
+/* eslint-disable @typescript-eslint/no-this-alias */
 // todo: axe some stuff from here for better tree-shaking. also brr, side effects.
-import './vendor';
-import { GrocyApi } from './lib/api';
-import { RefreshContextualTimeago } from './configs/timeago';
-import { setDatatableDefaults } from './configs/datatable';
-import { GrocyFrontendHelpers } from './helpers/frontend';
-import { setInitialGlobalState } from './configs/globalstate';
-import { WakeLock } from './lib/WakeLock';
-import { UISound } from './lib/UISound';
-import { Nightmode } from './lib/nightmode';
-import { HeaderClock } from './helpers/clock';
-import { BoolVal } from './helpers/extensions';
+import './legacy/vendor';
+import { GrocyApi } from './legacy/lib/api';
+import { RefreshContextualTimeago } from './legacy/configs/timeago';
+import { setDatatableDefaults } from './legacy/configs/datatable';
+import { GrocyFrontendHelpers } from './legacy/helpers/frontend';
+import { setInitialGlobalState } from './legacy/configs/globalstate';
+import { WakeLock } from './legacy/lib/WakeLock';
+import { UISound } from './legacy/lib/UISound';
+import { Nightmode } from './legacy/lib/nightmode';
+import { HeaderClock } from './legacy/helpers/clock';
+import { BoolVal } from './legacy/helpers/extensions';
 import Translator from 'gettext-translator';
 import { register as timeagoRegisterLang } from 'timeago.js';
 import * as timeagoLangs from 'timeago.js/lib/lang';
-import { WindowMessageBag } from './helpers/messagebag';
-import * as components from './components';
+import { WindowMessageBag } from './legacy/helpers/messagebag';
+import * as components from './legacy/components';
 import * as uuid from 'uuid';
-import * as views from './viewjs';
-import { GrocyProxy } from './lib/proxy'; //import { $ } from 'jquery';
+import * as views from './legacy/viewjs';
+import { GrocyProxy } from './legacy/lib/proxy'; //import { $ } from 'jquery';
 
 import moment from 'moment';
-import './helpers/string';
+import './legacy/helpers/string';
 
 class GrocyClass 
 {

js/main.ts

@@ -0,0 +1,14 @@
+import { createApp } from 'vue';
+import router from './router';
+import App from './App.vue';
+
+// PrimeVue components
+import PrimeVue from 'primevue/config';
+
+const app = createApp(App);
+
+app.use(PrimeVue);
+app.use(router);
+
+
+app.mount("#app");

js/pages/Stock/Overview.vue

@@ -0,0 +1,11 @@
+<template>
+	<p> Hi! </p>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	// type inference enabled
+});
+</script>

js/pages/Stock/Overview.vue?vue&type=template&id=31afdab6&lang.js

@@ -0,0 +1,6 @@
+import { openBlock as _openBlock, createBlock as _createBlock } from "vue";
+
+export function render(_ctx, _cache, $props, $setup, $data, $options) 
+{
+	return (_openBlock(), _createBlock("p", null, " Hi! "));
+}

js/router.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import StockOverview from './pages/Stock/Overview.vue';
+const routes = [
+	{
+		path: '/',
+		name: 'Home',
+		component: StockOverview
+	},
+];
+const router = createRouter({
+	history: createWebHashHistory(),
+	routes
+});
+export default router;
+//# sourceMappingURL=router.js.map
+//# sourceMappingURL=router.js.map
+//# sourceMappingURL=router.js.map
+//# sourceMappingURL=router.js.map
+//# sourceMappingURL=router.js.map

js/shims-vue.d.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-types */
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}

package.json

@@ -34,6 +34,8 @@
 		"jquery-serializejson": "^2.9.0",
 		"moment": "^2.27.0",
 		"nosleep.js": "^0.11.0",
+		"primeicons": "^4.1.0",
+		"primevue": "^3.5.1",
 		"sass": "^1.35.1",
 		"sprintf-js": "^1.1.2",
 		"startbootstrap-sb-admin": "4.0.0",
@@ -43,7 +45,9 @@
 		"timeago": "^1.6.7",
 		"timeago.js": "^4.0.2",
 		"toastr": "^2.1.4",
-		"uuid": "^8.3.2"
+		"uuid": "^8.3.2",
+		"vue": "next",
+		"vue-router": "4"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.14.6",
@@ -52,6 +56,9 @@
 		"@rollup/plugin-commonjs": "^19.0.0",
 		"@rollup/plugin-node-resolve": "^13.0.0",
 		"@rollup/plugin-replace": "^2.4.2",
+		"@typescript-eslint/eslint-plugin": "^4.28.1",
+		"@typescript-eslint/parser": "^4.28.1",
+		"@vue/compiler-sfc": "^3.1.4",
 		"autoprefixer": "^10.2.6",
 		"babel-core": "^6.26.3",
 		"babel-preset-es2015": "^6.24.1",
@@ -72,7 +79,12 @@
 		"postcss-import": "^14.0.2",
 		"rollup": "^2.52.1",
 		"rollup-plugin-postcss": "^4.0.0",
+		"rollup-plugin-typescript2": "^0.30.0",
+		"rollup-plugin-vue": "latest",
 		"standard": "^16.0.3",
-		"uglify-js": "^3.13.10"
+		"tslib": "^2.3.0",
+		"typescript": "^4.3.5",
+		"uglify-js": "^3.13.10",
+		"vue-eslint-parser": "^7.7.2"
 	}
 }

php/Controllers/SystemController.php

@@ -32,7 +32,9 @@ public function Root(\Psr\Http\Message\ServerRequestInterface $request, \Psr\Htt
 			$demoDataGeneratorService->PopulateDemoData();
 		}
 
-		return $response->withRedirect($this->AppContainer->get('UrlManager')->ConstructUrl($this->GetEntryPageRelative()));
+		// yolo, this is a SPA now.
+		return $this->render($request, $response, 'vue');
+		//return $response->withRedirect($this->AppContainer->get('UrlManager')->ConstructUrl($this->GetEntryPageRelative()));
 	}
 
 	public function __construct(\DI\Container $container)

php/Middleware/AuthMiddleware.php

@@ -28,6 +28,15 @@ public function __invoke(Request $request, RequestHandler $handler): Response
 
 		if ($routeName === 'root')
 		{
+			if (GROCY_MODE === 'dev' || GROCY_MODE === 'demo' || GROCY_MODE === 'prerelease' || GROCY_IS_EMBEDDED_INSTALL || GROCY_DISABLE_AUTH)
+			{
+				$sessionService = SessionService::getInstance();
+				$user = $sessionService->GetDefaultUser();
+
+				define('GROCY_AUTHENTICATED', true);
+				define('GROCY_USER_USERNAME', $user->username);
+				define('GROCY_USER_PICTURE_FILE_NAME', $user->picture_file_name);
+			}
 			return $handler->handle($request);
 		}
 		elseif ($routeName === 'login')

php/Views/vue.blade.php

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="{{ GROCY_LOCALE }}"
+	dir="{{ $dir }}">
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="x-ua-compatible" content="ie=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+	<meta name="robots"	content="noindex,nofollow">
+	<meta name="format-detection" content="telephone=no">
+
+	<link rel="apple-touch-icon" sizes="180x180" href="{{ $U('/img/appicons/apple-touch-icon.png?v=', true) }}{{ $version }}">
+	<link rel="icon" type="image/png" sizes="32x32"	href="{{ $U('/img/appicons/favicon-32x32.png?v=', true) }}{{ $version }}">
+	<link rel="icon" type="image/png" sizes="16x16"	href="{{ $U('/img/appicons/favicon-16x16.png?v=', true) }}{{ $version }}">
+
+	<link rel="manifest" href="{{ $U('/img/appicons/site.webmanifest?v=', true) }}{{ $version }}">
+	<link rel="mask-icon" href="{{ $U('/img/appicons/safari-pinned-tab.svg?v=', true) }}{{ $version }}"	color="#0b024c">
+	<link rel="shortcut icon" href="{{ $U('/img/appicons/favicon.ico?v=', true) }}{{ $version }}">
+	<meta name="apple-mobile-web-app-title"	content="grocy">
+	<meta name="application-name" content="grocy">
+	<meta name="msapplication-TileColor" content="#e5e5e5">
+	<meta name="msapplication-config" content="{{ $U('/img/appicons/browserconfig.xml?v=', true) }}{{ $version }}">
+	<meta name="theme-color" content="#ffffff">
+
+	<title>grocy</title>
+
+	<link href="{{ $U('/components_unmanaged/noto-sans-v11-latin/noto-sans-v11-latin.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
+	<link href="{{ $U('/dist/grocy.css?v=', true) }}{{ $version }}"	rel="stylesheet">
+</head>
+
+<body>
+	<div id="app"></div>
+
+	<script src="{{ $U('/dist/main.js?v=', true) }}{{ $version }}"></script>
+</body>
+
+</html>

rollup.vue.js

@@ -0,0 +1,45 @@
+/* eslint-disable no-undef */
+import vue from 'rollup-plugin-vue';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import babel from '@rollup/plugin-babel';
+import postcss from 'rollup-plugin-postcss';
+import replace from '@rollup/plugin-replace';
+import typescript from 'rollup-plugin-typescript2';
+
+import path from 'path';
+
+
+const env = process.env.NODE_ENV || 'development';
+
+export default {
+	input: [
+		'js/main.ts'
+	],
+	output: {
+		dir: 'public/dist',
+		format: 'umd',
+		name: 'VueGrocy',
+		sourcemap: true,
+	},
+	plugins: [
+		resolve({ browser: true, preferBuiltins: true }),
+		vue({
+			target: "browser"
+		}),
+		typescript(),
+		commonjs(),
+		babel({
+			babelHelpers: 'bundled',
+			exclude: 'node_modules/**'
+		}),
+		postcss({ // will load postcss.config.js
+			extract: path.resolve('public/dist/app.css'),
+			minimize: env !== 'development',
+		}),
+		replace({
+			'process.env.NODE_ENV': JSON.stringify(env),
+			preventAssignment: true,
+		})
+	]
+};

scss/grocy.scss

@@ -61,4 +61,16 @@
 // end third-party
 
 // TODO: does it need to be at the end?
-@import "night-mode";
+@import "night-mode";
+
+// now comes the fun part, because whatever is set above, primeVue will now override.
+.theme-day {
+	@import 'primevue/resources/themes/saga-green/theme.css';    // this will be the day theme.
+}
+.theme-night {
+	@import 'primevue/resources/themes/arya-green/theme.css';    // this will be the night theme.
+}
+
+@import 'primevue/resources/primevue.css';                  // core css
+@import 'primeicons/primeicons.css';                        // icons
+