copy ok

src/components/common/schema/Schema.jsx

@@ -33,9 +33,10 @@ class Schema extends Component {
             schemaID: props.schemaID || props.location.state.schemaID,
             schemaName: props.schemaName || props.location.state.schemaName,
             editSchemaName: '',
+            allData: '',
             data: '',
-            page: '',
-            pageSize: '',
+            page: '1',
+            pageSize: '15',
             once: 0
         };
     }
@@ -81,8 +82,9 @@ class Schema extends Component {
         this.setState({
             page,
             pageSize,
+            allData: data,
             data: data.slice((page - 1) * pageSize, page * pageSize)
-        })
+        });
     };
 
     fetchData = (referenceID) => {
@@ -119,31 +121,10 @@ class Schema extends Component {
         }
     };
 
-    IfReferenceThenFillSchemaDataBeforeCURDExceptNameChange = (referenceID, schemaID, next) => {
-        // how about making CACHE always no reference but data?
-        // when get data is null meanwhile reference no-null
-        // fill it with case data!
-        // so that, care about database only!
-
-        // how to use?
-        // this.IfReferenceThenFillSchemaDataBeforeCURDExceptNameChange('ecommerce_schemaID', 'schema_1543558931741_90616546', ()=>{console.log(1)}
-
-        this.fetchData(referenceID).then((schemaData) => {
-            let varObj = {
-                schemaData,
-                id: schemaID,
-                updatedAt: new Date().getTime(),
-                schemaState: ''
-            };
-            request('http://123.206.193.98:3000/graphql', UPDATE_SCHEMA, varObj).then(
-                data => {
-                    if (data.update_schema !== null) {
-                        return new Promise((resolve, reject) => {
-                            next()
-                        });
-                    }
-                })
-        });
+    receiveDataFromTable = (data) => {
+      this.setState({
+          data
+      })
     };
 
     componentWillReceiveProps(next) {
@@ -172,10 +153,10 @@ class Schema extends Component {
                         }
 
                         // let schemaName = data.schema_by_id.schemaName;
-                        let reference = data.schema_by_id.reference;
 
                         if (data.schema_by_id === null) data = [];
                         else {
+                            let reference = data.schema_by_id.reference;
                             data = JSON.parse(data.schema_by_id.schemaData);
                             if (data.length === 0 && reference !== '' && this.state.once === 0) {
                                 this.fetchData(reference).then((data) => {
@@ -278,12 +259,13 @@ class Schema extends Component {
                                                                                     :
                                                                                     <DeleteTableButton
                                                                                         currentTable={table.name}
-                                                                                        currentTableIndex={data.findIndex(obj => obj.name === table.name)}
+                                                                                        schemaData={data}
                                                                                         schemaID={this.state.schemaID}
                                                                                         userID={userID}
                                                                                         showTablePagination={this.showTablePagination}
                                                                                         page={this.state.page}
                                                                                         pageSize={this.state.pageSize}
+                                                                                        fetchData={this.fetchData}
                                                                                     />
                                                                             }
 
@@ -291,7 +273,6 @@ class Schema extends Component {
                                                                     </Col>
                                                                 </Row>
                                                             </div>
-
                                                         ))
                                                         :
                                                         data.slice(0, 15).map(table => (
@@ -317,16 +298,19 @@ class Schema extends Component {
                                                                             :
                                                                             <DeleteTableButton
                                                                                 currentTable={table.name}
-                                                                                currentTableIndex={data.findIndex(obj => obj.name === table.name)}
+                                                                                schemaData={data}
                                                                                 schemaID={this.state.schemaID}
+                                                                                showTablePagination={this.showTablePagination}
+                                                                                page={this.state.page}
+                                                                                pageSize={this.state.pageSize}
                                                                                 userID={userID}
+                                                                                fetchData={this.fetchData}
                                                                             />
                                                                     }
                                                                 </span>
                                                                     </Col>
                                                                 </Row>
                                                             </div>
-
                                                         ))
                                                 }
                                             </div>
@@ -373,7 +357,6 @@ class Schema extends Component {
                                         this.state.currentTable === 'add' ?
                                             <Table
                                                 currentTable={''}
-                                                currentTableIndex={-2}
                                                 columns={[]}
                                                 remark=''
                                                 schemaID={this.state.schemaID}
@@ -384,14 +367,18 @@ class Schema extends Component {
                                             /> :
                                             <Table
                                                 currentTable={this.state.currentTable}
-                                                currentTableIndex={this.state.currentTable === '' ? -2 : data.findIndex(obj => obj.name === this.state.currentTable)}
-                                                columns={this.findColumns(data)}
-                                                remark={this.findRemark(data)}
+                                                schemaData={data}
+                                                columns={this.findColumns(data.length !== 0? data : this.state.data)}
+                                                remark={this.findRemark(data.length !== 0? data : this.state.data)}
                                                 schemaID={this.state.schemaID}
                                                 schemaName={this.state.schemaName}
                                                 userID={userID}
                                                 goBack={this.goBack}
                                                 trialcase={trialcase}
+                                                fetchData={this.fetchData}
+                                                showTablePagination={this.showTablePagination}
+                                                page={this.state.page}
+                                                pageSize={this.state.pageSize}
                                             />
                                 }
 
@@ -537,7 +524,6 @@ class DeleteTableButton extends Component {
 
         return (
             <Query query={gql(SHOW_TABLE)} variables={{schema_id: schemaID}}>
-
                 {
                     ({loading, error, data}) => {
                         if (loading)
@@ -546,54 +532,10 @@ class DeleteTableButton extends Component {
                             return 'error';
 
                         let schemaData = data;
+                        let referenceID = data.schema_by_id.reference;
 
                         return (
-                            <Mutation
-                                mutation={gql(UPDATE_SCHEMA)}
-                                update={(cache, {data: {update_schema}}) => {
-                                    let data = cache.readQuery({
-                                        query: gql(SHOW_TABLE),
-                                        variables: {schema_id: schemaID}
-                                    });
-                                    data.schema_by_id = update_schema;
-
-                                    let showSchemaData = cache.readQuery({
-                                        query: gql(SHOW_SCHEMA),
-                                        variables: {user_id: userID}
-                                    });
-                                    let schemas = showSchemaData.schema_by_props;
-                                    // console.log('schemas', schemas);
-                                    let targetSchema = schemas.find(obj => obj.schemaName === update_schema.schemaName);
-                                    // console.log('targetSchema', targetSchema);
-                                    let targetSchemaIndex = schemas.findIndex(obj => obj.schemaName === update_schema.schemaName);
-                                    // console.log('targetSchemaIndex', targetSchemaIndex);
-                                    let targetTables = JSON.parse(schemas[targetSchemaIndex].schemaData);
-                                    // console.log('targetTables', targetTables);
-                                    let targetTableIndex = targetTables.findIndex(obj => obj.name === this.props.currentTable);
-                                    // console.log('targetTableIndex', targetTableIndex);
-                                    targetTables.splice(targetTableIndex, 1);
-                                    // console.log('targetTablesAfterDelete', targetTables);
-                                    let temp = {schemaData: JSON.stringify(targetTables)};
-                                    // console.log('temp', temp);
-                                    let tempSchema = {...targetSchema, ...temp};
-                                    // console.log('tempSchema', tempSchema);
-                                    showSchemaData.schema_by_props.splice(targetSchemaIndex, 1, tempSchema);
-
-                                    cache.writeQuery(
-                                        {
-                                            query: gql(SHOW_TABLE),
-                                            variables: {schema_id: schemaID},
-                                            data
-                                        },
-                                        {
-                                            query: gql(SHOW_SCHEMA),
-                                            variables: {user_id: userID},
-                                            showSchemaData
-                                        }
-                                    );
-                                }}
-                            >
-
+                            <Mutation mutation={gql(UPDATE_SCHEMA)}>
                                 {(update_schema, {loading, error}) => {
                                     if (loading)
                                         return <Spin style={{marginLeft: 30, marginTop: 10}}/>;
@@ -605,9 +547,14 @@ class DeleteTableButton extends Component {
                                     if (schemaData.schema_by_id === null) schemaCols = [];
                                     else schemaCols = JSON.parse(schemaData.schema_by_id.schemaData);
 
-                                    const index = this.props.currentTableIndex;
+                                    const index = this.props.schemaData.findIndex(obj => obj.name === this.props.currentTable);
                                     if (index === -1) {
-                                        console.log('数据库信息不匹配');
+                                        // 先取数据，然后删除，然后填充
+                                        this.props.fetchData(referenceID).then(value => {
+                                            schemaCols = JSON.parse(value);
+                                            const index = schemaCols.findIndex(obj => obj.name === this.props.currentTable);
+                                            schemaCols.splice(index, 1);
+                                        });
                                     } else {
                                         schemaCols.splice(index, 1);
                                     }
@@ -621,9 +568,7 @@ class DeleteTableButton extends Component {
                                                           schemaData: JSON.stringify(schemaCols)
                                                       }
                                                   });
-                                                  this.props.showTablePagination ?
-                                                      this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols) : (() => {
-                                                      })()
+                                                  this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols)
                                               }}>
 
                                         </Icon>
@@ -635,6 +580,8 @@ class DeleteTableButton extends Component {
                 }
 
             </Query>
+
+
         )
     }
 }

src/components/common/schema/Table.js

@@ -114,7 +114,7 @@ class Table extends Component {
             <div>
                 <div className="column-menu" onClick={this.props.goBack}>
                     {/*()=>this.props.history.goBack()*/}
-                    <Icon type="left" style={{color:'#3187FA'}} /> {schemaName}
+                    <Icon type="left" style={{color: '#3187FA'}}/> {schemaName}
                 </div>
 
                 <Layout style={{zIndex: '0'}}>
@@ -124,7 +124,7 @@ class Table extends Component {
                             <Input
                                 value={this.state.currentTable}
                                 placeholder="please input table name"
-                                style={{width: 200, margin:'10px 0'}}
+                                style={{width: 200, margin: '10px 0'}}
                                 onChange={(e) => {
                                     this.setState({currentTable: e.target.value})
                                 }}/>
@@ -135,7 +135,7 @@ class Table extends Component {
                             <Input
                                 value={this.state.remark}
                                 placeholder="please input table remark"
-                                style={{width: 250, margin:'10px 0'}}
+                                style={{width: 250, margin: '10px 0'}}
                                 onChange={(e) => {
                                     this.setState({remark: e.target.value})
                                 }}/>
@@ -160,7 +160,8 @@ class Table extends Component {
                                             onChange={this.handleTypeChange(index)}>
                                             {
                                                 this.state.types.map((value) =>
-                                                    <Option key={Math.random()+'types'} value={value.toLowerCase()}>{value}</Option>
+                                                    <Option key={Math.random() + 'types'}
+                                                            value={value.toLowerCase()}>{value}</Option>
                                                 )
                                             }
                                         </Select>
@@ -170,15 +171,17 @@ class Table extends Component {
                                             onChange={this.handleDescChange(index)}>
                                             {
                                                 this.state.descriptions.map((value) =>
-                                                    <Option key={Math.random()+'descriptions'} value={value.toLowerCase()}>{value}</Option>
+                                                    <Option key={Math.random() + 'descriptions'}
+                                                            value={value.toLowerCase()}>{value}</Option>
                                                 )
                                             }
                                         </Select>
                                         {
-                                            trialcase?
+                                            trialcase ?
                                                 ''
                                                 :
-                                                <Icon type="delete" theme="twoTone" style={{cursor: 'pointer'}} onClick={this.handleColDelete(index)}/>
+                                                <Icon type="delete" theme="twoTone" style={{cursor: 'pointer'}}
+                                                      onClick={this.handleColDelete(index)}/>
                                         }
                                     </div>
                                 )
@@ -205,7 +208,7 @@ class Table extends Component {
                         </div>
 
                         {
-                            trialcase?
+                            trialcase ?
                                 ''
                                 :
                                 <div style={{marginTop: 20}}>
@@ -216,6 +219,11 @@ class Table extends Component {
                                         currentTableIndex={this.props.currentTableIndex}
                                         schemaID={schemaID}
                                         userID={userID}
+                                        schemaData={this.props.schemaData}
+                                        fetchData={this.props.fetchData}
+                                        showTablePagination={this.props.showTablePagination}
+                                        page={this.props.page}
+                                        pageSize={this.props.pageSize}
                                     />
                                 </div>
                         }
@@ -231,6 +239,13 @@ export default Table;
 
 
 class UpdateTableButton extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            originTableName: props.currentTable
+        }
+
+    }
 
     render() {
         let schemaID = this.props.schemaID;
@@ -253,40 +268,12 @@ class UpdateTableButton extends Component {
                             return 'error';
 
                         let schemaData = data;
+                        let referenceID = data.schema_by_id.reference;
 
                         return (
                             <Mutation
                                 mutation={gql(UPDATE_SCHEMA)}
-                                update={(cache, {data: {update_schema}}) => {
-                                    let data = cache.readQuery({
-                                        query: gql(SHOW_TABLE),
-                                        variables: {schema_id: schemaID}
-                                    });
-
-                                    data.schema_by_id = update_schema;
-
-                                    let showSchemaData = cache.readQuery({
-                                        query: gql(SHOW_SCHEMA),
-                                        variables: {user_id: userID}
-                                    });
-
-                                    let index = showSchemaData.schema_by_props.findIndex(obj => obj.schemaName === update_schema.schemaName);
-                                    showSchemaData.schema_by_props.splice(index, 1, update_schema);
-
-                                    cache.writeQuery(
-                                        {
-                                            query: gql(SHOW_TABLE),
-                                            variables: {schema_id: schemaID},
-                                            data
-                                        },
-                                        {
-                                            query: gql(SHOW_SCHEMA),
-                                            variables: {user_id: userID},
-                                            showSchemaData
-                                        }
-                                    );
-
-                                }}
+                                refetchQueries={[{query: gql(SHOW_TABLE), variables: {schema_id: this.props.schemaID}}]}
                             >
 
                                 {(update_schema, {loading, error}) => {
@@ -315,11 +302,17 @@ class UpdateTableButton extends Component {
                                         cols
                                     };
 
-                                    const index = this.props.currentTableIndex;
+                                    const index = this.state.originTableName === '' ? -2 : this.props.schemaData.findIndex(obj => obj.name === this.state.originTableName)
                                     if (index === -2) {
                                         schemaCols.push(newTable);
                                     } else if (index === -1) {
                                         console.log('进行了一次删除操作 或 未知错误，数据库信息不匹配');
+                                        // 先取数据，然后替换，然后填充
+                                        this.props.fetchData(referenceID).then(value => {
+                                            schemaCols = JSON.parse(value);
+                                            const index = schemaCols.findIndex(obj => obj.name === this.state.originTableName);
+                                            schemaCols.splice(index, 1, newTable);
+                                        });
                                     } else {
                                         schemaCols.splice(index, 1, newTable);
                                     }
@@ -333,6 +326,7 @@ class UpdateTableButton extends Component {
                                                         schemaData: JSON.stringify(schemaCols)
                                                     }
                                                 });
+                                                this.props.showTablePagination(this.props.page, this.props.pageSize, schemaCols)
                                             }}>
                                                 save
                                             </Button>