github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/route-hooks

Browse Source
This commit is contained in:
rijkvanzanten
2020-10-15 10:42:27 -04:00
parent d999956234 8588b25710
commit 00400636a2
330 changed files with 30522 additions and 4847 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4216
api/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
api/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "directus",
"version": "9.0.0-beta.10",
"version": "9.0.0-beta.11",
"license": "GPL-3.0-only",
"homepage": "https://github.com/directus/next#readme",
"description": "Directus is a real-time API and App dashboard for managing SQL database content.",
@@ -65,7 +65,7 @@
],
"dependencies": {
"@directus/app": "file:../app",
"@directus/format-title": "^3.2.0",
"@directus/format-title": "file:../packages/format-title",
"@directus/specs": "file:../packages/spec",
"@slynova/flydrive": "^1.0.2",
"@slynova/flydrive-gcs": "^1.0.2",
@@ -109,6 +109,7 @@
"nanoid": "^3.1.12",
"node-machine-id": "^1.1.12",
"nodemailer": "^6.4.11",
"openapi3-ts": "^2.0.0",
"ora": "^4.1.1",
"otplib": "^12.0.1",
"pino": "^6.4.1",
@@ -134,7 +135,7 @@
"devDependencies": {
"copyfiles": "^2.4.0",
"cross-env": "^7.0.2",
"ts-node-dev": "^1.0.0-pre.63",
"ts-node-dev": "^1.0.0-pre.64",
"typescript": "^4.0.3"
}
}

4
api/src/app.ts
View File

@@ -38,6 +38,7 @@ import graphqlRouter from './controllers/graphql';
import notFoundHandler from './controllers/not-found';
import sanitizeQuery from './middleware/sanitize-query';
import { checkIP } from './middleware/check-ip';
import { WebhooksService } from './services/webhooks';
import { InvalidPayloadException } from './exceptions';
@@ -98,6 +99,9 @@ app.use(sanitizeQuery);
app.use('/auth', authRouter);
app.use(authenticate);
app.use(checkIP);
app.use(cache);
app.use('/graphql', graphqlRouter);

2
api/src/controllers/server.ts
View File

@@ -23,7 +23,7 @@ router.get(
(req, res, next) => {
const service = new ServerService({ accountability: req.accountability });
const data = service.serverInfo();
res.locals.payload = data;
res.locals.payload = { data };
return next();
},
respond

376
api/src/database/run-ast.ts
View File

@@ -1,4 +1,4 @@
import { AST, NestedCollectionAST } from '../types/ast';
import { AST, NestedCollectionNode, FieldNode, M2ONode, O2MNode } from '../types/ast';
import { clone, cloneDeep, uniq, pick } from 'lodash';
import database from './index';
import SchemaInspector from 'knex-schema-inspector';
@@ -13,75 +13,107 @@ type RunASTOptions = {
child?: boolean;
};
export default async function runAST(originalAST: AST, options?: RunASTOptions): Promise<null | Item | Item[]> {
export default async function runAST(
originalAST: AST | NestedCollectionNode,
options?: RunASTOptions
): Promise<null | Item | Item[]> {
const ast = cloneDeep(originalAST);
const query = options?.query || ast.query;
const knex = options?.knex || database;
// Retrieve the database columns to select in the current AST
const { columnsToSelect, primaryKeyField, nestedCollectionASTs } = await parseCurrentLevel(ast, knex);
if (ast.type === 'm2a') {
const results: { [collection: string]: null | Item | Item[] } = {};
// The actual knex query builder instance. This is a promise that resolves with the raw items from the db
const dbQuery = await getDBQuery(knex, ast.name, columnsToSelect, query, primaryKeyField);
const rawItems: Item | Item[] = await dbQuery;
if (!rawItems) return null;
// Run the items through the special transforms
const payloadService = new PayloadService(ast.name, { knex });
let items = await payloadService.processValues('read', rawItems);
if (!items || items.length === 0) return items;
// Apply the `_in` filters to the nested collection batches
const nestedASTs = applyParentFilters(nestedCollectionASTs, items);
for (const nestedAST of nestedASTs) {
let tempLimit: number | null = null;
// Nested o2m-items are fetched from the db in a single query. This means that we're fetching
// all nested items for all parent items at once. Because of this, we can't limit that query
// to the "standard" item limit. Instead of _n_ nested items per parent item, it would mean
// that there's _n_ items, which are then divided on the parent items. (no good)
if (isO2M(nestedAST) && typeof nestedAST.query.limit === 'number') {
tempLimit = nestedAST.query.limit;
nestedAST.query.limit = -1;
for (const collection of ast.names) {
results[collection] = await run(
collection,
ast.children[collection],
ast.query[collection]
);
}
let nestedItems = await runAST(nestedAST, { knex, child: true });
return results;
} else {
return await run(ast.name, ast.children, options?.query || ast.query);
}
if (nestedItems) {
// Merge all fetched nested records with the parent items
items = mergeWithParentItems(nestedItems, items, nestedAST, tempLimit);
async function run(
collection: string,
children: (NestedCollectionNode | FieldNode)[],
query: Query
) {
// Retrieve the database columns to select in the current AST
const { columnsToSelect, primaryKeyField, nestedCollectionNodes } = await parseCurrentLevel(
collection,
children,
knex
);
// The actual knex query builder instance. This is a promise that resolves with the raw items from the db
const dbQuery = await getDBQuery(knex, collection, columnsToSelect, query, primaryKeyField);
const rawItems: Item | Item[] = await dbQuery;
if (!rawItems) return null;
// Run the items through the special transforms
const payloadService = new PayloadService(collection, { knex });
let items: null | Item | Item[] = await payloadService.processValues('read', rawItems);
if (!items || items.length === 0) return items;
// Apply the `_in` filters to the nested collection batches
const nestedNodes = applyParentFilters(nestedCollectionNodes, items);
for (const nestedNode of nestedNodes) {
let tempLimit: number | null = null;
// Nested o2m-items are fetched from the db in a single query. This means that we're fetching
// all nested items for all parent items at once. Because of this, we can't limit that query
// to the "standard" item limit. Instead of _n_ nested items per parent item, it would mean
// that there's _n_ items, which are then divided on the parent items. (no good)
if (nestedNode.type === 'o2m' && typeof nestedNode.query.limit === 'number') {
tempLimit = nestedNode.query.limit;
nestedNode.query.limit = -1;
}
let nestedItems = await runAST(nestedNode, { knex, child: true });
if (nestedItems) {
// Merge all fetched nested records with the parent items
items = mergeWithParentItems(nestedItems, items, nestedNode, tempLimit);
}
}
}
// During the fetching of data, we have to inject a couple of required fields for the child nesting
// to work (primary / foreign keys) even if they're not explicitly requested. After all fetching
// and nesting is done, we parse through the output structure, and filter out all non-requested
// fields
if (options?.child !== true) {
items = removeTemporaryFields(items, originalAST);
}
// During the fetching of data, we have to inject a couple of required fields for the child nesting
// to work (primary / foreign keys) even if they're not explicitly requested. After all fetching
// and nesting is done, we parse through the output structure, and filter out all non-requested
// fields
if (options?.child !== true) {
items = removeTemporaryFields(items, originalAST, primaryKeyField);
}
return items;
return items;
}
}
async function parseCurrentLevel(ast: AST, knex: Knex) {
async function parseCurrentLevel(
collection: string,
children: (NestedCollectionNode | FieldNode)[],
knex: Knex
) {
const schemaInspector = SchemaInspector(knex);
const primaryKeyField = await schemaInspector.primary(ast.name);
const primaryKeyField = await schemaInspector.primary(collection);
const columnsInCollection = (await schemaInspector.columns(ast.name)).map(
const columnsInCollection = (await schemaInspector.columns(collection)).map(
({ column }) => column
);
const columnsToSelect: string[] = [];
const nestedCollectionASTs: NestedCollectionAST[] = [];
const nestedCollectionNodes: NestedCollectionNode[] = [];
for (const child of ast.children) {
for (const child of children) {
if (child.type === 'field') {
if (columnsInCollection.includes(child.name) || child.name === '*') {
columnsToSelect.push(child.name);
@@ -92,13 +124,16 @@ async function parseCurrentLevel(ast: AST, knex: Knex) {
if (!child.relation) continue;
const m2o = isM2O(child);
if (m2o) {
if (child.type === 'm2o') {
columnsToSelect.push(child.relation.many_field);
}
nestedCollectionASTs.push(child);
if (child.type === 'm2a') {
columnsToSelect.push(child.relation.many_field);
columnsToSelect.push(child.relation.one_collection_field!);
}
nestedCollectionNodes.push(child);
}
/** Always fetch primary key in case there's a nested relation that needs it */
@@ -106,10 +141,16 @@ async function parseCurrentLevel(ast: AST, knex: Knex) {
columnsToSelect.push(primaryKeyField);
}
return { columnsToSelect, nestedCollectionASTs, primaryKeyField };
return { columnsToSelect, nestedCollectionNodes, primaryKeyField };
}
async function getDBQuery(knex: Knex, table: string, columns: string[], query: Query, primaryKeyField: string): Promise<QueryBuilder> {
async function getDBQuery(
knex: Knex,
table: string,
columns: string[],
query: Query,
primaryKeyField: string
): Promise<QueryBuilder> {
let dbQuery = knex.select(columns.map((column) => `${table}.${column}`)).from(table);
const queryCopy = clone(query);
@@ -127,115 +168,224 @@ async function getDBQuery(knex: Knex, table: string, columns: string[], query: Q
return dbQuery;
}
function applyParentFilters(nestedCollectionASTs: NestedCollectionAST[], parentItem: Item | Item[]) {
function applyParentFilters(
nestedCollectionNodes: NestedCollectionNode[],
parentItem: Item | Item[]
) {
const parentItems = Array.isArray(parentItem) ? parentItem : [parentItem];
for (const nestedAST of nestedCollectionASTs) {
if (!nestedAST.relation) continue;
for (const nestedNode of nestedCollectionNodes) {
if (!nestedNode.relation) continue;
if (isM2O(nestedAST)) {
nestedAST.query = {
...nestedAST.query,
if (nestedNode.type === 'm2o') {
nestedNode.query = {
...nestedNode.query,
filter: {
...(nestedAST.query.filter || {}),
[nestedAST.relation.one_primary]: {
_in: uniq(parentItems.map((res) => res[nestedAST.relation.many_field])).filter(
(id) => id
),
}
}
}
} else {
const relatedM2OisFetched = !!nestedAST.children.find((child) => {
return child.type === 'field' && child.name === nestedAST.relation.many_field
...(nestedNode.query.filter || {}),
[nestedNode.relation.one_primary!]: {
_in: uniq(
parentItems.map((res) => res[nestedNode.relation.many_field])
).filter((id) => id),
},
},
};
} else if (nestedNode.type === 'o2m') {
const relatedM2OisFetched = !!nestedNode.children.find((child) => {
return child.type === 'field' && child.name === nestedNode.relation.many_field;
});
if (relatedM2OisFetched === false) {
nestedAST.children.push({ type: 'field', name: nestedAST.relation.many_field });
nestedNode.children.push({ type: 'field', name: nestedNode.relation.many_field });
}
nestedAST.query = {
...nestedAST.query,
nestedNode.query = {
...nestedNode.query,
filter: {
...(nestedAST.query.filter || {}),
[nestedAST.relation.many_field]: {
_in: uniq(parentItems.map((res) => res[nestedAST.parentKey])).filter((id) => id),
}
}
...(nestedNode.query.filter || {}),
[nestedNode.relation.many_field]: {
_in: uniq(parentItems.map((res) => res[nestedNode.parentKey])).filter(
(id) => id
),
},
},
};
} else if (nestedNode.type === 'm2a') {
const keysPerCollection: { [collection: string]: (string | number)[] } = {};
for (const parentItem of parentItems) {
const collection = parentItem[nestedNode.relation.one_collection_field!];
if (!keysPerCollection[collection]) keysPerCollection[collection] = [];
keysPerCollection[collection].push(parentItem[nestedNode.relation.many_field]);
}
for (const relatedCollection of nestedNode.names) {
nestedNode.query[relatedCollection] = {
...nestedNode.query[relatedCollection],
filter: {
_and: [
nestedNode.query[relatedCollection].filter,
{
[nestedNode.relatedKey[relatedCollection]]: {
_in: uniq(keysPerCollection[relatedCollection]),
},
},
].filter((f) => f),
},
};
}
}
}
return nestedCollectionASTs;
return nestedCollectionNodes;
}
function mergeWithParentItems(nestedItem: Item | Item[], parentItem: Item | Item[], nestedAST: NestedCollectionAST, o2mLimit?: number | null) {
function mergeWithParentItems(
nestedItem: Item | Item[],
parentItem: Item | Item[],
nestedNode: NestedCollectionNode,
o2mLimit?: number | null
) {
const nestedItems = Array.isArray(nestedItem) ? nestedItem : [nestedItem];
const parentItems = clone(Array.isArray(parentItem) ? parentItem : [parentItem]);
if (isM2O(nestedAST)) {
if (nestedNode.type === 'm2o') {
for (const parentItem of parentItems) {
const itemChild = nestedItems.find((nestedItem) => {
return nestedItem[nestedAST.relation.one_primary] === parentItem[nestedAST.fieldKey];
return (
nestedItem[nestedNode.relation.one_primary!] === parentItem[nestedNode.fieldKey]
);
});
parentItem[nestedAST.fieldKey] = itemChild || null;
parentItem[nestedNode.fieldKey] = itemChild || null;
}
} else {
} else if (nestedNode.type === 'o2m') {
for (const parentItem of parentItems) {
let itemChildren = nestedItems.filter((nestedItem) => {
if (nestedItem === null) return false;
if (Array.isArray(nestedItem[nestedAST.relation.many_field])) return true;
if (Array.isArray(nestedItem[nestedNode.relation.many_field])) return true;
return (
nestedItem[nestedAST.relation.many_field] === parentItem[nestedAST.relation.one_primary] ||
nestedItem[nestedAST.relation.many_field]?.[nestedAST.relation.many_primary] === parentItem[nestedAST.relation.one_primary]
nestedItem[nestedNode.relation.many_field] ===
parentItem[nestedNode.relation.one_primary!] ||
nestedItem[nestedNode.relation.many_field]?.[
nestedNode.relation.many_primary
] === parentItem[nestedNode.relation.one_primary!]
);
});
// We re-apply the requested limit here. This forces the _n_ nested items per parent concept
if (o2mLimit !== null) {
itemChildren = itemChildren.slice(0, o2mLimit);
nestedAST.query.limit = o2mLimit;
nestedNode.query.limit = o2mLimit;
}
parentItem[nestedAST.fieldKey] = itemChildren.length > 0 ? itemChildren : null;
parentItem[nestedNode.fieldKey] = itemChildren.length > 0 ? itemChildren : null;
}
} else if (nestedNode.type === 'm2a') {
for (const parentItem of parentItems) {
const relatedCollection = parentItem[nestedNode.relation.one_collection_field!];
const itemChild = (nestedItem as Record<string, any[]>)[relatedCollection].find(
(nestedItem) => {
return (
nestedItem[nestedNode.relatedKey[relatedCollection]] ===
parentItem[nestedNode.fieldKey]
);
}
);
parentItem[nestedNode.fieldKey] = itemChild || null;
}
}
return Array.isArray(parentItem) ? parentItems : parentItems[0];
}
function removeTemporaryFields(rawItem: Item | Item[], ast: AST | NestedCollectionAST): Item | Item[] {
const rawItems: Item[] = Array.isArray(rawItem) ? rawItem : [rawItem];
function removeTemporaryFields(
rawItem: Item | Item[],
ast: AST | NestedCollectionNode,
primaryKeyField: string,
parentItem?: Item
): null | Item | Item[] {
const rawItems = cloneDeep(Array.isArray(rawItem) ? rawItem : [rawItem]);
const items: Item[] = [];
const fields = ast.children.filter((child) => child.type === 'field').map((child) => child.name);
const nestedCollections = ast.children.filter((child) => child.type === 'collection') as NestedCollectionAST[];
if (ast.type === 'm2a') {
const fields: Record<string, string[]> = {};
const nestedCollectionNodes: Record<string, NestedCollectionNode[]> = {};
for (const rawItem of rawItems) {
if (rawItem === null) return rawItem;
const item = fields.includes('*') ? rawItem : pick(rawItem, fields);
for (const relatedCollection of ast.names) {
if (!fields[relatedCollection]) fields[relatedCollection] = [];
if (!nestedCollectionNodes[relatedCollection])
nestedCollectionNodes[relatedCollection] = [];
for (const nestedCollection of nestedCollections) {
if (item[nestedCollection.fieldKey] !== null) {
item[nestedCollection.fieldKey] = removeTemporaryFields(rawItem[nestedCollection.fieldKey], nestedCollection);
for (const child of ast.children[relatedCollection]) {
if (child.type === 'field') {
fields[relatedCollection].push(child.name);
} else {
fields[relatedCollection].push(child.fieldKey);
nestedCollectionNodes[relatedCollection].push(child);
}
}
}
items.push(item);
for (const rawItem of rawItems) {
const relatedCollection: string = parentItem?.[ast.relation.one_collection_field!];
if (rawItem === null || rawItem === undefined) return rawItem;
let item = rawItem;
for (const nestedNode of nestedCollectionNodes[relatedCollection]) {
item[nestedNode.fieldKey] = removeTemporaryFields(
item[nestedNode.fieldKey],
nestedNode,
nestedNode.relation.many_primary,
item
);
}
item =
fields[relatedCollection].length > 0
? pick(rawItem, fields[relatedCollection])
: rawItem[primaryKeyField];
items.push(item);
}
} else {
const fields: string[] = [];
const nestedCollectionNodes: NestedCollectionNode[] = [];
for (const child of ast.children) {
if (child.type === 'field') {
fields.push(child.name);
} else {
fields.push(child.fieldKey);
nestedCollectionNodes.push(child);
}
}
for (const rawItem of rawItems) {
if (rawItem === null || rawItem === undefined) return rawItem;
let item = rawItem;
for (const nestedNode of nestedCollectionNodes) {
item[nestedNode.fieldKey] = removeTemporaryFields(
item[nestedNode.fieldKey],
nestedNode,
nestedNode.type === 'm2o'
? nestedNode.relation.one_primary!
: nestedNode.relation.many_primary,
item
);
}
item = fields.length > 0 ? pick(rawItem, fields) : rawItem[primaryKeyField];
items.push(item);
}
}
return Array.isArray(rawItem) ? items : items[0];
}
function isM2O(child: NestedCollectionAST) {
return (
child.relation.one_collection === child.name && child.relation.many_field === child.fieldKey
);
}
function isO2M(child: NestedCollectionAST) {
return isM2O(child) === false;
}

2
api/src/database/seeds/01-tables/02-roles.yaml
View File

@@ -16,7 +16,7 @@ columns:
description:
type: text
ip_access:
type: json
type: text
enforce_tfa:
type: boolean
nullable: false

2
api/src/database/seeds/01-tables/03-users.yaml
View File

@@ -49,7 +49,7 @@ columns:
type: string
length: 16
nullable: false
default: draft
default: active
role:
type: uuid
nullable: true

7
api/src/database/seeds/01-tables/07-files.yaml
View File

@@ -35,6 +35,13 @@ columns:
type: timestamp
nullable: false
default: '$now'
modified_by:
type: uuid
references:
table: directus_users
column: id
modified_on:
type: timestamp
charset:
type: string
length: 50

7
api/src/database/seeds/01-tables/10-relations.yaml
View File

@@ -21,7 +21,6 @@ columns:
one_collection:
type: string
length: 64
nullable: false
references:
table: directus_collections
column: collection
@@ -31,7 +30,11 @@ columns:
one_primary:
type: string
length: 64
nullable: false
one_collection_field:
type: string
length: 64
one_allowed_collections:
type: text
junction_field:
type: string
length: 64

2
api/src/database/seeds/01-tables/13-settings.yaml
View File

@@ -44,3 +44,5 @@ columns:
default: all
storage_asset_presets:
type: json
custom_css:
type: text

2
api/src/database/seeds/02-rows/02-permissions.yaml
View File

@@ -14,4 +14,4 @@ data:
- collection: directus_settings
action: read
permissions: {}
fields: 'project_name,project_logo,project_color,public_foreground,public_background,public_note'
fields: 'project_name,project_logo,project_color,public_foreground,public_background,public_note,custom_css'

17
api/src/database/seeds/02-rows/04-relations.yaml
View File

@@ -57,9 +57,24 @@ data:
many_primary: id
one_collection: directus_collections
one_field: fields
one_primary: id
one_primary: collection
- many_collection: directus_activity
many_field: user
many_primary: id
one_collection: directus_users
one_primary: id
- many_collection: directus_settings
many_field: project_logo
many_primary: id
one_collection: directus_files
one_primary: id
- many_collection: directus_settings
many_field: public_foreground
many_primary: id
one_collection: directus_files
one_primary: id
- many_collection: directus_settings
many_field: public_background
many_primary: id
one_collection: directus_files
one_primary: id

4
api/src/database/seeds/03-fields/01-collections.yaml
View File

@@ -67,9 +67,9 @@ fields:
special: json
interface: repeater
options:
template: '{{ translation }} ({{ locale }})'
template: '{{ translation }} ({{ language }})'
fields:
- field: locale
- field: language
name: Language
type: string
schema:

14
api/src/database/seeds/03-fields/02-roles.yaml
View File

@@ -50,7 +50,7 @@ fields:
options:
placeholder: Add allowed IP addresses, leave empty to allow all...
locked: true
special: json
special: csv
sort: 6
width: full
- collection: directus_roles
@@ -77,7 +77,7 @@ fields:
locked: true
options:
template: '{{ name }}'
createItemText: Add Module
addLabel: Add New Module...
fields:
- name: Icon
field: icon
@@ -112,7 +112,7 @@ fields:
locked: true
options:
template: '{{ group_name }}'
createItemText: Add Group
addLabel: Add New Group...
fields:
- name: Group Name
field: group_name
@@ -123,7 +123,9 @@ fields:
options:
iconRight: title
placeholder: Label this group...
- name: Accordion
schema:
is_nullable: false
- name: Type
field: accordion
type: string
schema:
@@ -145,7 +147,7 @@ fields:
meta:
interface: repeater
options:
createItemText: Add Collection
addLabel: Add New Collection...
template: '{{ collection }}'
fields:
- name: Collection
@@ -154,6 +156,8 @@ fields:
meta:
interface: collection
width: full
schema:
is_nullable: false
special: json
sort: 10
width: full

21
api/src/database/seeds/03-fields/05-files.yaml
View File

@@ -33,6 +33,7 @@ fields:
special: json
sort: 3
width: full
display: tags
- collection: directus_files
field: location
interface: text-input
@@ -91,3 +92,23 @@ fields:
- collection: directus_files
field: filesize
display: filesize
- collection: directus_files
field: modified_by
interface: user
locked: true
special: user-updated
width: half
display: user
- collection: directus_files
field: modified_on
interface: dateTime
locked: true
special: date-updated
width: half
display: datetime
- collection: directus_files
field: created_on
display: datetime
- collection: directus_files
field: created_by
display: user

32
api/src/database/seeds/03-fields/09-settings.yaml
View File

@@ -10,7 +10,7 @@ fields:
placeholder: My project...
sort: 1
translations:
locale: en-US
language: en-US
translations: Name
width: half
- collection: directus_settings
@@ -22,7 +22,7 @@ fields:
placeholder: https://example.com
sort: 2
translations:
locale: en-US
language: en-US
translations: Website
width: half
- collection: directus_settings
@@ -32,7 +32,7 @@ fields:
note: Login & Logo Background
sort: 3
translations:
locale: en-US
language: en-US
translations: Brand Color
width: half
- collection: directus_settings
@@ -42,7 +42,7 @@ fields:
note: White 40x40 SVG/PNG
sort: 4
translations:
locale: en-US
language: en-US
translations: Brand Logo
width: half
- collection: directus_settings
@@ -62,7 +62,7 @@ fields:
locked: true
sort: 6
translations:
locale: en-US
language: en-US
translations: Login Foreground
width: half
- collection: directus_settings
@@ -71,7 +71,7 @@ fields:
locked: true
sort: 7
translations:
locale: en-US
language: en-US
translations: Login Background
width: half
- collection: directus_settings
@@ -203,3 +203,23 @@ fields:
field: id
hidden: true
locked: true
- collection: directus_settings
field: overrides_divider
interface: divider
locked: true
options:
icon: brush
title: App Overrides
color: '#2F80ED'
special: alias
sort: 15
width: full
- collection: directus_settings
field: custom_css
interface: code
locked: true
options:
language: css
lineNumber: true
sort: 16
width: full

1
api/src/database/seeds/03-fields/10-webhooks.yaml
View File

@@ -68,6 +68,7 @@ fields:
locked: true
options:
label: Send Event Data
special: boolean
sort: 5
width: half
- collection: directus_webhooks

7
api/src/database/seeds/03-fields/12-relations.yaml Normal file
View File

@@ -0,0 +1,7 @@
table: directus_relations
fields:
- collection: directus_relations
field: one_allowed_collections
locked: true
special: csv

1
api/src/env.ts
View File

@@ -62,6 +62,7 @@ function processValues(env: Record<string, any>) {
if (value === 'true') env[key] = true;
if (value === 'false') env[key] = false;
if (value === 'null') env[key] = null;
if (isNaN(value) === false && value.length > 0) env[key] = Number(value);
}
return env;

2
api/src/exceptions/index.ts
View File

@@ -3,8 +3,10 @@ export * from './failed-validation';
export * from './forbidden';
export * from './hit-rate-limit';
export * from './invalid-credentials';
export * from './invalid-ip';
export * from './invalid-otp';
export * from './invalid-payload';
export * from './invalid-query';
export * from './route-not-found';
export * from './service-unavailable';
export * from './unprocessable-entity';

7
api/src/exceptions/invalid-ip.ts Normal file
View File

@@ -0,0 +1,7 @@
import { BaseException } from './base';
export class InvalidIPException extends BaseException {
constructor(message = 'Invalid IP address.') {
super(message, 401, 'INVALID_IP');
}
}

7
api/src/exceptions/unprocessable-entity.ts Normal file
View File

@@ -0,0 +1,7 @@
import { BaseException } from './base';
export class UnprocessableEntityException extends BaseException {
constructor(message: string) {
super(message, 422, 'UNPROCESSABLE_ENTITY');
}
}

20
api/src/extensions.ts
View File

@@ -78,9 +78,16 @@ function registerHooks(hooks: string[]) {
function registerHook(hook: string) {
const hookPath = path.resolve(extensionsPath, 'hooks', hook, 'index.js');
const register: HookRegisterFunction = require(hookPath);
const events = register({ services, exceptions, env, database });
const hookInstance: HookRegisterFunction | { default?: HookRegisterFunction } = require(hookPath);
let register: HookRegisterFunction = hookInstance as HookRegisterFunction;
if (typeof hookInstance !== "function") {
if (hookInstance.default) {
register = hookInstance.default;
}
}
let events = register({ services, exceptions, env, database });
for (const [event, handler] of Object.entries(events)) {
emitter.on(event, handler);
}
@@ -101,7 +108,14 @@ function registerEndpoints(endpoints: string[], router: Router) {
function registerEndpoint(endpoint: string) {
const endpointPath = path.resolve(extensionsPath, 'endpoints', endpoint, 'index.js');
const register: EndpointRegisterFunction = require(endpointPath);
const endpointInstance: EndpointRegisterFunction | { default?: EndpointRegisterFunction } = require(endpointPath);
let register: EndpointRegisterFunction = endpointInstance as EndpointRegisterFunction;
if (typeof endpointInstance !== "function") {
if (endpointInstance.default) {
register = endpointInstance.default;
}
}
const scopedRouter = express.Router();
router.use(`/${endpoint}/`, scopedRouter);

6
api/src/middleware/authenticate.ts
View File

@@ -14,7 +14,7 @@ const authenticate: RequestHandler = asyncHandler(async (req, res, next) => {
user: null,
role: null,
admin: false,
ip: req.ip,
ip: req.ip.startsWith('::ffff:') ? req.ip.substring(7) : req.ip,
userAgent: req.get('user-agent'),
};
@@ -74,7 +74,9 @@ const authenticate: RequestHandler = asyncHandler(async (req, res, next) => {
}
if (req.accountability?.user) {
await database('directus_users').update({ last_access: new Date() }).where({ id: req.accountability.user });
await database('directus_users')
.update({ last_access: new Date() })
.where({ id: req.accountability.user });
}
return next();

18
api/src/middleware/check-ip.ts Normal file
View File

@@ -0,0 +1,18 @@
import { RequestHandler } from 'express';
import asyncHandler from 'express-async-handler';
import database from '../database';
import { InvalidIPException } from '../exceptions';
export const checkIP: RequestHandler = asyncHandler(async (req, res, next) => {
const role = await database
.select('ip_access')
.from('directus_roles')
.where({ id: req.accountability!.role })
.first();
const ipAllowlist = (role?.ip_access || '').split(',').filter((ip: string) => ip);
if (ipAllowlist.length > 0 && ipAllowlist.includes(req.accountability!.ip) === false)
throw new InvalidIPException();
return next();
});

6
api/src/middleware/sanitize-query.ts
View File

@@ -5,6 +5,7 @@
import { RequestHandler } from 'express';
import { sanitizeQuery } from '../utils/sanitize-query';
import { validateQuery } from '../utils/validate-query';
const sanitizeQueryMiddleware: RequestHandler = (req, res, next) => {
req.sanitizedQuery = {};
@@ -13,15 +14,16 @@ const sanitizeQueryMiddleware: RequestHandler = (req, res, next) => {
req.sanitizedQuery = sanitizeQuery(
{
fields: req.query.fields || '*',
...req.query
...req.query,
},
req.accountability || null
);
Object.freeze(req.sanitizedQuery);
validateQuery(req.sanitizedQuery);
return next();
};
export default sanitizeQueryMiddleware;

117
api/src/services/authorization.ts
View File

@@ -3,8 +3,8 @@ import {
Accountability,
AbstractServiceOptions,
AST,
NestedCollectionAST,
FieldAST,
NestedCollectionNode,
FieldNode,
Query,
Permission,
PermissionsAction,
@@ -74,30 +74,35 @@ export class AuthorizationService {
* Traverses the AST and returns an array of all collections that are being fetched
*/
function getCollectionsFromAST(
ast: AST | NestedCollectionAST
ast: AST | NestedCollectionNode
): { collection: string; field: string }[] {
const collections = [];
if (ast.type === 'collection') {
if (ast.type === 'm2a') {
collections.push(
...ast.names.map((name) => ({ collection: name, field: ast.fieldKey }))
);
/** @TODO add nestedNode */
} else {
collections.push({
collection: ast.name,
field: (ast as NestedCollectionAST).fieldKey
? (ast as NestedCollectionAST).fieldKey
: null,
field: ast.type === 'root' ? null : ast.fieldKey,
});
}
for (const subAST of ast.children) {
if (subAST.type === 'collection') {
collections.push(...getCollectionsFromAST(subAST));
for (const nestedNode of ast.children) {
if (nestedNode.type !== 'field') {
collections.push(...getCollectionsFromAST(nestedNode));
}
}
}
return collections as { collection: string; field: string }[];
}
function validateFields(ast: AST | NestedCollectionAST) {
if (ast.type === 'collection') {
function validateFields(ast: AST | NestedCollectionNode | FieldNode) {
if (ast.type !== 'field' && ast.type !== 'm2a') {
/** @TODO remove m2a check */
const collection = ast.name;
// We check the availability of the permissions in the step before this is run
@@ -107,15 +112,15 @@ export class AuthorizationService {
const allowedFields = permissions.fields?.split(',') || [];
for (const childAST of ast.children) {
if (childAST.type === 'collection') {
validateFields(childAST);
for (const childNode of ast.children) {
if (childNode.type !== 'field') {
validateFields(childNode);
continue;
}
if (allowedFields.includes('*')) continue;
const fieldKey = childAST.name;
const fieldKey = childNode.name;
if (allowedFields.includes(fieldKey) === false) {
throw new ForbiddenException(
@@ -127,10 +132,11 @@ export class AuthorizationService {
}
function applyFilters(
ast: AST | NestedCollectionAST | FieldAST,
ast: AST | NestedCollectionNode | FieldNode,
accountability: Accountability | null
): AST | NestedCollectionAST | FieldAST {
if (ast.type === 'collection') {
): AST | NestedCollectionNode | FieldNode {
if (ast.type !== 'field' && ast.type !== 'm2a') {
/** @TODO remove m2a check */
const collection = ast.name;
// We check the availability of the permissions in the step before this is run
@@ -164,8 +170,8 @@ export class AuthorizationService {
}
ast.children = ast.children.map((child) => applyFilters(child, accountability)) as (
| NestedCollectionAST
| FieldAST
| NestedCollectionNode
| FieldNode
)[];
}
@@ -198,7 +204,17 @@ export class AuthorizationService {
let permission: Permission | undefined;
if (this.accountability?.admin === true) {
permission = { id: 0, role: this.accountability?.role, collection, action, permissions: {}, validation: {}, limit: null, fields: '*', presets: {}, }
permission = {
id: 0,
role: this.accountability?.role,
collection,
action,
permissions: {},
validation: {},
limit: null,
fields: '*',
presets: {},
};
} else {
permission = await this.knex
.select<Permission>('*')
@@ -238,10 +254,23 @@ export class AuthorizationService {
let requiredColumns: string[] = [];
for (const column of columns) {
const field = await this.knex.select<{ special: string }>('special').from('directus_fields').where({ collection, field: column.name }).first();
const field = await this.knex
.select<{ special: string }>('special')
.from('directus_fields')
.where({ collection, field: column.name })
.first();
const specials = (field?.special || '').split(',');
const hasGenerateSpecial = ['uuid', 'date-created', 'role-created', 'user-created'].some((name) => specials.includes(name));
const isRequired = column.is_nullable === false && column.has_auto_increment === false && column.default_value === null && hasGenerateSpecial === false;
const hasGenerateSpecial = [
'uuid',
'date-created',
'role-created',
'user-created',
].some((name) => specials.includes(name));
const isRequired =
column.is_nullable === false &&
column.has_auto_increment === false &&
column.default_value === null &&
hasGenerateSpecial === false;
if (isRequired) {
requiredColumns.push(column.name);
@@ -250,23 +279,20 @@ export class AuthorizationService {
if (requiredColumns.length > 0) {
permission.validation = {
_and: [
permission.validation,
{}
]
}
_and: [permission.validation, {}],
};
if (action === 'create') {
for (const name of requiredColumns) {
permission.validation._and[1][name] = {
_required: true
}
_required: true,
};
}
} else {
for (const name of requiredColumns) {
permission.validation._and[1][name] = {
_nnull: true
}
_nnull: true,
};
}
}
}
@@ -282,7 +308,10 @@ export class AuthorizationService {
}
}
validateJoi(validation: Record<string, any>, payloads: Partial<Record<string, any>>[]): FailedValidationException[] {
validateJoi(
validation: Record<string, any>,
payloads: Partial<Record<string, any>>[]
): FailedValidationException[] {
const errors: FailedValidationException[] = [];
/**
@@ -291,13 +320,21 @@ export class AuthorizationService {
if (Object.keys(validation)[0] === '_and') {
const subValidation = Object.values(validation)[0];
const nestedErrors = flatten<FailedValidationException>(subValidation.map((subObj: Record<string, any>) => this.validateJoi(subObj, payloads))).filter((err?: FailedValidationException) => err);
const nestedErrors = flatten<FailedValidationException>(
subValidation.map((subObj: Record<string, any>) =>
this.validateJoi(subObj, payloads)
)
).filter((err?: FailedValidationException) => err);
errors.push(...nestedErrors);
}
if (Object.keys(validation)[0] === '_or') {
const subValidation = Object.values(validation)[0];
const nestedErrors = flatten<FailedValidationException>(subValidation.map((subObj: Record<string, any>) => this.validateJoi(subObj, payloads)));
const nestedErrors = flatten<FailedValidationException>(
subValidation.map((subObj: Record<string, any>) =>
this.validateJoi(subObj, payloads)
)
);
const allErrored = nestedErrors.every((err?: FailedValidationException) => err);
if (allErrored) {
@@ -311,7 +348,9 @@ export class AuthorizationService {
const { error } = schema.validate(payload, { abortEarly: false });
if (error) {
errors.push(...error.details.map((details) => new FailedValidationException(details)));
errors.push(
...error.details.map((details) => new FailedValidationException(details))
);
}
}

13
api/src/services/collections.ts
View File

@@ -132,9 +132,9 @@ export class CollectionsService {
const tablesInDatabase = await schemaInspector.tableInfo();
const tables = tablesInDatabase.filter((table) => collectionKeys.includes(table.name));
const meta = await collectionItemsService.readByQuery({
const meta = (await collectionItemsService.readByQuery({
filter: { collection: { _in: collectionKeys } },
}) as Collection['meta'][];
})) as Collection['meta'][];
const collections: Collection[] = [];
@@ -170,9 +170,9 @@ export class CollectionsService {
}
const tablesToFetchInfoFor = tablesInDatabase.map((table) => table.name);
const meta = await collectionItemsService.readByQuery({
const meta = (await collectionItemsService.readByQuery({
filter: { collection: { _in: tablesToFetchInfoFor } },
}) as Collection['meta'][];
})) as Collection['meta'][];
const collections: Collection[] = [];
@@ -287,11 +287,14 @@ export class CollectionsService {
for (const relation of relations) {
const isM2O = relation.many_collection === collection;
/** @TODO M2A — Handle m2a case here */
if (isM2O) {
await this.knex('directus_relations')
.delete()
.where({ many_collection: collection, many_field: relation.many_field });
await fieldsService.deleteField(relation.one_collection, relation.one_field);
await fieldsService.deleteField(relation.one_collection!, relation.one_field!);
} else {
await this.knex('directus_relations')
.update({ one_field: null })

10
api/src/services/fields.ts
View File

@@ -52,9 +52,9 @@ export class FieldsService {
});
const columnsWithSystem = columns.map((column) => {
const field = fields.find(
(field) => field.field === column.name && field.collection === column.table
);
const field = fields.find((field) => {
return field.field === column.name && field.collection === column.table;
});
const data = {
collection: column.table,
@@ -325,11 +325,13 @@ export class FieldsService {
for (const relation of relations) {
const isM2O = relation.many_collection === collection && relation.many_field === field;
/** @TODO M2A — Handle m2a case here */
if (isM2O) {
await this.knex('directus_relations')
.delete()
.where({ many_collection: collection, many_field: field });
await this.deleteField(relation.one_collection, relation.one_field);
await this.deleteField(relation.one_collection!, relation.one_field!);
} else {
await this.knex('directus_relations')
.update({ one_field: null })

301
api/src/services/graphql.ts
View File

@@ -1,7 +1,37 @@
import Knex from 'knex';
import database from '../database';
import { AbstractServiceOptions, Accountability, Collection, Field, Relation, Query, AbstractService } from '../types';
import { GraphQLString, GraphQLSchema, GraphQLObjectType, GraphQLList, GraphQLResolveInfo, GraphQLInputObjectType, ObjectFieldNode, GraphQLID, ValueNode, FieldNode, GraphQLFieldConfigMap, GraphQLInt, IntValueNode, StringValueNode, BooleanValueNode, ArgumentNode, GraphQLScalarType, GraphQLBoolean, ObjectValueNode } from 'graphql';
import {
AbstractServiceOptions,
Accountability,
Collection,
Field,
Relation,
Query,
AbstractService,
} from '../types';
import {
GraphQLString,
GraphQLSchema,
GraphQLObjectType,
GraphQLList,
GraphQLResolveInfo,
GraphQLInputObjectType,
ObjectFieldNode,
GraphQLID,
ValueNode,
FieldNode,
GraphQLFieldConfigMap,
GraphQLInt,
IntValueNode,
StringValueNode,
BooleanValueNode,
ArgumentNode,
GraphQLScalarType,
GraphQLBoolean,
ObjectValueNode,
GraphQLUnionType,
GraphQLUnionTypeConfig,
} from 'graphql';
import { getGraphQLType } from '../utils/get-graphql-type';
import { RelationsService } from './relations';
import { ItemsService } from './items';
@@ -21,6 +51,8 @@ import { SettingsService } from './settings';
import { UsersService } from './users';
import { WebhooksService } from './webhooks';
import { getRelationType } from '../utils/get-relation-type';
export class GraphQLService {
accountability: Accountability | null;
knex: Knex;
@@ -38,7 +70,7 @@ export class GraphQLService {
args = {
sort: {
type: GraphQLString
type: GraphQLString,
},
limit: {
type: GraphQLInt,
@@ -51,15 +83,19 @@ export class GraphQLService {
},
search: {
type: GraphQLString,
}
}
},
};
async getSchema() {
const collectionsInSystem = await this.collectionsService.readByQuery();
const fieldsInSystem = await this.fieldsService.readAll();
const relationsInSystem = await this.relationsService.readByQuery({}) as Relation[];
const relationsInSystem = (await this.relationsService.readByQuery({})) as Relation[];
const schema = this.getGraphQLSchema(collectionsInSystem, fieldsInSystem, relationsInSystem);
const schema = this.getGraphQLSchema(
collectionsInSystem,
fieldsInSystem,
relationsInSystem
);
return schema;
}
@@ -77,27 +113,46 @@ export class GraphQLService {
description: collection.meta?.note,
fields: () => {
const fieldsObject: GraphQLFieldConfigMap<any, any> = {};
const fieldsInCollection = fields.filter((field) => field.collection === collection.collection);
const fieldsInCollection = fields.filter(
(field) => field.collection === collection.collection
);
for (const field of fieldsInCollection) {
const relationForField = relations.find((relation) => {
return relation.many_collection === collection.collection && relation.many_field === field.field ||
relation.one_collection === collection.collection && relation.one_field === field.field;
return (
(relation.many_collection === collection.collection &&
relation.many_field === field.field) ||
(relation.one_collection === collection.collection &&
relation.one_field === field.field)
);
});
if (relationForField) {
const isM2O = relationForField.many_collection === collection.collection && relationForField.many_field === field.field;
const relationType = getRelationType({
relation: relationForField,
collection: collection.collection,
field: field.field,
});
if (isM2O) {
const relatedIsSystem = relationForField.one_collection.startsWith('directus_');
const relatedType = relatedIsSystem ? schema[relationForField.one_collection.substring(9)].type : schema.items[relationForField.one_collection].type;
if (relationType === 'm2o') {
const relatedIsSystem = relationForField.one_collection!.startsWith(
'directus_'
);
const relatedType = relatedIsSystem
? schema[relationForField.one_collection!.substring(9)].type
: schema.items[relationForField.one_collection!].type;
fieldsObject[field.field] = {
type: relatedType,
}
} else {
const relatedIsSystem = relationForField.many_collection.startsWith('directus_');
const relatedType = relatedIsSystem ? schema[relationForField.many_collection.substring(9)].type : schema.items[relationForField.many_collection].type;
};
} else if (relationType === 'o2m') {
const relatedIsSystem = relationForField.many_collection.startsWith(
'directus_'
);
const relatedType = relatedIsSystem
? schema[relationForField.many_collection.substring(9)].type
: schema.items[relationForField.many_collection].type;
fieldsObject[field.field] = {
type: new GraphQLList(relatedType),
@@ -105,14 +160,44 @@ export class GraphQLService {
...this.args,
filter: {
type: filterTypes[relationForField.many_collection],
}
},
},
};
} else if (relationType === 'm2a') {
const relatedCollections = relationForField.one_allowed_collections!;
const types: any = [];
for (const relatedCollection of relatedCollections) {
const relatedType = relatedCollection.startsWith(
'directus_'
)
? schema[relatedCollection.substring(9)].type
: schema.items[relatedCollection].type;
types.push(relatedType);
}
fieldsObject[field.field] = {
type: new GraphQLUnionType({
name: field.field,
types,
resolveType(value, _, info) {
/**
* @TODO figure out a way to reach the parent level
* to be able to read one_collection_field
*/
return types[0];
},
}),
};
}
} else {
fieldsObject[field.field] = {
type: field.schema?.is_primary_key ? GraphQLID : getGraphQLType(field.type),
}
type: field.schema?.is_primary_key
? GraphQLID
: getGraphQLType(field.type),
};
}
fieldsObject[field.field].description = field.meta?.note;
@@ -121,14 +206,15 @@ export class GraphQLService {
return fieldsObject;
},
}),
resolve: (source: any, args: any, context: any, info: GraphQLResolveInfo) => this.resolve(info),
resolve: (source: any, args: any, context: any, info: GraphQLResolveInfo) =>
this.resolve(info),
args: {
...this.args,
filter: {
name: `${collection.collection}_filter`,
type: filterTypes[collection.collection],
}
}
},
},
};
if (systemCollection) {
@@ -145,9 +231,13 @@ export class GraphQLService {
const systemCollection = collection.collection.startsWith('directus_');
if (systemCollection) {
schemaWithLists[collection.collection.substring(9)].type = new GraphQLList(schemaWithLists[collection.collection.substring(9)].type);
schemaWithLists[collection.collection.substring(9)].type = new GraphQLList(
schemaWithLists[collection.collection.substring(9)].type
);
} else {
schemaWithLists.items[collection.collection].type = new GraphQLList(schemaWithLists.items[collection.collection].type);
schemaWithLists.items[collection.collection].type = new GraphQLList(
schemaWithLists.items[collection.collection].type
);
}
}
}
@@ -177,39 +267,55 @@ export class GraphQLService {
fields: () => {
const filterFields: any = {
_and: {
type: new GraphQLList(filterTypes[collection.collection])
type: new GraphQLList(filterTypes[collection.collection]),
},
_or: {
type: new GraphQLList(filterTypes[collection.collection])
type: new GraphQLList(filterTypes[collection.collection]),
},
};
const fieldsInCollection = fields.filter((field) => field.collection === collection.collection);
const fieldsInCollection = fields.filter(
(field) => field.collection === collection.collection
);
for (const field of fieldsInCollection) {
const relationForField = relations.find((relation) => {
return relation.many_collection === collection.collection && relation.many_field === field.field ||
relation.one_collection === collection.collection && relation.one_field === field.field;
return (
(relation.many_collection === collection.collection &&
relation.many_field === field.field) ||
(relation.one_collection === collection.collection &&
relation.one_field === field.field)
);
});
if (relationForField) {
const isM2O = relationForField.many_collection === collection.collection && relationForField.many_field === field.field;
const relationType = getRelationType({
relation: relationForField,
collection: collection.collection,
field: field.field,
});
if (isM2O) {
const relatedType = filterTypes[relationForField.one_collection];
if (relationType === 'm2o') {
const relatedType = filterTypes[relationForField.one_collection!];
filterFields[field.field] = {
type: relatedType,
}
} else {
};
} else if (relationType === 'o2m') {
const relatedType = filterTypes[relationForField.many_collection];
filterFields[field.field] = {
type: relatedType
}
type: relatedType,
};
}
/** @TODO M2A — Handle m2a case here */
/** @TODO
* Figure out how to setup filter fields for a union type output
*/
} else {
const fieldType = field.schema?.is_primary_key ? GraphQLID : getGraphQLType(field.type);
const fieldType = field.schema?.is_primary_key
? GraphQLID
: getGraphQLType(field.type);
filterFields[field.field] = {
type: new GraphQLInputObjectType({
@@ -220,7 +326,7 @@ export class GraphQLService {
type: fieldType,
},
_neq: {
type: fieldType
type: fieldType,
},
_contains: {
type: fieldType,
@@ -257,10 +363,10 @@ export class GraphQLService {
},
_nempty: {
type: GraphQLBoolean,
}
}
},
},
}),
}
};
}
}
@@ -269,20 +375,26 @@ export class GraphQLService {
});
}
return filterTypes
return filterTypes;
}
async resolve(info: GraphQLResolveInfo) {
const systemField = info.path.prev?.key !== 'items';
const collection = systemField ? `directus_${info.fieldName}` : info.fieldName;
const selections = info.fieldNodes[0]?.selectionSet?.selections?.filter((node) => node.kind === 'Field') as FieldNode[] | undefined;
const selections = info.fieldNodes[0]?.selectionSet?.selections?.filter(
(node) => node.kind === 'Field'
) as FieldNode[] | undefined;
if (!selections) return null;
return await this.getData(collection, selections, info.fieldNodes[0].arguments);
}
async getData(collection: string, selections: FieldNode[], argsArray?: readonly ArgumentNode[]) {
async getData(
collection: string,
selections: FieldNode[],
argsArray?: readonly ArgumentNode[]
) {
const args: Record<string, any> = this.parseArgs(argsArray);
const query: Query = sanitizeQuery(args, this.accountability);
@@ -296,7 +408,12 @@ export class GraphQLService {
if (selection.selectionSet === undefined) {
fields.push(current);
} else {
const children = parseFields(selection.selectionSet.selections.filter((selection) => selection.kind === 'Field') as FieldNode[], current);
const children = parseFields(
selection.selectionSet.selections.filter(
(selection) => selection.kind === 'Field'
) as FieldNode[],
current
);
fields.push(...children);
}
@@ -309,47 +426,95 @@ export class GraphQLService {
}
return fields;
}
};
query.fields = parseFields(selections.filter((selection) => selection.kind === 'Field') as FieldNode[]);
query.fields = parseFields(
selections.filter((selection) => selection.kind === 'Field') as FieldNode[]
);
let service: ItemsService;
switch (collection) {
case 'directus_activity':
service = new ActivityService({ knex: this.knex, accountability: this.accountability });
service = new ActivityService({
knex: this.knex,
accountability: this.accountability,
});
// case 'directus_collections':
// service = new CollectionsService({ knex: this.knex, accountability: this.accountability });
// case 'directus_fields':
// service = new FieldsService({ knex: this.knex, accountability: this.accountability });
case 'directus_files':
service = new FilesService({ knex: this.knex, accountability: this.accountability });
service = new FilesService({
knex: this.knex,
accountability: this.accountability,
});
case 'directus_folders':
service = new FoldersService({ knex: this.knex, accountability: this.accountability });
service = new FoldersService({
knex: this.knex,
accountability: this.accountability,
});
case 'directus_folders':
service = new FoldersService({ knex: this.knex, accountability: this.accountability });
service = new FoldersService({
knex: this.knex,
accountability: this.accountability,
});
case 'directus_permissions':
service = new PermissionsService({ knex: this.knex, accountability: this.accountability });
service = new PermissionsService({
knex: this.knex,
accountability: this.accountability,
});
case 'directus_presets':
service = new PresetsService({ knex: this.knex, accountability: this.accountability });
service = new PresetsService({
knex: this.knex,
accountability: this.accountability,
});
case 'directus_relations':
service = new RelationsService({ knex: this.knex, accountability: this.accountability });
service = new RelationsService({
knex: this.knex,
accountability: this.accountability,
});
case 'directus_revisions':
service = new RevisionsService({ knex: this.knex, accountability: this.accountability });
service = new RevisionsService({
knex: this.knex,
accountability: this.accountability,
});
case 'directus_roles':
service = new RolesService({ knex: this.knex, accountability: this.accountability });
service = new RolesService({
knex: this.knex,
accountability: this.accountability,
});
case 'directus_settings':
service = new SettingsService({ knex: this.knex, accountability: this.accountability });
service = new SettingsService({
knex: this.knex,
accountability: this.accountability,
});
case 'directus_users':
service = new UsersService({ knex: this.knex, accountability: this.accountability });
service = new UsersService({
knex: this.knex,
accountability: this.accountability,
});
case 'directus_webhooks':
service = new WebhooksService({ knex: this.knex, accountability: this.accountability });
service = new WebhooksService({
knex: this.knex,
accountability: this.accountability,
});
default:
service = new ItemsService(collection, { knex: this.knex, accountability: this.accountability });
service = new ItemsService(collection, {
knex: this.knex,
accountability: this.accountability,
});
}
const collectionInfo = await this.knex.select('singleton').from('directus_collections').where({ collection: collection }).first();
const result = collectionInfo?.singleton === true ? await service.readSingleton(query) : await service.readByQuery(query);
const collectionInfo = await this.knex
.select('singleton')
.from('directus_collections')
.where({ collection: collection })
.first();
const result =
collectionInfo?.singleton === true
? await service.readSingleton(query)
: await service.readByQuery(query);
return result;
}
@@ -359,7 +524,7 @@ export class GraphQLService {
const parseObjectValue = (arg: ObjectValueNode) => {
return this.parseArgs(arg.fields);
}
};
const argsObject: any = {};
@@ -379,11 +544,13 @@ export class GraphQLService {
argsObject[argument.name.value] = values;
} else {
argsObject[argument.name.value] = (argument.value as IntValueNode | StringValueNode | BooleanValueNode).value;
argsObject[argument.name.value] = (argument.value as
| IntValueNode
| StringValueNode
| BooleanValueNode).value;
}
}
return argsObject;
}
}

2
api/src/services/index.ts
View File

@@ -19,4 +19,4 @@ export * from './settings';
export * from './users';
export * from './utils';
export * from './webhooks';
export * from './specifications'
export * from './specifications';

95
api/src/services/items.ts
View File

@@ -20,7 +20,7 @@ import logger from '../logger';
import { PayloadService } from './payload';
import { AuthorizationService } from './authorization';
import { pick, clone } from 'lodash';
import { pick, clone, cloneDeep } from 'lodash';
import getDefaultValue from '../utils/get-default-value';
import { InvalidPayloadException } from '../exceptions';
@@ -29,6 +29,7 @@ export class ItemsService implements AbstractService {
knex: Knex;
accountability: Accountability | null;
eventScope: string;
schemaInspector: ReturnType<typeof SchemaInspector>;
constructor(collection: string, options?: AbstractServiceOptions) {
this.collection = collection;
@@ -38,15 +39,16 @@ export class ItemsService implements AbstractService {
? this.collection.substring(9)
: 'items';
this.schemaInspector = SchemaInspector(this.knex);
return this;
}
async create(data: Partial<Item>[]): Promise<PrimaryKey[]>;
async create(data: Partial<Item>): Promise<PrimaryKey>;
async create(data: Partial<Item> | Partial<Item>[]): Promise<PrimaryKey | PrimaryKey[]> {
const schemaInspector = SchemaInspector(this.knex);
const primaryKeyField = await schemaInspector.primary(this.collection);
const columns = await schemaInspector.columns(this.collection);
const primaryKeyField = await this.schemaInspector.primary(this.collection);
const columns = await this.schemaInspector.columns(this.collection);
let payloads = clone(Array.isArray(data) ? data : [data]);
@@ -193,6 +195,7 @@ export class ItemsService implements AbstractService {
async readByQuery(query: Query): Promise<null | Item | Item[]> {
const authorizationService = new AuthorizationService({
accountability: this.accountability,
knex: this.knex,
});
let ast = await getASTFromQuery(this.collection, query, {
@@ -204,7 +207,7 @@ export class ItemsService implements AbstractService {
ast = await authorizationService.processAST(ast);
}
const records = await runAST(ast);
const records = await runAST(ast, { knex: this.knex });
return records;
}
@@ -220,8 +223,7 @@ export class ItemsService implements AbstractService {
action: PermissionsAction = 'read'
): Promise<null | Item | Item[]> {
query = clone(query);
const schemaInspector = SchemaInspector(this.knex);
const primaryKeyField = await schemaInspector.primary(this.collection);
const primaryKeyField = await this.schemaInspector.primary(this.collection);
const keys = Array.isArray(key) ? key : [key];
if (keys.length === 1) {
@@ -263,9 +265,8 @@ export class ItemsService implements AbstractService {
data: Partial<Item> | Partial<Item>[],
key?: PrimaryKey | PrimaryKey[]
): Promise<PrimaryKey | PrimaryKey[]> {
const schemaInspector = SchemaInspector(this.knex);
const primaryKeyField = await schemaInspector.primary(this.collection);
const columns = await schemaInspector.columns(this.collection);
const primaryKeyField = await this.schemaInspector.primary(this.collection);
const columns = await this.schemaInspector.columns(this.collection);
// Updating one or more items to the same payload
if (data && key) {
@@ -293,6 +294,7 @@ export class ItemsService implements AbstractService {
if (this.accountability) {
const authorizationService = new AuthorizationService({
accountability: this.accountability,
knex: this.knex,
});
await authorizationService.checkAccess('update', this.collection, keys);
@@ -421,12 +423,58 @@ export class ItemsService implements AbstractService {
return keys;
}
async updateByQuery(data: Partial<Item>, query: Query): Promise<PrimaryKey[]> {
const primaryKeyField = await this.schemaInspector.primary(this.collection);
const readQuery = cloneDeep(query);
readQuery.fields = [primaryKeyField];
// Not authenticated:
const itemsService = new ItemsService(this.collection, { knex: this.knex });
let itemsToUpdate = await itemsService.readByQuery(readQuery);
itemsToUpdate = Array.isArray(itemsToUpdate) ? itemsToUpdate : [itemsToUpdate];
const keys: PrimaryKey[] = itemsToUpdate.map(
(item: Partial<Item>) => item[primaryKeyField]
);
return await this.update(data, keys);
}
upsert(data: Partial<Item>[]): Promise<PrimaryKey[]>;
upsert(data: Partial<Item>): Promise<PrimaryKey>;
async upsert(data: Partial<Item> | Partial<Item>[]): Promise<PrimaryKey | PrimaryKey[]> {
const primaryKeyField = await this.schemaInspector.primary(this.collection);
const payloads = Array.isArray(data) ? data : [data];
const primaryKeys: PrimaryKey[] = [];
for (const payload of payloads) {
const primaryKey = payload[primaryKeyField];
const exists =
primaryKey &&
!!(await this.knex
.select(primaryKeyField)
.from(this.collection)
.where({ [primaryKeyField]: primaryKey })
.first());
if (exists) {
const keys = await this.update([payload]);
primaryKeys.push(...keys);
} else {
const key = await this.create(payload);
primaryKeys.push(key);
}
}
return Array.isArray(data) ? primaryKeys : primaryKeys[0];
}
delete(key: PrimaryKey): Promise<PrimaryKey>;
delete(keys: PrimaryKey[]): Promise<PrimaryKey[]>;
async delete(key: PrimaryKey | PrimaryKey[]): Promise<PrimaryKey | PrimaryKey[]> {
const keys = (Array.isArray(key) ? key : [key]) as PrimaryKey[];
const schemaInspector = SchemaInspector(this.knex);
const primaryKeyField = await schemaInspector.primary(this.collection);
const primaryKeyField = await this.schemaInspector.primary(this.collection);
if (this.accountability && this.accountability.admin !== true) {
const authorizationService = new AuthorizationService({
@@ -480,15 +528,31 @@ export class ItemsService implements AbstractService {
return key;
}
async deleteByQuery(query: Query): Promise<PrimaryKey[]> {
const primaryKeyField = await this.schemaInspector.primary(this.collection);
const readQuery = cloneDeep(query);
readQuery.fields = [primaryKeyField];
// Not authenticated:
const itemsService = new ItemsService(this.collection);
let itemsToDelete = await itemsService.readByQuery(readQuery);
itemsToDelete = Array.isArray(itemsToDelete) ? itemsToDelete : [itemsToDelete];
const keys: PrimaryKey[] = itemsToDelete.map(
(item: Partial<Item>) => item[primaryKeyField]
);
return await this.delete(keys);
}
async readSingleton(query: Query) {
query = clone(query);
const schemaInspector = SchemaInspector(this.knex);
query.single = true;
const record = (await this.readByQuery(query)) as Item;
if (!record) {
const columns = await schemaInspector.columnInfo(this.collection);
const columns = await this.schemaInspector.columnInfo(this.collection);
const defaults: Record<string, any> = {};
for (const column of columns) {
@@ -502,8 +566,7 @@ export class ItemsService implements AbstractService {
}
async upsertSingleton(data: Partial<Item>) {
const schemaInspector = SchemaInspector(this.knex);
const primaryKeyField = await schemaInspector.primary(this.collection);
const primaryKeyField = await this.schemaInspector.primary(this.collection);
const record = await this.knex
.select(primaryKeyField)

110
api/src/services/payload.ts
View File

@@ -6,7 +6,7 @@
import argon2 from 'argon2';
import { v4 as uuidv4 } from 'uuid';
import database from '../database';
import { clone, isObject } from 'lodash';
import { clone, isObject, cloneDeep } from 'lodash';
import { Relation, Item, AbstractServiceOptions, Accountability, PrimaryKey } from '../types';
import { ItemsService } from './items';
import { URL } from 'url';
@@ -15,6 +15,7 @@ import env from '../env';
import SchemaInspector from 'knex-schema-inspector';
import getLocalType from '../utils/get-local-type';
import { format, formatISO } from 'date-fns';
import { ForbiddenException } from '../exceptions';
type Action = 'create' | 'read' | 'update';
@@ -301,6 +302,8 @@ export class PayloadService {
});
for (const relation of relationsToProcess) {
if (!relation.one_collection || !relation.one_primary) continue;
const itemsService = new ItemsService(relation.one_collection, {
accountability: this.accountability,
knex: this.knex,
@@ -313,11 +316,7 @@ export class PayloadService {
const exists = hasPrimaryKey && !!(await itemsService.readByKey(relatedPrimaryKey));
if (exists) {
if (relatedRecord.hasOwnProperty('$delete') && relatedRecord.$delete) {
await itemsService.delete(relatedPrimaryKey);
} else {
await itemsService.update(relatedRecord, relatedPrimaryKey);
}
await itemsService.update(relatedRecord, relatedPrimaryKey);
} else {
relatedPrimaryKey = await itemsService.create(relatedRecord);
}
@@ -346,55 +345,74 @@ export class PayloadService {
// Only process related records that are actually in the payload
const relationsToProcess = relations.filter((relation) => {
return (
payload.hasOwnProperty(relation.one_field) &&
Array.isArray(payload[relation.one_field])
);
if (!relation.one_field) return false;
return payload.hasOwnProperty(relation.one_field);
});
for (const relation of relationsToProcess) {
const relatedRecords: Partial<Item>[] = payload[relation.one_field].map(
(record: string | number | Partial<Item>) => {
if (typeof record === 'string' || typeof record === 'number') {
record = {
[relation.many_primary]: record,
};
}
return {
...record,
[relation.many_field]: parent || payload[relation.one_primary],
};
}
);
const itemsService = new ItemsService(relation.many_collection, {
accountability: this.accountability,
knex: this.knex,
});
const toBeCreated = relatedRecords.filter(
(record) => record.hasOwnProperty(relation.many_primary) === false
const relatedRecords: Partial<Item>[] = [];
let savedPrimaryKeys: PrimaryKey[] = [];
if (payload[relation.one_field!] && Array.isArray(payload[relation.one_field!])) {
for (const relatedRecord of payload[relation.one_field!] || []) {
let record = cloneDeep(relatedRecord);
if (
typeof relatedRecord === 'string' ||
typeof relatedRecord === 'number'
) {
const exists = !!(await this.knex
.select(relation.many_primary)
.from(relation.many_collection)
.where({ [relation.many_primary]: record })
.first());
if (exists === false) {
throw new ForbiddenException(undefined, {
item: record,
collection: relation.many_collection,
});
}
record = {
[relation.many_primary]: relatedRecord,
};
}
relatedRecords.push({
...record,
[relation.many_field]: parent || payload[relation.one_primary!],
});
}
savedPrimaryKeys = await itemsService.upsert(relatedRecords);
}
await itemsService.updateByQuery(
{ [relation.many_field]: null },
{
filter: {
_and: [
{
[relation.many_field]: {
_eq: parent,
},
},
{
[relation.many_primary]: {
_nin: savedPrimaryKeys,
},
},
],
},
}
);
const toBeUpdated = relatedRecords.filter(
(record) =>
record.hasOwnProperty(relation.many_primary) === true &&
record.hasOwnProperty('$delete') === false
);
const toBeDeleted = relatedRecords
.filter(
(record) =>
record.hasOwnProperty(relation.many_primary) === true &&
record.hasOwnProperty('$delete') &&
record.$delete === true
)
.map((record) => record[relation.many_primary]);
await itemsService.create(toBeCreated);
await itemsService.update(toBeUpdated);
await itemsService.delete(toBeDeleted);
}
}
}

2
api/src/services/permissions.ts
View File

@@ -1,4 +1,4 @@
import { AbstractServiceOptions, PermissionsAction } from '../types';
import { AbstractServiceOptions, PermissionsAction, Item, PrimaryKey } from '../types';
import { ItemsService } from '../services/items';
export class PermissionsService extends ItemsService {

79
api/src/services/relations.ts
View File

@@ -1,18 +1,15 @@
import { ItemsService } from './items';
import {
AbstractServiceOptions,
Query,
Item,
PrimaryKey,
PermissionsAction,
Relation,
} from '../types';
import { AbstractServiceOptions, Query, PrimaryKey, PermissionsAction, Relation } from '../types';
import { PermissionsService } from './permissions';
/**
* @TODO update foreign key constraints when relations are updated
*/
type ParsedRelation = Relation & {
one_allowed_collections: string[] | null;
};
export class RelationsService extends ItemsService {
permissionsService: PermissionsService;
@@ -22,7 +19,11 @@ export class RelationsService extends ItemsService {
}
async readByQuery(query: Query): Promise<null | Relation | Relation[]> {
const results = (await super.readByQuery(query)) as Relation | Relation[] | null;
const service = new ItemsService('directus_relations', { knex: this.knex });
const results = (await service.readByQuery(query)) as
| ParsedRelation
| ParsedRelation[]
| null;
const filteredResults = await this.filterForbidden(results);
return filteredResults;
}
@@ -38,15 +39,17 @@ export class RelationsService extends ItemsService {
query: Query = {},
action: PermissionsAction = 'read'
): Promise<null | Relation | Relation[]> {
const results = (await super.readByKey(key as any, query, action)) as
| Relation
| Relation[]
const service = new ItemsService('directus_relations', { knex: this.knex });
const results = (await service.readByKey(key as any, query, action)) as
| ParsedRelation
| ParsedRelation[]
| null;
const filteredResults = await this.filterForbidden(results);
return filteredResults;
}
private async filterForbidden(relations: Relation | Relation[] | null) {
private async filterForbidden(relations: ParsedRelation | ParsedRelation[] | null) {
if (relations === null) return null;
if (this.accountability === null || this.accountability?.admin === true) return relations;
@@ -62,17 +65,47 @@ export class RelationsService extends ItemsService {
relations = Array.isArray(relations) ? relations : [relations];
return relations.filter((relation) => {
const collectionsAllowed =
allowedCollections.includes(relation.many_collection) &&
allowedCollections.includes(relation.one_collection);
let collectionsAllowed = true;
let fieldsAllowed = true;
const fieldsAllowed =
allowedFields[relation.one_collection] &&
allowedFields[relation.many_collection] &&
(allowedFields[relation.many_collection].includes('*') ||
allowedFields[relation.many_collection].includes(relation.many_field)) &&
(allowedFields[relation.one_collection].includes('*') ||
allowedFields[relation.one_collection].includes(relation.one_field));
if (allowedCollections.includes(relation.many_collection) === false) {
collectionsAllowed = false;
}
if (
relation.one_collection &&
allowedCollections.includes(relation.one_collection) === false
) {
collectionsAllowed = false;
}
if (
relation.one_allowed_collections &&
relation.one_allowed_collections.every((collection) =>
allowedCollections.includes(collection)
) === false
) {
collectionsAllowed = false;
}
if (
!allowedFields[relation.many_collection] ||
(allowedFields[relation.many_collection].includes('*') === false &&
allowedFields[relation.many_collection].includes(relation.many_field) === false)
) {
fieldsAllowed = false;
}
if (
relation.one_collection &&
relation.one_field &&
(!allowedFields[relation.one_collection] ||
(allowedFields[relation.one_collection].includes('*') === false &&
allowedFields[relation.one_collection].includes(relation.one_field) ===
false))
) {
fieldsAllowed = false;
}
return collectionsAllowed && fieldsAllowed;
});

30
api/src/services/roles.ts
View File

@@ -3,6 +3,7 @@ import { AbstractServiceOptions, PrimaryKey } from '../types';
import { PermissionsService } from './permissions';
import { UsersService } from './users';
import { PresetsService } from './presets';
import { UnprocessableEntityException } from '../exceptions';
export class RolesService extends ItemsService {
constructor(options?: AbstractServiceOptions) {
@@ -14,15 +15,28 @@ export class RolesService extends ItemsService {
async delete(key: PrimaryKey | PrimaryKey[]): Promise<PrimaryKey | PrimaryKey[]> {
const keys = Array.isArray(key) ? key : [key];
// Make sure there's at least one admin role left after this deletion is done
const otherAdminRoles = await this.knex
.count('*', { as: 'count' })
.from('directus_roles')
.whereNotIn('id', keys)
.andWhere({ admin_access: true })
.first();
const otherAdminRolesCount = +(otherAdminRoles?.count || 0);
if (otherAdminRolesCount === 0)
throw new UnprocessableEntityException(`You can't delete the last admin role.`);
// Remove all permissions associated with this role
const permissionsService = new PermissionsService({
knex: this.knex,
accountability: this.accountability,
});
const permissionsForRole = await permissionsService.readByQuery({
const permissionsForRole = (await permissionsService.readByQuery({
fields: ['id'],
filter: { role: { _in: keys } },
}) as { id: number }[];
})) as { id: number }[];
const permissionIDs = permissionsForRole.map((permission) => permission.id);
await permissionsService.delete(permissionIDs);
@@ -31,10 +45,12 @@ export class RolesService extends ItemsService {
knex: this.knex,
accountability: this.accountability,
});
const presetsForRole = await presetsService.readByQuery({
const presetsForRole = (await presetsService.readByQuery({
fields: ['id'],
filter: { role: { _in: keys } },
}) as { id: string }[];
})) as { id: string }[];
const presetIDs = presetsForRole.map((preset) => preset.id);
await presetsService.delete(presetIDs);
@@ -43,10 +59,12 @@ export class RolesService extends ItemsService {
knex: this.knex,
accountability: this.accountability,
});
const usersInRole = await usersService.readByQuery({
const usersInRole = (await usersService.readByQuery({
fields: ['id'],
filter: { role: { _in: keys } },
}) as { id: string }[];
})) as { id: string }[];
const userIDs = usersInRole.map((user) => user.id);
await usersService.update({ status: 'suspended', role: null }, userIDs);

796
api/src/services/specifications.ts
View File

@@ -3,6 +3,7 @@ import {
Accountability,
Collection,
Field,
Permission,
Relation,
types,
} from '../types';
@@ -12,17 +13,25 @@ import formatTitle from '@directus/format-title';
import { cloneDeep, mergeWith } from 'lodash';
import { RelationsService } from './relations';
import env from '../env';
import {
OpenAPIObject,
PathItemObject,
OperationObject,
TagObject,
SchemaObject,
} from 'openapi3-ts';
// @ts-ignore
import { version } from '../../package.json';
// @ts-ignore
import openapi from '@directus/specs';
type RelationTree = Record<string, Record<string, Relation[]>>;
import Knex from 'knex';
import database from '../database';
import { getRelationType } from '../utils/get-relation-type';
export class SpecificationService {
accountability: Accountability | null;
knex: Knex;
fieldsService: FieldsService;
collectionsService: CollectionsService;
@@ -32,16 +41,20 @@ export class SpecificationService {
constructor(options?: AbstractServiceOptions) {
this.accountability = options?.accountability || null;
this.knex = options?.knex || database;
this.fieldsService = new FieldsService(options);
this.collectionsService = new CollectionsService(options);
this.relationsService = new RelationsService(options);
this.oas = new OASService({
fieldsService: this.fieldsService,
collectionsService: this.collectionsService,
relationsService: this.relationsService,
});
this.oas = new OASService(
{ knex: this.knex, accountability: this.accountability },
{
fieldsService: this.fieldsService,
collectionsService: this.collectionsService,
relationsService: this.relationsService,
}
);
}
}
@@ -50,34 +63,462 @@ interface SpecificationSubService {
}
class OASService implements SpecificationSubService {
accountability: Accountability | null;
knex: Knex;
fieldsService: FieldsService;
collectionsService: CollectionsService;
relationsService: RelationsService;
constructor({
fieldsService,
collectionsService,
relationsService,
}: {
fieldsService: FieldsService;
collectionsService: CollectionsService;
relationsService: RelationsService;
}) {
constructor(
options: AbstractServiceOptions,
{
fieldsService,
collectionsService,
relationsService,
}: {
fieldsService: FieldsService;
collectionsService: CollectionsService;
relationsService: RelationsService;
}
) {
this.accountability = options.accountability || null;
this.knex = options?.knex || database;
this.fieldsService = fieldsService;
this.collectionsService = collectionsService;
this.relationsService = relationsService;
}
private collectionsDenyList = [
'directus_collections',
'directus_fields',
'directus_migrations',
'directus_sessions',
];
async generate() {
const collections = await this.collectionsService.readByQuery();
const fields = await this.fieldsService.readAll();
const relations = (await this.relationsService.readByQuery({})) as Relation[];
const permissions: Permission[] = await this.knex
.select('*')
.from('directus_permissions')
.where({ role: this.accountability?.role || null });
const tags = await this.generateTags(collections);
const paths = await this.generatePaths(permissions, tags);
const components = await this.generateComponents(collections, fields, relations, tags);
const spec: OpenAPIObject = {
openapi: '3.0.1',
info: {
title: 'Dynamic API Specification',
description:
'This is a dynamicly generated API specification for all endpoints existing on the current .',
version: version,
},
servers: [
{
url: env.PUBLIC_URL,
description: 'Your current Directus instance.',
},
],
tags,
paths,
components,
};
return spec;
}
private async generateTags(collections: Collection[]): Promise<OpenAPIObject['tags']> {
const systemTags = cloneDeep(openapi.tags)!;
const tags: OpenAPIObject['tags'] = [];
// System tags that don't have an associated collection are always readable to the user
for (const systemTag of systemTags) {
if (!systemTag['x-collection']) {
tags.push(systemTag);
}
}
for (const collection of collections) {
const isSystem = collection.collection.startsWith('directus_');
// If the collection is one of the system collections, pull the tag from the static spec
if (isSystem) {
for (const tag of openapi.tags!) {
if (tag['x-collection'] === collection.collection) {
tags.push(tag);
break;
}
}
} else {
tags.push({
name: 'Items' + formatTitle(collection.collection).replace(/ /g, ''),
description: collection.meta?.note || undefined,
'x-collection': collection.collection,
});
}
}
// Filter out the generic Items information
return tags.filter((tag) => tag.name !== 'Items');
}
private async generatePaths(
permissions: Permission[],
tags: OpenAPIObject['tags']
): Promise<OpenAPIObject['paths']> {
const paths: OpenAPIObject['paths'] = {};
if (!tags) return paths;
for (const tag of tags) {
const isSystem =
tag.hasOwnProperty('x-collection') === false ||
tag['x-collection'].startsWith('directus_');
if (isSystem) {
for (const [path, pathItem] of Object.entries<PathItemObject>(openapi.paths)) {
for (const [method, operation] of Object.entries<OperationObject>(pathItem)) {
if (operation.tags?.includes(tag.name)) {
if (!paths[path]) {
paths[path] = {};
}
const hasPermission =
this.accountability?.admin === true ||
tag.hasOwnProperty('x-collection') === false ||
!!permissions.find(
(permission) =>
permission.collection === tag['x-collection'] &&
permission.action === this.getActionForMethod(method)
);
if (hasPermission) {
paths[path][method] = operation;
}
}
}
}
} else {
const listBase = cloneDeep(openapi.paths['/items/{collection}']);
const detailBase = cloneDeep(openapi.paths['/items/{collection}/{id}']);
const collection = tag['x-collection'];
for (const method of ['post', 'get', 'patch', 'delete']) {
const hasPermission =
this.accountability?.admin === true ||
!!permissions.find(
(permission) =>
permission.collection === collection &&
permission.action === this.getActionForMethod(method)
);
if (hasPermission) {
if (!paths[`/items/${collection}`]) paths[`/items/${collection}`] = {};
if (!paths[`/items/${collection}/{id}`])
paths[`/items/${collection}/{id}`] = {};
if (listBase[method]) {
paths[`/items/${collection}`][method] = mergeWith(
cloneDeep(listBase[method]),
{
description: listBase[method].description.replace(
'item',
collection + ' item'
),
tags: [tag.name],
operationId: `${this.getActionForMethod(method)}${tag.name}`,
requestBody: ['get', 'delete'].includes(method)
? undefined
: {
content: {
'application/json': {
schema: {
oneOf: [
{
type: 'array',
items: {
$ref: `#/components/schema/${tag.name}`,
},
},
{
$ref: `#/components/schema/${tag.name}`,
},
],
},
},
},
},
responses: {
'200': {
content:
method === 'delete'
? undefined
: {
'application/json': {
schema: {
properties: {
data: {
items: {
$ref: `#/components/schema/${tag.name}`,
},
},
},
},
},
},
},
},
},
(obj, src) => {
if (Array.isArray(obj)) return obj.concat(src);
}
);
}
if (detailBase[method]) {
paths[`/items/${collection}/{id}`][method] = mergeWith(
cloneDeep(detailBase[method]),
{
description: detailBase[method].description.replace(
'item',
collection + ' item'
),
tags: [tag.name],
operationId: `${this.getActionForMethod(method)}Single${
tag.name
}`,
requestBody: ['get', 'delete'].includes(method)
? undefined
: {
content: {
'application/json': {
schema: {
$ref: `#/components/schema/${tag.name}`,
},
},
},
},
responses: {
'200': {
content:
method === 'delete'
? undefined
: {
'application/json': {
schema: {
properties: {
data: {
items: {
$ref: `#/components/schema/${tag.name}`,
},
},
},
},
},
},
},
},
},
(obj, src) => {
if (Array.isArray(obj)) return obj.concat(src);
}
);
}
}
}
}
}
return paths;
}
private async generateComponents(
collections: Collection[],
fields: Field[],
relations: Relation[],
tags: OpenAPIObject['tags']
): Promise<OpenAPIObject['components']> {
let components: OpenAPIObject['components'] = cloneDeep(openapi.components);
if (!components) components = {};
components.schemas = {};
if (!tags) return;
for (const collection of collections) {
const tag = tags.find((tag) => tag['x-collection'] === collection.collection);
if (!tag) continue;
const isSystem = collection.collection.startsWith('directus_');
const fieldsInCollection = fields.filter(
(field) => field.collection === collection.collection
);
if (isSystem) {
const schemaComponent: SchemaObject = cloneDeep(
openapi.components!.schemas![tag.name]
);
schemaComponent.properties = {};
for (const field of fieldsInCollection) {
schemaComponent.properties[field.field] =
(cloneDeep(
(openapi.components!.schemas![tag.name] as SchemaObject).properties![
field.field
]
) as SchemaObject) || this.generateField(field, relations, tags, fields);
}
components.schemas[tag.name] = schemaComponent;
} else {
const schemaComponent: SchemaObject = {
type: 'object',
properties: {},
'x-collection': collection.collection,
};
for (const field of fieldsInCollection) {
schemaComponent.properties![field.field] = this.generateField(
field,
relations,
tags,
fields
);
}
components.schemas[tag.name] = schemaComponent;
}
}
return components;
}
private getActionForMethod(method: string): 'create' | 'read' | 'update' | 'delete' {
switch (method) {
case 'post':
return 'create';
case 'patch':
return 'update';
case 'delete':
return 'delete';
case 'get':
default:
return 'read';
}
}
private generateField(
field: Field,
relations: Relation[],
tags: TagObject[],
fields: Field[]
): SchemaObject {
let propertyObject: SchemaObject = {
nullable: field.schema?.is_nullable,
description: field.meta?.note || undefined,
};
const relation = relations.find(
(relation) =>
(relation.many_collection === field.collection &&
relation.many_field === field.field) ||
(relation.one_collection === field.collection && relation.one_field === field.field)
);
if (!relation) {
propertyObject = {
...propertyObject,
...this.fieldTypes[field.type],
};
} else {
const relationType = getRelationType({
relation,
field: field.field,
collection: field.collection,
});
if (relationType === 'm2o') {
const relatedTag = tags.find(
(tag) => tag['x-collection'] === relation.one_collection
);
const relatedPrimaryKeyField = fields.find(
(field) =>
field.collection === relation.one_collection && field.schema?.is_primary_key
);
if (!relatedTag || !relatedPrimaryKeyField) return propertyObject;
propertyObject.oneOf = [
{
...this.fieldTypes[relatedPrimaryKeyField.type],
},
{
$ref: `#/components/schemas/${relatedTag.name}`,
},
];
} else if (relationType === 'o2m') {
const relatedTag = tags.find(
(tag) => tag['x-collection'] === relation.many_collection
);
const relatedPrimaryKeyField = fields.find(
(field) =>
field.collection === relation.many_collection &&
field.schema?.is_primary_key
);
if (!relatedTag || !relatedPrimaryKeyField) return propertyObject;
propertyObject.type = 'array';
propertyObject.items = {
oneOf: [
{
...this.fieldTypes[relatedPrimaryKeyField.type],
},
{
$ref: `#/components/schemas/${relatedTag.name}`,
},
],
};
} else if (relationType === 'm2a') {
const relatedTags = tags.filter((tag) =>
relation.one_allowed_collections!.includes(tag['x-collection'])
);
propertyObject.type = 'array';
propertyObject.items = {
oneOf: [
{
type: 'string',
},
relatedTags.map((tag) => ({
$ref: `#/components/schemas/${tag.name}`,
})),
],
};
}
}
return propertyObject;
}
private fieldTypes: Record<
typeof types[number],
{ type: string; format?: string; items?: any }
{
type:
| 'string'
| 'number'
| 'boolean'
| 'object'
| 'array'
| 'integer'
| 'null'
| undefined;
format?: string;
items?: any;
}
> = {
bigInteger: {
type: 'integer',
@@ -139,311 +580,4 @@ class OASService implements SpecificationSubService {
},
},
};
async generate() {
const collections = await this.collectionsService.readByQuery();
const userCollections = collections.filter(
(collection) =>
collection.collection.startsWith('directus_') === false ||
this.collectionsDenyList.includes(collection.collection) === false
);
const allFields = await this.fieldsService.readAll();
const fields: Record<string, Field[]> = {};
for (const field of allFields) {
if (
field.collection.startsWith('directus_') === false ||
this.collectionsDenyList.includes(field.collection) === false
) {
if (field.collection in fields) {
fields[field.collection].push(field);
} else {
fields[field.collection] = [field];
}
}
}
const relationsResult = await this.relationsService.readByQuery({});
if (relationsResult === null) return {};
const relations = Array.isArray(relationsResult) ? relationsResult : [relationsResult];
const relationsTree: RelationTree = {};
for (const relation of relations as Relation[]) {
if (relation.many_collection in relationsTree === false)
relationsTree[relation.many_collection] = {};
if (relation.one_collection in relationsTree === false)
relationsTree[relation.one_collection] = {};
if (relation.many_field in relationsTree[relation.many_collection] === false)
relationsTree[relation.many_collection][relation.many_field] = [];
if (relation.one_field in relationsTree[relation.one_collection] === false)
relationsTree[relation.one_collection][relation.one_field] = [];
relationsTree[relation.many_collection][relation.many_field].push(relation);
relationsTree[relation.one_collection][relation.one_field].push(relation);
}
const dynOpenapi = {
openapi: '3.0.1',
info: {
title: 'Dynamic Api Specification',
description:
'This is a dynamicly generated api specification for all endpoints existing on the api.',
version: version,
},
servers: [
{
url: env.PUBLIC_URL,
description: 'Your current api server.',
},
],
tags: this.generateTags(userCollections),
paths: this.generatePaths(userCollections),
components: {
schemas: this.generateSchemas(userCollections, fields, relationsTree),
},
};
return mergeWith(cloneDeep(openapi), cloneDeep(dynOpenapi), (obj, src) => {
if (Array.isArray(obj)) return obj.concat(src);
});
}
private getNameFormats(collection: string) {
const isInternal = collection.startsWith('directus_');
const schema = formatTitle(
isInternal ? collection.replace('directus_', '').replace(/s$/, '') : collection + 'Item'
).replace(/ /g, '');
const tag = formatTitle(
isInternal ? collection.replace('directus_', '') : collection + ' Collection'
);
const path = isInternal ? collection : '/items/' + collection;
const objectRef = `#/components/schemas/${schema}`;
return { schema, tag, path, objectRef };
}
private generateTags(collections: Collection[]) {
const tags: { name: string; description?: string }[] = [];
for (const collection of collections) {
if (collection.collection.startsWith('directus_')) continue;
const { tag } = this.getNameFormats(collection.collection);
tags.push({ name: tag, description: collection.meta?.note || undefined });
}
return tags;
}
private generatePaths(collections: Collection[]) {
const paths: Record<string, object> = {};
for (const collection of collections) {
if (collection.collection.startsWith('directus_')) continue;
const { tag, schema, objectRef, path } = this.getNameFormats(collection.collection);
const objectSingle = {
content: {
'application/json': {
schema: {
$ref: objectRef,
},
},
},
};
(paths[path] = {
get: {
operationId: `get${schema}s`,
description: `List all items from the ${tag}`,
tags: [tag],
parameters: [
{ $ref: '#/components/parameters/Fields' },
{ $ref: '#/components/parameters/Limit' },
{ $ref: '#/components/parameters/Meta' },
{ $ref: '#/components/parameters/Offset' },
{ $ref: '#/components/parameters/Single' },
{ $ref: '#/components/parameters/Sort' },
{ $ref: '#/components/parameters/Filter' },
{ $ref: '#/components/parameters/q' },
],
responses: {
'200': {
description: 'Successful request',
content: {
'application/json': {
schema: {
type: 'object',
properties: {
data: {
type: 'array',
items: {
$ref: objectRef,
},
},
},
},
},
},
},
'401': {
$ref: '#/components/responses/UnauthorizedError',
},
},
},
post: {
operationId: `create${schema}`,
description: `Create a new item in the ${tag}`,
tags: [tag],
parameter: [{ $ref: '#/components/parameters/Meta' }],
requestBody: objectSingle,
responses: {
'200': objectSingle,
'401': {
$ref: '#/components/responses/UnauthorizedError',
},
},
},
}),
(paths[path + '/{id}'] = {
parameters: [{ $ref: '#/components/parameters/Id' }],
get: {
operationId: `get${schema}`,
description: `Get a singe item from the ${tag}`,
tags: [tag],
parameters: [
{ $ref: '#/components/parameters/Fields' },
{ $ref: '#/components/parameters/Meta' },
],
responses: {
'200': objectSingle,
'401': {
$ref: '#/components/responses/UnauthorizedError',
},
'404': {
$ref: '#/components/responses/NotFoundError',
},
},
},
patch: {
operationId: `update${schema}`,
description: `Update an item from the ${tag}`,
tags: [tag],
parameters: [
{ $ref: '#/components/parameters/Fields' },
{ $ref: '#/components/parameters/Meta' },
],
requestBody: objectSingle,
responses: {
'200': objectSingle,
'401': {
$ref: '#/components/responses/UnauthorizedError',
},
'404': {
$ref: '#/components/responses/NotFoundError',
},
},
},
delete: {
operationId: `delete${schema}`,
description: `Delete an item from the ${tag}`,
tags: [tag],
responses: {
'200': {
description: 'Successful request',
},
'401': {
$ref: '#/components/responses/UnauthorizedError',
},
'404': {
$ref: '#/components/responses/NotFoundError',
},
},
},
});
}
return paths;
}
private generateSchemas(
collections: Collection[],
fields: Record<string, Field[]>,
relations: RelationTree
) {
const schemas: Record<string, any> = {};
for (const collection of collections) {
const { schema, tag } = this.getNameFormats(collection.collection);
if (fields === undefined) return;
schemas[schema] = {
type: 'object',
'x-tag': tag,
properties: {},
};
for (const field of fields[collection.collection]) {
const fieldRelations =
field.collection in relations && field.field in relations[field.collection]
? relations[field.collection][field.field]
: [];
if (fieldRelations.length !== 0) {
const relation = fieldRelations[0];
const isM2O =
relation.many_collection === field.collection &&
relation.many_field === field.field;
const relatedCollection = isM2O
? relation.one_collection
: relation.many_collection;
if (!relatedCollection) continue;
const relatedPrimaryField = fields[relatedCollection].find(
(field) => field.schema?.is_primary_key
);
if (relatedPrimaryField?.type === undefined) continue;
const relatedType = this.fieldTypes[relatedPrimaryField?.type];
const { objectRef } = this.getNameFormats(relatedCollection);
const type = isM2O
? {
oneOf: [
{
...relatedType,
nullable: field.schema?.is_nullable === true,
},
{ $ref: objectRef },
],
}
: {
type: 'array',
items: { $ref: objectRef },
nullable: field.schema?.is_nullable === true,
};
schemas[schema].properties[field.field] = {
...type,
description: field.meta?.note || undefined,
};
} else {
schemas[schema].properties[field.field] = {
...this.fieldTypes[field.type],
nullable: field.schema?.is_nullable === true,
description: field.meta?.note || undefined,
};
}
}
}
return schemas;
}
}

30
api/src/services/users.ts
View File

@@ -4,7 +4,11 @@ import jwt from 'jsonwebtoken';
import { sendInviteMail, sendPasswordResetMail } from '../mail';
import database from '../database';
import argon2 from 'argon2';
import { InvalidPayloadException, ForbiddenException } from '../exceptions';
import {
InvalidPayloadException,
ForbiddenException,
UnprocessableEntityException,
} from '../exceptions';
import { Accountability, PrimaryKey, Item, AbstractServiceOptions } from '../types';
import Knex from 'knex';
import env from '../env';
@@ -50,6 +54,30 @@ export class UsersService extends ItemsService {
return this.service.update(data, key as any);
}
delete(key: PrimaryKey): Promise<PrimaryKey>;
delete(keys: PrimaryKey[]): Promise<PrimaryKey[]>;
async delete(key: PrimaryKey | PrimaryKey[]): Promise<PrimaryKey | PrimaryKey[]> {
const keys = Array.isArray(key) ? key : [key];
// Make sure there's at least one admin user left after this deletion is done
const otherAdminUsers = await this.knex
.count('*', { as: 'count' })
.from('directus_users')
.whereNotIn('directus_users.id', keys)
.andWhere({ 'directus_roles.admin_access': true })
.leftJoin('directus_roles', 'directus_users.role', 'directus_roles.id')
.first();
const otherAdminUsersCount = +(otherAdminUsers?.count || 0);
if (otherAdminUsersCount === 0)
throw new UnprocessableEntityException(`You can't delete the last admin user.`);
await super.delete(keys as any);
return key;
}
async inviteUser(email: string, role: string) {
await this.service.create({ email, role, status: 'invited' });

43
api/src/types/ast.ts
View File

@@ -1,24 +1,55 @@
import { Query } from './query';
import { Relation } from './relation';
export type NestedCollectionAST = {
type: 'collection';
export type M2ONode = {
type: 'm2o';
name: string;
children: (NestedCollectionAST | FieldAST)[];
children: (NestedCollectionNode | FieldNode)[];
query: Query;
fieldKey: string;
relation: Relation;
parentKey: string;
relatedKey: string;
};
export type M2ANode = {
type: 'm2a';
names: string[];
children: {
[collection: string]: (NestedCollectionNode | FieldNode)[];
};
query: {
[collection: string]: Query;
};
relatedKey: {
[collection: string]: string;
};
fieldKey: string;
relation: Relation;
parentKey: string;
};
export type FieldAST = {
export type O2MNode = {
type: 'o2m';
name: string;
children: (NestedCollectionNode | FieldNode)[];
query: Query;
fieldKey: string;
relation: Relation;
parentKey: string;
relatedKey: string;
};
export type NestedCollectionNode = M2ONode | O2MNode | M2ANode;
export type FieldNode = {
type: 'field';
name: string;
};
export type AST = {
type: 'collection';
type: 'root';
name: string;
children: (NestedCollectionAST | FieldAST)[];
children: (NestedCollectionNode | FieldNode)[];
query: Query;
};

3
api/src/types/field.ts
View File

@@ -28,8 +28,7 @@ export type FieldMeta = {
locked: boolean;
required: boolean;
readonly: boolean;
hidden_detail: boolean;
hidden_browse: boolean;
hidden: boolean;
sort: number | null;
width: string | null;
group: number | null;

9
api/src/types/relation.ts
View File

@@ -5,7 +5,10 @@ export type Relation = {
many_field: string;
many_primary: string;
one_collection: string;
one_field: string;
one_primary: string;
one_collection: string | null;
one_field: string | null;
one_primary: string | null;
one_collection_field: string | null;
one_allowed_collections: string | null;
};

27
api/src/utils/apply-query.ts
View File

@@ -12,7 +12,7 @@ export default async function applyQuery(collection: string, dbQuery: QueryBuild
dbQuery.orderBy(query.sort);
}
if (typeof query.limit === 'number' && !query.offset) {
if (typeof query.limit === 'number') {
dbQuery.limit(query.limit);
}
@@ -67,7 +67,10 @@ export async function applyFilter(dbQuery: QueryBuilder, filter: Filter, collect
const filterPath = getFilterPath(key, value);
const { operator: filterOperator, value: filterValue } = getOperation(key, value);
const column = filterPath.length > 1 ? await applyJoins(dbQuery, filterPath, collection) : `${collection}.${filterPath[0]}`;
const column =
filterPath.length > 1
? await applyJoins(dbQuery, filterPath, collection)
: `${collection}.${filterPath[0]}`;
applyFilterToQuery(column, filterOperator, filterValue);
}
@@ -167,8 +170,9 @@ function getFilterPath(key: string, value: Record<string, any>) {
return path;
}
function getOperation(key: string, value: Record<string, any>): { operator: string, value: any } {
if (key.startsWith('_') && key !== '_and' && key !== '_or') return { operator: key as string, value };
function getOperation(key: string, value: Record<string, any>): { operator: string; value: any } {
if (key.startsWith('_') && key !== '_and' && key !== '_or')
return { operator: key as string, value };
return getOperation(Object.keys(value)[0], Object.values(value)[0]);
}
@@ -191,12 +195,21 @@ async function applyJoins(dbQuery: QueryBuilder, path: string[], collection: str
if (!relation) return;
const isM2O = relation.many_collection === parentCollection && relation.many_field === pathParts[0];
const isM2O =
relation.many_collection === parentCollection && relation.many_field === pathParts[0];
if (isM2O) {
dbQuery.leftJoin(relation.one_collection, `${parentCollection}.${relation.many_field}`, `${relation.one_collection}.${relation.one_primary}`);
dbQuery.leftJoin(
relation.one_collection,
`${parentCollection}.${relation.many_field}`,
`${relation.one_collection}.${relation.one_primary}`
);
} else {
dbQuery.leftJoin(relation.many_collection, `${relation.one_collection}.${relation.one_primary}`, `${relation.many_collection}.${relation.many_field}`);
dbQuery.leftJoin(
relation.many_collection,
`${relation.one_collection}.${relation.one_primary}`,
`${relation.many_collection}.${relation.many_field}`
);
}
pathParts.shift();

212
api/src/utils/get-ast-from-query.ts
View File

@@ -4,17 +4,18 @@
import {
AST,
NestedCollectionAST,
FieldAST,
NestedCollectionNode,
FieldNode,
Query,
Relation,
PermissionsAction,
Accountability,
} from '../types';
import database from '../database';
import { clone } from 'lodash';
import { cloneDeep } from 'lodash';
import Knex from 'knex';
import SchemaInspector from 'knex-schema-inspector';
import { getRelationType } from '../utils/get-relation-type';
type GetASTOptions = {
accountability?: Accountability | null;
@@ -27,7 +28,7 @@ export default async function getASTFromQuery(
query: Query,
options?: GetASTOptions
): Promise<AST> {
query = clone(query);
query = cloneDeep(query);
const accountability = options?.accountability;
const action = options?.action || 'read';
@@ -49,7 +50,7 @@ export default async function getASTFromQuery(
: null;
const ast: AST = {
type: 'collection',
type: 'root',
name: collection,
query: query,
children: [],
@@ -62,16 +63,120 @@ export default async function getASTFromQuery(
delete query.fields;
delete query.deep;
ast.children = (await parseFields(collection, fields, deep)).filter(filterEmptyChildCollections);
ast.children = await parseFields(collection, fields, deep);
return ast;
function convertWildcards(parentCollection: string, fields: string[]) {
async function parseFields(
parentCollection: string,
fields: string[],
deep?: Record<string, Query>
) {
fields = await convertWildcards(parentCollection, fields);
if (!fields) return [];
const children: (NestedCollectionNode | FieldNode)[] = [];
const relationalStructure: Record<string, string[]> = {};
for (const field of fields) {
const isRelational =
field.includes('.') ||
// We'll always treat top level o2m fields as a related item. This is an alias field, otherwise it won't return
// anything
!!relations.find(
(relation) =>
relation.one_collection === parentCollection && relation.one_field === field
);
if (isRelational) {
// field is relational
const parts = field.split('.');
if (relationalStructure.hasOwnProperty(parts[0]) === false) {
relationalStructure[parts[0]] = [];
}
if (parts.length > 1) {
relationalStructure[parts[0]].push(parts.slice(1).join('.'));
}
} else {
children.push({ type: 'field', name: field });
}
}
for (const [relationalField, nestedFields] of Object.entries(relationalStructure)) {
const relatedCollection = getRelatedCollection(parentCollection, relationalField);
const relation = getRelation(parentCollection, relationalField);
if (!relation) continue;
const relationType = getRelationType({
relation,
collection: parentCollection,
field: relationalField,
});
if (!relationType) continue;
let child: NestedCollectionNode | null = null;
if (relationType === 'm2a') {
const allowedCollections = relation.one_allowed_collections!.split(',');
child = {
type: 'm2a',
names: allowedCollections,
children: {},
query: {},
relatedKey: {},
parentKey: await schemaInspector.primary(parentCollection),
fieldKey: relationalField,
relation: relation,
};
for (const relatedCollection of allowedCollections) {
child.children[relatedCollection] = await parseFields(
relatedCollection,
nestedFields
);
child.query[relatedCollection] = {};
child.relatedKey[relatedCollection] = await schemaInspector.primary(
relatedCollection
);
}
} else if (relatedCollection) {
child = {
type: relationType,
name: relatedCollection,
fieldKey: relationalField,
parentKey: await schemaInspector.primary(parentCollection),
relatedKey: await schemaInspector.primary(relatedCollection),
relation: relation,
query: deep?.[relationalField] || {},
children: await parseFields(relatedCollection, nestedFields),
};
}
if (child) {
children.push(child);
}
}
return children;
}
async function convertWildcards(parentCollection: string, fields: string[]) {
fields = cloneDeep(fields);
const fieldsInCollection = await getFieldsInCollection(parentCollection);
const allowedFields = permissions
? permissions
.find((permission) => parentCollection === permission.collection)
?.fields?.split(',')
: ['*'];
: fieldsInCollection;
if (!allowedFields || allowedFields.length === 0) return [];
@@ -81,8 +186,13 @@ export default async function getASTFromQuery(
if (fieldKey.includes('*') === false) continue;
if (fieldKey === '*') {
if (allowedFields.includes('*')) continue;
fields.splice(index, 1, ...allowedFields);
// Set to all fields in collection
if (allowedFields.includes('*')) {
fields.splice(index, 1, ...fieldsInCollection);
} else {
// Set to all allowed fields
fields.splice(index, 1, ...allowedFields);
}
}
// Swap *.* case for *,<relational-field>.*,<another-relational>.*
@@ -97,12 +207,12 @@ export default async function getASTFromQuery(
relation.one_collection === parentCollection
)
.map((relation) => {
const isM2O = relation.many_collection === parentCollection;
return isM2O ? relation.many_field : relation.one_field;
const isMany = relation.many_collection === parentCollection;
return isMany ? relation.many_field : relation.one_field;
})
: allowedFields.filter((fieldKey) => !!getRelation(parentCollection, fieldKey));
const nonRelationalFields = allowedFields.filter(
const nonRelationalFields = fieldsInCollection.filter(
(fieldKey) => relationalFields.includes(fieldKey) === false
);
@@ -122,57 +232,6 @@ export default async function getASTFromQuery(
return fields;
}
async function parseFields(parentCollection: string, fields: string[], deep?: Record<string, Query>) {
fields = convertWildcards(parentCollection, fields);
if (!fields) return [];
const children: (NestedCollectionAST | FieldAST)[] = [];
const relationalStructure: Record<string, string[]> = {};
for (const field of fields) {
if (field.includes('.') === false) {
children.push({ type: 'field', name: field });
} else {
// field is relational
const parts = field.split('.');
if (relationalStructure.hasOwnProperty(parts[0]) === false) {
relationalStructure[parts[0]] = [];
}
relationalStructure[parts[0]].push(parts.slice(1).join('.'));
}
}
for (const [relationalField, nestedFields] of Object.entries(relationalStructure)) {
const relatedCollection = getRelatedCollection(parentCollection, relationalField);
if (!relatedCollection) continue;
const relation = getRelation(parentCollection, relationalField);
if (!relation) continue;
const child: NestedCollectionAST = {
type: 'collection',
name: relatedCollection,
fieldKey: relationalField,
parentKey: await schemaInspector.primary(parentCollection),
relation: relation,
query: deep?.[relationalField] || {},
children: (await parseFields(relatedCollection, nestedFields)).filter(
filterEmptyChildCollections
),
};
children.push(child);
}
return children;
}
function getRelation(collection: string, field: string) {
const relation = relations.find((relation) => {
return (
@@ -184,22 +243,35 @@ export default async function getASTFromQuery(
return relation;
}
function getRelatedCollection(collection: string, field: string) {
function getRelatedCollection(collection: string, field: string): string | null {
const relation = getRelation(collection, field);
if (!relation) return null;
if (relation.many_collection === collection && relation.many_field === field) {
return relation.one_collection;
return relation.one_collection || null;
}
if (relation.one_collection === collection && relation.one_field === field) {
return relation.many_collection;
return relation.many_collection || null;
}
return null;
}
function filterEmptyChildCollections(childAST: FieldAST | NestedCollectionAST) {
if (childAST.type === 'collection' && childAST.children.length === 0) return false;
return true;
async function getFieldsInCollection(collection: string) {
const columns = (await schemaInspector.columns(collection)).map((column) => column.column);
const fields = (
await knex.select('field').from('directus_fields').where({ collection })
).map((field) => field.field);
const fieldsInCollection = [
...columns,
...fields.filter((field) => {
return columns.includes(field) === false;
}),
];
return fieldsInCollection;
}
}

30
api/src/utils/get-relation-type.ts Normal file
View File

@@ -0,0 +1,30 @@
import { Relation } from '../types';
export function getRelationType(getRelationOptions: {
relation: Relation;
collection: string | null;
field: string;
}): 'm2o' | 'o2m' | 'm2a' | null {
const { relation, collection, field } = getRelationOptions;
if (!relation) return null;
if (
relation.many_collection === collection &&
relation.many_field === field &&
relation.one_collection_field &&
relation.one_allowed_collections
) {
return 'm2a';
}
if (relation.many_collection === collection && relation.many_field === field) {
return 'm2o';
}
if (relation.one_collection === collection && relation.one_field === field) {
return 'o2m';
}
return null;
}

2
api/src/utils/list-folders.ts
View File

@@ -6,7 +6,7 @@ const readdir = promisify(fs.readdir);
const stat = promisify(fs.stat);
export default async function listFolders(location: string) {
const fullPath = path.join(process.cwd(), location);
const fullPath = path.resolve(location);
const files = await readdir(fullPath);
const directories: string[] = [];

7
api/src/utils/parse-filter.ts
View File

@@ -2,7 +2,12 @@ import { Filter, Accountability } from '../types';
import { deepMap } from './deep-map';
export function parseFilter(filter: Filter, accountability: Accountability | null) {
return deepMap(filter, (val: any) => {
return deepMap(filter, (val: any, key: string) => {
if (val === 'true') return true;
if (val === 'false') return false;
if (key === '_in' || key === '_nin') return val.split(',').filter((val: any) => val);
if (val === '$NOW') return new Date();
if (val === '$CURRENT_USER') return accountability?.user || null;
if (val === '$CURRENT_ROLE') return accountability?.role || null;

11
api/src/utils/sanitize-query.ts
View File

@@ -2,7 +2,10 @@ import { Accountability, Query, Sort, Filter, Meta } from '../types';
import logger from '../logger';
import { parseFilter } from '../utils/parse-filter';
export function sanitizeQuery(rawQuery: Record<string, any>, accountability: Accountability | null) {
export function sanitizeQuery(
rawQuery: Record<string, any>,
accountability: Accountability | null
) {
const query: Query = {};
if (rawQuery.limit !== undefined) {
@@ -49,11 +52,7 @@ export function sanitizeQuery(rawQuery: Record<string, any>, accountability: Acc
query.search = rawQuery.search;
}
if (
rawQuery.export &&
typeof rawQuery.export === 'string' &&
['json', 'csv'].includes(rawQuery.export)
) {
if (rawQuery.export) {
query.export = rawQuery.export as 'json' | 'csv';
}

110
api/src/utils/validate-query.ts Normal file
View File

@@ -0,0 +1,110 @@
import { Query } from '../types';
import Joi from 'joi';
import { InvalidQueryException } from '../exceptions';
const querySchema = Joi.object({
fields: Joi.array().items(Joi.string()),
sort: Joi.array().items(
Joi.object({
column: Joi.string(),
order: Joi.string().valid('asc', 'desc'),
})
),
filter: Joi.object({}).unknown(),
limit: Joi.number(),
offset: Joi.number(),
page: Joi.number(),
single: Joi.boolean(),
meta: Joi.array().items(Joi.string().valid('total_count', 'result_count')),
search: Joi.string(),
export: Joi.string().valid('json', 'csv'),
deep: Joi.link('#query'),
}).id('query');
export function validateQuery(query: Query) {
const { error } = querySchema.validate(query);
if (query.filter && Object.keys(query.filter).length > 0) {
validateFilter(query.filter);
}
if (error) {
throw new InvalidQueryException(error.message);
}
return query;
}
function validateFilter(filter: Query['filter']) {
if (!filter) throw new InvalidQueryException('Invalid filter object');
for (const [key, nested] of Object.entries(filter)) {
if (key === '_and' || key === '_or') {
nested.forEach(validateFilter);
} else if (key.startsWith('_')) {
const value = nested;
switch (key) {
case '_eq':
case '_neq':
case '_contains':
case '_ncontains':
case '_gt':
case '_gte':
case '_lt':
case '_lte':
default:
validateFilterPrimitive(value, key);
break;
case '_in':
case '_nin':
validateList(value, key);
break;
case '_null':
case '_nnull':
case '_empty':
case '_nempty':
validateBoolean(value, key);
break;
}
} else {
validateFilter(nested);
}
}
}
function validateFilterPrimitive(value: any, key: string) {
if ((typeof value === 'string' || typeof value === 'number') === false) {
throw new InvalidQueryException(
`The filter value for "${key}" has to be a string or a number`
);
}
if (Number.isNaN(value)) {
throw new InvalidQueryException(`The filter value for "${key}" is not a valid number`);
}
if (typeof value === 'string' && value.length === 0) {
throw new InvalidQueryException(
`You can't filter for an empty string in "${key}". Use "_empty" or "_nempty" instead`
);
}
return true;
}
function validateList(value: any, key: string) {
if (Array.isArray(value) === false || value.length === 0) {
throw new InvalidQueryException(`"${key}" has to be an array of values`);
}
return true;
}
function validateBoolean(value: any, key: string) {
if (typeof value !== 'boolean') {
throw new InvalidQueryException(`"${key}" has to be a boolean`);
}
return true;
}

3
api/tsconfig.json
View File

@@ -10,7 +10,8 @@
"rootDir": "src",
"strict": true,
"lib": ["es2019"],
"skipLibCheck": true
"skipLibCheck": true,
"declaration": true
},
"exclude": [
"node_modules"

36
app/.storybook/mock-data/collections.json
View File

@@ -6442,7 +6442,7 @@
"options": {
"fields": [
{
"field": "locale",
"field": "language",
"type": "string",
"interface": "language",
"options": {
@@ -7062,7 +7062,7 @@
"options": {
"fields": [
{
"field": "locale",
"field": "language",
"type": "string",
"interface": "language",
"options": {
@@ -10482,9 +10482,9 @@
"group": null,
"length": "32"
},
"locale": {
"language": {
"collection": "directus_users",
"field": "locale",
"field": "language",
"datatype": "VARCHAR",
"unique": false,
"primary_key": false,
@@ -10512,34 +10512,6 @@
"group": null,
"length": "8"
},
"locale_options": {
"collection": "directus_users",
"field": "locale_options",
"datatype": "TEXT",
"unique": false,
"primary_key": false,
"auto_increment": false,
"default_value": null,
"note": "",
"signed": true,
"id": 857,
"type": "json",
"sort": 16,
"interface": "json",
"display": null,
"display_options": null,
"hidden_detail": true,
"hidden_browse": true,
"required": false,
"options": null,
"locked": 1,
"translation": null,
"readonly": false,
"width": null,
"validation": null,
"group": null,
"length": null
},
"avatar": {
"collection": "directus_users",
"field": "avatar",

43
app/.storybook/mock-data/fields.json
View File

@@ -1788,7 +1788,7 @@
"options": {
"fields": [
{
"field": "locale",
"field": "language",
"type": "string",
"interface": "language",
"options": {
@@ -2736,7 +2736,7 @@
"options": {
"fields": [
{
"field": "locale",
"field": "language",
"type": "string",
"interface": "language",
"options": {
@@ -5639,7 +5639,7 @@
},
{
"collection": "directus_users",
"field": "locale",
"field": "language",
"datatype": "VARCHAR",
"unique": false,
"primary_key": false,
@@ -5666,7 +5666,7 @@
"validation": null,
"group": null,
"length": "8",
"name": "Locale"
"name": "Language"
},
{
"collection": "directus_users",
@@ -5740,35 +5740,6 @@
"length": "16",
"name": "Status"
},
{
"collection": "directus_users",
"field": "locale_options",
"datatype": "TEXT",
"unique": false,
"primary_key": false,
"auto_increment": false,
"default_value": null,
"note": "",
"signed": true,
"id": 857,
"type": "json",
"sort": 16,
"interface": "json",
"display": null,
"display_options": null,
"hidden_detail": true,
"hidden_browse": true,
"required": false,
"options": null,
"locked": 1,
"translation": null,
"readonly": false,
"width": null,
"validation": null,
"group": null,
"length": null,
"name": "Locale Options"
},
{
"collection": "directus_users",
"field": "avatar",
@@ -11001,7 +10972,7 @@
{
"id": 826,
"collection": "directus_settings",
"field": "default_locale",
"field": "default_language",
"type": "string",
"interface": "language",
"options": {
@@ -11018,9 +10989,9 @@
"sort": 8,
"width": "half",
"group": null,
"note": "Default locale for Directus Users",
"note": "Default language for Directus Users",
"translation": null,
"name": "Default Locale"
"name": "Default Language"
},
{
"id": 827,

4474
app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

21
app/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@directus/app",
"version": "9.0.0-beta.10",
"version": "9.0.0-beta.11",
"private": false,
"description": "Directus is an Open-Source Headless CMS & API for Managing Custom Databases",
"author": "Rijk van Zanten <rijk@rngr.org>",
@@ -31,7 +31,7 @@
},
"dependencies": {
"@directus/docs": "file:../docs",
"@directus/format-title": "^3.2.0",
"@directus/format-title": "file:../packages/format-title",
"@popperjs/core": "^2.4.3",
"@sindresorhus/slugify": "^1.0.0",
"@tinymce/tinymce-vue": "^3.2.2",
@@ -51,7 +51,6 @@
"color": "^3.1.2",
"color-string": "^1.5.3",
"cropperjs": "^1.5.7",
"csslint": "^1.0.5",
"date-fns": "^2.14.0",
"diff": "^4.0.2",
"highlight.js": "^10.2.0",
@@ -83,15 +82,15 @@
},
"gitHead": "4476da28dbbc2824e680137aa28b2b91b5afabec",
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.6",
"@vue/cli-plugin-eslint": "^4.5.6",
"@vue/cli-plugin-router": "^4.5.6",
"@vue/cli-plugin-typescript": "^4.5.6",
"@vue/cli-plugin-unit-jest": "^4.5.6",
"@vue/cli-plugin-vuex": "^4.5.6",
"@vue/cli-service": "^4.5.6",
"@vue/cli-plugin-babel": "^4.5.7",
"@vue/cli-plugin-eslint": "^4.5.7",
"@vue/cli-plugin-router": "^4.5.7",
"@vue/cli-plugin-typescript": "^4.5.7",
"@vue/cli-plugin-unit-jest": "^4.5.7",
"@vue/cli-plugin-vuex": "^4.5.7",
"@vue/cli-service": "^4.5.7",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.1.0",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^1.1.0"
}
}

3
app/public/index.html
View File

@@ -6,7 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="manifest" href="/manifest.webmanifest" />
<title>Loading...</title>
<title>Loading...</title>
<style id="custom-css"></style>
</head>
<body class="light">
<noscript>

8
app/src/app.vue
View File

@@ -26,6 +26,8 @@
<portal-target name="dialog-outlet" transition="transition-dialog" multiple />
<portal-target name="menu-outlet" transition="transition-bounce" multiple />
<mounting-portal mount-to="#custom-css" target-tag="style">{{ customCSS }}</mounting-portal>
</div>
</template>
@@ -102,6 +104,10 @@ export default defineComponent({
}
);
const customCSS = computed(() => {
return settingsStore.state?.settings?.custom_css || '';
});
const appAccess = computed(() => {
if (!userStore.state.currentUser) return true;
return userStore.state.currentUser?.role?.app_access || false;
@@ -118,7 +124,7 @@ export default defineComponent({
axios,
});
return { hydrating, brandStyle, appAccess, error };
return { hydrating, brandStyle, appAccess, error, customCSS };
},
});
</script>

5
app/src/components/v-form/form-field.vue
View File

@@ -26,6 +26,7 @@
@edit-raw="showRaw = true"
/>
</v-menu>
<div class="label-spacer" v-else-if="['full', 'fill'].includes(field.meta && field.meta.width) === false" />
<form-field-interface
:value="_value"
@@ -203,4 +204,8 @@ export default defineComponent({
.raw-value {
--v-textarea-font-family: var(--family-monospace);
}
.label-spacer {
height: 28px;
}
</style>

19
app/src/components/v-item-group/v-item.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="v-item">
<slot v-bind="{ active, toggle }" />
<slot v-bind="{ active: isActive, toggle }" />
</div>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { defineComponent, toRefs } from '@vue/composition-api';
import { useGroupable } from '@/composables/groupable';
export default defineComponent({
@@ -18,14 +18,25 @@ export default defineComponent({
type: String,
default: 'item-group',
},
active: {
type: Boolean,
default: undefined
},
watch: {
type: Boolean,
default: true
}
},
setup(props) {
const { active, toggle } = useGroupable({
const {active} = toRefs(props)
const { active: isActive, toggle } = useGroupable({
value: props.value,
group: props.scope,
watch: props.watch,
active
});
return { active, toggle };
return { isActive, toggle };
},
});
</script>

33
app/src/components/v-list/v-list-group.vue
View File

@@ -1,6 +1,14 @@
<template>
<div class="v-list-group">
<v-list-item :active="active" class="activator" :to="to" :exact="exact" @click="onClick" :disabled="disabled">
<v-list-item
:active="active"
class="activator"
:to="to"
:exact="exact"
@click="onClick"
:disabled="disabled"
:dense="dense"
>
<slot name="activator" :active="groupActive" />
<v-list-item-icon class="activator-icon" :class="{ active: groupActive }" v-if="$slots.default">
@@ -15,8 +23,8 @@
</template>
<script lang="ts">
import { defineComponent, toRefs, watch } from '@vue/composition-api';
import { useGroupableParent, useGroupable } from '@/composables/groupable';
import { defineComponent, nextTick, toRefs, watch, PropType, ref } from '@vue/composition-api';
import { useGroupable } from '@/composables/groupable';
export default defineComponent({
props: {
@@ -40,10 +48,6 @@ export default defineComponent({
type: Boolean,
default: false,
},
disableGroupableParent: {
type: Boolean,
default: false,
},
scope: {
type: String,
default: undefined,
@@ -52,22 +56,19 @@ export default defineComponent({
type: [String, Number],
default: undefined,
},
dense: {
type: Boolean,
default: false,
},
},
setup(props, { listeners, emit }) {
const { multiple } = toRefs(props);
const { active: groupActive, toggle, activate, deactivate } = useGroupable({
group: props.scope,
value: props.value,
});
if (props.disableGroupableParent !== true) {
useGroupableParent(
{},
{
multiple: toRefs(props).multiple,
}
);
}
return { groupActive, toggle, onClick };
function onClick(event: MouseEvent) {

9
app/src/components/v-list/v-list-item.vue
View File

@@ -25,6 +25,7 @@
<script lang="ts">
import { Location } from 'vue-router';
import { defineComponent, PropType, computed } from '@vue/composition-api';
import { useGroupable } from '@/composables/groupable';
export default defineComponent({
props: {
@@ -64,6 +65,10 @@ export default defineComponent({
type: String,
default: null,
},
value: {
type: [String, Number],
default: undefined,
},
},
setup(props, { listeners }) {
const component = computed<string>(() => {
@@ -72,6 +77,10 @@ export default defineComponent({
return 'li';
});
const { active: groupActive, toggle, activate, deactivate } = useGroupable({
value: props.value,
});
const isClickable = computed(() => Boolean(props.to || props.href || listeners.click !== undefined));
return { component, isClickable };

26
app/src/components/v-list/v-list.vue
View File

@@ -9,7 +9,15 @@ import { defineComponent, PropType, ref, toRefs } from '@vue/composition-api';
import { useGroupableParent } from '@/composables/groupable';
export default defineComponent({
model: {
prop: 'activeItems',
event: 'input',
},
props: {
activeItems: {
type: Array as PropType<(number | string)[]>,
default: () => [],
},
large: {
type: Boolean,
default: false,
@@ -18,13 +26,23 @@ export default defineComponent({
type: Boolean,
default: true,
},
mandatory: {
type: Boolean,
default: true,
},
},
setup(props) {
setup(props, { emit }) {
const { activeItems, multiple, mandatory } = toRefs(props);
useGroupableParent(
{},
{
mandatory: ref(false),
multiple: toRefs(props).multiple,
selection: activeItems,
onSelectionChange: (newSelection) => {
emit('input', newSelection);
},
},
{
mandatory,
multiple,
}
);

6
app/src/components/v-upload/v-upload.vue
View File

@@ -52,7 +52,7 @@
</v-list>
</v-menu>
<modal-browse
<modal-collection
collection="directus_files"
:active="activeDialog === 'choose'"
@update:active="activeDialog = null"
@@ -83,12 +83,12 @@
<script lang="ts">
import { defineComponent, ref, computed, watch } from '@vue/composition-api';
import uploadFiles from '@/utils/upload-files';
import ModalBrowse from '@/views/private/components/modal-browse';
import ModalCollection from '@/views/private/components/modal-collection';
import api from '@/api';
import useItem from '@/composables/use-item';
export default defineComponent({
components: { ModalBrowse },
components: { ModalCollection },
props: {
multiple: {
type: Boolean,

7
app/src/composables/groupable/groupable.ts
View File

@@ -149,10 +149,15 @@ export function useGroupableParent(
// Register a child within the context of this group
function register(item: GroupableInstance) {
items.value = [...items.value, item];
const value = getValueForItem(item)
// If you're required to select a value, make sure a value is selected on first render
if (selection.value.length === 0 && options?.mandatory?.value === true && items.value.length === 1) {
selection.value = [getValueForItem(item)];
selection.value = [value];
}
if(item.active.value && selection.value.includes(value) === false) {
toggle(item)
}
}

9
app/src/composables/use-shortcut/use-shortcut.ts
View File

@@ -83,9 +83,14 @@ function mapKeys(key: string) {
function callHandlers(event: KeyboardEvent) {
Object.entries(handlers).forEach(([key, value]) => {
const rest = key.split('+').filter((keySegment) => keysdown.has(keySegment) === false);
const keys = key.split('+');
if (rest.length > 0) return;
for (key of keysdown) {
if (keys.includes(key) === false) return;
}
for (key of keys) {
if (keysdown.has(key) === false) return;
}
for (let i = 0; i < value.length; i++) {
let cancel = false;

2
app/src/displays/user/user.vue
View File

@@ -55,7 +55,7 @@ export default defineComponent({
if (props.value.avatar?.id) {
return `${getRootPath()}assets/${props.value.avatar.id}?key=system-small-cover`;
}
return null
return null;
});
return { src };

2
app/src/hydrate.ts
View File

@@ -57,7 +57,7 @@ export async function hydrate(stores = useStores()) {
*/
await userStore.hydrate();
setLanguage((userStore.state.currentUser?.locale as Language) || 'en-US');
setLanguage((userStore.state.currentUser?.language as Language) || 'en-US');
await Promise.all(stores.filter(({ id }) => id !== 'userStore').map((store) => store.hydrate?.()));

8
app/src/interfaces/code/code.vue
View File

@@ -147,7 +147,7 @@ export default defineComponent({
}
return found;
});
} else if (lang === 'javascript' || lang === 'htmlmixed' || lang === 'css' || lang === 'yaml') {
} else if (lang === 'javascript' || lang === 'htmlmixed' || lang === 'yaml') {
let linter = lang;
if (lang === 'javascript') {
const jshint = await import('jshint');
@@ -156,9 +156,6 @@ export default defineComponent({
linter = 'html';
const htmlhint = await import('htmlhint');
(window as any).HTMLHint = htmlhint;
} else if (lang === 'css') {
const csslint = await import('csslint');
(window as any).CSSLint = csslint;
} else if (lang === 'yaml') {
const jsyaml = await import('js-yaml');
(window as any).jsyaml = jsyaml;
@@ -166,6 +163,9 @@ export default defineComponent({
await import(`codemirror/mode/${lang}/${lang}.js`);
await import(`codemirror/addon/lint/${linter}-lint.js`);
codemirror.value.setOption('lint', (CodeMirror as any).lint[linter]);
await import(`codemirror/mode/${lang}/${lang}.js`);
codemirror.value.setOption('mode', { name: lang });
} else if (lang === 'text/plain') {
codemirror.value.setOption('mode', { name: null });
} else {

6
app/src/interfaces/file/file.vue
View File

@@ -79,7 +79,7 @@
</v-card>
</v-dialog>
<modal-browse
<modal-collection
collection="directus_files"
:active="activeDialog === 'choose'"
@update:active="activeDialog = null"
@@ -107,7 +107,7 @@
<script lang="ts">
import { defineComponent, ref, watch, computed } from '@vue/composition-api';
import ModalBrowse from '@/views/private/components/modal-browse';
import ModalCollection from '@/views/private/components/modal-collection';
import api from '@/api';
import readableMimeType from '@/utils/readable-mime-type';
import getRootPath from '@/utils/get-root-path';
@@ -119,7 +119,7 @@ type FileInfo = {
};
export default defineComponent({
components: { ModalBrowse },
components: { ModalCollection },
props: {
value: {
type: String,

213
app/src/interfaces/files/files.vue
View File

@@ -1,55 +1,60 @@
<template>
<v-notice type="warning" v-if="!relations || relations.length !== 2">
<v-notice type="warning" v-if="!junction || !relation">
{{ $t('relationship_not_setup') }}
</v-notice>
<div v-else class="files">
<v-table
inline
:items="previewItems"
:items="displayItems"
:loading="loading"
:headers.sync="tableHeaders"
:item-key="junctionCollectionPrimaryKeyField.field"
:item-key="relationFields.junctionPkField"
:disabled="disabled"
@click:row="editExisting"
@click:row="editItem"
>
<template #item.$thumbnail="{ item }">
<render-display
:value="get(item, [relationCurrentToJunction.junction_field])"
:value="item"
display="file"
:collection="junctionCollection"
:field="relationCurrentToJunction.junction_field"
:collection="relationFields.junctionCollection"
:field="relationFields.relationPkField"
type="file"
/>
</template>
<template #item-append="{ item }" v-if="!disabled">
<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deselect(item)" />
<v-icon
name="close"
v-tooltip="$t('deselect')"
class="deselect"
@click.stop="deleteItem(item, items)"
/>
</template>
</v-table>
<div class="actions" v-if="!disabled">
<v-button class="new" @click="showUpload = true">{{ $t('upload_file') }}</v-button>
<v-button class="existing" @click="showBrowseModal = true">
<v-button class="existing" @click="selectModalActive = true">
{{ $t('add_existing') }}
</v-button>
</div>
<modal-detail
<modal-item
v-if="!disabled"
:active="showDetailModal"
:collection="junctionCollection"
:primary-key="junctionRowPrimaryKey"
:active="currentlyEditing !== null"
:collection="relationFields.junctionCollection"
:primary-key="currentlyEditing || '+'"
:edits="editsAtStart"
:junction-field="relationCurrentToJunction.junction_field"
:related-primary-key="relatedRowPrimaryKey"
:related-primary-key="relationFields.relationPkField"
:junction-field="relationFields.junctionRelation"
@input="stageEdits"
@update:active="cancelEdit"
/>
<modal-browse
<modal-collection
v-if="!disabled"
:active.sync="showBrowseModal"
:collection="relationJunctionToRelated.one_collection"
:active.sync="selectModalActive"
:collection="relation.one_collection"
:selection="[]"
:filters="selectionFilters"
@input="stageSelection"
@@ -69,20 +74,21 @@
</template>
<script lang="ts">
import { defineComponent, ref, computed, toRefs } from '@vue/composition-api';
import { defineComponent, ref, computed, toRefs, PropType } from '@vue/composition-api';
import { Header as TableHeader } from '@/components/v-table/types';
import ModalBrowse from '@/views/private/components/modal-browse';
import ModalDetail from '@/views/private/components/modal-detail';
import ModalCollection from '@/views/private/components/modal-collection';
import ModalItem from '@/views/private/components/modal-item';
import { get } from 'lodash';
import i18n from '@/lang';
import useActions from '@/interfaces/many-to-many/use-actions';
import useRelation from '@/interfaces/many-to-many/use-relation';
import useSelection from '@/interfaces/many-to-many/use-selection';
import usePreview from '@/interfaces/many-to-many/use-preview';
import useEdit from '@/interfaces/many-to-many/use-edit';
export default defineComponent({
components: { ModalBrowse, ModalDetail },
components: { ModalCollection, ModalItem },
props: {
primaryKey: {
type: [Number, String],
@@ -97,8 +103,8 @@ export default defineComponent({
required: true,
},
value: {
type: Array,
default: undefined,
type: Array as PropType<(string | number | Record<string, any>)[] | null>,
default: null,
},
disabled: {
type: Boolean,
@@ -108,24 +114,26 @@ export default defineComponent({
setup(props, { emit }) {
const { collection, field, value, primaryKey } = toRefs(props);
const { junction, junctionCollection, relation, relationCollection, relationFields } = useRelation(
collection,
field
);
function emitter(newVal: any[] | null) {
emit('input', newVal);
}
const {
relations,
relationCurrentToJunction,
relationJunctionToRelated,
junctionCollectionPrimaryKeyField,
junctionCollection,
relatedCollectionPrimaryKeyField,
relatedCollection,
} = useRelation({ collection, field });
deleteItem,
getUpdatedItems,
getNewItems,
getPrimaryKeys,
getNewSelectedItems,
getJunctionItem,
getJunctionFromRelatedId,
} = useActions(value, relationFields, emitter);
const fields = computed(() => {
if (!relationCurrentToJunction.value) return [];
if (!relationCurrentToJunction.value.junction_field) return [];
const jf = relationCurrentToJunction.value.junction_field;
return ['id', 'type', 'title'].map((key) => `${jf}.${key}`);
});
const fields = ref(['id', 'type', 'title']);
const tableHeaders = ref<TableHeader[]>([
{
@@ -138,133 +146,86 @@ export default defineComponent({
{
text: i18n.t('title'),
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
value: relationCurrentToJunction.value!.junction_field + '.title',
value: 'title',
align: 'left',
sortable: true,
width: 250,
},
]);
const { loading, previewItems, error } = usePreview({
const { loading, displayItems, error, items } = usePreview(
value,
primaryKey,
junctionCollectionPrimaryKeyField,
relatedCollectionPrimaryKeyField,
junctionCollection,
relatedCollection,
relationCurrentToJunction,
relationJunctionToRelated,
fields,
});
relationFields,
getNewSelectedItems,
getUpdatedItems,
getNewItems,
getPrimaryKeys
);
const {
showDetailModal,
cancelEdit,
stageEdits,
editsAtStart,
junctionRowPrimaryKey,
editExisting,
relatedRowPrimaryKey,
initialValues,
} = useEdit({
relationCurrentToJunction,
junctionCollectionPrimaryKeyField,
relatedCollectionPrimaryKeyField,
const { cancelEdit, stageEdits, editsAtStart, editItem, currentlyEditing } = useEdit(
value,
onEdit: (newValue) => emit('input', newValue),
});
items,
relationFields,
emitter,
getJunctionFromRelatedId
);
const { showBrowseModal, stageSelection, selectionFilters } = useSelection({
relationCurrentToJunction,
relatedCollectionPrimaryKeyField,
previewItems,
onStageSelection: (selectionAsJunctionRows) => {
emit('input', [...(props.value || []), ...selectionAsJunctionRows]);
},
});
const { stageSelection, selectModalActive, selectionFilters } = useSelection(
value,
displayItems,
relationFields,
emitter
);
const { showUpload, onUpload } = useUpload();
return {
relations,
relationCurrentToJunction,
relationJunctionToRelated,
junction,
relation,
tableHeaders,
junctionCollectionPrimaryKeyField,
junctionCollection,
loading,
previewItems,
displayItems,
error,
showDetailModal,
currentlyEditing,
cancelEdit,
showUpload,
stageEdits,
editsAtStart,
junctionRowPrimaryKey,
editExisting,
relatedRowPrimaryKey,
showBrowseModal,
selectModalActive,
stageSelection,
selectionFilters,
relatedCollection,
initialValues,
deleteItem,
items,
get,
deselect,
onUpload,
relationFields,
editItem,
};
/**
* Deselect an item. This either means undoing any changes made (new item), or adding $delete: true
* if the junction row already exists.
*/
function deselect(junctionRow: any) {
const primaryKey = junctionRow[junctionCollectionPrimaryKeyField.value.field];
// If the junction row has a primary key, it's an existing item in the junction row, and
// we want to add the $delete flag so the API can delete the row in the junction table,
// effectively deselecting the related item from this item
if (primaryKey) {
// Once you deselect an item, it's removed from the preview table. You can only
// deselect an item once, so we don't have to check if this item was already disabled
emit('input', [
...(props.value || []),
{
[junctionCollectionPrimaryKeyField.value.field]: primaryKey,
$delete: true,
},
]);
return;
}
// If the item doesn't exist yet, there must be a staged edit for it's creation, that's
// the thing we want to filter out of the staged edits.
emit(
'input',
props.value.filter((stagedValue) => {
return stagedValue !== junctionRow && stagedValue !== junctionRow['$stagedEdits'];
})
);
}
function useUpload() {
const showUpload = ref(false);
return { showUpload, onUpload };
function onUpload(file: { id: number; [key: string]: any }) {
if (!relationCurrentToJunction.value) return;
if (!relationCurrentToJunction.value.junction_field) return;
function onUpload(files: Record<string, any>[]) {
showUpload.value = false;
if (files.length === 0) return;
const { junctionRelation } = relationFields.value;
const file = files[0];
const fileAsJunctionRow = {
[relationCurrentToJunction.value.junction_field]: {
[junctionRelation]: {
id: file.id,
title: file.title,
type: file.type,
},
};
emit('input', [...(props.value || []), fileAsJunctionRow]);
showUpload.value = false;
}
}
},

287
app/src/interfaces/many-to-many/many-to-many.vue
View File

@@ -1,60 +1,64 @@
<template>
<v-notice type="warning" v-if="!relations || relations.length !== 2">
<v-notice type="warning" v-if="!junction || !relation">
{{ $t('relationship_not_setup') }}
</v-notice>
<div v-else>
<div class="one-to-many" v-else>
<v-table
inline
:items="previewItems"
:loading="loading"
:items="displayItems"
:headers.sync="tableHeaders"
:item-key="junctionCollectionPrimaryKeyField.field"
:disabled="disabled"
@click:row="editExisting"
show-resize
inline
@click:row="editItem"
:disabled="disabled"
>
<template v-for="header in tableHeaders" v-slot:[`item.${header.value}`]="{ item }">
<render-display
:key="header.value"
:value="get(item, header.value)"
:value="item[header.value]"
:display="header.field.display"
:options="header.field.displayOptions"
:interface="header.field.interface"
:interface-options="header.field.interfaceOptions"
:type="header.field.type"
:collection="junctionCollection"
:collection="junctionCollection.collection"
:field="header.field.field"
/>
</template>
<template #item-append="{ item }" v-if="!disabled">
<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deselect(item)" />
<v-icon
name="close"
v-tooltip="$t('deselect')"
class="deselect"
@click.stop="deleteItem(item, items)"
/>
</template>
</v-table>
<div class="actions" v-if="!disabled">
<v-button class="new" @click="addNew">{{ $t('create_new') }}</v-button>
<v-button class="existing" @click="showBrowseModal = true">
<v-button class="new" @click="currentlyEditing = '+'">{{ $t('create_new') }}</v-button>
<v-button class="existing" @click="selectModalActive = true">
{{ $t('add_existing') }}
</v-button>
</div>
<modal-detail
<modal-item
v-if="!disabled"
:active.sync="showDetailModal"
:collection="junctionCollection"
:primary-key="junctionRowPrimaryKey"
:active="currentlyEditing !== null"
:collection="relationCollection.collection"
:primary-key="currentlyEditing || '+'"
:related-primary-key="relationFields.relationPkField"
:junction-field="relationFields.junctionRelation"
:edits="editsAtStart"
:junction-field="relationCurrentToJunction.junction_field"
:related-primary-key="relatedRowPrimaryKey"
@input="stageEdits"
@update:active="cancelEdit"
/>
<modal-browse
<modal-collection
v-if="!disabled"
:active.sync="showBrowseModal"
:collection="relationJunctionToRelated.one_collection"
:active.sync="selectModalActive"
:collection="relationCollection.collection"
:selection="[]"
:filters="selectionFilters"
@input="stageSelection"
@@ -64,41 +68,23 @@
</template>
<script lang="ts">
import { defineComponent, ref, watch, PropType, toRefs, computed } from '@vue/composition-api';
import { useFieldsStore } from '@/stores/';
import { Header as TableHeader } from '@/components/v-table/types';
import ModalBrowse from '@/views/private/components/modal-browse';
import ModalDetail from '@/views/private/components/modal-detail';
import { get } from 'lodash';
import { defineComponent, ref, computed, watch, PropType, toRefs } from '@vue/composition-api';
import ModalItem from '@/views/private/components/modal-item';
import ModalCollection from '@/views/private/components/modal-collection';
import useActions from './use-actions';
import useRelation from './use-relation';
import useSelection from './use-selection';
import usePreview from './use-preview';
import useEdit from './use-edit';
import { Field } from '@/types';
/**
* Hi there!
*
* The many to many is super complex. Please take proper care when jumping in here and making changes,
* you might break more than you'd imagine.
*
* If you have any questions, please feel free to reach out to Rijk <rijkvanzanten@me.com>
*
* NOTE: Some of the logic here is based on the fact that you can only have 1 copy of a related item
* associated in the m2m at a time. Without this requirement, there isn't a way to know which item
* you're editing at a time. It would also be near impossible to keep track of the changes made to the
* related item. Seeing we stage the made edits nested so the api is able to update it, we would have
* to apply the same edits nested to all the junction rows or something like that, pretty tricky stuff
*
* Another NOTE: There's one other tricky case to be aware of: selecting an existing related item. In that case,
* the junction row doesn't exist yet, but the related item does. Be aware that you can't rely on the
* primary key of the junction row in some cases.
*/
import useSelection from './use-selection';
export default defineComponent({
components: { ModalBrowse, ModalDetail },
components: { ModalItem, ModalCollection },
props: {
value: {
type: Array as PropType<(number | string | Record<string, any>)[] | null>,
default: null,
},
primaryKey: {
type: [Number, String],
required: true,
@@ -111,181 +97,82 @@ export default defineComponent({
type: String,
required: true,
},
value: {
type: Array,
default: undefined,
fields: {
type: Array as PropType<string[]>,
default: () => [],
},
disabled: {
type: Boolean,
default: false,
},
fields: {
type: Array as PropType<string[]>,
default: undefined,
},
},
setup(props, { emit }) {
const fieldsStore = useFieldsStore();
const { value, collection, field, fields } = toRefs(props);
const { collection, field, value, primaryKey } = toRefs(props);
function emitter(newVal: any[] | null) {
emit('input', newVal);
}
const { junction, junctionCollection, relation, relationCollection, relationFields } = useRelation(
collection,
field
);
const {
relations,
relationCurrentToJunction,
relationJunctionToRelated,
junctionCollectionPrimaryKeyField,
junctionCollection,
relatedCollectionPrimaryKeyField,
relatedCollection,
} = useRelation({ collection, field });
deleteItem,
getUpdatedItems,
getNewItems,
getPrimaryKeys,
getNewSelectedItems,
getJunctionItem,
getJunctionFromRelatedId,
} = useActions(value, relationFields, emitter);
const fields = computed(() => {
if (!junctionCollection) return [];
return (
props.fields ||
fieldsStore.getFieldsForCollection(junctionCollection.value).map((field: Field) => field.field)
);
});
const { tableHeaders } = useTable();
const { loading, previewItems, error } = usePreview({
const { tableHeaders, items, loading, error, displayItems } = usePreview(
value,
primaryKey,
junctionCollectionPrimaryKeyField,
relatedCollectionPrimaryKeyField,
junctionCollection,
relatedCollection,
relationCurrentToJunction,
relationJunctionToRelated,
fields,
});
relationFields,
getNewSelectedItems,
getUpdatedItems,
getNewItems,
getPrimaryKeys
);
const {
showDetailModal,
cancelEdit,
addNew,
stageEdits,
editsAtStart,
junctionRowPrimaryKey,
editExisting,
relatedRowPrimaryKey,
initialValues,
} = useEdit({
relationCurrentToJunction,
junctionCollectionPrimaryKeyField,
relatedCollectionPrimaryKeyField,
const { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit } = useEdit(
value,
onEdit: (newValue) => emit('input', newValue),
});
items,
relationFields,
emitter,
getJunctionFromRelatedId
);
const { showBrowseModal, stageSelection, selectionFilters } = useSelection({
relationCurrentToJunction,
relatedCollectionPrimaryKeyField,
previewItems,
onStageSelection: (selectionAsJunctionRows) => {
emit('input', [...(props.value || []), ...selectionAsJunctionRows]);
},
});
const { stageSelection, selectModalActive, selectionFilters } = useSelection(
value,
displayItems,
relationFields,
emitter
);
return {
relations,
relationCurrentToJunction,
relationJunctionToRelated,
junction,
relation,
tableHeaders,
junctionCollectionPrimaryKeyField,
junctionCollection,
loading,
previewItems,
error,
showDetailModal,
cancelEdit,
addNew,
stageEdits,
currentlyEditing,
editItem,
junctionCollection,
relationCollection,
editsAtStart,
junctionRowPrimaryKey,
editExisting,
relatedRowPrimaryKey,
showBrowseModal,
stageEdits,
cancelEdit,
stageSelection,
selectModalActive,
deleteItem,
displayItems,
selectionFilters,
relatedCollection,
initialValues,
get,
deselect,
items,
relationFields,
};
/**
* Manages the state of the table. This includes the table headers, and the event handlers for
* the table events
*/
function useTable() {
// Using a ref for the table headers here means that the table itself can update the
// values if it needs to. This allows the user to manually resize the columns for example
const tableHeaders = ref<TableHeader[]>([]);
watch(fields, setHeaders, { immediate: true });
return { tableHeaders };
function setHeaders() {
tableHeaders.value = fields.value.map(
(fieldKey): TableHeader => {
const field = fieldsStore.getField(junctionCollection.value, fieldKey);
return {
text: field.name,
value: fieldKey,
align: 'left',
sortable: true,
width: null,
field: {
display: field.meta?.display,
displayOptions: field.meta?.display_options,
interface: field.meta?.interface,
interfaceOptions: field.meta?.options,
type: field.type,
field: field.field,
},
};
}
);
}
}
/**
* Deselect an item. This either means undoing any changes made (new item), or adding $delete: true
* if the junction row already exists.
*/
function deselect(junctionRow: any) {
const primaryKey = junctionRow[junctionCollectionPrimaryKeyField.value.field];
// If the junction row has a primary key, it's an existing item in the junction row, and
// we want to add the $delete flag so the API can delete the row in the junction table,
// effectively deselecting the related item from this item
if (primaryKey) {
// Once you deselect an item, it's removed from the preview table. You can only
// deselect an item once, so we don't have to check if this item was already disabled
emit('input', [
...(props.value || []),
{
[junctionCollectionPrimaryKeyField.value.field]: primaryKey,
$delete: true,
},
]);
return;
}
// If the item doesn't exist yet, there must be a staged edit for it's creation, that's
// the thing we want to filter out of the staged edits.
emit(
'input',
props.value.filter((stagedValue) => {
return stagedValue !== junctionRow && stagedValue !== junctionRow['$stagedEdits'];
})
);
}
},
});
</script>

29
app/src/interfaces/many-to-many/options.vue
View File

@@ -1,16 +1,14 @@
<template>
<v-notice type="warning" v-if="junctionCollection === null">
<v-notice type="warning" v-if="relatedCollection === null">
{{ $t('interfaces.one-to-many.no_collection') }}
</v-notice>
<div v-else class="form-grid">
<div class="field full">
<p class="type-label">{{ $t('select_fields') }}</p>
<v-field-select
:collection="junctionCollection"
:collection="relatedCollection"
v-model="fields"
:inject="
junctionCollectionExists ? null : { fields: newFields, collections: newCollections, relations }
"
:inject="relatedCollectionExists ? null : { fields: newFields, collections: newCollections, relations }"
/>
</div>
</div>
@@ -66,22 +64,33 @@ export default defineComponent({
},
});
const junctionCollection = computed(() => {
const relatedCollection = computed(() => {
if (!props.fieldData || !props.relations || props.relations.length === 0) return null;
const { field } = props.fieldData;
const junctionRelation = props.relations.find(
(relation) => relation.one_collection === props.collection && relation.one_field === field
);
return junctionRelation?.many_collection || null;
if (junctionRelation === undefined) return;
const relatedCollection = props.relations.find(
(relation) =>
relation.one_collection !== props.collection &&
relation.many_field === junctionRelation.junction_field
);
return relatedCollection?.one_collection || null;
});
const junctionCollectionExists = computed(() => {
const relatedCollectionExists = computed(() => {
return !!collectionsStore.state.collections.find(
(collection) => collection.collection === junctionCollection.value
(collection) => collection.collection === relatedCollection.value
);
});
return { fields, junctionCollection, junctionCollectionExists };
return { fields, relatedCollection, relatedCollectionExists };
},
});
</script>

190
app/src/interfaces/many-to-many/use-actions.ts Normal file
View File

@@ -0,0 +1,190 @@
import { Ref } from '@vue/composition-api';
import { RelationInfo } from './use-relation';
export default function useActions(
value: Ref<(string | number | Record<string, any>)[] | null>,
relation: Ref<RelationInfo>,
emit: (newValue: any[] | null) => void
) {
function getJunctionItem(id: string | number) {
const { junctionPkField } = relation.value;
if (value.value === null) return null;
return (
value.value.find(
(item) =>
(typeof item === 'object' && junctionPkField in item && item[junctionPkField] === id) || item === id
) || null
);
}
function getNewSelectedItems() {
const { junctionRelation } = relation.value;
if (value.value === null || junctionRelation === null) return [];
return value.value.filter(
(item) => typeof item === 'object' && junctionRelation in item && typeof item[junctionRelation] !== 'object'
) as Record<string, any>[];
}
function getNewItems() {
const { junctionRelation, relationPkField } = relation.value;
if (value.value === null || junctionRelation === null) return [];
return value.value.filter(
(item) =>
typeof item === 'object' &&
junctionRelation in item &&
typeof item[junctionRelation] === 'object' &&
relationPkField in item[junctionRelation] === false
) as Record<string, any>[];
}
function getUpdatedItems() {
const { junctionRelation, relationPkField } = relation.value;
if (value.value === null || junctionRelation === null) return [];
return value.value.filter(
(item) =>
typeof item === 'object' &&
junctionRelation in item &&
typeof item[junctionRelation] === 'object' &&
relationPkField in item[junctionRelation] === true
) as Record<string, any>[];
}
function getExistingItems() {
if (value.value === null) return [];
return value.value.filter((item) => typeof item === 'string' || typeof item === 'number');
}
function getPrimaryKeys(): (string | number)[] {
const { junctionPkField } = relation.value;
if (value.value === null) return [];
return value.value
.map((item) => {
if (typeof item === 'object') {
if (junctionPkField in item) return item[junctionPkField];
} else {
return item;
}
})
.filter((i) => i);
}
function getRelatedPrimaryKeys(): (string | number)[] {
if (value.value === null) return [];
const { junctionRelation, relationPkField } = relation.value;
return value.value
.map((junctionItem) => {
if (
typeof junctionItem !== 'object' ||
junctionRelation === null ||
junctionRelation in junctionItem === false
)
return undefined;
const item = junctionItem[junctionRelation];
if (typeof item === 'object') {
if (junctionRelation in item) return item[relationPkField];
} else {
return item;
}
})
.filter((i) => i);
}
function deleteItem(item: Record<string, any>, items: Record<string, any>[]) {
if (value.value === null) return;
const { junctionRelation, relationPkField } = relation.value;
const id = item[relationPkField] as number | string | undefined;
if (id !== undefined) return deleteItemWithId(id, items);
if (junctionRelation === null) return;
const newVal = value.value.filter((junctionItem) => {
if (typeof junctionItem !== 'object' || junctionRelation in junctionItem === false) return true;
return junctionItem[junctionRelation] !== item;
});
if (newVal.length === 0) emit(null);
else emit(newVal);
}
function deleteItemWithId(id: string | number, items: Record<string, any>[]) {
if (value.value === null) return;
const { junctionRelation, relationPkField, junctionPkField } = relation.value;
const junctionItem = items.find(
(item) =>
junctionRelation in item &&
relationPkField in item[junctionRelation] &&
item[junctionRelation][relationPkField] === id
);
if (junctionItem === undefined) return;
// If it is a newly selected Item
if (junctionPkField in junctionItem === false) {
const newVal = value.value.filter((item) => {
if (typeof item === 'object' && junctionRelation in item) {
const jItem = item[junctionRelation];
return typeof jItem === 'object' ? jItem[relationPkField] !== id : jItem !== id;
}
return true;
});
if (newVal.length === 0) emit(null);
else emit(newVal);
return;
}
// If it is an already existing item
const newVal = value.value.filter((item) => {
if (typeof item === 'object' && junctionPkField in item) {
return junctionItem[junctionPkField] !== item[junctionPkField];
} else {
return junctionItem[junctionPkField] !== item;
}
});
if (newVal.length === 0) emit(null);
else emit(newVal);
}
function getJunctionFromRelatedId(id: string | number, items: Record<string, any>[]) {
const { relationPkField, junctionRelation } = relation.value;
return (
items.find((item) => {
return (
typeof item === 'object' &&
junctionRelation in item &&
typeof item[junctionRelation] === 'object' &&
relationPkField in item[junctionRelation] &&
item[junctionRelation][relationPkField] === id
);
}) || null
);
}
return {
getJunctionItem,
getNewSelectedItems,
getNewItems,
getUpdatedItems,
getExistingItems,
getPrimaryKeys,
getRelatedPrimaryKeys,
getJunctionFromRelatedId,
deleteItem,
deleteItemWithId,
};
}

184
app/src/interfaces/many-to-many/use-edit.ts
View File

@@ -1,141 +1,77 @@
import { ref, Ref } from '@vue/composition-api';
import { Field, Relation } from '@/types';
import { set } from 'lodash';
import { Ref, ref } from '@vue/composition-api';
import { RelationInfo } from './use-relation';
import { isEqual } from 'lodash';
type EditParam = {
relationCurrentToJunction: Ref<Relation | undefined>;
junctionCollectionPrimaryKeyField: Ref<Field>;
relatedCollectionPrimaryKeyField: Ref<Field>;
value: Ref<any[] | null>;
onEdit: (newValue: any[] | null) => void;
};
export default function useEdit(
value: Ref<(string | number | Record<string, any>)[] | null>,
items: Ref<Record<string, any>[]>,
relation: Ref<RelationInfo>,
emit: (newVal: any[] | null) => void,
getJunctionFromRelatedId: (id: string | number, items: Record<string, any>[]) => Record<string, any> | null
) {
// Primary key of the item we're currently editing. If null, the edit modal should be
// closed
const currentlyEditing = ref<string | number | null>(null);
/**
* Everything regarding the edit experience in the detail modal. This also includes adding
* a new item
*/
export default function useEdit({
relationCurrentToJunction,
junctionCollectionPrimaryKeyField,
relatedCollectionPrimaryKeyField,
value,
onEdit,
}: EditParam) {
const showDetailModal = ref(false);
// The previously made edits when we're starting to edit the item
const editsAtStart = ref<any>(null);
const junctionRowPrimaryKey = ref<number | string>('+');
const relatedRowPrimaryKey = ref<number | string>('+');
const initialValues = ref<any>(null);
const isNew = ref(false);
// This keeps track of the starting values so we can match with it
const editsAtStart = ref<Record<string, any>>({});
return {
showDetailModal,
editsAtStart,
addNew,
cancelEdit,
stageEdits,
junctionRowPrimaryKey,
editExisting,
relatedRowPrimaryKey,
initialValues,
};
function editItem(item: any) {
const { relationPkField } = relation.value;
const hasPrimaryKey = relationPkField in item;
function addNew() {
editsAtStart.value = null;
showDetailModal.value = true;
junctionRowPrimaryKey.value = '+';
relatedRowPrimaryKey.value = '+';
initialValues.value = null;
isNew.value = true;
editsAtStart.value = item;
currentlyEditing.value = hasPrimaryKey ? item[relationPkField] : -1;
}
// The row here is the item in previewItems that's passed to the table
function editExisting(item: any) {
if (!relationCurrentToJunction.value) return;
if (!relationCurrentToJunction.value.junction_field) return;
function stageEdits(edits: any) {
const { relationPkField, junctionRelation, junctionPkField } = relation.value;
const editsWrapped = { [junctionRelation]: edits };
const hasPrimaryKey = relationPkField in editsAtStart.value;
const junctionItem = hasPrimaryKey
? getJunctionFromRelatedId(editsAtStart.value[relationPkField], items.value)
: null;
if (item.$new === true) isNew.value = true;
const newValue = (value.value || []).map((item) => {
if (junctionItem !== null && junctionPkField in junctionItem) {
const id = junctionItem[junctionPkField];
if (isNew.value === true) {
editsAtStart.value = item;
junctionRowPrimaryKey.value = '+';
showDetailModal.value = true;
initialValues.value = null;
return;
if (typeof item === 'object' && junctionPkField in item) {
if (item[junctionPkField] === id) return { [junctionRelation]: edits, [junctionPkField]: id };
} else if (typeof item === 'number' || typeof item === 'string') {
if (item === id) return { [junctionRelation]: edits, [junctionPkField]: id };
}
}
if (typeof item === 'object' && relationPkField in edits && junctionRelation in item) {
const id = edits[relationPkField];
const relatedItem = item[junctionRelation] as string | number | Record<string, any>;
if (typeof relatedItem === 'object' && relationPkField in relatedItem) {
if (relatedItem[relationPkField] === id) return editsWrapped;
} else if (typeof relatedItem === 'string' || typeof relatedItem === 'number') {
if (relatedItem === id) return editsWrapped;
}
}
if (isEqual({ [junctionRelation]: editsAtStart.value }, item)) {
return editsWrapped;
}
return item;
});
if (hasPrimaryKey === false && newValue.includes(editsWrapped) === false) {
newValue.push(editsWrapped);
}
initialValues.value = item;
/**
* @NOTE: Keep in mind there's a case where the junction row doesn't exist yet, but
* the related item does (when selecting an existing item)
*/
const junctionPrimaryKey = junctionCollectionPrimaryKeyField.value.field;
const junctionField = relationCurrentToJunction.value.junction_field;
const relatedPrimaryKey = relatedCollectionPrimaryKeyField.value.field;
junctionRowPrimaryKey.value = item[junctionPrimaryKey] || '+';
relatedRowPrimaryKey.value = item[junctionField]?.[relatedPrimaryKey] || '+';
editsAtStart.value = item.$stagedEdits || null;
showDetailModal.value = true;
if (newValue.length === 0) emit(null);
else emit(newValue);
}
function cancelEdit() {
editsAtStart.value = {};
showDetailModal.value = false;
junctionRowPrimaryKey.value = '+';
currentlyEditing.value = null;
}
function stageEdits(edits: any) {
if (!relationCurrentToJunction.value) return;
if (!relationCurrentToJunction.value.junction_field) return;
const junctionPrimaryKey = junctionCollectionPrimaryKeyField.value.field;
const junctionField = relationCurrentToJunction.value.junction_field;
const relatedPrimaryKey = relatedCollectionPrimaryKeyField.value.field;
if (isNew.value) {
edits.$new = true;
}
const currentValue = [...(value.value || [])];
// If there weren't any previously made edits, it's safe to assume this change value
// doesn't exist yet in the staged value
if (!editsAtStart.value) {
// If the item that we edited has any of the primary keys (junction/related), we
// have to make sure we stage those as well. Otherwise the API will treat it as
// a newly created item instead of updated existing
if (junctionRowPrimaryKey.value !== '+') {
set(edits, junctionPrimaryKey, junctionRowPrimaryKey.value);
}
if (relatedRowPrimaryKey.value !== '+') {
set(edits, [junctionField, relatedPrimaryKey], relatedRowPrimaryKey.value);
}
onEdit([...currentValue, edits]);
reset();
return;
}
const newValue =
value.value?.map((stagedValue: any) => {
if (stagedValue === editsAtStart.value) return edits;
return stagedValue;
}) || null;
onEdit(newValue);
reset();
function reset() {
editsAtStart.value = null;
showDetailModal.value = true;
junctionRowPrimaryKey.value = '+';
relatedRowPrimaryKey.value = '+';
isNew.value = false;
}
}
return { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit };
}

368
app/src/interfaces/many-to-many/use-preview.ts
View File

@@ -1,235 +1,175 @@
import { Ref, ref, watch } from '@vue/composition-api';
import { Ref, ref, watch, computed } from '@vue/composition-api';
import { Header } from '@/components/v-table/types';
import { RelationInfo } from './use-relation';
import { useFieldsStore } from '@/stores/';
import { Field, Collection } from '@/types';
import api from '@/api';
import { Field, Relation } from '@/types';
import { merge } from 'lodash';
import adjustFieldsForDisplay from '@/utils/adjust-fields-for-displays';
import { cloneDeep } from 'lodash';
/**
* Controls what preview is shown in the table. Has some black magic logic to ensure we're able
* to show the latest edits, while also maintaining a clean staged value set. This is not responsible
* for setting or modifying any data. Preview items should be considered read only
*/
export default function usePreview(
value: Ref<(string | number | Record<string, any>)[] | null>,
fields: Ref<string[]>,
relation: Ref<RelationInfo>,
getNewSelectedItems: () => Record<string, any>[],
getUpdatedItems: () => Record<string, any>[],
getNewItems: () => Record<string, any>[],
getPrimaryKeys: () => (string | number)[]
) {
// Using a ref for the table headers here means that the table itself can update the
// values if it needs to. This allows the user to manually resize the columns for example
type PreviewParam = {
value: Ref<any[] | null>;
primaryKey: Ref<string | number>;
junctionCollectionPrimaryKeyField: Ref<Field>;
relatedCollectionPrimaryKeyField: Ref<Field>;
junctionCollection: Ref<string>;
relatedCollection: Ref<string>;
relationCurrentToJunction: Ref<Relation | undefined>;
relationJunctionToRelated: Ref<Relation | null | undefined>;
fields: Ref<readonly string[]>;
};
export default function usePreview({
value,
primaryKey,
junctionCollectionPrimaryKeyField,
relatedCollectionPrimaryKeyField,
relationCurrentToJunction,
relationJunctionToRelated,
junctionCollection,
relatedCollection,
fields,
}: PreviewParam) {
const fieldsStore = useFieldsStore();
const tableHeaders = ref<Header[]>([]);
const loading = ref(false);
const previewItems = ref<readonly any[]>([]);
const items = ref<Record<string, any>[]>([]);
const error = ref(null);
// Every time the value changes, we'll reset the preview values. This ensures that we'll
// almost show the most up to date information in the preview table, regardless of if this
// is the first load or a subsequent edit.
watch(value, setPreview, { immediate: true });
watch(
() => value.value,
async (newVal) => {
if (newVal === null) {
items.value = [];
return;
}
return { loading, previewItems, error };
loading.value = true;
const { junctionRelation, relationPkField, junctionPkField } = relation.value;
if (junctionRelation === null) return;
async function setPreview() {
loading.value = true;
// Load the junction items so we have access to the id's in the related collection
const junctionItems = await loadRelatedIds();
const relatedPrimaryKeys = junctionItems.map((junction) => junction[junctionRelation]);
const filteredFields = [...(fields.value.length > 0 ? fields.value : getDefaultFields())];
if (filteredFields.includes(relationPkField) === false) filteredFields.push(relationPkField);
try {
let responseData: Record<string, any>[] = [];
if (relatedPrimaryKeys.length > 0) {
const endpoint = relation.value.relationCollection.startsWith('directus_')
? `/${relation.value.relationCollection.substring(9)}`
: `/items/${relation.value.relationCollection}`;
const response = await api.get(endpoint, {
params: {
fields: filteredFields,
[`filter[${relationPkField}][_in]`]: relatedPrimaryKeys.join(','),
},
});
responseData = response?.data.data as Record<string, any>[];
}
// Insert the related items into the junction items
const existingItems = responseData.map((data) => {
const id = data[relationPkField];
const junction = junctionItems.find((junction) => junction[junctionRelation] === id);
if (junction === undefined) return;
const newJunction = cloneDeep(junction);
newJunction[junctionRelation] = data;
return newJunction;
}) as Record<string, any>[];
const updatedItems = getUpdatedItems();
const newItems = getNewItems();
// Replace existing items with it's updated counterparts
const newVal = existingItems
.map((item) => {
const updatedItem = updatedItems.find(
(updated) => updated[junctionPkField] === item[junctionPkField]
);
if (updatedItem !== undefined) return updatedItem;
return item;
})
.concat(...newItems);
items.value = newVal;
} catch (err) {
error.value = err;
} finally {
loading.value = false;
}
},
{ immediate: true }
);
async function loadRelatedIds() {
const { junctionPkField, junctionRelation, relationPkField } = relation.value;
try {
const existingItems = await fetchExisting();
const updatedExistingItems = applyUpdatesToExisting(existingItems);
const newlyAddedItems = getNewlyAdded();
const newlySelectedItems = await fetchNewlySelectedItems();
previewItems.value = [...updatedExistingItems, ...newlyAddedItems, ...newlySelectedItems].filter(
(stagedEdit: any) => !stagedEdit['$delete']
);
let data: Record<string, any>[] = [];
const primaryKeys = getPrimaryKeys();
if (primaryKeys.length > 0) {
const endpoint = relation.value.junctionCollection.startsWith('directus_')
? `/${relation.value.junctionCollection.substring(9)}`
: `/items/${relation.value.junctionCollection}`;
const response = await api.get(endpoint, {
params: {
[`filter[${junctionPkField}][_in]`]: getPrimaryKeys().join(','),
},
});
data = response?.data.data as Record<string, any>[];
}
const updatedItems = getUpdatedItems().map((item) => ({
[junctionRelation]: item[junctionRelation][relationPkField],
}));
// Add all items that already had the id of it's related item
return data.concat(...getNewSelectedItems(), ...updatedItems);
} catch (err) {
error.value = err;
throw err;
} finally {
loading.value = false;
}
return [];
}
/**
* Looks through props.value and applies all staged changes to the existing selected
* items. The array of existing items is an array of junction rows, so we can assume
* those have a primary key
*/
function applyUpdatesToExisting(existing: any[]) {
return existing.map((existingValue) => {
const junctionPrimaryKey = junctionCollectionPrimaryKeyField.value.field;
const existingPrimaryKey = existingValue[junctionPrimaryKey];
const displayItems = computed(() => {
const { junctionRelation } = relation.value;
return items.value.map((item) => item[junctionRelation]);
});
const stagedEdits: any = (value.value || []).find((update: any) => {
const updatePrimaryKey = update[junctionPrimaryKey];
return existingPrimaryKey === updatePrimaryKey;
});
// Seeing we don't care about saving those tableHeaders, we can reset it whenever the
// fields prop changes (most likely when we're navigating to a different o2m context)
watch(
() => fields.value,
() => {
tableHeaders.value = (fields.value.length > 0 ? fields.value : getDefaultFields())
.map((fieldKey) => {
const field = fieldsStore.getField(relation.value.relationCollection, fieldKey);
if (stagedEdits === undefined) return existingValue;
if (!field) return null;
return {
...merge(existingValue, stagedEdits),
$stagedEdits: stagedEdits,
};
});
const header: Header = {
text: field.name,
value: fieldKey,
align: 'left',
sortable: true,
width: null,
field: {
display: field.meta?.display,
displayOptions: field.meta?.display_options,
interface: field.meta?.interface,
interfaceOptions: field.meta?.options,
type: field.type,
field: field.field,
},
};
return header;
})
.filter((h) => h) as Header[];
},
{ immediate: true }
);
function getDefaultFields(): string[] {
const fields = fieldsStore.getFieldsForCollection(relation.value.relationCollection);
return fields.slice(0, 3).map((field: Field) => field.field);
}
/**
* To get the currently selected items, we'll fetch the rows from the junction table
* where the field back to the current collection is equal to the primary key. We go
* this route as it's more performant than trying to go an extra level deep in the
* current item.
*/
async function fetchExisting() {
if (!relationCurrentToJunction.value) return;
if (!relationCurrentToJunction.value.junction_field) return;
if (!relationJunctionToRelated.value) return;
if (!relationJunctionToRelated.value.junction_field) return;
// If the current item is being created, we don't have to search for existing relations
// yet, as they can't have been saved yet.
if (primaryKey.value === '+') return [];
const junctionTable = relationCurrentToJunction.value.many_collection;
// The stuff we want to fetch is the related junction row, and the content of the
// deeply related item nested. This should match the value that's set in the fields
// option. We have to make sure we're fetching the primary key of both the junction
// as the related item though, as that makes sure we're able to update the item later,
// instead of adding a new one in the API.
const fieldsToFetch = [...fields.value];
// The following will add the PK and related items PK to the request fields, like
// "id" and "related.id"
const junctionPrimaryKey = junctionCollectionPrimaryKeyField.value.field;
const junctionField = relationCurrentToJunction.value.junction_field;
const relatedPrimaryKey = relatedCollectionPrimaryKeyField.value.field;
const currentInJunction = relationJunctionToRelated.value.junction_field;
if (fieldsToFetch.includes(junctionPrimaryKey) === false) fieldsToFetch.push(junctionPrimaryKey);
if (fieldsToFetch.includes(`${junctionField}.${relatedPrimaryKey}`) === false)
fieldsToFetch.push(`${junctionField}.${relatedPrimaryKey}`);
const response = await api.get(`/items/${junctionTable}`, {
params: {
fields: adjustFieldsForDisplay(fieldsToFetch, junctionCollection.value),
[`filter[${currentInJunction}][_eq]`]: primaryKey.value,
},
});
return response.data.data;
}
/**
* Extract the newly created rows from props.value. Values that don't have a junction row
* primary key and no primary key in the related item are created "totally" new and should
* be added to the array of previews as is.
* NOTE: This does not included items where the junction row is new, but the related item
* isn't.
*/
function getNewlyAdded() {
if (!relationCurrentToJunction.value) return [];
if (!relationCurrentToJunction.value.junction_field) return [];
/**
* @NOTE There's an interesting case here:
*
* If you create both a new junction row _and_ a new related row, any selected existing
* many to one record won't have it's data object staged, as it already exists (so it's just)
* the primary key. This will case a template display to show ???, as it only gets the
* primary key. If you saw an issue about that on GitHub, this is where to find it.
*
* Unlike in fetchNewlySelectedItems(), we can't just fetch the related item, as both
* junction and related are new. We _could_ traverse through the object of changes, see
* if there's any relational field, and fetch the data based on that combined with the
* fields adjusted for the display. While that should work, it's too much of an edge case
* for me for now to worry about..
*/
const junctionPrimaryKey = junctionCollectionPrimaryKeyField.value.field;
return (value.value || []).filter(
(stagedEdit: any) => !stagedEdit.$delete && !stagedEdit[junctionPrimaryKey] && stagedEdit.$new === true
);
}
/**
* The tricky case where the user selects an existing item from the related collection
* This means the junction doesn't have a primary key yet, and the only value that is
* staged is the related item's primary key
* In this function, we'll fetch the full existing item from the related collection,
* so we can still show it's data in the preview table
*/
async function fetchNewlySelectedItems() {
if (!relationCurrentToJunction.value) return [];
if (!relationCurrentToJunction.value.junction_field) return [];
if (!relationJunctionToRelated.value) return [];
if (!relationJunctionToRelated.value.junction_field) return [];
const junctionPrimaryKey = junctionCollectionPrimaryKeyField.value.field;
const junctionField = relationCurrentToJunction.value.junction_field;
const relatedPrimaryKey = relatedCollectionPrimaryKeyField.value.field;
const newlySelectedStagedItems = (value.value || []).filter(
(stagedEdit: any) => !stagedEdit.$delete && !stagedEdit[junctionPrimaryKey] && !stagedEdit.$new
);
const newlySelectedRelatedKeys = newlySelectedStagedItems.map(
(stagedEdit: any) => stagedEdit[junctionField][relatedPrimaryKey]
);
// If there's no newly selected related items, we can return here, as there's nothing
// to fetch
if (newlySelectedRelatedKeys.length === 0) return [];
// The fields option are set from the viewport of the junction table. Seeing we only
// fetch from the related table, we have to filter out all the fields from the junction
// table and remove the junction field prefix from the related table columns
const fieldsToFetch = fields.value
.filter((field) => field.startsWith(junctionField))
.map((relatedField) => {
return relatedField.replace(junctionField + '.', '');
});
if (fieldsToFetch.includes(relatedPrimaryKey) === false) fieldsToFetch.push(relatedPrimaryKey);
const endpoint = relatedCollection.value.startsWith('directus_')
? `/${relatedCollection.value.substring(9)}/${newlySelectedRelatedKeys.join(',')}`
: `/items/${relatedCollection.value}/${newlySelectedRelatedKeys.join(',')}`;
const response = await api.get(endpoint, {
params: {
fields: adjustFieldsForDisplay(fieldsToFetch, junctionCollection.value),
},
});
const data = Array.isArray(response.data.data) ? response.data.data : [response.data.data];
return newlySelectedStagedItems.map((stagedEdit: any) => {
const pk = stagedEdit[junctionField][relatedPrimaryKey];
const relatedItem = data.find((relatedItem: any) => relatedItem[relatedPrimaryKey] === pk);
return merge(
{
[junctionField]: relatedItem,
$stagedEdits: stagedEdit,
},
stagedEdit
);
});
}
return { tableHeaders, displayItems, items, loading, error };
}

70
app/src/interfaces/many-to-many/use-relation.ts
View File

@@ -1,48 +1,60 @@
import { Ref, computed } from '@vue/composition-api';
import { useCollectionsStore, useRelationsStore } from '@/stores/';
import useCollection from '@/composables/use-collection';
import { Relation } from '@/types/';
import { useRelationsStore } from '@/stores/';
import { Relation } from '@/types';
type RelationParams = {
collection: Ref<string>;
field: Ref<string>;
export type RelationInfo = {
junctionPkField: string;
relationPkField: string;
junctionRelation: string;
junctionCollection: string;
relationCollection: string;
};
export default function useRelation({ collection, field }: RelationParams) {
export default function useRelation(collection: Ref<string>, field: Ref<string>) {
const relationsStore = useRelationsStore();
const collectionsStore = useCollectionsStore();
// We expect two relations to exist for this field: one from this field to the junction
// table, and one from the junction table to the related collection
const relations = computed<Relation[]>(() => {
return relationsStore.getRelationsForField(collection.value, field.value);
const relations = computed(() => {
return relationsStore.getRelationsForField(collection.value, field.value) as Relation[];
});
const relationCurrentToJunction = computed(() => {
return relations.value.find(
(relation: Relation) => relation.one_collection === collection.value && relation.one_field === field.value
);
const junction = computed(() => {
return relations.value.find((relation) => relation.one_collection === collection.value) as Relation;
});
const relationJunctionToRelated = computed(() => {
if (!relationCurrentToJunction.value) return null;
const index = relations.value.indexOf(relationCurrentToJunction.value) === 1 ? 0 : 1;
return relations.value[index];
const relation = computed(() => {
return relations.value.find((relation) => relation.one_collection !== collection.value) as Relation;
});
const junctionCollection = computed(() => relations.value[0].many_collection);
const relatedCollection = computed(() => relations.value[1].one_collection);
const junctionCollection = computed(() => {
return collectionsStore.getCollection(junction.value.many_collection)!;
});
const { primaryKeyField: junctionCollectionPrimaryKeyField } = useCollection(junctionCollection);
const { primaryKeyField: relatedCollectionPrimaryKeyField } = useCollection(relatedCollection);
const relationCollection = computed(() => {
return collectionsStore.getCollection(relation.value.one_collection)!;
});
const { primaryKeyField: junctionPrimaryKeyField } = useCollection(junctionCollection.value.collection);
const { primaryKeyField: relationPrimaryKeyField } = useCollection(relationCollection.value.collection);
const relationFields = computed(() => {
return {
junctionPkField: junctionPrimaryKeyField.value.field,
relationPkField: relationPrimaryKeyField.value.field,
junctionRelation: junction.value.junction_field as string,
junctionCollection: junctionCollection.value.collection,
relationCollection: relationCollection.value.collection,
} as RelationInfo;
});
return {
relations,
relationCurrentToJunction,
relationJunctionToRelated,
junction,
junctionCollection,
junctionCollectionPrimaryKeyField,
relatedCollection,
relatedCollectionPrimaryKeyField,
relation,
relationCollection,
relationFields,
junctionPrimaryKeyField,
relationPrimaryKeyField,
};
}

87
app/src/interfaces/many-to-many/use-selection.ts
View File

@@ -1,77 +1,54 @@
import { Relation, Filter } from '@/types/';
import { Field } from '@/types';
import { Ref, ref, computed } from '@vue/composition-api';
import { RelationInfo } from './use-relation';
import { Filter } from '@/types';
type SelectionParam = {
relationCurrentToJunction: Ref<Relation | undefined>;
relatedCollectionPrimaryKeyField: Ref<Field>;
previewItems: Ref<readonly any[]>;
onStageSelection: (selectionAsJunctionRows: any[]) => void;
};
export default function useSelection(
value: Ref<(string | number | Record<string, any>)[] | null>,
displayItems: Ref<Record<string, any>[]>,
relation: Ref<RelationInfo>,
emit: (newVal: any[] | null) => void
) {
const selectModalActive = ref(false);
export default function useSelection({
relationCurrentToJunction,
relatedCollectionPrimaryKeyField,
previewItems,
onStageSelection,
}: SelectionParam) {
const showBrowseModal = ref(false);
const selectedPrimaryKeys = computed(() => {
if (displayItems.value === null) return [];
const alreadySelectedRelatedPrimaryKeys = computed(() => {
if (!relationCurrentToJunction.value) return [];
if (!relationCurrentToJunction.value.junction_field) return [];
const { relationPkField } = relation.value;
const junctionField = relationCurrentToJunction.value.junction_field;
const relatedPrimaryKey = relatedCollectionPrimaryKeyField.value.field;
const selectedKeys: (number | string)[] = displayItems.value
.filter((currentItem) => relationPkField in currentItem)
.map((currentItem) => currentItem[relationPkField]);
return previewItems.value
.filter((previewItem: any) => previewItem[junctionField])
.map((previewItem: any) => {
if (typeof previewItem[junctionField] === 'string' || typeof previewItem[junctionField] === 'number') {
return previewItem[junctionField];
}
return previewItem[junctionField][relatedPrimaryKey];
})
.filter((p) => p);
return selectedKeys;
});
const selectionFilters = computed<Filter[]>(() => {
const relatedPrimaryKey = relatedCollectionPrimaryKeyField.value.field;
const { relationPkField } = relation.value;
if (selectedPrimaryKeys.value.length === 0) return [];
const filter: Filter = {
key: 'selection',
field: relatedPrimaryKey,
field: relationPkField,
operator: 'nin',
value: alreadySelectedRelatedPrimaryKeys.value.join(','),
value: selectedPrimaryKeys.value.join(','),
locked: true,
};
return [filter];
});
return { showBrowseModal, stageSelection, selectionFilters };
function stageSelection(newSelection: (number | string)[]) {
const { junctionRelation } = relation.value;
function stageSelection(selection: any) {
const selectionAsJunctionRows = selection.map((relatedPrimaryKey: string | number) => {
if (!relationCurrentToJunction.value) return;
if (!relationCurrentToJunction.value.junction_field) return;
const selection = newSelection
.filter((item) => selectedPrimaryKeys.value.includes(item) === false)
.map((item) => ({ [junctionRelation]: item }));
const junctionField = relationCurrentToJunction.value.junction_field;
const relatedPrimaryKeyField = relatedCollectionPrimaryKeyField.value.field;
return {
[junctionField]: {
// Technically, "junctionField: primaryKey" should be enough for the api
// to do it's thing for newly selected items. However, that would require
// the previewItems check to be way more complex. This shouldn't introduce
// too much overhead in the API, while drastically simplifying this interface
[relatedPrimaryKeyField]: relatedPrimaryKey,
},
};
});
// Seeing the browse modal only shows items that haven't been selected yet (using the
// filter above), we can safely assume that the items don't exist yet in props.value
onStageSelection(selectionAsJunctionRows);
const newVal = [...selection, ...(value.value || [])];
if (newVal.length === 0) emit(null);
else emit(newVal);
}
return { stageSelection, selectModalActive, selectedPrimaryKeys, selectionFilters };
}

10
app/src/interfaces/many-to-one/many-to-one.vue
View File

@@ -82,7 +82,7 @@
</v-list>
</v-menu>
<modal-detail
<modal-item
v-if="!disabled"
:active.sync="editModalActive"
:collection="relatedCollection.collection"
@@ -91,7 +91,7 @@
@input="stageEdits"
/>
<modal-browse
<modal-collection
v-if="!disabled"
:active.sync="selectModalActive"
:collection="relatedCollection.collection"
@@ -107,8 +107,8 @@ import { useCollectionsStore, useRelationsStore } from '@/stores/';
import useCollection from '@/composables/use-collection';
import getFieldsFromTemplate from '@/utils/get-fields-from-template';
import api from '@/api';
import ModalDetail from '@/views/private/components/modal-detail';
import ModalBrowse from '@/views/private/components/modal-browse';
import ModalItem from '@/views/private/components/modal-item';
import ModalCollection from '@/views/private/components/modal-collection';
/**
* @NOTE
@@ -119,7 +119,7 @@ import ModalBrowse from '@/views/private/components/modal-browse';
*/
export default defineComponent({
components: { ModalDetail, ModalBrowse },
components: { ModalItem, ModalCollection },
props: {
value: {
type: [Number, String, Object],

487
app/src/interfaces/one-to-many/one-to-many.vue
View File

@@ -4,8 +4,8 @@
</v-notice>
<div class="one-to-many" v-else>
<v-table
:loading="currentLoading"
:items="currentItems"
:loading="loading"
:items="displayItems"
:headers.sync="tableHeaders"
show-resize
inline
@@ -27,7 +27,7 @@
</template>
<template #item-append="{ item }" v-if="!disabled">
<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deselect(item)" />
<v-icon name="close" v-tooltip="$t('deselect')" class="deselect" @click.stop="deleteItem(item)" />
</template>
</v-table>
@@ -38,7 +38,7 @@
</v-button>
</div>
<modal-detail
<modal-item
v-if="!disabled"
:active="currentlyEditing !== null"
:collection="relatedCollection.collection"
@@ -48,7 +48,7 @@
@update:active="cancelEdit"
/>
<modal-browse
<modal-collection
v-if="!disabled"
:active.sync="selectModalActive"
:collection="relatedCollection.collection"
@@ -65,17 +65,18 @@ import { defineComponent, ref, computed, watch, PropType } from '@vue/compositio
import api from '@/api';
import useCollection from '@/composables/use-collection';
import { useCollectionsStore, useRelationsStore, useFieldsStore } from '@/stores/';
import ModalDetail from '@/views/private/components/modal-detail';
import ModalBrowse from '@/views/private/components/modal-browse';
import ModalItem from '@/views/private/components/modal-item';
import ModalCollection from '@/views/private/components/modal-collection';
import { Filter, Field } from '@/types';
import { Header } from '@/components/v-table/types';
import { isEqual } from 'lodash';
export default defineComponent({
components: { ModalDetail, ModalBrowse },
components: { ModalItem, ModalCollection },
props: {
value: {
type: Array,
default: undefined,
type: Array as PropType<(number | string | Record<string, any>)[] | null>,
default: null,
},
primaryKey: {
type: [Number, String],
@@ -104,16 +105,14 @@ export default defineComponent({
const fieldsStore = useFieldsStore();
const { relation, relatedCollection, relatedPrimaryKeyField } = useRelation();
const { loading: currentLoading, items: currentItems } = useCurrent();
const { tableHeaders } = useTable();
const { tableHeaders, displayItems, loading, error } = useTable();
const { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit } = useEdits();
const { stageSelection, selectModalActive, selectionFilters } = useSelection();
return {
currentLoading,
currentItems,
relation,
tableHeaders,
loading,
currentlyEditing,
editItem,
relatedCollection,
@@ -122,10 +121,85 @@ export default defineComponent({
cancelEdit,
stageSelection,
selectModalActive,
deleteItem,
displayItems,
selectionFilters,
deselect,
};
function getItem(id: string | number) {
const pkField = relatedPrimaryKeyField.value.field;
if (props.value === null) return null;
return (
props.value.find(
(item) => (typeof item === 'object' && pkField in item && item[pkField] === id) || item === id
) || null
);
}
function getNewItems() {
const pkField = relatedPrimaryKeyField.value.field;
if (props.value === null) return [];
return props.value.filter((item) => typeof item === 'object' && pkField in item === false) as Record<
string,
any
>[];
}
function getUpdatedItems() {
const pkField = relatedPrimaryKeyField.value.field;
if (props.value === null) return [];
return props.value.filter((item) => typeof item === 'object' && pkField in item === true) as Record<
string,
any
>[];
}
function getExistingItems() {
if (props.value === null) return [];
const pkField = relatedPrimaryKeyField.value.field;
return props.value.filter((item) => typeof item === 'string' || typeof item === 'number');
}
function getPrimaryKeys() {
if (props.value === null) return [];
const pkField = relatedPrimaryKeyField.value.field;
return props.value
.map((item) => {
if (typeof item === 'object') {
if (pkField in item) return item[pkField];
} else {
return item;
}
})
.filter((i) => i);
}
function deleteItem(item: Record<string, any>) {
if (props.value === null) return;
const relatedPrimKey = relatedPrimaryKeyField.value.field;
if (relatedPrimKey in item === false) {
emit(
'input',
props.value.filter((val) => isEqual(item, val) === false)
);
return;
}
const id = item[relatedPrimKey];
emit(
'input',
props.value.filter((item) => {
if (typeof item === 'number' || typeof item === 'string') return item !== id;
if (typeof item === 'object' && relatedPrimKey in item) {
return item[relatedPrimKey] !== id;
}
return true;
})
);
}
/**
* Holds info about the current relationship, like related collection, primary key field
* of the other collection etc
@@ -144,162 +218,64 @@ export default defineComponent({
return { relation, relatedCollection, relatedPrimaryKeyField };
}
/**
* Manages the current display value (the rows in the table)
* This listens to changes in props.value to make sure we always display the correct info
* in the table itself
*/
function useCurrent() {
const loading = ref(false);
const items = ref<any[]>([]);
const error = ref(null);
// This is the primary key of the parent form, not the related items
// By watching the primary key prop for this, it'll load the items fresh on load, but
// also when we navigate from edit form to another edit form.
watch(
() => props.primaryKey,
(newKey) => {
if (newKey !== null && newKey !== '+' && Array.isArray(props.value) !== true) {
fetchCurrent();
}
},
{
immediate: true,
}
);
// The value can either be null (no changes), or an array of primary key / object with changes
watch(
() => props.value,
(newValue) => {
// When the value is null, there aren't any changes. It does not mean that all
// related items are deselected
if (newValue === null) {
fetchCurrent();
}
if (Array.isArray(newValue)) {
mergeWithItems(newValue);
}
}
);
return { loading, items, error, fetchCurrent };
/**
* Fetch all related items based on the primary key of the current field. This is only
* run on first load (or when the parent form primary key changes)
*/
async function fetchCurrent() {
loading.value = true;
let fields = [...(props.fields.length > 0 ? props.fields : getDefaultFields())];
if (fields.includes(relatedPrimaryKeyField.value.field) === false) {
fields.push(relatedPrimaryKeyField.value.field);
}
// We're fetching these fields nested on the current item, so nest them in the current
// field-key
fields = fields.map((fieldKey) => `${props.field}.${fieldKey}`);
try {
const endpoint = props.collection.startsWith('directus_')
? `/${props.collection.substring(9)}/${props.primaryKey}`
: `/items/${props.collection}/${props.primaryKey}`;
const response = await api.get(endpoint, {
params: {
fields: fields,
},
});
items.value = response.data.data[props.field] || [];
} catch (err) {
error.value = err;
} finally {
loading.value = false;
}
}
/**
* Merges all changes / newly selected items with the current value array, so we can
* display the most up to date information in the table. This will merge edits with the
* existing items, and fetch the full item info when the item is newly selected (as it
* will only have a pk in the array of changes)
*/
async function mergeWithItems(changes: any[]) {
loading.value = true;
const pkField = relatedPrimaryKeyField.value.field;
const itemsWithChangesApplied = items.value
.map((item: any) => {
const changeForThisItem = changes.find((change) => change[pkField] === item[pkField]);
if (changeForThisItem) {
return {
...item,
...changeForThisItem,
};
}
return item;
})
.filter((item) => item.hasOwnProperty(pkField))
.filter((item) => item[relation.value.many_field] !== null);
const newlyAddedItems = changes.filter(
(change) =>
typeof change !== 'string' &&
typeof change !== 'number' &&
change.hasOwnProperty(pkField) === false
);
const selectedPrimaryKeys = changes
.filter((change) => typeof change === 'string' || typeof change === 'number')
.filter((primaryKey) => {
const isAlsoUpdate = itemsWithChangesApplied.some((update) => update[pkField] === primaryKey);
return isAlsoUpdate === false;
});
let selectedItems: any[] = [];
if (selectedPrimaryKeys.length > 0) {
const fields = [...props.fields];
if (fields.includes(relatedPrimaryKeyField.value.field) === false) {
fields.push(relatedPrimaryKeyField.value.field);
}
const endpoint = props.collection.startsWith('directus_')
? `/${props.collection.substring(9)}/${selectedPrimaryKeys.join(',')}`
: `/items/${relatedCollection.value.collection}/${selectedPrimaryKeys.join(',')}`;
const response = await api.get(endpoint, {
params: {
fields: fields,
},
});
if (Array.isArray(response.data.data)) {
selectedItems = response.data.data;
} else {
selectedItems = [response.data.data];
}
}
items.value = [...itemsWithChangesApplied, ...newlyAddedItems, ...selectedItems];
loading.value = false;
}
}
function useTable() {
// Using a ref for the table headers here means that the table itself can update the
// values if it needs to. This allows the user to manually resize the columns for example
const tableHeaders = ref<Header[]>([]);
const loading = ref(false);
const displayItems = ref<Record<string, any>[]>([]);
const error = ref(null);
watch(
() => props.value,
async (newVal) => {
loading.value = true;
const pkField = relatedPrimaryKeyField.value.field;
const fields = [...(props.fields.length > 0 ? props.fields : getDefaultFields())];
if (fields.includes(pkField) === false) {
fields.push(pkField);
}
try {
const endpoint = relatedCollection.value.collection.startsWith('directus_')
? `/${relatedCollection.value.collection.substring(9)}`
: `/items/${relatedCollection.value.collection}`;
const primaryKeys = getPrimaryKeys();
let existingItems: any[] = [];
if (primaryKeys && primaryKeys.length > 0) {
const response = await api.get(endpoint, {
params: {
fields: fields,
[`filter[${pkField}][_in]`]: primaryKeys.join(','),
},
});
existingItems = response.data.data;
}
const updatedItems = getUpdatedItems();
const newItems = getNewItems();
displayItems.value = existingItems
.map((item) => {
const updatedItem = updatedItems.find((updated) => updated[pkField] === item[pkField]);
if (updatedItem !== undefined) return updatedItem;
return item;
})
.concat(...newItems);
} catch (err) {
error.value = err;
} finally {
loading.value = false;
}
},
{ immediate: true }
);
// Seeing we don't care about saving those tableHeaders, we can reset it whenever the
// fields prop changes (most likely when we're navigating to a different o2m context)
@@ -335,7 +311,7 @@ export default defineComponent({
{ immediate: true }
);
return { tableHeaders };
return { tableHeaders, displayItems, loading, error };
}
function useEdits() {
@@ -349,65 +325,45 @@ export default defineComponent({
return { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit };
function editItem(item: any) {
const primaryKey = item[relatedPrimaryKeyField.value.field];
const pkField = relatedPrimaryKeyField.value.field;
const hasPrimaryKey = pkField in item;
// When the currently staged value is an array, we know we made changes / added / removed
// certain items. In that case, we have to extract the previously made edits so we can
// keep moving forwards with those
if (props.value && Array.isArray(props.value)) {
const existingEdits = props.value.find((existingChange) => {
const existingPK = existingChange[relatedPrimaryKeyField.value.field];
if (!existingPK) return item === existingChange;
return existingPK === primaryKey;
});
if (existingEdits) {
editsAtStart.value = existingEdits;
}
}
// Make sure the edits have the primary key included, otherwise the api will create
// the item as a new one instead of update the existing
if (primaryKey && editsAtStart.value.hasOwnProperty(relatedPrimaryKeyField.value.field) === false) {
editsAtStart.value = {
...editsAtStart.value,
[relatedPrimaryKeyField.value.field]: primaryKey,
};
}
currentlyEditing.value = primaryKey;
editsAtStart.value = item;
currentlyEditing.value = hasPrimaryKey ? item[pkField] : -1;
}
function stageEdits(edits: any) {
const pkField = relatedPrimaryKeyField.value.field;
const hasPrimaryKey = edits.hasOwnProperty(pkField);
const hasPrimaryKey = pkField in edits;
if (props.value && Array.isArray(props.value)) {
const newValue = props.value.map((existingChange) => {
if (existingChange[pkField] && edits[pkField] && existingChange[pkField] === edits[pkField]) {
return edits;
}
if (existingChange === edits[pkField]) {
return edits;
}
if (editsAtStart.value === existingChange) {
return edits;
}
return existingChange;
});
if (hasPrimaryKey === false && newValue.includes(edits) === false) {
newValue.push(edits);
const newValue = (props.value || []).map((item) => {
if (
typeof item === 'object' &&
pkField in item &&
pkField in edits &&
item[pkField] === edits[pkField]
) {
return edits;
}
emit('input', newValue);
} else {
emit('input', [edits]);
if (item === edits[pkField]) {
return edits;
}
if (editsAtStart.value === item) {
return edits;
}
return item;
});
if (hasPrimaryKey === false && newValue.includes(edits) === false) {
newValue.push(edits);
}
if (newValue.length === 0) emit('input', null);
else emit('input', newValue);
}
function cancelEdit() {
@@ -420,19 +376,26 @@ export default defineComponent({
const selectModalActive = ref(false);
const selectedPrimaryKeys = computed<(number | string)[]>(() => {
if (!currentItems.value) return [];
if (displayItems.value === null) return [];
const pkField = relatedPrimaryKeyField.value.field;
return currentItems.value
.filter((currentItem) => currentItem.hasOwnProperty(pkField))
return displayItems.value
.filter((currentItem) => pkField in currentItem)
.map((currentItem) => currentItem[pkField]);
});
const selectionFilters = computed<Filter[]>(() => {
const pkField = relatedPrimaryKeyField.value.field;
if (selectedPrimaryKeys.value.length === 0) return [];
const filter: Filter = {
key: 'selection',
field: relatedPrimaryKeyField.value.field,
field: pkField,
operator: 'nin',
value: selectedPrimaryKeys.value.join(','),
locked: true,
};
return [filter];
@@ -441,83 +404,17 @@ export default defineComponent({
return { stageSelection, selectModalActive, selectionFilters };
function stageSelection(newSelection: (number | string)[]) {
if (props.value && Array.isArray(props.value)) {
emit('input', [...props.value, ...newSelection]);
} else {
emit('input', newSelection);
}
const pkField = relatedPrimaryKeyField.value.field;
const selection = newSelection.filter((item) => selectedPrimaryKeys.value.includes(item) === false);
const newVal = [...selection, ...(props.value || [])];
if (newVal.length === 0) emit('input', null);
else emit('input', newVal);
}
}
function deselect(item: any) {
const pkField = relatedPrimaryKeyField.value.field;
const itemPrimaryKey = item[pkField];
// If the edited item doesn't have a primary key, it's new. In that case, filtering
// it out of props.value should be enough to remove it
if (itemPrimaryKey === undefined) {
return emit(
'input',
props.value.filter((stagedValue) => stagedValue !== item)
);
}
// If there's no staged value, it's safe to assume this item was already selected before
// and has to be deselected
if (props.value === null) {
return emit('input', [
{
[pkField]: itemPrimaryKey,
[relation.value.many_field]: null,
},
]);
}
// If the item is selected in the current edits, it will only have staged the primary
// key so the API is able to properly set it on first creation. In that case, we have
// to filter out the primary key
const itemWasNewlySelect = !!props.value.find((stagedItem) => stagedItem === itemPrimaryKey);
if (itemWasNewlySelect) {
currentItems.value = currentItems.value.filter(
(itemPreview) => itemPreview[pkField] !== itemPrimaryKey
);
return emit(
'input',
props.value.filter((stagedValue) => stagedValue !== itemPrimaryKey)
);
}
const itemHasEdits =
props.value.find((stagedItem: any) => stagedItem[pkField] === itemPrimaryKey) !== undefined;
if (itemHasEdits) {
return emit(
'input',
props.value.map((stagedValue: any) => {
if (stagedValue[pkField] === itemPrimaryKey) {
return {
[pkField]: itemPrimaryKey,
[relation.value.many_field]: null,
};
}
return stagedValue;
})
);
}
return emit('input', [
...props.value,
{
[pkField]: itemPrimaryKey,
[relation.value.many_field]: null,
},
]);
}
function getDefaultFields(): string[] {
const fields = fieldsStore.getFieldsForCollection(relatedCollection.value.collection);
return fields.slice(0, 3).map((field: Field) => field.field);

2
app/src/interfaces/repeater/repeater-row-header.vue
View File

@@ -25,7 +25,7 @@ export default defineComponent({
},
placeholder: {
type: String,
default: i18n.t('empty_item'),
default: null,
},
toggle: {
type: Function,

7
app/src/interfaces/repeater/repeater-row.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-item class="row" v-slot:default="{ active, toggle }">
<v-item class="row" v-slot:default="{ active, toggle }" :active="true" :watch="false">
<repeater-row-header
:template="template"
:value="value"
@@ -7,6 +7,7 @@
:toggle="toggle"
@delete="$emit('delete')"
:disabled="disabled"
:placeholder="headerPlaceholder"
/>
<transition-expand>
<div v-if="active">
@@ -46,6 +47,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
headerPlaceholder: {
type: String,
default: null,
},
},
});
</script>

18
app/src/interfaces/repeater/repeater.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-item-group class="repeater" v-model="selection">
<v-item-group class="repeater">
<draggable :value="value" handle=".drag-handle" @input="onSort" :set-data="hideDragImage">
<repeater-row
v-for="(row, index) in value"
@@ -10,6 +10,7 @@
@input="updateValues(index, $event)"
@delete="removeItem(row)"
:disabled="disabled"
:headerPlaceholder="headerPlaceholder"
/>
</draggable>
<button @click="addNew" class="add-new" v-if="showAddNew">
@@ -40,7 +41,7 @@ export default defineComponent({
},
template: {
type: String,
default: null
default: null,
},
addLabel: {
type: String,
@@ -54,14 +55,18 @@ export default defineComponent({
type: Boolean,
default: false,
},
headerPlaceholder: {
type: String,
default: i18n.t('empty_item'),
},
},
setup(props, { emit }) {
const selection = ref<number[]>([]);
const _template = computed(() => {
if(props.template === null) return props.fields.length > 0 ? `{{${ props.fields[0].field}}}` : ''
return props.template
})
if (props.template === null) return props.fields.length > 0 ? `{{${props.fields[0].field}}}` : '';
return props.template;
});
const showAddNew = computed(() => {
if (props.disabled) return false;
@@ -106,9 +111,6 @@ export default defineComponent({
newDefaults[field.field!] = field.schema?.default_value;
});
// select the new row
selection.value = [props.value?.length || 0];
if (props.value !== null) {
emitValue([...props.value, newDefaults]);
} else {

12
app/src/interfaces/user/user.vue
View File

@@ -72,7 +72,7 @@
</v-list>
</v-menu>
<modal-detail
<modal-item
:active.sync="editModalActive"
collection="directus_users"
:primary-key="currentPrimaryKey"
@@ -81,7 +81,7 @@
v-if="!disabled"
/>
<modal-browse
<modal-collection
:active.sync="selectModalActive"
collection="directus_users"
:selection="selection"
@@ -95,11 +95,11 @@
import { defineComponent, computed, ref, watch, PropType } from '@vue/composition-api';
import useCollection from '@/composables/use-collection';
import api from '@/api';
import ModalDetail from '@/views/private/components/modal-detail';
import ModalBrowse from '@/views/private/components/modal-browse';
import ModalItem from '@/views/private/components/modal-item';
import ModalCollection from '@/views/private/components/modal-collection';
export default defineComponent({
components: { ModalDetail, ModalBrowse },
components: { ModalItem, ModalCollection },
props: {
value: {
type: String,
@@ -178,7 +178,7 @@ export default defineComponent({
const currentPrimaryKey = computed<string | number>(() => {
if (!currentUser.value) return '+';
if (!props.value) return '+';
return props.value;
});

2
app/src/lang/af-ZA/index.json
View File

@@ -95,7 +95,7 @@
"company": "Company",
"title": "Title",
"timezone": "Timezone",
"locale": "Locale",
"language": "Language",
"avatar": "Avatar",
"theme": "Theme",
"2fa_secret": "Two-Factor Authentication"

2
app/src/lang/af-ZA/interfaces.json
View File

@@ -372,7 +372,7 @@
"placeholder": "Placeholder",
"placeholder_comment": "Enter placeholder text",
"localized": "Localized",
"localized_comment": "Localize the output to the user's locale",
"localized_comment": "Localize the output to the user's language",
"icon_left": "Icon Left",
"icon_left_comment": "Choose an optional icon to display on the left of the input",
"icon_right": "Icon Right",

2
app/src/lang/ar-SA/index.json
View File

@@ -95,7 +95,7 @@
"company": "Company",
"title": "Title",
"timezone": "Timezone",
"locale": "Locale",
"language": "Language",
"avatar": "Avatar",
"theme": "Theme",
"2fa_secret": "Two-Factor Authentication"

2
app/src/lang/ar-SA/interfaces.json
View File

@@ -372,7 +372,7 @@
"placeholder": "Placeholder",
"placeholder_comment": "Enter placeholder text",
"localized": "Localized",
"localized_comment": "Localize the output to the user's locale",
"localized_comment": "Localize the output to the user's language",
"icon_left": "Icon Left",
"icon_left_comment": "Choose an optional icon to display on the left of the input",
"icon_right": "Icon Right",

2
app/src/lang/ca-ES/index.json
View File

@@ -95,7 +95,7 @@
"company": "Company",
"title": "Title",
"timezone": "Timezone",
"locale": "Locale",
"language": "language",
"avatar": "Avatar",
"theme": "Theme",
"2fa_secret": "Two-Factor Authentication"

2
app/src/lang/ca-ES/interfaces.json
View File

@@ -372,7 +372,7 @@
"placeholder": "Placeholder",
"placeholder_comment": "Enter placeholder text",
"localized": "Localized",
"localized_comment": "Localize the output to the user's locale",
"localized_comment": "Localize the output to the user's language",
"icon_left": "Icon Left",
"icon_left_comment": "Choose an optional icon to display on the left of the input",
"icon_right": "Icon Right",

2
app/src/lang/cs-CZ/index.json
View File

@@ -95,7 +95,7 @@
"company": "Společnost",
"title": "Title",
"timezone": "Časové pásmo",
"locale": "Lokalizace",
"language": "Lokalizace",
"avatar": "Avatar",
"theme": "Téma",
"2fa_secret": "Dvoufázové ověření"

2
app/src/lang/cs-CZ/interfaces.json
View File

@@ -372,7 +372,7 @@
"placeholder": "Placeholder",
"placeholder_comment": "Enter placeholder text",
"localized": "Localized",
"localized_comment": "Localize the output to the user's locale",
"localized_comment": "Localize the output to the user's language",
"icon_left": "Icon Left",
"icon_left_comment": "Choose an optional icon to display on the left of the input",
"icon_right": "Icon Right",

2
app/src/lang/da-DK/index.json
View File

@@ -95,7 +95,7 @@
"company": "Company",
"title": "Title",
"timezone": "Timezone",
"locale": "Locale",
"language": "language",
"avatar": "Avatar",
"theme": "Theme",
"2fa_secret": "Two-Factor Authentication"

2
app/src/lang/da-DK/interfaces.json
View File

@@ -372,7 +372,7 @@
"placeholder": "Placeholder",
"placeholder_comment": "Enter placeholder text",
"localized": "Localized",
"localized_comment": "Localize the output to the user's locale",
"localized_comment": "Localize the output to the user's language",
"icon_left": "Icon Left",
"icon_left_comment": "Choose an optional icon to display on the left of the input",
"icon_right": "Icon Right",

2
app/src/lang/de-DE/index.json
View File

@@ -95,7 +95,7 @@
"company": "Firma",
"title": "Titel",
"timezone": "Zeitzone",
"locale": "Sprache",
"language": "Sprache",
"avatar": "Avatar",
"theme": "Design",
"2fa_secret": "Zwei-Faktor-Authentifizierung"

2
app/src/lang/de-DE/interfaces.json
View File

@@ -372,7 +372,7 @@
"placeholder": "Placeholder",
"placeholder_comment": "Enter placeholder text",
"localized": "Lokalisiert",
"localized_comment": "Localize the output to the user's locale",
"localized_comment": "Localize the output to the user's language",
"icon_left": "Icon links",
"icon_left_comment": "Optionales Icon, für Anzeige links neben der Eingabe",
"icon_right": "Icon rechts",

2
app/src/lang/el-GR/index.json
View File

@@ -95,7 +95,7 @@
"company": "Εταιρεία",
"title": "Τίτλος",
"timezone": "Ζώνη ώρας",
"locale": "Γλώσσα",
"language": "Γλώσσα",
"avatar": "Avatar",
"theme": "Θέμα",
"2fa_secret": "Έλεγχος ταυτότητας δυο παραγόντων"

2
app/src/lang/el-GR/interfaces.json
View File

@@ -372,7 +372,7 @@
"placeholder": "Placeholder",
"placeholder_comment": "Enter placeholder text",
"localized": "Localized",
"localized_comment": "Localize the output to the user's locale",
"localized_comment": "Localize the output to the user's language",
"icon_left": "Icon Left",
"icon_left_comment": "Choose an optional icon to display on the left of the input",
"icon_right": "Icon Right",

36
app/src/lang/en-US/index.json
View File

@@ -28,6 +28,11 @@
"create_user": "Create User",
"create_webhook": "Create Webhook",
"connection_excellent": "Excellent Connection",
"connection_good": "Good Connection",
"connection_fair": "Fair Connection",
"connection_poor": "Poor Connection",
"rename_folder": "Rename Folder",
"delete_folder": "Delete Folder",
"reset_bookmark": "Reset Bookmark",
@@ -424,6 +429,7 @@
"modified": "Modified",
"checksum": "Checksum",
"owner": "Owner",
"edited_by": "Edited by",
"folder": "Folder",
"set_to_now": "Set to Now",
@@ -919,24 +925,24 @@
"keep_editing": "Keep Editing",
"page_help_collections_overview": "**Collections Overview** — Lists of all collections you have access to.",
"page_help_collections_browse": "**Browse Items** — Lists all {collection} items you have access to. Customize layout, filters, and sorting to tailor your view, and even save bookmarks of these different configurations for quick access.",
"page_help_collections_detail": "**Item Detail** — A form for viewing and managing this item. This sidebar also contains a full history of revisions, and embedded comments.",
"page_help_activity_browse": "**Browse Activity** — A comprehensive listing of all your user's system and content activity.",
"page_help_collections_collection": "**Browse Items** — Lists all {collection} items you have access to. Customize layout, filters, and sorting to tailor your view, and even save bookmarks of these different configurations for quick access.",
"page_help_collections_item": "**Item Detail** — A form for viewing and managing this item. This sidebar also contains a full history of revisions, and embedded comments.",
"page_help_activity_collection": "**Browse Activity** — A comprehensive listing of all your user's system and content activity.",
"page_help_activity_detail": "**Activity Detail** — Shows accountability info, revision data, and the update message for this activity record.",
"page_help_docs_global": "**Documentation Overview** — Docs tailored specifically to this project's version and schema.",
"page_help_files_browse": "**File Library** — Lists all file assets uploaded to this project. Customize layout, filters, and sorting to tailor your view, and even save bookmarks of these different configurations for quick access.",
"page_help_files_detail": "**File Detail** — A form for managing file metadata, editing the original asset, and updating access settings.",
"page_help_files_collection": "**File Library** — Lists all file assets uploaded to this project. Customize layout, filters, and sorting to tailor your view, and even save bookmarks of these different configurations for quick access.",
"page_help_files_item": "**File Detail** — A form for managing file metadata, editing the original asset, and updating access settings.",
"page_help_settings_project": "**Project Settings** — Your project's global configuration options.",
"page_help_settings_datamodel_collections": "**Data Model: Collections** — Lists all collections available. This includes visible, hidden, and system collections, as well as unmanaged database tables that can be added.",
"page_help_settings_datamodel_fields": "**Data Model: Collection** — A form for managing this collection and its fields.",
"page_help_settings_roles_browse": "**Browse Roles** — Lists the Admin, Public and custom User Roles.",
"page_help_settings_roles_detail": "**Role Detail** — Manage a role's permissions and other settings.",
"page_help_settings_presets_browse": "**Browse Presets** — Lists all presets in the project, including: user, role, and global bookmarks, as well as default views.",
"page_help_settings_presets_detail": "**Preset Detail** — A form for managing bookmarks and default collection presets.",
"page_help_settings_webhooks_browse": "**Browse Webhooks** — Lists all webhooks within the project.",
"page_help_settings_webhooks_detail": "**Webhook Detail** — A form for creating and managing project webhooks.",
"page_help_users_browse": "**User Directory** — Lists all system users within this project.",
"page_help_users_detail": "**User Detail** — Manage your account information, or view the details of other users.",
"page_help_settings_roles_collection": "**Browse Roles** — Lists the Admin, Public and custom User Roles.",
"page_help_settings_roles_item": "**Role Detail** — Manage a role's permissions and other settings.",
"page_help_settings_presets_collection": "**Browse Presets** — Lists all presets in the project, including: user, role, and global bookmarks, as well as default views.",
"page_help_settings_presets_item": "**Preset Detail** — A form for managing bookmarks and default collection presets.",
"page_help_settings_webhooks_collection": "**Browse Webhooks** — Lists all webhooks within the project.",
"page_help_settings_webhooks_item": "**Webhook Detail** — A form for creating and managing project webhooks.",
"page_help_users_collection": "**User Directory** — Lists all system users within this project.",
"page_help_users_item": "**User Detail** — Manage your account information, or view the details of other users.",
"about_directus": "About Directus",
"activity_feed": "Activity Feed",
@@ -977,6 +983,8 @@
"collection_removed": "Collection Removed",
"collection_updated": "Collection Updated",
"collections_and_fields": "Collection & Fields",
"singleton": "Singleton",
"singleton_label": "Treat as single object",
"fields": {
"directus_activity": {
@@ -1019,7 +1027,7 @@
"company": "Company",
"title": "Title",
"timezone": "Timezone",
"locale": "Locale",
"language": "language",
"avatar": "Avatar",
"theme": "Theme",
"tfa_secret": "Two-Factor Authentication"

2
app/src/lang/es-419/index.json
View File

@@ -95,7 +95,7 @@
"company": "Empresa",
"title": "Título",
"timezone": "Zona horaria",
"locale": "Localización",
"language": "Localización",
"avatar": "Avatar",
"theme": "Tema",
"2fa_secret": "Autenticación de dos factores"

2
app/src/lang/es-CL/index.json
View File

@@ -95,7 +95,7 @@
"company": "Empresa",
"title": "Título",
"timezone": "Zona horaria",
"locale": "Localización",
"language": "Localización",
"avatar": "Avatar",
"theme": "Tema",
"2fa_secret": "Autenticación de dos factores"

2
app/src/lang/es-ES/index.json
View File

@@ -95,7 +95,7 @@
"company": "Empresa",
"title": "Título",
"timezone": "Zona horaria",
"locale": "Localización",
"language": "Localización",
"avatar": "Avatar",
"theme": "Tema",
"2fa_secret": "Autenticación de dos factores"

2
app/src/lang/fi-FI/index.json
View File

@@ -95,7 +95,7 @@
"company": "Company",
"title": "Title",
"timezone": "Timezone",
"locale": "Locale",
"language": "language",
"avatar": "Avatar",
"theme": "Theme",
"2fa_secret": "Two-Factor Authentication"

Some files were not shown because too many files have changed in this diff Show More