Bibliographie.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. <template>
  2. <MainContentLayout id="biblio">
  3. <template v-if="!content" #header>
  4. <span class="loading">Loading ...</span>
  5. </template>
  6. <template #header>
  7. <h1>
  8. <router-link :to="{ name:'bibliographie'}">Bibliographie</router-link>
  9. </h1>
  10. <nav>
  11. <ul>
  12. <li>
  13. <router-link
  14. :to="{ name:'bibliographie', params: { type: 'expressions'}}"
  15. >
  16. Expressions
  17. </router-link>
  18. </li>
  19. <li>
  20. <router-link
  21. :to="{ name:'bibliographie', params: { type: 'manifestations'}}"
  22. >
  23. Manifestations
  24. </router-link>
  25. </li>
  26. </ul>
  27. </nav>
  28. </template>
  29. <!-- default slot -->
  30. <!-- expressions list -->
  31. <template v-if="!uuid && type === 'expressions'">
  32. <ul class="item-list">
  33. <li v-for="item in expressions" :key="item.uuid">
  34. <h2>
  35. <router-link
  36. v-if="item.authors"
  37. :to="{ name:'bibliographieItem', params:{ type:type, uuid:item.uuid } }"
  38. >
  39. {{ item.authors }}
  40. </router-link>
  41. <span v-else>/!\ No authors /!\</span>
  42. </h2>
  43. <p class="date">{{ item.dates }}</p>
  44. <em class="titles">{{ item.titles }}</em>
  45. <aside v-if="item.manifestations.length">
  46. <h5
  47. @click.prevent="onToggleManifs"
  48. @keyup.enter="onToggleManifs"
  49. >Manifestations</h5>
  50. <ul>
  51. <li v-for="manif in item.manifestations" :key="manif.uuid">
  52. <span class="date">{{ manif.dates }} </span>
  53. <router-link
  54. :to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:manif.uuid } }"
  55. >
  56. <em>{{ manif.titles }}</em>
  57. </router-link>
  58. </li>
  59. </ul>
  60. </aside>
  61. </li>
  62. </ul>
  63. </template>
  64. <!-- manifestations list -->
  65. <template v-if="!uuid && type === 'manifestations'">
  66. <ul class="item-list manifestations">
  67. <li
  68. v-for="item in manifestations" :key="item.uuid"
  69. :class="isInActiveAuthors(item.authors)"
  70. >
  71. <div class="wrapper">
  72. <span class="date">{{ item.dates }} </span>
  73. <router-link
  74. :to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:item.uuid } }"
  75. >
  76. <em class="titles">{{ item.titles }}</em>
  77. </router-link>
  78. <!-- <p class="authors">{{ item.authors }}</p> -->
  79. </div>
  80. </li>
  81. </ul>
  82. </template>
  83. <!-- or item -->
  84. <template v-else>
  85. <div class="biblio-item">
  86. <h2>{{ item.authors }}</h2>
  87. <p v-if="item.dates" class="date">{{ item.dates }}</p>
  88. <p class="lieu">{{ item.lieu }}</p>
  89. <p class="titles">{{ item.titles }}</p>
  90. <p class="edition">{{ item.edition }}</p>
  91. <p class="extent">{{ item.extent }}</p>
  92. <p class="tei" v-html="item.tei" />
  93. <ul vi-if="item.manifestations.length" class="item-list">
  94. <li v-for="manif in item.manifestations" :key="manif.uuid">
  95. <router-link
  96. :to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:manif.uuid } }"
  97. v-html="manif.tei"
  98. />
  99. </li>
  100. </ul>
  101. <ul vi-if="item.idno.length" class="item-list">
  102. <li v-for="id in item.idno" :key="id.url">
  103. <a :href="id.url">{{ id.type }}: {{ id.url }}</a>
  104. </li>
  105. </ul>
  106. </div>
  107. </template>
  108. <template #nav>
  109. <ul v-if="!uuid && type === 'manifestations'" class="authors-filters">
  110. <li
  111. v-for="author in authors" :key="author"
  112. >
  113. <span
  114. :class="isInActiveAuthors(author)"
  115. @click.prevent="onToggleAuthors(author)"
  116. @keyup.enter="onToggleAuthors(author)"
  117. >{{ author }}</span>
  118. </li>
  119. </ul>
  120. </template>
  121. </MainContentLayout>
  122. </template>
  123. <script>
  124. import { REST } from 'api/rest-axios'
  125. import MainContentLayout from '../components/Layouts/MainContentLayout'
  126. export default {
  127. name: 'Bibliographie',
  128. components: {
  129. MainContentLayout
  130. },
  131. metaInfo: {
  132. title: 'Bibliographie'
  133. },
  134. props: {
  135. type: String,
  136. uuid: String
  137. },
  138. data: () => ({
  139. content: Array,
  140. manifestations: Array,
  141. expressions: Array,
  142. authors: Array,
  143. activeAuthors: Array,
  144. item: Array
  145. }),
  146. computed: {
  147. },
  148. watch: {
  149. $route (to, from) {
  150. console.log('watch $route to', to)
  151. // this.getContent()
  152. if (to.params.uuid) {
  153. this.getItem(to.params.type, to.params.uuid)
  154. }
  155. }
  156. },
  157. created () {
  158. // this.type = this.$route.params.type || 'expressions'
  159. // this.uuid = this.$route.params.id || null
  160. this.activeAuthors = []
  161. this.getContent()
  162. if (this.$route.params.uuid) {
  163. this.getItem(this.$route.params.type, this.$route.params.uuid)
  164. }
  165. },
  166. methods: {
  167. getContent () {
  168. REST.get(`${window.apipath}/bibliography/expressions`, {})
  169. .then(({ data }) => {
  170. console.log('Biblio REST expressions: data', data)
  171. if (data.content) {
  172. this.expressions = data.content
  173. REST.get(`${window.apipath}/bibliography/manifestations`, {})
  174. .then(({ data }) => {
  175. console.log('Biblio REST manifestations: data', data)
  176. if (data.content) {
  177. this.manifestations = data.content
  178. }
  179. this.parseContents()
  180. })
  181. .catch((error) => {
  182. console.warn('Issue with bibliographie manifestations', error)
  183. Promise.reject(error)
  184. })
  185. }
  186. })
  187. .catch((error) => {
  188. console.warn('Issue with bibliographie expressions', error)
  189. Promise.reject(error)
  190. })
  191. // // ?_format=json
  192. // REST.get(`${window.apipath}/bibliography/${this.type}/${this.uuid || ''}`, {})
  193. // .then(({ data }) => {
  194. // console.log('Biblio REST: data', data)
  195. // if (data.content) {
  196. // this.content = data.content
  197. // }
  198. // })
  199. // .catch((error) => {
  200. // console.warn('Issue with bibliographie', error)
  201. // Promise.reject(error)
  202. // })
  203. },
  204. getItem (type, uuid) {
  205. REST.get(`${window.apipath}/bibliography/${type}/${uuid}`, {})
  206. .then(({ data }) => {
  207. console.log('Biblio REST item: data', data)
  208. if (data.content) {
  209. this.item = data.content
  210. }
  211. })
  212. .catch((error) => {
  213. console.warn('Issue with bibliographie get item', error)
  214. Promise.reject(error)
  215. })
  216. },
  217. parseContents () {
  218. this.expressions = this.expressions.sort((a, b) => {
  219. let Adate = parseInt(a.dates)
  220. let Bdate = parseInt(b.dates)
  221. if (Adate < Bdate) {
  222. return -1
  223. } else if (Adate > Bdate) {
  224. return 1
  225. } else {
  226. return 0
  227. }
  228. })
  229. this.manifestations = this.manifestations.sort((a, b) => {
  230. let Adate = parseInt(a.dates)
  231. let Bdate = parseInt(b.dates)
  232. if (Adate < Bdate) {
  233. return -1
  234. } else if (Adate > Bdate) {
  235. return 1
  236. } else {
  237. return 0
  238. }
  239. })
  240. this.authors = []
  241. this.manifestations.forEach(manif => {
  242. // console.log('this.authors', this.authors)
  243. if (this.authors.indexOf(manif.authors) === -1) {
  244. this.authors.push(manif.authors)
  245. this.activeAuthors.push(manif.authors)
  246. }
  247. // console.log('authors', this.authors)
  248. })
  249. this.expressions.forEach((expr, i) => {
  250. let manifs = []
  251. this.manifestations.forEach((manif, j) => {
  252. if (manif.authors !== '' && manif.authors === expr.authors) {
  253. manifs.push(manif)
  254. }
  255. })
  256. this.expressions[i].manifestations = manifs
  257. })
  258. this.content = this.expressions
  259. // console.log(this.expressions)
  260. },
  261. onToggleManifs (e) {
  262. console.log('togle manifs', e)
  263. let aside = e.originalTarget.parentNode
  264. // console.log('aside', aside)
  265. aside.classList.toggle('opened')
  266. },
  267. isInActiveAuthors (authors) {
  268. return this.activeAuthors.indexOf(authors) !== -1 ? 'active' : null
  269. },
  270. onToggleAuthors (author) {
  271. if (this.activeAuthors.indexOf(author) === -1) {
  272. this.activeAuthors.push(author)
  273. } else {
  274. this.activeAuthors.splice(this.activeAuthors.indexOf(author), 1)
  275. }
  276. }
  277. }
  278. }
  279. </script>
  280. <style lang="scss" scoped>
  281. </style>