Merge pull request #180 from Tinkoff/106_p2_edit_wip_limit_fields

pavelpower · web-flow · commit 7355affff47f · 2022-06-13T14:18:58.000+03:00
#106 new function — "edit" field WIP-limits
diff --git a/.eslintrc b/.eslintrc
@@ -12,7 +12,7 @@
     "ecmaFeatures": {
       "modules": true,
       "experimentalObjectRestSpread": true
-    },
+    }
   },
   "rules": {
     "no-console": "error",
@@ -22,7 +22,7 @@
     "import/prefer-default-export": "off",
     "quotes": ["error", "single"],
     "import/no-unresolved": [2, { "caseSensitive": false }],
-    "prettier/prettier": "error",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
     "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"],
     "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
     "class-methods-use-this": "off",
diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,4 @@ node_modules
 dist
 .gitconfig
 coverage
+.history
diff --git a/src/field-limits/SettingsPage/htmlTemplates.js b/src/field-limits/SettingsPage/htmlTemplates.js
@@ -8,6 +8,7 @@ export const fieldLimitsTableTemplate = ({
   tableId,
   tableBodyId,
   addLimitBtnId,
+  editLimitBtnId,
   fieldValueInputId,
   visualNameInputId,
   columnsSelectId,
@@ -20,7 +21,7 @@ export const fieldLimitsTableTemplate = ({
   swimlaneOptions = [],
   columnOptions = [],
 }) => `
-   <form class="aui">
+   <form class="aui" onsubmit="return false;">
       <fieldset>
         <table>
           <tr>
@@ -76,6 +77,9 @@ export const fieldLimitsTableTemplate = ({
                   <button class="aui-button aui-button-primary ${
                     style.addFieldLimitBtn
                   }" type="button" id="${addLimitBtnId}">Add limit</button>
+                  <button class="aui-button aui-button-primary ${
+                    style.editFieldLimitBtn
+                  }" type="submit" disabled id="${editLimitBtnId}">Edit limit</button>
                 </div>
               </div>
             </td>
@@ -103,7 +107,7 @@ export const fieldLimitsTableTemplate = ({
 `;
 
 export const fieldRowTemplate = ({
-  id,
+  limitKey,
   fieldId,
   fieldName,
   fieldValue,
@@ -112,17 +116,21 @@ export const fieldRowTemplate = ({
   limit,
   columns = [],
   swimlanes = [],
+  editClassBtn,
   deleteClassBtn,
 }) => `
-    <tr data-field-project-row="${id}">
-      <td><input type="checkbox" class="checkbox" data-id="${id}"></td>
+    <tr data-field-project-row="${limitKey}">
+      <td><input type="checkbox" class="checkbox" data-id="${limitKey}"></td>
       <td data-type="field-name" data-value="${fieldId}">${fieldName}</td>
       <td data-type="field-value">${fieldValue}</td>
-      <td data-type="visual-name"><div colorpicker-data-id="${id}"
+      <td data-type="visual-name"><div colorpicker-data-id="${limitKey}"
           class="${style.visualName}" style="background-color:${bkgColor || 'none'}">${visualValue}</div></td>
       <td data-type="field-limit">${limit}</td>
       <td data-type="field-columns">${columns.map(c => c.name).join(', ')}</td>
       <td data-type="field-swimlanes">${swimlanes.map(s => s.name).join(', ')}</td>
-      <td><button class="aui-button ${deleteClassBtn}">Delete</button></td>
+      <td>
+        <button class="aui-button ${editClassBtn} ${style.jhControlRowBtn}">Edit</button></br>
+        <button class="aui-button ${deleteClassBtn} ${style.jhControlRowBtn}">Delete</button>
+      </td>
     </tr>
   `;
diff --git a/src/field-limits/SettingsPage/index.js b/src/field-limits/SettingsPage/index.js
@@ -19,6 +19,7 @@ export default class FieldLimitsSettingsPage extends PageModification {
     popupTable: 'jh-field-limits-table',
     popupTableBody: 'jh-field-limits-tbody',
     popupTableAddLimitRow: 'jh-field-limits-add-btn',
+    popupTableEditLimitRow: 'jh-field-limits-edit-btn',
     inputFieldValue: 'jh-input-field-value',
     visualNameInput: 'jh-input-visual-name',
     columnsSelectId: 'jh-columns-select',
@@ -30,9 +31,12 @@ export default class FieldLimitsSettingsPage extends PageModification {
   };
 
   static classes = {
+    editRowBtn: 'jh-edit-row-btn',
     deleteRowBtn: 'jh-delete-row-btn',
   };
 
+  static limitKeyOfEditable = undefined;
+
   async shouldApply() {
     return (await getSettingsTab()) === 'cardLayout';
   }
@@ -132,6 +136,7 @@ export default class FieldLimitsSettingsPage extends PageModification {
         tableId: FieldLimitsSettingsPage.ids.popupTable,
         tableBodyId: FieldLimitsSettingsPage.ids.popupTableBody,
         addLimitBtnId: FieldLimitsSettingsPage.ids.popupTableAddLimitRow,
+        editLimitBtnId: FieldLimitsSettingsPage.ids.popupTableEditLimitRow,
         fieldValueInputId: FieldLimitsSettingsPage.ids.inputFieldValue,
         visualNameInputId: FieldLimitsSettingsPage.ids.visualNameInput,
         columnsSelectId: FieldLimitsSettingsPage.ids.columnsSelectId,
@@ -167,10 +172,10 @@ export default class FieldLimitsSettingsPage extends PageModification {
         const isSelected = row.querySelector('input[type="checkbox"]:checked');
         if (!isSelected) return;
 
-        const id = row.getAttribute('data-field-project-row');
+        const limitKey = row.getAttribute('data-field-project-row');
 
-        this.settings.limits[id] = {
-          ...this.settings.limits[id],
+        this.settings.limits[limitKey] = {
+          ...this.settings.limits[limitKey],
           ...mergedRowObj,
         };
       });
@@ -188,14 +193,22 @@ export default class FieldLimitsSettingsPage extends PageModification {
     });
   }
 
-  handleAddFieldLimitRowClick() {
-    this.addEventListener(document.getElementById(FieldLimitsSettingsPage.ids.popupTableAddLimitRow), 'click', () => {
+  handleButtonsFieldLimitRowClick() {
+    const btnAdd = document.getElementById(FieldLimitsSettingsPage.ids.popupTableAddLimitRow);
+    const btnEdit = document.getElementById(FieldLimitsSettingsPage.ids.popupTableEditLimitRow);
+
+    const setValuesToTable = limitKey => {
       const { fieldId, fieldValue, visualValue, limit } = this.getInputValues();
       const { columns, swimlanes } = this.getSelectedSwimlanesAndColumnsOptions();
-      const id = limitsKey.encode(fieldValue, fieldId);
+      const isEdit = limitKey != null;
 
-      if (!this.settings.limits[id]) {
-        this.settings.limits[id] = {
+      if (!isEdit) {
+        limitKey = limitsKey.encode(fieldValue, fieldId);
+      }
+
+      if (!this.settings.limits[limitKey] || isEdit) {
+        this.settings.limits[limitKey] = {
+          ...this.settings.limits[limitKey],
           visualValue,
           fieldValue,
           fieldId,
@@ -206,6 +219,20 @@ export default class FieldLimitsSettingsPage extends PageModification {
       }
 
       this.renderRows();
+      btnEdit.disabled = true;
+      this.limitKeyOfEditable = undefined;
+    };
+
+    this.addEventListener(btnAdd, 'click', () => {
+      setValuesToTable(null);
+    });
+
+    this.addEventListener(btnEdit, 'click', () => {
+      if (this.limitKeyOfEditable == null) {
+        btnEdit.disabled = true;
+        return;
+      }
+      setValuesToTable(this.limitKeyOfEditable);
     });
   }
 
@@ -231,7 +258,7 @@ export default class FieldLimitsSettingsPage extends PageModification {
       const { limit, columns, swimlanes, fieldId, fieldValue, visualValue, bkgColor } = this.settings.limits[limitKey];
 
       this.renderLimitRow({
-        id: limitKey,
+        limitKey,
         fieldValue,
         visualValue,
         bkgColor,
@@ -242,19 +269,19 @@ export default class FieldLimitsSettingsPage extends PageModification {
       });
     });
 
-    this.handleAddFieldLimitRowClick();
+    this.handleButtonsFieldLimitRowClick();
     this.handleAppliesLimitsToRows();
   }
 
-  renderLimitRow({ id, fieldValue, visualValue, bkgColor, fieldId, limit, columns, swimlanes }) {
+  renderLimitRow({ limitKey, fieldValue, visualValue, bkgColor, fieldId, limit, columns, swimlanes }) {
     const nzFieldIdSettings = this.normalizedFields.byId[fieldId];
 
     const fieldName = nzFieldIdSettings ? nzFieldIdSettings.name : `[${fieldId}]`;
     const row = this.insertHTML(
       document.getElementById(FieldLimitsSettingsPage.ids.popupTableBody),
       'beforeend',
       fieldRowTemplate({
-        id,
+        limitKey,
         fieldValue,
         visualValue,
         bkgColor,
@@ -263,13 +290,22 @@ export default class FieldLimitsSettingsPage extends PageModification {
         limit,
         columns: columns.map(columnId => this.normalizedColumns.byId[columnId] || `column [${fieldId}]`),
         swimlanes: swimlanes.map(swimlaneId => this.normalizedSwimlanes.byId[swimlaneId] || `swimlane [${fieldId}]`),
+        editClassBtn: FieldLimitsSettingsPage.classes.editRowBtn,
         deleteClassBtn: FieldLimitsSettingsPage.classes.deleteRowBtn,
       })
     );
 
-    this.addEventListener(row.querySelector(`.${FieldLimitsSettingsPage.classes.deleteRowBtn}`), 'click', () => {
-      delete this.settings.limits[id];
+    this.addEventListener(row.querySelector(`.${FieldLimitsSettingsPage.classes.editRowBtn}`), 'click', event => {
+      this.setInputValues(limitKey);
+      event.stopPropagation();
+      event.stopPropagation();
+    });
+
+    this.addEventListener(row.querySelector(`.${FieldLimitsSettingsPage.classes.deleteRowBtn}`), 'click', event => {
+      delete this.settings.limits[limitKey];
       row.remove();
+      event.stopPropagation();
+      event.stopPropagation();
     });
   }
 
@@ -289,6 +325,31 @@ export default class FieldLimitsSettingsPage extends PageModification {
     };
   }
 
+  setInputValues(limitKey) {
+    const { fieldValue, visualValue, limit, fieldId, columns, swimlanes } = this.settings.limits[limitKey];
+
+    this.limitKeyOfEditable = limitKey;
+    document.getElementById(FieldLimitsSettingsPage.ids.popupTableEditLimitRow).disabled = false;
+
+    document.getElementById(FieldLimitsSettingsPage.ids.inputFieldValue).value = fieldValue;
+    document.getElementById(FieldLimitsSettingsPage.ids.visualNameInput).value = visualValue;
+    document.getElementById(FieldLimitsSettingsPage.ids.wipLimitInputId).value = limit;
+    document.getElementById(FieldLimitsSettingsPage.ids.fieldSelectId).value = fieldId;
+    this.setSelectedSwimlanesAndColumnsOptions(columns, swimlanes);
+  }
+
+  setSelectedSwimlanesAndColumnsOptions(columns, swimlanes) {
+    const columnsOptions = document.getElementById(FieldLimitsSettingsPage.ids.columnsSelectId).options;
+    const swimlaneOptions = document.getElementById(FieldLimitsSettingsPage.ids.swimlanesSelectId).options;
+
+    columnsOptions.forEach(option => {
+      option.selected = columns.includes(option.value);
+    });
+    swimlaneOptions.forEach(option => {
+      option.selected = swimlanes.includes(option.value);
+    });
+  }
+
   getSelectedSwimlanesAndColumnsOptions() {
     const columnsOptions = document.getElementById(FieldLimitsSettingsPage.ids.columnsSelectId).selectedOptions;
     const swimlaneOptions = document.getElementById(FieldLimitsSettingsPage.ids.swimlanesSelectId).selectedOptions;
diff --git a/src/field-limits/SettingsPage/styles.css b/src/field-limits/SettingsPage/styles.css
@@ -1,13 +1,22 @@
 .addFieldLimitTable {
-    width: 100%;
+  width: 100%;
+}
+
+.jhControlRowBtn {
+  margin-left: 0px !important;
+  margin-bottom: 2px !important;
+}
+
+.editFieldLimitBtn {
+  margin-top: 1rem !important;
 }
 
 .addFieldLimitBtn {
-    margin-top: 1rem !important;
+  margin-top: 1rem !important;
 }
 
 .settingsEditBtn {
-    margin-top: 1rem;
+  margin-top: 1rem !important;
 }
 
 .visualName {
@@ -22,4 +31,4 @@
   line-height: 32px;
   overflow: hidden;
   cursor: pointer;
-}
+}
