feat(admin): improve navigation UI and move logs to drawer
- Add icons to all navigation tabs in admin panel - Rename 'Telegram Покупатели' tab to 'Покупатели' - Move logs view from navigation tab to Drawer component - Add logs button in TopLead component next to cache reset button - Group logs and cache reset buttons in ButtonGroup - Remove logs route from router
This commit is contained in:
@@ -3,51 +3,69 @@
|
||||
<TopLead/>
|
||||
<ul class="nav nav-tabs">
|
||||
<li :class="{active: route.name === 'general'}">
|
||||
<RouterLink :to="{name: 'general'}">Общие</RouterLink>
|
||||
<RouterLink :to="{name: 'general'}">
|
||||
<i class="fa fa-cog"></i> Общие
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li :class="{active: route.name === 'telegram'}">
|
||||
<RouterLink :to="{name: 'telegram'}">Telegram</RouterLink>
|
||||
<RouterLink :to="{name: 'telegram'}">
|
||||
<i class="fa fa-paper-plane"></i> Telegram
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li :class="{active: route.name === 'metrics'}">
|
||||
<RouterLink :to="{name: 'metrics'}">Метрика</RouterLink>
|
||||
<RouterLink :to="{name: 'metrics'}">
|
||||
<i class="fa fa-line-chart"></i> Метрика
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li :class="{active: route.name === 'store'}">
|
||||
<RouterLink :to="{name: 'store'}">Витрина</RouterLink>
|
||||
<RouterLink :to="{name: 'store'}">
|
||||
<i class="fa fa-shopping-bag"></i> Витрина
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li :class="{active: route.name === 'texts'}">
|
||||
<RouterLink :to="{name: 'texts'}">Тексты</RouterLink>
|
||||
<RouterLink :to="{name: 'texts'}">
|
||||
<i class="fa fa-file-text"></i> Тексты
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li :class="{active: route.name === 'orders'}">
|
||||
<RouterLink :to="{name: 'orders'}">Заказы</RouterLink>
|
||||
<RouterLink :to="{name: 'orders'}">
|
||||
<i class="fa fa-shopping-cart"></i> Заказы
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li :class="{active: route.name === 'mainpage'}">
|
||||
<RouterLink :to="{name: 'mainpage'}">Главная страница</RouterLink>
|
||||
<RouterLink :to="{name: 'mainpage'}">
|
||||
<i class="fa fa-home"></i> Главная страница
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li :class="{active: route.name === 'formbuilder'}">
|
||||
<RouterLink :to="{name: 'formbuilder'}">Форма заказа</RouterLink>
|
||||
<RouterLink :to="{name: 'formbuilder'}">
|
||||
<i class="fa fa-wpforms"></i> Форма заказа
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li :class="{active: route.name === 'customers'}">
|
||||
<RouterLink :to="{name: 'customers'}">Telegram Покупатели</RouterLink>
|
||||
<RouterLink :to="{name: 'customers'}">
|
||||
<i class="fa fa-users"></i> Покупатели
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li :class="{active: route.name === 'pulse'}">
|
||||
<RouterLink :to="{name: 'pulse'}">TeleCart Pulse</RouterLink>
|
||||
</li>
|
||||
|
||||
<li :class="{active: route.name === 'logs'}">
|
||||
<RouterLink :to="{name: 'logs'}">Журнал событий</RouterLink>
|
||||
<RouterLink :to="{name: 'pulse'}">
|
||||
<i class="fa fa-heartbeat"></i> TeleCart Pulse
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li :class="{active: route.name === 'cron'}">
|
||||
<RouterLink :to="{name: 'cron'}">CRON</RouterLink>
|
||||
<RouterLink :to="{name: 'cron'}">
|
||||
<i class="fa fa-clock-o"></i> CRON
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
@@ -78,7 +78,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw:mt-6 tw:lg:mt-0 tw:flex tw:items-center tw:gap-4">
|
||||
<ButtonGroup>
|
||||
<ResetCacheBtn/>
|
||||
<Button
|
||||
icon="fa fa-list"
|
||||
v-tooltip.top="'Журнал событий'"
|
||||
@click="showLogsDrawer = true"
|
||||
/>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
icon="fa fa-play"
|
||||
@@ -104,6 +111,16 @@
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Drawer
|
||||
v-model:visible="showLogsDrawer"
|
||||
header="Журнал событий"
|
||||
position="right"
|
||||
:baseZIndex="1000"
|
||||
class="tw:!w-full tw:md:!w-1/2"
|
||||
>
|
||||
<LogsViewer/>
|
||||
</Drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -114,12 +131,14 @@ import {onMounted, ref} from "vue";
|
||||
import OcImagePicker from "@/components/OcImagePicker.vue";
|
||||
import {apiGet} from "@/utils/http.js";
|
||||
import ResetCacheBtn from "@/components/Form/ResetCacheBtn.vue";
|
||||
import {Button, ButtonGroup} from "primevue";
|
||||
import {Button, ButtonGroup, Drawer} from "primevue";
|
||||
import {rub} from "@/utils/helpers.js";
|
||||
import LogsViewer from "@/components/LogsViewer.vue";
|
||||
|
||||
const settings = useSettingsStore();
|
||||
const stats = useStatsStore();
|
||||
const tgMe = ref(null);
|
||||
const showLogsDrawer = ref(false);
|
||||
|
||||
onMounted(async () => {
|
||||
await stats.fetchStats();
|
||||
|
||||
@@ -6,7 +6,6 @@ import TelegramView from "@/views/TelegramView.vue";
|
||||
import MetricsView from "@/views/MetricsView.vue";
|
||||
import StoreView from "@/views/StoreView.vue";
|
||||
import MainPageView from "@/views/MainPageView.vue";
|
||||
import LogsView from "@/views/LogsView.vue";
|
||||
import FormBuilderView from "@/views/FormBuilderView.vue";
|
||||
import CustomersView from "@/views/CustomersView.vue";
|
||||
import TeleCartPulseView from "@/views/TeleCartPulseView.vue";
|
||||
@@ -18,7 +17,6 @@ const router = createRouter({
|
||||
{path: '/', name: 'general', component: GeneralView},
|
||||
{path: '/customers', name: 'customers', component: CustomersView},
|
||||
{path: '/formbuilder', name: 'formbuilder', component: FormBuilderView},
|
||||
{path: '/logs', name: 'logs', component: LogsView},
|
||||
{path: '/mainpage', name: 'mainpage', component: MainPageView},
|
||||
{path: '/metrics', name: 'metrics', component: MetricsView},
|
||||
{path: '/orders', name: 'orders', component: OrdersView},
|
||||
|
||||
Reference in New Issue
Block a user