106 lines
3.5 KiB
Vue
106 lines
3.5 KiB
Vue
<script setup>
|
|
import { useRouter } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { ref } from 'vue';
|
|
|
|
import VnPaginate from 'components/ui/VnPaginate.vue';
|
|
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
|
import CardList from 'src/components/ui/CardList.vue';
|
|
import VnLv from 'src/components/ui/VnLv.vue';
|
|
import AliasSummary from './Alias/Card/AliasSummary.vue';
|
|
import AliasCreateForm from './Alias/AliasCreateForm.vue';
|
|
|
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
|
|
defineProps({
|
|
id: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
const { viewSummary } = useSummaryDialog();
|
|
const router = useRouter();
|
|
const stateStore = useStateStore();
|
|
const aliasCreateDialogRef = ref(null);
|
|
|
|
const exprBuilder = (param, value) => {
|
|
switch (param) {
|
|
case 'search':
|
|
return /^\d+$/.test(value)
|
|
? { id: value }
|
|
: { alias: { like: `%${value}%` } };
|
|
}
|
|
};
|
|
|
|
const navigate = (id) => router.push({ name: 'AliasSummary', params: { id } });
|
|
|
|
const openCreateModal = () => aliasCreateDialogRef.value.show();
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="stateStore.isHeaderMounted()">
|
|
<Teleport to="#searchbar">
|
|
<VnSearchbar
|
|
data-key="AccountAliasList"
|
|
url="MailAliases"
|
|
:expr-builder="exprBuilder"
|
|
:label="t('mailAlias.search')"
|
|
:info="t('mailAlias.searchInfo')"
|
|
/>
|
|
</Teleport>
|
|
</template>
|
|
<QPage class="flex justify-center q-pa-md">
|
|
<div class="vn-card-list">
|
|
<VnPaginate
|
|
ref="paginateRef"
|
|
data-key="AccountAliasList"
|
|
url="MailAliases"
|
|
:expr-builder="exprBuilder"
|
|
>
|
|
<template #body="{ rows }">
|
|
<CardList
|
|
v-for="row of rows"
|
|
:id="row.id"
|
|
:key="row.id"
|
|
:title="row.alias"
|
|
@click="navigate(row.id)"
|
|
>
|
|
<template #list-items>
|
|
<VnLv :label="t('mailAlias.alias')" :value="row.alias">
|
|
</VnLv>
|
|
<VnLv
|
|
:label="t('mailAlias.description')"
|
|
:value="row.description"
|
|
>
|
|
</VnLv>
|
|
</template>
|
|
<template #actions>
|
|
<QBtn
|
|
:label="t('components.smartCard.openSummary')"
|
|
@click.stop="viewSummary(row.id, AliasSummary)"
|
|
color="primary"
|
|
style="margin-top: 15px"
|
|
/>
|
|
</template>
|
|
</CardList>
|
|
</template>
|
|
</VnPaginate>
|
|
</div>
|
|
<QDialog
|
|
ref="aliasCreateDialogRef"
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
>
|
|
<AliasCreateForm />
|
|
</QDialog>
|
|
<QPageSticky position="bottom-right" :offset="[18, 18]">
|
|
<QBtn fab icon="add" color="primary" @click="openCreateModal()">
|
|
<QTooltip class="text-no-wrap">{{ t('mailAlias.newAlias') }}</QTooltip>
|
|
</QBtn>
|
|
</QPageSticky>
|
|
</QPage>
|
|
</template>
|