woodpecker/web/src/views/admin/AdminSettings.vue

44 lines
1.4 KiB
Vue
Raw Normal View History

<template>
Header and Tabs UI Improvements (#1290) Some improvements to the Page Header and Tab UI. Original | New :--------:|:-------: ![image](https://user-images.githubusercontent.com/62170586/197360886-046f1016-ca39-4b69-8134-99ba88e3a0c2.png) | ![image](https://user-images.githubusercontent.com/62170586/197360819-7efd0d82-1412-465d-aefa-039164f97465.png) ![image](https://user-images.githubusercontent.com/62170586/197360872-f2ece5fd-7c0b-4e2c-8629-31524a412af5.png) | ![image](https://user-images.githubusercontent.com/62170586/197360830-49f09e0d-619e-4fa9-8e38-8d05d9404185.png) ![image](https://user-images.githubusercontent.com/62170586/197281776-e3de6441-9417-4614-8b25-1aaef0b8da61.png) | ![image](https://user-images.githubusercontent.com/62170586/197281698-40c66d34-76f3-4fd5-97e3-1c422b74844c.png) ![image](https://user-images.githubusercontent.com/62170586/196609248-ff150c6e-2995-4bcc-8573-49ffaf388446.png) | ![image](https://user-images.githubusercontent.com/62170586/197323734-7c1a1b79-0f41-4bf2-96a3-dd38df9e1415.png) ![image](https://user-images.githubusercontent.com/62170586/196609329-b7a6f37e-e8c2-4004-a98b-73f837122ff8.png) | ![image](https://user-images.githubusercontent.com/62170586/197323882-10141ffd-7411-4493-8291-b8000adc3cc5.png) What? - Create a new Scaffold component, which includes the header and tabs required for a page. - Use this component to wrap all the views that have a header. - Ensures consistency in headers between different pages. - [x] Add support to use custom html/component in place of title (for repo page, pipeline page, etc) - [x] Add support of right icon buttons (for repo page, pipeline page, etc) - [x] Refactor tabs handling using compositions (useTabsProvider, useTabsClient) - [x] Make new header ui resposive
2022-10-27 22:55:07 +00:00
<Scaffold enable-tabs>
<template #title>
{{ $t('repo.settings.settings') }}
</template>
<Tab id="secrets" :title="$t('admin.settings.secrets.secrets')">
<AdminSecretsTab />
</Tab>
<Tab id="agents" :title="$t('admin.settings.agents.agents')">
<AdminAgentsTab />
</Tab>
Header and Tabs UI Improvements (#1290) Some improvements to the Page Header and Tab UI. Original | New :--------:|:-------: ![image](https://user-images.githubusercontent.com/62170586/197360886-046f1016-ca39-4b69-8134-99ba88e3a0c2.png) | ![image](https://user-images.githubusercontent.com/62170586/197360819-7efd0d82-1412-465d-aefa-039164f97465.png) ![image](https://user-images.githubusercontent.com/62170586/197360872-f2ece5fd-7c0b-4e2c-8629-31524a412af5.png) | ![image](https://user-images.githubusercontent.com/62170586/197360830-49f09e0d-619e-4fa9-8e38-8d05d9404185.png) ![image](https://user-images.githubusercontent.com/62170586/197281776-e3de6441-9417-4614-8b25-1aaef0b8da61.png) | ![image](https://user-images.githubusercontent.com/62170586/197281698-40c66d34-76f3-4fd5-97e3-1c422b74844c.png) ![image](https://user-images.githubusercontent.com/62170586/196609248-ff150c6e-2995-4bcc-8573-49ffaf388446.png) | ![image](https://user-images.githubusercontent.com/62170586/197323734-7c1a1b79-0f41-4bf2-96a3-dd38df9e1415.png) ![image](https://user-images.githubusercontent.com/62170586/196609329-b7a6f37e-e8c2-4004-a98b-73f837122ff8.png) | ![image](https://user-images.githubusercontent.com/62170586/197323882-10141ffd-7411-4493-8291-b8000adc3cc5.png) What? - Create a new Scaffold component, which includes the header and tabs required for a page. - Use this component to wrap all the views that have a header. - Ensures consistency in headers between different pages. - [x] Add support to use custom html/component in place of title (for repo page, pipeline page, etc) - [x] Add support of right icon buttons (for repo page, pipeline page, etc) - [x] Refactor tabs handling using compositions (useTabsProvider, useTabsClient) - [x] Make new header ui resposive
2022-10-27 22:55:07 +00:00
</Scaffold>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import AdminAgentsTab from '~/components/admin/settings/AdminAgentsTab.vue';
import AdminSecretsTab from '~/components/admin/settings/AdminSecretsTab.vue';
Header and Tabs UI Improvements (#1290) Some improvements to the Page Header and Tab UI. Original | New :--------:|:-------: ![image](https://user-images.githubusercontent.com/62170586/197360886-046f1016-ca39-4b69-8134-99ba88e3a0c2.png) | ![image](https://user-images.githubusercontent.com/62170586/197360819-7efd0d82-1412-465d-aefa-039164f97465.png) ![image](https://user-images.githubusercontent.com/62170586/197360872-f2ece5fd-7c0b-4e2c-8629-31524a412af5.png) | ![image](https://user-images.githubusercontent.com/62170586/197360830-49f09e0d-619e-4fa9-8e38-8d05d9404185.png) ![image](https://user-images.githubusercontent.com/62170586/197281776-e3de6441-9417-4614-8b25-1aaef0b8da61.png) | ![image](https://user-images.githubusercontent.com/62170586/197281698-40c66d34-76f3-4fd5-97e3-1c422b74844c.png) ![image](https://user-images.githubusercontent.com/62170586/196609248-ff150c6e-2995-4bcc-8573-49ffaf388446.png) | ![image](https://user-images.githubusercontent.com/62170586/197323734-7c1a1b79-0f41-4bf2-96a3-dd38df9e1415.png) ![image](https://user-images.githubusercontent.com/62170586/196609329-b7a6f37e-e8c2-4004-a98b-73f837122ff8.png) | ![image](https://user-images.githubusercontent.com/62170586/197323882-10141ffd-7411-4493-8291-b8000adc3cc5.png) What? - Create a new Scaffold component, which includes the header and tabs required for a page. - Use this component to wrap all the views that have a header. - Ensures consistency in headers between different pages. - [x] Add support to use custom html/component in place of title (for repo page, pipeline page, etc) - [x] Add support of right icon buttons (for repo page, pipeline page, etc) - [x] Refactor tabs handling using compositions (useTabsProvider, useTabsClient) - [x] Make new header ui resposive
2022-10-27 22:55:07 +00:00
import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
import Tab from '~/components/layout/scaffold/Tab.vue';
import useAuthentication from '~/compositions/useAuthentication';
import useNotifications from '~/compositions/useNotifications';
const notifications = useNotifications();
const router = useRouter();
const i18n = useI18n();
const { user } = useAuthentication();
onMounted(async () => {
if (!user?.admin) {
notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
await router.replace({ name: 'home' });
}
if (!user?.admin) {
notifications.notify({ type: 'error', title: i18n.t('admin.settings.not_allowed') });
await router.replace({ name: 'home' });
}
});
</script>