Historique de la page

Modifications Client

Passage à Ionic 8

Pour le passage à Ionic 8 de nouvelles dépendances ont été installées. Pensez donc à mettre à jour vos paquets :

$> cd dev/user-frontend-ionic
$> npm ci

Modifications à prendre en compte dans

...

le fichier angular.json

Vérification des mises à jour du client

Il est désormais possible d'activer un module qui permet de récupérer les informations de mises Pour activer le module de vérification de la mise à jour du client auprès du backend, et de proposer (ou imposer) la mise à jour à l'utilisateur.

...

...

Pour activer le module, ajouter simplement AppUpdateModule dans la liste des enabledModules (en n'oubliant pas l'import du module en haut du fichier)

enabledModules: [
  AppUpdateModule,
  AuthModule,
  ...
]

Personnaliser l'affichage de la widget Calendar

Il est désormais possible de choisir entre 2 modes d'affichage pour la widget Calendar en page d'accueil

...

...

, il est nécessaire d'ajouter sa configuration dans le fichier angular.json, 

  },
  "app-update": {
    "projectType": "library",
    "root": "projects/app-update",
    "sourceRoot": "projects/app-update/src",
    "prefix": "lib",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:ng-packagr",
        "options": {
          "project": "projects/app-update/ng-package.json"
        },
        "configurations": {
          "production": {
            "tsConfig": "projects/app-update/tsconfig.lib.prod.json"
          },
          "development": {
            "tsConfig

Pour prendre en compte cette nouvelle fonctionnalité, il est nécessaire d'ajouter la variable de configuration display au module CalendarModule :

CalendarModule.forRoot({
  numberOfEventsLimit: 3,
  display: 'list',
}),

Personnaliser l'affichage de la widget Schedule

Il est désormais possible de choisir entre 2 modes d'affichage pour la widget Schedule en page d'accueil

...

...

Pour prendre en compte cette nouvelle fonctionnalité, il est nécessaire d'ajouter la variable de configuration display au module ScheduleModule :

ScheduleModule.forRoot({
  nextEventsWidget: {
    numberOfEventsLimit: 2,
    numberOfDaysLimit: 7,
    display: 'slider|list'
  },
  previousWeeksInCache: 1,
  nextWeeksInCache: 2,
  managerRoles: ['schedule-manager', 'multi-admin']
}),

Modifications à prendre en compte dans le fichier angular.json

Vérification des mises à jour du client

Pour activer le module de vérification de la mise à jour du client, il est nécessaire d'ajouter sa configuration dans le fichier angular.json, 

  },
  "app-update": {
    "projectType": "library",
    "root": "projects/app-update",
/tsconfig.lib.json"
          "sourceRoot": "projects/app-update/src",
}
        },
        "prefixdefaultConfiguration": "libproduction",
    "architect": {  },
      "buildtest": {
        "builder": "@angular-devkit/build-angular:ng-packagrkarma",
        "options": {
          "projectmain": "projects/app-update/src/ng-packagetest.jsonts",
        }  "tsConfig": "projects/app-update/tsconfig.spec.json",
          "configurationskarmaConfig": {"projects/app-update/karma.conf.js"
        }
      },
      "productionlint": {
            "tsConfigbuilder": "projects/app@angular-update/tsconfig.lib.prod.json"eslint/builder:lint",
          },"options": {
          "developmentlintFilePatterns": {[
            "tsConfig": "projects/app-update/tsconfig.lib.json"auth/**/*.ts",
          }
  "projects/auth/**/*.html"
      },
    ]
    "defaultConfiguration": "production"
      },
      "test": {}
        "builder": "@angular-devkit/build-angular:karma",
        "options": {
          "main": "projects/app-update/src/test.ts",
          "tsConfig": "projects/app-update/tsconfig.spec.json",
          "karmaConfig": "projects/app-update/karma.conf.js"
        }
      },
      "lint": {
        "builder": "@angular-eslint/builder:lint",
        "options": {
          "lintFilePatterns": [
            "projects/auth/**/*.ts",
            "projects/auth/**/*.html"
          ]
        }
      }
    }
  }}
  },

Reconstruction des modules Angular

Pour prendre en compte le nouveau module app-update, mais également les options d'affichage dans les widgets calendar et schedule, il est nécessaire de relancer le build des modules concernés :

$> npm run module:build-all

Modifications à prendre en compte dans les fichiers environment*.ts

Vérification des mises à jour du client

Il est désormais possible d'activer un module qui permet de récupérer les informations de mises à jour du client auprès du backend, et de proposer (ou imposer) la mise à jour à l'utilisateur.

Image Added

Image Added

Pour activer le module, ajouter simplement AppUpdateModule dans la liste des enabledModules (en n'oubliant pas l'import du module en haut du fichier)

enabledModules: [
  AppUpdateModule,
  AuthModule,
  ...
]

Personnaliser l'affichage de la widget Calendar

Il est désormais possible de choisir entre 2 modes d'affichage pour la widget Calendar en page d'accueil

Pour prendre en compte cette nouvelle fonctionnalité, il est nécessaire d'ajouter la variable de configuration display au module CalendarModule :

CalendarModule.forRoot({
  numberOfEventsLimit: 3,
  display: 'list',
}),

Personnaliser l'affichage de la widget Schedule

Il est désormais possible de choisir entre 2 modes d'affichage pour la widget Schedule en page d'accueil

Pour prendre en compte cette nouvelle fonctionnalité, il est nécessaire d'ajouter la variable de configuration display au module ScheduleModule :

ScheduleModule.forRoot({
  nextEventsWidget: {
    numberOfEventsLimit: 2,
    numberOfDaysLimit: 7,
    display: 'slider|list'
  },
  previousWeeksInCache: 1,
  nextWeeksInCache: 2,
  managerRoles: ['schedule-manager', 'multi-admin']
}),

Modifications à prendre en compte dans les fichiers de theming

...

Dans le fichier widget-external-feature.component.scss, ajoutez le bloc suivant au sein du bloc .feature-title :

app-custom-icon {
  vertical-align: text-top;
}

...

ndar.calendar-list-style {

  display: block;

  .ion-padding {
    padding-top: 5px !important;
  }

  .events-container {
    padding: 0;
  }

  .event {
    align-items: center;
    padding: 0.5rem 0;
  }

  hr {
    border-top: 2px dashed var(--ion-color-primary-contrast);
    margin: 0;
  }

  .event-part ion-text {
    display: block
  }

  .event-part-date {
    flex-grow: 1;
    text-align: center;
    border-right: 5px solid var(--ion-color-primary-contrast);
    margin-right: 5px;
  }

  .event-part-info {
    flex-grow: 3;
  }

  .light-font-color{
    color: var(--app-font-color-for-dark-background-from-cms) !important;

    hr {
      border-top: 2px dashed var(--app-font-color-for-dark-background-from-cms);
      margin: 0;
    }

    .event-part-date {
      border-right: 5px solid var(--app-font-color-for-dark-background-from-cms);
    }
  }

  .dark-font-color{
    color: var(--app-font-color-for-light-background-from-cms) !important;

    hr {
      border-top: 2px dashed var(--app-font-color-for-light-background-from-cms);
    }

    .event-part-date {
      border-right: 5px solid var(--app-font-color-for-light-background-from-cms);
    }
  }

}

.calendar-slider-style {
  display: block;

  ion-card {
    scroll-snap-align: center;
  }

  ion-card.slider-theme-color {
    box-shadow: var(--app-border-no-box-shadow);
    //border: var(--app-border-width-7) solid var(--app-border-color-primary);
    background-color: var(--ion-color-tertiary);
  }

  ion-card-content {
    padding: 0.7rem 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .events-container {
    padding: .5rem 0 0;
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    grid-template-columns: 10px;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;

    &::-webkit-scrollbar {
      display: none;
    }

    &::before,
    &::after {
      content: '';
      width: 10px;
    }

    .event-day-hour {
      display: flex;
      flex-direction: row;
      border-left-width: 4px;
      border-left-style: solid;
      align-items: center;
      flex-wrap: nowrap;
      border-color: var(--ion-color-secondary);

      .hour {
        padding-left: 1rem;
        display: block;
      }

      .day {
        padding-left: 1rem;
        display: block;

        ion-text {
          display: block;
        }
      }
    }
  }

  .card-labels {
    margin-right: 0.6rem;
  }

  .card-labels-icons {
    margin-right: 0.3rem;
  }

  .event-label {
    padding: 1rem 1rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .event-additional {
    display: flex;
    padding: 0.7rem 0.5rem 0;
    justify-content: space-evenly;
    flex-wrap: wrap;
    flex-grow: 2;
    align-items: center;

    ion-row:last-child {
      margin-right: 0;
    }
  }

  .slider-font-color{
    color: var(--app-font-fix-light-color) !important;
  }

  .light-font-color{
    color: var(--app-font-color-for-dark-background-from-cms) !important;
  }

  .dark-font-color{
    color: var(--app-font-color-for-light-background-from-cms) !important;
  }

}

...

ion-input {
  --highlight-color: var(--app-font-color-primary);
}

dev/user-frontend-ionic/src/theme/app-theme-dist/styles/static-pages/static-pages-widget.component.scss

Un nouveau bloc app-custom-icon a été ajouté

...

{
  "MANDATORY_UPDATE_ALERT": {
    "HEADER": "Update Required",
    "MESSAGE": "A new version of the application is available and must be installed to continue.",
    "UPDATE_NOW": "Update Now"
  },
  "OPTIONAL{
  "MANDATORY_UPDATE_ALERT": {
    "HEADER": "Update RequiredAvailable",
    "MESSAGE": "A new version of the application is available and must be installed to continue.. Would you like to update now?",
    "UPDATE_NOW": "Update Now",
    "UPDATE_NOWLATER": "Update NowLater"
  },}
}

{
  "OPTIONALMANDATORY_UPDATE_ALERT": {
    "HEADER": "Update AvailableMise à jour requise",
    "MESSAGE": "AUne newnouvelle version ofde the application is available. Would you like to update now?",
    "UPDATE_NOW": "Update Nowl’application est disponible et doit être installée pour continuer.",
    "UPDATE_LATERNOW": "LaterMettre à jour"
  }
}

{,
  "MANDATORYOPTIONAL_UPDATE_ALERT": {
    "HEADER": "Mise à jour requisedisponible",
    "MESSAGE": "Une nouvelle version de l’application est disponible. et doit être installée pour continuer.Souhaitez-vous la mettre à jour maintenant ?",
    "UPDATE_NOW": "Mettre à jour",
  },
  "OPTIONAL_UPDATE_ALERTLATER": "Plus {tard"
  }
}

Modifications Backend

main

Si vous avez choisi d'activer le module qui permet de récupérer les informations de mises à jour du client auprès du backend, il vous faudra alors ajouter un fichier client-infos.json à la racine du microservice.

{
  "HEADERstoreVersion": "Mise à jour disponible1.0.1",
    "MESSAGEminVersionRequired": "Une nouvelle version de l’application est disponible. Souhaitez-vous la mettre à jour maintenant ?1.0.0",
    "UPDATE_NOWplayStoreUrl": "Mettre à jourhttps://play.google.com/store/apps/details?id=org.monUniversite.monApplication",
    "UPDATE_LATERappStoreUrl": "Plus tard"
  }
}

Modifications Backend

main

...

https://apps.apple.com/fr/app/monUniversite/idxxxxxxxxx"
}

• storeVersion : la version actuellement disponible sur les stores
• minVersionRequired : la version minimum du client requise par les utilisateurs garante du bon fonctionnement avec le backend actuellement déployé
• playStoreUrl : l'url de l'application cliente sur le Play Store de Google
• appStoreUrl : l'url de l'application cliente sur l'App Store d'Apple

µservice Map

Le fichier dev/user-backend-nest/microservices/map/src/map/map-data.json contenait les informations sur les POI de l'Université de Lorraine.
Le fichier a donc été ajouté au .gitignore et un nouveau fichier générique map-data.json.dist a été ajouté à la place.

...