Adjust compose resource list UX
This commit is contained in:
parent
16a8a98770
commit
b14412c69d
@ -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
|
||||||
|
|||||||
@ -10,7 +10,7 @@ export default {
|
|||||||
filter: {},
|
filter: {},
|
||||||
|
|
||||||
pagination: {
|
pagination: {
|
||||||
limit: 12,
|
limit: 100,
|
||||||
pageCursor: undefined,
|
pageCursor: undefined,
|
||||||
prevPage: '',
|
prevPage: '',
|
||||||
nextPage: '',
|
nextPage: '',
|
||||||
|
|||||||
@ -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'
|
||||||
|
|||||||
@ -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'
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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: '',
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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: {
|
||||||
|
|||||||
@ -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'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user