add books cards

books-ui/package.json

@@ -16,6 +16,7 @@
  "axios": "^1.6.7",
  "flowbite": "^2.3.0",
  "flowbite-vue": "^0.1.2",
+ "moment": "^2.30.1",
  "postcss-import": "^16.0.1",
  "ramda": "^0.29.1",
  "socket.io-client": "^4.7.4",

books-ui/src/App.vue

@@ -4,6 +4,7 @@ import SideMenu from '@frames/SideMenu/SideMenu.vue';
 import {mapActions} from "vuex";
 
 
+
 export default {
  name: 'App',
  components: {

books-ui/src/components/1_atoms/BackgroundImage.vue

@@ -0,0 +1,24 @@
+<script>
+export default {
+ name: 'BackgroundImage',
+ props: {
+ image_link: {
+ type: String,
+ required: true
+ },
+ alt: {
+ type: String,
+ required: true
+ }
+ },
+}
+
+</script>
+
+<template>
+ <div class="absolute inset-0 overflow-hidden transition-all">
+ <figure class="h-full w-full overflow-hidden">
+ <img class="object-cover w-full h-full" :src="image_link" :alt="alt">
+ </figure>
+ </div>
+</template>

books-ui/src/components/2_molecules/VCardsContainer.vue

@@ -0,0 +1,17 @@
+<script>
+export default {
+ name: 'VCardsContainer',
+ components: {},
+ data() {},
+ computed: {},
+ mounted() {},
+ methods: {}
+}
+
+</script>
+
+<template>
+ <div class="">
+ template
+ </div>
+</template>

books-ui/src/components/3_organisms/BooksViewer/BooksViewer.vue

@@ -0,0 +1,44 @@
+<script>
+import {mapActions, mapGetters} from "vuex";
+import BooksViewerCard from './BooksViewerCard.vue'
+import BooksViewerContainer from './BooksViewerContainer.vue'
+
+export default {
+ name: 'BooksViewer',
+ components: {BooksViewerCard, BooksViewerContainer},
+ data() {},
+ computed: {
+ ...mapGetters('userBooks', ['booksList'])
+ },
+ mounted() {
+ this.fetchUserBooks()
+ },
+ methods: {
+ ...mapActions('userBooks', ['fetchUserBooks'])
+ }
+}
+
+</script>
+
+<template>
+ <div class="">
+ <BooksViewerContainer>
+ <BooksViewerCard 
+ v-for="item in booksList"
+ :id="item.id"
+ :key="item.id"
+ :owner="item.owner"
+ :title="item.title"
+ :author="item.author"
+ :description="item.description"
+ :is_public="item.is_public"
+ :publication="item.publication"
+ :image_link="item.image_link"
+ :map_link="item.map_link"
+ :map_params_id="item.map_params_id"
+ :variables="item.variables"
+ :updated_at="item.updated_at"
+ />
+ </BooksViewerContainer>
+ </div>
+</template>

books-ui/src/components/3_organisms/BooksViewer/BooksViewerCard.vue

@@ -0,0 +1,96 @@
+<script>
+import BackgroundImage from '@atoms/BackgroundImage.vue';
+import moment from 'moment';
+
+export default {
+ name: 'BooksViewerCard',
+ components: {BackgroundImage},
+ props: {
+ id: {
+ type: String,
+ required: true
+ },
+ owner: {
+ type: String,
+ required: true
+ },
+ title: {
+ type: String,
+ required: true
+ },
+ author: {
+ type: String,
+ required: true
+ },
+ description: {
+ type: String,
+ required: true
+ },
+ is_public: {
+ type: Boolean,
+ required: true
+ },
+ publication: {
+ type: String,
+ required: false
+ },
+ image_link: {
+ type: String,
+ required: false
+ },
+ map_link: {
+ type: String,
+ required: false
+ },
+ map_params_id: {
+ type: String,
+ required: false
+ },
+ variables: {
+ type: Array,
+ required: false
+ },
+ updated_at: {
+ type: String,
+ required: true
+ }
+ },
+ data() {},
+ computed: {
+ formattedUpdatedAt() {
+ return moment(this.updated_at).format('MMMM Do YYYY, h:mm:ss a');
+ },
+ lastUpdated() {
+ moment.locale("ru");
+ return moment(this.updated_at).fromNow();
+ }
+ },
+ mounted() {},
+ methods: {}
+}
+
+</script>
+
+<template>
+ <div
+ class="relative shadow group border border-slate-300 rounded-md cursor-pointer transition-all
+ hover:rounded-xl hover:border-slate-500 hover:shadow-md
+ overflow-hidden
+ "
+ >
+ <div class="card text-slate-500">
+ <BackgroundImage 
+ :image_link="'https://cdn.britannica.com/45/5645-050-B9EC0205/head-treasure-flower-disk-flowers-inflorescence-ray.jpg'" 
+ class="opacity-0 group-hover:opacity-5 transition-all"
+ :alt="title"
+ v-if="false"
+ />
+ <div class="h-full w-full p-4">
+ <div>
+ <h3 class="text-lg font-bold mb-1">{{title}}</h3>
+ <p test-id="lastUpdated" class="text-xs">Обновлено {{lastUpdated}}</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>

books-ui/src/components/3_organisms/BooksViewer/BooksViewerContainer.vue

@@ -0,0 +1,17 @@
+<script>
+export default {
+ name: 'BooksViewerContainer',
+ components: {},
+ data() {},
+ computed: {},
+ mounted() {},
+ methods: {}
+}
+
+</script>
+
+<template>
+ <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 3xl:grid-cols-7 gap-3">
+ <slot />
+ </div>
+</template>

books-ui/src/components/5_pages/UserBooks/UserBooks.vue

@@ -1,7 +1,9 @@
 <script>
+import BooksViewer from '@organisms/BooksViewer/BooksViewer.vue';
+
 export default {
  name: 'UserBooks',
- components: {},
+ components: {BooksViewer},
  data() {},
  computed: {},
  mounted() {},
@@ -11,7 +13,7 @@ export default {
 </script>
 
 <template>
- <div class="">
- template
+ <div class="p-6">
+ <BooksViewer />
  </div>
 </template>

books-ui/src/main.js

@@ -8,6 +8,12 @@ import { store } from '@store'
 import VueTippy from 'vue-tippy'
 import Router from "@router"
 
+
+import moment from "moment/dist/moment"
+import ru from "moment/dist/locale/ru"
+
+moment.locale('ru', ru)
+
 createApp(App)
  .use(Router)
  .use(ramdaVue)

books-ui/src/services/apiServices/BooksApi.js

@@ -87,7 +87,7 @@ class BooksApi {
  const bookById = await this.getBookById(newBook.id)
  logFunction(bookById)
  logFunction("Обновление книги")
- const updatedBook = await this.updateBook({id: bookById.id, title: "Обновленная книга"})
+ const updatedBook = await this.updateBook({...bookById, title: "Обновленная книга"})
  logFunction(updatedBook)
  logFunction("Удаление книги")
  const deletedBook = await this.deleteBookById(bookById.id)

books-ui/src/store/modules/userBooks/index.js

@@ -24,7 +24,7 @@ const mutations = {
 };
 
 const actions = {
- async fetchBooks({ commit }) {
+ async fetchUserBooks({ commit }) {
  const booksList = await BooksService.getBooks()
  commit('setBooksList', booksList)
  },

books-ui/src/tests/components/1_atoms/ImageBackground.test.js

@@ -0,0 +1,16 @@
+import {test, describe, expect} from 'vitest'
+import { mount} from '@vue/test-utils'
+import BackgroundImage from '@atoms/BackgroundImage.vue';
+
+describe("tests of BackgroundImage", () => {
+ test('mount test of BackgroundImage', async () => {
+
+ const wrapper = mount(BackgroundImage, {
+ shallow: true,
+ })
+
+ expect(wrapper.exists()).toBe(true)
+ })
+})
+
+

books-ui/src/tests/components/2_molecules/VCardsContainer.test.js

@@ -0,0 +1,15 @@
+import {test, describe, expect} from 'vitest'
+import { mount} from '@vue/test-utils'
+import VCardsContainer from '@molecules/VCardsContainer.vue';
+
+describe("tests of VCardsContainer", () => {
+ test('mount test of VCardsContainer', async () => {
+
+ const wrapper = mount(VCardsContainer, {
+ shallow: true,
+ })
+
+ expect(wrapper.exists()).toBe(true)
+ })
+})
+