feat(feat(side menu): create menu books list):

SShlykov · Mar 3, 2024 · 35dfa8d · 35dfa8d
1 parent 7135aad
commit 35dfa8d
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 42 deletions.
diff --git a/books-ui/src/components/4_frames/SideMenu/SideMenu.vue b/books-ui/src/components/4_frames/SideMenu/SideMenu.vue
@@ -3,23 +3,39 @@
  class="h-[100vh] z-40 flex flex-col px-4 pt-8 border-r border-slate-200 transition-all bg-gray-100"
  :class="{'w-[300px]': isOpenMenu, 'w-[70px]': !isOpenMenu}"
  >
- <MenuHead :isOpenMenu="isOpenMenu" :toggleMenu="toggleMenu" />
- <MenuList :menuList="menuList" />
+ <MenuHead
+ :isOpenMenu="isOpenMenu"
+ :toggleMenu="toggleMenu"
+ />
+ <MenuList :menuList="flattenMenuList" />
  </div>
 </template>
 
 <script>
 import {mapGetters, mapMutations} from "vuex";
 import MenuHead from './SideMenuHead.vue'
 import MenuList from './SideMenuList.vue'
+import {booksListToMenuList} from '@helpers/menuFuncs'
 
 export default {
- name: 'App',
+ name: 'SideMenu',
  components: {MenuHead, MenuList},
  data() {
  },
  computed: {
  ...mapGetters('layout', ['isOpenMenu', 'menuList']),
+ ...mapGetters('userBooks', ['booksList']),
+ flattenMenuList() {
+ const newBook = {
+ "title": "Создать книгу",
+ "icon": "file-add-line",
+ "link": "/new_book",
+ "type": "link",
+ "name": "new_book"
+ }
+ const booksMenu = booksListToMenuList(this.booksList)
+ return [newBook, ...booksMenu, ...this.menuList]
+ },
  pageName() {
  return this.$route.name
  }

diff --git a/books-ui/src/helpers/menuFuncs.js b/books-ui/src/helpers/menuFuncs.js
@@ -0,0 +1,25 @@
+/**
+ * Convert book to menu item
+ * @param book
+ * @returns {{icon: string, link: string, name: string, title, type: string}}
+ */
+const bookToMenuItem = (book) => {
+ return {
+ title: book.title,
+ icon: "book-marked-line",
+ link: `/book/${book.id}`,
+ type: "link",
+ name: `${book.id}`
+ }
+}
+
+/**
+ * Convert books list to menu list
+ * @param booksList
+ * @returns {*}
+ */
+const booksListToMenuList = (booksList) => {
+ return booksList.map(bookToMenuItem)
+}
+
+export {bookToMenuItem, booksListToMenuList}
diff --git a/books-ui/src/helpers/staticData.js b/books-ui/src/helpers/staticData.js
@@ -0,0 +1,18 @@
+const bookMock = {
+ "id": "fb5e7d1d-38cd-4831-bae9-07b36080e3e7",
+ "created_at": "2024-03-01T23:47:35.711668+03:00",
+ "updated_at": "2024-03-01T23:47:35.711668+03:00",
+ "deleted_at": null,
+ "owner": "e75aae0d-c1eb-4199-a1d8-2177f57d6a1e",
+ "title": "Тестовая книга",
+ "author": "Васильев А.В.",
+ "description": "test description",
+ "is_public": false,
+ "publication": null,
+ "image_link": null,
+ "map_link": null,
+ "map_params_id": null,
+ "variables": []
+}
+
+export {bookMock}
diff --git a/books-ui/src/store/modules/layout/menuList.js b/books-ui/src/store/modules/layout/menuList.js
@@ -18,26 +18,7 @@
  * @returns {Array<MenuItem>}
  */
 const menuList = () => [
- {
- "title": "Создать книгу",
- "icon": "file-add-line",
- "link": "/new_book",
- "type": "link",
- "name": "new_book"
- },
- {
- "title": "Книга 1",
- "icon": "book-marked-line",
- "link": "/book/:link",
- "type": "link",
- "name": "book1"
- }, {
- "title": "Книга 2",
- "icon": "book-marked-line",
- "link": "/book/:link",
- "type": "link",
- "name": "book2"
- },
+
  {
  "title": "Мои книги",
  "icon": "book-read-line",

diff --git a/books-ui/src/tests/components/4_frames/SideMenu.test.js b/books-ui/src/tests/components/4_frames/SideMenu.test.js
@@ -4,25 +4,10 @@ import SideMenu from "@frames/SideMenu/SideMenu.vue";
 import SideMenuList from "@frames/SideMenu/SideMenuList.vue";
 import SideMenuHead from "@frames/SideMenu/SideMenuHead.vue";
 import {createStore} from "vuex";
-
+import {bookMock} from '@helpers/staticData.js'
+import menuList from "@store/modules/layout/menuList.js";
 
 describe("tests of SideMenu", () => {
- const bookMock = {
- "id": "fb5e7d1d-38cd-4831-bae9-07b36080e3e7",
- "created_at": "2024-03-01T23:47:35.711668+03:00",
- "updated_at": "2024-03-01T23:47:35.711668+03:00",
- "deleted_at": null,
- "owner": "e75aae0d-c1eb-4199-a1d8-2177f57d6a1e",
- "title": "Тестовая книга",
- "author": "Васильев А.В.",
- "description": "test description",
- "is_public": false,
- "publication": null,
- "image_link": null,
- "map_link": null,
- "map_params_id": null,
- "variables": []
- }
 
  const store = createStore({
  plugins: [],
@@ -47,15 +32,15 @@ describe("tests of SideMenu", () => {
  namespaced: true,
  getters: {
  isSideMenuOpen: () => true,
- menuList: () => [],
+ menuList: () => menuList,
  },
  actions: {
  toggleMenu() { }
  }
  }
  }
  })
- 
+
  test('mount test of SideMenu', async () => {
  const wrapper = mount(SideMenu, {
  shallow: true,
@@ -66,6 +51,24 @@ describe("tests of SideMenu", () => {
  }
  })
 
+ const menuList = wrapper.vm.flattenMenuList
+
+ expect(menuList[0].title).contains("Создать книгу")
+ expect(menuList[1].title).contains("Тестовая книга")
+
+ expect(menuList[menuList.length - 1].title).contains("Выход")
+ })
+
+ test('render menu items', async () => {
+ const wrapper = mount(SideMenu, {
+ shallow: true,
+ global: {
+ mocks: {
+ $store: store
+ }
+ }
+ })
+
  expect(wrapper.exists()).toBe(true)
  })
 })
@@ -78,6 +81,7 @@ describe("tests of SideMenuList", () => {
 
  expect(wrapper.exists()).toBe(true)
  })
+
 })
 
 describe("tests of SideMenuHead", () => {

diff --git a/books-ui/src/tests/helpers/menuFuncs.test.js b/books-ui/src/tests/helpers/menuFuncs.test.js
@@ -0,0 +1,56 @@
+import {describe, test, expect} from 'vitest'
+import {bookToMenuItem, booksListToMenuList} from '@helpers/menuFuncs'
+import {bookMock} from "@helpers/staticData.js";
+
+// {
+// "title": "Создать книгу",
+// "icon": "file-add-line",
+// "link": "/new_book",
+// "type": "link",
+// "name": "new_book"
+// },
+// {
+// "title": "Книга 1",
+// "icon": "book-marked-line",
+// "link": "/book/:link",
+// "type": "link",
+// "name": "book1"
+// }, {
+// "title": "Книга 2",
+// "icon": "book-marked-line",
+// "link": "/book/:link",
+// "type": "link",
+// "name": "book2"
+// },
+
+describe("bookToMenuItem", () => {
+ test('convert book to menu item', () => {
+ const menuItem = bookToMenuItem(bookMock)
+ const expectedMenuItem = {
+ "title": "Тестовая книга",
+ "icon": "book-marked-line",
+ "link": `/book/${bookMock.id}`,
+ "type": "link",
+ "name": `${bookMock.id}`
+ }
+
+ expect(menuItem).toEqual(expectedMenuItem)
+ })
+})
+
+describe("booksListToMenuList", () => {
+ test('convert books list to menu list', () => {
+ const menuList = booksListToMenuList([bookMock])
+ const expectedMenuList = [
+ {
+ "title": "Тестовая книга",
+ "icon": "book-marked-line",
+ "link": `/book/${bookMock.id}`,
+ "type": "link",
+ "name": `${bookMock.id}`
+ }
+ ]
+
+ expect(menuList).toEqual(expectedMenuList)
+ })
+})