7b2b3ac37d
# Pull Request Template ## Description This PR updates settings page UI ## Type of change - [x] New feature (non-breaking change which adds functionality) ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
75 lines
2.3 KiB
Vue
75 lines
2.3 KiB
Vue
<script setup>
|
|
import { useStoreGetters, useStore } from 'dashboard/composables/store';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { useBranding } from 'shared/composables/useBranding';
|
|
import { picoSearch } from '@scmmishra/pico-search';
|
|
import IntegrationItem from './IntegrationItem.vue';
|
|
import SettingsLayout from '../SettingsLayout.vue';
|
|
import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
|
|
|
|
const store = useStore();
|
|
const getters = useStoreGetters();
|
|
const { replaceInstallationName } = useBranding();
|
|
|
|
const searchQuery = ref('');
|
|
const uiFlags = getters['integrations/getUIFlags'];
|
|
|
|
const integrationList = computed(
|
|
() => getters['integrations/getAppIntegrations'].value
|
|
);
|
|
|
|
const filteredIntegrationList = computed(() => {
|
|
const query = searchQuery.value.trim();
|
|
if (!query) return integrationList.value;
|
|
return picoSearch(integrationList.value, query, ['name', 'description']);
|
|
});
|
|
|
|
onMounted(() => {
|
|
store.dispatch('integrations/get');
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<SettingsLayout
|
|
:is-loading="uiFlags.isFetching"
|
|
:loading-message="$t('INTEGRATION_SETTINGS.LOADING')"
|
|
>
|
|
<template #header>
|
|
<BaseSettingsHeader
|
|
v-model:search-query="searchQuery"
|
|
:title="$t('INTEGRATION_SETTINGS.HEADER')"
|
|
:description="
|
|
replaceInstallationName($t('INTEGRATION_SETTINGS.DESCRIPTION'))
|
|
"
|
|
:link-text="$t('INTEGRATION_SETTINGS.LEARN_MORE')"
|
|
:search-placeholder="$t('INTEGRATION_SETTINGS.SEARCH_PLACEHOLDER')"
|
|
feature-name="integrations"
|
|
/>
|
|
</template>
|
|
<template #body>
|
|
<div class="flex-grow flex-shrink overflow-auto">
|
|
<span
|
|
v-if="!filteredIntegrationList.length && searchQuery"
|
|
class="flex-1 flex items-center justify-center py-20 text-center text-body-main !text-base text-n-slate-11"
|
|
>
|
|
{{ $t('INTEGRATION_SETTINGS.NO_RESULTS') }}
|
|
</span>
|
|
<div
|
|
v-else
|
|
class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"
|
|
>
|
|
<IntegrationItem
|
|
v-for="item in filteredIntegrationList"
|
|
:id="item.id"
|
|
:key="item.id"
|
|
:logo="item.logo"
|
|
:name="item.name"
|
|
:description="item.description"
|
|
:enabled="item.enabled"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</SettingsLayout>
|
|
</template>
|