mirror of https://github.com/requarks/wiki
Nicolas Giard
2 years ago
parent
0cbeec37d6
commit
2a051637a6
@ -0,0 +1,148 @@
|
|||||||
|
const _ = require('lodash')
|
||||||
|
const graphHelper = require('../../helpers/graph')
|
||||||
|
|
||||||
|
const typeResolvers = {
|
||||||
|
folder: 'TreeItemFolder',
|
||||||
|
page: 'TreeItemPage',
|
||||||
|
asset: 'TreeItemAsset'
|
||||||
|
}
|
||||||
|
|
||||||
|
const rePathName = /^[a-z0-9_]+$/
|
||||||
|
const reTitle = /^[^<>"]+$/
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
Query: {
|
||||||
|
async tree (obj, args, context, info) {
|
||||||
|
// Offset
|
||||||
|
const offset = args.offset || 0
|
||||||
|
if (offset < 0) {
|
||||||
|
throw new Error('Invalid Offset')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Limit
|
||||||
|
const limit = args.limit || 100
|
||||||
|
if (limit < 1 || limit > 100) {
|
||||||
|
throw new Error('Invalid Limit')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Order By
|
||||||
|
const orderByDirection = args.orderByDirection || 'asc'
|
||||||
|
const orderBy = args.orderBy || 'title'
|
||||||
|
|
||||||
|
// Parse depth
|
||||||
|
const depth = args.depth || 0
|
||||||
|
if (depth < 0 || depth > 10) {
|
||||||
|
throw new Error('Invalid Depth')
|
||||||
|
}
|
||||||
|
const depthCondition = depth > 0 ? `*{,${depth}}` : '*{0}'
|
||||||
|
|
||||||
|
// Get parent path
|
||||||
|
let parentPath = ''
|
||||||
|
if (args.parentId) {
|
||||||
|
const parent = await WIKI.db.knex('tree').where('id', args.parentId).first()
|
||||||
|
if (parent) {
|
||||||
|
parentPath = parent.folderPath ? `${parent.folderPath}.${parent.fileName}` : parent.fileName
|
||||||
|
}
|
||||||
|
} else if (args.parentPath) {
|
||||||
|
parentPath = args.parentPath.replaceAll('/', '.').replaceAll('-', '_').toLowerCase()
|
||||||
|
}
|
||||||
|
const folderPathCondition = parentPath ? `${parentPath}.${depthCondition}` : depthCondition
|
||||||
|
|
||||||
|
// Fetch Items
|
||||||
|
const items = await WIKI.db.knex('tree')
|
||||||
|
.select(WIKI.db.knex.raw('tree.*, nlevel(tree."folderPath") AS depth'))
|
||||||
|
.where(builder => {
|
||||||
|
builder.where('folderPath', '~', folderPathCondition)
|
||||||
|
if (args.includeAncestors) {
|
||||||
|
const parentPathParts = parentPath.split('.')
|
||||||
|
for (let i = 1; i <= parentPathParts.length; i++) {
|
||||||
|
builder.orWhere({
|
||||||
|
folderPath: _.dropRight(parentPathParts, i).join('.'),
|
||||||
|
fileName: _.nth(parentPathParts, i * -1)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.andWhere(builder => {
|
||||||
|
if (args.types && args.types.length > 0) {
|
||||||
|
builder.whereIn('type', args.types)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.limit(limit)
|
||||||
|
.offset(offset)
|
||||||
|
.orderBy([
|
||||||
|
{ column: 'depth' },
|
||||||
|
{ column: orderBy, order: orderByDirection }
|
||||||
|
])
|
||||||
|
|
||||||
|
return items.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
depth: item.depth,
|
||||||
|
type: item.type,
|
||||||
|
folderPath: item.folderPath.replaceAll('.', '/').replaceAll('_', '-'),
|
||||||
|
fileName: item.fileName,
|
||||||
|
title: item.title,
|
||||||
|
createdAt: item.createdAt,
|
||||||
|
updatedAt: item.updatedAt,
|
||||||
|
...(item.type === 'folder') && {
|
||||||
|
childrenCount: 0
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
Mutation: {
|
||||||
|
async createFolder (obj, args, context) {
|
||||||
|
try {
|
||||||
|
// Get parent path
|
||||||
|
let parentPath = ''
|
||||||
|
if (args.parentId) {
|
||||||
|
const parent = await WIKI.db.knex('tree').where('id', args.parentId).first()
|
||||||
|
parentPath = parent ? `${parent.folderPath}.${parent.fileName}` : ''
|
||||||
|
if (parent) {
|
||||||
|
parentPath = parent.folderPath ? `${parent.folderPath}.${parent.fileName}` : parent.fileName
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate path name
|
||||||
|
const pathName = args.pathName.replaceAll('-', '_')
|
||||||
|
if (!rePathName.test(pathName)) {
|
||||||
|
throw new Error('ERR_INVALID_PATH_NAME')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate title
|
||||||
|
if (!reTitle.test(args.title)) {
|
||||||
|
throw new Error('ERR_INVALID_TITLE')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for collision
|
||||||
|
const existingFolder = await WIKI.db.knex('tree').where({
|
||||||
|
siteId: args.siteId,
|
||||||
|
folderPath: parentPath,
|
||||||
|
fileName: pathName
|
||||||
|
}).first()
|
||||||
|
if (existingFolder) {
|
||||||
|
throw new Error('ERR_FOLDER_ALREADY_EXISTS')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create folder
|
||||||
|
await WIKI.db.knex('tree').insert({
|
||||||
|
folderPath: parentPath,
|
||||||
|
fileName: pathName,
|
||||||
|
type: 'folder',
|
||||||
|
title: args.title,
|
||||||
|
siteId: args.siteId
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
operation: graphHelper.generateSuccess('Folder created successfully')
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
return graphHelper.generateError(err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
TreeItem: {
|
||||||
|
__resolveType (obj, context, info) {
|
||||||
|
return typeResolvers[obj.type] ?? null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
# ===============================================
|
||||||
|
# TREE
|
||||||
|
# ===============================================
|
||||||
|
|
||||||
|
extend type Query {
|
||||||
|
tree(
|
||||||
|
siteId: UUID!
|
||||||
|
parentId: UUID
|
||||||
|
parentPath: String
|
||||||
|
types: [TreeItemType]
|
||||||
|
limit: Int
|
||||||
|
offset: Int
|
||||||
|
orderBy: TreeOrderBy
|
||||||
|
orderByDirection: OrderByDirection
|
||||||
|
depth: Int
|
||||||
|
includeAncestors: Boolean
|
||||||
|
): [TreeItem]
|
||||||
|
}
|
||||||
|
|
||||||
|
extend type Mutation {
|
||||||
|
createFolder(
|
||||||
|
siteId: UUID!
|
||||||
|
parentId: UUID
|
||||||
|
pathName: String!
|
||||||
|
title: String!
|
||||||
|
): DefaultResponse
|
||||||
|
deleteFolder(
|
||||||
|
folderId: UUID!
|
||||||
|
): DefaultResponse
|
||||||
|
duplicateFolder(
|
||||||
|
folderId: UUID!
|
||||||
|
targetParentId: UUID
|
||||||
|
targetPathName: String!
|
||||||
|
targetTitle: String!
|
||||||
|
): DefaultResponse
|
||||||
|
moveFolder(
|
||||||
|
folderId: UUID!
|
||||||
|
targetParentId: UUID
|
||||||
|
): DefaultResponse
|
||||||
|
renameFolder(
|
||||||
|
folderId: UUID!
|
||||||
|
pathName: String
|
||||||
|
title: String
|
||||||
|
): DefaultResponse
|
||||||
|
}
|
||||||
|
|
||||||
|
# -----------------------------------------------
|
||||||
|
# TYPES
|
||||||
|
# -----------------------------------------------
|
||||||
|
|
||||||
|
enum TreeItemType {
|
||||||
|
asset
|
||||||
|
folder
|
||||||
|
page
|
||||||
|
}
|
||||||
|
|
||||||
|
enum TreeOrderBy {
|
||||||
|
createdAt
|
||||||
|
fileName
|
||||||
|
title
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
|
||||||
|
type TreeItemFolder {
|
||||||
|
id: UUID
|
||||||
|
childrenCount: Int
|
||||||
|
depth: Int
|
||||||
|
fileName: String
|
||||||
|
folderPath: String
|
||||||
|
title: String
|
||||||
|
}
|
||||||
|
|
||||||
|
type TreeItemPage {
|
||||||
|
id: UUID
|
||||||
|
createdAt: Date
|
||||||
|
depth: Int
|
||||||
|
fileName: String
|
||||||
|
folderPath: String
|
||||||
|
pageEditor: String
|
||||||
|
pageType: String
|
||||||
|
title: String
|
||||||
|
updatedAt: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
type TreeItemAsset {
|
||||||
|
id: UUID
|
||||||
|
createdAt: Date
|
||||||
|
depth: Int
|
||||||
|
fileName: String
|
||||||
|
# In Bytes
|
||||||
|
fileSize: Int
|
||||||
|
fileType: String
|
||||||
|
folderPath: String
|
||||||
|
title: String
|
||||||
|
updatedAt: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
union TreeItem = TreeItemFolder | TreeItemPage | TreeItemAsset
|
||||||
|
After Width: | Height: | Size: 919 B |
|
After Width: | Height: | Size: 502 B |
|
After Width: | Height: | Size: 483 B |
@ -0,0 +1,185 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
q-dialog(ref='dialogRef', @hide='onDialogHide')
|
||||||
|
q-card(style='min-width: 650px;')
|
||||||
|
q-card-section.card-header
|
||||||
|
q-icon(name='img:/_assets/icons/fluent-plus-plus.svg', left, size='sm')
|
||||||
|
span {{t(`fileman.folderCreate`)}}
|
||||||
|
q-form.q-py-sm(ref='newFolderForm', @submit='create')
|
||||||
|
q-item
|
||||||
|
blueprint-icon(icon='folder')
|
||||||
|
q-item-section
|
||||||
|
q-input(
|
||||||
|
outlined
|
||||||
|
v-model='state.title'
|
||||||
|
dense
|
||||||
|
:rules='titleValidation'
|
||||||
|
hide-bottom-space
|
||||||
|
:label='t(`fileman.folderTitle`)'
|
||||||
|
:aria-label='t(`fileman.folderTitle`)'
|
||||||
|
lazy-rules='ondemand'
|
||||||
|
autofocus
|
||||||
|
ref='iptTitle'
|
||||||
|
)
|
||||||
|
q-item
|
||||||
|
blueprint-icon.self-start(icon='file-submodule')
|
||||||
|
q-item-section
|
||||||
|
q-input(
|
||||||
|
outlined
|
||||||
|
v-model='state.path'
|
||||||
|
dense
|
||||||
|
:rules='pathValidation'
|
||||||
|
hide-bottom-space
|
||||||
|
:label='t(`fileman.folderFileName`)'
|
||||||
|
:aria-label='t(`fileman.folderFileName`)'
|
||||||
|
:hint='t(`fileman.folderFileNameHint`)'
|
||||||
|
lazy-rules='ondemand'
|
||||||
|
@focus='state.pathDirty = true'
|
||||||
|
)
|
||||||
|
q-card-actions.card-actions
|
||||||
|
q-space
|
||||||
|
q-btn.acrylic-btn(
|
||||||
|
flat
|
||||||
|
:label='t(`common.actions.cancel`)'
|
||||||
|
color='grey'
|
||||||
|
padding='xs md'
|
||||||
|
@click='onDialogCancel'
|
||||||
|
)
|
||||||
|
q-btn(
|
||||||
|
unelevated
|
||||||
|
:label='t(`common.actions.create`)'
|
||||||
|
color='primary'
|
||||||
|
padding='xs md'
|
||||||
|
@click='create'
|
||||||
|
:loading='state.loading > 0'
|
||||||
|
)
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import gql from 'graphql-tag'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { useDialogPluginComponent, useQuasar } from 'quasar'
|
||||||
|
import { reactive, ref, watch } from 'vue'
|
||||||
|
import slugify from 'slugify'
|
||||||
|
|
||||||
|
import { useSiteStore } from 'src/stores/site'
|
||||||
|
|
||||||
|
// PROPS
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
parentId: {
|
||||||
|
type: String,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// EMITS
|
||||||
|
|
||||||
|
defineEmits([
|
||||||
|
...useDialogPluginComponent.emits
|
||||||
|
])
|
||||||
|
|
||||||
|
// QUASAR
|
||||||
|
|
||||||
|
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
|
||||||
|
const $q = useQuasar()
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
|
||||||
|
// I18N
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
path: '',
|
||||||
|
title: '',
|
||||||
|
pathDirty: false,
|
||||||
|
loading: false
|
||||||
|
})
|
||||||
|
|
||||||
|
// REFS
|
||||||
|
|
||||||
|
const newFolderForm = ref(null)
|
||||||
|
const iptTitle = ref(null)
|
||||||
|
|
||||||
|
// VALIDATION RULES
|
||||||
|
|
||||||
|
const titleValidation = [
|
||||||
|
val => val.length > 0 || t('fileman.folderTitleMissing'),
|
||||||
|
val => /^[^<>"]+$/.test(val) || t('fileman.folderTitleInvalidChars')
|
||||||
|
]
|
||||||
|
|
||||||
|
const pathValidation = [
|
||||||
|
val => val.length > 0 || t('fileman.folderFileNameMissing'),
|
||||||
|
val => /^[a-z0-9-]+$/.test(val) || t('fileman.folderFileNameInvalid')
|
||||||
|
]
|
||||||
|
|
||||||
|
// WATCHERS
|
||||||
|
|
||||||
|
watch(() => state.title, (newValue) => {
|
||||||
|
if (state.pathDirty && !state.path) {
|
||||||
|
state.pathDirty = false
|
||||||
|
}
|
||||||
|
if (!state.pathDirty) {
|
||||||
|
state.path = slugify(newValue, { lower: true, strict: true })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// METHODS
|
||||||
|
|
||||||
|
async function create () {
|
||||||
|
state.loading++
|
||||||
|
try {
|
||||||
|
const isFormValid = await newFolderForm.value.validate(true)
|
||||||
|
if (!isFormValid) {
|
||||||
|
throw new Error(t('fileman.createFolderInvalidData'))
|
||||||
|
}
|
||||||
|
const resp = await APOLLO_CLIENT.mutate({
|
||||||
|
mutation: gql`
|
||||||
|
mutation createFolder (
|
||||||
|
$siteId: UUID!
|
||||||
|
$parentId: UUID
|
||||||
|
$pathName: String!
|
||||||
|
$title: String!
|
||||||
|
) {
|
||||||
|
createFolder (
|
||||||
|
siteId: $siteId
|
||||||
|
parentId: $parentId
|
||||||
|
pathName: $pathName
|
||||||
|
title: $title
|
||||||
|
) {
|
||||||
|
operation {
|
||||||
|
succeeded
|
||||||
|
message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
variables: {
|
||||||
|
siteId: siteStore.id,
|
||||||
|
parentId: props.parentId,
|
||||||
|
pathName: state.path,
|
||||||
|
title: state.title
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (resp?.data?.createFolder?.operation?.succeeded) {
|
||||||
|
$q.notify({
|
||||||
|
type: 'positive',
|
||||||
|
message: t('fileman.createFolderSuccess')
|
||||||
|
})
|
||||||
|
onDialogOK()
|
||||||
|
} else {
|
||||||
|
throw new Error(resp?.data?.createFolder?.operation?.message || 'An unexpected error occured.')
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
$q.notify({
|
||||||
|
type: 'negative',
|
||||||
|
message: err.message
|
||||||
|
})
|
||||||
|
}
|
||||||
|
state.loading--
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
q-dialog.main-overlay(
|
||||||
|
v-model='siteStore.overlayIsShown'
|
||||||
|
persistent
|
||||||
|
full-width
|
||||||
|
full-height
|
||||||
|
no-shake
|
||||||
|
transition-show='jump-up'
|
||||||
|
transition-hide='jump-down'
|
||||||
|
)
|
||||||
|
component(:is='overlays[siteStore.overlay]')
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineAsyncComponent } from 'vue'
|
||||||
|
|
||||||
|
import { useSiteStore } from '../stores/site'
|
||||||
|
|
||||||
|
import LoadingGeneric from './LoadingGeneric.vue'
|
||||||
|
|
||||||
|
const overlays = {
|
||||||
|
FileManager: defineAsyncComponent({
|
||||||
|
loader: () => import('./FileManager.vue'),
|
||||||
|
loadingComponent: LoadingGeneric
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// STORES
|
||||||
|
|
||||||
|
const siteStore = useSiteStore()
|
||||||
|
</script>
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
export default {
|
||||||
|
folder: {
|
||||||
|
icon: 'img:/_assets/icons/fluent-folder.svg'
|
||||||
|
},
|
||||||
|
page: {
|
||||||
|
icon: 'img:/_assets/icons/color-document.svg'
|
||||||
|
},
|
||||||
|
pdf: {
|
||||||
|
icon: 'img:/_assets/icons/color-pdf.svg'
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue