mirror of https://github.com/requarks/wiki
NGPixel
1 year ago
parent
fdc45f6b49
commit
46fb25c1e9
@ -1,2 +1,3 @@
|
||||
compiled
|
||||
dist
|
||||
node_modules
|
||||
|
||||
@ -1,70 +1,109 @@
|
||||
import { LitElement, html, css } from 'lit'
|
||||
import folderByPath from './folderByPath.graphql'
|
||||
import treeQuery from './folderByPath.graphql'
|
||||
|
||||
/**
|
||||
* An example element.
|
||||
*
|
||||
* @fires count-changed - Indicates when the count changes
|
||||
* @slot - This element has a slot
|
||||
* @csspart button - The button
|
||||
* Block Index
|
||||
*/
|
||||
export class BlockIndexElement extends LitElement {
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
border: solid 1px gray;
|
||||
padding: 16px;
|
||||
max-width: 800px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
`;
|
||||
:host-context(body.body--dark) {
|
||||
background-color: #F00;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
background-color: #fafafa;
|
||||
background-image: linear-gradient(180deg,#fff,#fafafa);
|
||||
border-right: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-left: 5px solid #e0e0e0;
|
||||
box-shadow: 0 3px 8px 0 rgba(116,129,141,.1);
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
li:hover {
|
||||
background-image: linear-gradient(180deg,#fff,#f6fbfe);
|
||||
border-left-color: #2196f3;
|
||||
cursor: pointer;
|
||||
}
|
||||
li + li {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
li a {
|
||||
display: block;
|
||||
color: #1976d2;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
/**
|
||||
* The name to say "Hello" to.
|
||||
* The base path to fetch pages from
|
||||
* @type {string}
|
||||
*/
|
||||
path: {type: String},
|
||||
|
||||
/**
|
||||
* A comma-separated list of tags to filter with
|
||||
* @type {string}
|
||||
*/
|
||||
name: {type: String},
|
||||
tags: {type: String},
|
||||
|
||||
/**
|
||||
* The number of times the button has been clicked.
|
||||
* The maximum number of items to fetch
|
||||
* @type {number}
|
||||
*/
|
||||
count: {type: Number},
|
||||
};
|
||||
limit: {type: Number}
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.name = 'World';
|
||||
this.count = 0;
|
||||
super()
|
||||
this.pages = []
|
||||
}
|
||||
|
||||
async connectedCallback() {
|
||||
super.connectedCallback()
|
||||
const resp = await APOLLO_CLIENT.query({
|
||||
query: treeQuery,
|
||||
variables: {
|
||||
siteId: WIKI_STORES.site.id,
|
||||
locale: 'en',
|
||||
parentPath: ''
|
||||
}
|
||||
})
|
||||
this.pages = resp.data.tree
|
||||
this.requestUpdate()
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h1>${this.sayHello(this.name)}!</h1>
|
||||
<button @click=${this._onClick} part="button">
|
||||
Click Count: ${this.count}
|
||||
</button>
|
||||
<ul>
|
||||
${this.pages.map(p =>
|
||||
html`<li><a href="#">${p.title}</a></li>`
|
||||
)}
|
||||
</ul>
|
||||
<slot></slot>
|
||||
`;
|
||||
`
|
||||
}
|
||||
|
||||
_onClick() {
|
||||
this.count++;
|
||||
this.dispatchEvent(new CustomEvent('count-changed'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Formats a greeting
|
||||
* @param name {string} The name to say "Hello" to
|
||||
* @returns {string} A greeting directed at `name`
|
||||
*/
|
||||
sayHello(name) {
|
||||
return `Hello, ${name}`;
|
||||
}
|
||||
// createRenderRoot() {
|
||||
// return this;
|
||||
// }
|
||||
}
|
||||
|
||||
window.customElements.define('block-index', BlockIndexElement);
|
||||
window.customElements.define('block-index', BlockIndexElement)
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
import { generateError, generateSuccess } from '../../helpers/graph.mjs'
|
||||
|
||||
export default {
|
||||
Query: {
|
||||
async blocks (obj, args, context) {
|
||||
return WIKI.db.blocks.query().where({
|
||||
siteId: args.siteId
|
||||
})
|
||||
}
|
||||
},
|
||||
Mutation: {
|
||||
async setBlocksState(obj, args, context) {
|
||||
try {
|
||||
// TODO: update blocks state
|
||||
return {
|
||||
operation: generateSuccess('Blocks state updated successfully')
|
||||
}
|
||||
} catch (err) {
|
||||
return generateError(err)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
# ===============================================
|
||||
# BLOCKS
|
||||
# ===============================================
|
||||
|
||||
extend type Query {
|
||||
blocks(
|
||||
siteId: UUID!
|
||||
): [Block]
|
||||
}
|
||||
|
||||
extend type Mutation {
|
||||
setBlocksState(
|
||||
siteId: UUID!
|
||||
states: [BlockStateInput]!
|
||||
): DefaultResponse
|
||||
|
||||
deleteBlock(
|
||||
id: UUID!
|
||||
): DefaultResponse
|
||||
}
|
||||
|
||||
# -----------------------------------------------
|
||||
# TYPES
|
||||
# -----------------------------------------------
|
||||
|
||||
type Block {
|
||||
id: UUID
|
||||
block: String
|
||||
name: String
|
||||
description: String
|
||||
icon: String
|
||||
isEnabled: Boolean
|
||||
isCustom: Boolean
|
||||
config: JSON
|
||||
}
|
||||
|
||||
input BlockStateInput {
|
||||
id: UUID!
|
||||
isEnabled: Boolean!
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
import { Model } from 'objection'
|
||||
|
||||
/**
|
||||
* Block model
|
||||
*/
|
||||
export class Block extends Model {
|
||||
static get tableName () { return 'blocks' }
|
||||
|
||||
static get jsonAttributes () {
|
||||
return ['config']
|
||||
}
|
||||
|
||||
static async addBlock (data) {
|
||||
return WIKI.db.blocks.query().insertAndFetch({
|
||||
block: data.block,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
icon: data.icon,
|
||||
isEnabled: true,
|
||||
isCustom: true,
|
||||
config: {}
|
||||
})
|
||||
}
|
||||
|
||||
static async deleteBlock (id) {
|
||||
return WIKI.db.blocks.query().deleteById(id)
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 449 B |
|
After Width: | Height: | Size: 996 B |
@ -0,0 +1,17 @@
|
||||
import { boot } from 'quasar/wrappers'
|
||||
import { useSiteStore } from 'src/stores/site'
|
||||
import { useUserStore } from 'src/stores/user'
|
||||
|
||||
export default boot(() => {
|
||||
if (import.meta.env.SSR) {
|
||||
global.WIKI_STORES = {
|
||||
site: useSiteStore(),
|
||||
user: useUserStore()
|
||||
}
|
||||
} else {
|
||||
window.WIKI_STORES = {
|
||||
site: useSiteStore(),
|
||||
user: useUserStore()
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,235 @@
|
||||
<template lang='pug'>
|
||||
q-page.admin-flags
|
||||
.row.q-pa-md.items-center
|
||||
.col-auto
|
||||
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-rfid-tag.svg')
|
||||
.col.q-pl-md
|
||||
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.blocks.title') }}
|
||||
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.blocks.subtitle') }}
|
||||
.col-auto.flex
|
||||
template(v-if='flagsStore.experimental')
|
||||
q-btn.q-mr-sm.acrylic-btn(
|
||||
unelevated
|
||||
icon='las la-plus'
|
||||
:label='t(`admin.blocks.add`)'
|
||||
color='primary'
|
||||
@click='addBlock'
|
||||
)
|
||||
q-separator.q-mr-sm(vertical)
|
||||
q-btn.q-mr-sm.acrylic-btn(
|
||||
icon='las la-question-circle'
|
||||
flat
|
||||
color='grey'
|
||||
:aria-label='t(`common.actions.viewDocs`)'
|
||||
:href='siteStore.docsBase + `/admin/editors`'
|
||||
target='_blank'
|
||||
type='a'
|
||||
)
|
||||
q-tooltip {{ t(`common.actions.viewDocs`) }}
|
||||
q-btn.q-mr-sm.acrylic-btn(
|
||||
icon='las la-redo-alt'
|
||||
flat
|
||||
color='secondary'
|
||||
:loading='state.loading > 0'
|
||||
:aria-label='t(`common.actions.refresh`)'
|
||||
@click='refresh'
|
||||
)
|
||||
q-tooltip {{ t(`common.actions.refresh`) }}
|
||||
q-btn(
|
||||
unelevated
|
||||
icon='mdi-check'
|
||||
:label='t(`common.actions.apply`)'
|
||||
color='secondary'
|
||||
@click='save'
|
||||
:disabled='state.loading > 0'
|
||||
)
|
||||
q-separator(inset)
|
||||
.q-pa-md.q-gutter-md
|
||||
q-card
|
||||
q-list(separator)
|
||||
q-item(v-for='block of state.blocks', :key='block.id')
|
||||
blueprint-icon(:icon='block.isCustom ? `plugin` : block.icon')
|
||||
q-item-section
|
||||
q-item-label: strong {{block.name}}
|
||||
q-item-label(caption) {{ block.description}}
|
||||
q-item-label.flex.items-center(caption)
|
||||
q-chip.q-ma-none(square, dense, :color='$q.dark.isActive ? `pink-8` : `pink-1`', :text-color='$q.dark.isActive ? `white` : `pink-9`'): span.text-caption <block-{{ block.block }}>
|
||||
q-separator.q-mx-sm.q-my-xs(vertical)
|
||||
em.text-purple(v-if='block.isCustom') {{ t('admin.blocks.custom') }}
|
||||
em.text-teal-7(v-else) {{ t('admin.blocks.builtin') }}
|
||||
template(v-if='block.isCustom')
|
||||
q-item-section(
|
||||
side
|
||||
)
|
||||
q-btn(
|
||||
icon='las la-trash'
|
||||
:aria-label='t(`common.actions.delete`)'
|
||||
color='negative'
|
||||
outline
|
||||
no-caps
|
||||
padding='xs sm'
|
||||
@click='deleteBlock(block.id)'
|
||||
)
|
||||
q-separator.q-ml-lg(vertical)
|
||||
q-item-section(side)
|
||||
q-toggle.q-pr-sm(
|
||||
v-model='block.isEnabled'
|
||||
color='primary'
|
||||
checked-icon='las la-check'
|
||||
unchecked-icon='las la-times'
|
||||
:label='t(`admin.blocks.isEnabled`)'
|
||||
:aria-label='t(`admin.blocks.isEnabled`)'
|
||||
)
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useMeta, useQuasar } from 'quasar'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { defineAsyncComponent, onMounted, reactive, watch } from 'vue'
|
||||
import gql from 'graphql-tag'
|
||||
import { cloneDeep, pick } from 'lodash-es'
|
||||
|
||||
import { useAdminStore } from 'src/stores/admin'
|
||||
import { useFlagsStore } from 'src/stores/flags'
|
||||
import { useSiteStore } from 'src/stores/site'
|
||||
|
||||
// QUASAR
|
||||
|
||||
const $q = useQuasar()
|
||||
|
||||
// STORES
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
const flagsStore = useFlagsStore()
|
||||
const siteStore = useSiteStore()
|
||||
|
||||
// I18N
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// META
|
||||
|
||||
useMeta({
|
||||
title: t('admin.editors.title')
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
loading: 0,
|
||||
blocks: []
|
||||
})
|
||||
|
||||
// WATCHERS
|
||||
|
||||
watch(() => adminStore.currentSiteId, (newValue) => {
|
||||
$q.loading.show()
|
||||
load()
|
||||
})
|
||||
|
||||
// METHODS
|
||||
|
||||
async function load () {
|
||||
state.loading++
|
||||
try {
|
||||
const resp = await APOLLO_CLIENT.query({
|
||||
query: gql`
|
||||
query getSiteBlocks (
|
||||
$siteId: UUID!
|
||||
) {
|
||||
blocks (
|
||||
siteId: $siteId
|
||||
) {
|
||||
id
|
||||
block
|
||||
name
|
||||
description
|
||||
icon
|
||||
isEnabled
|
||||
isCustom
|
||||
config
|
||||
}
|
||||
}`,
|
||||
variables: {
|
||||
siteId: adminStore.currentSiteId
|
||||
},
|
||||
fetchPolicy: 'network-only'
|
||||
})
|
||||
state.blocks = cloneDeep(resp?.data?.blocks)
|
||||
} catch (err) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to fetch blocks state.'
|
||||
})
|
||||
}
|
||||
$q.loading.hide()
|
||||
state.loading--
|
||||
}
|
||||
|
||||
async function save () {
|
||||
state.loading++
|
||||
try {
|
||||
const respRaw = await APOLLO_CLIENT.mutate({
|
||||
mutation: gql`
|
||||
mutation saveSiteBlocks (
|
||||
$siteId: UUID!
|
||||
$states: [BlockStateInput]!
|
||||
) {
|
||||
setBlocksState (
|
||||
siteId: $siteId,
|
||||
states: $states
|
||||
) {
|
||||
operation {
|
||||
succeeded
|
||||
slug
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
siteId: adminStore.currentSiteId,
|
||||
states: state.blocks.map(bl => pick(bl, ['id', 'isEnabled']))
|
||||
}
|
||||
})
|
||||
if (respRaw?.data?.setBlocksState?.operation?.succeeded) {
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: t('admin.blocks.saveSuccess')
|
||||
})
|
||||
} else {
|
||||
throw new Error(respRaw?.data?.setBlocksState?.operation?.message || 'An unexpected error occured.')
|
||||
}
|
||||
} catch (err) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'Failed to save site blocks state',
|
||||
caption: err.message
|
||||
})
|
||||
}
|
||||
state.loading--
|
||||
}
|
||||
|
||||
async function refresh () {
|
||||
await load()
|
||||
}
|
||||
|
||||
function addBlock () {
|
||||
|
||||
}
|
||||
|
||||
function deleteBlock (id) {
|
||||
|
||||
}
|
||||
|
||||
// MOUNTED
|
||||
|
||||
onMounted(async () => {
|
||||
$q.loading.show()
|
||||
if (adminStore.currentSiteId) {
|
||||
await load()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue