Library.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <div class="h-100 position-relative">
  3. <!-- BACKGROUND (mode) -->
  4. <component :is="mode" />
  5. <!-- FOREGROUND (texts) -->
  6. <section v-for="group in groups" :key="group.id" class="split-screen">
  7. <text-card :id="group.id" @open="openText(group, $event)" @close="closeText(group)" />
  8. <div>
  9. <text-card
  10. v-for="id in group.prod" :key="id"
  11. :id="id"
  12. @close="closeText(group, id)"
  13. />
  14. </div>
  15. </section>
  16. </div>
  17. </template>
  18. <script>
  19. import { CardList, CardMap, TreeMap } from './library'
  20. import TextCard from '@/components/text/TextCard'
  21. export default {
  22. name: 'Library',
  23. components: {
  24. CardList,
  25. CardMap,
  26. TreeMap,
  27. TextCard
  28. },
  29. metaInfo () {
  30. return {
  31. title: this.groups.length ? 'Bibliothèque - ' + this.groups[0].id : 'Bibliothèque',
  32. meta: [
  33. { charset: 'utf-8' },
  34. { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  35. ]
  36. }
  37. },
  38. props: {
  39. mode: { type: String, required: true },
  40. texts: { type: Array, required: true }
  41. },
  42. computed: {
  43. groups () {
  44. return this.texts.map(text => {
  45. const [id, ...prod] = text
  46. return { id, prod }
  47. })
  48. }
  49. },
  50. methods: {
  51. openText (group, id) {
  52. if (group.prod.includes(id)) return
  53. group.prod.push(id)
  54. this.updateQuery(this.groups)
  55. },
  56. closeText (group, id) {
  57. if (!id) {
  58. this.updateQuery(this.groups.filter(grp => grp !== group))
  59. } else {
  60. group.prod = group.prod.filter(id_ => id_ !== id)
  61. this.updateQuery(this.groups)
  62. }
  63. },
  64. updateQuery (groups) {
  65. // Update the route's query (will not reload the page) and let vue determine what changed.
  66. this.$router.push({
  67. query: {
  68. mode: this.mode,
  69. texts: groups.map(grp => [grp.id, ...grp.prod])
  70. }
  71. })
  72. }
  73. }
  74. }
  75. </script>
  76. <style lang="scss" scoped>
  77. </style>