Merge pull request #231 from osu-cass/feat/IRV-47-add-apply

Feat/irv 47 add apply

src/Assets/Styles/item-bank.less

@@ -178,3 +178,7 @@
 .delete-row {
   text-align: center;
 }
+
+.submit-button {
+  float: right;
+}

src/CsvEntry/CsvEntry.tsx

@@ -5,7 +5,8 @@ import {
   CsvRowModel,
   NamespaceModel,
   parseCsv,
-  Accordion
+  Accordion,
+  validItemRevisionModel
 } from "@src/index";
 
 export interface CsvEntryProps {

src/CsvEntry/CsvEntryModels.ts

@@ -4,6 +4,8 @@ import {
   NamespaceModel
 } from "../ItemBank/ItemBankModels";
 
+import { validItemRevisionModel } from "@src/index";
+
 export interface CsvRowModel extends ItemRevisionModel {
   index: number;
 }
@@ -41,6 +43,7 @@ function parseLines(lines: string[], namespaces: NamespaceModel[]) {
       continue;
     }
 
+    row.valid = validItemRevisionModel(row);
     data.push(row);
     index = index + 1;
   }

src/ItemBank/ItemBankContainer.tsx

@@ -197,16 +197,16 @@ export class ItemBankContainer extends React.Component<
   };
 
   handleUpdateItems = (items: ItemRevisionModel[]) => {
-    const currentItem = items.length > 0 ? items[0] : undefined;
-    const lastItem = items[items.length - 1];
-    items.forEach(item => {
-      if (!validItemRevisionModel(item) && item !== lastItem) {
-        item.valid = false;
-      } else {
-        item.valid = true;
-      }
-    });
-    if (validItemRevisionModel(lastItem) || items.length === 0) {
+    let currentItem: ItemRevisionModel | undefined;
+    if (items.length > 1) {
+      const itemMatch = items.filter(
+        item => itemsAreEqual(this.state.currentItem, item) || false
+      );
+      currentItem = itemMatch[0] ? itemMatch[0] : items[0];
+    } else {
+      currentItem = undefined;
+    }
+    if (items[items.length - 1].itemKey) {
       items.push({});
     }
     this.setState({ items, currentItem }, () => {
@@ -442,13 +442,13 @@ export class ItemBankContainer extends React.Component<
       content = (
         <ItemBankEntry
           updateCsvText={this.handleUpdateCsvText}
-          updateItems={this.handleUpdateItems}
           namespaces={namespacesContent}
           sections={sectionsContent}
           csvText={csvText}
           items={items}
           deleteItem={this.deleteItem}
           clearItems={this.clearItems}
+          submitItems={this.handleUpdateItems}
         />
       );
     }

src/ItemBank/ItemBankEntry.tsx

@@ -10,9 +10,9 @@ import {
 
 export interface ItemBankEntryProps {
   updateCsvText: (csvText: string) => void;
-  updateItems: (items: ItemRevisionModel[]) => void;
   deleteItem: (item: number) => void;
   clearItems: () => void;
+  submitItems: (items: ItemRevisionModel[]) => void;
   namespaces: NamespaceModel[];
   sections: SectionModel[];
   csvText: string;
@@ -53,7 +53,7 @@ export class ItemBankEntry extends React.Component<
   };
 
   renderCsvEntry() {
-    const { csvText, namespaces } = this.props;
+    const { csvText, namespaces, submitItems } = this.props;
 
     return (
       <Accordion
@@ -67,8 +67,8 @@ export class ItemBankEntry extends React.Component<
               csvText={csvText}
               namespaces={namespaces}
               onCsvTextUpdate={this.props.updateCsvText}
-              onItemsUpdate={this.props.updateItems}
               onApply={this.onCsvApply}
+              onItemsUpdate={submitItems}
             />
           </div>
         </div>
@@ -79,11 +79,11 @@ export class ItemBankEntry extends React.Component<
   renderTableEntry() {
     const {
       items,
-      updateItems,
       clearItems,
       namespaces,
       sections,
-      deleteItem
+      deleteItem,
+      submitItems
     } = this.props;
 
     return (
@@ -94,11 +94,11 @@ export class ItemBankEntry extends React.Component<
       >
         <ItemEntryTable
           itemRows={items}
-          onItemsUpdate={updateItems}
           namespaces={namespaces}
           sections={sections}
           onDeleteItem={deleteItem}
           onClearItems={clearItems}
+          onSubmit={submitItems}
         />
       </Accordion>
     );

src/ItemBank/__tests__/__snapshots__/ItemBankEntry.test.tsx.snap

@@ -25,7 +25,6 @@ exports[`ItemBankEntry matches snapshot 1`] = `
             ]
           }
           onApply={[Function]}
-          onItemsUpdate={[Function]}
         />
       </div>
     </div>
@@ -57,7 +56,6 @@ exports[`ItemBankEntry matches snapshot 1`] = `
           },
         ]
       }
-      onItemsUpdate={[Function]}
       sections={
         Array [
           Object {

src/ItemEntryTable/ItemEntryTable.tsx

@@ -7,35 +7,78 @@ import {
   SelectOptionProps,
   SelectOption,
   Select,
+  validItemRevisionModel,
   ItemEntryRow
 } from "@src/index";
 
+export interface ItemEntryTableState {
+  itemRows: ItemRevisionModel[];
+}
+
 export interface ItemEntryTableProps {
   itemRows: ItemRevisionModel[];
   namespaces: NamespaceModel[];
   sections: SectionModel[];
-  onItemsUpdate: (items: ItemRevisionModel[]) => void;
   onDeleteItem: (items: number) => void;
   onClearItems: () => void;
+  onSubmit: (items: ItemRevisionModel[]) => void;
 }
 
-export class ItemEntryTable extends React.Component<ItemEntryTableProps, {}> {
+export class ItemEntryTable extends React.Component<
+  ItemEntryTableProps,
+  ItemEntryTableState
+> {
   constructor(props: ItemEntryTableProps) {
     super(props);
+    this.state = {
+      itemRows: props.itemRows
+    };
   }
 
   handleRowUpdate(row: ItemRevisionModel, key: number) {
-    const itemRows = this.props.itemRows.slice();
-    itemRows[key] = row;
-    this.props.onItemsUpdate(itemRows);
+    this.setState((state: ItemEntryTableState) => {
+      const itemRows = state.itemRows;
+      itemRows[key] = row;
+      if (validItemRevisionModel(row)) {
+        row.valid = true;
+        itemRows.push({});
+      } else {
+        row.valid = false;
+      }
+
+      return { itemRows };
+    });
   }
 
   handleDeleteRow(key: number) {
-    this.props.onDeleteItem(key);
+    // if the item is state but not in the props just remove it from the state.
+    if (key >= this.props.itemRows.length) {
+      this.setState({
+        itemRows: this.state.itemRows.filter((item, index) => index !== key)
+      });
+    } else {
+      this.setState((state: ItemEntryTableState) => {
+        this.props.onDeleteItem(key);
+
+        return {
+          itemRows: state.itemRows.filter((item, index) => index !== key)
+        };
+      });
+    }
   }
 
   handleClearItems() {
     this.props.onClearItems();
+    this.setState((state: ItemEntryTableState, props: ItemEntryTableProps) => {
+      return { itemRows: props.itemRows };
+    });
+  }
+
+  handleSubmit() {
+    this.props.onSubmit(this.state.itemRows);
+    this.setState((state: ItemEntryTableState, props: ItemEntryTableProps) => {
+      return { itemRows: props.itemRows };
+    });
   }
 
   renderHeader() {
@@ -46,14 +89,14 @@ export class ItemEntryTable extends React.Component<ItemEntryTableProps, {}> {
           <th scope="col">Bank</th>
           <th scope="col">Item</th>
           <th scope="col">Section</th>
-          <th>{this.renderClearButton()}</th>
+          <th />
         </tr>
       </thead>
     );
   }
 
   renderBody() {
-    const rows = this.props.itemRows.map((row, idx) => (
+    const rows = this.state.itemRows.map((row, idx) => (
       <ItemEntryRow
         row={row}
         onRowUpdate={editRow => this.handleRowUpdate(editRow, idx)}
@@ -62,21 +105,40 @@ export class ItemEntryTable extends React.Component<ItemEntryTableProps, {}> {
         sections={this.props.sections}
         key={idx}
         id={idx}
-        isLast={idx === this.props.itemRows.length - 1}
+        isLast={idx === this.state.itemRows.length - 1}
       />
     ));
 
-    return <tbody>{rows}</tbody>;
+    return (
+      <tbody>
+        {rows}
+        {this.renderFooter()}
+      </tbody>
+    );
   }
 
-  renderClearButton() {
+  renderFooter() {
     return (
-      <input
-        className={"btn btn-primary clear-button bg-light"}
-        onClick={this.props.onClearItems}
-        type="button"
-        value="clear all"
-      />
+      <tr>
+        <td />
+        <td>
+          <input
+            className="btn btn-primary submit-button bg-primary"
+            onClick={click => this.handleSubmit()}
+            type="button"
+            value="apply"
+          />
+        </td>
+        <td>
+          <input
+            className="btn btn-default clear-button bg-light"
+            onClick={click => this.handleClearItems()}
+            type="button"
+            value="clear all"
+          />
+        </td>
+        <td />
+      </tr>
     );
   }