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
+        }
+      }
+    }
+  ]
+};

.gitignore

@@ -13,3 +13,5 @@ embedded.txt
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
+
+.DS_Store

.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

@@ -43,6 +43,8 @@ YARN=yarn
 PHP=php
 COMPOSER=composer
 POSTCSS=npx postcss
+I18NEXTRACT=yarn run vue-i18n-extract
+LOCALEMAKE=php buildfiles/make-locales.php
 
 # Configure some default flags for the tooling. Set include paths.
 SASSFLAGS=-I node_modules/ --color --quiet-deps
@@ -57,8 +59,12 @@ SASS_INPUT=scss/grocy.scss
 SASS_OUTPUT=public/dist/grocy.css
 UGLIFY_INPUT=public/dist/grocy.js
 UGLIFY_OUTPUT=public/dist/grocy.min.js
-OBJDIRS := public/dist public/js public/css public/js/locales
+OBJDIRS := public/dist public/js public/css public/js/locales public/locale
 TMPSASS=public/dist/grocy.tmp.css
+ARTSOURCES := $(wildcard artwork/*.svg)
+ARTOBJS := $(addprefix public/img/, $(notdir $(ARTSOURCES)))
+LANGS := $(wildcard locale/*.json)
+LANGOBJS := $(addprefix public/locale/, $(notdir $(LANGS)))
 
 .DEFAULT_GOAL := build
 # disable default suffixes
@@ -78,7 +84,7 @@ help:
 
 # Install all dependencies, then build the public/ folder.
 .PHONY=build
-build: vendor js css public/js/locales/grocy/en.json resources
+build: vendor js css $(LANGOBJS) public/js/locales/grocy/en.json resources
 
 .PHONY=minify
 minify: build
@@ -123,7 +129,8 @@ watch:
 	touch ${TMPSASS}
 	${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.config.js ${RFLAGS} & \
+	${ROLLUP} --watch --no-watch.clearScreen --config rollup.vue.js ${RFLAGS} & \
 	${PHP} ${RUNFLAGS} & \
 	trap "trap - SIGTERM && kill -- -$$" SIGINT SIGTERM EXIT & \
 	wait
@@ -137,10 +144,27 @@ js: yarn.lock | $(OBJDIRS)
 
 # build and bundle SASS files.
 .PHONY=css
-css: yarn.lock | $(OBJDIRS)
+css: scss/sigma/_day.scss scss/sigma/_night.scss yarn.lock | $(OBJDIRS)
 	${SASS} ${SASSFLAGS} ${SASS_INPUT} ${SASS_OUTPUT}
 	${POSTCSS} --config . ${SASS_OUTPUT} -r
 
+# Both themes need to be wrapped for now (makes changing easier...)
+# CSS is perfectly fine SCSS with a different file ending.
+# So copy files, and .gitignore them, so that scoped @use works.
+scss/sigma/_day.scss: node_modules/primevue/resources/themes/saga-green/theme.css
+	cp node_modules/primevue/resources/themes/saga-green/theme.css scss/sigma/_day.scss
+
+scss/sigma/_night.scss: node_modules/primevue/resources/themes/arya-green/theme.css
+	cp node_modules/primevue/resources/themes/arya-green/theme.css scss/sigma/_night.scss
+
+node_modules/primevue/resources/themes/saga-green/theme.css: yarn.lock
+
+node_modules/primevue/resources/themes/arya-green/theme.css: yarn.lock
+
+.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.
@@ -149,8 +173,9 @@ css: yarn.lock | $(OBJDIRS)
 #
 # The resources target depends on all i18n copy targets
 # defined below, which do the actual magic.
+# TODO: better dependency expression.
 .PHONY=resources
-resources: public/webfonts public/dist/font public/js/locales/summernote public/js/locales/bootstrap-select public/js/locales/fullcalendar public/js/locales/fullcalendar-core public/js/swagger-ui.js
+resources: public/webfonts public/dist/font public/dist/fonts public/js/locales/summernote public/js/locales/bootstrap-select public/js/locales/fullcalendar public/js/locales/fullcalendar-core public/js/swagger-ui.js $(ARTOBJS) $(LANGOBJS)
 
 public/dist:
 	mkdir -p public/dist
@@ -160,13 +185,18 @@ public/css:
 	mkdir -p public/css
 public/js/locales:
 	mkdir -p public/js/locales
+public/locale:
+	mkdir -p public/locale
 
 public/webfonts: | yarn.lock $(OBJDIRS)
 	cp -r node_modules/@fortawesome/fontawesome-free/webfonts public/webfonts
 
 public/dist/font: | yarn.lock $(OBJDIRS)
 	cp -r node_modules/summernote/dist/font public/dist/font
 
+public/dist/fonts: | yarn.lock $(OBJDIRS)
+	cp -r node_modules/primeicons/fonts public/dist/fonts
+
 public/js/locales/summernote: | yarn.lock $(OBJDIRS)
 	cp -r node_modules/summernote/dist/lang public/js/locales/summernote
 
@@ -183,6 +213,12 @@ public/js/swagger-ui.js: node_modules/swagger-ui-dist/swagger-ui.js | yarn.lock
 	cp -r node_modules/swagger-ui-dist/*.js node_modules/swagger-ui-dist/*.js.map public/js
 	cp -r node_modules/swagger-ui-dist/*.css node_modules/swagger-ui-dist/*.css.map public/css
 
+public/img/%.svg: artwork/%.svg
+	cp $< $@
+
+public/locale/%.json: locale/%.json | $(OBJDIRS)
+	$(LOCALEMAKE) $< $@
+
 node_modules/swagger-ui-dist/swagger-ui.js: yarn.lock
 
 # This doesn't just generate en.json, but all locale files.
@@ -193,6 +229,10 @@ node_modules/swagger-ui-dist/swagger-ui.js: yarn.lock
 public/js/locales/grocy/en.json: vendor localization/strings.pot | $(OBJDIRS)
 	${PHP} buildfiles/generate-locales.php
 
+.PHONY=extract
+extract:
+	${I18NEXTRACT} report -v './js/**/*.?(js|vue|ts)' --languageFiles './locale/*.json' -a
+
 .PHONY=run
 run: build
 	${PHP} ${RUNFLAGS}
@@ -240,6 +280,7 @@ clean:
 	-rm -rf public/js
 	-rm -rf public/css
 	-rm -rf public/js/locales
+	-rm -rf public/locale
 	-rm -rf release/
 	-rm -rf vendor/
 	-rm -rf node_modules

buildfiles/convert-locales.php

@@ -0,0 +1,69 @@
+<?php
+use Grocy\Services\LocalizationService;
+
+function clean($in, $pluralMode) {
+	$out = $in;
+	$varname = $pluralMode ? "{count}" : "{string0}";
+
+	$out = str_replace("%s", $varname, $out);
+	$out = preg_replace('/%([0-9])\$s/', '{string${1}}', $out);
+	$out = str_replace('"', '\"', $out);
+	$out = str_replace("%d", $varname, $out);
+	$out = str_replace("\n", "", $out);
+	return $out;
+}
+
+/* This file statically generates json to handle
+ * frontend translations.
+ */
+const REPO_BASE = __DIR__ . '/..';
+define("GROCY_DATAPATH", REPO_BASE .'/data');
+
+// Load composer dependencies
+require_once REPO_BASE .'/vendor/autoload.php';
+// Load config files
+if(file_exists(GROCY_DATAPATH . '/config.php')) {
+	require_once GROCY_DATAPATH . '/config.php';
+}
+require_once REPO_BASE .'/php/config-dist.php'; // For not in own config defined values we use the default ones
+
+echo "Searching for localizations in " . REPO_BASE ."/localization/* \n";
+
+$translations = array_filter(glob(REPO_BASE .'/localization/*'), 'is_dir');
+
+foreach($translations as $lang) {
+
+	$culture = basename($lang);
+
+	echo "Generating " . $culture . "...\n";
+	$ls = LocalizationService::getInstance($culture, true);
+	$ls->LoadLocalizations(false);
+
+	$lf = fopen(REPO_BASE . "/locale/" . $culture . ".json", "w");
+
+	fwrite($lf, "{\n");
+
+	$isFirst = true;
+	foreach($ls->Po as $translation) {
+		$hasPlural = $translation->hasPlural();
+		if(!$isFirst) {
+			fwrite($lf, ",\n");
+		}
+		$isFirst = false;
+		$orig = clean($translation->getOriginal(), $hasPlural);
+		if($hasPlural) {
+			$orig .= ' | ' . clean($translation->getPlural(), $hasPlural);
+		}
+
+		$trans = clean($translation->getTranslation(), $hasPlural);
+		if($hasPlural) {
+			$plTrans = $translation->getPluralTranslations();
+			foreach($plTrans as $pTrans) {
+				$trans .= ' | ' . clean($pTrans, $hasPlural);
+			}
+		}
+
+		fwrite($lf, '     "'.$orig.'" : "'.$trans.'"');
+	}
+	fwrite($lf, "\n}\n");
+}

buildfiles/make-locales.php

@@ -0,0 +1,13 @@
+<?php
+
+if($argc !== 3)
+{
+	echo "Usage: " . $argv[0] . " INPUT OUTPUT\n";
+	exit(1);
+}
+
+$in = json_decode(file_get_contents($argv[1], $argv[2]), true);
+
+$out = array_filter($in, function ($k, $v) { return !empty($v); }, ARRAY_FILTER_USE_BOTH );
+
+file_put_contents($argv[2], json_encode($out));

changelog/62_UNRELEASED_xxxx-xx-xx.md

@@ -5,6 +5,10 @@
 In between grocy v3.0.1 and this version, we forked the project to not-grocy. This moved a lot of code around.
 
 - Made not-grocy much faster.
+- New frontend URLs: Everything is handled through vue-router. Old URLs are not neccessarily the valid anymore.
+  While this mostly applies to object editing, we can't promise that all your bookmarks work.
+- New and modern look and feel.
+- Some new API endpoints that are easier to use than the raw object API.
 
 ### New feature: (Own) Product and stock entry labels/barcodes ("grocycode")
 - Print own labels/barcodes for products and/or every stock entry and then scan that code on every place a product or stock entry can be selected