Fix property empty issue

web/src/EnforcerEditPage.js

@@ -169,7 +169,7 @@ class EnforcerEditPage extends React.Component {
             <Select virtual={false} disabled={Setting.builtInObject(this.state.enforcer)} style={{width: "100%"}} value={this.state.enforcer.model} onChange={(model => {
               this.updateEnforcerField("model", model);
             })}
-            options={this.state.models.map((model) => Setting.getOption(model.displayName, `${model.owner}/${model.name}`))
+            options={this.state.models.map((model) => Setting.getOption(`${model.owner}/${model.name}`, `${model.owner}/${model.name}`))
             } />
           </Col>
         </Row>
@@ -181,7 +181,7 @@ class EnforcerEditPage extends React.Component {
             <Select virtual={false} disabled={Setting.builtInObject(this.state.enforcer)} style={{width: "100%"}} value={this.state.enforcer.adapter} onChange={(adapter => {
               this.updateEnforcerField("adapter", adapter);
             })}
-            options={this.state.adapters.map((adapter) => Setting.getOption(adapter.name, `${adapter.owner}/${adapter.name}`))
+            options={this.state.adapters.map((adapter) => Setting.getOption(`${adapter.owner}/${adapter.name}`, `${adapter.owner}/${adapter.name}`))
             } />
           </Col>
         </Row>

web/src/EnforcerListPage.js

@@ -75,7 +75,7 @@ class EnforcerListPage extends BaseListPage {
         title: i18next.t("general:Name"),
         dataIndex: "name",
         key: "name",
-        width: "150px",
+        width: "200px",
         fixed: "left",
         sorter: true,
         ...this.getColumnSearchProps("name"),
@@ -116,10 +116,42 @@ class EnforcerListPage extends BaseListPage {
         title: i18next.t("general:Display name"),
         dataIndex: "displayName",
         key: "displayName",
-        width: "200px",
+        // width: "200px",
         sorter: true,
         ...this.getColumnSearchProps("displayName"),
       },
+      {
+        title: i18next.t("general:Model"),
+        dataIndex: "model",
+        key: "model",
+        width: "250px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/models/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
+      {
+        title: i18next.t("general:Adapter"),
+        dataIndex: "adapter",
+        key: "adapter",
+        width: "250px",
+        fixed: "left",
+        sorter: true,
+        ...this.getColumnSearchProps("name"),
+        render: (text, record, index) => {
+          return (
+            <Link to={`/adapters/${text}`}>
+              {text}
+            </Link>
+          );
+        },
+      },
       {
         title: i18next.t("general:Is enabled"),
         dataIndex: "isEnabled",
@@ -136,7 +168,7 @@ class EnforcerListPage extends BaseListPage {
         title: i18next.t("general:Action"),
         dataIndex: "",
         key: "op",
-        width: "170px",
+        width: "180px",
         fixed: (Setting.isMobile()) ? "false" : "right",
         render: (text, record, index) => {
           return (

web/src/UserEditPage.js

@@ -570,7 +570,7 @@ class UserEditPage extends React.Component {
                   {name: "ID card back", value: "idCardBack"},
                   {name: "ID card with person", value: "idCardWithPerson"},
                 ].map((entry) => {
-                  return this.renderImage(this.state.user.properties[entry.value] || "", this.getIdCardType(entry.name), this.getIdCardText(entry.name), entry.value, disabled);
+                  return this.renderImage(this.state.user.properties === null ? "" : (this.state.user.properties[entry.value] || ""), this.getIdCardType(entry.name), this.getIdCardText(entry.name), entry.value, disabled);
                 })
               }
             </Row>
@@ -995,11 +995,13 @@ class UserEditPage extends React.Component {
       <Col span={4} style={{textAlign: "center", margin: "auto"}} key={tag}>
         {
           imgUrl ?
-            <a target="_blank" rel="noreferrer" href={imgUrl} style={{marginBottom: "10px"}}>
-              <AccountAvatar src={imgUrl} alt={imgUrl} size={90} style={{marginBottom: "20px"}} />
-            </a>
+            <div style={{marginBottom: "10px"}}>
+              <a target="_blank" rel="noreferrer" href={imgUrl} style={{marginBottom: "10px"}}>
+                <AccountAvatar src={imgUrl} alt={imgUrl} height={150} />
+              </a>
+            </div>
             :
-            <Col style={{height: "78%", border: "1px dotted grey", borderRadius: 3, marginBottom: 5}}>
+            <Col style={{height: "78%", border: "1px dotted grey", borderRadius: 3, marginBottom: "10px"}}>
               <div style={{fontSize: 30, margin: 10}}>+</div>
               <div style={{verticalAlign: "middle", marginBottom: 10}}>{`Upload ${title}...`}</div>
             </Col>

web/src/account/AccountAvatar.js

@@ -17,7 +17,7 @@ import {MetaMaskAvatar} from "react-metamask-avatar";
 
 class AccountAvatar extends React.Component {
   render() {
-    const {src, size} = this.props;
+    const {src, size, width, height} = this.props;
     // The avatar for Metamask account is directly generated by an algorithm based on the address
     // src = "metamask:0xC304b2cC0Be8E9ce10fF3Afd34820Ed306A23600";
     const matchMetaMask = src.match(/^metamask:(\w+)$/);
@@ -27,9 +27,19 @@ class AccountAvatar extends React.Component {
         <MetaMaskAvatar address={address} size={size} />
       );
     }
-    return (
-      <img width={size} height={size} src={src} />
-    );
+    if (size !== undefined) {
+      return (
+        <img width={size} height={size} src={src} />
+      );
+    } else if (width === undefined) {
+      return (
+        <img height={height} src={src} />
+      );
+    } else if (height === undefined) {
+      return (
+        <img width={width} src={src} />
+      );
+    }
   }
 }
 

web/src/table/PoliciyTable.js

@@ -33,11 +33,11 @@ class PolicyTable extends React.Component {
   }
 
   count = 0;
-  pageSize = 10;
+  pageSize = 100;
 
   getIndex(index) {
     // Need to be used in all place when modify table. Parameter is the row index in table, need to calculate the index in dataSource.
-    return index + (this.state.page - 1) * 10;
+    return index + (this.state.page - 1) * this.pageSize;
   }
 
   UNSAFE_componentWillMount() {
@@ -165,7 +165,7 @@ class PolicyTable extends React.Component {
   renderTable(table) {
     const columns = [
       {
-        title: "Rule Type",
+        title: i18next.t("adapter:Rule type"),
         dataIndex: "Ptype",
         width: "100px",
         // render: (text, record, index) => {
@@ -270,8 +270,9 @@ class PolicyTable extends React.Component {
         },
       },
       {
-        title: "Option",
-        key: "option",
+        title: i18next.t("general:Action"),
+        dataIndex: "",
+        key: "op",
         width: "100px",
         render: (text, record, index) => {
           const editable = this.isEditing(index);
@@ -304,7 +305,6 @@ class PolicyTable extends React.Component {
           onChange: (page) => this.setState({
             page: page,
           }),
-          disabled: this.state.editingIndex !== "" || Setting.builtInObject({owner: this.props.owner, name: this.props.name}),
           current: this.state.page,
         }}
         columns={columns} dataSource={table} rowKey="key" size="middle" bordered