Представлення

інформація

Представлення призначені для створення графічних компонентів опису бізнес-логіки предметної області. Представлення використовують UI бібліотеки для опису графічної складової та опис контролерів, продюсерів та ін., документів опису бізнес-логіки.

Предметна область може мати як одне так і групу представлень, кожне з яких описує свій формат подачі даних та функціонал по роботі з ними.

Архітектура

Першочергово документ або група документів "Представлення" повинні бути зареєстровані в точці входу предметної області в відповідальному сервісі. Представлення в подальшому, можуть бути використані в відповідних сторінках графічного інтерфейсу.

При запуску програми веб-клієнта відбувається завантаження бізнес-схеми в ядро відображень формулюючи знімок бізнес-схеми. Після чого відбувається візуалізація сторінки запиту. Якщо на сторінці запиту наявні представлення - функції по їх візуалізації будуть виконані з включенням виконання похідних функцій - контролерів, продюсерів, функцій сховищ тощо.

інформація

Кожне представлення має властивості props, через які можуть передаватись будь-які параметри від батьківського до дочірнього компонента. При потребі створити реактивність між різними представленнями в різних деревах структури - використовуйте сховища предметних областей цих представлень.

Склад

import type {ReactElement} from 'react'

type Context = {
    // ... context structure
};

type Agents = {
    // ... list of agents
};

type ViewHandler<P> = (
    agents: Agents,
    context: Context,
    props: P
) => ReactElement<P>

type ViewStructure<N extends string, P = any> = {
    name: N,
    view: ViewHandler<P>
}

const setView = <N extends string = string, P = any>(
    name: N,
    view: ViewHandler<P>
): ViewStructure<N, P> => {
    return {name, view};
};

де:

• Типи:
  • Context - контекст виконання представлення, залежить від типу приватизації.
  • Agents - перелік агентів бізнес-схеми, які надають можливість створювати функціональність.
  • ViewHandler - функція опису функціонального компоненту React.
    • P - тип структури властивостей представлення, які за замовчуванням undefined, та передаються третім аргументом.
  • ViewStructure - структура одного представлення.
    • N - тип назви представлення строкового типу, рекомендується передавати строковий обʼєднаний тип назв всіх представлень предметної області.
    • P - тип структури властивостей представлення, які за замовчуванням undefined, та передаються третім аргументом.
• Аргументи:
  • name - назва представлення, яка дорівнює N з типу ViewStructure.
  • view - функціональний компонент React.
• Результат:
  • Функція яка повертає назву представлення та опис функціонального компонента.

Реалізація

import {setView} from "@x-fiber/display";
import styles from "./signup-form.module.scss";

type Views = 'SignupForm' | 'LoginForm' | 'ResetPasswordForm';
type AppServices = 'BusinessAdmin' | 'SystemAdmin';
type BusDomains = 'BusUsersAgg' | 'BusUsersAuthSpec' | 'BusUsersLog';
type SignupFormProps = {
    className?: string
}

export const BusUsersAggSignupFormView = setView<Views, SignupFormProps>(
    'SignupForm',
    (agents: Agents, context: Context, props: SignupFormProps) => {
        const {getStore} = agents.schemaAgent;

        const store = getStore<AppServices, BusDomains>(
            "BusinessAdmin",
            "BusUsersAgg"
        )();

        return (
            <section className={styles.wrapper}>
                // signup form ...
            </section>
        );
    }
);

де:

• Типи:
  • Views - перелік представлень конкретної предметної області.
  • AppServices - перелік сервісів.
  • BusDomains - перелік предметних областей сервісу.
  • SignupFormProps - перелік властивостей, які може приймати представлення.
• Структури:
  • BusUsersAggSignupFormView - структура представлення.
    • SignupForm - назва представлення.
    • getStore - виклик сховища предметної області.
    • <section className={styles.wrapper}>... - html структура графічного компонента.

Реєстрація

Для використання графічних представлень предметної області необхідно зареєструвати документ "Представлення" в точці входу в предметну область pointer. Наприклад, для модуля BusUsersAgg, необхідно використовувати функцію setPointer для створення опису точки входу, та зареєструвати в цій структурі документ "Представлення".

1. Випадок з одним представленням:

import {setPointer} from "@x-fiber/display";
import {BusUsersAggUserListView} from "./BusUsers.agg.user-list.view.ts";

type BusDomains = 'BusUsersAgg' | 'BusUsersAuthSpec'


export const BusUsersAggPointer = setPointer<BusDomains>("BusUsersAgg", {
    views: BusUsersAggUserListView,
    // ... other documents
});

2. Випадок групи представлень:

import {setPointer} from "@x-fiber/display";
import {BusUsersAggUserListView} from "./BusUsers.agg.user-list.view.ts";
import {BusUsersAggBlockFormView} from "./BusUsers.agg.block-form.view.ts";
import {BusUsersAggRenewListView} from "./BusUsers.agg.renew-form.view.ts";


type BusDomains = 'BusUsersAgg' | 'BusUsersAuthSpec'

export const BusUsersAggPointer = setPointer<BusDomains>("BusUsersAgg", {
    views: [
        BusUsersAggUserListView,
        BusUsersAggBlockFormView,
        BusUsersAggRenewListView
    ],
    // ... other documents
});

Використання

Використання може бути здійснене тільки після реалізації та реєстрації відповідного представлення в відповідній предметній області.

Шаблон сторінки

//* common.layout.tsx */
import type {ReactNode} from 'react'

type CommonLayoutProps = {
    content: ReactNode
    // ... layout props structure
}

export const CommonLayout = (props: CommonLayoutProps) => {
    return (
        <section className={styles.layout}>
            <Header className={styles.header}/>
            <section className={styles.navbar}>Navbar</section>
            <section className={styles.content}>{props.content}</section>
            <section className={styles.footer}>Footer</section>
        </section>
    )
}

де:

• CommonLayoutProps - тип структури властивостей шаблону
• CommonLayout - структура шаблону сторінки.
  • section - одна секція шаблону.

Сторінка з використанням представлення

//* page.tsx */
import React from "react";
import { View } from "@x-fiber/display";
import { CommonLayout } from "~layouts/common.layout";

type Views = 'SignupForm' | 'LoginForm' | 'ResetPasswordForm';
type AppServices = 'BusinessAdmin' | 'SystemAdmin';
type BusDomains = 'BusUsersAgg' | 'BusUsersAuthSpec' | 'BusUsersLog';

export default function Page() {
  return (
    <CommonLayout
      content={
        <>
          <View<AppServices, BusDomains, Views>
            service={"BusinessAdmin"}
            domain={"BusUsersAgg"}
            view="SignupForm"
          />
          <View<AppServices, BusDomains, Views>
            service={"BusinessAdmin"}
            domain={"BusUsersAgg"}
            view="ResetPasswordForm"
          />
        </>
      }
    />
  );
}

де:

• Типи:
  • Views - перелік представлень конкретної предметної області.
  • AppServices - перелік сервісів.
  • BusDomains - перелік предметних областей сервісу.
• Структури:
  • CommonLayout - шаблон сторінки.
  • content - вміст шаблону сторінки, який складається з двох представлень.
  • View - зарезервований компонент ядра відображень, який надає представлення предметних областей.