From 11f3af1ede2b86be1476081d88379452013232f3 Mon Sep 17 00:00:00 2001
From: Yang Luo <hsluoyz@qq.com>
Date: Wed, 31 May 2023 17:36:11 +0800
Subject: [PATCH] Improve Select modes

---
 web/src/ApplicationEditPage.js  | 2 +-
 web/src/ChatEditPage.js         | 2 +-
 web/src/OrganizationEditPage.js | 2 +-
 web/src/PermissionEditPage.js   | 8 ++++----
 web/src/PricingEditPage.js      | 2 +-
 web/src/ProductEditPage.js      | 2 +-
 web/src/RoleEditPage.js         | 4 ++--
 web/src/WebhookEditPage.js      | 2 +-
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js
index af2e9e7b..cb41b5a8 100644
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@@ -564,7 +564,7 @@ class ApplicationEditPage extends React.Component {
             {Setting.getLabel(i18next.t("application:Grant types"), i18next.t("application:Grant types - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} mode="tags" style={{width: "100%"}}
+            <Select virtual={false} mode="multiple" style={{width: "100%"}}
               value={this.state.application.grantTypes}
               onChange={(value => {
                 this.updateApplicationField("grantTypes", value);
diff --git a/web/src/ChatEditPage.js b/web/src/ChatEditPage.js
index 77e3d357..31c36889 100644
--- a/web/src/ChatEditPage.js
+++ b/web/src/ChatEditPage.js
@@ -175,7 +175,7 @@ class ChatEditPage extends React.Component {
             {Setting.getLabel(i18next.t("general:Users"), i18next.t("chat:Users - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select mode="tags" style={{width: "100%"}} value={this.state.chat.users}
+            <Select virtual={false} mode="multiple" style={{width: "100%"}} value={this.state.chat.users}
               onChange={(value => {this.updateChatField("users", value);})}
               options={this.state.users.map((user) => Setting.getOption(`${user.owner}/${user.name}`, `${user.owner}/${user.name}`))}
             />
diff --git a/web/src/OrganizationEditPage.js b/web/src/OrganizationEditPage.js
index 7bfe7219..c0aa4d7d 100644
--- a/web/src/OrganizationEditPage.js
+++ b/web/src/OrganizationEditPage.js
@@ -205,7 +205,7 @@ class OrganizationEditPage extends React.Component {
             {Setting.getLabel(i18next.t("general:Languages"), i18next.t("general:Languages - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} mode="tags" style={{width: "100%"}}
+            <Select virtual={false} mode="multiple" style={{width: "100%"}}
               options={Setting.Countries.map((item) => {
                 return Setting.getOption(item.label, item.key);
               })}
diff --git a/web/src/PermissionEditPage.js b/web/src/PermissionEditPage.js
index 200b41c6..f316d664 100644
--- a/web/src/PermissionEditPage.js
+++ b/web/src/PermissionEditPage.js
@@ -217,7 +217,7 @@ class PermissionEditPage extends React.Component {
             {Setting.getLabel(i18next.t("role:Sub users"), i18next.t("role:Sub users - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select mode="tags" style={{width: "100%"}} value={this.state.permission.users}
+            <Select virtual={false} mode="multiple" style={{width: "100%"}} value={this.state.permission.users}
               onChange={(value => {this.updatePermissionField("users", value);})}
               options={this.state.users.map((user) => Setting.getOption(`${user.owner}/${user.name}`, `${user.owner}/${user.name}`))}
             />
@@ -228,7 +228,7 @@ class PermissionEditPage extends React.Component {
             {Setting.getLabel(i18next.t("role:Sub roles"), i18next.t("role:Sub roles - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} disabled={!this.hasRoleDefinition(this.state.model)} mode="tags" style={{width: "100%"}} value={this.state.permission.roles}
+            <Select disabled={!this.hasRoleDefinition(this.state.model)} virtual={false} mode="multiple" style={{width: "100%"}} value={this.state.permission.roles}
               onChange={(value => {this.updatePermissionField("roles", value);})}
               options={this.state.roles.filter(roles => (roles.owner !== this.state.roles.owner || roles.name !== this.state.roles.name)).map((permission) => Setting.getOption(`${permission.owner}/${permission.name}`, `${permission.owner}/${permission.name}`))
               } />
@@ -267,7 +267,7 @@ class PermissionEditPage extends React.Component {
             {Setting.getLabel(i18next.t("general:Resources"), i18next.t("permission:Resources - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.permission.resources}
+            <Select virtual={false} mode="multiple" style={{width: "100%"}} value={this.state.permission.resources}
               onChange={(value => {this.updatePermissionField("resources", value);})}
               options={this.state.resources.map((resource) => Setting.getOption(`${resource.name}`, `${resource.name}`))
               } />
@@ -278,7 +278,7 @@ class PermissionEditPage extends React.Component {
             {Setting.getLabel(i18next.t("permission:Actions"), i18next.t("permission:Actions - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.permission.actions} onChange={(value => {
+            <Select virtual={false} mode="multiple" style={{width: "100%"}} value={this.state.permission.actions} onChange={(value => {
               this.updatePermissionField("actions", value);
             })}
             options={[
diff --git a/web/src/PricingEditPage.js b/web/src/PricingEditPage.js
index 28b6727b..8ac21bbb 100644
--- a/web/src/PricingEditPage.js
+++ b/web/src/PricingEditPage.js
@@ -181,7 +181,7 @@ class PricingEditPage extends React.Component {
             {Setting.getLabel(i18next.t("general:Plans"), i18next.t("general:Plans - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select mode="tags" style={{width: "100%"}} value={this.state.pricing.plans}
+            <Select virtual={false} mode="multiple" style={{width: "100%"}} value={this.state.pricing.plans}
               onChange={(value => {
                 this.updatePricingField("plans", value);
               })}
diff --git a/web/src/ProductEditPage.js b/web/src/ProductEditPage.js
index e8ab50d5..42e5f929 100644
--- a/web/src/ProductEditPage.js
+++ b/web/src/ProductEditPage.js
@@ -228,7 +228,7 @@ class ProductEditPage extends React.Component {
             {Setting.getLabel(i18next.t("product:Payment providers"), i18next.t("product:Payment providers - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.product.providers} onChange={(value => {this.updateProductField("providers", value);})}>
+            <Select virtual={false} mode="multiple" style={{width: "100%"}} value={this.state.product.providers} onChange={(value => {this.updateProductField("providers", value);})}>
               {
                 this.state.providers.map((provider, index) => <Option key={index} value={provider.name}>{provider.name}</Option>)
               }
diff --git a/web/src/RoleEditPage.js b/web/src/RoleEditPage.js
index a9c9cbf0..a21b4b5d 100644
--- a/web/src/RoleEditPage.js
+++ b/web/src/RoleEditPage.js
@@ -141,7 +141,7 @@ class RoleEditPage extends React.Component {
             {Setting.getLabel(i18next.t("role:Sub users"), i18next.t("role:Sub users - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select mode="tags" style={{width: "100%"}} value={this.state.role.users}
+            <Select virtual={false} mode="multiple" style={{width: "100%"}} value={this.state.role.users}
               onChange={(value => {this.updateRoleField("users", value);})}
               options={this.state.users.map((user) => Setting.getOption(`${user.owner}/${user.name}`, `${user.owner}/${user.name}`))}
             />
@@ -152,7 +152,7 @@ class RoleEditPage extends React.Component {
             {Setting.getLabel(i18next.t("role:Sub roles"), i18next.t("role:Sub roles - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} mode="tags" style={{width: "100%"}} value={this.state.role.roles} onChange={(value => {this.updateRoleField("roles", value);})}
+            <Select virtual={false} mode="multiple" style={{width: "100%"}} value={this.state.role.roles} onChange={(value => {this.updateRoleField("roles", value);})}
               options={this.state.roles.filter(role => (role.owner !== this.state.role.owner || role.name !== this.state.role.name)).map((role) => Setting.getOption(`${role.owner}/${role.name}`, `${role.owner}/${role.name}`))
               } />
           </Col>
diff --git a/web/src/WebhookEditPage.js b/web/src/WebhookEditPage.js
index 18b52493..454e4c54 100644
--- a/web/src/WebhookEditPage.js
+++ b/web/src/WebhookEditPage.js
@@ -252,7 +252,7 @@ class WebhookEditPage extends React.Component {
             {Setting.getLabel(i18next.t("webhook:Events"), i18next.t("webhook:Events - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <Select virtual={false} mode="tags" style={{width: "100%"}}
+            <Select virtual={false} mode="multiple" style={{width: "100%"}}
               value={this.state.webhook.events}
               onChange={value => {
                 this.updateWebhookField("events", value);