Replace src/assets/vendors/ folder with npm packages

config.template.js

@@ -21,6 +21,10 @@ let conf = {
   pluginsFolder: './src/plugins',                                           // path to G3W-CLIENT plugins folder
   admin_plugins_folder:   '../g3w-admin/g3w-admin',                         // path to G3W-ADMIN plugins folder
   admin_overrides_folder: '../g3w-suite-docker/config/g3w-suite/overrides', // path to G3W-SUITE overrides folder
+  /**
+   * @since 3.9.0
+   */
+  localesFolder: './src/locales',                                           // path to G3W-CLIENT locales folder
   host: G3W_HOST,
   port: G3W_CLIENT_PORT,
   // proxy configuration for local G3W_ADMIN server (where G3W-ADMIN is running)

gulpfile.js

@@ -55,7 +55,7 @@ const __H1 = __INFO + "\n";
 
 
 // Retrieve project dependencies ("g3w-client")
-const dependencies = Object.keys(packageJSON.dependencies).filter(dep => dep !== 'vue');
+const dependencies = Object.keys(packageJSON.dependencies);
 
 // Built-in client plugins
 const default_plugins = [
@@ -94,43 +94,38 @@ gulp.task('concatenate:vendor_js', function() {
   return merge(
     gulp.src([
       g3w.assetsFolder + "/vendors/jquery/jquery-2.2.1.min.js",
-      g3w.assetsFolder + "/vendors/jquery-ui/jquery-ui.min.js",
+      g3w.assetsFolder + "/vendors/jquery-ui/jquery-ui.min.js", // dependency of  jquery.fileupload.js
       g3w.assetsFolder + "/vendors/bootstrap/js/bootstrap.min.js",
       g3w.assetsFolder + "/vendors/bootbox/bootbox.min.js",
-      g3w.assetsFolder + "/vendors/lodash/lodash.min.js",
       g3w.assetsFolder + "/vendors/eventemitter/EventEmitter.min.js",
-      g3w.assetsFolder + "/vendors/history/jquery.history.js",
-      g3w.assetsFolder + "/vendors/signals/signals.min.js",
-      g3w.assetsFolder + "/vendors/crossroads/crossroads.min.js",
       g3w.assetsFolder + "/vendors/moment/moment.js",
       g3w.assetsFolder + "/vendors/moment/moment-with-locales.js",
       g3w.assetsFolder + "/vendors/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js",
       g3w.assetsFolder + "/vendors/icheck/icheck.min.js",
-      g3w.assetsFolder + "/vendors/bootstrap-treeview/js/bootstrap-treeview.js",
-      g3w.assetsFolder + "/vendors/slimScroll/jquery.slimscroll.min.js",
-      g3w.assetsFolder + "/vendors/fastclick/fastclick.js",
-      g3w.assetsFolder + "/vendors/vue/vue.min.js",
       g3w.assetsFolder + "/vendors/jquery-file-upload/jquery.fileupload.js",
       g3w.assetsFolder + "/vendors/jquery-fileDownload/jquery.fileDownload.js",
-      g3w.assetsFolder + "/vendors/bootstrap-filestyle/bootstrap-filestyle.min.js",
       g3w.assetsFolder + "/vendors/ismobile/ismobile.min.js",
-      g3w.assetsFolder + "/vendors/jquery-i18next/jquery-i18next.min.js",
-      g3w.assetsFolder + "/vendors/i18next/i18next.min.js",
-      g3w.assetsFolder + "/vendors/i18next/i18nextXHRBackend.min.js",
-      g3w.assetsFolder + "/vendors/script/script.min.js",
       g3w.assetsFolder + "/vendors/x2js/xml2json.g3w.min.js",
       g3w.assetsFolder + "/vendors/proj4js/proj4.js",
       g3w.assetsFolder + "/vendors/ol/js/ol.js",
+      /*
+        @deprecate 3.9.0
+        @TODO
+        Move to external g3w-client plugin folder as dependence
+      */
       g3w.assetsFolder + "/vendors/ol-rotate-feature/bundle.min.js",
       g3w.assetsFolder + "/vendors/jsts/jsts.min.js",
       g3w.assetsFolder + "/vendors/datatables/datatables.min.js",
       g3w.assetsFolder + "/vendors/shp2geojson/shp.min.js",
-      g3w.assetsFolder + "/vendors/jszip/jszip.min.js",
       g3w.assetsFolder + "/vendors/filesaver/FileSaver.min.js",
       g3w.assetsFolder + "/vendors/select2/js/select2.full.min.js",
-      g3w.assetsFolder + "/vendors/select2/js/i18n/it.js",
       g3w.assetsFolder + "/vendors/d3/js/d3.min.js",
       g3w.assetsFolder + "/vendors/c3/js/c3.min.js",
+      /*
+        @deprecate 3.9.0
+        @TODO
+        Move to external g3w-client plugin folder as dependence
+       */
       g3w.assetsFolder + "/vendors/wps/js/wps-js-all.min.js",
       g3w.assetsFolder + "/vendors/quill/js/quill.min.js"
       ]),
@@ -222,19 +217,35 @@ gulp.task('browserify:app', function() {
   return rebundle();
 });
 
+/**
+ * @since 3.9.0
+ * Move locale files to g3w-admin client folder
+ */
+gulp.task('locales', function(){
+  return gulp.src([
+    `${g3w.localesFolder}/*.json`,
+  ])
+    .pipe(gulp.dest(outputFolder + '/static/client/locales/'))
+})
+
 /**
  * Deploy client and vendor images
  */
 gulp.task('images', function () {
   return gulp.src([
       `${g3w.assetsFolder}/images/**/*.{png,jpg,gif,svg}`,
-      `${g3w.pluginsFolder}/**/*.{png,jpg,gif,svg}`,
+    /**
+     * @deprecated 3.9.0
+     * Each plugin need to get own images
+     */
+    //`${g3w.pluginsFolder}/**/*.{png,jpg,gif,svg}`,
       '!./src/**/node_modules/**/'
     ])
     .pipe(flatten())
     .pipe(gulp.dest(outputFolder + '/static/client/images/'))
 });
 
+
 /**
  * Deploy datatables images (src/assets/vendors/datatables)
  */
@@ -252,7 +263,10 @@ gulp.task('images', function () {
       `${g3w.assetsFolder}/fonts/**/*.{eot,ttf,woff,woff2}`,
       `${g3w.assetsFolder}/vendors/bootstrap/fonts/**/*.{eot,ttf,woff,woff2}`,
       `${g3w.assetsFolder}/vendors/font-awesome-5.15.4/webfonts/**/*.{eot,ttf,woff,woff2}`,
-      `${g3w.pluginsFolder}/**/*.{eot,ttf,woff,woff2}`,
+    /**
+     * @deprecated 3.9.0
+     */
+    //`${g3w.pluginsFolder}/**/*.{eot,ttf,woff,woff2}`,
       '!./src/**/node_modules/**/'
     ])
     .pipe(flatten())
@@ -294,11 +308,9 @@ gulp.task('custom-less', function () {
 gulp.task('concatenate:vendor_css', function() {
   return gulp.src([
     g3w.assetsFolder + "/vendors/bootstrap/css/bootstrap.min.css",
-    g3w.assetsFolder + "/vendors/bootstrap-treeview/css/bootstrap-treeview.min.css",
     g3w.assetsFolder + "/vendors/icheck/skins/all.css",
     g3w.assetsFolder + "/vendors/magic-check/magic-check.min.css",
     g3w.assetsFolder + "/vendors/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css",
-    g3w.assetsFolder + "/vendors/hint/hint.min.css",
     g3w.assetsFolder + "/vendors/ol/css/ol.css",
     g3w.assetsFolder + "/vendors/select2/css/select2.min.css",
     g3w.assetsFolder + "/vendors/c3/css/c3.min.css",
@@ -333,11 +345,23 @@ gulp.task('browser-sync', function() {
   // gulp.watch('./src/**/*.{png,jpg}',                  gulp.series('images', 'browser:reload'));
   // gulp.watch(['./src/index.html', './src/**/*.html'], gulp.series('browser:reload'));
   //
+  /**
+   * @since 3.9.0
+   */
+  gulp.watch([`${g3w.localesFolder}/*.json`], () => runSequence('locales','browser:reload'));
 
   gulp.watch([g3w.assetsFolder + '/style/**/*.less'], () => runSequence('less','browser:reload'));
   gulp.watch('./src/**/*.{png,jpg}',                  () => runSequence('images','browser:reload'));
   gulp.watch(['./src/index.html'],                    () => runSequence('html', 'browser:reload'));
-  gulp.watch(g3w.pluginsFolder + '/*/plugin.js',      (file) => {
+
+  //@since 3.9.0
+  gulp.watch([`${g3w.pluginsFolder}/*/locales/*.json`],      (file) => {
+        const plugins = process.env.G3W_PLUGINS;
+        process.env.G3W_PLUGINS = path.basename(path.dirname(file.path).split('locales')[0]);
+        runSequence('deploy-locales-plugins', 'browser:reload', () => process.env.G3W_PLUGINS = plugins)
+    });
+
+  gulp.watch([`${g3w.pluginsFolder}/*/plugin.js`],      (file) => {
     const plugins = process.env.G3W_PLUGINS;
     process.env.G3W_PLUGINS = path.basename(path.dirname(file.path));
     runSequence('deploy-plugins', 'browser:reload', () => process.env.G3W_PLUGINS = plugins)
@@ -382,7 +406,22 @@ gulp.task('build:dev_plugins', function() {
     console.log(H1__ + `Building plugin: ${g3w.pluginsFolder}/${pluginName}/plugin.js` + __H1);
     try {
       execSync(`gulp --gulpfile ${g3w.pluginsFolder}/${pluginName}/gulpfile.js default`, {stdio: 'inherit'});
-    } catch(e) { /* soft fails on missing `gulp default` task */ }
+      /**
+       * Copy locales plugin folder to g3w.admin_overrides_folder plugin locales folder
+       * @since 3.9.0
+       * @TODO try a better way to work with
+       *
+       */
+      execSync(`mkdir ${g3w.admin_overrides_folder}/static/${pluginName} && mkdir ${g3w.admin_overrides_folder}/static/${pluginName}/js`);
+      execSync(`cp ${g3w.pluginsFolder}/${pluginName}/plugin.js ${g3w.admin_overrides_folder}/static/${pluginName}/js`);
+      //assests
+      //@TODO
+      execSync(`cp -R ${g3w.pluginsFolder}/${pluginName}/locales ${g3w.admin_overrides_folder}/static/${pluginName}`);
+      execSync(`cp -R ${g3w.pluginsFolder}/${pluginName}/images ${g3w.admin_overrides_folder}/static/${pluginName}`);
+      execSync(`cp -R ${g3w.pluginsFolder}/${pluginName}/fonts ${g3w.admin_overrides_folder}/static/${pluginName}`);
+    } catch(e) {
+      /* soft fails on missing `gulp default` task */
+    }
   }
 });
 
@@ -443,10 +482,61 @@ gulp.task('select-plugins', function() {
     );
 });
 
+/**
+ * @since 3.9.0
+ */
+gulp.task('deploy-fonts-plugins', function() {
+  const pluginNames  = process.env.G3W_PLUGINS.split(',');
+  const nodePath     = path;
+  const outputFolder = production ? g3w.admin_plugins_folder : g3w.admin_overrides_folder + '/static';
+  return gulp.src(pluginNames.map(pluginName => `${g3w.pluginsFolder}/${pluginName}/fonts/*.{eot,ttf,woff,woff2}`))
+    .pipe(rename((path, file) => {
+      const pluginName   = nodePath.basename(file.base.split('fonts')[0]);
+      const staticFolder = production ? `${pluginName}/static/${pluginName}/static/fonts/` : `${pluginName}/static/fonts/`;
+      path.dirname = `${outputFolder}/${staticFolder}`;
+      console.log(`[G3W-CLIENT] file plugins fonts updated: ${path.dirname}${path.basename}${path.extname}`);
+    }))
+    .pipe(gulp.dest('.'));
+});
+
+/**
+ * @since 3.9.0
+ */
+gulp.task('deploy-images-plugins', function() {
+  const pluginNames  = process.env.G3W_PLUGINS.split(',');
+  const nodePath     = path;
+  const outputFolder = production ? g3w.admin_plugins_folder : g3w.admin_overrides_folder + '/static';
+  return gulp.src(pluginNames.map(pluginName => `${g3w.pluginsFolder}/${pluginName}/images/*.{png,jpg,gif,svg}`))
+    .pipe(rename((path, file) => {
+      const pluginName   = nodePath.basename(file.base.split('images')[0]);
+      const staticFolder = production ? `${pluginName}/static/${pluginName}/images/` : `${pluginName}/images/`;
+      path.dirname = `${outputFolder}/${staticFolder}`;
+      console.log(`[G3W-CLIENT] file plugins images updated: ${path.dirname}${path.basename}${path.extname}`);
+    }))
+    .pipe(gulp.dest('.'));
+});
+
+/**
+ * @since 3.9.0
+ */
+gulp.task('deploy-locales-plugins', function() {
+    const pluginNames  = process.env.G3W_PLUGINS.split(',');
+    const nodePath     = path;
+    const outputFolder = production ? g3w.admin_plugins_folder : g3w.admin_overrides_folder + '/static';
+    return gulp.src(pluginNames.map(pluginName => `${g3w.pluginsFolder}/${pluginName}/locales/*.json`))
+        .pipe(rename((path, file) => {
+            const pluginName   = nodePath.basename(file.base.split('locales')[0]);
+            const staticFolder = production ? `${pluginName}/static/${pluginName}/locales/` : `${pluginName}/locales/`;
+            path.dirname = `${outputFolder}/${staticFolder}`;
+            console.log(`[G3W-CLIENT] file updated: ${path.dirname}${path.basename}${path.extname}`);
+        }))
+        .pipe(gulp.dest('.'));
+});
+
 /**
  * Deploy local developed plugins (src/plugins)
  */
-gulp.task('deploy-plugins', function() {
+gulp.task('deploy-plugin-plugins', function() {
   const pluginNames  = process.env.G3W_PLUGINS.split(',');
   const nodePath     = path;
   const outputFolder = production ? g3w.admin_plugins_folder : g3w.admin_overrides_folder + '/static';
@@ -460,6 +550,12 @@ gulp.task('deploy-plugins', function() {
     .pipe(gulp.dest('.'));
 });
 
+/**
+ * @since 3.9.0
+ */
+
+gulp.task('deploy-plugins', ['deploy-plugin-plugins', 'deploy-locales-plugins', 'deploy-images-plugins', 'deploy-fonts-plugins']);
+
 /**
  * Deploy local developed plugins (src/plugins)
  */
@@ -468,7 +564,7 @@ gulp.task('build:plugins', (done) => runSequence('clone:default_plugins', 'selec
 /**
  * Compile and deploy local developed client file assets (static and templates)
  */
-gulp.task('build:client', ['browserify:app', 'concatenate:vendor_js', 'concatenate:vendor_css', 'fonts', 'images', 'less', 'datatable-images', 'html']);
+gulp.task('build:client', ['browserify:app', 'concatenate:vendor_js', 'concatenate:vendor_css', 'locales', 'fonts', 'images', 'less', 'datatable-images', 'html']);
 
 /**
  * [PROD] Compile and deploy client application

package.json

@@ -29,12 +29,16 @@
   "license": "MPL-2.0",
   "homepage": "https://github.com/g3w-suite/g3w-client.git",
   "dependencies": {
+    "jszip": "^3.10.1",
+    "lodash": "^4.17.21",
     "regenerator-runtime": "^0.13.9",
+    "scriptjs": "^2.5.9",
     "shp-write": "^0.3.2",
-    "vue": "2.6.12",
     "vue-color": "^2.8.1",
     "vue-cookie": "^1.1.4",
-    "vue-cookie-law": "^1.13.3"
+    "vue-cookie-law": "^1.13.3",
+    "vue-i18n": "^8.28.2",
+    "vue2": "npm:vue@^2.6.2"
   },
   "overrides": {
     "graceful-fs": "^4.2.10"
@@ -90,6 +94,7 @@
     "http-proxy": "^1.11.0",
     "imgurify": "^2.0.1",
     "inquirer": "^7.0.0",
+    "install": "^0.13.0",
     "jshint": "^2.9.1",
     "jshint-stylish": "^2.1.0",
     "karma": "^6.3.2",
@@ -116,6 +121,7 @@
     "vinyl-buffer": "^1.0.0",
     "vinyl-paths": "^2.1.0",
     "vinyl-source-stream": "^1.1.0",
+    "vue": "^2.6.12",
     "vue-template-compiler": "2.6.12",
     "vueify": "^9.4.1",
     "watchify": "^3.7.0",

src/app/api.js

@@ -32,7 +32,6 @@ import RelationsService from 'services/relations';
 import TaskService from 'services/tasks';
 import WorkflowsStack from 'services/workflows';
 import ApiService from 'services/api';
-import RouterService from 'services/router';
 
 import GUI from 'services/gui';
 //MIXINS
@@ -116,7 +115,6 @@ module.exports = {
     ApplicationService,
     ApplicationState,
     ApiService,
-    Router: RouterService,
     i18n,
     task: {
       TaskService

src/app/constant.js

@@ -1,5 +1,5 @@
 /**
- * @file all contants values used on application
+ * @file all constants values used on application
  */
 
 //@ts-check