diff --git a/web/satellite/src/components/accessGrants/permissions/BucketsDropdown.vue b/web/satellite/src/components/accessGrants/permissions/BucketsDropdown.vue index f0523689c..e320d5961 100644 --- a/web/satellite/src/components/accessGrants/permissions/BucketsDropdown.vue +++ b/web/satellite/src/components/accessGrants/permissions/BucketsDropdown.vue @@ -7,9 +7,17 @@

All

+
+

+ No Buckets +

@@ -46,6 +57,8 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants'; }, }) export default class BucketsDropdown extends Vue { + public bucketSearch: string = ''; + /** * Clears selection of specific buckets and closes dropdown. */ @@ -69,19 +82,24 @@ export default class BucketsDropdown extends Vue { return this.selectedBucketNames.includes(name); } + /** + * Returns stored bucket names list filtered by search string. + */ + public get bucketsList(): string[] { + const NON_EXIST_INDEX = -1; + const buckets: string[] = this.$store.state.bucketUsageModule.allBucketNames; + + return buckets.filter((name: string) => { + return name.indexOf(this.bucketSearch.toLowerCase()) !== NON_EXIST_INDEX; + }); + } + /** * Returns stored selected bucket names. */ public get selectedBucketNames(): string[] { return this.$store.state.accessGrantsModule.selectedBucketNames; } - - /** - * Returns all bucket names. - */ - public get allBucketNames(): string[] { - return this.$store.state.bucketUsageModule.allBucketNames; - } } @@ -103,14 +121,14 @@ export default class BucketsDropdown extends Vue { background-color: #fff; border: 1px solid rgba(56, 75, 101, 0.4); width: 100%; - padding-top: 10px; + padding: 10px 0; &__container { overflow-y: scroll; overflow-x: hidden; height: auto; width: 100%; - max-height: 300px; + max-height: 230px; background-color: #fff; border-radius: 6px; font-family: 'font_regular', sans-serif; @@ -120,6 +138,19 @@ export default class BucketsDropdown extends Vue { line-height: 21px; color: #384b65; + &__search { + padding: 5px 10px; + width: calc(100% - 20px); + + &__input { + font-size: 14px; + line-height: 18px; + border-radius: 6px; + width: calc(100% - 30px); + padding: 5px; + } + } + &__all { margin: 0; cursor: pointer; @@ -132,6 +163,19 @@ export default class BucketsDropdown extends Vue { } } + &__no-buckets { + font-family: 'font_bold', sans-serif; + margin: 0; + font-size: 18px; + line-height: 24px; + cursor: default; + color: #000; + background-color: #fff; + width: 100%; + padding: 15px 0; + text-align: center; + } + &__choices { &__item__unselect-icon { diff --git a/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue b/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue index a242644b0..8cbc05aa0 100644 --- a/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue +++ b/web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue @@ -12,12 +12,12 @@ class="buckets-selection__toggle-container__expand-icon" alt="Arrow down (expand)" /> - + @@ -82,9 +82,9 @@ export default class BucketsSelection extends Vue { border: 1px solid rgba(56, 75, 101, 0.4); font-family: 'font_regular', sans-serif; width: 235px; + position: relative; &__toggle-container { - position: relative; display: flex; align-items: center; justify-content: space-between;