mirror of https://github.com/Budibase/budibase.git
mike12345567
4 years ago
91 changed files with 1817 additions and 384 deletions
@ -0,0 +1,214 @@ |
|||
<p align="center"> |
|||
<a href="https://www.budibase.com"> |
|||
<img alt="Budibase" src="https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg" width="60" /> |
|||
</a> |
|||
</p> |
|||
<h1 align="center"> |
|||
Budibase |
|||
</h1> |
|||
|
|||
<h3 align="center"> |
|||
La plateform low-code que vous aimerez utiliser |
|||
</h3> |
|||
<p align="center"> |
|||
Budibase est une plateforme low-code open source et c'est la façon la plus facile de créer des outils internes qui améliore la productivité. |
|||
</p> |
|||
|
|||
<h3 align="center"> |
|||
🤖 🎨 🚀 |
|||
</h3> |
|||
<br> |
|||
|
|||
<p align="center"> |
|||
<img alt="Budibase design ui" src="https://res.cloudinary.com/daog6scxm/image/upload/v1633524049/ui/design-ui-wide-mobile_gdaveq.jpg"> |
|||
</p> |
|||
|
|||
<p align="center"> |
|||
<a href="https://github.com/Budibase/budibase/releases"> |
|||
<img alt="GitHub toutes les releases" src="https://img.shields.io/github/downloads/Budibase/budibase/total"> |
|||
</a> |
|||
<a href="https://github.com/Budibase/budibase/releases"> |
|||
<img alt="GitHub release (par ordre chronologique)" src="https://img.shields.io/github/v/release/Budibase/budibase"> |
|||
</a> |
|||
<a href="https://twitter.com/intent/follow?screen_name=budibase"> |
|||
<img src="https://img.shields.io/twitter/follow/budibase?style=social" alt="Suivre @budibase" /> |
|||
</a> |
|||
<img src="https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg" alt="Code de conduite" /> |
|||
<a href="https://codecov.io/gh/Budibase/budibase"> |
|||
<img src="https://codecov.io/gh/Budibase/budibase/graph/badge.svg?token=E8W2ZFXQOH"/> |
|||
</a> |
|||
</p> |
|||
|
|||
<h3 align="center"> |
|||
<a href="https://docs.budibase.com/getting-started">Commencer</a> |
|||
<span> · </span> |
|||
<a href="https://docs.budibase.com">Documentation</a> |
|||
<span> · </span> |
|||
<a href="https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas">Demandes d'amélioration</a> |
|||
<span> · </span> |
|||
<a href="https://github.com/Budibase/budibase/issues">Signaler un bug</a> |
|||
<span> · </span> |
|||
Support: <a href="https://github.com/Budibase/budibase/discussions">Discussions</a> |
|||
</h3> |
|||
|
|||
<br /><br /> |
|||
## ✨ Fontionnalités |
|||
|
|||
### Construire et déployer un vrai logiciel |
|||
Contrairement à d'autres plateformes, avec Budibase vous construisez et déployez des applications one-page. Les applications Budibase sont très perfomantes et peuvent être designées de manière responsive, offrant ainsi à vos utilisateurs une expérience exceptionnelle. |
|||
<br /><br /> |
|||
|
|||
### Source libre et extensible |
|||
Budibase est un logiciel libre - sous licence GPL v3. Cela devrait vous rassurer sur le fait que Budibase sera toujours là. Vous pouvez également coder dans Budibase ou le forker et apporter des modifications à votre guise, ce qui en fera une expérience conviviale pour les développeurs. |
|||
<br /><br /> |
|||
|
|||
### Importer les données ou partir de zéro |
|||
Budibase peut tirer ses données de plusieurs sources, dont MongoDB, CouchDB, PostgreSQL, MySQL, Airtable, S3, DynamoDB ou une API REST. Et contrairement à d'autres plateformes, avec Budibase, vous pouvez partir de zéro et créer des applications métier sans aucune source de données. [Demander une nouvelle source de données](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas). |
|||
|
|||
<p align="center"> |
|||
<img alt="Budibase data" src="https://res.cloudinary.com/daog6scxm/image/upload/v1636970242/Out%20of%20beta%20launch/data_n1tlhf.png"> |
|||
</p> |
|||
<br /><br /> |
|||
|
|||
### Concevoir et créer des applications à l'aide de composants prédéfinis. |
|||
|
|||
Budibase est livré avec des composants joliment conçus et puissants que vous pouvez utiliser comme des blocs de construction pour bâtir votre interface utilisateur. Nous exposons également un grand nombre de vos options de style CSS préférées afin que vous puissiez faire preuve d'une créativité accrue. [Demander un nouveau composant](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas). |
|||
|
|||
<p align="center"> |
|||
<img alt="Budibase design" src="https://res.cloudinary.com/daog6scxm/image/upload/v1636970243/Out%20of%20beta%20launch/design-like-a-pro_qhlfeu.gif"> |
|||
</p> |
|||
<br /><br /> |
|||
|
|||
### Automatiser les processus, intégrer d'autres outils et se connecter à des webhooks |
|||
Gagnez du temps en automatisant les processus manuels et les flux de travail. Qu'il s'agisse de se connecter à des webhooks ou d'automatiser des e-mails, il suffit de dire à Budibase ce qu'il doit faire et de le laisser travailler pour vous. Vous pouvez aisément [créer une nouvelle automatisation pour Budibase ici](https://github.com/Budibase/automations) ou [Demander une nouvelle automatisation](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas). |
|||
|
|||
<p align="center"> |
|||
<img alt="Budibase automations" src="https://res.cloudinary.com/daog6scxm/image/upload/v1636970486/Out%20of%20beta%20launch/automation_riro7u.png"> |
|||
</p> |
|||
<br /><br /> |
|||
|
|||
### Intégration avec vos outils préférés |
|||
Budibase s'intègre à un certain nombre d'outils populaires, ce qui vous permet de créer des applications qui s'adaptent parfaitement à votre pile technologique. |
|||
|
|||
<p align="center"> |
|||
<img alt="Budibase integrations" src="https://res.cloudinary.com/daog6scxm/image/upload/v1636970242/Out%20of%20beta%20launch/integrations_kc7dqt.png"> |
|||
</p> |
|||
<br /><br /> |
|||
|
|||
### Paradis des admins |
|||
Budibase est conçu pour évoluer. Avec Budibase, vous pouvez vous auto-héberger sur votre propre infrastructure et gérer globalement les utilisateurs, l'accueil, le SMTP, les applications, les groupes, l'apparence et plus encore. Vous pouvez également fournir aux utilisateurs/groupes un portail d'applications et confier la gestion des utilisateurs au responsable du groupe. |
|||
|
|||
- Regardez la vidéo de promotion: https://youtu.be/xoljVpty_Kw |
|||
|
|||
<br /><br /><br /> |
|||
|
|||
## 🏁 Commencer |
|||
|
|||
<img src="https://res.cloudinary.com/daog6scxm/image/upload/v1634808888/logo/deploy_npl9za.png" /> |
|||
|
|||
Déployez Budibase en auto-hébergement dans votre infrastructure existante, en utilisant Docker, Kubernetes et Digital Ocean. |
|||
Ou utilisez Budibase Cloud si vous n'avez pas besoin de vous auto-héberger, et que vous souhaitez démarrer rapidement. |
|||
|
|||
### [Commencer avec Budibase](https://budibase.com) |
|||
|
|||
|
|||
<br /><br /> |
|||
|
|||
## 🎓 Apprendre Budibase |
|||
|
|||
La documentation Budibase [est ic](https://docs.budibase.com). |
|||
<br /> |
|||
|
|||
|
|||
<br /><br /> |
|||
|
|||
## 💬 Communauté |
|||
|
|||
Si vous avez une question ou si vous souhaitez discuter avec d'autres utilisateurs de Budibase et rejoindre notre communauté, veuillez vous rendre à l'adresse suivante : [Discussions Github](https://github.com/Budibase/budibase/discussions) |
|||
|
|||
<br /><br /><br /> |
|||
|
|||
|
|||
## ❗ Code de conduite |
|||
|
|||
Budibase s'engage à offrir à chacun une expérience accueillante, diversifiée et exempte de harcèlement. Nous attendons de tous les membres de la communauté Budibase qu'ils se conforment aux principes de notre [**Code de conduite**](https://github.com/Budibase/budibase/blob/HEAD/.github/CODE_OF_CONDUCT.md). Merci de le lire. |
|||
<br /> |
|||
|
|||
|
|||
<br /><br /> |
|||
|
|||
|
|||
## 🙌 Contribuer à Budibase |
|||
|
|||
Qu'il s'agisse d'ouvrir un rapport de bug ou de créer une Pull request, toute contribution est appréciée et bienvenue. Si vous envisagez de mettre en œuvre une nouvelle fonctionnalité ou de modifier l'API, veuillez d'abord créer un Issue. Nous pourrons ainsi nous assurer que votre travail n'est pas vain. |
|||
|
|||
### Vous ne savez pas par où commencer ? |
|||
Un bon endroit pour commencer à contribuer, c'est ici : [Projets en cours](https://github.com/Budibase/budibase/projects/22). |
|||
|
|||
### Comment le repo est-il organisé ? |
|||
Budibase est une monorepo gérée par lerna. Lerna gère la construction et la publication des paquets de Budibase. Voici, à un haut niveau, les paquets qui composent Budibase. |
|||
|
|||
- [packages/builder](https://github.com/Budibase/budibase/tree/HEAD/packages/builder) - contient le code pour l'application svelte côté client du budibase builder. |
|||
|
|||
- [packages/client](https://github.com/Budibase/budibase/tree/HEAD/packages/client) - Un module qui s'exécute dans le navigateur et qui est chargé de lire les définitions JSON et de créer des applications web vivantes à partir de celles-ci.. |
|||
|
|||
- [packages/server](https://github.com/Budibase/budibase/tree/HEAD/packages/server) - Le serveur budibase. Cette application Koa est responsable de servir le JS pour les applications builder et budibase, ainsi que de fournir l'API pour l'interaction avec la base de données et le système de fichiers. |
|||
|
|||
Pour plus d'informations, voir [CONTRIBUTING.md](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md) |
|||
|
|||
<br /><br /> |
|||
|
|||
|
|||
## 📝 Licence |
|||
|
|||
Budibase est open source, sous licence de [GPL v3](https://www.gnu.org/licenses/gpl-3.0.en.html). Les bibliothèques du client et des composants sont sous licence [MPL](https://directory.fsf.org/wiki/License:MPL-2.0) - afin que les applications que vous créez puissent être utilisées sous licence comme vous le souhaitez. |
|||
|
|||
<br /><br /> |
|||
|
|||
## ⭐ Stargazers dans le temps |
|||
|
|||
[](https://starchart.cc/Budibase/budibase) |
|||
|
|||
Si vous rencontrez des problèmes entre les mises à jour du builder, veuillez utiliser le guide suivant [ici](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md#troubleshooting) pour nettoyer votre environnement. |
|||
|
|||
<br /><br /> |
|||
|
|||
## Contributeurs ✨ |
|||
|
|||
Merci à ces personnes merveilleuses ([emoji key](https://allcontributors.org/docs/en/emoji-key)): |
|||
|
|||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> |
|||
<!-- prettier-ignore-start --> |
|||
<!-- markdownlint-disable --> |
|||
<table> |
|||
<tr> |
|||
<td align="center"><a href="http://martinmck.com"><img src="https://avatars1.githubusercontent.com/u/11256663?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Martin McKeaveney</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=shogunpurple" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=shogunpurple" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=shogunpurple" title="Tests">⚠️</a> <a href="#infra-shogunpurple" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> |
|||
<td align="center"><a href="http://www.michaeldrury.co.uk/"><img src="https://avatars2.githubusercontent.com/u/4407001?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michael Drury</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=mike12345567" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=mike12345567" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=mike12345567" title="Tests">⚠️</a> <a href="#infra-mike12345567" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> |
|||
<td align="center"><a href="https://github.com/aptkingston"><img src="https://avatars3.githubusercontent.com/u/9075550?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrew Kingston</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=aptkingston" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=aptkingston" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=aptkingston" title="Tests">⚠️</a> <a href="#design-aptkingston" title="Design">🎨</a></td> |
|||
<td align="center"><a href="https://budibase.com/"><img src="https://avatars3.githubusercontent.com/u/3524181?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michael Shanks</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=mjashanks" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=mjashanks" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=mjashanks" title="Tests">⚠️</a></td> |
|||
<td align="center"><a href="https://github.com/kevmodrome"><img src="https://avatars3.githubusercontent.com/u/534488?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kevin Åberg Kultalahti</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=kevmodrome" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=kevmodrome" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=kevmodrome" title="Tests">⚠️</a></td> |
|||
<td align="center"><a href="https://www.budibase.com/"><img src="https://avatars2.githubusercontent.com/u/49767913?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Joe</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=joebudi" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=joebudi" title="Code">💻</a> <a href="#content-joebudi" title="Content">🖋</a> <a href="#design-joebudi" title="Design">🎨</a></td> |
|||
<td align="center"><a href="https://github.com/Rory-Powell"><img src="https://avatars.githubusercontent.com/u/8755148?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rory Powell</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Tests">⚠️</a></td> |
|||
</tr> |
|||
<tr> |
|||
<td align="center"><a href="https://github.com/PClmnt"><img src="https://avatars.githubusercontent.com/u/5665926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Peter Clement</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=PClmnt" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=PClmnt" title="Documentation">📖</a> <a href="https://github.com/Budibase/budibase/commits?author=PClmnt" title="Tests">⚠️</a></td> |
|||
<td align="center"><a href="https://github.com/Conor-Mack"><img src="https://avatars1.githubusercontent.com/u/36074859?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Conor_Mack</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=Conor-Mack" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=Conor-Mack" title="Tests">⚠️</a></td> |
|||
<td align="center"><a href="https://github.com/pngwn"><img src="https://avatars1.githubusercontent.com/u/12937446?v=4?s=100" width="100px;" alt=""/><br /><sub><b>pngwn</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=pngwn" title="Code">💻</a> <a href="https://github.com/Budibase/budibase/commits?author=pngwn" title="Tests">⚠️</a></td> |
|||
<td align="center"><a href="https://github.com/HugoLd"><img src="https://avatars0.githubusercontent.com/u/26521848?v=4?s=100" width="100px;" alt=""/><br /><sub><b>HugoLd</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=HugoLd" title="Code">💻</a></td> |
|||
<td align="center"><a href="https://github.com/victoriasloan"><img src="https://avatars.githubusercontent.com/u/9913651?v=4?s=100" width="100px;" alt=""/><br /><sub><b>victoriasloan</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=victoriasloan" title="Code">💻</a></td> |
|||
<td align="center"><a href="https://github.com/yashank09"><img src="https://avatars.githubusercontent.com/u/37672190?v=4?s=100" width="100px;" alt=""/><br /><sub><b>yashank09</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=yashank09" title="Code">💻</a></td> |
|||
<td align="center"><a href="https://github.com/SOVLOOKUP"><img src="https://avatars.githubusercontent.com/u/53158137?v=4?s=100" width="100px;" alt=""/><br /><sub><b>SOVLOOKUP</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=SOVLOOKUP" title="Code">💻</a></td> |
|||
<td align="center"><a href="https://github.com/seoulaja"><img src="https://avatars.githubusercontent.com/u/15101654?v=4?s=100" width="100px;" alt=""/><br /><sub><b>seoulaja</b></sub></a><br /><a href="#translation-seoulaja" title="Translation">🌍</a></td> |
|||
<td align="center"><a href="https://github.com/mslourens"><img src="https://avatars.githubusercontent.com/u/1907152?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Maurits Lourens</b></sub></a><br /><a href="https://github.com/Budibase/budibase/commits?author=mslourens" title="Tests">⚠️</a> <a href="https://github.com/Budibase/budibase/commits?author=mslourens" title="Code">💻</a></td> |
|||
</tr> |
|||
<tr> |
|||
<td align="center"><a href="https://github.com/Rory-Powell"><img src="https://avatars.githubusercontent.com/u/8755148?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rory Powell</b></sub></a><br /><a href="#infra-Rory-Powell" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Tests">⚠️</a> <a href="https://github.com/Budibase/budibase/commits?author=Rory-Powell" title="Code">💻</a></td> |
|||
</tr> |
|||
</table> |
|||
|
|||
<!-- markdownlint-restore --> |
|||
<!-- prettier-ignore-end --> |
|||
|
|||
<!-- ALL-CONTRIBUTORS-LIST:END --> |
|||
|
|||
Ce projet suit la spécification [all-contributors](https://allcontributors.org/docs/fr/overview). Les contributions de toute nature sont les bienvenues ! |
|||
@ -0,0 +1,121 @@ |
|||
/** |
|||
* Gets the schema for a datasource which is targeting a JSON array, including |
|||
* nested JSON arrays. The returned schema is a squashed, table-like schema |
|||
* which is fully compatible with the rest of the platform. |
|||
* @param tableSchema the full schema for the table this JSON field is in |
|||
* @param datasource the datasource configuration |
|||
*/ |
|||
export const getJSONArrayDatasourceSchema = (tableSchema, datasource) => { |
|||
let jsonSchema = tableSchema |
|||
let keysToSchema = [] |
|||
|
|||
// If we are already deep inside a JSON field then we need to account
|
|||
// for the keys that brought us here, so we can get the schema for the
|
|||
// depth we're actually at
|
|||
if (datasource.prefixKeys) { |
|||
keysToSchema = datasource.prefixKeys.concat(["schema"]) |
|||
} |
|||
|
|||
// We parse the label of the datasource to work out where we are inside
|
|||
// the structure. We can use this to know which part of the schema
|
|||
// is available underneath our current position.
|
|||
keysToSchema = keysToSchema.concat(datasource.label.split(".").slice(2)) |
|||
|
|||
// Follow the JSON key path until we reach the schema for the level
|
|||
// we are at
|
|||
for (let i = 0; i < keysToSchema.length; i++) { |
|||
jsonSchema = jsonSchema?.[keysToSchema[i]] |
|||
if (jsonSchema?.schema) { |
|||
jsonSchema = jsonSchema.schema |
|||
} |
|||
} |
|||
|
|||
// We need to convert the JSON schema into a more typical looking table
|
|||
// schema so that it works with the rest of the platform
|
|||
return convertJSONSchemaToTableSchema(jsonSchema, { |
|||
squashObjects: true, |
|||
prefixKeys: keysToSchema, |
|||
}) |
|||
} |
|||
|
|||
/** |
|||
* Converts a JSON field schema (or sub-schema of a nested field) into a schema |
|||
* that looks like a typical table schema. |
|||
* @param jsonSchema the JSON field schema or sub-schema |
|||
* @param options |
|||
*/ |
|||
export const convertJSONSchemaToTableSchema = (jsonSchema, options) => { |
|||
if (!jsonSchema) { |
|||
return null |
|||
} |
|||
|
|||
// Add default options
|
|||
options = { squashObjects: false, prefixKeys: null, ...options } |
|||
|
|||
// Immediately strip the wrapper schema for objects, or wrap shallow values in
|
|||
// a fake "value" schema
|
|||
if (jsonSchema.schema) { |
|||
jsonSchema = jsonSchema.schema |
|||
} else { |
|||
jsonSchema = { |
|||
value: jsonSchema, |
|||
} |
|||
} |
|||
|
|||
// Extract all deep keys from the schema
|
|||
const keys = extractJSONSchemaKeys(jsonSchema, options.squashObjects) |
|||
|
|||
// Form a full schema from all the deep schema keys
|
|||
let schema = {} |
|||
keys.forEach(({ key, type }) => { |
|||
schema[key] = { type, name: key, prefixKeys: options.prefixKeys } |
|||
}) |
|||
return schema |
|||
} |
|||
|
|||
/** |
|||
* Recursively builds paths to all leaf fields in a JSON field schema structure, |
|||
* stopping when leaf nodes or arrays are reached. |
|||
* @param jsonSchema the JSON field schema or sub-schema |
|||
* @param squashObjects whether to recurse into objects or not |
|||
*/ |
|||
const extractJSONSchemaKeys = (jsonSchema, squashObjects = false) => { |
|||
if (!jsonSchema || !Object.keys(jsonSchema).length) { |
|||
return [] |
|||
} |
|||
|
|||
// Iterate through every schema key
|
|||
let keys = [] |
|||
Object.keys(jsonSchema).forEach(key => { |
|||
const type = jsonSchema[key].type |
|||
|
|||
// If we encounter an object, then only go deeper if we want to squash
|
|||
// object paths
|
|||
if (type === "json" && squashObjects) { |
|||
// Find all keys within this objects schema
|
|||
const childKeys = extractJSONSchemaKeys( |
|||
jsonSchema[key].schema, |
|||
squashObjects |
|||
) |
|||
|
|||
// Append child paths onto the current path to build the full path
|
|||
keys = keys.concat( |
|||
childKeys.map(childKey => ({ |
|||
key: `${key}.${childKey.key}`, |
|||
type: childKey.type, |
|||
})) |
|||
) |
|||
} |
|||
|
|||
// Otherwise add this as a lead node.
|
|||
// We transform array types from "array" into "jsonarray" here to avoid
|
|||
// confusion with the existing "array" type that represents a multi-select.
|
|||
else { |
|||
keys.push({ |
|||
key, |
|||
type: type === "array" ? "jsonarray" : type, |
|||
}) |
|||
} |
|||
}) |
|||
return keys |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
import { FIELDS } from "constants/backend" |
|||
|
|||
function baseConversion(type) { |
|||
if (type === "string") { |
|||
return { |
|||
type: FIELDS.STRING.type, |
|||
} |
|||
} else if (type === "boolean") { |
|||
return { |
|||
type: FIELDS.BOOLEAN.type, |
|||
} |
|||
} else if (type === "number") { |
|||
return { |
|||
type: FIELDS.NUMBER.type, |
|||
} |
|||
} |
|||
} |
|||
|
|||
function recurse(schemaLevel = {}, objectLevel) { |
|||
if (!objectLevel) { |
|||
return null |
|||
} |
|||
const baseType = typeof objectLevel |
|||
if (baseType !== "object") { |
|||
return baseConversion(baseType) |
|||
} |
|||
for (let [key, value] of Object.entries(objectLevel)) { |
|||
const type = typeof value |
|||
// check array first, since arrays are objects
|
|||
if (Array.isArray(value)) { |
|||
const schema = recurse(schemaLevel[key], value[0]) |
|||
if (schema) { |
|||
schemaLevel[key] = { |
|||
type: FIELDS.ARRAY.type, |
|||
schema, |
|||
} |
|||
} |
|||
} else if (type === "object") { |
|||
const schema = recurse(schemaLevel[key], objectLevel[key]) |
|||
if (schema) { |
|||
schemaLevel[key] = schema |
|||
} |
|||
} else { |
|||
schemaLevel[key] = baseConversion(type) |
|||
} |
|||
} |
|||
if (!schemaLevel.type) { |
|||
return { type: FIELDS.JSON.type, schema: schemaLevel } |
|||
} else { |
|||
return schemaLevel |
|||
} |
|||
} |
|||
|
|||
export function generate(object) { |
|||
return recurse({}, object).schema |
|||
} |
|||
@ -0,0 +1,129 @@ |
|||
<script> |
|||
import Editor from "components/integration/QueryEditor.svelte" |
|||
import { |
|||
ModalContent, |
|||
Tabs, |
|||
Tab, |
|||
Button, |
|||
Input, |
|||
Select, |
|||
Body, |
|||
Layout, |
|||
} from "@budibase/bbui" |
|||
import { onMount, createEventDispatcher } from "svelte" |
|||
import { FIELDS } from "constants/backend" |
|||
import { generate } from "builderStore/schemaGenerator" |
|||
|
|||
export let schema = {} |
|||
export let json |
|||
|
|||
let dispatcher = createEventDispatcher() |
|||
let mode = "Form" |
|||
let fieldCount = 0 |
|||
let fieldKeys = {}, |
|||
fieldTypes = {} |
|||
let keyValueOptions = [ |
|||
{ label: "String", value: FIELDS.STRING.type }, |
|||
{ label: "Number", value: FIELDS.NUMBER.type }, |
|||
{ label: "Boolean", value: FIELDS.BOOLEAN.type }, |
|||
{ label: "Object", value: FIELDS.JSON.type }, |
|||
{ label: "Array", value: FIELDS.ARRAY.type }, |
|||
] |
|||
let invalid = false |
|||
|
|||
async function onJsonUpdate({ detail }) { |
|||
const input = detail.value |
|||
json = input |
|||
try { |
|||
// check json valid first |
|||
let inputJson = JSON.parse(input) |
|||
schema = generate(inputJson) |
|||
updateCounts() |
|||
invalid = false |
|||
} catch (err) { |
|||
// json not currently valid |
|||
invalid = true |
|||
} |
|||
} |
|||
|
|||
function updateCounts() { |
|||
if (!schema) { |
|||
schema = {} |
|||
} |
|||
let i = 0 |
|||
for (let [key, value] of Object.entries(schema)) { |
|||
fieldKeys[i] = key |
|||
fieldTypes[i] = value.type |
|||
i++ |
|||
} |
|||
fieldCount = i |
|||
} |
|||
|
|||
function saveSchema() { |
|||
for (let i of Object.keys(fieldKeys)) { |
|||
const key = fieldKeys[i] |
|||
// they were added to schema, rather than generated |
|||
if (!schema[key]) { |
|||
schema[key] = { |
|||
type: fieldTypes[i], |
|||
} |
|||
} |
|||
} |
|||
|
|||
dispatcher("save", { schema, json }) |
|||
} |
|||
|
|||
onMount(() => { |
|||
updateCounts() |
|||
}) |
|||
</script> |
|||
|
|||
<ModalContent |
|||
title={"JSON Schema Editor"} |
|||
confirmText="Save Column" |
|||
onConfirm={saveSchema} |
|||
bind:disabled={invalid} |
|||
size="L" |
|||
> |
|||
<Tabs selected={mode} noPadding> |
|||
<Tab title="Form"> |
|||
{#each Array(fieldCount) as _, i} |
|||
<div class="horizontal"> |
|||
<Input outline label="Key" bind:value={fieldKeys[i]} /> |
|||
<Select |
|||
label="Type" |
|||
options={keyValueOptions} |
|||
bind:value={fieldTypes[i]} |
|||
getOptionValue={field => field.value} |
|||
getOptionLabel={field => field.label} |
|||
/> |
|||
</div> |
|||
{/each} |
|||
<div class:add-field-btn={fieldCount !== 0}> |
|||
<Button primary text on:click={() => fieldCount++}>Add Field</Button> |
|||
</div> |
|||
</Tab> |
|||
<Tab title="JSON"> |
|||
<Layout noPadding gap="XS"> |
|||
<Body size="S"> |
|||
Provide a sample JSON blob here to automatically determine your |
|||
schema. |
|||
</Body> |
|||
<Editor mode="json" on:change={onJsonUpdate} value={json} /> |
|||
</Layout> |
|||
</Tab> |
|||
</Tabs> |
|||
</ModalContent> |
|||
|
|||
<style> |
|||
.horizontal { |
|||
display: grid; |
|||
grid-template-columns: 30% 1fr; |
|||
grid-gap: var(--spacing-s); |
|||
align-items: center; |
|||
} |
|||
|
|||
.add-field-btn { |
|||
margin-top: var(--spacing-xl); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,152 @@ |
|||
<script> |
|||
import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui" |
|||
import { store, currentAsset } from "builderStore" |
|||
import { tables } from "stores/backend" |
|||
import { |
|||
getContextProviderComponents, |
|||
getSchemaForDatasource, |
|||
} from "builderStore/dataBinding" |
|||
import SaveFields from "./SaveFields.svelte" |
|||
|
|||
export let parameters |
|||
export let bindings = [] |
|||
|
|||
$: formComponents = getContextProviderComponents( |
|||
$currentAsset, |
|||
$store.selectedComponentId, |
|||
"form" |
|||
) |
|||
$: schemaComponents = getContextProviderComponents( |
|||
$currentAsset, |
|||
$store.selectedComponentId, |
|||
"schema" |
|||
) |
|||
$: providerOptions = getProviderOptions(formComponents, schemaComponents) |
|||
$: schemaFields = getSchemaFields($currentAsset, parameters?.tableId) |
|||
$: tableOptions = $tables.list || [] |
|||
|
|||
// Gets a context definition of a certain type from a component definition |
|||
const extractComponentContext = (component, contextType) => { |
|||
const def = store.actions.components.getDefinition(component?._component) |
|||
if (!def) { |
|||
return null |
|||
} |
|||
const contexts = Array.isArray(def.context) ? def.context : [def.context] |
|||
return contexts.find(context => context?.type === contextType) |
|||
} |
|||
|
|||
// Gets options for valid context keys which provide valid data to submit |
|||
const getProviderOptions = (formComponents, schemaComponents) => { |
|||
const formContexts = formComponents.map(component => ({ |
|||
component, |
|||
context: extractComponentContext(component, "form"), |
|||
})) |
|||
const schemaContexts = schemaComponents.map(component => ({ |
|||
component, |
|||
context: extractComponentContext(component, "schema"), |
|||
})) |
|||
const allContexts = formContexts.concat(schemaContexts) |
|||
|
|||
return allContexts.map(({ component, context }) => { |
|||
let runtimeBinding = component._id |
|||
if (context.suffix) { |
|||
runtimeBinding += `-${context.suffix}` |
|||
} |
|||
return { |
|||
label: component._instanceName, |
|||
value: runtimeBinding, |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const getSchemaFields = (asset, tableId) => { |
|||
const { schema } = getSchemaForDatasource(asset, { type: "table", tableId }) |
|||
delete schema._id |
|||
delete schema._rev |
|||
return Object.values(schema || {}) |
|||
} |
|||
|
|||
const onFieldsChanged = e => { |
|||
parameters.fields = e.detail |
|||
} |
|||
</script> |
|||
|
|||
<div class="root"> |
|||
<Body size="S"> |
|||
Choose the data source that provides the row you would like to duplicate. |
|||
<br /> |
|||
You can always add or override fields manually. |
|||
</Body> |
|||
|
|||
<div class="params"> |
|||
<Label small>Data Source</Label> |
|||
<Select |
|||
bind:value={parameters.providerId} |
|||
options={providerOptions} |
|||
placeholder="None" |
|||
/> |
|||
|
|||
<Label small>Duplicate to Table</Label> |
|||
<Select |
|||
bind:value={parameters.tableId} |
|||
options={tableOptions} |
|||
getOptionLabel={option => option.name} |
|||
getOptionValue={option => option._id} |
|||
/> |
|||
|
|||
<Label small /> |
|||
<Checkbox text="Require confirmation" bind:value={parameters.confirm} /> |
|||
|
|||
{#if parameters.confirm} |
|||
<Label small>Confirm text</Label> |
|||
<Input |
|||
placeholder="Are you sure you want to duplicate this row?" |
|||
bind:value={parameters.confirmText} |
|||
/> |
|||
{/if} |
|||
</div> |
|||
|
|||
{#if parameters.tableId} |
|||
<div class="fields"> |
|||
<SaveFields |
|||
parameterFields={parameters.fields} |
|||
{schemaFields} |
|||
on:change={onFieldsChanged} |
|||
{bindings} |
|||
/> |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
|
|||
<style> |
|||
.root { |
|||
width: 100%; |
|||
max-width: 800px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
gap: var(--spacing-xl); |
|||
} |
|||
|
|||
.root :global(p) { |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.params { |
|||
display: grid; |
|||
column-gap: var(--spacing-l); |
|||
row-gap: var(--spacing-s); |
|||
grid-template-columns: 100px 1fr; |
|||
align-items: center; |
|||
} |
|||
|
|||
.fields { |
|||
display: grid; |
|||
column-gap: var(--spacing-l); |
|||
row-gap: var(--spacing-s); |
|||
grid-template-columns: 100px 1fr auto 1fr auto; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,13 @@ |
|||
export { default as NavigateTo } from "./NavigateTo.svelte" |
|||
export { default as SaveRow } from "./SaveRow.svelte" |
|||
export { default as DeleteRow } from "./DeleteRow.svelte" |
|||
export { default as ExecuteQuery } from "./ExecuteQuery.svelte" |
|||
export { default as TriggerAutomation } from "./TriggerAutomation.svelte" |
|||
export { default as ValidateForm } from "./ValidateForm.svelte" |
|||
export { default as LogOut } from "./LogOut.svelte" |
|||
export { default as ClearForm } from "./ClearForm.svelte" |
|||
export { default as CloseScreenModal } from "./CloseScreenModal.svelte" |
|||
export { default as ChangeFormStep } from "./ChangeFormStep.svelte" |
|||
export { default as UpdateState } from "./UpdateState.svelte" |
|||
export { default as RefreshDataProvider } from "./RefreshDataProvider.svelte" |
|||
export { default as DuplicateRow } from "./DuplicateRow.svelte" |
|||
@ -0,0 +1,33 @@ |
|||
import * as ActionComponents from "./actions" |
|||
import { get } from "svelte/store" |
|||
import { store } from "builderStore" |
|||
import ActionDefinitions from "./manifest.json" |
|||
|
|||
// Defines which actions are available to configure in the front end.
|
|||
// Unfortunately the "name" property is used as the identifier so please don't
|
|||
// change them.
|
|||
// The client library removes any spaces when processing actions, so they can
|
|||
// be considered as camel case too.
|
|||
// There is technical debt here to sanitize all these and standardise them
|
|||
// across the packages but it's a breaking change to existing apps.
|
|||
export const getAvailableActions = (getAllActions = false) => { |
|||
return ActionDefinitions.actions |
|||
.filter(action => { |
|||
// Filter down actions to those supported by the current client lib version
|
|||
if (getAllActions || !action.dependsOnFeature) { |
|||
return true |
|||
} |
|||
return get(store).clientFeatures?.[action.dependsOnFeature] === true |
|||
}) |
|||
.map(action => { |
|||
// Then enrich the actions with real components
|
|||
return { |
|||
...action, |
|||
component: ActionComponents[action.component], |
|||
} |
|||
}) |
|||
.filter(action => { |
|||
// Then strip any old actions for which we don't have constructors
|
|||
return action.component != null |
|||
}) |
|||
} |
|||
@ -0,0 +1,75 @@ |
|||
{ |
|||
"actions": [ |
|||
{ |
|||
"name": "Save Row", |
|||
"component": "SaveRow", |
|||
"context": [ |
|||
{ |
|||
"label": "Saved row", |
|||
"value": "row" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"name": "Duplicate Row", |
|||
"component": "DuplicateRow", |
|||
"context": [ |
|||
{ |
|||
"label": "Duplicated row", |
|||
"value": "row" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"name": "Delete Row", |
|||
"component": "DeleteRow" |
|||
}, |
|||
{ |
|||
"name": "Navigate To", |
|||
"component": "NavigateTo" |
|||
}, |
|||
{ |
|||
"name": "Execute Query", |
|||
"component": "ExecuteQuery", |
|||
"context": [ |
|||
{ |
|||
"label": "Query result", |
|||
"value": "result" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"name": "Trigger Automation", |
|||
"component": "TriggerAutomation" |
|||
}, |
|||
{ |
|||
"name": "Validate Form", |
|||
"component": "ValidateForm" |
|||
}, |
|||
{ |
|||
"name": "Log Out", |
|||
"component": "LogOut" |
|||
}, |
|||
{ |
|||
"name": "Clear Form", |
|||
"component": "ClearForm" |
|||
}, |
|||
{ |
|||
"name": "Close Screen Modal", |
|||
"component": "CloseScreenModal" |
|||
}, |
|||
{ |
|||
"name": "Change Form Step", |
|||
"component": "ChangeFormStep" |
|||
}, |
|||
{ |
|||
"name": "Refresh Data Provider", |
|||
"component": "RefreshDataProvider" |
|||
}, |
|||
{ |
|||
"name": "Update State", |
|||
"component": "UpdateState", |
|||
"dependsOnFeature": "state" |
|||
} |
|||
] |
|||
} |
|||
@ -1,80 +0,0 @@ |
|||
import { store } from "builderStore" |
|||
import { get } from "svelte/store" |
|||
|
|||
import NavigateTo from "./NavigateTo.svelte" |
|||
import SaveRow from "./SaveRow.svelte" |
|||
import DeleteRow from "./DeleteRow.svelte" |
|||
import ExecuteQuery from "./ExecuteQuery.svelte" |
|||
import TriggerAutomation from "./TriggerAutomation.svelte" |
|||
import ValidateForm from "./ValidateForm.svelte" |
|||
import LogOut from "./LogOut.svelte" |
|||
import ClearForm from "./ClearForm.svelte" |
|||
import CloseScreenModal from "./CloseScreenModal.svelte" |
|||
import ChangeFormStep from "./ChangeFormStep.svelte" |
|||
import UpdateStateStep from "./UpdateState.svelte" |
|||
import RefreshDataProvider from "./RefreshDataProvider.svelte" |
|||
|
|||
// Defines which actions are available to configure in the front end.
|
|||
// Unfortunately the "name" property is used as the identifier so please don't
|
|||
// change them.
|
|||
// The client library removes any spaces when processing actions, so they can
|
|||
// be considered as camel case too.
|
|||
// There is technical debt here to sanitize all these and standardise them
|
|||
// across the packages but it's a breaking change to existing apps.
|
|||
export const getAvailableActions = () => { |
|||
let actions = [ |
|||
{ |
|||
name: "Save Row", |
|||
component: SaveRow, |
|||
}, |
|||
{ |
|||
name: "Delete Row", |
|||
component: DeleteRow, |
|||
}, |
|||
{ |
|||
name: "Navigate To", |
|||
component: NavigateTo, |
|||
}, |
|||
{ |
|||
name: "Execute Query", |
|||
component: ExecuteQuery, |
|||
}, |
|||
{ |
|||
name: "Trigger Automation", |
|||
component: TriggerAutomation, |
|||
}, |
|||
{ |
|||
name: "Validate Form", |
|||
component: ValidateForm, |
|||
}, |
|||
{ |
|||
name: "Log Out", |
|||
component: LogOut, |
|||
}, |
|||
{ |
|||
name: "Clear Form", |
|||
component: ClearForm, |
|||
}, |
|||
{ |
|||
name: "Close Screen Modal", |
|||
component: CloseScreenModal, |
|||
}, |
|||
{ |
|||
name: "Change Form Step", |
|||
component: ChangeFormStep, |
|||
}, |
|||
{ |
|||
name: "Refresh Data Provider", |
|||
component: RefreshDataProvider, |
|||
}, |
|||
] |
|||
|
|||
if (get(store).clientFeatures?.state) { |
|||
actions.push({ |
|||
name: "Update State", |
|||
component: UpdateStateStep, |
|||
}) |
|||
} |
|||
|
|||
return actions |
|||
} |
|||
@ -1,2 +0,0 @@ |
|||
import EventsEditor from "./EventPropertyControl.svelte" |
|||
export default EventsEditor |
|||
@ -0,0 +1,59 @@ |
|||
<script> |
|||
import "@spectrum-css/tag/dist/index-vars.css" |
|||
import { ClearButton } from "@budibase/bbui" |
|||
import { getContext } from "svelte" |
|||
|
|||
export let onClick |
|||
export let text = "" |
|||
export let color |
|||
export let closable = false |
|||
export let size = "M" |
|||
|
|||
const component = getContext("component") |
|||
const { styleable, builderStore } = getContext("sdk") |
|||
|
|||
// Add color styles to main styles object, otherwise the styleable helper |
|||
// overrides the color when it's passed as inline style. |
|||
$: styles = enrichStyles($component.styles, color) |
|||
$: componentText = getComponentText(text, $builderStore, $component) |
|||
|
|||
const getComponentText = (text, builderState, componentState) => { |
|||
if (!builderState.inBuilder || componentState.editing) { |
|||
return text || " " |
|||
} |
|||
return text || componentState.name || "Placeholder text" |
|||
} |
|||
|
|||
const enrichStyles = (styles, color) => { |
|||
if (!color) { |
|||
return styles |
|||
} |
|||
return { |
|||
...styles, |
|||
normal: { |
|||
...styles?.normal, |
|||
"background-color": color, |
|||
"border-color": color, |
|||
color: "white", |
|||
"--spectrum-clearbutton-medium-icon-color": "white", |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<div class="spectrum-Tag spectrum-Tag--size{size}" use:styleable={styles}> |
|||
<span class="spectrum-Tag-label">{componentText}</span> |
|||
{#if closable} |
|||
<ClearButton on:click={onClick} /> |
|||
{/if} |
|||
</div> |
|||
|
|||
<style> |
|||
.spectrum-Tag--sizeS, |
|||
.spectrum-Tag--sizeM { |
|||
padding: 0 var(--spectrum-global-dimension-size-100); |
|||
} |
|||
.spectrum-Tag--sizeL { |
|||
padding: 0 var(--spectrum-global-dimension-size-150); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,71 @@ |
|||
<script> |
|||
import { CoreTextArea } from "@budibase/bbui" |
|||
import Field from "./Field.svelte" |
|||
import { getContext } from "svelte" |
|||
|
|||
export let field |
|||
export let label |
|||
export let placeholder |
|||
export let disabled = false |
|||
export let defaultValue = "" |
|||
|
|||
const component = getContext("component") |
|||
const validation = [ |
|||
{ |
|||
constraint: "json", |
|||
type: "json", |
|||
error: "JSON syntax is invalid", |
|||
}, |
|||
] |
|||
let fieldState |
|||
let fieldApi |
|||
|
|||
$: height = $component.styles?.normal?.height || "124px" |
|||
|
|||
const serialiseValue = value => { |
|||
return JSON.stringify(value || undefined, null, 4) || "" |
|||
} |
|||
|
|||
const parseValue = value => { |
|||
try { |
|||
return JSON.parse(value) |
|||
} catch (error) { |
|||
return value |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<Field |
|||
{label} |
|||
{field} |
|||
{disabled} |
|||
{validation} |
|||
{defaultValue} |
|||
type="json" |
|||
bind:fieldState |
|||
bind:fieldApi |
|||
> |
|||
{#if fieldState} |
|||
<div style="--height: {height};"> |
|||
<CoreTextArea |
|||
value={serialiseValue(fieldState.value)} |
|||
on:change={e => fieldApi.setValue(parseValue(e.detail))} |
|||
disabled={fieldState.disabled} |
|||
error={fieldState.error} |
|||
id={fieldState.fieldId} |
|||
{placeholder} |
|||
/> |
|||
</div> |
|||
{/if} |
|||
</Field> |
|||
|
|||
<style> |
|||
:global(.spectrum-Form-itemField .spectrum-Textfield--multiline) { |
|||
min-height: calc(var(--height) - 24px); |
|||
} |
|||
:global(.spectrum-Form--labelsAbove |
|||
.spectrum-Form-itemField |
|||
.spectrum-Textfield--multiline) { |
|||
min-height: calc(var(--height) - 24px); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue