2
0

admin-navigation.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. <template lang='pug'>
  2. v-container(fluid, grid-list-lg)
  3. v-layout(row wrap)
  4. v-flex(xs12)
  5. .admin-header
  6. img.animated.fadeInUp(src='/svg/icon-triangle-arrow.svg', alt='Navigation', style='width: 80px;')
  7. .admin-header-title
  8. .headline.primary--text.animated.fadeInLeft {{$t('navigation.title')}}
  9. .subtitle-1.grey--text.animated.fadeInLeft.wait-p4s {{$t('navigation.subtitle')}}
  10. v-spacer
  11. v-btn.animated.fadeInDown.wait-p2s.mr-3(outlined, color='grey', @click='refresh', large)
  12. v-icon mdi-refresh
  13. v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
  14. v-icon(left) mdi-check
  15. span {{$t('common:actions.apply')}}
  16. v-container.pa-0.mt-3(fluid, grid-list-lg)
  17. v-row(dense)
  18. v-col(cols='3')
  19. v-card.animated.fadeInUp
  20. v-toolbar(color='teal', dark, dense, flat, height='56')
  21. v-toolbar-title.subtitle-1 {{$t('admin:navigation.mode')}}
  22. v-list(nav, two-line)
  23. v-list-item-group(v-model='config.mode', mandatory, :color='$vuetify.theme.dark ? `teal lighten-3` : `teal`')
  24. v-list-item(value='TREE')
  25. v-list-item-avatar
  26. img(src='/svg/icon-tree-structure-dotted.svg', alt='Site Tree')
  27. v-list-item-content
  28. v-list-item-title {{$t('admin:navigation.modeSiteTree.title')}}
  29. v-list-item-subtitle {{$t('admin:navigation.modeSiteTree.description')}}
  30. v-list-item-avatar
  31. v-icon(v-if='$vuetify.theme.dark', :color='config.mode === `TREE` ? `teal lighten-3` : `grey darken-2`') mdi-check-circle
  32. v-icon(v-else, :color='config.mode === `TREE` ? `teal` : `grey lighten-3`') mdi-check-circle
  33. v-list-item(value='MIXED')
  34. v-list-item-avatar
  35. img(src='/svg/icon-user-menu-male-dotted.svg', alt='Custom Navigation')
  36. v-list-item-content
  37. v-list-item-title {{$t('admin:navigation.modeCustom.title')}}
  38. v-list-item-subtitle {{$t('admin:navigation.modeCustom.description')}}
  39. v-list-item-avatar
  40. v-icon(v-if='$vuetify.theme.dark', :color='config.mode === `MIXED` ? `teal lighten-3` : `grey darken-2`') mdi-check-circle
  41. v-icon(v-else, :color='config.mode === `MIXED` ? `teal` : `grey lighten-3`') mdi-check-circle
  42. v-list-item(value='NONE')
  43. v-list-item-avatar
  44. img(src='/svg/icon-cancel-dotted.svg', alt='None')
  45. v-list-item-content
  46. v-list-item-title {{$t('admin:navigation.modeNone.title')}}
  47. v-list-item-subtitle {{$t('admin:navigation.modeNone.description')}}
  48. v-list-item-avatar
  49. v-icon(v-if='$vuetify.theme.dark', :color='config.mode === `none` ? `teal lighten-3` : `grey darken-2`') mdi-check-circle
  50. v-icon(v-else, :color='config.mode === `none` ? `teal` : `grey lighten-3`') mdi-check-circle
  51. v-col(cols='9', v-if='config.mode === `MIXED`')
  52. v-card.animated.fadeInUp.wait-p2s
  53. v-row(no-gutters, align='stretch')
  54. v-col(style='flex: 0 0 350px;')
  55. v-card.grey(flat, style='height: 100%; border-radius: 4px 0 0 4px;', :class='$vuetify.theme.dark ? `darken-4-l5` : `lighten-3`')
  56. .teal.lighten-1.pa-2.d-flex(style='margin-bottom: 1px; height:56px;')
  57. v-select(
  58. :disabled='locales.length < 2'
  59. label='Locale'
  60. hide-details
  61. solo
  62. flat
  63. background-color='teal darken-2'
  64. dark
  65. dense
  66. v-model='currentLang'
  67. :items='locales'
  68. item-text='nativeName'
  69. item-value='code'
  70. )
  71. v-tooltip(top)
  72. template(v-slot:activator='{ on }')
  73. v-btn.ml-2(icon, tile, color='white', v-on='on', @click='copyFromLocaleDialogIsShown = true')
  74. v-icon mdi-arrange-send-backward
  75. span {{$t('admin:navigation.copyFromLocale')}}
  76. v-list.py-2(dense, nav, dark, class='blue darken-2', style='border-radius: 0;')
  77. v-list-item(v-if='currentTree.length < 1')
  78. v-list-item-avatar(size='24'): v-icon(color='blue lighten-3') mdi-alert
  79. v-list-item-content
  80. em.caption.blue--text.text--lighten-4 {{$t('navigation.emptyList')}}
  81. draggable(v-model='currentTree')
  82. template(v-for='navItem in currentTree')
  83. v-list-item(
  84. v-if='navItem.kind === "link"'
  85. :key='navItem.id'
  86. :class='(navItem === current) ? "blue" : ""'
  87. @click='selectItem(navItem)'
  88. )
  89. v-list-item-avatar(size='24', tile): v-icon {{navItem.icon}}
  90. v-list-item-title {{navItem.label}}
  91. .py-2.clickable(
  92. v-else-if='navItem.kind === "divider"'
  93. :key='navItem.id'
  94. :class='(navItem === current) ? "blue" : ""'
  95. @click='selectItem(navItem)'
  96. )
  97. v-divider
  98. v-subheader.pl-4.clickable(
  99. v-else-if='navItem.kind === "header"'
  100. :key='navItem.id'
  101. :class='(navItem === current) ? "blue" : ""'
  102. @click='selectItem(navItem)'
  103. ) {{navItem.label}}
  104. v-card-chin
  105. v-menu(offset-y, bottom, min-width='200px', style='flex: 1 1;')
  106. template(v-slot:activator='{ on }')
  107. v-btn(v-on='on', color='primary', depressed, block)
  108. v-icon(left) mdi-plus
  109. span {{$t('common:actions.add')}}
  110. v-list
  111. v-list-item(@click='addItem("link")')
  112. v-list-item-avatar(size='24'): v-icon mdi-link
  113. v-list-item-title {{$t('navigation.link')}}
  114. v-list-item(@click='addItem("header")')
  115. v-list-item-avatar(size='24'): v-icon mdi-format-title
  116. v-list-item-title {{$t('navigation.header')}}
  117. v-list-item(@click='addItem("divider")')
  118. v-list-item-avatar(size='24'): v-icon mdi-minus
  119. v-list-item-title {{$t('navigation.divider')}}
  120. v-col
  121. v-card(flat, style='border-radius: 0 4px 4px 0;')
  122. template(v-if='current.kind === "link"')
  123. v-toolbar(height='56', color='teal lighten-1', flat, dark)
  124. .subtitle-1 {{$t('navigation.edit', { kind: $t('navigation.link') })}}
  125. v-spacer
  126. v-btn.px-5(color='white', outlined, @click='deleteItem(current)')
  127. v-icon(left) mdi-delete
  128. span {{$t('navigation.delete', { kind: $t('navigation.link') })}}
  129. v-card-text
  130. v-text-field(
  131. outlined
  132. :label='$t("navigation.label")'
  133. prepend-icon='mdi-format-title'
  134. v-model='current.label'
  135. counter='255'
  136. )
  137. v-text-field(
  138. outlined
  139. :label='$t("navigation.icon")'
  140. prepend-icon='mdi-dice-5'
  141. v-model='current.icon'
  142. hide-details
  143. )
  144. .caption.pt-3.pl-5 The default icon set is #[strong Material Design Icons]. In order to use another icon set, you must first select it in the Theme administration section.
  145. .caption.pt-3.pl-5: strong Material Design Icons
  146. .caption.pl-5 Refer to the #[a(href='https://materialdesignicons.com/', target='_blank') Material Design Icons Reference] for the list of all possible values. You must prefix all values with #[code mdi-], e.g. #[code mdi-home]
  147. .caption.pt-3.pl-5: strong Font Awesome 5
  148. .caption.pl-5 Refer to the #[a(href='https://fontawesome.com/icons?d=gallery&m=free', target='_blank') Font Awesome 5 Reference] for the list of all possible values. You must prefix all values with #[code fas fa-], e.g. #[code fas fa-home]. Note that some icons use different prefixes (e.g. #[code fab], #[code fad], #[code fal], #[code far]).
  149. .caption.pt-3.pl-5: strong Font Awesome 4
  150. .caption.pl-5 Refer to the #[a(href='https://fontawesome.com/v4.7.0/icons/', target='_blank') Font Awesome 4 Reference] for the list of all possible values. You must prefix all values with #[code fa fa-], e.g. #[code fa fa-home]
  151. v-divider
  152. v-card-text
  153. v-select(
  154. outlined
  155. :label='$t("navigation.targetType")'
  156. prepend-icon='mdi-near-me'
  157. :items='navTypes'
  158. v-model='current.targetType'
  159. hide-details
  160. )
  161. v-text-field.mt-4(
  162. v-if='current.targetType === `external`'
  163. outlined
  164. :label='$t("navigation.target")'
  165. prepend-icon='mdi-near-me'
  166. v-model='current.target'
  167. hide-details
  168. )
  169. .d-flex.align-center.mt-4(v-else-if='current.targetType === "page"')
  170. v-btn.ml-8(
  171. color='primary'
  172. dark
  173. @click='selectPage'
  174. )
  175. v-icon(left) mdi-magnify
  176. span {{$t('admin:navigation.selectPageButton')}}
  177. .caption.ml-4.primary--text {{current.target}}
  178. v-text-field(
  179. v-else-if='current.targetType === `search`'
  180. outlined
  181. :label='$t("navigation.navType.searchQuery")'
  182. prepend-icon='search'
  183. v-model='current.target'
  184. )
  185. v-divider
  186. template(v-else-if='current.kind === "header"')
  187. v-toolbar(height='56', color='teal lighten-1', flat, dark)
  188. .subtitle-1 {{$t('navigation.edit', { kind: $t('navigation.header') })}}
  189. v-spacer
  190. v-btn.px-5(color='white', outlined, @click='deleteItem(current)')
  191. v-icon(left) mdi-delete
  192. span {{$t('navigation.delete', { kind: $t('navigation.header') })}}
  193. v-card-text
  194. v-text-field(
  195. outlined
  196. :label='$t("navigation.label")'
  197. prepend-icon='mdi-format-title'
  198. v-model='current.label'
  199. )
  200. v-divider
  201. div(v-else-if='current.kind === "divider"')
  202. v-toolbar(height='56', color='teal lighten-1', flat, dark)
  203. .subtitle-1 {{$t('navigation.edit', { kind: $t('navigation.divider') })}}
  204. v-spacer
  205. v-btn.px-5(color='white', outlined, @click='deleteItem(current)')
  206. v-icon(left) mdi-delete
  207. span {{$t('navigation.delete', { kind: $t('navigation.divider') })}}
  208. v-card-text(v-if='current.kind')
  209. v-radio-group.pl-8(v-model='current.visibilityMode', mandatory, hide-details)
  210. v-radio(:label='$t("admin:navigation.visibilityMode.all")', value='all', color='primary')
  211. v-radio.mt-3(:label='$t("admin:navigation.visibilityMode.restricted")', value='restricted', color='primary')
  212. .pl-8
  213. v-select.pl-8.mt-3(
  214. item-text='name'
  215. item-value='id'
  216. outlined
  217. prepend-icon='mdi-account-group'
  218. label='Groups'
  219. :disabled='current.visibilityMode !== `restricted`'
  220. v-model='current.visibilityGroups'
  221. :items='groups'
  222. persistent-hint
  223. clearable
  224. multiple
  225. )
  226. template(v-else)
  227. v-toolbar(height='56', color='teal lighten-1', flat, dark)
  228. v-card-text.grey--text(v-if='currentTree.length > 0') {{$t('navigation.noSelectionText')}}
  229. v-card-text.grey--text(v-else) {{$t('navigation.noItemsText')}}
  230. v-dialog(v-model='copyFromLocaleDialogIsShown', max-width='650', persistent)
  231. v-card
  232. .dialog-header.is-short.is-teal
  233. v-icon.mr-3(color='white') mdi-arrange-send-backward
  234. span {{$t('admin:navigation.copyFromLocale')}}
  235. v-card-text.pt-5
  236. .body-2 {{$t('admin:navigation.copyFromLocaleInfoText')}}
  237. v-select.mt-3(
  238. :items='locales'
  239. item-text='nativeName'
  240. item-value='code'
  241. outlined
  242. prepend-icon='mdi-web'
  243. v-model='copyFromLocaleCode'
  244. :label='$t(`admin:navigation.sourceLocale`)'
  245. :hint='$t(`admin:navigation.sourceLocaleHint`)'
  246. persistent-hint
  247. )
  248. v-card-chin
  249. v-spacer
  250. v-btn(text, @click='copyFromLocaleDialogIsShown = false') {{$t('common:actions.cancel')}}
  251. v-btn.px-3(depressed, color='primary', @click='copyFromLocale')
  252. v-icon(left) mdi-chevron-right
  253. span {{$t('common:actions.copy')}}
  254. page-selector(mode='select', v-model='selectPageModal', :open-handler='selectPageHandle', path='home', :locale='currentLang')
  255. </template>
  256. <script>
  257. import _ from 'lodash'
  258. import gql from 'graphql-tag'
  259. import { v4 as uuid } from 'uuid'
  260. import groupsQuery from 'gql/admin/users/users-query-groups.gql'
  261. import draggable from 'vuedraggable'
  262. /* global siteConfig, siteLangs */
  263. export default {
  264. components: {
  265. draggable
  266. },
  267. data() {
  268. return {
  269. selectPageModal: false,
  270. trees: [],
  271. current: {},
  272. currentLang: siteConfig.lang,
  273. groups: [],
  274. copyFromLocaleDialogIsShown: false,
  275. config: {
  276. mode: 'NONE'
  277. },
  278. allLocales: [],
  279. copyFromLocaleCode: 'en'
  280. }
  281. },
  282. computed: {
  283. navTypes () {
  284. return [
  285. { text: this.$t('navigation.navType.external'), value: 'external' },
  286. { text: this.$t('navigation.navType.home'), value: 'home' },
  287. { text: this.$t('navigation.navType.page'), value: 'page' }
  288. // { text: this.$t('navigation.navType.searchQuery'), value: 'search' }
  289. ]
  290. },
  291. locales () {
  292. return _.intersectionBy(this.allLocales, _.unionBy(siteLangs, [{ code: 'en' }, { code: siteConfig.lang }], 'code'), 'code')
  293. },
  294. currentTree: {
  295. get () {
  296. return _.get(_.find(this.trees, ['locale', this.currentLang]), 'items', null) || []
  297. },
  298. set (val) {
  299. const tree = _.find(this.trees, ['locale', this.currentLang])
  300. if (tree) {
  301. tree.items = val
  302. } else {
  303. this.trees = [...this.trees, {
  304. locale: this.currentLang,
  305. items: val
  306. }]
  307. }
  308. }
  309. }
  310. },
  311. watch: {
  312. currentLang (newValue, oldValue) {
  313. this.$nextTick(() => {
  314. if (this.currentTree.length > 0) {
  315. this.current = this.currentTree[0]
  316. } else {
  317. this.current = {}
  318. }
  319. })
  320. }
  321. },
  322. methods: {
  323. addItem(kind) {
  324. let newItem = {
  325. id: uuid(),
  326. kind,
  327. visibilityMode: 'all',
  328. visibilityGroups: []
  329. }
  330. switch (kind) {
  331. case 'link':
  332. newItem = {
  333. ...newItem,
  334. label: this.$t('navigation.untitled', { kind: this.$t(`navigation.link`) }),
  335. icon: 'mdi-chevron-right',
  336. targetType: 'home',
  337. target: ''
  338. }
  339. break
  340. case 'header':
  341. newItem.label = this.$t('navigation.untitled', { kind: this.$t(`navigation.header`) })
  342. break
  343. }
  344. this.currentTree = [...this.currentTree, newItem]
  345. this.current = newItem
  346. },
  347. deleteItem(item) {
  348. this.currentTree = _.pull(this.currentTree, item)
  349. this.current = {}
  350. },
  351. selectItem(item) {
  352. this.current = item
  353. },
  354. selectPage() {
  355. this.selectPageModal = true
  356. },
  357. selectPageHandle ({ path, locale }) {
  358. this.current.target = `/${locale}/${path}`
  359. },
  360. copyFromLocale () {
  361. this.copyFromLocaleDialogIsShown = false
  362. this.currentTree = [...this.currentTree, ..._.get(_.find(this.trees, ['locale', this.copyFromLocaleCode]), 'items', null) || []]
  363. },
  364. async save() {
  365. this.$store.commit(`loadingStart`, 'admin-navigation-save')
  366. try {
  367. const resp = await this.$apollo.mutate({
  368. mutation: gql`
  369. mutation ($tree: [NavigationTreeInput]!, $mode: NavigationMode!) {
  370. navigation{
  371. updateTree(tree: $tree) {
  372. responseResult {
  373. succeeded
  374. errorCode
  375. slug
  376. message
  377. }
  378. },
  379. updateConfig(mode: $mode) {
  380. responseResult {
  381. succeeded
  382. errorCode
  383. slug
  384. message
  385. }
  386. }
  387. }
  388. }
  389. `,
  390. variables: {
  391. tree: this.trees,
  392. mode: this.config.mode
  393. }
  394. })
  395. if (_.get(resp, 'data.navigation.updateTree.responseResult.succeeded', false) && _.get(resp, 'data.navigation.updateConfig.responseResult.succeeded', false)) {
  396. this.$store.commit('showNotification', {
  397. message: this.$t('navigation.saveSuccess'),
  398. style: 'success',
  399. icon: 'check'
  400. })
  401. } else {
  402. throw new Error(_.get(resp, 'data.navigation.updateTree.responseResult.message', 'An unexpected error occured.'))
  403. }
  404. } catch (err) {
  405. this.$store.commit('pushGraphError', err)
  406. }
  407. this.$store.commit(`loadingStop`, 'admin-navigation-save')
  408. },
  409. async refresh() {
  410. await this.$apollo.queries.trees.refetch()
  411. this.current = {}
  412. this.$store.commit('showNotification', {
  413. message: 'Navigation has been refreshed.',
  414. style: 'success',
  415. icon: 'cached'
  416. })
  417. }
  418. },
  419. apollo: {
  420. config: {
  421. query: gql`
  422. {
  423. navigation {
  424. config {
  425. mode
  426. }
  427. }
  428. }
  429. `,
  430. fetchPolicy: 'network-only',
  431. update: (data) => _.cloneDeep(data.navigation.config),
  432. watchLoading (isLoading) {
  433. this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-navigation-config')
  434. }
  435. },
  436. trees: {
  437. query: gql`
  438. {
  439. navigation {
  440. tree {
  441. locale
  442. items {
  443. id
  444. kind
  445. label
  446. icon
  447. targetType
  448. target
  449. visibilityMode
  450. visibilityGroups
  451. }
  452. }
  453. }
  454. }
  455. `,
  456. fetchPolicy: 'network-only',
  457. update: (data) => _.cloneDeep(data.navigation.tree),
  458. watchLoading (isLoading) {
  459. this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-navigation-tree')
  460. }
  461. },
  462. groups: {
  463. query: groupsQuery,
  464. fetchPolicy: 'network-only',
  465. update: (data) => data.groups.list,
  466. watchLoading (isLoading) {
  467. this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-navigation-groups')
  468. }
  469. },
  470. allLocales: {
  471. query: gql`
  472. {
  473. localization {
  474. locales {
  475. code
  476. name
  477. nativeName
  478. }
  479. }
  480. }
  481. `,
  482. fetchPolicy: 'network-only',
  483. update: (data) => data.localization.locales,
  484. watchLoading (isLoading) {
  485. this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-navigation-locales')
  486. }
  487. }
  488. }
  489. }
  490. </script>
  491. <style lang='scss' scoped>
  492. .clickable {
  493. cursor: pointer;
  494. &:hover {
  495. background-color: rgba(mc('blue', '500'), .25);
  496. }
  497. }
  498. </style>