Open dialog to import template diagram in models page

src/pages/ModelsPage.vue

@@ -1,8 +1,21 @@
 <template>
   <q-page>
-    <models-view
-      :project-name="projectName"
-    />
+    <div class="column items-center">
+      <diagrams-card
+        class="grid-container q-mt-md"
+        :project-name="projectName"
+      />
+      <div class="row q-mt-xl grid-container">
+        <template-grid
+          type="DIAGRAM"
+          @add:template="openImportModelTemplateDialog"
+        >
+          <template #header>
+            {{ $t('page.models.template.create') }}
+          </template>
+        </template-grid>
+      </div>
+    </div>
 
     <create-model-dialog :project-name="projectName" />
     <create-a-i-model-dialog :project-name="projectName" />
@@ -15,13 +28,38 @@
 <script setup>
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-import ModelsView from 'src/components/ModelsView.vue';
 import CreateModelDialog from 'components/dialog/CreateModelDialog.vue';
 import CreateAIModelDialog from 'components/dialog/CreateAIModelDialog.vue';
 import DeleteModelDialog from 'components/dialog/DeleteModelDialog.vue';
 import RenameModelDialog from 'components/dialog/RenameModelDialog.vue';
 import ImportModelTemplateDialog from 'components/dialog/ImportModelTemplateDialog.vue';
+import TemplateGrid from 'components/grid/TemplateGrid.vue';
+import DiagramsCard from 'components/card/DiagramsCard.vue';
+import DialogEvent from 'src/composables/events/DialogEvent';
 
 const route = useRoute();
 const projectName = computed(() => route.params.projectName);
+
+/**
+ * Open dialog to import template.
+ * @param {object} template - Template to import.
+ */
+function openImportModelTemplateDialog(template) {
+  DialogEvent.next({
+    type: 'open',
+    key: 'ImportModelTemplate',
+    template,
+  });
+}
 </script>
+
+<style lang="scss" scoped>
+.grid-container {
+  width: 100%;
+  max-width: 1275px;
+
+  .project-grid, .template-grid {
+    width: 100%;
+  }
+}
+</style>

tests/unit/pages/ModelsPage.spec.js

@@ -1,6 +1,7 @@
 import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
 import { shallowMount } from '@vue/test-utils';
 import ModelsPage from 'src/pages/ModelsPage';
+import DialogEvent from 'src/composables/events/DialogEvent';
 
 installQuasarPlugin();
 
@@ -12,17 +13,32 @@ jest.mock('vue-router', () => ({
   })),
 }));
 
+jest.mock('src/composables/events/DialogEvent', () => ({
+  next: jest.fn(),
+}));
+
 describe('Test page component: ModelsPage', () => {
   let wrapper;
 
   beforeEach(() => {
     wrapper = shallowMount(ModelsPage);
   });
 
-  describe('Test variables initialization', () => {
-    describe('Test computed: projectName', () => {
-      it('should match "project-00000000"', () => {
-        expect(wrapper.vm.projectName).toEqual('project-00000000');
+  describe('Test computed: projectName', () => {
+    it('should match "project-00000000"', () => {
+      expect(wrapper.vm.projectName).toEqual('project-00000000');
+    });
+  });
+
+  describe('Test function: openImportModelTemplateDialog', () => {
+    it('should emit event', () => {
+      DialogEvent.next.mockClear();
+      wrapper.vm.openImportModelTemplateDialog('template');
+
+      expect(DialogEvent.next).toBeCalledWith({
+        type: 'open',
+        key: 'ImportModelTemplate',
+        template: 'template',
       });
     });
   });