IndexOperum.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <MainContentLayout id="index-operum" class="index">
  3. <template v-slot:header>
  4. <h1>Œuvres</h1>
  5. <span v-if="!items.length" class="loading">Loading ...</span>
  6. </template>
  7. <ul v-if="items.length" class="item-list">
  8. <li
  9. v-for="item in items"
  10. :key="item.uuid"
  11. :class="{ hidden: activeLetter && item.letter !== activeLetter }"
  12. >
  13. <OperumItem :item="item" />
  14. </li>
  15. </ul>
  16. <template v-slot:nav>
  17. <div v-if="items.length" class="abc">
  18. <ul>
  19. <li :class="{ inactive: activeLetter }">
  20. <span
  21. @click.prevent="onClickLetter(null)"
  22. @keyup.enter="onClickLetter(null)"
  23. >tout</span>
  24. </li>
  25. <li
  26. v-for="l in letters" :key="l"
  27. :class="{ inactive: activeLetter && l !== activeLetter }"
  28. >
  29. <span
  30. @click.prevent="onClickLetter(l)"
  31. @keyup.enter="onClickLetter(l)"
  32. >{{ l }}</span>
  33. </li>
  34. </ul>
  35. </div>
  36. </template>
  37. </MainContentLayout>
  38. </template>
  39. <script>
  40. import { REST } from 'api/rest-axios'
  41. import MainContentLayout from '../components/Layouts/MainContentLayout'
  42. import OperumItem from '../components/Content/OperumItem'
  43. export default {
  44. name: 'IndexOperum',
  45. metaInfo: {
  46. title: 'Index Operum'
  47. },
  48. components: {
  49. OperumItem,
  50. MainContentLayout
  51. },
  52. data: () => ({
  53. items: [],
  54. letters: [],
  55. activeLetter: null
  56. }),
  57. beforeCreate () {
  58. REST.get(`${window.apipath}/indexOperum`, {})
  59. .then(({ data }) => {
  60. console.log('index operum REST: data', data)
  61. if (data.content.length) {
  62. this.items = data.content.sort((a, b) => {
  63. let Aletter = a.letter.toLowerCase()
  64. let Bletter = b.letter.toLowerCase()
  65. if (Aletter < Bletter) {
  66. return -1
  67. } else if (Aletter > Bletter) {
  68. return 1
  69. } else {
  70. return 0
  71. }
  72. })
  73. }
  74. for (let i = 0; i < this.items.length; i++) {
  75. if (this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) {
  76. this.letters.push(this.items[i].letter.toLowerCase())
  77. }
  78. }
  79. this.letters = this.letters.sort()
  80. })
  81. .catch((error) => {
  82. console.warn('Issue with index operum', error)
  83. Promise.reject(error)
  84. })
  85. },
  86. methods: {
  87. onClickLetter (l) {
  88. this.activeLetter = l
  89. // console.log('activeLetter', this.activeLetter)
  90. }
  91. }
  92. }
  93. </script>
  94. <style lang="scss" scoped>
  95. </style>