RevolverMatrix is a component for displaying a 3-level MLM matrix structure. It shows the current user (level 0), their direct partners (level 1), and second-level partners (level 2).
How it works
- The component calls the
account/positionAPI to retrieve all positions of the user. - Mapping filter: the
tablesprop contains a nested mappingtreeId[offset] → table title. - Rendering: only tables that exist both in the user’s positions and in the provided mapping are displayed.
- On table click: the component calls the
downlineAPI usingtreeIdandpositionIdof the selected table.
Basic example
<ui-revolver-matrix
:width="2"
:tree-id="2"
:tables="{
2: { 1: 'Table 1', 2: 'Table 2', 3: 'Table 3' },
0: { 1: 'Table 1', 2: 'Table 2' }
}"
:properties="['p.title', 's.id', 'm.SpilloverDirection']"
:editable-properties="['m.SpilloverDirection']"
edit-permission="self"
>
<template #above="{ item, canEdit, loading }">
<v-row class="align-center">
<v-col :cols="12" :md="6">
<ui-avatar-box
class="v-col-md-6"
:account-id="item?.accountId()"
:position-id="item?.positionId()"
:tree-id="2"
/>
</v-col>
<v-col :cols="12" :md="6">
<ui-properties-box
class="v-col-md-6"
:properties="['m.SpilloverDirection']"
mode="grid"
:account-id="item?.accountId()"
:position-id="item?.positionId()"
:tree-id="2"
:include-tree="0"
:editable-properties="['m.SpilloverDirection']"
:force-loading="loading"
/>
</v-col>
</v-row>
</template>
</ui-revolver-matrix>How it behaves:
- If the user has a position with
treeId=2andoffset=1, they will see the tab "Table 1". - Clicking the tab loads the downline data for that position.
Configuration:
Props
Main settings
| props | type | default | description |
id | string | — | Unique component identifier. |
width | number | 2 | Matrix width (number of slots on level 1). |
tree-id | number | 0 | Tree ID. |
tables | TableMapping | {} | Nested mapping treeId[offset] → table title.Example: { 2: { 1: 'Table 1', 2: 'Table 2' } } |
no-table-found-text | string | 'No tables found for your position' | Text shown when the user has no tables. |
properties | string[] | [] | Fields to fetch from the server. |
popup-properties | string[] | [] | Fields shown in the popup when clicking a card. |
header-titles | Record<string, string> | — | Custom field titles for the popup. |
title-field | string | 'p.title' | Property used as the card title. |
subtitle-field | string | 's.id' | Property used as the card subtitle. |
title-field-max | number | 20 | Maximum title length (truncated). |
subtitle-field-max | number | 15 | Maximum subtitle length (truncated). |
Wrapper styles
| props | type | default | description |
background-color | string | '#F1F1F1' | Background color of the main content area. |
tabs-wrapper-class | string | 'mb-2' | CSS class for the tabs wrapper. |
tabs-class | string | 'rounded-lg' | CSS class for tabs. |
matrix-wrapper-class | string | '' | CSS class for the outer matrix wrapper. |
content-wrapper-class | string | 'pa-4 rounded-lg' | CSS class for the cards container. |
loader-color | string | '#ffffff' | Loading indicator color. |
tabs-slider-color | string | '#000000' | Color of the active tab indicator. |
table-chip-color | string | '#000000' | Text color inside the table chip. |
Card styles
| props | type | default | description |
card-background-color | string | '#ffffff' | Background color of a user card. |
empty-slot-color | string | '#e0e0e0' | Background color of an empty slot. |
card-class | string | '' | Additional CSS class for the card. |
empty-card-class | string | '' | CSS class for an empty card. |
card-title-color | string | '#000000' | Card title text color. |
card-subtitle-color | string | '#757575' | Card subtitle text color. |
arrow-color | string | '#ffffff' | Arrow color on the level 0 card. |
Avatar sizes
| props | type | default | description |
avatar-size-level-0 | number | 60 | Main (root) card avatar size (px). |
avatar-size-level-1 | number | 50 | Level 1 cards avatar size (px). |
avatar-size-level-2 | number | 40 | Level 2 cards avatar size (px). |
| props | type | default | description |
force-mini-cards | boolean | false | Force mini-cards for the bottom level on any screen size. |
show-empty-icon | boolean | true | Show an icon in an empty slot. |
empty-text | string | '' | Text for an empty slot. |
Editable properties
| props | type | default | description |
editable-properties | string[] | [] | List of properties that can be edited. |
edit-permission | 'self' | 'all' | 'none' | 'self' | Edit permissions:'self' — only own data'all' — all data'none' — editing disabled |
input-properties | InputByTypeProperties | — | Input configuration for editable fields. |
Slots
above
A slot for rendering custom content above the matrix (for example, information about the root user).
Slot parameters:
item— root item (Item)loading— loading state (boolean)canEdit— whether the current user can edit (boolean)myId— current user ID (number)treeId— current tree ID (number)
Example:
<ui-revolver-matrix :tables="tables" :properties="properties">
<template #above="{ item, loading, canEdit }">
<div v-if="!loading && item" class="pa-4">
<h2>{{ item.title() }}</h2>
<p>ID: {{ item.accountId() }}</p>
</div>
</template>
</ui-revolver-matrix>Usage examples
Minimal configuration
<ui-revolver-matrix
:width="2"
:tables="{
2: { 1: 'Table 1' }
}"
:properties="['p.title', 's.id', 'vmdl.level', 'vmdl.number']"
/>Multiple trees and positions
<ui-revolver-matrix
:width="3"
:tables="{
2: { 1: 'STARTER', 2: 'PRO', 3: 'ELITE' },
3: { 1: 'VIP 1', 2: 'VIP 2' },
5: { 1: 'GOLD', 2: 'PLATINUM', 3: 'DIAMOND' }
}"
:properties="['p.title', 's.id', 'vmdl.level', 'vmdl.number']"
title-field="p.title"
subtitle-field="s.id"
/>Note: The user will only see tables for which they have positions in the system.
Custom colors and text
<ui-revolver-matrix
:width="3"
:tables="{
2: { 1: 'STARTER', 2: 'BUILDER', 3: 'LEADER' }
}"
:properties="['p.title', 's.id', 'vmdl.level', 'vmdl.number']"
title-field="p.title"
subtitle-field="s.id"
no-table-found-text="You have not activated any positions yet"
background-color="#dc2626"
card-background-color="#fef2f2"
empty-slot-color="#fee2e2"
tabs-slider-color="#fbbf24"
table-chip-color="#ffffff"
arrow-color="#ffffff"
card-title-color="#7f1d1d"
card-subtitle-color="#b91c1c"
loader-color="#fbbf24"
/>Note: All of the settings can be customized either from admin panel by manually editing code or from within the back office by pressing on a cog icon in a left upper corner of the page (only accessible when "Online office admin" flag is presented).