Adjust compose resource list UX
This commit is contained in:
Jože Fortun
parent
16a8a98770
commit
b14412c69d
@ -6,7 +6,7 @@
|
||||
:data="{children:list}"
|
||||
tag="ul"
|
||||
mixin-parent-key="parent"
|
||||
class="list-group pb-3"
|
||||
class="list-group"
|
||||
@changePosition="handleChangePosition"
|
||||
>
|
||||
<template
|
||||
|
||||
@ -10,7 +10,7 @@ export default {
|
||||
filter: {},
|
||||
|
||||
pagination: {
|
||||
limit: 12,
|
||||
limit: 100,
|
||||
pageCursor: undefined,
|
||||
prevPage: '',
|
||||
nextPage: '',
|
||||
|
||||
@ -1,106 +1,108 @@
|
||||
<template>
|
||||
<div class="py-3">
|
||||
<b-container
|
||||
fluid="xl"
|
||||
class="d-flex flex-column py-3"
|
||||
>
|
||||
<portal to="topbar-title">
|
||||
{{ $t('navigation.chart') }}
|
||||
</portal>
|
||||
|
||||
<b-container fluid="xl">
|
||||
<b-row no-gutters>
|
||||
<b-col>
|
||||
<c-resource-list
|
||||
:primary-key="primaryKey"
|
||||
:filter="filter"
|
||||
:sorting="sorting"
|
||||
:pagination="pagination"
|
||||
:fields="tableFields"
|
||||
:items="chartList"
|
||||
:translations="{
|
||||
searchPlaceholder: $t('chart.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
|
||||
@search="filterList"
|
||||
@row-clicked="handleRowClicked"
|
||||
<c-resource-list
|
||||
:primary-key="primaryKey"
|
||||
:filter="filter"
|
||||
:sorting="sorting"
|
||||
:pagination="pagination"
|
||||
:fields="tableFields"
|
||||
:items="chartList"
|
||||
:translations="{
|
||||
searchPlaceholder: $t('chart.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"
|
||||
>
|
||||
<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>
|
||||
<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')"
|
||||
>
|
||||
<b-dropdown-item-button
|
||||
variant="dark"
|
||||
@click="$router.push({ name: 'admin.charts.create', params: { category: 'generic' } })"
|
||||
>
|
||||
{{ $t('chart.addGeneric') }}
|
||||
</b-dropdown-item-button>
|
||||
<b-dropdown-item-button
|
||||
variant="dark"
|
||||
@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>
|
||||
<b-dropdown-item-button
|
||||
variant="dark"
|
||||
@click="$router.push({ name: 'admin.charts.create', params: { category: 'generic' } })"
|
||||
>
|
||||
{{ $t('chart.addGeneric') }}
|
||||
</b-dropdown-item-button>
|
||||
<b-dropdown-item-button
|
||||
variant="dark"
|
||||
@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
|
||||
v-if="namespace.canCreateChart"
|
||||
:namespace="namespace"
|
||||
type="chart"
|
||||
class="float-left mr-1"
|
||||
@importSuccessful="onImportSuccessful"
|
||||
/>
|
||||
<import
|
||||
v-if="namespace.canCreateChart"
|
||||
:namespace="namespace"
|
||||
type="chart"
|
||||
class="float-left mr-1"
|
||||
@importSuccessful="onImportSuccessful"
|
||||
/>
|
||||
|
||||
<export
|
||||
:list="charts"
|
||||
type="chart"
|
||||
class="float-left mr-1"
|
||||
/>
|
||||
<c-permissions-button
|
||||
v-if="namespace.canGrant"
|
||||
:resource="`corteza::compose:chart/${namespace.namespaceID}/*`"
|
||||
:button-label="$t('general.label.permissions')"
|
||||
button-variant="light"
|
||||
class="btn-lg"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<export
|
||||
:list="charts"
|
||||
type="chart"
|
||||
class="float-left mr-1"
|
||||
/>
|
||||
<c-permissions-button
|
||||
v-if="namespace.canGrant"
|
||||
:resource="`corteza::compose:chart/${namespace.namespaceID}/*`"
|
||||
:button-label="$t('general.label.permissions')"
|
||||
button-variant="light"
|
||||
class="btn-lg"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions="{ item: c }">
|
||||
<c-permissions-button
|
||||
v-if="c.canGrant"
|
||||
:title="c.name || c.handle || c.chartID"
|
||||
:target="c.name || c.handle || c.chartID"
|
||||
:resource="`corteza::compose:chart/${namespace.namespaceID}/${c.chartID}`"
|
||||
link
|
||||
class="btn px-2"
|
||||
/>
|
||||
</template>
|
||||
<template #actions="{ item: c }">
|
||||
<b-button-group>
|
||||
<c-permissions-button
|
||||
v-if="c.canGrant"
|
||||
:title="c.name || c.handle || c.chartID"
|
||||
:target="c.name || c.handle || c.chartID"
|
||||
:resource="`corteza::compose:chart/${namespace.namespaceID}/${c.chartID}`"
|
||||
:tooltip="$t('permissions:resources.compose.chart.tooltip')"
|
||||
button-variant="outline-light"
|
||||
class="text-dark d-print-none border-0"
|
||||
/>
|
||||
</b-button-group>
|
||||
</template>
|
||||
|
||||
<template #changedAt="{ item }">
|
||||
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
|
||||
</template>
|
||||
</c-resource-list>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
<template #changedAt="{ item }">
|
||||
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
|
||||
</template>
|
||||
</c-resource-list>
|
||||
</b-container>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
|
||||
@ -1,159 +1,167 @@
|
||||
"<template>
|
||||
<div class="py-3">
|
||||
<b-container
|
||||
fluid="xl"
|
||||
class="d-flex flex-column py-3"
|
||||
>
|
||||
<portal to="topbar-title">
|
||||
{{ $t('navigation.module') }}
|
||||
</portal>
|
||||
|
||||
<b-container fluid="xl">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<c-resource-list
|
||||
data-test-id="table-modules-list"
|
||||
:primary-key="primaryKey"
|
||||
:filter="filter"
|
||||
:sorting="sorting"
|
||||
:pagination="pagination"
|
||||
:fields="fields"
|
||||
:items="items"
|
||||
:translations="{
|
||||
searchPlaceholder: $t('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
|
||||
@search="filterList"
|
||||
@row-clicked="handleRowClicked"
|
||||
<c-resource-list
|
||||
data-test-id="table-modules-list"
|
||||
:primary-key="primaryKey"
|
||||
:filter="filter"
|
||||
:sorting="sorting"
|
||||
:pagination="pagination"
|
||||
:fields="fields"
|
||||
:items="items"
|
||||
:translations="{
|
||||
searchPlaceholder: $t('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"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex-grow-1">
|
||||
<div
|
||||
class="wrap-with-vertical-gutters"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex-grow-1">
|
||||
<div
|
||||
class="wrap-with-vertical-gutters"
|
||||
>
|
||||
<b-btn
|
||||
v-if="namespace.canCreateModule"
|
||||
data-test-id="button-create"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
class="mr-1 float-left"
|
||||
:to="{ name: 'admin.modules.create' }"
|
||||
>
|
||||
{{ $t('createLabel') }}
|
||||
</b-btn>
|
||||
<b-btn
|
||||
v-if="namespace.canCreateModule"
|
||||
data-test-id="button-create"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
class="mr-1 float-left"
|
||||
:to="{ name: 'admin.modules.create' }"
|
||||
>
|
||||
{{ $t('createLabel') }}
|
||||
</b-btn>
|
||||
|
||||
<import
|
||||
v-if="namespace.canCreateModule"
|
||||
:namespace="namespace"
|
||||
type="module"
|
||||
class="mr-1 float-left"
|
||||
@importSuccessful="onImportSuccessful"
|
||||
/>
|
||||
<import
|
||||
v-if="namespace.canCreateModule"
|
||||
:namespace="namespace"
|
||||
type="module"
|
||||
class="mr-1 float-left"
|
||||
@importSuccessful="onImportSuccessful"
|
||||
/>
|
||||
|
||||
<export
|
||||
:list="modules"
|
||||
type="module"
|
||||
class="mr-1 float-left"
|
||||
/>
|
||||
<export
|
||||
:list="modules"
|
||||
type="module"
|
||||
class="mr-1 float-left"
|
||||
/>
|
||||
|
||||
<b-dropdown
|
||||
v-if="namespace.canGrant"
|
||||
size="lg"
|
||||
variant="light"
|
||||
class="permissions-dropdown mr-1"
|
||||
>
|
||||
<template #button-content>
|
||||
<font-awesome-icon :icon="['fas', 'lock']" />
|
||||
<span>
|
||||
{{ $t('general:label.permissions') }}
|
||||
</span>
|
||||
</template>
|
||||
<b-dropdown
|
||||
v-if="namespace.canGrant"
|
||||
size="lg"
|
||||
variant="light"
|
||||
class="permissions-dropdown mr-1"
|
||||
>
|
||||
<template #button-content>
|
||||
<font-awesome-icon :icon="['fas', 'lock']" />
|
||||
<span>
|
||||
{{ $t('general:label.permissions') }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<b-dropdown-item>
|
||||
<c-permissions-button
|
||||
:resource="`corteza::compose:module/${namespace.namespaceID}/*`"
|
||||
:button-label="$t('general:label.module')"
|
||||
:show-button-icon="false"
|
||||
button-variant="white text-left w-100"
|
||||
/>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item>
|
||||
<c-permissions-button
|
||||
:resource="`corteza::compose:module/${namespace.namespaceID}/*`"
|
||||
:button-label="$t('general:label.module')"
|
||||
:show-button-icon="false"
|
||||
button-variant="white text-left w-100"
|
||||
/>
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item>
|
||||
<c-permissions-button
|
||||
:resource="`corteza::compose:module-field/${namespace.namespaceID}/*/*`"
|
||||
:button-label="$t('general:label.field')"
|
||||
:show-button-icon="false"
|
||||
button-variant="white text-left w-100"
|
||||
/>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item>
|
||||
<c-permissions-button
|
||||
:resource="`corteza::compose:module-field/${namespace.namespaceID}/*/*`"
|
||||
:button-label="$t('general:label.field')"
|
||||
:show-button-icon="false"
|
||||
button-variant="white text-left w-100"
|
||||
/>
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item>
|
||||
<c-permissions-button
|
||||
:resource="`corteza::compose:record/${namespace.namespaceID}/*/*`"
|
||||
:button-label="$t('general:label.record')"
|
||||
:show-button-icon="false"
|
||||
button-variant="white text-left w-100"
|
||||
/>
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<b-dropdown-item>
|
||||
<c-permissions-button
|
||||
:resource="`corteza::compose:record/${namespace.namespaceID}/*/*`"
|
||||
:button-label="$t('general:label.record')"
|
||||
:show-button-icon="false"
|
||||
button-variant="white text-left w-100"
|
||||
/>
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions="{ item: m }">
|
||||
<related-pages
|
||||
:namespace="namespace"
|
||||
: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 #actions="{ item: m }">
|
||||
<related-pages
|
||||
:namespace="namespace"
|
||||
:module="m"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<b-button-group
|
||||
class="ml-2"
|
||||
>
|
||||
<b-button
|
||||
data-test-id="button-all-records"
|
||||
variant="outline-light"
|
||||
:title="$t('allRecords.label')"
|
||||
:to="{name: 'admin.modules.record.list', params: { moduleID: m.moduleID }}"
|
||||
class="text-primary d-print-none border-0"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'columns']"
|
||||
/>
|
||||
</b-button>
|
||||
|
||||
<template #changedAt="{ item }">
|
||||
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
|
||||
</template>
|
||||
</c-resource-list>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
<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')"
|
||||
button-variant="outline-light"
|
||||
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>
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
|
||||
@ -1,103 +1,95 @@
|
||||
<template>
|
||||
<div class="py-3">
|
||||
<b-container
|
||||
fluid="xl"
|
||||
class="d-flex flex-column py-3"
|
||||
>
|
||||
<portal to="topbar-title">
|
||||
{{ $t('navigation.page') }}
|
||||
</portal>
|
||||
|
||||
<b-container fluid="xl">
|
||||
<b-row no-gutters>
|
||||
<b-col>
|
||||
<b-card
|
||||
no-body
|
||||
class="shadow-sm"
|
||||
>
|
||||
<b-card-header
|
||||
header-bg-variant="white"
|
||||
class="py-3"
|
||||
<b-card
|
||||
no-body
|
||||
class="shadow-sm h-100"
|
||||
>
|
||||
<b-card-header
|
||||
header-bg-variant="white"
|
||||
class="border-bottom"
|
||||
>
|
||||
<b-row
|
||||
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
|
||||
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-input
|
||||
id="name"
|
||||
v-model="page.title"
|
||||
data-test-id="input-name"
|
||||
required
|
||||
type="text"
|
||||
class="h-100"
|
||||
:placeholder="$t('newPlaceholder')"
|
||||
/>
|
||||
<b-input-group-append>
|
||||
<b-button
|
||||
data-test-id="button-create-page"
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
@click="handleAddPageFormSubmit"
|
||||
>
|
||||
{{ $t('createLabel') }}
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</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-input
|
||||
id="name"
|
||||
v-model="page.title"
|
||||
data-test-id="input-name"
|
||||
required
|
||||
type="text"
|
||||
class="h-100"
|
||||
:placeholder="$t('newPlaceholder')"
|
||||
/>
|
||||
<b-input-group-append>
|
||||
<b-button
|
||||
data-test-id="button-create-page"
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
@click="handleAddPageFormSubmit"
|
||||
>
|
||||
{{ $t('createLabel') }}
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</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"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
</div>
|
||||
</b-row>
|
||||
<b-row
|
||||
class="align-content-center mt-2"
|
||||
>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@ -170,7 +162,7 @@ export default {
|
||||
//!important usage to over-ride library styling
|
||||
$input-height: 42px;
|
||||
$content-height: 48px;
|
||||
$blank-li-height: 5px;
|
||||
$blank-li-height: 10px;
|
||||
$left-padding: 5px;
|
||||
$border-color: $light;
|
||||
$hover-color: $gray-200;
|
||||
@ -181,6 +173,10 @@ $dropping-color: $secondary;
|
||||
}
|
||||
|
||||
.sortable-tree {
|
||||
.content {
|
||||
height: 0px !important;
|
||||
}
|
||||
|
||||
ul {
|
||||
.content {
|
||||
height: 100% !important;
|
||||
@ -200,6 +196,10 @@ $dropping-color: $secondary;
|
||||
&.blank-li {
|
||||
height: $blank-li-height !important;
|
||||
|
||||
.sortable-tree {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
&:nth-last-of-type(1)::before {
|
||||
border-left-color: white !important;
|
||||
height: 0;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="d-flex w-100 overflow-auto"
|
||||
<b-container
|
||||
fluid="xl"
|
||||
class="d-flex flex-column py-3"
|
||||
>
|
||||
<portal to="topbar-title">
|
||||
{{ $t('title') }}
|
||||
@ -22,81 +23,87 @@
|
||||
</b-btn>
|
||||
</portal>
|
||||
|
||||
<b-container
|
||||
class="ns-wrapper"
|
||||
fluid="xl"
|
||||
<c-resource-list
|
||||
data-test-id="table-namespaces-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
|
||||
sticky-header
|
||||
class="h-100"
|
||||
@search="filterList"
|
||||
@row-clicked="handleRowClicked"
|
||||
>
|
||||
<b-row
|
||||
class="my-3"
|
||||
no-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>
|
||||
<div
|
||||
class="wrap-with-vertical-gutters"
|
||||
>
|
||||
<template #header>
|
||||
<div
|
||||
class="wrap-with-vertical-gutters"
|
||||
>
|
||||
<b-btn
|
||||
v-if="canCreate"
|
||||
data-test-id="button-create"
|
||||
:to="{ name: 'namespace.create' }"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
class="mr-1 float-left"
|
||||
>
|
||||
{{ $t('toolbar.buttons.create') }}
|
||||
</b-btn>
|
||||
<b-btn
|
||||
v-if="canCreate"
|
||||
data-test-id="button-create"
|
||||
:to="{ name: 'namespace.create' }"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
class="mr-1 float-left"
|
||||
>
|
||||
{{ $t('toolbar.buttons.create') }}
|
||||
</b-btn>
|
||||
|
||||
<importer-modal
|
||||
v-if="canImport"
|
||||
class="mr-1 float-left"
|
||||
@imported="onImported"
|
||||
@failed="onFailed"
|
||||
/>
|
||||
<importer-modal
|
||||
v-if="canImport"
|
||||
class="mr-1 float-left"
|
||||
@imported="onImported"
|
||||
@failed="onFailed"
|
||||
/>
|
||||
|
||||
<c-permissions-button
|
||||
v-if="canGrant"
|
||||
resource="corteza::compose:namespace/*"
|
||||
button-variant="light"
|
||||
:button-label="$t('toolbar.buttons.permissions')"
|
||||
class="btn-lg float-left"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<c-permissions-button
|
||||
v-if="canGrant"
|
||||
resource="corteza::compose:namespace/*"
|
||||
button-variant="light"
|
||||
:button-label="$t('toolbar.buttons.permissions')"
|
||||
class="btn-lg float-left"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #enabled="{ item }">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', item.enabled ? 'check' : 'times']"
|
||||
/>
|
||||
</template>
|
||||
<template #enabled="{ item }">
|
||||
<font-awesome-icon
|
||||
:icon="['fas', item.enabled ? 'check' : 'times']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #changedAt="{ item }">
|
||||
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
|
||||
</template>
|
||||
</c-resource-list>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
<template #changedAt="{ item }">
|
||||
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
|
||||
</template>
|
||||
|
||||
<template #actions="{ item: n }">
|
||||
<b-button-group>
|
||||
<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>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
@ -121,10 +128,6 @@ export default {
|
||||
return {
|
||||
primaryKey: 'namespaceID',
|
||||
|
||||
pagination: {
|
||||
limit: 13,
|
||||
},
|
||||
|
||||
filter: {
|
||||
query: '',
|
||||
},
|
||||
|
||||
@ -51,18 +51,19 @@
|
||||
id="resource-list"
|
||||
ref="resourceList"
|
||||
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
|
||||
responsive
|
||||
show-empty
|
||||
no-sort-reset
|
||||
no-local-sorting
|
||||
:primary-key="primaryKey"
|
||||
:sort-by.sync="sorting.sortBy"
|
||||
:sort-desc.sync="sorting.sortDesc"
|
||||
:items="_items"
|
||||
:fields="_fields"
|
||||
:tbody-tr-class="tableRowClasses"
|
||||
class="mb-0"
|
||||
class="mh-100 h-100 mb-0"
|
||||
@sort-changed="pagination.page = 1"
|
||||
@row-clicked="$emit('row-clicked', $event)"
|
||||
>
|
||||
@ -137,7 +138,7 @@
|
||||
</div>
|
||||
|
||||
<b-button-group
|
||||
v-if="!hidePagination"
|
||||
v-if="showPagination"
|
||||
>
|
||||
<b-button
|
||||
:disabled="!hasPrevPage"
|
||||
@ -230,6 +231,10 @@ export default {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
stickyHeader: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
// Are rows clickable
|
||||
clickable: {
|
||||
type: Boolean,
|
||||
@ -321,6 +326,10 @@ export default {
|
||||
hasNextPage () {
|
||||
return !!this.pagination.nextPage
|
||||
},
|
||||
|
||||
showPagination () {
|
||||
return !this.hidePagination && (this.hasPrevPage || this.hasNextPage)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
@ -38,6 +38,7 @@ resources:
|
||||
chart:
|
||||
all: all charts
|
||||
specific: chart "{{target}}"
|
||||
tooltip: Chart permissions
|
||||
operations:
|
||||
delete:
|
||||
description: 'Default: deny'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user