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)

package.json

@@ -29,12 +29,36 @@
   "license": "MPL-2.0",
   "homepage": "https://github.com/g3w-suite/g3w-client.git",
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "blueimp-file-upload": "^10.32.0",
+    "bootbox": "^4.4.0",
+    "bootstrap": "^3.4.1",
+    "bootstrap-datetimepicker": "npm:eonasdan-bootstrap-datetimepicker@^4.17.47",
+    "c3": "^0.7.20",
+    "datatables.net-dt": "^1.10.16",
+    "eventemitter": "npm:wolfy87-eventemitter@^5.2.9",
+    "file-saver": "^2.0.5",
+    "ismobilejs": "^1.1.1",
+    "jquery": "^2.2.1",
+    "jquery-file-download": "^1.4.5",
+    "jquery-ui": "^1.13.2",
+    "jsts": "^2.7.3",
+    "jszip": "^3.10.1",
+    "lodash": "^4.17.21",
+    "magic-check": "^1.0.3",
+    "moment": "^2.29.4",
+    "ol": "^5.3.0",
+    "proj4": "^2.9.0",
+    "quill": "^2.0.0-dev.3",
     "regenerator-runtime": "^0.13.9",
+    "scriptjs": "^2.5.9",
+    "select2": "^4.1.0-rc.0",
     "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"
@@ -54,17 +78,19 @@
     "babel-preset-env": "^1.7.0",
     "babelify": "^7.3.0",
     "browser-sync": "^2.13.0",
-    "browserify": "^13.3.0",
+    "browserify": "^17.0.0",
     "chai": "^4.2.0",
     "chai-http": "^4.3.0",
     "core-js-latest": "npm:core-js@^3.16.2",
     "current-git-branch": "^1.1.0",
     "del": "^2.2.2",
+    "esmify": "^2.1.1",
     "generator-browserify": "^0.4.1",
     "generator-karma": "^2.0.0",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.2",
     "gulp-clean-css": "^2.0.2",
     "gulp-concat": "^2.6.1",
+    "gulp-cssnano": "^2.1.3",
     "gulp-csso": "^4.0.1",
     "gulp-filenames": "^4.0.1",
     "gulp-filter": "^4.0.0",
@@ -75,7 +101,6 @@
     "gulp-if": "^2.0.0",
     "gulp-jshint": "^2.0.0",
     "gulp-less": "^3.0.5",
-    "gulp-merge": "^0.1.1",
     "gulp-minify-css": "^1.2.4",
     "gulp-preprocess": "^2.0.0",
     "gulp-prompt": "^1.2.0",
@@ -90,6 +115,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",
@@ -113,9 +139,10 @@
     "stream-concat": "^0.3.0",
     "stringify": "^5.0.0",
     "uglify-js": "^2.6.2",
-    "vinyl-buffer": "^1.0.0",
+    "vinyl-buffer": "^1.0.1",
     "vinyl-paths": "^2.1.0",
-    "vinyl-source-stream": "^1.1.0",
+    "vinyl-source-stream": "^2.0.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

src/app/core/i18n/i18n.service.js

@@ -1,79 +1,160 @@
+import ApplicationState from 'store/application-state';
 import ApplicationService from 'services/application';
 
-// main object content for i18n
-const plugins18nConfig = {};
+const {XHR} = require('core/utils/utils');
 
-function init(config) {
-  config.appLanguages.forEach(language =>{
-    plugins18nConfig[language] = {
-      plugins: {}
-    }
-  });
-  i18next
-  .use(i18nextXHRBackend)
-  .init({
-      lng: config.language,
-      ns: 'app',
-      fallbackLng: 'en',
-      resources: config.resources
-  });
-  return new Promise((resolve, reject) => {
-    jqueryI18next.init(i18next, $, {
-      tName: 't', // --> appends $.t = i18next.t
-      i18nName: 'i18n', // --> appends $.i18n = i18next
-      handleName: 'localize', // --> appends $(selector).localize(opts);
-      selectorAttr: 'data-i18n', // selector for translating elements
-      targetAttr: 'data-i18n-target', // element attribute to grab target element to translate (if diffrent then itself)
-      optionsAttr: 'data-i18n-options', // element attribute that contains options, will load/set if useOptionsAttr = true
-      useOptionsAttr: false, // see optionsAttr
-      parseDefaultValueFromContent: true // parses default values from content ele.val or ele.text
-    });
-    addI18n(plugins18nConfig);
-    resolve();
-  })
+const LOCALES_PATH = 'locales';
+
+// array of i18n plugin
+const plugins18n = [];
+
+/**
+ * @TODO
+ * @param config
+ * @returns {Promise<void>}
+ */
+async function init({language}={}) {
+  await getAppLanguageTranslation(language);
+  setLanguageTranslation(language);
+}
+
+/**
+ * @TODO
+ * @param language
+ * @returns {Promise<void>}
+ */
+async function getAppLanguageTranslation(language) {
+  // check if is empty object
+  if (Object.keys(ApplicationState.i18n.getLocaleMessage(language)).length === 0) {
+    const messageTranslationLanguageObject = await XHR.get({
+      url: `${ApplicationService.getConfig().urls.staticurl}client/${LOCALES_PATH}/${language}.json`,
+    })
+    //add plugin eventually
+    messageTranslationLanguageObject.plugins = {}
+    ApplicationState.i18n.mergeLocaleMessage(language, messageTranslationLanguageObject);
+  }
+}
 
+/**
+ *@since 3.9.0
+ * @param language
+ */
+function setLanguageTranslation(language) {
+  ApplicationState.i18n.locale = language;
 }
+
+/**
+ * @since 3.9.0
+ * @param language
+ * @returns {Promise<void>}
+ */
+async function getPluginLanguageTranslation({name, language}= {}){
+  try {
+    const pluginLanguageTranslation = await XHR.get({
+      url: `${ApplicationService.getConfig().urls.staticurl}${name}/${LOCALES_PATH}/${language}.json`,
+    })
+    addI18n({
+      [language]: {
+        plugins: {
+          [name]: pluginLanguageTranslation
+        }
+      }
+    });
+  } catch(err){
+    //@TODO handle possible error on loading plugin translation
+  }
+}
+
+/**
+ * @since 3.9.0
+ * @param language
+ * @returns {Promise<void>}
+ */
+
+/**
+ * @TODO
+ * @returns {string}
+ */
 const getAppLanguage = function() {
   const config = ApplicationService.getConfig();
   return config.user.i18n || "en";
 };
 
-
+/**
+ * @TODO
+ * @param text
+ * @returns {*}
+ */
 // function to translate
 const t = function(text) {
-  return i18next.t(text);
+  return ApplicationState.i18n.t(text);
 };
 
+/**
+ * @TODO
+ * @param text
+ * @returns {*}
+ */
 // function to translate plugins
 const tPlugin = function(text) {
-  return i18next.t(`plugins.${text}`);
+  return ApplicationState.i18n.t(`plugins.${text}`);
 };
 
+/**
+ * @TODO
+ * @param filter
+ * @returns {function(*): *}
+ */
 const tPrefix = function(filter) {
   return function(text) {
-    return i18next.t(`${filter}.${text}`);
+    return  ApplicationState.i18n.t(`${filter}.${text}`);
   }
 };
 
-const addI18nPlugin = function({name, config}) {
-  for (const language in config) {
-    const pluginLanguage = plugins18nConfig[language];
-    if (pluginLanguage) pluginLanguage.plugins[name] = config[language];
-  }
-  addI18n(plugins18nConfig);
+/**
+ * @TODO
+ * @param name
+ * @param config
+ */
+const addI18nPlugin = async function({name}) {
+  plugins18n.push(name);
+  await getPluginLanguageTranslation({
+    name,
+    language: ApplicationState.i18n.locale
+  });
 };
 
+/**
+ * @TODO
+ * @param i18nObject
+ */
 const addI18n = function(i18nObject) {
   for (const language in i18nObject) {
     const languageObj = i18nObject[language];
     for (const key in languageObj)  {
-      i18next.addResource(language, 'translation', key, languageObj[key])
+      ApplicationState.i18n.mergeLocaleMessage(language, {
+        [key]:  languageObj[key]
+      })
     }
   }
 };
 
-const changeLanguage = function(language){
-  i18next.changeLanguage(language);
+/**
+ * @TODO
+ * @param language
+ * @returns {Promise<void>}
+ */
+const changeLanguage = async function(language){
+  const promisesChangeLanguage = [getAppLanguageTranslation(language)];
+  plugins18n.forEach(name => {
+    promisesChangeLanguage.push(getPluginLanguageTranslation({
+      name,
+      language
+    }));
+  })
+  await Promise.allSettled(promisesChangeLanguage);
+  //set language
+  setLanguageTranslation(language);
 };
 
 module.exports = {

src/app/core/plugin/plugin.js

@@ -15,7 +15,7 @@ const Plugin = function({
     config = PluginsRegistry.getPluginConfig(name),
     service = null,
     dependencies = [],
-    i18n = null,
+    i18n = false,
     fontClasses = [],
     api = {}
   } = {}) {
@@ -68,7 +68,7 @@ proto.getConfig = function(name = this.name) {
 };
 
 proto.setLocale = function(i18n) {
-  if (i18n && this.name) addI18nPlugin({ name: this.name, config: i18n});
+  if (true === i18n && this.name) addI18nPlugin({ name: this.name});
 };
 
 proto.setService = function(service) {

src/app/core/utils/geo.js

@@ -2,6 +2,12 @@ import CONSTANT from 'app/constant';
 import MapLayersStoresRegistry from 'store/map-layers';
 import GUI from 'services/gui';
 
+/**
+ * @since 3.9.0
+ */
+const JSZip = require("jszip");
+const shp = require('./shp.min');
+
 const { toRawType, uniqueId } = require('core/utils/utils');
 const WMSLayer = require('core/layers/map/wmslayer');
 const Filter = require('core/layers/filter/filter');
@@ -840,7 +846,7 @@ const geoutils = {
         const promiseKmz = new Promise(async (resolve, reject) => {
           const zip = new JSZip();
           const buffer = await data.arrayBuffer(data);
-          zip.load(buffer);
+          await zip.loadAsync(buffer);
           const kmlFiles = zip.file(/.kml$/i);
           /**
            * @TODO handle multiple network links
@@ -850,7 +856,7 @@ const geoutils = {
           // get last kml file (when doc.kml file has a reference to kml inside another folder)
           const kmlFile = kmlFiles[kmlFiles.length - 1];
           if (kmlFile) {
-            data = kmlFile.asText();
+            data = await kmlFile.async("string");
             resolve(createVectorLayer(new ol.format.KML({ extractStyles: false }), data, "EPSG:4326"));
           } else {
             reject();

src/app/core/utils/parsers.js

@@ -4,6 +4,12 @@ const { toRawType } = require('core/utils/utils');
 const Feature = require('core/layers/features/feature');
 const { t } = require('core/i18n/i18n.service');
 const olutils = require('core/utils/ol');
+
+/*
+* @since 3.9.0
+ */
+const X2JS = require('./xml2json.g3w.min');
+
 const WORD_NUMERIC_FIELD_ESCAPE = 'GIS3W_ESCAPE_NUMERIC_FIELD_';
 
 /**

src/app/gui/component/component.js

@@ -271,7 +271,6 @@ proto.mount = function(parent, append) {
     $(parent).append(iCinstance.$el);
   } else this.internalComponent.$mount(parent);
   this.internalComponent.$nextTick(() => {
-    $(parent).localize();
     this.emit('ready');
     d.resolve(true);
   });