Distribution settings

A distribution settings module contains info about autorized account and a button which allows user to choose a spillover direction within it's binary downline.

After clicking on a button, the presented option are:
1. Right - only place accounts in a right leg;
2. Left - only place accounts in a left leg;
3. Auto - which distributes new accounts equaly between right and left legs of the downline;

Configuration

<template #above="{ item, canEdit, loading }">
  <div class="elevation-4 rounded mb-2">
    <div class="v-container">
      <div class="v-row align-center">
        <ui-avatar-box class="v-col-md-6" :account-id="item?.accountId()" :position-id="item?.positionId()" :tree-id="2" :include-tree="0">
        </ui-avatar-box>
        <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="canEdit ? ['m.SpilloverDirection'] : undefined" :force-loading="loading">
        </ui-properties-box>
      </div>
    </div>
  </div>
</template>

The code above is suppose to be inside <ui-visual-binary-tree></ui-visual-binary-tree> tag.

This module is not flexibly configurable, but all feature of vue and html are supported.