3
0

Adjust compose resource list UX

This commit is contained in:
Jože Fortun 2023-02-27 13:43:43 +01:00
parent 16a8a98770
commit b14412c69d
8 changed files with 435 additions and 412 deletions

View File

@ -6,7 +6,7 @@
:data="{children:list}" :data="{children:list}"
tag="ul" tag="ul"
mixin-parent-key="parent" mixin-parent-key="parent"
class="list-group pb-3" class="list-group"
@changePosition="handleChangePosition" @changePosition="handleChangePosition"
> >
<template <template

View File

@ -10,7 +10,7 @@ export default {
filter: {}, filter: {},
pagination: { pagination: {
limit: 12, limit: 100,
pageCursor: undefined, pageCursor: undefined,
prevPage: '', prevPage: '',
nextPage: '', nextPage: '',

View File

@ -1,106 +1,108 @@
<template> <template>
<div class="py-3"> <b-container
fluid="xl"
class="d-flex flex-column py-3"
>
<portal to="topbar-title"> <portal to="topbar-title">
{{ $t('navigation.chart') }} {{ $t('navigation.chart') }}
</portal> </portal>
<b-container fluid="xl"> <c-resource-list
<b-row no-gutters> :primary-key="primaryKey"
<b-col> :filter="filter"
<c-resource-list :sorting="sorting"
:primary-key="primaryKey" :pagination="pagination"
:filter="filter" :fields="tableFields"
:sorting="sorting" :items="chartList"
:pagination="pagination" :translations="{
:fields="tableFields" searchPlaceholder: $t('chart.searchPlaceholder'),
:items="chartList" notFound: $t('general:resourceList.notFound'),
:translations="{ noItems: $t('general:resourceList.noItems'),
searchPlaceholder: $t('chart.searchPlaceholder'), loading: $t('general:label.loading'),
notFound: $t('general:resourceList.notFound'), showingPagination: 'general:resourceList.pagination.showing',
noItems: $t('general:resourceList.noItems'), singlePluralPagination: 'general:resourceList.pagination.single',
loading: $t('general:label.loading'), prevPagination: $t('general:resourceList.pagination.prev'),
showingPagination: 'general:resourceList.pagination.showing', nextPagination: $t('general:resourceList.pagination.next'),
singlePluralPagination: 'general:resourceList.pagination.single', }"
prevPagination: $t('general:resourceList.pagination.prev'), clickable
nextPagination: $t('general:resourceList.pagination.next'), sticky-header
}" class="h-100"
clickable @search="filterList"
@search="filterList" @row-clicked="handleRowClicked"
@row-clicked="handleRowClicked" >
<template #header>
<div
class="wrap-with-vertical-gutters"
>
<b-dropdown
v-if="namespace.canCreateChart"
variant="primary"
size="lg"
class="float-left mr-1"
:text="$t('chart.add')"
> >
<template #header> <b-dropdown-item-button
<div variant="dark"
class="wrap-with-vertical-gutters" @click="$router.push({ name: 'admin.charts.create', params: { category: 'generic' } })"
> >
<b-dropdown {{ $t('chart.addGeneric') }}
v-if="namespace.canCreateChart" </b-dropdown-item-button>
variant="primary" <b-dropdown-item-button
size="lg" variant="dark"
class="float-left mr-1" @click="$router.push({ name: 'admin.charts.create', params: { category: 'funnel' } })"
:text="$t('chart.add')" >
> {{ $t('chart.addFunnel') }}
<b-dropdown-item-button </b-dropdown-item-button>
variant="dark" <b-dropdown-item-button
@click="$router.push({ name: 'admin.charts.create', params: { category: 'generic' } })" variant="dark"
> @click="$router.push({ name: 'admin.charts.create', params: { category: 'gauge' } })"
{{ $t('chart.addGeneric') }} >
</b-dropdown-item-button> {{ $t('chart.addGauge') }}
<b-dropdown-item-button </b-dropdown-item-button>
variant="dark" </b-dropdown>
@click="$router.push({ name: 'admin.charts.create', params: { category: 'funnel' } })"
>
{{ $t('chart.addFunnel') }}
</b-dropdown-item-button>
<b-dropdown-item-button
variant="dark"
@click="$router.push({ name: 'admin.charts.create', params: { category: 'gauge' } })"
>
{{ $t('chart.addGauge') }}
</b-dropdown-item-button>
</b-dropdown>
<import <import
v-if="namespace.canCreateChart" v-if="namespace.canCreateChart"
:namespace="namespace" :namespace="namespace"
type="chart" type="chart"
class="float-left mr-1" class="float-left mr-1"
@importSuccessful="onImportSuccessful" @importSuccessful="onImportSuccessful"
/> />
<export <export
:list="charts" :list="charts"
type="chart" type="chart"
class="float-left mr-1" class="float-left mr-1"
/> />
<c-permissions-button <c-permissions-button
v-if="namespace.canGrant" v-if="namespace.canGrant"
:resource="`corteza::compose:chart/${namespace.namespaceID}/*`" :resource="`corteza::compose:chart/${namespace.namespaceID}/*`"
:button-label="$t('general.label.permissions')" :button-label="$t('general.label.permissions')"
button-variant="light" button-variant="light"
class="btn-lg" class="btn-lg"
/> />
</div> </div>
</template> </template>
<template #actions="{ item: c }"> <template #actions="{ item: c }">
<c-permissions-button <b-button-group>
v-if="c.canGrant" <c-permissions-button
:title="c.name || c.handle || c.chartID" v-if="c.canGrant"
:target="c.name || c.handle || c.chartID" :title="c.name || c.handle || c.chartID"
:resource="`corteza::compose:chart/${namespace.namespaceID}/${c.chartID}`" :target="c.name || c.handle || c.chartID"
link :resource="`corteza::compose:chart/${namespace.namespaceID}/${c.chartID}`"
class="btn px-2" :tooltip="$t('permissions:resources.compose.chart.tooltip')"
/> button-variant="outline-light"
</template> class="text-dark d-print-none border-0"
/>
</b-button-group>
</template>
<template #changedAt="{ item }"> <template #changedAt="{ item }">
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }} {{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
</template> </template>
</c-resource-list> </c-resource-list>
</b-col> </b-container>
</b-row>
</b-container>
</div>
</template> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'

View File

@ -1,159 +1,167 @@
"<template> "<template>
<div class="py-3"> <b-container
fluid="xl"
class="d-flex flex-column py-3"
>
<portal to="topbar-title"> <portal to="topbar-title">
{{ $t('navigation.module') }} {{ $t('navigation.module') }}
</portal> </portal>
<b-container fluid="xl"> <c-resource-list
<b-row> data-test-id="table-modules-list"
<b-col> :primary-key="primaryKey"
<c-resource-list :filter="filter"
data-test-id="table-modules-list" :sorting="sorting"
:primary-key="primaryKey" :pagination="pagination"
:filter="filter" :fields="fields"
:sorting="sorting" :items="items"
:pagination="pagination" :translations="{
:fields="fields" searchPlaceholder: $t('searchPlaceholder'),
:items="items" notFound: $t('general:resourceList.notFound'),
:translations="{ noItems: $t('general:resourceList.noItems'),
searchPlaceholder: $t('searchPlaceholder'), loading: $t('general:label.loading'),
notFound: $t('general:resourceList.notFound'), showingPagination: 'general:resourceList.pagination.showing',
noItems: $t('general:resourceList.noItems'), singlePluralPagination: 'general:resourceList.pagination.single',
loading: $t('general:label.loading'), prevPagination: $t('general:resourceList.pagination.prev'),
showingPagination: 'general:resourceList.pagination.showing', nextPagination: $t('general:resourceList.pagination.next'),
singlePluralPagination: 'general:resourceList.pagination.single', }"
prevPagination: $t('general:resourceList.pagination.prev'), clickable
nextPagination: $t('general:resourceList.pagination.next'), sticky-header
}" class="h-100"
clickable @search="filterList"
@search="filterList" @row-clicked="handleRowClicked"
@row-clicked="handleRowClicked" >
<template #header>
<div class="flex-grow-1">
<div
class="wrap-with-vertical-gutters"
> >
<template #header> <b-btn
<div class="flex-grow-1"> v-if="namespace.canCreateModule"
<div data-test-id="button-create"
class="wrap-with-vertical-gutters" variant="primary"
> size="lg"
<b-btn class="mr-1 float-left"
v-if="namespace.canCreateModule" :to="{ name: 'admin.modules.create' }"
data-test-id="button-create" >
variant="primary" {{ $t('createLabel') }}
size="lg" </b-btn>
class="mr-1 float-left"
:to="{ name: 'admin.modules.create' }"
>
{{ $t('createLabel') }}
</b-btn>
<import <import
v-if="namespace.canCreateModule" v-if="namespace.canCreateModule"
:namespace="namespace" :namespace="namespace"
type="module" type="module"
class="mr-1 float-left" class="mr-1 float-left"
@importSuccessful="onImportSuccessful" @importSuccessful="onImportSuccessful"
/> />
<export <export
:list="modules" :list="modules"
type="module" type="module"
class="mr-1 float-left" class="mr-1 float-left"
/> />
<b-dropdown <b-dropdown
v-if="namespace.canGrant" v-if="namespace.canGrant"
size="lg" size="lg"
variant="light" variant="light"
class="permissions-dropdown mr-1" class="permissions-dropdown mr-1"
> >
<template #button-content> <template #button-content>
<font-awesome-icon :icon="['fas', 'lock']" /> <font-awesome-icon :icon="['fas', 'lock']" />
<span> <span>
{{ $t('general:label.permissions') }} {{ $t('general:label.permissions') }}
</span> </span>
</template> </template>
<b-dropdown-item> <b-dropdown-item>
<c-permissions-button <c-permissions-button
:resource="`corteza::compose:module/${namespace.namespaceID}/*`" :resource="`corteza::compose:module/${namespace.namespaceID}/*`"
:button-label="$t('general:label.module')" :button-label="$t('general:label.module')"
:show-button-icon="false" :show-button-icon="false"
button-variant="white text-left w-100" button-variant="white text-left w-100"
/> />
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item> <b-dropdown-item>
<c-permissions-button <c-permissions-button
:resource="`corteza::compose:module-field/${namespace.namespaceID}/*/*`" :resource="`corteza::compose:module-field/${namespace.namespaceID}/*/*`"
:button-label="$t('general:label.field')" :button-label="$t('general:label.field')"
:show-button-icon="false" :show-button-icon="false"
button-variant="white text-left w-100" button-variant="white text-left w-100"
/> />
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item> <b-dropdown-item>
<c-permissions-button <c-permissions-button
:resource="`corteza::compose:record/${namespace.namespaceID}/*/*`" :resource="`corteza::compose:record/${namespace.namespaceID}/*/*`"
:button-label="$t('general:label.record')" :button-label="$t('general:label.record')"
:show-button-icon="false" :show-button-icon="false"
button-variant="white text-left w-100" button-variant="white text-left w-100"
/> />
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>
</div> </div>
</div> </div>
</template> </template>
<template #actions="{ item: m }"> <template #actions="{ item: m }">
<related-pages <related-pages
:namespace="namespace" :namespace="namespace"
:module="m" :module="m"
/> />
<b-button
data-test-id="button-all-records"
variant="link"
:to="{name: 'admin.modules.record.list', params: { moduleID: m.moduleID }}"
class="text-dark text-decoration-none"
>
{{ $t('allRecords.label') }}
</b-button>
<c-permissions-button
v-if="m.canGrant"
:title="m.name || m.handle || m.moduleID"
:target="m.name || m.handle || m.moduleID"
:resource="`corteza::compose:module/${m.namespaceID}/${m.moduleID}`"
:tooltip="$t('permissions:resources.compose.module.tooltip')"
class="btn px-2"
link
/>
</template>
<template #name="{ item: m }"> <b-button-group
<div class="ml-2"
class="d-flex align-items-center" >
> <b-button
{{ m.name }} data-test-id="button-all-records"
<h5 variant="outline-light"
class="ml-2 mb-0" :title="$t('allRecords.label')"
> :to="{name: 'admin.modules.record.list', params: { moduleID: m.moduleID }}"
<b-badge class="text-primary d-print-none border-0"
v-if="Object.keys(m.labels || {}).includes('federation')" >
pill <font-awesome-icon
variant="primary" :icon="['fas', 'columns']"
> />
{{ $t('federated') }} </b-button>
</b-badge>
</h5>
</div>
</template>
<template #changedAt="{ item }"> <c-permissions-button
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }} v-if="m.canGrant"
</template> :title="m.name || m.handle || m.moduleID"
</c-resource-list> :target="m.name || m.handle || m.moduleID"
</b-col> :resource="`corteza::compose:module/${m.namespaceID}/${m.moduleID}`"
</b-row> :tooltip="$t('permissions:resources.compose.module.tooltip')"
</b-container> button-variant="outline-light"
</div> class="text-dark d-print-none border-0"
/>
</b-button-group>
</template>
<template #name="{ item: m }">
<div
class="d-flex align-items-center"
>
{{ m.name }}
<h5
class="ml-2 mb-0"
>
<b-badge
v-if="Object.keys(m.labels || {}).includes('federation')"
pill
variant="primary"
>
{{ $t('federated') }}
</b-badge>
</h5>
</div>
</template>
<template #changedAt="{ item }">
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
</template>
</c-resource-list>
</b-container>
</template> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'

View File

@ -1,103 +1,95 @@
<template> <template>
<div class="py-3"> <b-container
fluid="xl"
class="d-flex flex-column py-3"
>
<portal to="topbar-title"> <portal to="topbar-title">
{{ $t('navigation.page') }} {{ $t('navigation.page') }}
</portal> </portal>
<b-container fluid="xl"> <b-card
<b-row no-gutters> no-body
<b-col> class="shadow-sm h-100"
<b-card >
no-body <b-card-header
class="shadow-sm" header-bg-variant="white"
> class="border-bottom"
<b-card-header >
header-bg-variant="white" <b-row
class="py-3" no-gutters
class="justify-content-between wrap-with-vertical-gutters"
>
<div class="flex-grow-1">
<b-input-group
v-if="namespace.canCreatePage"
class="h-100"
> >
<b-row <b-input
no-gutters id="name"
class="justify-content-between wrap-with-vertical-gutters" v-model="page.title"
> data-test-id="input-name"
<div class="flex-grow-1"> required
<b-input-group type="text"
v-if="namespace.canCreatePage" class="h-100"
class="h-100" :placeholder="$t('newPlaceholder')"
> />
<b-input <b-input-group-append>
id="name" <b-button
v-model="page.title" data-test-id="button-create-page"
data-test-id="input-name" type="submit"
required variant="primary"
type="text" size="lg"
class="h-100" @click="handleAddPageFormSubmit"
:placeholder="$t('newPlaceholder')" >
/> {{ $t('createLabel') }}
<b-input-group-append> </b-button>
<b-button </b-input-group-append>
data-test-id="button-create-page" </b-input-group>
type="submit" </div>
variant="primary" <div class="d-flex justify-content-sm-end flex-grow-1">
size="lg" <c-permissions-button
@click="handleAddPageFormSubmit" v-if="namespace.canGrant"
> :resource="`corteza::compose:page/${namespace.namespaceID}/*`"
{{ $t('createLabel') }} class="btn-lg"
</b-button> :button-label="$t('label.permissions')"
</b-input-group-append> button-variant="light"
</b-input-group>
</div>
<div class="d-flex justify-content-sm-end flex-grow-1">
<c-permissions-button
v-if="namespace.canGrant"
:resource="`corteza::compose:page/${namespace.namespaceID}/*`"
class="btn-lg"
:button-label="$t('label.permissions')"
button-variant="light"
/>
</div>
</b-row>
</b-card-header>
<b-row
class="pages-list-header border-top align-content-center"
no-gutters
>
<b-col
cols="12"
class="pl-4"
>
<span class="font-weight-bold">
{{ $t('newPlaceholder') }}
</span>
<span class="text-muted font-italic ml-3">
{{ $t('instructions') }}
</span>
</b-col>
</b-row>
<div
v-if="processing"
class="text-center text-muted m-5"
>
<div>
<b-spinner
class="align-middle m-2"
/>
</div>
{{ $t('loading') }}
</div>
<page-tree
v-else
v-model="tree"
:namespace="namespace"
class="pb-2"
@reorder="handleReorder"
/> />
</b-card> </div>
</b-col> </b-row>
</b-row> <b-row
</b-container> class="align-content-center mt-2"
</div> >
<b-col
cols="12"
>
<span class="text-muted font-italic">
{{ $t('instructions') }}
</span>
</b-col>
</b-row>
</b-card-header>
<div
v-if="processing"
class="text-center text-muted m-5"
>
<div>
<b-spinner
class="align-middle m-2"
/>
</div>
{{ $t('loading') }}
</div>
<page-tree
v-else
v-model="tree"
:namespace="namespace"
class="card overflow-auto"
@reorder="handleReorder"
/>
</b-card>
</b-container>
</template> </template>
<script> <script>
@ -170,7 +162,7 @@ export default {
//!important usage to over-ride library styling //!important usage to over-ride library styling
$input-height: 42px; $input-height: 42px;
$content-height: 48px; $content-height: 48px;
$blank-li-height: 5px; $blank-li-height: 10px;
$left-padding: 5px; $left-padding: 5px;
$border-color: $light; $border-color: $light;
$hover-color: $gray-200; $hover-color: $gray-200;
@ -181,6 +173,10 @@ $dropping-color: $secondary;
} }
.sortable-tree { .sortable-tree {
.content {
height: 0px !important;
}
ul { ul {
.content { .content {
height: 100% !important; height: 100% !important;
@ -200,6 +196,10 @@ $dropping-color: $secondary;
&.blank-li { &.blank-li {
height: $blank-li-height !important; height: $blank-li-height !important;
.sortable-tree {
max-height: 100%;
}
&:nth-last-of-type(1)::before { &:nth-last-of-type(1)::before {
border-left-color: white !important; border-left-color: white !important;
height: 0; height: 0;

View File

@ -1,6 +1,7 @@
<template> <template>
<div <b-container
class="d-flex w-100 overflow-auto" fluid="xl"
class="d-flex flex-column py-3"
> >
<portal to="topbar-title"> <portal to="topbar-title">
{{ $t('title') }} {{ $t('title') }}
@ -22,81 +23,87 @@
</b-btn> </b-btn>
</portal> </portal>
<b-container <c-resource-list
class="ns-wrapper" data-test-id="table-namespaces-list"
fluid="xl" :primary-key="primaryKey"
:filter="filter"
:sorting="sorting"
:pagination="pagination"
:fields="namespacesFields"
:items="namespaceList"
:translations="{
searchPlaceholder: $t('namespace:searchPlaceholder'),
notFound: $t('general:resourceList.notFound'),
noItems: $t('general:resourceList.noItems'),
loading: $t('general:label.loading'),
showingPagination: 'general:resourceList.pagination.showing',
singlePluralPagination: 'general:resourceList.pagination.single',
prevPagination: $t('general:resourceList.pagination.prev'),
nextPagination: $t('general:resourceList.pagination.next'),
}"
clickable
sticky-header
class="h-100"
@search="filterList"
@row-clicked="handleRowClicked"
> >
<b-row <template #header>
class="my-3" <div
no-gutters class="wrap-with-vertical-gutters"
>
<c-resource-list
:primary-key="primaryKey"
:filter="filter"
:sorting="sorting"
:pagination="pagination"
:fields="namespacesFields"
:items="namespaceList"
:translations="{
searchPlaceholder: $t('namespace:searchPlaceholder'),
notFound: $t('general:resourceList.notFound'),
noItems: $t('general:resourceList.noItems'),
loading: $t('general:label.loading'),
showingPagination: 'general:resourceList.pagination.showing',
singlePluralPagination: 'general:resourceList.pagination.single',
prevPagination: $t('general:resourceList.pagination.prev'),
nextPagination: $t('general:resourceList.pagination.next'),
}"
clickable
class="h-100 w-100"
@search="filterList"
@row-clicked="handleRowClicked"
> >
<template #header> <b-btn
<div v-if="canCreate"
class="wrap-with-vertical-gutters" data-test-id="button-create"
> :to="{ name: 'namespace.create' }"
<b-btn variant="primary"
v-if="canCreate" size="lg"
data-test-id="button-create" class="mr-1 float-left"
:to="{ name: 'namespace.create' }" >
variant="primary" {{ $t('toolbar.buttons.create') }}
size="lg" </b-btn>
class="mr-1 float-left"
>
{{ $t('toolbar.buttons.create') }}
</b-btn>
<importer-modal <importer-modal
v-if="canImport" v-if="canImport"
class="mr-1 float-left" class="mr-1 float-left"
@imported="onImported" @imported="onImported"
@failed="onFailed" @failed="onFailed"
/> />
<c-permissions-button <c-permissions-button
v-if="canGrant" v-if="canGrant"
resource="corteza::compose:namespace/*" resource="corteza::compose:namespace/*"
button-variant="light" button-variant="light"
:button-label="$t('toolbar.buttons.permissions')" :button-label="$t('toolbar.buttons.permissions')"
class="btn-lg float-left" class="btn-lg float-left"
/> />
</div> </div>
</template> </template>
<template #enabled="{ item }"> <template #enabled="{ item }">
<font-awesome-icon <font-awesome-icon
:icon="['fas', item.enabled ? 'check' : 'times']" :icon="['fas', item.enabled ? 'check' : 'times']"
/> />
</template> </template>
<template #changedAt="{ item }"> <template #changedAt="{ item }">
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }} {{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
</template> </template>
</c-resource-list>
</b-row> <template #actions="{ item: n }">
</b-container> <b-button-group>
</div> <c-permissions-button
v-if="n.canGrant"
:title="n.name || n.slug || n.namespaceID"
:target="n.name || n.slug || n.namespaceID"
:resource="`corteza::compose:namespace/${n.namespaceID}`"
:tooltip="$t('permissions:resources.compose.namespace.tooltip')"
button-variant="outline-light"
class="text-dark d-print-none border-0"
/>
</b-button-group>
</template>
</c-resource-list>
</b-container>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
@ -121,10 +128,6 @@ export default {
return { return {
primaryKey: 'namespaceID', primaryKey: 'namespaceID',
pagination: {
limit: 13,
},
filter: { filter: {
query: '', query: '',
}, },

View File

@ -51,18 +51,19 @@
id="resource-list" id="resource-list"
ref="resourceList" ref="resourceList"
head-variant="light" head-variant="light"
:fields="_fields"
:items="_items"
:sort-by.sync="sorting.sortBy"
:sort-desc.sync="sorting.sortDesc"
:sticky-header="stickyHeader"
:tbody-tr-class="tableRowClasses"
hover hover
responsive responsive
show-empty show-empty
no-sort-reset no-sort-reset
no-local-sorting no-local-sorting
:primary-key="primaryKey" :primary-key="primaryKey"
:sort-by.sync="sorting.sortBy" class="mh-100 h-100 mb-0"
:sort-desc.sync="sorting.sortDesc"
:items="_items"
:fields="_fields"
:tbody-tr-class="tableRowClasses"
class="mb-0"
@sort-changed="pagination.page = 1" @sort-changed="pagination.page = 1"
@row-clicked="$emit('row-clicked', $event)" @row-clicked="$emit('row-clicked', $event)"
> >
@ -137,7 +138,7 @@
</div> </div>
<b-button-group <b-button-group
v-if="!hidePagination" v-if="showPagination"
> >
<b-button <b-button
:disabled="!hasPrevPage" :disabled="!hasPrevPage"
@ -230,6 +231,10 @@ export default {
type: Boolean, type: Boolean,
}, },
stickyHeader: {
type: Boolean,
},
// Are rows clickable // Are rows clickable
clickable: { clickable: {
type: Boolean, type: Boolean,
@ -321,6 +326,10 @@ export default {
hasNextPage () { hasNextPage () {
return !!this.pagination.nextPage return !!this.pagination.nextPage
}, },
showPagination () {
return !this.hidePagination && (this.hasPrevPage || this.hasNextPage)
}
}, },
methods: { methods: {

View File

@ -38,6 +38,7 @@ resources:
chart: chart:
all: all charts all: all charts
specific: chart "{{target}}" specific: chart "{{target}}"
tooltip: Chart permissions
operations: operations:
delete: delete:
description: 'Default: deny' description: 'Default: deny'