diff --git a/studio/src/app/components/core/storage/app-storage-files/app-storage-files.tsx b/studio/src/app/components/core/storage/app-storage-files/app-storage-files.tsx index f72f7d48d..991930795 100644 --- a/studio/src/app/components/core/storage/app-storage-files/app-storage-files.tsx +++ b/studio/src/app/components/core/storage/app-storage-files/app-storage-files.tsx @@ -1,6 +1,6 @@ -import {Component, ComponentInterface, EventEmitter, h, Host, State, Event, Prop, Watch} from '@stencil/core'; +import {Component, ComponentInterface, EventEmitter, h, Host, State, Event, Prop, Watch, Method} from '@stencil/core'; -import {StorageFile, StorageFilesList} from '@deckdeckgo/editor'; +import {AuthUser, StorageFile, StorageFilesList} from '@deckdeckgo/editor'; import store from '../../../../stores/error.store'; import i18n from '../../../../stores/i18n.store'; @@ -8,6 +8,7 @@ import i18n from '../../../../stores/i18n.store'; import {Constants} from '../../../../types/core/constants'; import {getFiles} from '../../../../providers/storage/storage.provider'; +import authStore from '../../../../stores/auth.store'; @Component({ tag: 'app-storage-files', @@ -34,8 +35,18 @@ export class AppStorageFiles implements ComponentInterface { @Event() selectAsset: EventEmitter; - componentWillLoad() { - this.search().then(() => {}); + private destroyListener; + + async componentDidLoad() { + this.destroyListener = authStore.onChange('authUser', async (_authUser: AuthUser | null) => { + await this.search(); + }); + + await this.search(); + } + + disconnectedCallback() { + this.destroyListener?.(); } @Watch('folder') @@ -43,6 +54,7 @@ export class AppStorageFiles implements ComponentInterface { await this.resetAndSearch(); } + @Method() async resetAndSearch() { this.disableInfiniteScroll = false; this.files = []; @@ -52,6 +64,10 @@ export class AppStorageFiles implements ComponentInterface { } private async search() { + if (!authStore.state.loggedIn) { + return; + } + const {items, nextPageToken}: StorageFilesList = await this.loadFiles(); this.files = [...this.files, ...items]; diff --git a/studio/src/app/pages/core/app-storage/app-storage.scss b/studio/src/app/pages/core/app-storage/app-storage.scss index bd6826829..7034d6fc3 100644 --- a/studio/src/app/pages/core/app-storage/app-storage.scss +++ b/studio/src/app/pages/core/app-storage/app-storage.scss @@ -1,3 +1,5 @@ +@use "../../../../global/theme/mixins/button"; + app-storage { app-storage-files { grid-template-columns: repeat(8, calc((100% - (7 * 32px)) / 8)); @@ -11,12 +13,25 @@ app-storage { } } - div.select { - width: fit-content; - margin: 16px 0 8px; + div.filter { + display: flex; + align-items: center; + + margin: 16px 16px 4px 0; + + div.select { + margin: 0 8px 0 0; + + ion-select { + background: white; + } + } + + button.refresh { + @include button.action; - ion-select { - background: white; + padding: 6px; + border-radius: 50%; } } } diff --git a/studio/src/app/pages/core/app-storage/app-storage.tsx b/studio/src/app/pages/core/app-storage/app-storage.tsx index 59d1d8587..cae76ccb8 100644 --- a/studio/src/app/pages/core/app-storage/app-storage.tsx +++ b/studio/src/app/pages/core/app-storage/app-storage.tsx @@ -9,6 +9,7 @@ import {renderI18n} from '../../../utils/core/i18n.utils'; import {signIn} from '../../../utils/core/signin.utils'; import {ImageEvents} from '../../../events/core/image/image.events'; +import {AppIcon} from '../../../components/core/app-icon/app-icon'; @Component({ tag: 'app-storage', @@ -25,6 +26,8 @@ export class AppStorage implements ComponentInterface { private imageEvents: ImageEvents = new ImageEvents(); + private storageFilesRef: HTMLAppStorageFilesElement | undefined; + constructor() { this.debounceLoading = debounce(() => (this.loading = false), 750); } @@ -76,24 +79,35 @@ export class AppStorage implements ComponentInterface { {this.renderFilter()} - + (this.storageFilesRef = el as HTMLAppStorageFilesElement)}> ); } private renderFilter() { return ( -
- (this.folder = $event.detail.value)} - interface="popover" - mode="md" - class="ion-padding-start ion-padding-end"> - Images - Data - +
+
+ (this.folder = $event.detail.value)} + interface="popover" + mode="md" + class="ion-padding-start ion-padding-end"> + Images + Data + +
+ +
); } diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index ff17e1e5a..d93ef4aa7 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -367,6 +367,7 @@ export namespace Components { interface AppStorageFiles { "admin": boolean; "folder": 'data' | 'images'; + "resetAndSearch": () => Promise; } interface AppStorageImages { }