@pie-element/multi-trait-rubric 0.1.0

package/src/author/defaults.tsx

@@ -0,0 +1,157 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/configure/src/defaults.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+export default {
+  model: {
+    addScaleEnabled: true,
+    description: false,
+    excludeZero: false,
+    halfScoring: false,
+    maxPointsEnabled: true,
+    pointLabels: true,
+    scales: [],
+    standards: false,
+    visibleToStudent: true,
+  },
+  configuration: {
+    baseInputConfiguration: {
+      h3: { disabled: true },
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+      textAlign: { disabled: true },
+      showParagraphs: { disabled: false },
+      separateParagraphs: { disabled: true },
+    },
+    expandedInput: {
+      inputConfiguration: {
+        math: { disabled: true },
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+    },
+    labelInput: {
+      inputConfiguration: {
+        math: { disabled: true },
+        audio: { disabled: true },
+        video: { disabled: true },
+        image: { disabled: true },
+      },
+    },
+    excludeZeroDialogBoxContent: {
+      title: 'Exclude 0 (Zero) from Score Point Values.',
+      text: `<div>
+        You are about to exclude 0 from score point values.
+        <br/>
+        Some of the existing data has to be changed.
+        <br/>
+        Please choose if you want to:
+        <ul>
+          <li>
+            shift Labels and Descriptions to the left
+          </li>
+          <li>
+            remove 0 column with its Label and Description
+          </li>
+        </ul>
+      </div>`,
+    },
+    includeZeroDialogBoxContent: {
+      title: 'Include 0 (Zero) in Score Point Values.',
+      text: `<div>
+        You are about to include 0 in score point values.
+        <br/>
+        Some of the existing data has to be changed.
+        <br/>
+        Please choose if you want to:
+        <ul>
+          <li>
+            shift Labels and Descriptions to the right
+          </li>
+          <li>
+            add 0 column with empty Label and Descriptions
+          </li>
+        </ul>
+      </div>`,
+    },
+    deleteScaleDialogBoxContent: {
+      title: 'Delete Scale',
+      text: 'Are you sure you want to delete this scale?',
+    },
+    maxPointsDialogBoxContent: {
+      title: 'Decreasing Max Points.',
+      text: ` You are about to decrease max score point value.
+        <br/>
+        All the Labels and Descriptions for scores above Max Point will be deleted.`,
+    },
+    settingsPanelDisabled: false,
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true,
+    },
+    showExcludeZero: {
+      settings: true,
+      label: 'Exclude Zero',
+    },
+    showScorePointLabels: {
+      settings: true,
+      label: 'Show Score Point Labels',
+    },
+    showDescription: {
+      settings: true,
+      label: 'Show Description',
+    },
+    showVisibleToStudent: {
+      settings: true,
+      label: 'Visible to Student',
+    },
+    showHalfScoring: {
+      settings: true,
+      label: 'Half Scoring',
+    },
+    // commenting this in order to use the dynamic width if the width was not set by the client (PD-3203)
+    // width: '900px',
+    // these should not be set to true (should not be used) for now
+    showStandards: {
+      settings: false,
+      label: 'Show Standards',
+    },
+    showLevelTagInput: {
+      settings: false,
+      label: 'Show Level Tag Input',
+      enabled: false,
+    },
+    dragAndDrop: {
+      settings: true,
+      label: 'Enable Drag and Drop',
+      enabled: false,
+    },
+    showMaxPoint: {
+      settings: true,
+      label: 'Show Max Points Dropdown',
+    },
+    addScale: {
+      settings: true,
+      label: 'Add Scale Available',
+    },
+    minNoOfTraits: 1,
+    maxNoOfTraits: 10,
+    minNoOfScales: 1,
+    maxNoOfScales: 10,
+    defaultTraitLabel: 'Trait',
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false,
+    },
+    maxMaxPoints: 10,
+  },
+};

package/src/author/index.ts

@@ -0,0 +1,174 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/configure/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import {
+  ModelUpdatedEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
+  InsertImageEvent,
+  DeleteImageEvent,
+} from '@pie-element/shared-configure-events';
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import Main from './main.js';
+import defaults from './defaults.js';
+import { addOrRemoveScaleColumn } from './utils.js';
+import { excludeZeroTypes } from './modals.js';
+
+const modelWithDefaults = (m) => ({ ...defaults.model, ...m });
+const configurationWithDefaults = (c) => ({ ...defaults.configuration, ...c });
+
+export default class MultiTraitRubricElement extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+    this._model = modelWithDefaults();
+    this._configuration = configurationWithDefaults();
+  }
+
+  updateModelAccordingToReceivedProps: any = (m) => {
+    const currentModel = { ...this._model };
+
+    if (!m) {
+      return currentModel;
+    }
+
+    const validatedModel = { ...m };
+    const { scales, excludeZero } = validatedModel || {};
+
+    (scales || []).forEach((scale) => {
+      if (!scale) {
+        scale = { scorePointsLabels: [], traits: [] };
+      }
+
+      const { maxPoints } = scale || {};
+
+      scale.scorePointsLabels = [...(scale.scorePointsLabels || [])];
+      scale.traits = [...(scale.traits || [])];
+
+      const howManyScorePointLabelsShouldHave = excludeZero ? maxPoints : maxPoints + 1;
+      const howManyScorePointLabelsItHas = scale.scorePointsLabels.length;
+
+      if (howManyScorePointLabelsItHas !== howManyScorePointLabelsShouldHave) {
+        if (howManyScorePointLabelsItHas < howManyScorePointLabelsShouldHave) {
+          for (let i = 0; i < howManyScorePointLabelsShouldHave - howManyScorePointLabelsItHas; i++) {
+            scale.scorePointsLabels.push('');
+          }
+        } else {
+          scale.scorePointsLabels = scale.scorePointsLabels.slice(0, howManyScorePointLabelsShouldHave);
+        }
+      }
+
+      (scale.traits || []).forEach((trait) => {
+        if (!trait) {
+          trait = { scorePointsDescriptors: [] };
+        }
+
+        trait.scorePointsDescriptors = [...(trait.scorePointsDescriptors || [])];
+
+        const howManyScorePointDescriptorsItHas = trait.scorePointsDescriptors.length;
+
+        if (howManyScorePointDescriptorsItHas !== howManyScorePointLabelsShouldHave) {
+          if (howManyScorePointDescriptorsItHas < howManyScorePointLabelsShouldHave) {
+            for (let i = 0; i < howManyScorePointLabelsShouldHave - howManyScorePointDescriptorsItHas; i++) {
+              trait.scorePointsDescriptors.push('');
+            }
+          } else {
+            trait.scorePointsDescriptors = trait.scorePointsDescriptors.slice(0, howManyScorePointLabelsShouldHave);
+          }
+        }
+      });
+    });
+
+    if (validatedModel.excludeZero) {
+      // check if any scale has maxPoints set to 1
+      const shouldAddColumn0 = validatedModel.scales.some((scale) => scale.maxPoints === 1);
+
+      if (shouldAddColumn0) {
+        // excludeZero should be false and disabled when maxPoints is 1
+        validatedModel.excludeZero = false;
+        // add column 0 for all scales
+        validatedModel.scales = addOrRemoveScaleColumn(scales, excludeZeroTypes.add0);
+      }
+    }
+
+    return validatedModel;
+  };
+
+  set model(m) {
+    this._model = this.updateModelAccordingToReceivedProps(modelWithDefaults(m));
+    this._render();
+  }
+
+  set configuration(c) {
+    this._configuration = configurationWithDefaults(c);
+    this._render();
+  }
+
+  onModelChanged: any = (m) => {
+    this._model = this.updateModelAccordingToReceivedProps(modelWithDefaults(m));
+    this._render();
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, false));
+  };
+
+  onConfigurationChanged: any = (c) => {
+    this._configuration = configurationWithDefaults(c);
+
+    this._render();
+  };
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  _render() {
+    if (this._model) {
+      let element = React.createElement(Main, {
+        model: this._model,
+        configuration: this._configuration,
+        onModelChanged: this.onModelChanged,
+        onConfigurationChanged: this.onConfigurationChanged,
+        uploadSoundSupport: {
+          add: this.insertSound.bind(this),
+          delete: this.onDeleteSound.bind(this),
+        },
+        imageSupport: {
+          add: this.insertImage.bind(this),
+          delete: this.onDeleteImage.bind(this),
+        },
+      });
+
+      if (!this._root) {
+        this._root = createRoot(this);
+      }
+      this._root.render(element);
+    }
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}