mirror of https://github.com/requarks/wiki
NGPixel
1 year ago
parent
5a60fb11b5
commit
add3631b22
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,161 @@
|
||||
<template lang="pug">
|
||||
q-layout(view='hHh lpR fFf', container)
|
||||
q-header.card-header.q-px-md.q-py-sm
|
||||
q-icon(name='img:/_assets/icons/fluent-code.svg', left, size='md')
|
||||
span Page Source
|
||||
q-space
|
||||
transition(name='syncing')
|
||||
q-spinner-tail.q-mr-sm(
|
||||
v-show='state.loading > 0'
|
||||
color='accent'
|
||||
size='24px'
|
||||
)
|
||||
q-btn.q-mr-md(
|
||||
icon='las la-download'
|
||||
color='teal-3'
|
||||
dense
|
||||
flat
|
||||
@click='download'
|
||||
)
|
||||
q-tooltip(anchor='bottom middle', self='top middle') {{t(`common.actions.download`)}}
|
||||
q-btn(
|
||||
icon='las la-times'
|
||||
color='pink-2'
|
||||
dense
|
||||
flat
|
||||
@click='close'
|
||||
)
|
||||
q-tooltip(anchor='bottom middle', self='top middle') {{t(`common.actions.close`)}}
|
||||
|
||||
q-page-container
|
||||
q-page.bg-dark-6.text-white.font-robotomono.pagesource
|
||||
q-scroll-area(
|
||||
:thumb-style='thumb'
|
||||
:bar-style='bar'
|
||||
:horizontal-thumb-style='{ height: `5px` }'
|
||||
style="width: 100%; height: calc(100vh - 100px);"
|
||||
)
|
||||
pre.q-px-md(v-text='state.content')
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { exportFile, useQuasar } from 'quasar'
|
||||
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'
|
||||
import gql from 'graphql-tag'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
|
||||
import { usePageStore } from 'src/stores/page'
|
||||
import { useSiteStore } from 'src/stores/site'
|
||||
|
||||
// QUASAR
|
||||
|
||||
const $q = useQuasar()
|
||||
|
||||
// STORES
|
||||
|
||||
const pageStore = usePageStore()
|
||||
const siteStore = useSiteStore()
|
||||
|
||||
// I18N
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// DATA
|
||||
|
||||
const state = reactive({
|
||||
loading: 0,
|
||||
content: ''
|
||||
})
|
||||
|
||||
const thumb = {
|
||||
right: '2px',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: '#FFF',
|
||||
width: '5px',
|
||||
opacity: 0.25
|
||||
}
|
||||
const bar = {
|
||||
backgroundColor: '#000',
|
||||
width: '9px',
|
||||
opacity: 0.25
|
||||
}
|
||||
|
||||
const contentTypes = {
|
||||
markdown: {
|
||||
ext: 'md',
|
||||
mime: 'text/markdown'
|
||||
},
|
||||
html: {
|
||||
ext: 'html',
|
||||
mime: 'text/html'
|
||||
}
|
||||
}
|
||||
|
||||
// METHODS
|
||||
|
||||
function download () {
|
||||
const fileType = contentTypes[state.contentType] ?? { ext: 'txt', mime: 'text/plain' }
|
||||
exportFile(`page.${fileType.ext}`, state.content, { mimeType: `${fileType.mime};charset=UTF-8` })
|
||||
}
|
||||
|
||||
function close () {
|
||||
siteStore.$patch({ overlay: '' })
|
||||
}
|
||||
|
||||
async function load () {
|
||||
state.loading++
|
||||
$q.loading.show()
|
||||
try {
|
||||
const resp = await APOLLO_CLIENT.query({
|
||||
query: gql`
|
||||
query loadPageSource (
|
||||
$id: UUID!
|
||||
) {
|
||||
pageById(
|
||||
id: $id
|
||||
) {
|
||||
id
|
||||
content
|
||||
contentType
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
id: pageStore.id
|
||||
},
|
||||
fetchPolicy: 'network-only'
|
||||
})
|
||||
const pageData = cloneDeep(resp?.data?.pageById ?? {})
|
||||
if (!pageData?.id) {
|
||||
throw new Error('ERR_PAGE_NOT_FOUND')
|
||||
}
|
||||
state.content = pageData.content
|
||||
state.contentType = pageData.contentType
|
||||
} catch (err) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: err.message
|
||||
})
|
||||
}
|
||||
$q.loading.hide()
|
||||
state.loading--
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
siteStore.overlayOpts = {}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pagesource {
|
||||
> pre {
|
||||
margin: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue