Flexmonster pivot

by soso

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button id="submitButton" primary onclick="submitChanges()">Submit Changes</button>
<button id="cancelButton" onclick="cancelChanges()">Cancel Changes</button>
<button onclick="addRecord()">Add one record</button>
<button onclick="editRecord()">Edit first record</button>

<div id="pivot-container">The component will appear here</div> 


<!-- TODO:
0. Create slices

1. sorting of processes - DONE
2. sorting of statuses - DONE
3. Select multiple entries - NOT DONE
4. Custom call to action on selected entries 
5. Nested? => DONE via Initial_Assignee


To investigate:
- hierarchies
- dimensions
- slices

**What to show:**
- Assignee/Process/sumofsheets/sumofscenes/sumofcompletedscenes(UP)/sumofnotcompletedscenes(onhand)
   => define UP
   => define ON_HAND

-->

JavaScript

const referenceProcess = 'Anim';

const initialData = [{
    "TaskId": "TASK_0001",
    "Job": "SG1",
    "Scene": "SC_001",
    "Process": "Anim",
    "Assignee": "A"
  },
  {
    "TaskId": "TASK_0002",
    "Job": "SG1",
    "Scene": "SC_002",
    "Process": "Anim",
    "Assignee": "A"
  },
  {
    "TaskId": "TASK_0003",
    "Job": "SG1",
    "Scene": "SC_003",
    "Process": "Anim",
    "Assignee": "A"
  },
  {
    "TaskId": "TASK_0004",
    "Job": "SG1",
    "Scene": "SC_004",
    "Process": "Anim",
    "Assignee": "B"
  }
];

const mapping = {
  "RowId": { type: "id" },
  "DeleteRow": { type: "delete" },
  "TaskId": { type: "string" }, // Unique ID - could be used instead of RowId?
  "Job": { type: "string" },
  "Scene": { type: "string" },
  "Process": { type: "string" },
  //Status: { type: "string" },
  "Assignee": { type: "string", sortOrder: sortAssignees() },
  "RefAssignee": { type: "string", sortOrder: sortAssignees() },
  //Sheets: { type: "number" },
  //"Bid End": { type: "date", format: "YYYY-MM-DD" },
  //"Status Date": { type: "date" },
};

const slice = {
  reportFilters: [
    {
      uniqueName: "Process",
      filter: {
        members: [
          "process.[anim]",
        ]
      }
    }
  ],
  rows: [
    /* { uniqueName: 'Process', sortOrder: sortProcesses() }, */
    { uniqueName: 'Assignee' },
    { uniqueName: 'Scene' },
  ],
  drillThrough: ["TaskId", "Job", "Scene", "Sheets", "Assignee", "Process", "Status", "Bid End", "Status Date"],
  columns: [{
      uniqueName: "[Measures]",
      //active: false
    },
/*     {
      uniqueName: "Process",
      sortOrder: sortProcesses()
    },
    {
      uniqueName: "Status",
      sortOrder: sortStatuses()
    },
    {
      uniqueName: "Assignee",
      sortOrder: sortAssignees(),
      active: false,
    }, */
  ],
  measures: [
    {
      uniqueName: "Scene",
      aggregation: "distinctcount",
      active: true,
      grandTotalCaption: "Total Scenes"
    },
    {
      uniqueName:...