Giter Site home page Giter Site logo

linagora / esn-frontend-common-libs Goto Github PK

View Code? Open in Web Editor NEW
4.0 4.0 12.0 20.1 MB

Common ground for OpenPaaS frontend (https://open-paas.org)

License: Other

HTML 19.68% CSS 9.91% JavaScript 53.78% C# 0.02% Java 0.12% Batchfile 0.01% Ruby 0.01% PowerShell 0.01% CoffeeScript 0.18% Dockerfile 0.01% Pug 1.41% Less 13.51% SCSS 0.52% ASP.NET 0.01% Sass 0.77% Stylus 0.06%

esn-frontend-common-libs's People

Contributors

alagane avatar asmanode avatar billyfrost418 avatar fabienmoyon avatar michaelbailly avatar pbson avatar piavgh avatar ppppbn avatar renaudboyer avatar rezk2ll avatar tanandy avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

chamerling ppppbn rezk2ll asmanode michaelbailly itswillta billyfrost418 pbson fabienmoyon alagane renaudboyer oubchid

esn-frontend-common-libs's Issues

Misspelling id #spash of loading animation div

The div responsible for loading animation in src/app/app-loading.pug has a misspelling id. It should be splash instead of spash

List of SPAs:

Have a common AngularJS factory for esnApiClient

We need to have a common place to avoid initializing esnApiClient mutiple times in our code. Something like this will be cool:

const Client = require('esn-api-client/src/Client').default;

angular.module('esn.api-client', [])
  .factory('esnApiClient', function($q, $window) {
    return new Client({ baseURL: $window.location.origin, customPromise: $q });
  });

And then in our AngularJS code we just use it as a normal AngularJS dependency, without having to constructing Client multiple times.

embed attendee templates

Those templates are requiring when we do a lokpu on an "auto complete" style field. Seen it:

  • esn-frontend-inbox, when starting typing letters in "To", "Cc" or "Bcc" fields
  • esn-frontend-calendar, when typing letters in the event creating form, attendee field

/images/white-logo.svg 404 not found in production mode

Screenshot 2020-08-26 11:04:42

You can try to replicate this issue by running npm run build:prod and serve the dist folder using a custom webserver (maybe Nginx or https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb)

Don't use npm run serve:prod because it will use webpack-dev-server. The webpack server has a proxy to our backend so that it can get the .svg)

It causes the UI to be broken.
This image needs to be fetched from backend because if a user changes theme, it will also be updated

Update code to use native webpack require

When the project was started 3 weeks ago, the webpack configuration has been adapted to be compatible with the codebase.

Now, the codebase can be modified to circumvent some webpack tricks, and use native require() calls. In particular, the following webpack configuration lines:

      /*
      for esn-frontend-common-libs

      can be removed after using a require for emailAddresses instead of a global $window.emailAddresses

        angular.module('esn.email-addresses-wrapper', [])

        .factory('emailAddresses', function($window) {
          return $window.emailAddresses;
        });

      */
      {
        test: require.resolve('email-addresses'),
        loader: 'expose-loader',
        options: {
          exposes: 'emailAddresses',
        },
      },
      /*
      for esn-frontend-common-libs

      can be removed after using a require for autosize instead of a global $window.autosize

      angular.module('esn.form.helper')
        .factory('autosize', function($window) {
            return $window.autosize;
          })

      */
      {
        test: require.resolve('autosize'),
        loader: 'expose-loader',
        options: {
          exposes: 'autosize',
        },
      },
      /*
      for esn-frontend-common-libs

      can be removed after using a require for Autolinker instead of a global $window.Autolinker

      angular.module('esn.autolinker-wrapper', [])

        .factory('autolinker', function($window) {
          return $window.Autolinker;
        });

      */
      {
        test: require.resolve(commonLibsPath + '/src/frontend/components/Autolinker.js/dist/Autolinker.js'),
        loader: 'expose-loader',
        options: {
          exposes: 'Autolinker',
        },
      },
      /*
      for angular-jstz in esn-frontend-common-libs
      */
      {
        test: require.resolve(commonLibsPath + '/src/frontend/components/jstzdetect/jstz.js'),
        loader: 'expose-loader',
        options: {
          exposes: [
            "jstz"
          ],
        },
      },

could be removed by setting up proper requires at the javascript code level.

Update restangular

This is the very first commit of an effort to upgrade lodash to the latest version.

Lodash had an alias for the includes() function, that was called contains(). They removed the alias in the latest versions.

Restangular used contains (mgonto/restangular#1298) , and updated their code in version 1.5.2.

Makes esnI18nService.translate service work with interpolation

Context:

To fix translation for templates, we updated translations to:

Address book %s will be deleted along with its contacts.: "Address book {{ addressbookDisplayShell.displayName }} will be deleted along with its contacts."

and we updated template to use: p {{ 'Address book %s will be deleted along with its contacts.' | translate:$ctrl }}

To do this, we do not use i18nInterpolator that detects %s and replace them with proper values.

Issue

Without i18nInterpolator, our syntax for example esnI18nService.translate('%s items', $dragData.length); does not work because translator does not understand %s anymore.

We use this syntax in a ton of places in SPAs.

Solution

Consistent the input of esnI18nService.translate and angular translate filter, the second param (if present) is an object that contains pairs of key + value

  • Modify esnI18nService.translate
  • Fix in all SPAs to adapt new syntax of the service => Created tickets in other repositories to do this
  • Remove the esnI18nInterpolator factory as it is useless now

Bring back missing tests

There used to be *.spec.js files alongside the JS files. Now I can't find a single one. We need to bring them back.

Flash of untranslated "Application is loading..." text

How to reproduce

  • Change your language to something other than English.
  • Reload your SPA (F5).
  • You can see that the Application is loading... text is displayed in English and then after a few seconds it flashes to your selected language.

Suggested solution

We can have a loading effect together with the SPA's icon, and there'll be no need for the Application is loading... text anymore.

Can not build applications

The file esn-frontend-common-libs/src/frontend/js/modules/file.js exports an await function in strict mode: Uglifying source does not work as is.

Several solutions:

  1. Remove strict mode
  2. Rename the function and everywhere it is used
  3. Find webpack plugins/options

Remove old & unused Angular modules

Here is the list of AngularJs modules we want to remove:

frontend/js/modules/activitystream.js frontend/js/modules/activitystream/* frontend/js/modules/activitystreams-tracker.js
frontend/js/modules/easyrtc.js
frontend/js/modules/feedback.js
frontend/js/modules/like.js
frontend/js/modules/message.js
frontend/js/modules/poll.js
frontend/js/modules/resource-link.js
frontend/js/modules/twitter.js
frontend/js/modules/follow
frontend/js/modules/invitation.js
modules/linagora.esn.signup
modules/linagora.esn.signup.local
modules/linagora.esn.contact.import.twitter
modules/linagora.esn.digest.daily

For each of those modules:

  1. check that no code path is depending on them
  2. remove them if no code path is depending on them

Warning: there is activitystream related routing in src/frontend/js/esn/app.js.

Update dropdown profile-menu

CURRENT

Capture d’écran de 2020-08-26 15-56-53

TO DO

Now Account and Profile are merge so we need to update dropdown profile-menu to only have your account

Capture d’écran de 2020-08-26 15-55-04

material design icons are not displayed in dropdown

CURRENT

  1. In the sidebar, dropdown settings-overlay component don't display material design icons

Capture d’écran de 2020-08-25 15-25-51

  1. In the header, dropdown profile-menu component don't display material design icons

Capture d’écran de 2020-08-27 11-40-57

EXPECTED

Capture d’écran de 2020-08-26 15-56-53

Capture d’écran de 2020-08-25 15-28-02

TO DO

  • display material design icons

Remove search provider dropdown

CURRENT

Before the split, the global search was able to provide a search provider per module on the platform.

Capture d’écran de 2020-08-27 14-38-33

EXPECTED

Now each module is displayed on this own tab so we don't need anymore to be able to chosse the search provider. We can only search in to the module displayed.

Capture d’écran de 2020-08-27 14-38-52

TO DO

  • Remove All search provider

  • Remove on each module the dropdown provider

Move Webpack common config to `esn-frontend-common-libs`

Move Webpack common config of every SPA to esn-frontend-common-libs.

List of SPAs:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.