github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-03 03:00:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

script[setup]: module-bar (#18457)

Browse Source
This commit is contained in:
Rijk van Zanten
2023-05-03 12:25:57 -04:00
committed by GitHub
parent 5d16e4c7e2
commit 04a3effe6b
3 changed files with 85 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/src/views/private/components/module-bar-avatar.vue
View File

@@ -50,61 +50,45 @@
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { addTokenToURL } from '@/api';
import { useAppStore } from '@/stores/app';
import { useNotificationsStore } from '@/stores/notifications';
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
import { Ref, computed, defineComponent, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { getRootPath } from '@/utils/get-root-path';
import { storeToRefs } from 'pinia';
import { Ref, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
export default defineComponent({
setup() {
const { t } = useI18n();
const { t } = useI18n();
const appStore = useAppStore();
const notificationsStore = useNotificationsStore();
const appStore = useAppStore();
const notificationsStore = useNotificationsStore();
const { notificationsDrawerOpen } = storeToRefs(appStore);
const { unread } = storeToRefs(notificationsStore);
const { notificationsDrawerOpen } = storeToRefs(appStore);
const { unread } = storeToRefs(notificationsStore);
const userStore = useUserStore();
const userStore = useUserStore();
const signOutActive = ref(false);
const signOutActive = ref(false);
const avatarURL = computed<string | null>(() => {
if (!userStore.currentUser || !('avatar' in userStore.currentUser) || !userStore.currentUser?.avatar) return null;
return addTokenToURL(`${getRootPath()}assets/${userStore.currentUser.avatar.id}?key=system-medium-cover`);
});
const avatarError: Ref<null | Event> = ref(null);
const userProfileLink = computed<string>(() => {
const id = userStore.currentUser?.id;
return `/users/${id}`;
});
const signOutLink = computed<string>(() => {
return `/logout`;
});
const userFullName = userStore.fullName ?? undefined;
return {
t,
userFullName,
avatarURL,
userProfileLink,
signOutActive,
signOutLink,
notificationsDrawerOpen,
unread,
avatarError,
};
},
const avatarURL = computed<string | null>(() => {
if (!userStore.currentUser || !('avatar' in userStore.currentUser) || !userStore.currentUser?.avatar) return null;
return addTokenToURL(`${getRootPath()}assets/${userStore.currentUser.avatar.id}?key=system-medium-cover`);
});
const avatarError: Ref<null | Event> = ref(null);
const userProfileLink = computed<string>(() => {
const id = userStore.currentUser?.id;
return `/users/${id}`;
});
const signOutLink = computed<string>(() => {
return `/logout`;
});
const userFullName = userStore.fullName ?? undefined;
</script>
<style lang="scss" scoped>

72
app/src/views/private/components/module-bar-logo.vue
View File

@@ -18,56 +18,44 @@
</component>
</template>
<script lang="ts">
<script lang="ts" setup>
import { useRequestsStore } from '@/stores/requests';
import { useSettingsStore } from '@/stores/settings';
import { computed, defineComponent, ref, toRefs, watch } from 'vue';
import { computed, ref, toRefs, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { getRootPath } from '@/utils/get-root-path';
export default defineComponent({
setup() {
const { t } = useI18n();
const { t } = useI18n();
const requestsStore = useRequestsStore();
const settingsStore = useSettingsStore();
const requestsStore = useRequestsStore();
const settingsStore = useSettingsStore();
const customLogoPath = computed<string | null>(() => {
if (settingsStore.settings === null) return null;
if (!settingsStore.settings?.project_logo) return null;
return `${getRootPath()}assets/${settingsStore.settings.project_logo}`;
});
const showLoader = ref(false);
const { queueHasItems } = toRefs(requestsStore);
watch(
() => queueHasItems.value,
(hasItems) => {
if (hasItems) showLoader.value = true;
}
);
const url = computed(() => settingsStore.settings?.project_url);
const urlTooltip = computed(() => {
return settingsStore.settings?.project_url ? t('view_project') : false;
});
return {
customLogoPath,
showLoader,
stopSpinnerIfQueueIsEmpty,
url,
urlTooltip,
};
function stopSpinnerIfQueueIsEmpty() {
if (queueHasItems.value === false) showLoader.value = false;
}
},
const customLogoPath = computed<string | null>(() => {
if (settingsStore.settings === null) return null;
if (!settingsStore.settings?.project_logo) return null;
return `${getRootPath()}assets/${settingsStore.settings.project_logo}`;
});
const showLoader = ref(false);
const { queueHasItems } = toRefs(requestsStore);
watch(
() => queueHasItems.value,
(hasItems) => {
if (hasItems) showLoader.value = true;
}
);
const url = computed(() => settingsStore.settings?.project_url);
const urlTooltip = computed(() => {
return settingsStore.settings?.project_url ? t('view_project') : false;
});
function stopSpinnerIfQueueIsEmpty() {
if (queueHasItems.value === false) showLoader.value = false;
}
</script>
<style lang="scss" scoped>

66
app/src/views/private/components/module-bar.vue
View File

@@ -28,8 +28,8 @@
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
<script lang="ts" setup>
import { computed } from 'vue';
import ModuleBarLogo from './module-bar-logo.vue';
import ModuleBarAvatar from './module-bar-avatar.vue';
import { useSettingsStore } from '@/stores/settings';
@@ -38,50 +38,40 @@ import { MODULE_BAR_DEFAULT } from '@/constants';
import { omit } from 'lodash';
import { useExtensions } from '@/extensions';
export default defineComponent({
components: {
ModuleBarLogo,
ModuleBarAvatar,
},
setup() {
const settingsStore = useSettingsStore();
const { modules: registeredModules } = useExtensions();
const settingsStore = useSettingsStore();
const { modules: registeredModules } = useExtensions();
const registeredModuleIDs = computed(() => registeredModules.value.map((module) => module.id));
const registeredModuleIDs = computed(() => registeredModules.value.map((module) => module.id));
const modules = computed(() => {
if (!settingsStore.settings) return [];
const modules = computed(() => {
if (!settingsStore.settings) return [];
return (settingsStore.settings.module_bar ?? MODULE_BAR_DEFAULT)
.filter((modulePart) => {
if (modulePart.type === 'link') return true;
return modulePart.enabled && registeredModuleIDs.value.includes(modulePart.id);
})
.map((modulePart) => {
if (modulePart.type === 'link') {
const link = omit<Record<string, any>>(modulePart, ['url']);
return (settingsStore.settings.module_bar ?? MODULE_BAR_DEFAULT)
.filter((modulePart) => {
if (modulePart.type === 'link') return true;
return modulePart.enabled && registeredModuleIDs.value.includes(modulePart.id);
})
.map((modulePart) => {
if (modulePart.type === 'link') {
const link = omit<Record<string, any>>(modulePart, ['url']);
if (modulePart.url.startsWith('/')) {
link.to = modulePart.url;
} else {
link.href = modulePart.url;
}
if (modulePart.url.startsWith('/')) {
link.to = modulePart.url;
} else {
link.href = modulePart.url;
}
return translate(link);
}
return translate(link);
}
const module = registeredModules.value.find((module) => module.id === modulePart.id)!;
const module = registeredModules.value.find((module) => module.id === modulePart.id)!;
return {
...modulePart,
...registeredModules.value.find((module) => module.id === modulePart.id),
to: `/${module.id}`,
};
});
return {
...modulePart,
...registeredModules.value.find((module) => module.id === modulePart.id),
to: `/${module.id}`,
};
});
return { modules };
},
});
</script>