Feature: Add functionnalities to ConsoleFooter

changelog.md

@@ -89,6 +89,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   * Display buttons for each OIDC provider and perform user authentication if the global configuration file is declared.
 * Draw page:
   * Add variables panel in left drawer.
+  * Add panel to display all errors.
+  * Select component in error and open its details from the error's console.
+  * Select file in error and open text editor and selected file open.
   * Rename component id.
 * Text editor page:
   * Add panel to display all errors.

src/components/table/ErrorsTable.vue

@@ -6,12 +6,34 @@
     :columns="columns"
     row-key="message"
     data-cy="errors-table"
-  />
+  >
+    <template #body-cell-component="data">
+      <q-td :props="data">
+        <span
+          class="body-link"
+          @click="selectComponent(data.row.componentId)"
+        >
+          {{ data.value }}
+        </span>
+      </q-td>
+    </template>
+    <template #body-cell-file="data">
+      <q-td :props="data">
+        <span
+          class="body-link"
+          @click="selectFile(data.row.path)"
+        >
+          {{ data.value }}
+        </span>
+      </q-td>
+    </template>
+  </q-table>
 </template>
 
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import PluginEvent from 'src/composables/events/PluginEvent';
 
 const { t } = useI18n();
 
@@ -27,62 +49,99 @@ const props = defineProps({
 });
 
 const columns = computed(() => {
-  const severityColumn = {
+  const array = [{
     name: 'severity',
     align: 'left',
     label: t('footer.consoleFooter.errorsTable.severity'),
     field: (row) => t(`parser.severity.${row.severity}`),
     style: 'width: 2rem',
-  };
-  const messageColumn = {
-    name: 'message',
-    align: 'left',
-    label: t('footer.consoleFooter.errorsTable.message'),
-    field: (row) => t(row.message, {
-      initialErrorMessage: row.initialErrorMessage,
-      extraData: row.extraData,
-      attribute: row.attribute,
-    }),
-  };
+  }];
 
-  if (props.editorType === 'text') {
-    return [
-      severityColumn,
-      {
-        name: 'line',
-        align: 'center',
-        label: t('footer.consoleFooter.errorsTable.line'),
-        field: (row) => `${row.startLineNumber}-${row.endLineNumber}`,
-        style: 'width: 2rem',
-      },
-      {
-        name: 'column',
-        align: 'center',
-        label: t('footer.consoleFooter.errorsTable.column'),
-        field: (row) => `${row.startColumn}-${row.endColumn}`,
-        style: 'width: 2rem',
-      },
-      messageColumn,
-    ];
-  }
-
-  return [
-    severityColumn,
-    {
+  if (props.editorType === 'diagram') {
+    array.push({
       name: 'component',
       align: 'center',
       label: t('footer.consoleFooter.errorsTable.component'),
-      field: (row) => row.componentId,
+      field: (row) => row.componentName,
       style: 'width: 2rem',
-    },
-    {
+    });
+    array.push({
       name: 'attribute',
       align: 'center',
       label: t('footer.consoleFooter.errorsTable.attribute'),
       field: (row) => row.attribute,
       style: 'width: 2rem',
-    },
-    messageColumn,
-  ];
+    });
+    array.push({
+      name: 'file',
+      align: 'center',
+      label: t('footer.consoleFooter.errorsTable.file'),
+      field: (row) => row.path,
+      style: 'width: 2rem',
+    });
+  }
+
+  array.push({
+    name: 'line',
+    align: 'center',
+    label: t('footer.consoleFooter.errorsTable.line'),
+    field: (row) => `${row.startLineNumber}-${row.endLineNumber}`,
+    style: 'width: 2rem',
+  });
+
+  array.push({
+    name: 'column',
+    align: 'center',
+    label: t('footer.consoleFooter.errorsTable.column'),
+    field: (row) => `${row.startColumn}-${row.endColumn}`,
+    style: 'width: 2rem',
+  });
+
+  array.push({
+    name: 'message',
+    align: 'left',
+    label: t('footer.consoleFooter.errorsTable.message'),
+    field: (row) => t(row.message, {
+      initialErrorMessage: row.initialErrorMessage,
+      extraData: row.extraData,
+      attribute: row.attribute,
+    }),
+  });
+
+  return array;
 });
+
+/**
+ * Send event to select component and open its detail panel.
+ * @param {string} id - Component id.
+ */
+function selectComponent(id) {
+  PluginEvent.RequestEvent.next({
+    type: 'select',
+    ids: [id],
+  });
+  PluginEvent.RequestEvent.next({
+    type: 'edit',
+    id,
+  });
+}
+
+/**
+ * Send event to select file and open it in text editor.
+ * @param {string} path - File path.
+ */
+function selectFile(path) {
+  PluginEvent.RequestEvent.next({
+    type: 'openFile',
+    path,
+  });
+}
 </script>
+
+<style lang="scss">
+.body-link {
+  color: $info;
+  text-decoration: underline;
+  cursor: pointer;
+}
+</style>

src/i18n/en-US/index.js

@@ -495,6 +495,7 @@ export default {
       errorsTable: {
         message: 'Message',
         line: 'Start/End Line',
+        file: 'File',
         column: 'Start/End Column',
         severity: 'Severity',
         component: 'Component',

src/layouts/ModelizerDrawLayout.vue

@@ -118,7 +118,7 @@ async function initView() {
     ).then((logs) => {
       LogEvent.FileLogEvent.next(logs.map((log) => ({
         ...log,
-        componentId: log.componentId ? data.plugin.data.getComponentById(log.componentId).externalId : '',
+        componentName: log.componentId ? data.plugin.data.getComponentById(log.componentId).externalId : '',
       })));
       data.plugin.draw();
     }),

src/layouts/ModelizerTextLayout.vue

@@ -9,7 +9,6 @@
         v-model="splitter"
         :limits="[50, 100]"
         separator-class="separator-class"
-        :class="isVisible ? '' : 'splitter-invisible'"
         :style="{ height: `calc(100vh - ${reservedHeight + 70}px)` }"
       >
         <template #before>

src/pages/ModelizerDrawPage.vue

@@ -61,17 +61,19 @@ import {
   reactive,
   ref,
 } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { Notify } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import PluginEvent from 'src/composables/events/PluginEvent';
 import { getTemplatesByType } from 'src/composables/TemplateManager';
 import DialogEvent from 'src/composables/events/DialogEvent';
 import { ComponentLink } from '@ditrit/leto-modelizer-plugin-core';
 import DrawerEvent from 'src/composables/events/DrawerEvent';
+import FileEvent from 'src/composables/events/FileEvent';
 
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
 
 const HAS_BACKEND = computed(() => process.env.HAS_BACKEND);
 const projectName = computed(() => route.params.projectName);
@@ -193,6 +195,20 @@ async function onRequestEvent(event) {
       key: 'ComponentDetailPanel',
       id: event.id,
     });
+  } else if (event.type === 'select') {
+    const parent = data.plugin.data.getComponentById(event.ids[0]);
+    data.plugin.data.scene.selection = event.ids;
+    data.plugin.data.scene.selectionRef = parent.id;
+    data.plugin.draw();
+  } else if (event.type === 'openFile') {
+    await router.push({
+      name: 'Text',
+      params: {
+        projectName: projectName.value,
+      },
+      query: query.value,
+    });
+    FileEvent.SelectFileTabEvent.next(event.path);
   }
 
   if (needRender) {

tests/unit/components/table/ErrorsTable.spec.js

@@ -2,6 +2,7 @@ import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-j
 import { shallowMount } from '@vue/test-utils';
 import i18nConfiguration from 'src/i18n';
 import ErrorsTable from 'src/components/table/ErrorsTable.vue';
+import PluginEvent from 'src/composables/events/PluginEvent';
 
 installQuasarPlugin();
 
@@ -11,6 +12,12 @@ jest.mock('vue-i18n', () => ({
   }),
 }));
 
+jest.mock('src/composables/events/PluginEvent', () => ({
+  RequestEvent: {
+    next: jest.fn(),
+  },
+}));
+
 describe('Test component: ErrorsTable', () => {
   let wrapper;
   const { createI18n } = jest.requireActual('vue-i18n');
@@ -44,11 +51,14 @@ describe('Test component: ErrorsTable', () => {
         editorType: 'diagram',
       });
 
-      expect(wrapper.vm.columns.length).toEqual(4);
+      expect(wrapper.vm.columns.length).toEqual(7);
       expect(wrapper.vm.columns[0].name).toEqual('severity');
       expect(wrapper.vm.columns[1].name).toEqual('component');
       expect(wrapper.vm.columns[2].name).toEqual('attribute');
-      expect(wrapper.vm.columns[3].name).toEqual('message');
+      expect(wrapper.vm.columns[3].name).toEqual('file');
+      expect(wrapper.vm.columns[4].name).toEqual('line');
+      expect(wrapper.vm.columns[5].name).toEqual('column');
+      expect(wrapper.vm.columns[6].name).toEqual('message');
     });
 
     it('should have valid columns for text page', async () => {
@@ -63,4 +73,31 @@ describe('Test component: ErrorsTable', () => {
       expect(wrapper.vm.columns[3].name).toEqual('message');
     });
   });
+
+  describe('Test function: selectComponent', () => {
+    it('should emit events', () => {
+      PluginEvent.RequestEvent.next.mockClear();
+
+      wrapper.vm.selectComponent('id_1');
+
+      expect(PluginEvent.RequestEvent.next).toHaveBeenCalledTimes(2);
+      expect(PluginEvent.RequestEvent.next.mock.calls).toEqual([
+        [{ type: 'select', ids: ['id_1'] }],
+        [{ type: 'edit', id: 'id_1' }],
+      ]);
+    });
+  });
+
+  describe('Test function: selectFile', () => {
+    it('should emit event', () => {
+      PluginEvent.RequestEvent.next.mockClear();
+
+      wrapper.vm.selectFile('path');
+
+      expect(PluginEvent.RequestEvent.next).toHaveBeenCalledTimes(1);
+      expect(PluginEvent.RequestEvent.next.mock.calls).toEqual([
+        [{ type: 'openFile', path: 'path' }],
+      ]);
+    });
+  });
 });