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

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

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