Comment ? / How To ?

Comment intégrer un composant Anakeen Platform 4

Prérequis

Afin de pouvoir suivre ce guide, il faut préalablement avoir ajouté un style global à l’application.

Introduction

On se propose ici de mettre en place une grille présentant les Smart Elements correspondant à chaque section Plat, Boisson et Menu.

Pour cela nous allons nous baser sur l’utilisation de composants Vue qui seront réutilisés dans chaque section.

Recommandation

Pour vous familiariser avec l’utilisation des composants Vue, vous pouvez consulter la documentation associée disponible ici

Comment configurer Nuxt pour intégrer les composants AP4

Installer les dépendances nécessaires en lançant la commande :

npm install @nuxtjs/proxy@2.1.0 @nuxtjs/i18n@7.0.3

Recommandation

Pour vous familiariser avec les plugins proxy et i18n de nuxt, vous pouvez consulter les documentations disponibles ici : @nuxt/proxy - nuxt-i18N

Dans le fichier nuxt.config.js rajouter la configuration suivante :

export default {
  ssr: false,
  target: "static",
  components: true,
  css: ["@/assets/css/bootstrap.scss", "@/assets/css/kendo.scss", "@/assets/css/main.scss"],
  modules: ["@nuxtjs/proxy", "@nuxtjs/i18n"],
  proxy: {
    "/locale/catalog.json": {
      target: "http://localhost:8080",
    },
    "/api/v2/**": {
      target: "http://localhost:8080",
    },
  },
};

Dans le dossier assets ajouter les deux fichiers suivants :

touch assets/css/bootstrap.scss assets/css/kendo.scss
  • assets/css/bootstrap.scss :
$primary: #8ae234;
@import "~@anakeen/user-interfaces/components/scss/bootstrap.scss";
  • assets/css/kendo.scss :
@import "~@anakeen/user-interfaces/components/scss/kendo.scss";

Lancer le serveur AP4 avec la commande :

make env-start

Comment utiliser un composant

Recommandation

Pour vous familiariser avec l’utilisation des composants Vue dans Nuxt.js, vous pouvez consulter la documentation associée disponible ici

Créer le répertoire components :

mkdir components

Créer alors le fichier components/RestauratecSection.vue :

touch components/RestauratecSection.vue

<template>
  <div class="restauratec-section">
    <div class="restauratec-grid">
      <ank-se-grid :collection="gridConfig.collection" :columns="gridConfig.columns" />
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import AnkSmartElementGrid from "@anakeen/user-interfaces/components/lib/AnkSmartElementGrid.esm";
import setup from "@anakeen/user-interfaces/components/lib/setup.esm";
Vue.use(setup);

export default {
  components: {
    "ank-se-grid": () =>
      new Promise((resolve) => {
        Vue.$_globalI18n.recordCatalog().then(() => {
          resolve(AnkSmartElementGrid);
        });
      }),
  },
  props: ["gridConfig"],
};
</script>
<style lang="scss">
.restauratec-section {
  display: flex;
  flex-direction: column;
  align-items: center;

  .restauratec-grid {
    height: 25rem;
    width: 80%;
    margin-top: 5rem;
    border: 1px solid;
  }
}
</style>

Modifier ensuite les pages de chaque sections :

  • pages/Boisson.vue :
<template>
  <div class="restauratec-boisson-wrapper">
    <restauratec-section :gridConfig="gridConfig" />
  </div>
</template>
<script>
import RestauratecSection from "../components/RestauratecSection";
export default {
  components: { RestauratecSection },
  data() {
    return {
      gridConfig: {
        collection: "BOISSON",
        columns: [
          { field: "consommable_title" },
          { field: "consommable_creator" },
          { field: "consommable_price_incl_vat" },
        ],
      },
    };
  },
};
</script>
  • pages/Menu.vue :
<template>
  <div class="restauratec-menu-wrapper">
    <restauratec-section :gridConfig="gridConfig" />
  </div>
</template>
<script>
import RestauratecSection from "../components/RestauratecSection";
export default {
  components: { RestauratecSection },
  data() {
    return {
      gridConfig: {
        collection: "MENU",
        columns: [{ field: "menu_title" }, { field: "menu_price" }],
      },
    };
  },
};
</script>
  • pages/Plat.vue :
<template>
  <div class="restauratec-plat-wrapper">
    <restauratec-section :gridConfig="gridConfig" />
  </div>
</template>
<script>
import RestauratecSection from "../components/RestauratecSection";
export default {
  components: { RestauratecSection },
  data() {
    return {
      gridConfig: {
        collection: "PLAT",
        columns: [{ field: "consommable_title" }, { field: "consommable_creator" }, { field: "plat_type" }],
      },
    };
  },
};
</script>

Modifier le fichier assets/css/main.scss :

$primary: #8ae234;
@import "~@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";
@import "~@anakeen/user-interfaces/components/scss/SmartElementGrid.scss";

body {
  height: 100vh;

  #__nuxt {
    height: 100%;

    #__layout {
      height: 100%;

      .restauratec-main {
        height: 100%;

        .restauratec-header {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 3.5rem;

          .restauratec-header-nav-button {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .nuxt-link-active {
              color: $primary;

              &:hover {
                color: black;
              }
            }

            a {
              width: 100%;
              height: 100%;
              text-decoration: auto;
              text-align: center;
              color: black;
              font-weight: bold;
              font-size: 1.5rem;
            }
          }
        }
        .restauratec-body {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

Tester nos modifications

Lancez le serveur de développement :

npm run dev

Vous pouvez voir une grille pour chaque section sous http://localhost:3000/plat :

platGrid

Et ensuite ?

Comment intégrer un système d’onglets