mirror of https://github.com/halo-dev/halo
feat: improve the styles of the data list filter area on the mobile devices (#4587)
#### What type of PR is this? /area console /kind improvement /milestone 2.10.x #### What this PR does / why we need it: 改进移动设备上数据列表过滤器区域的样式。 before: <img width="429" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/c0341b19-0ef5-4e26-94b7-71c52def6578"> after: <img width="429" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/b2d0f07b-d94d-48d4-86b9-fd2953d141fa"> #### Which issue(s) this PR fixes: Ref https://github.com/halo-dev/halo/issues/2699 #### Does this PR introduce a user-facing change? ```release-note 改进 Console 端在移动设备上数据列表过滤器区域的样式。 ```pull/4615/head
Ryan Wang
GitHub
parent
e13563bad0
commit
83cb088df8
|
|
@ -35,7 +35,7 @@ function onKeywordChange() {
|
|||
<template>
|
||||
<FormKit
|
||||
:id="id"
|
||||
outer-class="!p-0"
|
||||
outer-class="!p-0 w-full sm:w-auto"
|
||||
:placeholder="placeholder || $t('core.common.placeholder.search')"
|
||||
type="text"
|
||||
name="keyword"
|
||||
|
|
|
|||
|
|
@ -293,11 +293,11 @@ onMounted(() => {
|
|||
<template #header>
|
||||
<div class="block w-full bg-gray-50 px-4 py-3">
|
||||
<div
|
||||
class="relative flex flex-col items-start sm:flex-row sm:items-center"
|
||||
class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
|
||||
>
|
||||
<div
|
||||
v-permission="['system:attachments:manage']"
|
||||
class="mr-4 hidden items-center sm:flex"
|
||||
class="hidden items-center sm:flex"
|
||||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
|
|
@ -336,95 +336,89 @@ onMounted(() => {
|
|||
</VDropdown>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedPolicy"
|
||||
:label="
|
||||
$t('core.attachment.filters.storage_policy.label')
|
||||
"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
},
|
||||
...(policies?.map((policy) => {
|
||||
return {
|
||||
label: policy.spec.displayName,
|
||||
value: policy.metadata.name,
|
||||
};
|
||||
}) || []),
|
||||
]"
|
||||
/>
|
||||
<UserFilterDropdown
|
||||
v-model="selectedUser"
|
||||
:label="$t('core.attachment.filters.owner.label')"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSort"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.attachment.filters.sort.items.create_time_desc'
|
||||
),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.attachment.filters.sort.items.create_time_asc'
|
||||
),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.attachment.filters.sort.items.size_desc'
|
||||
),
|
||||
value: 'size,desc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.attachment.filters.sort.items.size_asc'
|
||||
),
|
||||
value: 'size,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
v-for="(item, index) in viewTypes"
|
||||
:key="index"
|
||||
v-tooltip="`${item.tooltip}`"
|
||||
:class="{
|
||||
'bg-gray-200 font-bold text-black':
|
||||
viewType === item.name,
|
||||
}"
|
||||
class="cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="viewType = item.name"
|
||||
>
|
||||
<component :is="item.icon" class="h-4 w-4" />
|
||||
</div>
|
||||
<VSpace spacing="lg" class="flex-wrap">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedPolicy"
|
||||
:label="$t('core.attachment.filters.storage_policy.label')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
},
|
||||
...(policies?.map((policy) => {
|
||||
return {
|
||||
label: policy.spec.displayName,
|
||||
value: policy.metadata.name,
|
||||
};
|
||||
}) || []),
|
||||
]"
|
||||
/>
|
||||
<UserFilterDropdown
|
||||
v-model="selectedUser"
|
||||
:label="$t('core.attachment.filters.owner.label')"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSort"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.attachment.filters.sort.items.create_time_desc'
|
||||
),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.attachment.filters.sort.items.create_time_asc'
|
||||
),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.attachment.filters.sort.items.size_desc'
|
||||
),
|
||||
value: 'size,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.attachment.filters.sort.items.size_asc'),
|
||||
value: 'size,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
v-for="(item, index) in viewTypes"
|
||||
:key="index"
|
||||
v-tooltip="`${item.tooltip}`"
|
||||
:class="{
|
||||
'bg-gray-200 font-bold text-black':
|
||||
viewType === item.name,
|
||||
}"
|
||||
class="cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="viewType = item.name"
|
||||
>
|
||||
<component :is="item.icon" class="h-4 w-4" />
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="handleFetchAttachments()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="handleFetchAttachments()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -228,11 +228,11 @@ const handleApproveInBatch = async () => {
|
|||
<template #header>
|
||||
<div class="block w-full bg-gray-50 px-4 py-3">
|
||||
<div
|
||||
class="relative flex flex-col items-start sm:flex-row sm:items-center"
|
||||
class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
|
||||
>
|
||||
<div
|
||||
v-permission="['system:comments:manage']"
|
||||
class="mr-4 hidden items-center sm:flex"
|
||||
class="hidden items-center sm:flex"
|
||||
>
|
||||
<input
|
||||
v-model="checkAll"
|
||||
|
|
@ -259,94 +259,88 @@ const handleApproveInBatch = async () => {
|
|||
</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedApprovedStatus"
|
||||
:label="$t('core.common.filters.labels.status')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
},
|
||||
{
|
||||
label: t('core.comment.filters.status.items.approved'),
|
||||
value: 'true',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.status.items.pending_review'
|
||||
),
|
||||
value: 'false',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<UserFilterDropdown
|
||||
v-model="selectedUser"
|
||||
:label="$t('core.comment.filters.owner.label')"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSort"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.sort.items.last_reply_time_desc'
|
||||
),
|
||||
value: 'lastReplyTime,desc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.sort.items.last_reply_time_asc'
|
||||
),
|
||||
value: 'lastReplyTime,asc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.sort.items.reply_count_desc'
|
||||
),
|
||||
value: 'replyCount,desc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.sort.items.reply_count_asc'
|
||||
),
|
||||
value: 'replyCount,asc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.sort.items.create_time_desc'
|
||||
),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.sort.items.create_time_asc'
|
||||
),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<VSpace spacing="lg" class="flex-wrap">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedApprovedStatus"
|
||||
:label="$t('core.common.filters.labels.status')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
},
|
||||
{
|
||||
label: t('core.comment.filters.status.items.approved'),
|
||||
value: 'true',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.status.items.pending_review'
|
||||
),
|
||||
value: 'false',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<UserFilterDropdown
|
||||
v-model="selectedUser"
|
||||
:label="$t('core.comment.filters.owner.label')"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSort"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.sort.items.last_reply_time_desc'
|
||||
),
|
||||
value: 'lastReplyTime,desc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.sort.items.last_reply_time_asc'
|
||||
),
|
||||
value: 'lastReplyTime,asc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.sort.items.reply_count_desc'
|
||||
),
|
||||
value: 'replyCount,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.comment.filters.sort.items.reply_count_asc'),
|
||||
value: 'replyCount,asc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.comment.filters.sort.items.create_time_desc'
|
||||
),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.comment.filters.sort.items.create_time_asc'),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -233,11 +233,11 @@ watch(
|
|||
<template #header>
|
||||
<div class="block w-full bg-gray-50 px-4 py-3">
|
||||
<div
|
||||
class="relative flex flex-col items-start sm:flex-row sm:items-center"
|
||||
class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
|
||||
>
|
||||
<div
|
||||
v-permission="['system:singlepages:manage']"
|
||||
class="mr-4 hidden items-center sm:flex"
|
||||
class="hidden items-center sm:flex"
|
||||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
|
|
@ -257,21 +257,19 @@ watch(
|
|||
</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<VSpace spacing="lg" class="flex-wrap">
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -317,11 +317,11 @@ watch(selectedPageNames, (newValue) => {
|
|||
<template #header>
|
||||
<div class="block w-full bg-gray-50 px-4 py-3">
|
||||
<div
|
||||
class="relative flex flex-col items-start sm:flex-row sm:items-center"
|
||||
class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
|
||||
>
|
||||
<div
|
||||
v-permission="['system:singlepages:manage']"
|
||||
class="mr-4 hidden items-center sm:flex"
|
||||
class="hidden items-center sm:flex"
|
||||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
|
|
@ -338,93 +338,89 @@ watch(selectedPageNames, (newValue) => {
|
|||
</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedPublishStatus"
|
||||
:label="$t('core.common.filters.labels.status')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
value: undefined,
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.status.items.published'),
|
||||
value: 'true',
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.status.items.draft'),
|
||||
value: 'false',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedVisible"
|
||||
:label="$t('core.page.filters.visible.label')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
value: undefined,
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.visible.items.public'),
|
||||
value: 'PUBLIC',
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.visible.items.private'),
|
||||
value: 'PRIVATE',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<UserFilterDropdown
|
||||
v-model="selectedContributor"
|
||||
:label="$t('core.page.filters.author.label')"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSort"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.page.filters.sort.items.publish_time_desc'
|
||||
),
|
||||
value: 'publishTime,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.sort.items.publish_time_asc'),
|
||||
value: 'publishTime,asc',
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.sort.items.create_time_desc'),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.sort.items.create_time_asc'),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<VSpace spacing="lg" class="flex-wrap">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedPublishStatus"
|
||||
:label="$t('core.common.filters.labels.status')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
value: undefined,
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.status.items.published'),
|
||||
value: 'true',
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.status.items.draft'),
|
||||
value: 'false',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedVisible"
|
||||
:label="$t('core.page.filters.visible.label')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
value: undefined,
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.visible.items.public'),
|
||||
value: 'PUBLIC',
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.visible.items.private'),
|
||||
value: 'PRIVATE',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<UserFilterDropdown
|
||||
v-model="selectedContributor"
|
||||
:label="$t('core.page.filters.author.label')"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSort"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.sort.items.publish_time_desc'),
|
||||
value: 'publishTime,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.sort.items.publish_time_asc'),
|
||||
value: 'publishTime,asc',
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.sort.items.create_time_desc'),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.page.filters.sort.items.create_time_asc'),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -225,11 +225,11 @@ watch(
|
|||
<template #header>
|
||||
<div class="block w-full bg-gray-50 px-4 py-3">
|
||||
<div
|
||||
class="relative flex flex-col items-start sm:flex-row sm:items-center"
|
||||
class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
|
||||
>
|
||||
<div
|
||||
v-permission="['system:posts:manage']"
|
||||
class="mr-4 hidden items-center sm:flex"
|
||||
class="hidden items-center sm:flex"
|
||||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
|
|
@ -249,21 +249,19 @@ watch(
|
|||
</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<VSpace spacing="lg" class="flex-wrap">
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -323,11 +323,11 @@ watch(selectedPostNames, (newValue) => {
|
|||
<template #header>
|
||||
<div class="block w-full bg-gray-50 px-4 py-3">
|
||||
<div
|
||||
class="relative flex flex-col items-start sm:flex-row sm:items-center"
|
||||
class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
|
||||
>
|
||||
<div
|
||||
v-permission="['system:posts:manage']"
|
||||
class="mr-4 hidden items-center sm:flex"
|
||||
class="hidden items-center sm:flex"
|
||||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
|
|
@ -344,101 +344,97 @@ watch(selectedPostNames, (newValue) => {
|
|||
</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedPublishStatus"
|
||||
:label="$t('core.common.filters.labels.status')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
value: undefined,
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.status.items.published'),
|
||||
value: 'true',
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.status.items.draft'),
|
||||
value: 'false',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedVisible"
|
||||
:label="$t('core.post.filters.visible.label')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
value: undefined,
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.visible.items.public'),
|
||||
value: 'PUBLIC',
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.visible.items.private'),
|
||||
value: 'PRIVATE',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<CategoryFilterDropdown
|
||||
v-model="selectedCategory"
|
||||
:label="$t('core.post.filters.category.label')"
|
||||
/>
|
||||
<TagFilterDropdown
|
||||
v-model="selectedTag"
|
||||
:label="$t('core.post.filters.tag.label')"
|
||||
/>
|
||||
<UserFilterDropdown
|
||||
v-model="selectedContributor"
|
||||
:label="$t('core.post.filters.author.label')"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSort"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.post.filters.sort.items.publish_time_desc'
|
||||
),
|
||||
value: 'publishTime,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.sort.items.publish_time_asc'),
|
||||
value: 'publishTime,asc',
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.sort.items.create_time_desc'),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.sort.items.create_time_asc'),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<VSpace spacing="lg" class="flex-wrap">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedPublishStatus"
|
||||
:label="$t('core.common.filters.labels.status')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
value: undefined,
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.status.items.published'),
|
||||
value: 'true',
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.status.items.draft'),
|
||||
value: 'false',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedVisible"
|
||||
:label="$t('core.post.filters.visible.label')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
value: undefined,
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.visible.items.public'),
|
||||
value: 'PUBLIC',
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.visible.items.private'),
|
||||
value: 'PRIVATE',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<CategoryFilterDropdown
|
||||
v-model="selectedCategory"
|
||||
:label="$t('core.post.filters.category.label')"
|
||||
/>
|
||||
<TagFilterDropdown
|
||||
v-model="selectedTag"
|
||||
:label="$t('core.post.filters.tag.label')"
|
||||
/>
|
||||
<UserFilterDropdown
|
||||
v-model="selectedContributor"
|
||||
:label="$t('core.post.filters.author.label')"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSort"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.sort.items.publish_time_desc'),
|
||||
value: 'publishTime,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.sort.items.publish_time_asc'),
|
||||
value: 'publishTime,asc',
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.sort.items.create_time_desc'),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.post.filters.sort.items.create_time_asc'),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -159,11 +159,11 @@ onMounted(() => {
|
|||
<template #header>
|
||||
<div class="block w-full bg-gray-50 px-4 py-3">
|
||||
<div
|
||||
class="relative flex flex-col items-start sm:flex-row sm:items-center"
|
||||
class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
|
||||
>
|
||||
<div
|
||||
v-permission="['system:posts:manage']"
|
||||
class="mr-4 hidden items-center sm:flex"
|
||||
class="hidden items-center sm:flex"
|
||||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
|
|
@ -206,64 +206,58 @@ onMounted(() => {
|
|||
</VDropdown>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedEnabledValue"
|
||||
:label="$t('core.common.filters.labels.status')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
},
|
||||
{
|
||||
label: t('core.plugin.filters.status.items.active'),
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: t('core.plugin.filters.status.items.inactive'),
|
||||
value: false,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSortValue"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.plugin.filters.sort.items.create_time_desc'
|
||||
),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t(
|
||||
'core.plugin.filters.sort.items.create_time_asc'
|
||||
),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<VSpace spacing="lg" class="flex-wrap">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedEnabledValue"
|
||||
:label="$t('core.common.filters.labels.status')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
},
|
||||
{
|
||||
label: t('core.plugin.filters.status.items.active'),
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
label: t('core.plugin.filters.status.items.inactive'),
|
||||
value: false,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSortValue"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t('core.plugin.filters.sort.items.create_time_desc'),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.plugin.filters.sort.items.create_time_asc'),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{ 'animate-spin text-gray-900': isFetching }"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -291,11 +291,11 @@ onMounted(() => {
|
|||
<template #header>
|
||||
<div class="block w-full bg-gray-50 px-4 py-3">
|
||||
<div
|
||||
class="relative flex flex-col items-start sm:flex-row sm:items-center"
|
||||
class="relative flex flex-col flex-wrap items-start gap-4 sm:flex-row sm:items-center"
|
||||
>
|
||||
<div
|
||||
v-permission="['system:users:manage']"
|
||||
class="mr-4 hidden items-center sm:flex"
|
||||
class="hidden items-center sm:flex"
|
||||
>
|
||||
<input
|
||||
v-model="checkedAll"
|
||||
|
|
@ -312,63 +312,61 @@ onMounted(() => {
|
|||
</VButton>
|
||||
</VSpace>
|
||||
</div>
|
||||
<div class="mt-4 flex sm:mt-0">
|
||||
<VSpace spacing="lg">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedRoleValue"
|
||||
:label="$t('core.user.filters.role.label')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
},
|
||||
...roles.map((role) => {
|
||||
return {
|
||||
label:
|
||||
role.metadata.annotations?.[
|
||||
rbacAnnotations.DISPLAY_NAME
|
||||
] || role.metadata.name,
|
||||
value: role.metadata.name,
|
||||
};
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSortValue"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t('core.user.filters.sort.items.create_time_desc'),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.user.filters.sort.items.create_time_asc'),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{
|
||||
'animate-spin text-gray-900': isFetching,
|
||||
}"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
<VSpace spacing="lg" class="flex-wrap">
|
||||
<FilterCleanButton
|
||||
v-if="hasFilters"
|
||||
@click="handleClearFilters"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedRoleValue"
|
||||
:label="$t('core.user.filters.role.label')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.all'),
|
||||
},
|
||||
...roles.map((role) => {
|
||||
return {
|
||||
label:
|
||||
role.metadata.annotations?.[
|
||||
rbacAnnotations.DISPLAY_NAME
|
||||
] || role.metadata.name,
|
||||
value: role.metadata.name,
|
||||
};
|
||||
}),
|
||||
]"
|
||||
/>
|
||||
<FilterDropdown
|
||||
v-model="selectedSortValue"
|
||||
:label="$t('core.common.filters.labels.sort')"
|
||||
:items="[
|
||||
{
|
||||
label: t('core.common.filters.item_labels.default'),
|
||||
},
|
||||
{
|
||||
label: t('core.user.filters.sort.items.create_time_desc'),
|
||||
value: 'creationTimestamp,desc',
|
||||
},
|
||||
{
|
||||
label: t('core.user.filters.sort.items.create_time_asc'),
|
||||
value: 'creationTimestamp,asc',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div
|
||||
class="group cursor-pointer rounded p-1 hover:bg-gray-200"
|
||||
@click="refetch()"
|
||||
>
|
||||
<IconRefreshLine
|
||||
v-tooltip="$t('core.common.buttons.refresh')"
|
||||
:class="{
|
||||
'animate-spin text-gray-900': isFetching,
|
||||
}"
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</VSpace>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue