feat: format code

This commit is contained in:
alisa 2023-04-25 21:57:52 +08:00
parent b8b5602194
commit 9fa425df53
7 changed files with 286 additions and 187 deletions

View File

@ -1,74 +1,87 @@
<script lang="ts" setup>
import TxsElement from '@/components/dynamic/TxsElement.vue';
import { useBlockModule } from './block'
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
import { computed } from '@vue/reactivity';
import { toBase64, toHex } from '@cosmjs/encoding';
import { useFormatter } from '@/stores';
import TxsElement from "@/components/dynamic/TxsElement.vue";
import { useBlockModule } from "./block";
import DynamicComponent from "@/components/dynamic/DynamicComponent.vue";
import { computed } from "@vue/reactivity";
import { toBase64, toHex } from "@cosmjs/encoding";
import { useFormatter } from "@/stores";
const props = defineProps(["height", "chain"]);
const store = useBlockModule()
store.fetchBlock(props.height)
const tab = ref('blocks')
const store = useBlockModule();
store.fetchBlock(props.height);
const tab = ref("blocks");
const format = useFormatter()
const format = useFormatter();
</script>
<template>
<VCard>
<VCardTitle class="d-flex justify-space-between">
<VTabs v-model="tab">
<VTab value="blocks">Blocks</VTab>
<VTab value="transactions">Transactions</VTab>
</VTabs>
</VCardTitle>
<VWindow v-model="tab">
<VWindowItem value="blocks">
<VTable>
<thead>
<tr>
<th>Height</th>
<th>Hash</th>
<th>Proposor</th>
<th>Txs</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr v-for="item in store.recents">
<td>
<RouterLink
:to="`/${props.chain}/block/${item.block?.header?.height}`"
>{{ item.block?.header?.height }}</RouterLink
>
</td>
<td>{{ toBase64(item.blockId?.hash) }}</td>
<td>
{{ format.validator(item.block?.header?.proposerAddress) }}
</td>
<td>{{ item.block?.data?.txs.length }}</td>
<td>{{ format.toDay(item.block?.header?.time, "from") }}</td>
</tr>
</tbody>
</VTable>
</VWindowItem>
<VWindowItem value="transactions">
<VTable>
<thead>
<tr>
<th>Hash</th>
<th>Messages</th>
<th>Fees</th>
</tr>
</thead>
<tbody>
<tr v-for="item in store.txsInRecents">
<td>
<RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
item.hash
}}</RouterLink>
</td>
<td>{{ format.messages(item.tx.body.messages) }}</td>
<td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
</tr>
</tbody>
</VTable>
<VCard>
<VCardTitle class="d-flex justify-space-between">
<VTabs v-model="tab">
<VTab value="blocks">Blocks</VTab>
<VTab value="transactions">Transactions</VTab>
</VTabs>
</VCardTitle>
<VWindow v-model="tab">
<VWindowItem value="blocks">
<VTable>
<thead>
<tr>
<th>Height</th><th>Hash</th><th>Proposor</th><th>Txs</th><th>Time</th>
</tr>
</thead>
<tbody>
<tr v-for="item in store.recents">
<td><RouterLink :to="`/${props.chain}/block/${item.block?.header?.height}`">{{ item.block?.header?.height }}</RouterLink></td>
<td>{{ toBase64(item.blockId?.hash) }}</td>
<td>{{ format.validator(item.block?.header?.proposerAddress) }}</td>
<td>{{ item.block?.data?.txs.length }}</td>
<td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
</tr>
</tbody>
</VTable>
</VWindowItem>
<VWindowItem value="transactions">
<VTable>
<thead>
<tr>
<th>Hash</th><th>Messages</th><th>Fees</th>
</tr>
</thead>
<tbody>
<tr v-for="item in store.txsInRecents">
<td><RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{ item.hash }}</RouterLink></td>
<td>{{ format.messages(item.tx.body.messages) }}</td>
<td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
</tr>
</tbody>
</VTable>
<VCardItem>
<v-alert
type="info"
text="Only show txs in recent blocks"
variant="tonal"
></v-alert>
</VCardItem>
</VWindowItem>
</VWindow>
<VCardActions>
</VCardActions>
</VCard>
<VCardItem>
<v-alert
type="info"
text="Only show txs in recent blocks"
variant="tonal"
></v-alert>
</VCardItem>
</VWindowItem>
</VWindow>
<VCardActions> </VCardActions>
</VCard>
</template>

View File

@ -9,7 +9,7 @@
"add_to_favorite": "Add to favorite"
},
"Ecosystem": "Ecosystem",
"All Blockchains": "All Blockchain222",
"All Blockchains": "All Blockchain",
"Favorite": "Favorite"
}

View File

@ -17,15 +17,22 @@ import TheCustomizer from '@/plugins/vuetify/@core/components/TheCustomizer.vue'
import Breadcrumbs from './Breadcrumbs.vue';
import { useBlockchain } from '@/stores';
const { appRouteTransition, isLessThanOverlayNavBreakpoint, isVerticalNavCollapsed } =
useThemeConfig();
const {
appRouteTransition,
isLessThanOverlayNavBreakpoint,
isVerticalNavCollapsed,
} = useThemeConfig();
const { width: windowWidth } = useWindowSize();
// Provide animation name for vertical nav collapse icon.
const verticalNavHeaderActionAnimationName = ref<null | 'rotate-180' | 'rotate-back-180'>(null);
const verticalNavHeaderActionAnimationName = ref<
null | 'rotate-180' | 'rotate-back-180'
>(null);
watch(isVerticalNavCollapsed, val => {
verticalNavHeaderActionAnimationName.value = val ? 'rotate-180' : 'rotate-back-180';
watch(isVerticalNavCollapsed, (val) => {
verticalNavHeaderActionAnimationName.value = val
? 'rotate-180'
: 'rotate-back-180';
});
const dashboard = useDashboard();

View File

@ -1,66 +1,126 @@
<script setup lang="ts">
import type { SearchHeader, SearchItem } from '@/@fake-db/types'
import axios from 'axios'
import { useThemeConfig } from '@core/composable/useThemeConfig'
import type { SearchHeader, SearchItem } from '@/@fake-db/types';
import axios from 'axios';
import { useThemeConfig } from '@core/composable/useThemeConfig';
interface Suggestion {
icon: string
title: string
url: object
icon: string;
title: string;
url: object;
}
const { appContentLayoutNav } = useThemeConfig()
const { appContentLayoutNav } = useThemeConfig();
interface SuggestionGroup {
title: string
content: Suggestion[]
title: string;
content: Suggestion[];
}
defineOptions({
inheritAttrs: false,
})
});
// 👉 Is App Search Bar Visible
const isAppSearchBarVisible = ref(false)
const isAppSearchBarVisible = ref(false);
// 👉 Default suggestions
const suggestionGroups: SuggestionGroup[] = [
{
title: 'Popular Searches',
content: [
{ icon: 'mdi-chart-donut', title: 'Analytics', url: { name: 'dashboards-analytics' } },
{ icon: 'mdi-chart-bubble', title: 'CRM', url: { name: 'dashboards-crm' } },
{ icon: 'mdi-file-outline', title: 'Invoice List', url: { name: 'apps-invoice-list' } },
{ icon: 'mdi-account-group-outline', title: 'User List', url: { name: 'apps-user-list' } },
{
icon: 'mdi-chart-donut',
title: 'Analytics',
url: { name: 'dashboards-analytics' },
},
{
icon: 'mdi-chart-bubble',
title: 'CRM',
url: { name: 'dashboards-crm' },
},
{
icon: 'mdi-file-outline',
title: 'Invoice List',
url: { name: 'apps-invoice-list' },
},
{
icon: 'mdi-account-group-outline',
title: 'User List',
url: { name: 'apps-user-list' },
},
],
},
{
title: 'Apps & Pages',
content: [
{ icon: 'mdi-calendar', title: 'Calendar', url: { name: 'apps-calendar' } },
{ icon: 'mdi-file-plus-outline', title: 'Invoice Add', url: { name: 'apps-invoice-add' } },
{ icon: 'mdi-currency-usd', title: 'Pricing', url: { name: 'pages-pricing' } },
{ icon: 'mdi-account-cog-outline', title: 'Account Settings', url: { name: 'pages-account-settings-tab', params: { tab: 'account' } } },
{
icon: 'mdi-calendar',
title: 'Calendar',
url: { name: 'apps-calendar' },
},
{
icon: 'mdi-file-plus-outline',
title: 'Invoice Add',
url: { name: 'apps-invoice-add' },
},
{
icon: 'mdi-currency-usd',
title: 'Pricing',
url: { name: 'pages-pricing' },
},
{
icon: 'mdi-account-cog-outline',
title: 'Account Settings',
url: { name: 'pages-account-settings-tab', params: { tab: 'account' } },
},
],
},
{
title: 'User Interface',
content: [
{ icon: 'mdi-alpha-a-box-outline', title: 'Typography', url: { name: 'pages-typography' } },
{
icon: 'mdi-alpha-a-box-outline',
title: 'Typography',
url: { name: 'pages-typography' },
},
{ icon: 'mdi-tab', title: 'Tabs', url: { name: 'components-tabs' } },
{ icon: 'mdi-gesture-tap-button', title: 'Buttons', url: { name: 'components-button' } },
{ icon: 'mdi-keyboard-settings-outline', title: 'Statistics', url: { name: 'pages-cards-card-statistics' } },
{
icon: 'mdi-gesture-tap-button',
title: 'Buttons',
url: { name: 'components-button' },
},
{
icon: 'mdi-keyboard-settings-outline',
title: 'Statistics',
url: { name: 'pages-cards-card-statistics' },
},
],
},
{
title: 'Popular Searches',
content: [
{ icon: 'mdi-format-list-checkbox', title: 'Select', url: { name: 'forms-select' } },
{ icon: 'mdi-lastpass', title: 'Combobox', url: { name: 'forms-combobox' } },
{ icon: 'mdi-calendar-range-outline', title: 'Date & Time Picker', url: { name: 'forms-date-time-picker' } },
{ icon: 'mdi-hexagram-outline', title: 'Rating', url: { name: 'forms-rating' } },
{
icon: 'mdi-format-list-checkbox',
title: 'Select',
url: { name: 'forms-select' },
},
{
icon: 'mdi-lastpass',
title: 'Combobox',
url: { name: 'forms-combobox' },
},
{
icon: 'mdi-calendar-range-outline',
title: 'Date & Time Picker',
url: { name: 'forms-date-time-picker' },
},
{
icon: 'mdi-hexagram-outline',
title: 'Rating',
url: { name: 'forms-rating' },
},
],
},
]
];
// 👉 No Data suggestion
const noDataSuggestions: Suggestion[] = [
@ -79,32 +139,36 @@ const noDataSuggestions: Suggestion[] = [
icon: 'mdi-cash',
url: { name: 'pages-pricing' },
},
]
];
const searchQuery = ref('')
const searchResult = ref<(SearchItem | SearchHeader)[]>([])
const router = useRouter()
const searchQuery = ref('');
const searchResult = ref<(SearchItem | SearchHeader)[]>([]);
const router = useRouter();
// 👉 fetch search result API
watchEffect(() => {
axios.get('/app-bar/search', {
params: {
q: searchQuery.value,
},
}).then(response => {
searchResult.value = response.data
})
})
axios
.get('/app-bar/search', {
params: {
q: searchQuery.value,
},
})
.then((response) => {
searchResult.value = response.data;
});
});
// 👉 redirect the selected page
const redirectToSuggestedOrSearchedPage = (selected: Suggestion) => {
router.push(selected.url)
router.push(selected.url);
isAppSearchBarVisible.value = false
searchQuery.value = ''
}
isAppSearchBarVisible.value = false;
searchQuery.value = '';
};
const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/AppBarSearch.vue'))
const LazyAppBarSearch = defineAsyncComponent(
() => import('@core/components/AppBarSearch.vue')
);
</script>
<template>
@ -157,7 +221,7 @@ const LazyAppBarSearch = defineAsyncComponent(() => import('@core/components/App
</template>
<style lang="scss" scoped>
@use "@styles/variables/_vuetify.scss";
@use '@styles/variables/_vuetify.scss';
.meta-key {
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));

View File

@ -1,12 +1,14 @@
<script lang="ts" setup>
import { useSkins } from '@core/composable/useSkins'
import { useThemeConfig } from '@core/composable/useThemeConfig'
import { useSkins } from '@core/composable/useSkins';
import { useThemeConfig } from '@core/composable/useThemeConfig';
const DefaultLayout = defineAsyncComponent(() => import('./components/DefaultLayout.vue'))
const DefaultLayout = defineAsyncComponent(
() => import('./components/DefaultLayout.vue')
);
const { layoutAttrs, injectSkinClasses } = useSkins()
const { layoutAttrs, injectSkinClasses } = useSkins();
injectSkinClasses()
injectSkinClasses();
</script>
<template>
@ -15,5 +17,5 @@ injectSkinClasses()
<style lang="scss">
// As we are using `layouts` plugin we need its styles to be imported
@use "@layouts/styles/default-layout";
@use '@layouts/styles/default-layout';
</style>

View File

@ -1,73 +1,86 @@
<script lang="ts" setup>
import { useBlockModule } from './block'
import { useBlockModule } from './block';
import { computed, ref } from '@vue/reactivity';
import { useFormatter } from '@/stores';
const props = defineProps(["height", "chain"]);
const props = defineProps(['height', 'chain']);
const store = useBlockModule()
const store = useBlockModule();
// store.fetchBlock(props.height)
const tab = ref('blocks')
const tab = ref('blocks');
const format = useFormatter()
const format = useFormatter();
</script>
<template>
<VCard>
<VCardTitle class="d-flex justify-space-between">
<VTabs v-model="tab">
<VTab value="blocks">Blocks</VTab>
<VTab value="transactions">Transactions</VTab>
</VTabs>
</VCardTitle>
<VWindow v-model="tab">
<VWindowItem value="blocks">
<VTable>
<thead>
<tr>
<th>Height</th>
<th>Hash</th>
<th>Proposer</th>
<th>Txs</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr v-for="item in store.recents">
<td class="text-sm text-primary">
<RouterLink
:to="`/${props.chain}/block/${item.block?.header?.height}`"
>{{ item.block?.header?.height }}</RouterLink
>
</td>
<td>{{ item.block_id?.hash }}</td>
<td>
{{ format.validator(item.block?.header?.proposer_address) }}
</td>
<td>{{ item.block?.data?.txs.length }}</td>
<td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
</tr>
</tbody>
</VTable>
</VWindowItem>
<VWindowItem value="transactions">
<VTable>
<thead>
<tr>
<th>Hash</th>
<th>Messages</th>
<th>Fees</th>
</tr>
</thead>
<tbody>
<tr v-for="item in store.txsInRecents">
<td>
<RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
item.hash
}}</RouterLink>
</td>
<td>{{ format.messages(item.tx.body.messages) }}</td>
<td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
</tr>
</tbody>
</VTable>
<VCard>
<VCardTitle class="d-flex justify-space-between">
<VTabs v-model="tab">
<VTab value="blocks">Blocks</VTab>
<VTab value="transactions">Transactions</VTab>
</VTabs>
</VCardTitle>
<VWindow v-model="tab">
<VWindowItem value="blocks">
<VTable>
<thead>
<tr>
<th>Height</th><th>Hash</th><th>Proposer</th><th>Txs</th><th>Time</th>
</tr>
</thead>
<tbody>
<tr v-for="item in store.recents">
<td class="text-sm text-primary"><RouterLink :to="`/${props.chain}/block/${item.block?.header?.height}`">{{ item.block?.header?.height }}</RouterLink></td>
<td>{{ item.block_id?.hash }}</td>
<td>{{ format.validator(item.block?.header?.proposer_address) }}</td>
<td>{{ item.block?.data?.txs.length }}</td>
<td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
</tr>
</tbody>
</VTable>
</VWindowItem>
<VWindowItem value="transactions">
<VTable>
<thead>
<tr>
<th>Hash</th><th>Messages</th><th>Fees</th>
</tr>
</thead>
<tbody>
<tr v-for="item in store.txsInRecents">
<td><RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{ item.hash }}</RouterLink></td>
<td>{{ format.messages(item.tx.body.messages) }}</td>
<td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
</tr>
</tbody>
</VTable>
<VCardItem>
<v-alert
type="info"
text="Only show txs in recent blocks"
variant="tonal"
></v-alert>
</VCardItem>
</VWindowItem>
</VWindow>
<VCardActions>
</VCardActions>
</VCard>
<VCardItem>
<v-alert
type="info"
text="Only show txs in recent blocks"
variant="tonal"
></v-alert>
</VCardItem>
</VWindowItem>
</VWindow>
<VCardActions> </VCardActions>
</VCard>
</template>
<route>

View File

@ -11,7 +11,7 @@
"add_to_favorite": "Add to favorite"
},
"Ecosystem": "Ecosystem",
"All Blockchains": "All Blockchain222",
"All Blockchains": "All Blockchain",
"Favorite": "Favorite"
}