feat: footer + data store fixes

server/models/pages.js

@@ -956,7 +956,7 @@ module.exports = class Page extends Model {
         } else {
           // -> No render? Possible duplicate issue
           /* TODO: Detect duplicate and delete */
-          throw new Error('Error while fetching page. Duplicate entry detected. Reload the page to try again.')
+          throw new Error('Error while fetching page. No rendered version of this page exists. Try to edit the page and save it again.')
         }
       }
     }

ux/src/components/FooterNav.vue

@@ -0,0 +1,86 @@
+<template lang="pug">
+q-footer.site-footer
+  .site-footer-line
+    i18n-t.q-mr-xs(
+      v-if='hasSiteFooter'
+      :keypath='isCopyright ? `common.footerCopyright` : `common.footerLicense`'
+      tag='span'
+      )
+      template(#company)
+        strong {{siteStore.company}}
+      template(#year)
+        span {{currentYear}}
+      template(#license)
+        span {{t(`common.license.` + siteStore.contentLicense)}}
+    i18n-t(
+      :keypath='props.generic ? `common.footerGeneric` : `common.footerPoweredBy`'
+      tag='span'
+      )
+      template(#link)
+        a(href='https://js.wiki', target='_blank', ref='noopener noreferrer'): strong Wiki.js
+  .site-footer-line(v-if='!props.generic && siteStore.footerExtra')
+    span {{ siteStore.footerExtra }}
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useSiteStore } from 'src/stores/site'
+
+// PROPS
+
+const props = defineProps({
+  generic: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// STORES
+
+const siteStore = useSiteStore()
+
+// I18N
+
+const { t } = useI18n()
+
+// DATA
+
+const currentYear = new Date().getFullYear()
+
+// COMPUTED
+
+const hasSiteFooter = computed(() => {
+  return !props.generic && siteStore.company && siteStore.contentLicense
+})
+const isCopyright = computed(() => {
+  return siteStore.contentLicense === 'alr'
+})
+</script>
+
+<style lang="scss">
+.site-footer {
+  background-color: $grey-3;
+  color: $grey-8;
+  padding: 4px 12px;
+  font-size: 11px;
+
+  &-line {
+    text-align: center;
+
+    a {
+      text-decoration: none;
+      color: inherit;
+
+      &:hover, &:focus {
+        text-decoration: underline;
+      }
+    }
+
+    & + .q-bar {
+      height: 18px;
+    }
+  }
+}
+</style>

ux/src/components/UserEditOverlay.vue

@@ -143,7 +143,7 @@ q-layout(view='hHh lpR fFf', container)
                   q-select(
                     outlined
                     v-model='state.user.prefs.timezone'
-                    :options='dataStore.timezones'
+                    :options='timezones'
                     option-value='value'
                     option-label='text'
                     emit-value
@@ -515,7 +515,6 @@ import { computed, onMounted, reactive, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 
 import { useAdminStore } from 'src/stores/admin'
-import { useDataStore } from 'src/stores/data'
 
 import UserChangePwdDialog from './UserChangePwdDialog.vue'
 import UtilCodeEditor from './UtilCodeEditor.vue'
@@ -527,7 +526,6 @@ const $q = useQuasar()
 // STORES
 
 const adminStore = useAdminStore()
-const dataStore = useDataStore()
 
 // ROUTER
 
@@ -562,6 +560,8 @@ const sections = [
   { key: 'operations', text: t('admin.users.operations'), icon: 'las la-tools' }
 ]
 
+const timezones = Intl.supportedValuesOf('timeZone')
+
 // COMPUTED
 
 const metadata = computed({

ux/src/i18n/locales/en.json

@@ -1185,9 +1185,10 @@
   "common.field.lastUpdated": "Last Updated",
   "common.field.name": "Name",
   "common.field.task": "Task",
-  "common.footer.copyright": "© {year} {company}. All rights reserved.",
+  "common.footerGeneric": "Powered by {link}, an open source project.",
-  "common.footer.license": "Content is available under the {license}, by {company}.",
+  "common.footerPoweredBy": "Powered by {link}",
-  "common.footer.poweredBy": "Powered by",
+  "common.footerCopyright": "© {year} {company}. All rights reserved.",
+  "common.footerLicense": "Content is available under the {license}, by {company}.",
   "common.header.account": "Account",
   "common.header.admin": "Administration",
   "common.header.assets": "Assets",

ux/src/layouts/AdminLayout.vue

@@ -205,9 +205,7 @@ q-layout.admin(view='hHh Lpr lff')
     transition-hide='jump-down'
     )
     component(:is='overlays[adminStore.overlay]')
-  q-footer.admin-footer
+  footer-nav.admin-footer(generic)
-    q-bar.justify-center(dense)
-      span(style='font-size: 11px;') Powered by #[a(href='https://js.wiki', target='_blank'): strong Wiki.js], an open source project.
 </template>
 
 <script setup>
@@ -222,6 +220,7 @@ import { useSiteStore } from '../stores/site'
 // COMPONENTS
 
 import AccountMenu from '../components/AccountMenu.vue'
+import FooterNav from 'src/components/FooterNav.vue'
 const overlays = {
   GroupEditOverlay: defineAsyncComponent(() => import('../components/GroupEditOverlay.vue')),
   UserEditOverlay: defineAsyncComponent(() => import('../components/UserEditOverlay.vue'))

ux/src/layouts/MainLayout.vue

@@ -76,9 +76,7 @@ q-layout(view='hHh Lpr lff')
         round
         size='md'
       )
-  q-footer
+  footer-nav
-    q-bar.justify-center(dense)
-      span(style='font-size: 11px;') © Cyberdyne Systems Corp. 2020 | Powered by #[strong Wiki.js]
 </template>
 
 <script setup>
@@ -91,8 +89,8 @@ import { useSiteStore } from '../stores/site'
 
 // COMPONENTS
 
-import AccountMenu from '../components/AccountMenu.vue'
 import HeaderNav from '../components/HeaderNav.vue'
+import FooterNav from 'src/components/FooterNav.vue'
 
 // QUASAR
 
@@ -121,11 +119,7 @@ useMeta({
 
 const leftDrawerOpen = ref(true)
 const search = ref('')
-const user = reactive({
+
-  name: 'John Doe',
-  email: 'test@example.com',
-  picture: null
-})
 const thumbStyle = {
   right: '2px',
   borderRadius: '5px',

ux/src/layouts/ProfileLayout.vue

@@ -39,9 +39,7 @@ q-layout(view='hHh Lpr lff')
             q-item-section
               q-item-label.text-negative {{ t('common.header.logout') }}
       router-view
-  q-footer
+  footer-nav
-    q-bar.justify-center(dense)
-      span(style='font-size: 11px;') © Cyberdyne Systems Corp. 2020 | Powered by #[strong Wiki.js]
 </template>
 
 <script setup>
@@ -52,7 +50,8 @@ import { onMounted, reactive, watch } from 'vue'
 import { useSiteStore } from 'src/stores/site'
 import { useUserStore } from 'src/stores/user'
 
-import HeaderNav from '../components/HeaderNav.vue'
+import HeaderNav from 'src/components/HeaderNav.vue'
+import FooterNav from 'src/components/FooterNav.vue'
 
 // QUASAR
 

ux/src/pages/AdminExtensions.vue

@@ -106,7 +106,6 @@ import { computed, onMounted, reactive, watch } from 'vue'
 
 import { useAdminStore } from 'src/stores/admin'
 import { useSiteStore } from 'src/stores/site'
-import { useDataStore } from 'src/stores/data'
 
 // QUASAR
 
@@ -116,7 +115,6 @@ const $q = useQuasar()
 
 const adminStore = useAdminStore()
 const siteStore = useSiteStore()
-const dataStore = useDataStore()
 
 // I18N
 

ux/src/pages/AdminGeneral.vue

@@ -330,7 +330,7 @@ q-page.admin-general
             q-select(
               outlined
               v-model='state.config.defaults.timezone'
-              :options='dataStore.timezones'
+              :options='timezones'
               option-value='value'
               option-label='text'
               emit-value
@@ -431,7 +431,6 @@ import { onMounted, reactive, watch } from 'vue'
 
 import { useAdminStore } from 'src/stores/admin'
 import { useSiteStore } from 'src/stores/site'
-import { useDataStore } from 'src/stores/data'
 
 // QUASAR
 
@@ -441,7 +440,6 @@ const $q = useQuasar()
 
 const adminStore = useAdminStore()
 const siteStore = useSiteStore()
-const dataStore = useDataStore()
 
 // I18N
 
@@ -520,6 +518,8 @@ const timeFormats = [
   { value: '24h', label: t('admin.general.defaultTimeFormat24h') }
 ]
 
+const timezones = Intl.supportedValuesOf('timeZone')
+
 const rulesTitle = [
   val => /^[^<>"]+$/.test(val) || t('admin.general.siteTitleInvalidChars')
 ]

ux/src/pages/AdminLocale.vue

@@ -156,7 +156,6 @@ import { computed, onMounted, reactive, watch } from 'vue'
 
 import { useAdminStore } from 'src/stores/admin'
 import { useSiteStore } from 'src/stores/site'
-import { useDataStore } from 'src/stores/data'
 
 // QUASAR
 
@@ -166,7 +165,6 @@ const $q = useQuasar()
 
 const adminStore = useAdminStore()
 const siteStore = useSiteStore()
-const dataStore = useDataStore()
 
 // I18N
 

ux/src/pages/AdminMail.vue

@@ -307,7 +307,6 @@ import { computed, onMounted, reactive, watch } from 'vue'
 
 import { useAdminStore } from 'src/stores/admin'
 import { useSiteStore } from 'src/stores/site'
-import { useDataStore } from 'src/stores/data'
 
 // QUASAR
 
@@ -317,7 +316,6 @@ const $q = useQuasar()
 
 const adminStore = useAdminStore()
 const siteStore = useSiteStore()
-const dataStore = useDataStore()
 
 // I18N
 

ux/src/pages/AdminSecurity.vue

@@ -334,7 +334,6 @@ import { computed, onMounted, reactive, watch } from 'vue'
 
 import { useAdminStore } from 'src/stores/admin'
 import { useSiteStore } from 'src/stores/site'
-import { useDataStore } from 'src/stores/data'
 
 // QUASAR
 
@@ -344,7 +343,6 @@ const $q = useQuasar()
 
 const adminStore = useAdminStore()
 const siteStore = useSiteStore()
-const dataStore = useDataStore()
 
 // I18N
 

ux/src/pages/AdminStorage.vue

@@ -600,7 +600,6 @@ import { useRouter, useRoute } from 'vue-router'
 
 import { useAdminStore } from 'src/stores/admin'
 import { useSiteStore } from 'src/stores/site'
-import { useDataStore } from 'src/stores/data'
 
 import GithubSetupInstallDialog from '../components/GithubSetupInstallDialog.vue'
 
@@ -612,7 +611,6 @@ const $q = useQuasar()
 
 const adminStore = useAdminStore()
 const siteStore = useSiteStore()
-const dataStore = useDataStore()
 
 // ROUTER
 

ux/src/stores/site.js

@@ -10,6 +10,7 @@ export const useSiteStore = defineStore('site', {
     hostname: '',
     company: '',
     contentLicense: '',
+    footerExtra: '',
     dark: false,
     title: '',
     description: '',
@@ -71,6 +72,7 @@ export const useSiteStore = defineStore('site', {
                 logoText
                 company
                 contentLicense
+                footerExtra
                 theme {
                   dark
                   colorPrimary
@@ -101,6 +103,7 @@ export const useSiteStore = defineStore('site', {
           this.logoText = clone(siteInfo.logoText)
           this.company = clone(siteInfo.company)
           this.contentLicense = clone(siteInfo.contentLicense)
+          this.footerExtra = clone(siteInfo.footerExtra)
           this.theme = {
             ...this.theme,
             ...clone(siteInfo.theme)