Historique de la page

Remarque
Documentation en cours de rédaction

Sommaire

maxLevel	3
minLevel	2

Modifications Client

Passage à Ionic 8

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

Bloc de code
$> cd dev/user-frontend-ionic $> npm ci

Modifications à prendre en compte dans

...

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

...

Image Removed

Vue 'slider'

...

Image Removed

Vue 'list'

le fichier angular.json

Vérification des mises à jour du client

Pour activer le module de vérification de la mise à jour du clientPour prendre en compte cette nouvelle fonctionnalité, il est nécessaire d'ajouter la variable de configuration display au module ScheduleModule :sa configuration dans le fichier angular.json,

Bloc de code

firstline	216

Bloc de code

firstline	114
title	dev/user-frontend-ionic/src/environments/environment.ts
linenumbers	true
angular.json

  },
  "app-update"ScheduleModule.forRoot({
  nextEventsWidget: {
    numberOfEventsLimit"projectType": 2"library",
    numberOfDaysLimit"root": 7"projects/app-update",
    display: 'slider|list'
  },
  previousWeeksInCache: 1,
  nextWeeksInCache: 2,
  managerRoles: ['schedule-manager', 'multi-admin']
}),

Modifications à prendre en compte dans les fichiers de theming

Prise en compte des images SVG dans les Widgets

Il est désormais possible d'ajouter une image au format SVG à un widget au travers de l'interface de saisie de Directus.

Pour que celle-ci s'affiche correctement, il est nécessaire de modifier le CSS

Dans le fichier widget-external-feature.component.scss, ajoutez le bloc suivant :

"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": "projects/app-update/tsconfig.lib.json"
          }
        },
        "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 :

Bloc de code
$> 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

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

Bloc de code

language	js
firstline	83

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

Image Added

Vue 'slider'

Image Added

Vue 'list'

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

Bloc de code

firstline	84
title	dev/user-frontend-ionic/src/environments/environment.ts
linenumbers	true

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

Image Added

Vue 'slider'

Image Added

Vue 'list'

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

Bloc de code

firstline	114
title	dev/user-frontend-ionic/src/environments/environment.ts
linenumbers	true

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

Prise en compte des images SVG dans les Widgets

Il est désormais possible d'ajouter une image au format SVG à un widget au travers de l'interface de saisie de Directus.

Pour que celle-ci s'affiche correctement, il est nécessaire de modifier le CSS

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

Bloc de code

firstline	63
title	dev/user-frontend-ionic/src/theme/app-theme/styles/features/widget-external-feature.component.scss
linenumbers	true

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

Dans le fichier widget-internal-feature.component.scss, remplacez le bloc .feature-title comme suit :

Bloc de code

firstline	57
title	dev/user-frontend-ionic/src/theme/app-theme/styles/features/widget-internal-feature.component.scss
linenumbers	true

.feature-title {
  padding: 1rem 1rem 0.2rem;

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

Personnaliser l'affichage de la widget Calendar

Le fichier dev/user-frontend-ionic/src/theme/app-theme-dist/styles/calendar/calendar.component.scss a été revu complètement pour gérer 2 blocs .calendar-list-style ou .calendar-slider-style pour pouvoir prendre en compte les 2 types d'affichage possible pour la widget

Bloc de code

language	css
title	dev/user-frontend-ionic/src/theme/app-theme/styles/calendar/calendar.component.scss
linenumbers	true

.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;
  }

}

Personnaliser l'affichage de la widget Schedule

Le fichier dev/user-frontend-ionic/src/theme/app-theme-dist/styles/schedule/next-events.component.scss a été revu complètement pour gérer 2 blocs .next-events-list-style ou .next-events-slider-style pour pouvoir prendre en compte les 2 types d'affichage possible pour la widget

Bloc de code

language	css
title	dev/user-frontend-ionic/src/theme/app-theme-dist/styles/schedule/next-events.component.scss
linenumbers	true
collapse	true

.next-events-list-style {

  ion-card {
    overflow: visible;
    box-shadow: var(--app-border-no-box-shadow);
    border-radius: var(--app-border-no-radius);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: transparent;
  }

  .last-card {
    padding-bottom: 0.8rem !important;
  }

  .events-container {
    padding-left: 1rem !important;
    padding-bottom: 0 !important;
  }

  .dashed-line{
    position: absolute;
    top: 0.77rem;
    left: 0;
    width: 2rem;
    height: 100%;
    background-image: linear-gradient(rgb(255, 255, 255) 43%, rgba(255, 255, 255, 0) 0%);
    background-position: left;
    background-size: 0.13rem 0.9rem;
    background-repeat: repeat-y;
    overflow: visible;
    z-index: 10 !important;
  }

  .event-day {
    position: relative;
    padding-bottom: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-left: 0 !important;
    z-index: 12;
  }

  ion-card-header {
    padding-top: 0;
    padding-left: 1.2rem;
    padding-bottom: 0;
  }

  ion-card-content {
    padding-left: 2.3rem;
  }

  .circle-top-left {
    position: absolute;
    top: 0.30rem;
    left: -0.18rem;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--ion-color-dark-contrast);
    border-radius: 50%;
  }

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

  .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;
  }

}

.next-events-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;
  }

  .empty-container {
    padding-left: 1rem !important;
    padding-bottom: 0 !important;
  }

  .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;

      .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.2rem 0.5rem 0.2rem 2rem;
    justify-content: flex-start;
    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;
  }

}

Décalage du bouton 'Lire plus' sur iOS

Il existait un décalage sur le bouton 'Lire plus' sur les flux d'actualités sur iOS. Pour corriger ce décalage le CSS a été revu.

dev/user-frontend-ionic/src/theme/app-theme-dist/styles/rss/latest-news.component.scss

Bloc de code

language	css
firstline	51

Bloc de code

firstline	63
title	dev/user-frontend-ionic/src/theme/app-theme/styles/featuresrss/widgetlatest-external-featurenews.component.scss
linenumbers	true

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

Dans le fichier widget-internal-feature.component.scss, remplacez le bloc .feature-title comme suit :

min-height: auto;
  margin: 0 0 0.5rem;
  --padding-end: 0.7rem;
}

dev/user-frontend-ionic/src/theme/app-theme-dist/styles/rss/rss.page.scss

Bloc de code

language	css
firstline	80

Bloc de code

firstline	57
title	dev/user-frontend-ionic/src/theme/app-theme/styles/features/widget-internal-feature.componentrss/rss.page.scss
linenumbers	true

.featurelink-titlebutton {
  paddingmin-height: 1rem 1rem 0.2rem;
auto;
  app-custom-icon {
    vertical-align: text-top;
  }
}

Personnaliser l'affichage de la widget Schedule

margin: 0 0 0.5rem;
}

Migration vers Ionic 8

Certains composants ont évolué avec la nouvelle version 8 d'Ionic. Les styles ont donc dû être adaptés pour que l'affichage reste inchangé au niveau de l'interface.

Le fichier dev/user-frontend-ionic/src/theme/app-theme-dist/styles/scheduleauth/next-eventslogin.component.scss a été revu complètement pour gérer 2 blocs .next-events-list-style ou .next-events-slider-style pour pouvoir prendre en compte les 2 types d'affichage possible pour la widgetpage.scss

Les blocs .input-label, .item-has-value .label-floating.sc-ion-label-md-h et ion-item ont été retirés au profit d'un seul bloc ion-input

Bloc de code

collapse

language	css
firstline	40
title	dev/user-frontend-ionic/src/theme/app-theme-dist/styles/scheduleauth/next-eventslogin.componentpage.scss
linenumbers	true	true

.next-events-list-style {

  ion-carditem {
    overflow--background: visibletransparent;
}

ion-input {
   box-shadow--border-color: var(--appion-bordercolor-nomedium-boxlight-shadowtint);
    border-radius--highlight-color: var(--app-borderfont-no-radius);
    margin-top: 0 !important;
    margin-bottom: 0 !importantcolor-primary);
    background: transparent;
  }

  .last-card {
    padding-bottom: 0.8rem !important;
  }

  .events-container {
    padding-left: 1rem !important;
    padding-bottom: 0 !important;
  }

  .dashed-line{
    position: absolute;
    top: 0.77rem;
    left: 0;
    width: 2rem;
    height: 100%;
    background-image: linear-gradient(rgb(255, 255, 255) 43%, rgba(255, 255, 255, 0) 0%);
    background-position: left;
    background-size: 0.13rem 0.9rem;
    background-repeat: repeat-y;
    overflow: visible;
    z-index: 10 !important;
  }

  .event-day {
    position: relative;
    padding-bottom: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-left: 0 !important;
    z-index: 12;
  }

  ion-card-header {
    padding-top: 0;
    padding-left: 1.2rem;
    padding-bottom: 0;
  }

  ion-card-content {
    padding-left: 2.3rem;
  }

  .circle-top-left {
    position: absolute;
    top: 0.30rem;
    left: -0.18rem;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--ion-color-dark-contrast);
    border-radius: 50%;
  }

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

  .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;
  }

}

.next-events-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;
  }

  .empty-container {
    padding-left: 1rem !important;
    padding-bottom: 0 !important;
  }

  .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;

      .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.2rem 0.5rem 0.2rem 2rem;
    justify-content: flex-start;
    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;
  }

}

Modifications à prendre en compte dans les fichiers de traduction

Personnaliser l'affichage de la widget Schedule

Bloc de code

firstline	44
title	dev/user-frontend-ionic/src/theme/app-theme-dist/i18n/schedule/en.json

"NEXT_EVENTS": {
  "NO_EVENTS": "No courses soon",
  "LIMIT_TEACHERS": "others"
}

Bloc de code

firstline	44
title	dev/user-frontend-ionic/src/theme/app-theme-dist/i18n/schedule/en.json

"NEXT_EVENTS": {
  "NO_EVENTS": "Pas de cours prochainement"
  "LIMIT_TEACHERS": "autres"
}

Modifications Backend

µservice Map

=> Suppression du fichier dev/user-backend-nest/microservices/map/src/map/map-data.json du repository et ajout de ce dernier au fichier .gitignore

Ajout d'un fichier .dist avec des données épurées

--highlight-color-valid: var(--app-font-color-primary);
}
//...

dev/user-frontend-ionic/src/theme/app-theme-dist/styles/chatbot/chatbot.page.scss

La propriété caret-color a été retirée du bloc ion-input.input au profit de deux nouvelles : --highlight-color et color

Bloc de code

language	css
firstline	116
title	dev/user-frontend-ionic/src/theme/app-theme/styles/chatbot/chatbot.page.scss
linenumbers	true

ion-input.input {
  --padding-start: 0.625rem;
  border: none;
  border-radius: 0.15rem;
  --ion-item-background: var(--app-color-component-background-primary);
  background-color: var(--app-color-component-background-primary);
  --highlight-color: var(--app-font-color-primary);
  color: var(--app-font-color-primary) !important;
}
//...

dev/user-frontend-ionic/src/theme/app-theme-dist/styles/contact-us/contact-us.page.scss

Les blocs .input-label et .item-has-value .label-floating.sc-ion-label-md-h ont été retirés au profit d'un seul bloc ion-input (le doublon du bloc ion-item a été corrigé au passage)

Bloc de code

language	css
firstline	48
title	dev/user-frontend-ionic/src/theme/app-theme/styles/contact-us/contact-us.page.scss
linenumbers	true

ion-item {
  --background: transparent;
  --border-color: var(--ion-color-medium-light-tint);
}

ion-list {
  background: transparent;
}

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

dev/user-frontend-ionic/src/theme/app-theme-dist/styles/menu/burger-menu.page.scss

Un nouveau bloc app-custom-icon a été ajouté au sein du bloc .menu-section

Bloc de code

language	css
firstline	47
title	dev/user-frontend-ionic/src/theme/app-theme/styles/menu/burger-menu.page.scss
linenumbers	true

.menu-section {
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: var(--app-border-width-7) solid var(--app-font-color-primary);

  &:last-of-type {
    border-bottom: none;
  }

  &:nth-of-type(1) {
    padding-top: 0 !important;
  }

  ion-item {
    padding-left: 0.7rem;

    ion-icon {
      color: var(--ion-color-font-primary);
    }
  }

  app-custom-icon {
    // apply the same style as ion-icon
    margin-inline-end: 32px;
  }
}
//...

dev/user-frontend-ionic/src/theme/app-theme-dist/styles/schedule/select-user.component.scss

Un nouveau bloc ion-input a été ajouté

Bloc de code

language	css
firstline	40
title	dev/user-frontend-ionic/src/theme/app-theme/styles/schedule/select-user.component.scss
linenumbers	true

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é

Bloc de code

language	css
firstline	40
title	dev/user-frontend-ionic/src/theme/app-theme/styles/static-pages/static-pages-widget.component.scss
linenumbers	true

ion-item {
  padding-left: 0.7rem;
}

app-custom-icon {
  // apply the same style as ion-icon
  margin-inline-end: 32px;
}

Modifications à prendre en compte dans les fichiers de traduction

Personnaliser l'affichage de la widget Schedule

Bloc de code

firstline	44
title	dev/user-frontend-ionic/src/theme/app-theme-dist/i18n/schedule/en.json

"NEXT_EVENTS": {
  "NO_EVENTS": "No courses soon",
  "LIMIT_TEACHERS": "others"
}

Bloc de code

firstline	44
title	dev/user-frontend-ionic/src/theme/app-theme-dist/i18n/schedule/en.json

"NEXT_EVENTS": {
  "NO_EVENTS": "Pas de cours prochainement"
  "LIMIT_TEACHERS": "autres"
}

Utiliser la nouvelle fonctionnalité de détection des mises à jour du client

Le module qui vérifie les mises à jour du client disponibles affiche des alertes. Il est possible de traduire le texte de ces alertes.

Pour bénéficier des traductions de ces alertes copier le dossier src/theme/app-theme-dist/i18n/app-update/ dans le répertoire i18n de votre application (par défaut src/theme/app-theme/i18n/)

Bloc de code

title	dev/user-frontend-ionic/src/theme/app-theme/i18n/app-update/en.json

{
  "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_UPDATE_ALERT": {
    "HEADER": "Update Available",
    "MESSAGE": "A new version of the application is available. Would you like to update now?",
    "UPDATE_NOW": "Update Now",
    "UPDATE_LATER": "Later"
  }
}

Bloc de code

title	dev/user-frontend-ionic/src/theme/app-theme/i18n/app-update/fr.json

{
  "MANDATORY_UPDATE_ALERT": {
    "HEADER": "Mise à jour requise",
    "MESSAGE": "Une nouvelle version de l’application est disponible et doit être installée pour continuer.",
    "UPDATE_NOW": "Mettre à jour"
  },
  "OPTIONAL_UPDATE_ALERT": {
    "HEADER": "Mise à jour disponible",
    "MESSAGE": "Une nouvelle version de l’application est disponible. Souhaitez-vous la mettre à jour maintenant ?",
    "UPDATE_NOW": "Mettre à jour",
    "UPDATE_LATER": "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.

Bloc de code

title	client-infos.json

{
  "storeVersion": "1.0.1",
  "minVersionRequired": "1.0.0",
  "playStoreUrl": "https://play.google.com/store/apps/details?id=org.monUniversite.monApplication",
  "appStoreUrl": "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.

Avertissement
Du fait de l'ajout du fichier dans le .gitignore, ce dernier se retrouve supprimé au moment du pull GIT. Pensez donc bien à sauvegarder votre fichier map-data.json avant de faire une pull request sur votre branche

Modifications Serveur Mocks

Dans le cadre d'une installation hors localhost (ex: serveur de demo), une variable d'environnement PUBLIC_URL a été ajoutée au fichier .env, pour permettre de préciser l'url vers les sources statiques du serveur

Bloc de code

firstline	2
title	dev/user-backend-mocks/.env
linenumbers	true

PUBLIC_URL=http://localhost:3099/static

Avertissement

Entraine une suppression du fichier en local au moment de la pull request => Bien enregistrer les données au préalable

Arborescence des pages

Comparaison des versions

Ancienne version 5

Nouvelle version Actuel

Légende

Modifications Client

Passage à Ionic 8

Modifications à prendre en compte dans

Personnaliser l'affichage de la widget Schedule

le fichier angular.json

Vérification des mises à jour du client

Modifications à prendre en compte dans les fichiers de theming

Prise en compte des images SVG dans les Widgets

Reconstruction des modules Angular

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

Vérification des mises à jour du client

Personnaliser l'affichage de la widget Calendar

Personnaliser l'affichage de la widget Schedule

Modifications à prendre en compte dans les fichiers de theming

Prise en compte des images SVG dans les Widgets

Personnaliser l'affichage de la widget Calendar

Personnaliser l'affichage de la widget Schedule

Décalage du bouton 'Lire plus' sur iOS

Personnaliser l'affichage de la widget Schedule

Migration vers Ionic 8

Modifications à prendre en compte dans les fichiers de traduction

Personnaliser l'affichage de la widget Schedule

Modifications Backend

µservice Map

Modifications à prendre en compte dans les fichiers de traduction

Personnaliser l'affichage de la widget Schedule

Utiliser la nouvelle fonctionnalité de détection des mises à jour du client

Modifications Backend

main

µservice Map

Modifications Serveur Mocks

Arborescence des pages

Pages … Accueil Guides de mise à jour Mise à jour de la version 1.1.0 vers la version 1.2.0 Historique de la page

Comparaison des versions

Ancienne version 5

Nouvelle version Actuel

Légende

Modifications Client

Passage à Ionic 8

Modifications à prendre en compte dans

Personnaliser l'affichage de la widget Schedule

le fichier angular.json

Vérification des mises à jour du client

Modifications à prendre en compte dans les fichiers de theming

Prise en compte des images SVG dans les Widgets

Reconstruction des modules Angular

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

Vérification des mises à jour du client

Personnaliser l'affichage de la widget Calendar

Personnaliser l'affichage de la widget Schedule

Modifications à prendre en compte dans les fichiers de theming

Prise en compte des images SVG dans les Widgets

Personnaliser l'affichage de la widget Calendar

Personnaliser l'affichage de la widget Schedule

Décalage du bouton 'Lire plus' sur iOS

Personnaliser l'affichage de la widget Schedule

Migration vers Ionic 8

Modifications à prendre en compte dans les fichiers de traduction

Personnaliser l'affichage de la widget Schedule

Modifications Backend

µservice Map

Modifications à prendre en compte dans les fichiers de traduction

Personnaliser l'affichage de la widget Schedule

Utiliser la nouvelle fonctionnalité de détection des mises à jour du client

Modifications Backend

main

µservice Map

Modifications Serveur Mocks

Pages

Accueil
Guides de mise à jour
Mise à jour de la version 1.1.0 vers la version 1.2.0

Historique de la page