wip

global.config.json

@@ -1 +1,3 @@
-{}
+{
+  "backendUrl": "https://localhost:8443"
+}

package.json

@@ -21,13 +21,17 @@
     "plugin:uninstall": "node node_modules/@ditrit/leto-modelizer-plugin-cli/src/index.js uninstall"
   },
   "dependencies": {
+    "@ditrit/githubator-plugin": "^0.5.2",
+    "@ditrit/kubernator-plugin": "^0.3.2",
     "@ditrit/leto-modelizer-plugin-core": "=0.28.0",
+    "@ditrit/terrator-plugin": "^0.12.2",
     "@quasar/extras": "=1.16.9",
     "axios": "=1.6.2",
     "browserfs": "=1.4.3",
     "core-js": "=3.34.0",
     "crypto-js": "^4.2.0",
     "isomorphic-git": "=1.25.1",
+    "jdenticon": "^3.3.0",
     "monaco-editor": "=0.45.0",
     "monaco-editor-webpack-plugin": "=7.1.0",
     "pako": "^2.1.0",

src/components/card/ComponentDefinitionCard.vue

@@ -170,7 +170,7 @@ onMounted(() => {
 
 <style scoped>
   .component-definition-type {
-    word-break: normal;
+    word-break: break-all;
     text-align: center;
   }
 </style>

src/components/drawer/ModelizerDrawLeftDrawer.vue

@@ -12,7 +12,7 @@
     <q-splitter
       v-model="splitterModel"
       :limits="[10, 15]"
-      class="bordered-splitter"
+      class="border-top: 1px solid rgba(0, 0, 0, 0.12)"
     >
       <template #before>
         <q-tabs

src/components/grid/ComponentDefinitionGrid.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="full-width row q-col-gutter-sm"
+    class="flex-1 row q-col-gutter-sm"
     data-cy="component-definition-grid"
   >
     <div
@@ -19,6 +19,7 @@
 
 <script setup>
 import ComponentDefinitionCard from 'src/components/card/ComponentDefinitionCard.vue';
+import { computed } from 'vue';
 
 defineProps({
   definitions: {
@@ -30,4 +31,16 @@ defineProps({
     required: true,
   },
 });
+const columns = computed(() => [
+  {
+    name: 'name',
+    label: t('page.modelizer.drawer.variables.name'),
+    field: 'name',
+  },
+  {
+    name: 'value',
+    label: t('page.modelizer.drawer.variables.value'),
+    field: 'value',
+  },
+]);
 </script>

src/components/list/LibraryList.vue

@@ -1,54 +1,64 @@
 <template>
-  <q-input
-    v-model="definitionFilter"
-    clearable
-    class="q-px-md"
-    debounce="1000"
-    :label="inputLabel"
-    data-cy="definitions-filter-input"
-    @update:model-value="initTemplates"
-  >
-    <template #prepend>
-      <q-icon name="fa-solid fa-magnifying-glass" />
-    </template>
-  </q-input>
   <q-list
     text-white
-    :class="[
-      'column no-wrap col-shrink',
-      'scroll'
-    ]"
-    style="max-height: calc(100vh - 260px);"
+    style="width: 100%"
   >
-    <template
-      v-for="(drawerItem) in drawerItems"
-      :key="drawerItem.id"
-    >
-      <library-item
-        v-if="drawerItem.size > 0
-          && (selectedItemId === drawerItem.id || selectedItemId === null)"
-        :item="drawerItem"
-        :is-selected="isSelected"
-        @click="onItemClick(drawerItem.id)"
-      />
-    </template>
+    <q-item class="column background-white q-pa-none"
+            style="width: 100%">
+      <q-input
+        v-model="definitionFilter"
+        clearable
+        class="q-px-md"
+        debounce="1000"
+        :label="inputLabel"
+        data-cy="definitions-filter-input"
+        @update:model-value="initTemplates"
+      >
+        <template #prepend>
+          <q-icon name="fa-solid fa-magnifying-glass" />
+        </template>
+      </q-input>
+      <template
+        v-for="(drawerItem) in drawerItems"
+        :key="drawerItem.id"
+      >
+        <library-item
+          v-if="drawerItem.size > 0
+            && (selectedItemId === drawerItem.id || selectedItemId === null)"
+          :item="drawerItem"
+          :is-selected="isSelected"
+          @click="onItemClick(drawerItem.id)"
+        />
+      </template>
+    </q-item>
     <template v-if="selectedItemId">
       <div
         v-if="!hasRole"
-        class="q-px-md q-py-sm text-italic text-grey full-height"
+        class="q-px-md q-py-sm text-italic text-grey"
         data-cy="library-unauthorized-message"
       >
         {{ $t('errors.permissionsDenied') }}
       </div>
       <q-item
         v-else-if="!isEmptyList"
-        class="q-pa-none q-mb-sm item-grid column"
+        class="q-pa-none q-mb-sm column"
       >
-        <component-definition-grid
-          :definitions="selectedItemDefinitions"
-          :plugin-name="plugin.data.name"
-          class="q-mt-xs q-pr-sm"
-        />
+        <div
+          class="row q-col-gutter-sm"
+          data-cy="component-definition-grid"
+        >
+          <div
+            v-for="(definition, index) in selectedItemDefinitions"
+            :key="`definition-card_${index}`"
+            class="col-4"
+          >
+            <component-definition-card
+              :definition="definition"
+              :plugin-name="plugin.data.name"
+              class="full-height"
+            />
+          </div>
+        </div>
         <q-btn
           v-if="haveMoreTemplates"
           outline
@@ -78,12 +88,12 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue';
-import ComponentDefinitionGrid from 'src/components/grid/ComponentDefinitionGrid.vue';
 import LibraryItem from 'src/components/item/LibraryItem.vue';
 import { useI18n } from 'vue-i18n';
 import { isMatching } from 'src/composables/Project';
 import { useAcl } from 'vue-simple-acl';
 import { getTemplatesByType } from 'src/services/TemplateService';
+import ComponentDefinitionCard from 'components/card/ComponentDefinitionCard.vue';
 
 const acl = useAcl();
 const { t } = useI18n();