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

web/satellite: migrated BucketsSelection component to use SFC composition api

Browse Source 
Change-Id: Ie7ec220ac021fe11b640f61aad0c648f53cc3071
This commit is contained in:
Vitalii 2023-03-23 17:05:22 +02:00
parent 174308f60e
commit d407408f24
2 changed files with 36 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/BucketsDropdown.vue
View File

@ -2,8 +2,8 @@
// See LICENSE for copying information.
<template>
<div v-click-outside="closeDropdown" :class="`buckets-dropdown ${showScrollbar ? 'show-scroll' : ''}`">
<div :class="`buckets-dropdown__container ${showScrollbar ? 'show-scroll' : ''}`">
<div v-click-outside="closeDropdown" class="buckets-dropdown">
<div class="buckets-dropdown__container">
<p class="buckets-dropdown__container__all" @click.stop="clearSelectedBuckets">
All
</p>
@ -54,12 +54,6 @@ import { useStore } from '@/utils/hooks';
import SelectionIcon from '@/../static/images/accessGrants/selection.svg';
import UnselectIcon from '@/../static/images/accessGrants/unselect.svg';
const props = withDefaults(defineProps<{
showScrollbar: boolean,
}>(), {
showScrollbar: false,
});
const store = useStore();
const bucketSearch = ref<string>('');
@ -242,13 +236,4 @@ function closeDropdown(): void {
max-width: 14px;
max-height: 11px;
}
.show-scroll {
padding-right: 2px;
width: calc(100% - 2px);
}
.show-scroll::-webkit-scrollbar {
width: 4px;
}
</style>

79
web/satellite/src/components/onboardingTour/steps/cliFlow/permissions/BucketsSelection.vue
View File

@ -13,66 +13,55 @@
alt="Arrow down (expand)"
/>
</div>
<BucketsDropdown
v-if="isDropdownShown"
:show-scrollbar="showScrollbar"
/>
<BucketsDropdown v-if="isDropdownShown" />
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
<script setup lang="ts">
import { computed } from 'vue';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useStore } from '@/utils/hooks';
import BucketsDropdown from '@/components/onboardingTour/steps/cliFlow/permissions/BucketsDropdown.vue';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
// @vue/component
@Component({
components: {
ExpandIcon,
BucketsDropdown,
},
})
export default class BucketsSelection extends Vue {
@Prop({ default: false })
private readonly showScrollbar: boolean;
/**
* Toggles dropdown visibility.
*/
public toggleDropdown(): void {
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.BUCKET_NAMES);
const store = useStore();
/**
* Indicates if dropdown is shown.
*/
const isDropdownShown = computed((): boolean => {
return store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.BUCKET_NAMES;
});
/**
* Returns selection options (all or items count).
*/
const selectionLabel = computed((): string => {
const ALL_SELECTED = 'All';
if (!storedBucketNames.value.length) {
return ALL_SELECTED;
}
/**
* Indicates if dropdown is shown.
*/
public get isDropdownShown(): boolean {
return this.$store.state.appStateModule.viewsState.activeDropdown === APP_STATE_DROPDOWNS.BUCKET_NAMES;
}
return storedBucketNames.value.length.toString();
});
/**
* Returns selection options (all or items count).
*/
public get selectionLabel(): string {
const ALL_SELECTED = 'All';
/**
* Returns stored selected bucket names.
*/
const storedBucketNames = computed((): string[] => {
return store.state.accessGrantsModule.selectedBucketNames;
});
if (!this.storedBucketNames.length) {
return ALL_SELECTED;
}
return this.storedBucketNames.length.toString();
}
/**
* Returns stored selected bucket names.
*/
private get storedBucketNames(): string[] {
return this.$store.state.accessGrantsModule.selectedBucketNames;
}
/**
* Toggles dropdown visibility.
*/
function toggleDropdown(): void {
store.dispatch(APP_STATE_ACTIONS.TOGGLE_ACTIVE_DROPDOWN, APP_STATE_DROPDOWNS.BUCKET_NAMES);
}
</script>