refactoring

altai-ui · Dec 30, 2020 · 7579486 · 7579486
1 parent 512db70
commit 7579486
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 54 deletions.
diff --git a/src/qComponents/QTable/src/QTable.vue b/src/qComponents/QTable/src/QTable.vue
@@ -208,11 +208,11 @@
                 :row="row"
                 :row-index="rowIndex"
                 :columns="allColumns"
-                :class="levelClass(row.indent)"
+                :class="levelClass(row.$indent)"
                 :sticky-column-key="stickyColumnKey"
                 :expandable="expandable"
                 :indent-size="indentSize"
-                :indent="row.indent"
+                :indent="row.$indent"
                 :children-key="childrenKey"
                 :pages-in-expand="pagesInExpand"
                 :custom-row-class="customRowClass"
@@ -227,17 +227,22 @@
                   <slot
                     v-if="$scopedSlots.row"
                     name="row"
-                    :row="rowData.data"
+                    :row="rowData"
                   />
 
                   <slot
-                    v-else-if="findSlotForRow(rowData.$key)"
-                    :name="findSlotForRow(rowData.$key)"
+                    v-else-if="findSlotForRow(rowData.key)"
+                    :name="findSlotForRow(rowData.key)"
                     :row="rowData.data"
+                    :rowKey="rowData.key"
+                    :index="rowData.index"
+                    :value="rowData.value"
+                    :indent="rowData.indent"
+                    :column="rowData.column"
                   />
 
                   <template v-else>
-                    {{ rowData.$value }}
+                    {{ rowData.value }}
                   </template>
                 </template>
               </row-hoc>
@@ -437,12 +442,15 @@ export default {
         return acc.concat(eachGroup);
       }, []);
     },
+
     isDraggable() {
       return this.groupsOfColumns.find(group => group.draggable);
     },
+
     isSeparated() {
       return this.groupsOfColumns.length > 1;
     },
+
     areAllChecked: {
       get() {
         return this.checkedRows.length === this.rows.length;
@@ -527,14 +535,14 @@ export default {
       handler(rows) {
         this.treeRows = rows.map((row, index) => {
           const updatedRow = {
-            ...row,
+            data: row,
             $treeIndex: index
           };
 
-          const childs = updatedRow[this.childrenKey];
+          const childs = updatedRow.data[this.childrenKey];
 
           if (childs) {
-            updatedRow[this.childrenKey] = this.updateChildrenRows(
+            updatedRow.data[this.childrenKey] = this.updateChildrenRows(
               childs,
               row,
               updatedRow
@@ -607,17 +615,20 @@ export default {
 
     updateChildrenRows(childs, row, updatedRow) {
       return childs.map(child => {
+        const childlessRow = { ...row };
+        this.$delete(childlessRow, [this.childrenKey]);
+
         const updatedChildRow = {
-          ...child,
-          $parentRow: row,
-          indent: updatedRow.indent + this.indentSize || this.indentSize,
+          data: child,
+          $parentRow: childlessRow,
+          $indent: updatedRow.$indent + this.indentSize || this.indentSize,
           $treeIndex: updatedRow.$treeIndex
         };
 
-        const rowChilds = updatedChildRow[this.childrenKey];
+        const rowChilds = updatedChildRow.data[this.childrenKey];
 
         if (rowChilds) {
-          updatedChildRow[this.childrenKey] = this.updateChildrenRows(
+          updatedChildRow.data[this.childrenKey] = this.updateChildrenRows(
             rowChilds,
             child,
             updatedChildRow
@@ -704,20 +715,19 @@ export default {
     },
 
     handleExpandClick(row) {
-      if (!row.$isTreeOpened) {
-        this.$emit('load-by-expand', row, this.resolve);
-      }
+      const currentRow = this.treeRows[row.$treeIndex];
 
-      this.treeRows = this.computedRows;
+      if (!row.$isTreeOpened) {
+        const updatedRow = {
+          ...currentRow,
+          $isTreeOpened: true
+        };
 
-      const parentRow = this.findScopedRow(
-        this.treeRows[row.$treeIndex],
-        this.uniqueKey,
-        row[this.uniqueKey]
-      );
+        this.treeRows.splice(currentRow, 1, updatedRow);
+        return;
+      }
 
-      this.$delete(parentRow, [this.childrenKey]);
-      this.$delete(parentRow, '$isTreeOpened');
+      this.$delete(currentRow, '$isTreeOpened');
     },
 
     findScopedRow(row, key, value) {
@@ -748,13 +758,16 @@ export default {
       let loaderRow = null;
 
       let updatedChilds = newChilds.map(child => {
+        const childlessRow = { ...row };
+        this.$delete(childlessRow, [this.childrenKey]);
+
         if (child[this.pagesInExpand]) {
-          loaderRow = { ...child, $parentRow: row };
+          loaderRow = { ...child, $parentRow: childlessRow };
         }
         return {
           ...child,
-          $parentRow: row,
-          indent: row.indent + this.indentSize || this.indentSize,
+          $parentRow: childlessRow,
+          $indent: row.$indent + this.indentSize || this.indentSize,
           $treeIndex: row.$treeIndex
         };
       });

diff --git a/src/qComponents/QTable/src/components/QTableRow/index.vue b/src/qComponents/QTable/src/components/QTableRow/index.vue
@@ -44,7 +44,7 @@
         :class="column.customCellClass"
       >
         <slot
-          :row-data="updateRow(row, columnIndex, column.key, column)"
+          :row-data="updateRow(row.data, columnIndex, column.key, column)"
           name="row"
         />
 
@@ -57,7 +57,7 @@
 
       <template v-else>
         <slot
-          :row-data="updateRow(row, columnIndex, column.key, column)"
+          :row-data="updateRow(row.data, columnIndex, column.key, column)"
           name="row"
         />
 
@@ -209,14 +209,14 @@ export default {
       return (
         this.expandable &&
         columnIndex === 0 &&
-        Boolean(this.row[this.childrenKey]?.length)
+        Boolean(this.row.data[this.childrenKey]?.length)
       );
     },
     handleExpandClick() {
       this.$emit('expand-click', this.row);
     },
     getFirstTdStyle() {
-      if (!this.selectable || !this.row[this.childrenKey]?.length) return;
+      if (!this.selectable || !this.row.data[this.childrenKey]?.length) return;
 
       const elm = this.$el?.querySelector('td:first-child');
 
@@ -231,14 +231,11 @@ export default {
       };
     },
     getCellStyle(column, columnIndex) {
+      if (!this.indent) return {};
+
       const style = {};
 
-      if (
-        columnIndex === 0 &&
-        !this.selectable &&
-        this.$el &&
-        this.row[this.childrenKey]?.length
-      ) {
+      if (columnIndex === 0 && !this.selectable && this.$el) {
         const elm = this.$el.querySelector('td:first-child');
 
         if (elm) {
@@ -256,18 +253,18 @@ export default {
       return this.stickyColumnKey === key ? 'q-table__cell_sticky' : '';
     },
     updateRow(row, index, key, column) {
-      let $value = get(row, key);
+      let value = get(row.data || row, key);
 
       if (column.formatter) {
-        $value = column.formatter($value, row, column);
+        value = column.formatter(value, row, column);
       }
 
       return {
-        $key: key,
-        $index: index,
-        $value,
-        $indent: this.indent,
-        $column: column,
+        key,
+        index,
+        value,
+        indent: this.indent,
+        column,
         data: row
       };
     }

diff --git a/src/qComponents/QTable/src/hocs/withQTableRow/index.js b/src/qComponents/QTable/src/hocs/withQTableRow/index.js
@@ -3,18 +3,18 @@ const renderedChilds = ({
   childrenKey,
   listeners,
   component,
-  childrens,
+  children,
   props,
   scopedSlots
 }) => {
-  return childrens.reduce((acc, row) => {
+  return children.reduce((acc, row) => {
     const renderingArray = [];
 
     renderingArray.push(
       renderContext(component, {
         props: {
           ...props,
-          indent: row.indent,
+          indent: row.$indent,
           row
         },
         on: { ...listeners },
@@ -30,7 +30,7 @@ const renderedChilds = ({
         listeners,
         props,
         scopedSlots,
-        childrens: row[childrenKey]
+        children: row.data[childrenKey]
       };
 
       renderingArray.push(renderedChilds(renderedData));
@@ -51,17 +51,18 @@ const withQTableRow = QTableRow => ({
 
     const renderingArray = [];
 
-    if (row[childrenKey]) {
+    if (row.data[childrenKey]) {
       const renderedData = {
         renderContext,
         childrenKey,
         component: QTableRow,
         listeners,
-        childrens: row[childrenKey],
+        children: row.data[childrenKey],
         props,
         scopedSlots
       };
-      renderingArray.push(renderedChilds(renderedData));
+
+      if (row.$isTreeOpened) renderingArray.push(renderedChilds(renderedData));
     }
 
     return [renderContext(QTableRow, { ...data }), ...renderingArray];

diff --git a/src/qComponents/QTable/src/q-table.scss b/src/qComponents/QTable/src/q-table.scss
@@ -21,6 +21,10 @@
     display: inline-block;
     font-size: 23px;
     vertical-align: middle;
+
+    &_opened {
+      transform: rotate(90deg);
+    }
   }
 
   &__drag-elements {

diff --git a/stories/components/QTable/Default.js b/stories/components/QTable/Default.js
@@ -21,8 +21,8 @@ export default (_, { argTypes }) => ({
         {{ column.$value }} custom
       </template>
 
-      <template #customRow="{ row }">
-        {{ row.$value }} custom
+      <template #customRow="{ value }">
+        {{ value }} custom
       </template>
     </q-table>
   `