# Développement

# Création d'un Hub Element

# Utilisation d'un composant Vue

N'importe quel composant Vue peut être utilisé pour définir une entrée du Hub Station.
Néanmoins, pour fonctionner correctement il est nécessaire que le composant hérite du composant HubElement (ou utilise le mixin HubElementMixin correspondant).

# Exemple

1) Soit le composant Vue existant :

ListView.vue

<template>
  <div>
    <ul>
      <li v-for="item in listItems">{{ item.label }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    listItems: {
      type: Array,
      default: () => []
    }
  }
};
</script>

2) Création du Hub Element

Voir Hub Element pour une description du composant/mixin Hub Element.

ListViewEntry.vue

<template>
  <div>
    <div v-if="isDockCollapsed">
      <i class="fa fa-ul"></i>
    </div>
    <div v-else-if="isDockExpanded">
      <span>Liste des utilisateurs</span>
    </div>
    <div v-else-if="isHubContent">
      <list-view :listItems="items"></list-view>
    </div>
  </div>
</template>
<script>
import ListView from "./ListView.vue"; // Le composant existant
import HubElement from "@anakeen/hub-components/components/lib/HubElement";
// ou
// import HubElementMixin from "@anakeen/hub-components/components/lib/HubElementMixin";
export default {
  name: "list-view-entry",
  extends: HubElement, // ou mixins: [ HubElementMixins ],
  components: {
    ListView
  },
  props: {
    items: {
      // Le composant déclare des propriétés de même type que le composant ListView
      type: Array,
      default: () => []
    }
  }
};
</script>

3) Enregistrement du Hub Element

index.js

import ListViewEntry from "./ListViewEntry.vue";

if (window.ank && window.ank.hub && window.ank.hub["list-view-entry"]) {
  // Enregistrement du composant
  window.ank.hub["list-view-entry"].resolve(ListViewEntry);
}

# Utilisation du Hub Element

Un composant Hub Element peut être directement utilisé et "instancié" via l'interface d'administration du Hub (voir Paramétrage du Hub).

L'instanciation avancée correspond à un Hub Element qui est destiné à être réutilisé au sein d'une ou plusieurs instances de Hub.
L'instanciation sera alors accessible via le bouton Add hub element de l'interface d'administration du Hub, et ce quelle que soit l'instance du Hub.

# Configuration de la structure

Pour définir une entrée de Hub de façon à pouvoir la configurer et la réutiliser dans l'interface d'administration du Hub, il suffit de créer une Smart Structure héritant de la structure HUBCONFIGURATIONVUE.

# Exemple :

<smart:config xmlns:smart="https://platform.anakeen.com/4/schemas/smart/1.0">
    <smart:structure-configuration name="HUBCONFIGURATIONHELLOWORLD" label="Hello world configuration">
        <smart:extends ref="HUBCONFIGURATIONVUE"/>
        <smart:class>Anakeen\Hub\SmartStructures\HubConfigurationHelloWorld\HubConfigurationHelloWorldBehavior</smart:class>
        <smart:fields>
            <smart:field-set name="hub_component_parameters" extended="true">
                <smart:field-set type="array" name="hello_items" label="Hello items"
                                  access="ReadWrite"/>
            </smart:field-set>
        </smart:fields>
    </smart:structure-configuration>
</smart:config>

Le field hub_component_parameters peut être compléter de façon à récupérer toutes les informations propres au fonctionnement du composant.
La classe PHP associée doit alors simplement spécifier les informations sur le composant utilisé ainsi que les valeurs de ses propriétés initiales en surchargeant la méthode Anakeen\Hub\SmartStructures\HubConfiguration\HubConfigurationBehavior:getComponentConfiguration

    protected function getComponentConfiguration()
    {
        return [
            // Name of the Vue.js component
            "name" => "hello-world",

            // Properties to use for the component
            "props" => [
                "msg" => $this->getAttributeValue("hello_msg")
            ]
        ];
    }

# Configuration des ressources

La classe PHP associée doit fournir, en plus des informations sur le composant, l'emplacement des fichiers Javascript et CSS à fournir pour utiliser le composant.
Cela est réalisé en surchargeant la méthode Anakeen\Hub\SmartStructures\HubConfiguration\HubConfigurationBehavior:getAssets


protected function getAssets() {
    $assets = parent::getAssets();
    $assets["js"][] = "/Anakeen/assets/helloWorld.js";
    $assets["css"][] = "/Anakeen/assets/helloWorld.css";
    return $assets;
}

← Paramétrage Avancé →