JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: create access grant: bucket search feature

Browse Source 
WHAT:
search for bucket names during creating access grant flow

WHY:
make user be able to search for needed buckets. Just in case if the number of buckets is too large.

Change-Id: I73bcaa160c7a1f433d8f0f7213999e7e40543bbc
This commit is contained in:
VitaliiShpital 2020-11-30 17:33:49 +02:00 committed by Vitalii Shpital
parent 494bd5db81
commit 7eccfccfda
2 changed files with 60 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/satellite/src/components/accessGrants/permissions/BucketsDropdown.vue
View File

@ -7,9 +7,17 @@
<p class="buckets-dropdown__container__all" @click.stop="selectAllBuckets">
All
</p>
<label class="buckets-dropdown__container__search">
<input
class="buckets-dropdown__container__search__input"
placeholder="Search buckets"
type="text"
v-model="bucketSearch"
>
</label>
<div
class="buckets-dropdown__container__choices"
v-for="(name, index) in allBucketNames"
v-for="(name, index) in bucketsList"
:key="index"
>
<div
@ -27,6 +35,9 @@
/>
</div>
</div>
<p class="buckets-dropdown__container__no-buckets" v-if="!bucketsList.length">
No Buckets
</p>
</div>
</div>
</template>
@ -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;
}
}
</script>
@ -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 {

12
web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
View File

@ -12,12 +12,12 @@
class="buckets-selection__toggle-container__expand-icon"
alt="Arrow down (expand)"
/>
<BucketsDropdown
v-show="isDropdownShown"
@close="closeDropdown"
v-click-outside="closeDropdown"
/>
</div>
<BucketsDropdown
v-if="isDropdownShown"
@close="closeDropdown"
v-click-outside="closeDropdown"
/>
</div>
</template>
@ -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;