Case Variables Tab
Tento dokument popisuje vlastnosti a očekávané chování komponent `CaseVariablesTab`. Komponenta je navržena pro zobrazení a přizpůsobení rozhraní v systému správy případů.
CaseVariablesTabProps
Typ `CaseVariablesTabProps` specifikuje hlavní vlastnosti použité pro vykreslení sekce proměnných případů. Níže jsou uvedeny vlastnosti a jejich popis:
Vlastnost | Typ | Default | Popis |
rows | Array<Cell[][]> | Každý řádek je dvourozměrné pole objektů Cell. | |
titleLabel | string | Název sekce caseVarialbesTab | |
data | Object | Nepovinná data, která mají být zobrazena nebo použita v rámci casevariable tab. Data v buňce se zobrazují na základě Cell field | |
titleIcon | Icon | Nepovinná ikona pro zobrazení v záhlaví nebo názvu záložky. | |
hideTabWhen | boolean | false | Příznak pro podmíněné skrytí CaseVariablesTab, pokud je nastaven na `true`. |
userLang | string | cs | Jazyková mutace pro komponentu (není mutace pro jednotlivé bunky). Pokud props není nastavena, bere jazykovou mutaci uživatele nastavenou v Tasu. |
dateFormat | | 'dd.MM.yyyy' | 'd.M.yyyy' | 'dd/MM/yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd'; | Nastavení formátu data pro cell type='date'. Ručně nastevený formát. Pokud props není nastavena, bere se formát:
| |
isLoading | Boolean | Zobrazení loading state |
Cell
Typ `Cell` definuje vlastnosti a chování jednotlivých buněk v tabulkové struktuře.
Vlastnost | Typ | Default | Popis |
field | string | Jedinečný identifikátor pro buňku. Na základě identifikátoru se zobrazí data v buňce z props CaseVariablesTab data | |
type | "string" | "button" | "link" |"date" | string | Definuje typ buňky. Na základě typu buňky je rendrován základní design. Pro úpravu je možné použít props headerStyle valueStyle cellStyle Pro typ 'button' je možné nastavit další props buttonVariant buttonFullWidth buttonFn Pro typ 'link' je potřeba nastavit další props href |
headerName | (cell, data) => string | Funkce pro vykreslení názvu hlavičky. Zadejte vlastní hodnotu, hodnotu na základě buňky (cell), výběr hodnoty z předaných dat CaseVariablesTabProps data. | |
value | (cell, data) => string | number | Hodnota buňky. Zadejte vlastní hodnotu, použijte hodnotu (cell) na základě názvu field a props data, nebo vyberte z dat předané do CaseVariablesTabProps data. | |
size | { xs?: 1 | 2 | 3 | 4, sm?: 1 | 2 | 3 | 4, md?: 1 | 2 | 3 | 4, lg?: 1 | 2 | 3 | 4, xl?: 1 | 2 | 3 | 4 } | {xs: 1} | Objekt specifikující responzivní velikost buňky v různých breakpointech. xs=telefon, sm=telefon landscape, md=tablet, lg= desktop, xl=širokoúhlý monitor. CaseVariablesTab je vždy rozdělen na 4 sloupce, číslo pro jednotlivý breakpoint říká přes kolik sloupců má být buňka roztažen. Nemusím vyplňovat všechny breakpointy. Přístup mobilefirst -> pokud nastavím {xs:2} -> buňka bude přes dva sloupce pro všechny breakpointy, pokud nastavím {xs: 2, lg: 4} buňka bude do breakpointu lg přes 2 sloupce, od breakpointu lg přes 4 sloupce. |
tooltip | (cell, data) => string | Tooltip, který se zobrazí při najetí na iconu otazníku vedle hlavičky | |
headerStyle | (cell, data) => any | Vlastní styly pro hlavičku buňky (možnost použití všech css stylů) Možnost použití dat cell nebo data pro podmínkované stylování | |
valueStyle | (cell, data) => any | Vlastní styly pro hodnotu buňky (možnost použití všech css stylů) Možnost použití dat cell nebo data pro podmínkované stylování | |
cellStyle | (cell, data) => any | Vlastní styly pro celou buňky (možnost použití všech css stylů) Možnost použití dat cell nebo data pro podmínkované stylování | |
buttonVariant | "outlined" | "contained" | text | contained | Varianta tlačítka, pokud je buňka typu 'button' |
buttonFullWidth | boolean | false | Určuje, zda má tlačítko vyplnit celou šířku buňky, pokud je buňka typu 'button' |
buttonFn | () => void | Funkce zpětného volání, která se spustí při kliknutí na tlačítko. Pokud je buňka typu 'button' | |
href | string | Funkce vracející URL pro buňku, pokud je typu 'link' |
Příklad definice
import React, {useState, useEffect, useRef} from 'react'
const CaseVariablesTab = Require.sysComps.CaseVariablesTab
const CaseOverview = () => {
const [caseVariablesData, setCaseVariablesData] = useState({});
const isArchived = useRef(false);
useEffect(() => {
const fetchCaseData = async () => {
try {
// Fetch process details
const payloadProcess = await Api.request.get(`/processes/${caseId}`);
const { archived } = payloadProcess;
isArchived.current = archived;
// Fetch variables based on archive status
const variablesEndpoint = archived
? `/processes/archived/${caseId}/variables?limit=1000`
: `/processes/${caseId}/variables?limit=1000`;
const [variablesPayload, systemVariablesData] = await Promise.all([
Api.request.get(variablesEndpoint),
getSystemVariables(payloadProcess),
]);
// Process case variables
const items = variablesPayload?.items || [];
const caseVariables = items.reduce((acc, item) => {
acc[item.ivar_name] = item;
return acc;
}, {});
// Merge and set variables data
setCaseVariablesData({ ...caseVariables, ...systemVariablesData });
} catch (error) {
console.error('Error fetching case data:', error);
}
};
fetchCaseData();
}, [caseId]); // Depend on caseId if it may change
<CaseVariablesTab
title: 'smlouva',
titleIcon: 'documents',
data: caseVariablesData,
rows:[
[
{
field: 'contractTitle',
type: 'link',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
href: (value: any) => /contracts/,
size: { xs: 4, lg: 1, },
headerStyle: { color: 'green', },
cellStyle: { backgroundColor: 'orange', borderRadius: '8px', },
tooltip: 'This is a tooltip',
},
{
field: 'contractNumber',
type: 'link',
headerName: (value: any, data) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
href: (value: any) => /contracts/${value.ivar_value},
headerStyle: { color: 'red', },
size: { xs: 4, lg: 1, },
tooltip: "It is a long established fact that a reader will be
distracted by the readable content of a page when looking at its."
},
{ field: 'contractTitle',
type: 'button',
buttonVariant: 'contained',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
buttonFullWidth: true,
size: { xs: 2, lg: 1, },
},
{ field: 'Report-Case',
type: 'button',
headerName: () => 'My button outlined',
buttonVariant: 'outlined',
size: { xs: 2, lg: 1, },
},
],
[
{
field: 'requestor',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_lov_value,
size: { xs: 2, lg: 1, },
},
{
field: 'costCenter',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
{
field: 'myHeaderName',
headerName: () => 'My Header Name',
value: () => 'My Value',
size: { xs: 2, lg: 1, },
},
],
[
{ field: 'supplier',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
{ field: 'otherSuppliers',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
{
field: 'supplierReferenceNumber',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
{
field: 'multipleSuppliers',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
],
[
{
field: 'contractSubType',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => {
const result = _.find(value.ivar_lov_cs, { value: value.ivar_value });
return result ? result.title : ''; },
size: { xs: 2, lg: 1, },
},
{
field: 'confidentiality',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
{
field: 'contractSubject',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
],
[
{
field: 'contractValidity',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => {
const result = _.find(value.ivar_lov_cs, { value: value.ivar_value });
return result ? result.title : ''; },
size: { xs: 2, lg: 1, },
},
{
field: 'contractValidityFrom',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => formatReadableDate(value.ivar_value, 'cs-CZ'),
size: { xs: 2, lg: 1, },
},
{
field: 'contractValidityTo',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => formatReadableDate(value.ivar_value, 'cs-CZ'),
size: { xs: 2, lg: 1, },
},
{
field: 'sv_iproc_case_status',
headerName: (value: any) => value.ivar_name,
value: (value: any) => value.ivar_lov_cs[0].title,
valueStyle: { color: 'green', },
size: { xs: 2, lg: 1, },
},
],
],
/>
}
Data příklad
const data = {
contractTitle: {
ivar_name: 'contractTitle',
ivar_type: 'T',
ivar_filtered_list: null,
ivar_attribute: null,
ivar_value: 'IT support',
ivar_group: 'not implemented',
ivar_lov: [],
ivar_lov_value: null,
dlist_name: null,
ivar_multi: null,
ivar_dt_index: null,
ivar_col_index: null,
tvar_label: null,
tvar_tooltip: null,
tvar_id: 308,
tvar_name: 'contractTitle',
tvar_meta: null,
tvar_date_without_time: 'N',
ivar_name_cs: 'Název smlouvy',
ivar_name_en: 'Contract title',
tvar_name_cs: 'Název smlouvy',
tvar_name_en: 'Contract title',
tvar_tooltip_cs: null,
tvar_tooltip_en: null,
id: 84259,
meta: { href: '/processes/:iprocId/variables', },
},
contractNumber: {
ivar_name: 'contractNumber',
ivar_type: 'T',
ivar_filtered_list: null,
ivar_attribute: null,
ivar_value: 'TAS-CO-2024-0045',
ivar_group: 'not implemented',
ivar_lov: [],
ivar_lov_value: null,
dlist_name: null,
ivar_multi: null,
ivar_dt_index: null,
ivar_col_index: null,
tvar_label: null,
tvar_tooltip: 'Zde je vygenerováno unikátní číslo smlouvy.',
tvar_id: 236,
tvar_name: 'contractNumber',
tvar_meta: null,
tvar_date_without_time: 'N',
ivar_name_cs: 'Číslo smlouvy',
ivar_name_en: 'Contract number',
tvar_name_cs: 'Číslo smlouvy',
tvar_name_en: 'Contract number',
tvar_tooltip_cs: 'Zde je vygenerováno unikátní číslo smlouvy.',
tvar_tooltip_en: 'A unique contract number is displayed here.',
id: 84115,
meta: { href: '/processes/:iprocId/variables',},
},
..................
}
