Ce composant a pour but d'être modulaire pour être implémenté sur Nude et sur les B2B des clients de Solidpepper.
Auteur : Nicolas Delahaie

Mise en place

ngx-translate

Pour fonctionner correctement, ngx-translate a besoins des traductions des différentes clés. Il faut alors les recopier pour les 3 langues présentes :

Anglais

"modal_search": {
  "search_error": "An error occurred during the search",
  "suggestions": "SUGGESTIONS",
  "categories": "CATEGORIES",
  "no_category": "No category",
  "no_result": "No exact match found",
  "extend_search": "Extend search via AI",
  "semantic_disabled": "Semantic search (by AI) is currently disabled. Please try again later."
}

Espagnol

"modal_search": {
  "search_error": "Se produjo un error durante la búsqueda",
  "suggestions": "SUGERENCIAS",
  "categories": "CATEGORÍAS",
  "no_category": "Sin categoría",
  "no_result": "No se encontraron coincidencias exactas",
  "extend_search": "Ampliar búsqueda mediante IA",
  "semantic_disabled":"La búsqueda semántica (por IA) está desactivada por el momento. Por favor, inténtelo de nuevo más tarde."
}

Français

"modal_search": {
  "search_error": "Une erreur est survenue lors de la recherche",
  "suggestions": "SUGGESTIONS",
  "categories":"CATEGORIES",
  "no_category":"Aucune catégorie",
  "no_result":"Aucune correspondance exacte trouvée",
  "extend_search":"Elargir la recherche via IA",
  "semantic_disabled": "La recherche sémantique (par IA) est désactivée pour le moment. Veuillez réessayer plus tard."
}

Resultats possibles

La modale peut retourner 5 differents types de resultats, chacun accompagné de ses propre données (typées) :

• "VALIDATED_SEARCH"
• "CLICKED_SKU"
• "CLICKED_CATEGORY"
• "PROPS_ERROR"
• undefined, si la popup est fermée autrement

Prérequis

// Imports
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import {
  SolidpepperSearchComponent,
  SolidpepperSearchProps,
  TResponse,
} from 'solidpepper-search-v17';

// ...
// Injection de MatDialog dans le composant souhaitant utiliser la modal
constructor(public dialog: MatDialog) {}

Parametres de la modal

Le typage typescript est important car il donne accès aux differents paramètre obligatoires et facultatifs, ainsi que leurs explications. Utiliser CTRL + espace lorsqu'on est dans l'objet pour avoir accès aux differents parametres sur VSCode.
Il existe deux differents configurations necessaires à l'ouverture de la modal ; celle de la MatDialog et celle du composant appelé par la MatDialog.

const data: SolidpepperSearchProps = {
  // Typage fournit par typescript
};

const dialogConfig: MatDialogConfig = {
  // Typage fournit par typescript
};

Exemple d'utilisation

Ouverture via un callback "openDialog()", déclenché par l'utilisateur

openDialog(): void {
  const data: SolidpepperSearchProps = {
    url : 'https://localhost:44322/api/',
    token: "Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    lang: "fr",
    unavailableImagePath: "./assets/img/picture-unavailable.png",
    platform: "nude",
  };

  const dialogConfig: MatDialogConfig = {
    maxWidth: "80vw",
    width: "100%",
    height: "fit-content",
  };

  const dialogRef = this.dialog.open(SolidpepperSearchComponent, {
    ...dialogConfig,
    data,
  });

  dialogRef.afterClosed().subscribe((result: TResponse) => {
      console.log('The dialog was closed', result);
      // Traitement après fermeture de la popup
      switch (result?.type) {
        // Utilisation des autres donnees de result, propres aux types
        case 'VALIDATED_SEARCH':
          break;
        case 'CLICKED_CATEGORY':
          break;
        case 'CLICKED_SKU':
          break;
        case 'PROPS_ERROR':
          break;
        case undefined:
          break;
      }
    });
}