admin-rendering.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template lang='pug'>
  2. v-container(fluid, fill-height, grid-list-lg)
  3. v-layout(row wrap)
  4. v-flex(xs12)
  5. .headline.primary--text Rendering
  6. .subheading.grey--text Configure how content is rendered
  7. v-layout.mt-3(row wrap)
  8. v-flex(lg3 xs12)
  9. v-toolbar(
  10. color='primary'
  11. dense
  12. flat
  13. dark
  14. )
  15. v-icon.mr-2 line_weight
  16. .subheading Pipeline
  17. v-expansion-panel.adm-rendering-pipeline
  18. v-expansion-panel-content(
  19. hide-actions
  20. v-for='core in cores'
  21. :key='core.key'
  22. )
  23. v-toolbar(
  24. slot='header'
  25. color='blue'
  26. dense
  27. dark
  28. flat
  29. )
  30. .body-2 {{core.input}}
  31. v-icon.mx-2 arrow_forward
  32. .caption {{core.output}}
  33. v-list(two-line, dense)
  34. v-list-tile(
  35. avatar
  36. v-for='rdr in core.children'
  37. :key='rdr.key'
  38. )
  39. v-list-tile-avatar
  40. v-icon(color='grey') {{rdr.icon}}
  41. v-list-tile-content
  42. v-list-tile-title {{rdr.title}}
  43. v-list-tile-sub-title {{rdr.description}}
  44. v-list-tile-avatar
  45. v-icon(color='green', small, v-if='rdr.isEnabled') lens
  46. v-icon(color='red', small, v-else) trip_origin
  47. v-divider.my-0
  48. v-flex(lg9 xs12)
  49. v-card
  50. v-toolbar(
  51. color='grey darken-1'
  52. dark
  53. flat
  54. dense
  55. )
  56. v-icon.mr-2 settings_applications
  57. .subheading Markdown
  58. v-icon chevron_right
  59. .subheading Core
  60. v-spacer
  61. v-btn(flat, disabled)
  62. v-icon(left) wrap_text
  63. span Bypass
  64. v-btn(flat, disabled)
  65. v-icon(left) clear
  66. span Remove
  67. v-card-text
  68. v-switch(
  69. v-model='linkify'
  70. label='Automatically convert links'
  71. color='primary'
  72. persistent-hint
  73. hint='Links will automatically be converted to clickable links.'
  74. )
  75. v-divider.mt-3
  76. v-switch(
  77. v-model='linkify'
  78. label='Automatically convert line breaks'
  79. color='primary'
  80. persistent-hint
  81. hint='Add linebreaks within paragraphs.'
  82. )
  83. v-divider.mt-3
  84. v-switch(
  85. v-model='linkify'
  86. label='Highlight code blocks'
  87. color='primary'
  88. persistent-hint
  89. hint='Add syntax coloring to code blocks.'
  90. )
  91. v-select.mt-3(
  92. :items='["Light", "Dark"]'
  93. v-model='codeTheme'
  94. label='Code Color Theme'
  95. outline
  96. background-color='grey lighten-2'
  97. )
  98. v-card-chin
  99. v-btn(
  100. color='primary'
  101. )
  102. v-icon(left) check
  103. span Apply Configuration
  104. </template>
  105. <script>
  106. import _ from 'lodash'
  107. import renderersQuery from 'gql/admin/rendering/rendering-query-renderers.gql'
  108. export default {
  109. data() {
  110. return {
  111. linkify: true,
  112. codeTheme: 'Light',
  113. renderers: []
  114. }
  115. },
  116. computed: {
  117. cores() {
  118. return _.filter(this.renderers, ['dependsOn', null]).map(core => {
  119. core.children = _.concat([_.cloneDeep(core)], _.filter(this.renderers, ['dependsOn', core.key]))
  120. return core
  121. })
  122. }
  123. },
  124. apollo: {
  125. renderers: {
  126. query: renderersQuery,
  127. fetchPolicy: 'network-only',
  128. update: (data) => _.cloneDeep(data.rendering.renderers).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: JSON.parse(cfg.value)}))})),
  129. watchLoading (isLoading) {
  130. this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-rendering-refresh')
  131. }
  132. }
  133. }
  134. }
  135. </script>
  136. <style lang='scss'>
  137. .adm-rendering-pipeline {
  138. border-top: 1px solid #FFF;
  139. .v-expansion-panel__header {
  140. padding: 0 0;
  141. }
  142. }
  143. </style>