From 96a54228f09d671b0e137bbbb6cd0532ddeb37d7 Mon Sep 17 00:00:00 2001
From: patrickpeinanw <144158754+patrickpeinanw@users.noreply.github.com>
Date: Wed, 19 Jun 2024 12:57:12 -0700
Subject: [PATCH] Section component and dashboard layout (#7)

* set up template for dashboard

* remove top padding
---
 src/components/bcros/Section.vue | 16 ++++++++++++++++
 src/lang/en.json                 |  6 ++++++
 src/pages/dashboard.vue          | 31 +++++++++++++++++++++++++++++--
 tests/pages/dashboard.spec.ts    |  3 ++-
 tests/test-utils/mockedi18n.ts   |  7 +++++++
 5 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 src/components/bcros/Section.vue
 create mode 100644 tests/test-utils/mockedi18n.ts

diff --git a/src/components/bcros/Section.vue b/src/components/bcros/Section.vue
new file mode 100644
index 0000000..bbfccd9
--- /dev/null
+++ b/src/components/bcros/Section.vue
@@ -0,0 +1,16 @@
+<template>
+  <div :data-cy="'section_' + name">
+    <div :data-cy="'header_' + name" class="font-bold text-lg pb-2">
+      <slot name="header" />
+    </div>
+    <div :data-cy="'body_' + name" class="bg-white rounded">
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: { type: String, required: true }
+})
+</script>
diff --git a/src/lang/en.json b/src/lang/en.json
index 9521018..8bef977 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -74,6 +74,12 @@
         "selectLogin": "Select log in method",
         "switchAccount": "Switch Account"
       }
+    },
+    "section": {
+      "toDo": "To Do",
+      "filingHistory": "Recent Filing History",
+      "officeAddresses": "Office Addresses",
+      "currentDirectors": "Current Directors"
     }
   }
 }
diff --git a/src/pages/dashboard.vue b/src/pages/dashboard.vue
index 5a2ba56..e8925da 100644
--- a/src/pages/dashboard.vue
+++ b/src/pages/dashboard.vue
@@ -1,6 +1,33 @@
 <template>
-  <div class="mt-8 mb-16" data-cy="business-dashboard">
-    TBD
+  <div class="mt-8 mb-16 flex flex-wrap" data-cy="business-dashboard">
+    <div class="w-full md:w-9/12">
+      <BcrosSection name="todo">
+        <template #header>
+          {{ $t('title.section.toDo') }}
+        </template>
+        TBD
+      </BcrosSection>
+      <BcrosSection name="filingHistory" class="pt-5">
+        <template #header>
+          {{ $t('title.section.filingHistory') }}
+        </template>
+        TBD
+      </BcrosSection>
+    </div>
+    <div class="w-full pt-5 md:w-3/12 md:pl-5 md:pt-0 flex flex-col">
+      <BcrosSection name="address">
+        <template #header>
+          {{ $t('title.section.officeAddresses') }}
+        </template>
+        TBD
+      </BcrosSection>
+      <BcrosSection name="directors" class="pt-5">
+        <template #header>
+          {{ $t('title.section.currentDirectors') }}
+        </template>
+        TBD
+      </BcrosSection>
+    </div>
   </div>
 </template>
 
diff --git a/tests/pages/dashboard.spec.ts b/tests/pages/dashboard.spec.ts
index 9864c33..6346c59 100644
--- a/tests/pages/dashboard.spec.ts
+++ b/tests/pages/dashboard.spec.ts
@@ -1,5 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 import { flushPromises, mount, VueWrapper } from '@vue/test-utils'
+import { mockedI18n } from '../test-utils/mockedi18n'
 
 import Dashboard from '../../src/pages/dashboard.vue'
 
@@ -7,7 +8,7 @@ describe('dashboard page tests', () => {
   let wrapper: VueWrapper<any>
 
   beforeEach(async () => {
-    wrapper = mount(Dashboard)
+    wrapper = mount(Dashboard, { global: { plugins: [mockedI18n] } })
     // await api calls to resolve
     await flushPromises()
   })
diff --git a/tests/test-utils/mockedi18n.ts b/tests/test-utils/mockedi18n.ts
new file mode 100644
index 0000000..1d109e4
--- /dev/null
+++ b/tests/test-utils/mockedi18n.ts
@@ -0,0 +1,7 @@
+import { createI18n } from 'vue-i18n'
+import en from '~/lang/en.json'
+
+export const mockedI18n = createI18n({
+  locale: 'en',
+  messages: en
+})