directus / directus

The Modern Data Stack 🐰 — Directus is an instant REST+GraphQL API and intuitive no-code data collaboration app for any SQL database.

---

🐰 Introduction

Directus is a real-time API and App dashboard for managing SQL database content.

• Open Source. No artificial limitations, vendor lock-in, or hidden paywalls.
• REST & GraphQL API. Instantly layers a blazingly fast Node.js API on top of any SQL database.
• Manage Pure SQL. Works with new or existing SQL databases, no migration required.
• Choose your Database. Supports PostgreSQL, MySQL, SQLite, OracleDB, CockroachDB, MariaDB, and MS-SQL.
• On-Prem or Cloud. Run locally, install on-premises, or use our self-service Cloud service.
• Completely Extensible. Built to white-label, it is easy to customize our modular platform.
• A Modern Dashboard. Our no-code Vue.js app is safe and intuitive for non-technical users, no training required.

Learn more about Directus • Documentation

🚀 Directus Cloud

Directus Cloud allows you to create projects, hosted by the Directus team, in 90 seconds.

• No product limitations or service usage quotas (unlimited users, API requests, etc)
• A modern self-service dashboard to create and monitor all your projects in one place
• End-to-end solution: Directus, database, serverless auto-scaling, storage, and a global CDN
• Select your desired region and provision a new project in ~90 seconds

Create a Directus Cloud Project

🤔 Community Help

The Directus Documentation is a great place to start, or explore these other channels:

• Discord (Questions, Live Discussions)
• GitHub Issues (Report Bugs)
• GitHub Discussions (Feature Requests)
• Twitter (Latest News)
• YouTube (Video Tutorials)

❤️ Contributing & Sponsoring

Please read our Contributing Guide before submitting Pull Requests.

All security vulnerabilities should be reported in accordance with our Security Policy.

Directus is a premium open-source (BSL 1.1) project, made possible with support from our passionate core team, talented contributors, and amazing GitHub Sponsors. Thank you all!!

© 2004-2024, Monospace, Inc.

directus's Issues

Drag/Drop: Reorder list view items

Only if sort field is present.

Single Tables

When an item is set as a "single" table then it bypasses the listing page and goes directly to the edit page. If the table contains no items then when clicked it takes you to create a new item. Otherwise it takes you to edit the item.

Remove toolbar from Tables page

Code Refactoring: Never use var me = this...

Its messy, lazy and can cause bugs, if the 'this' context needs to be modified, use $.proxy or _.bind

Some of the tabs doesn't work

Make sure that all the tabs show their corresponding pages

Update Duplicate Relational List Items on Edit

Based on item ID instead of Junction ID

Settings: Global

Uses all standard UIs.

• Site Name: Used for the title in the header (input)
• Site URL: Used for the site link in the header (input)
• CMS Color: Chooses one of several pre-compiled CSS (dropdown)
• CMS user auto sign out (int for # of minutes)

Activity Style

Make the activity page look good.

REST API: Typecasting

The API should return JSON data with correct typing:

1. Numbers should never contain any "quotation marks"
2. Tinyints/booleans should be formatted as true or false instead of 0 or 1.
3. Null values should be empty or not returned at all.

See:

• mysqlnd
• mysql_fetch_field

Media modal is broken

Relations edit

Edit relations in modal window.

Throbber

This is pretty nice with only CSS:

http://codepen.io/louisbullock/pen/pJmGa/
http://patsyleonard.com/cloudupload/

Table pages doesn't load user preferences on initial view

Show

Settings template

Does not need to function but should look good.

Labels in Nav

.nav-tabs li > a .label
margin-left: 5px

.label
padding: 2px 5px 1px 5px
border radius: 2px
border should be active (white) label only... padding should be reduced to match size
font-size: 12px
font-weight: 600

Activity: Chart

The visual chart at the top of the activity page can wait until 6.1

Adjust placeholder text color

http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css

Active Nav Item Border

the active navigation tab (white) should have a WHITE background color, not GRAY.

Black Header Size

New black header height is 50px (not 70px)

Settings: Permissions

Global permissions:

• Can upload media
• Can send messages
• Lock users settings

Per table permissions:

• View
• Add
• Edit
• Reorder
• Delete
• Drafts only

See all users within this group

Site Title Link

The entire site title in the top-left should be clickable, and rolling over it should turn the arrow green.

Listing page: Empty notification

When on a listing page (tables, items, users, activity, messages), if there are no items visible then the a message should appear explaining to the user why.

Relations add

Add new relational item

Messages

Page listing messages:

• Inbox
• Sent
• Archived

Unread items: Bold text and green side indicator

Messages with media have paperclip icon

Item messages have a arrow icon

Relations choose

Choose relational item from a modal window

Alerts

Creation of "Alert" system that handles loading/saving/reorrdering etc.

Reorder Items from list page

Drag and drop items from listing page. Should use a handle icon on the far left.

This functionality only exists when the "sort" field is present.

Complete Relational Media

Once relational logic has been completed, the updated code should be applied to media within Directus.

Media listing page

Icons and thumbnails on the Media listing page should be horizontally centered within the 50x50px box

Remove dropshadow on active nav tab text

when a nav tab is active it's text should not have a dropshadow

Add item count to tables page

Each table on the tables page should show the total number of active items in the right column

Edit Item: Save options dropdown

Add in the additional ways to save an item:

• Save Item [default]
  • Save and stay
  • Save and add
  • Save as copy

Pagination and other toolbar buttons

Border radius of 2px (not 4px)
Dark text uses white drop shadow, not black
Box shadow: none
Should all have standard height (right now height is determined by padding the content)

Tooltips

A tooltip system should be put in place that allows for easy addition of tooltips to any element. Options should be set within element's data attributes.

• Icon (optional: ✓, X, i, ?, !)
• Title (optional: large text)
• Description (optional: small text)
• Force arrow direction (top, right, bottom, left, auto)

Tooltips must have either a title OR a description

Table pages doesn't load user preferences on initial view

Show

Complete Relational Logic

Standard relational items (many-many) are now stored in junction tables. This issue includes completing the API returning correct JSON as well as displaying/editing/saving relational items.

Views should only render once per update

At the moment there is excessive rendering, this should be optimized so only necessary rendering occurs.

UI: Tags

SQL Search

On listing pages, when items are paginated (more than 500) the "filter" field turns into a "search" field. When submitted it should query the database instead of filtering items on the front-end.

Users view style

Make sure that buttons, columns and style look like the design documents.

Login Page + Authentication

• Login page template
• Forgot password
• Authentication
• Save token as session var?
• "Keep me logged in" saves token as cookie

Item Messages

A small messages panel on the edit page.

Main body (white) dropshadow

10% black with 1px blur. This applies to the top and bottom of the white area.

Relations choose

Choose relational item from a modal window

Item Revisions

A small panel showing all edits/activations/deletions made to an item.

Settings: Media & Thumbnails

Can use (mostly) core UIs:

• Media folder: can be an input, later could make a system folder browser UI
• Media Naming: Unique, Sequential, Original
• Thumbnail quality: 0-100
• Allowed thumbnails: create a set of allowed thumbnail sizes
  • Width
  • Height
  • Crop

Selecting media items from the media listing page breaks missing images

Checking the checkbox for a media item that has the "missing image" icon breaks the thumbnail

Listings: Side-bar colors

Find a system for easily applying colors to list items throughout Directus. Apply colors to items on the activity page, messages page, and item listing page.

Listings: Last item bottom border

The last item on listing pages should have a bottom border.

Settings: Tables & Inputs

Settings for tables:

• Hide entire table
• Single entry table
• Lock user settings
• Table notes (???)

Settings for fields:

• Handle (for drag and drop ordering)
• Title (with datatype tooltip)
• Input type (dropdown)
  • Input type options (gear icon: opens modal)
• Required (checkbox)
• Hidden (checkbox)
• Primary (radio button)
• Notes (input)

Add new field:
Opens modal window with

• Field title
• Datatype
• Length
• See directus 5 (conditional items)