core-ui
Core-ui est une librairie javascript permettant d'intégrer l'api plugandwork à une application javascript sur les environnements browser ou node
Pour commencer, configurez le client
import { Client } from "@plugandwork/core-ui";
const coreUiClient = new Client({ host: "https://rec.plugandwork.fr" })Une fois le client créé, ce dernier met à disposition des outils séparés en plusieurs objets : utils, lib et models.
utils
const { utils } = coreUiClient;
const { axios, authmanager, cable, useSettings, ReactEntry, connectModel, ContextualizedComponent, createModelStore, privateGuard, publicGuard } = utils;utils.axios
https://github.com/axios/axios
utils.authmanager
https://github.com/pierrecabriere/rxjs-auth
utils.cable
https://github.com/rails/rails/tree/main/actioncable
const {
getClient,
syncUsersAll,
unsyncUsersAll,
syncUsersPrivate,
unsyncUsersPrivate,
} = coreUiClient.utils.cable;utils.cable.getClient
utils.cable.syncUsersAll
utils.cable.unsyncUsersAll
utils.cable.syncUsersPrivate
utils.cable.unsyncUsersPrivate
utils.useSettings
useSettings est un hook React qui permet d'enregistrer des données dans les paramètres de l'utilisateur, avec le même fonctionnement que React.useState.
useSettings utilise rxjs pour fonctionner.
function ReactComponent() {
const [setting, setSetting] = utils.useSettings("keySetting", "defaultValue");
return <input type="text" value={setting} onChange={e => setSetting(e.currentTarget.value)} />
}utils.ReactEntry
Composant React qui prend une app plugandwork (lib.PlugandworkApp) en prop pour l'afficher en simulant un contexte de core/frontend
utils.connectModel
lib
const { lib } = coreUiClient;
const { PlugandworkModel, PlugandworkApp, SettingsField, PlugandworkList } = utils;lib.PlugandworkModel
class CustomDocModel extends lib.PlugandworkModel {
static apiType = "docs";
ping() {
console.log("pong", this.id);
}
}
CustomDocModel.get("the_document_id", true).then((doc) => doc.ping());lib.PlugandworkApp
lib.SettingsField
lib.PlugandworkList
models
const { models } = coreUiClient;
const { App, Bloc, Context, Doc, Folder, Group, Space, User, Batch, Dataset, View, Notification, Favorite, Message, Task } = models;models.App
models.Bloc
models.Context
models.Doc
Upload a file in a new document
// or get a file with a html input (type file)
const file = new File([buffer], "toto.txt");
const doc = await models.Doc.create({ file });