Historique de la page

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

...

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.

...

Image Removed

...

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 Removed

Vue 'slider'

...

Image Removed

Vue 'list'

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

Bloc de code

firstline	216
title	dev/user-frontend-ionic/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 :

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 Removed

Vue 'slider'

...

Image Removed

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 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,

Bloc de code

firstline	216
title	dev/user-frontend-ionic/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 :

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

...

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

...

Bloc de code

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

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

}

...

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é

...

Arborescence des pages

Comparaison des versions

Ancienne version 15

Nouvelle version Actuel

Légende

Modifications Client

Passage à Ionic 8

Modifications à prendre en compte dans

le fichier angular.json

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 le fichier angular.json

Vérification des mises à jour du client

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

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 15

Nouvelle version Actuel

Légende

Modifications Client

Passage à Ionic 8

Modifications à prendre en compte dans

le fichier angular.json

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 le fichier angular.json

Vérification des mises à jour du client

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

Pages

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

Historique de la page