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 });

models.Folder

models.Group

models.Space

models.User

models.Batch

models.Dataset

models.View

models.Notification

models.Favorite

models.Message

models.Task