DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Make standalone CResourceList full height

Browse Source
This commit is contained in:
Emmy Leke
2023-04-20 15:32:26 +01:00
parent 4400037ba7
commit decfe7eae6
16 changed files with 312 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/web/admin/src/mixins/listHelpers.js
View File

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

18
client/web/admin/src/themes/corteza-base/custom.scss
View File

@@ -49,6 +49,24 @@ th {
white-space: nowrap;
}
.wrap-with-vertical-gutters {
margin-top: -0.25rem;
> * {
margin-top: 0.25rem;
}
}
// custom height for resource lists with buttons
.custom-resource-height {
height: calc(100vh - 115px);
}
// to remove the gap on top of the sticky header table
.b-table-sticky-header > .table.b-table > thead > tr > th {
border: 0;
}
.v-select {
.vs__search {
margin-top: 0.375rem;

13
client/web/admin/src/views/Automation/Session/List.vue
View File

@@ -1,9 +1,11 @@
<template>
<b-container
class="py-3"
fluid="xl"
class="overflow-auto"
>
<c-content-header
:title="$t('title')"
class="content-header"
/>
<c-resource-list
@@ -23,6 +25,8 @@
prevPagination: $t('admin:general.pagination.prev'),
nextPagination: $t('admin:general.pagination.next'),
}"
sticky-header
class="h-100"
hide-search
>
<template #header>
@@ -34,7 +38,6 @@
:exclusive-label="$t('filterForm.exclusive.label')"
@change="filterList"
/>
<b-form-radio-group
v-model="filter.status"
:options="statusOptions"
@@ -156,3 +159,9 @@ export default {
},
}
</script>
<style scoped>
.content-header{
margin-bottom: 0 !important;
}
</style>

7
client/web/admin/src/views/Automation/Workflow/List.vue
View File

@@ -1,6 +1,6 @@
<template>
<b-container
class="py-3"
fluid="xl"
>
<c-content-header
:title="$t('title')"
@@ -15,6 +15,7 @@
>
{{ $t('new') }}
</b-button>
<c-permissions-button
v-if="canGrant"
resource="corteza::automation:workflow/*"
@@ -25,6 +26,7 @@
{{ $t('permissions') }}
</c-permissions-button>
</span>
<b-dropdown
v-if="false"
variant="link"
@@ -37,6 +39,7 @@
</b-dropdown-item-button>
</b-dropdown>
</c-content-header>
<c-resource-list
:primary-key="primaryKey"
:filter="filter"
@@ -55,6 +58,8 @@
prevPagination: $t('admin:general.pagination.prev'),
nextPagination: $t('admin:general.pagination.next'),
}"
class="custom-resource-height"
sticky-header
@search="filterList"
>
<template #header>

4
client/web/admin/src/views/Federation/Nodes/List.vue
View File

@@ -1,6 +1,6 @@
<template>
<b-container
class="py-3"
fluid="xl"
>
<c-content-header
:title="$t('title')"
@@ -30,6 +30,7 @@
:pagination="pagination"
:sorting="sorting"
:items="items"
class="custom-resource-height"
:translations="{
searchPlaceholder: $t('filterForm.query.placeholder'),
notFound: $t('admin:general.notFound'),
@@ -40,6 +41,7 @@
prevPagination: $t('admin:general.pagination.prev'),
nextPagination: $t('admin:general.pagination.next'),
}"
sticky-header
hide-total
@search="filterList"
>

7
client/web/admin/src/views/System/Application/List.vue
View File

@@ -1,6 +1,6 @@
<template>
<b-container
class="py-3"
fluid="xl"
>
<c-content-header
:title="$t('title')"
@@ -17,6 +17,7 @@
>
{{ $t('new') }}
</b-button>
<c-permissions-button
v-if="canGrant"
resource="corteza::system:application/*"
@@ -26,6 +27,7 @@
{{ $t('permissions') }}
</c-permissions-button>
</span>
<b-dropdown
v-if="false"
variant="link"
@@ -38,6 +40,7 @@
</b-dropdown-item-button>
</b-dropdown>
</c-content-header>
<c-resource-list
:primary-key="primaryKey"
:filter="filter"
@@ -46,6 +49,7 @@
:fields="fields"
:items="items"
:row-class="genericRowClass"
class="custom-resource-height"
:translations="{
searchPlaceholder: $t('filterForm.query.placeholder'),
notFound: $t('admin:general.notFound'),
@@ -56,6 +60,7 @@
prevPagination: $t('admin:general.pagination.prev'),
nextPagination: $t('admin:general.pagination.next'),
}"
sticky-header
@search="filterList"
>
<template #header>

6
client/web/admin/src/views/System/AuthClient/List.vue
View File

@@ -1,6 +1,6 @@
<template>
<b-container
class="py-3"
fluid="xl"
>
<c-content-header
:title="$t('title')"
@@ -17,6 +17,7 @@
>
{{ $t('new') }}
</b-button>
<c-permissions-button
v-if="canGrant"
resource="corteza::system:auth-client/*"
@@ -27,6 +28,7 @@
</c-permissions-button>
</span>
</c-content-header>
<c-resource-list
:primary-key="primaryKey"
:filter="filter"
@@ -35,6 +37,7 @@
:fields="fields"
:items="items"
:row-class="genericRowClass"
class="custom-resource-height"
:translations="{
searchPlaceholder: $t('filterForm.query.placeholder'),
notFound: $t('admin:general.notFound'),
@@ -45,6 +48,7 @@
prevPagination: $t('admin:general.pagination.prev'),
nextPagination: $t('admin:general.pagination.next'),
}"
sticky-header
hide-search
@search="filterList"
>

6
client/web/admin/src/views/System/Queue/List.vue
View File

@@ -1,6 +1,6 @@
<template>
<b-container
class="py-3"
fluid="xl"
>
<c-content-header
:title="$t('title')"
@@ -18,6 +18,7 @@
{{ $t('new') }}
</b-button>
</span>
<b-dropdown
v-if="false"
variant="link"
@@ -30,6 +31,7 @@
</b-dropdown-item-button>
</b-dropdown>
</c-content-header>
<c-resource-list
:primary-key="primaryKey"
:filter="filter"
@@ -38,6 +40,7 @@
:fields="fields"
:items="items"
:row-class="genericRowClass"
class="custom-resource-height"
:translations="{
searchPlaceholder: $t('filterForm.handle.placeholder'),
notFound: $t('admin:general.notFound'),
@@ -48,6 +51,7 @@
prevPagination: $t('admin:general.pagination.prev'),
nextPagination: $t('admin:general.pagination.next'),
}"
sticky-header
@search="filterList"
>
<template #header>

8
client/web/admin/src/views/System/Role/List.vue
View File

@@ -1,6 +1,6 @@
<template>
<b-container
class="py-3"
fluid="xl"
>
<c-content-header
:title="$t('title')"
@@ -17,6 +17,7 @@
>
{{ $t('new') }}
</b-button>
<c-permissions-button
v-if="canGrant"
resource="corteza::system:role/*"
@@ -26,6 +27,7 @@
{{ $t('permissions') }}
</c-permissions-button>
</span>
<b-dropdown
v-if="false"
variant="link"
@@ -37,6 +39,7 @@
{{ $t('yaml') }}
</b-dropdown-item-button>
</b-dropdown>
<c-corredor-manual-buttons
ui-page="role/list"
ui-slot="toolbar"
@@ -46,6 +49,7 @@
@click="dispatchCortezaSystemEvent($event)"
/>
</c-content-header>
<c-resource-list
:primary-key="primaryKey"
:filter="filter"
@@ -54,6 +58,7 @@
:fields="fields"
:items="items"
:row-class="rowClass"
class="custom-resource-height"
:translations="{
searchPlaceholder: $t('filterForm.query.placeholder'),
notFound: $t('admin:general.notFound'),
@@ -64,6 +69,7 @@
prevPagination: $t('admin:general.pagination.prev'),
nextPagination: $t('admin:general.pagination.next'),
}"
sticky-header
@search="filterList"
>
<template #header>

5
client/web/admin/src/views/System/SensitivityLevel/List.vue
View File

@@ -1,6 +1,6 @@
<template>
<b-container
class="py-3"
fluid="xl"
>
<c-content-header
:title="$t('title')"
@@ -18,6 +18,7 @@
</b-button>
</span>
</c-content-header>
<c-resource-list
:primary-key="primaryKey"
:filter="filter"
@@ -26,6 +27,7 @@
:fields="fields"
:items="items"
:row-class="genericRowClass"
class="custom-resource-height"
:translations="{
notFound: $t('admin:general.notFound'),
noItems: $t('admin:general.resource-list.no-items'),
@@ -35,6 +37,7 @@
prevPagination: $t('admin:general.pagination.prev'),
nextPagination: $t('admin:general.pagination.next'),
}"
sticky-header
hide-search
>
<template #header>

8
client/web/admin/src/views/System/Template/List.vue
View File

@@ -1,6 +1,6 @@
<template>
<b-container
class="py-3"
fluid="xl"
>
<c-content-header
:title="$t('title')"
@@ -17,6 +17,7 @@
>
{{ $t('new') }}
</b-button>
<c-permissions-button
v-if="canGrant"
resource="corteza::system:template/*"
@@ -26,6 +27,7 @@
{{ $t('permissions') }}
</c-permissions-button>
</span>
<b-dropdown
v-if="false"
variant="link"
@@ -37,6 +39,7 @@
{{ $t('yaml') }}
</b-dropdown-item-button>
</b-dropdown>
<c-corredor-manual-buttons
ui-page="template/list"
ui-slot="toolbar"
@@ -46,6 +49,7 @@
@click="dispatchCortezaSystemEvent($event)"
/>
</c-content-header>
<c-resource-list
:primary-key="primaryKey"
:filter="filter"
@@ -64,6 +68,8 @@
prevPagination: $t('admin:general.pagination.prev'),
nextPagination: $t('admin:general.pagination.next'),
}"
sticky-header
class="custom-resource-height"
@search="filterList"
>
<template #header>

9
client/web/admin/src/views/System/User/List.vue
View File

@@ -1,6 +1,6 @@
<template>
<b-container
class="py-3"
fluid="xl"
>
<c-content-header
:title="$t('title')"
@@ -16,14 +16,17 @@
>
{{ $t('new') }}
</b-button>
<c-user-import-modal
class="mr-1 float-left"
@imported="onImported"
/>
<c-user-export-modal
class="mr-1 float-left"
@export="onExport"
/>
<c-permissions-button
v-if="canGrant"
resource="corteza::system:user/*"
@@ -33,6 +36,7 @@
{{ $t('permissions') }}
</c-permissions-button>
</span>
<b-dropdown
v-if="false"
variant="link"
@@ -44,6 +48,7 @@
{{ $t('yaml') }}
</b-dropdown-item-button>
</b-dropdown>
<c-corredor-manual-buttons
ui-page="user/list"
ui-slot="toolbar"
@@ -71,6 +76,8 @@
prevPagination: $t('admin:general.pagination.prev'),
nextPagination: $t('admin:general.pagination.next'),
}"
sticky-header
class="custom-resource-height"
@search="filterList"
>
<template #header>

2
client/web/reporter/src/mixins/listHelpers.js
View File

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

169
client/web/reporter/src/views/Report/List.vue
View File

@@ -1,95 +1,96 @@
<template>
<div class="d-flex w-100 py-3">
<b-container
fluid="xl"
class="d-flex flex-column py-3"
>
<portal to="topbar-title">
{{ $t('report.list') }}
</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="reportList"
: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
class="h-100"
@search="filterList"
@row-clicked="viewReport"
>
<template #header>
<b-button
v-if="canCreate"
data-test-id="button-create-report"
variant="primary"
size="lg"
class="mr-1"
:to="{ name: 'report.create' }"
>
{{ $t('report.new') }}
</b-button>
<c-resource-list
:primary-key="primaryKey"
:filter="filter"
:sorting="sorting"
:pagination="pagination"
:fields="tableFields"
:items="reportList"
: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'),
}"
sticky-header
clickable
class="h-100"
@search="filterList"
@row-clicked="viewReport"
>
<template #header>
<div class="flex-fill">
<div class="wrap-with-vertical-gutters">
<b-button
v-if="canCreate"
data-test-id="button-create-report"
variant="primary"
size="lg"
class="mr-1"
:to="{ name: 'report.create' }"
>
{{ $t('report.new') }}
</b-button>
<c-permissions-button
v-if="canGrant"
resource="corteza::system:report/*"
:button-label="$t('permissions')"
button-variant="light"
class="btn-lg"
/>
</div>
</div>
</template>
<c-permissions-button
v-if="canGrant"
resource="corteza::system:report/*"
:button-label="$t('permissions')"
button-variant="light"
class="btn-lg"
/>
</template>
<template #name="{ item: r }">
{{ r.meta.name }}
</template>
<template #name="{ item: r }">
{{ r.meta.name }}
</template>
<template #changedAt="{ item }">
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
</template>
<template #changedAt="{ item }">
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
</template>
<template #actions="{ item: r }">
<b-button
v-if="r.canUpdateReport"
variant="light"
class="mr-2"
:to="{ name: 'report.builder', params: { reportID: r.reportID } }"
>
{{ $t('report.builder') }}
</b-button>
<b-button
v-if="r.canUpdateReport"
variant="link"
class="mr-2"
:to="{ name: 'report.edit', params: { reportID: r.reportID } }"
>
{{ $t('report.edit') }}
</b-button>
<c-permissions-button
v-if="r.canGrant"
:tooltip="$t('permissions:resources.system.report.tooltip')"
:title="r.meta.name || r.handle || r.reportID"
:target="r.meta.name || r.handle || r.reportID"
:resource="`corteza::system:report/${r.reportID}`"
class="btn px-2"
link
/>
</template>
</c-resource-list>
</b-col>
</b-row>
</b-container>
</div>
<template #actions="{ item: r }">
<b-button
v-if="r.canUpdateReport"
variant="light"
class="mr-2"
:to="{ name: 'report.builder', params: { reportID: r.reportID } }"
>
{{ $t('report.builder') }}
</b-button>
<b-button
v-if="r.canUpdateReport"
variant="link"
class="mr-2"
:to="{ name: 'report.edit', params: { reportID: r.reportID } }"
>
{{ $t('report.edit') }}
</b-button>
<c-permissions-button
v-if="r.canGrant"
:tooltip="$t('permissions:resources.system.report.tooltip')"
:title="r.meta.name || r.handle || r.reportID"
:target="r.meta.name || r.handle || r.reportID"
:resource="`corteza::system:report/${r.reportID}`"
class="btn px-2"
link
/>
</template>
</c-resource-list>
</b-container>
</template>
<script>

2
client/web/workflow/src/mixins/listHelpers.js
View File

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

289
client/web/workflow/src/views/Workflow/List.vue
View File

@@ -1,155 +1,154 @@
<template>
<div class="h-100 py-3 flex-grow-1 overflow-auto">
<b-container
fluid="xl"
class="py-3 d-flex flex-column"
>
<portal to="topbar-title">
{{ $t('general:workflow-list') }}
</portal>
<b-container fluid="xl">
<b-row no-gutters>
<c-resource-list
:primary-key="primaryKey"
:filter="filter"
:sorting="sorting"
:pagination="pagination"
:fields="tableFields"
:items="workflowList"
:translations="{
searchPlaceholder: $t('general:searchPlaceholder'),
notFound: $t('general:resourceList.notFound'),
noItems: $t('general:resourceList.noItems'),
loading: $t('general: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">
<b-button
v-if="canCreate"
data-test-id="button-create-workflow"
variant="primary"
size="lg"
class="float-left mr-1"
:to="{ name: 'workflow.create' }"
>
{{ $t('general:new-workflow') }}
</b-button>
<import
v-if="canCreate"
:disabled="importProcessing"
class="float-left mr-1"
@import="importJSON"
/>
<export
class="float-left mr-1"
/>
<c-permissions-button
v-if="canGrant"
resource="corteza::automation:workflow/*"
:button-label="$t('general:permissions')"
button-variant="light"
class="float-left btn-lg"
/>
</div>
</div>
</template>
<template #toolbar>
<b-col>
<c-resource-list
:primary-key="primaryKey"
:filter="filter"
:sorting="sorting"
:pagination="pagination"
:fields="tableFields"
:items="workflowList"
:translations="{
searchPlaceholder: $t('general:searchPlaceholder'),
notFound: $t('general:resourceList.notFound'),
noItems: $t('general:resourceList.noItems'),
loading: $t('general: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"
@search="filterList"
@row-clicked="handleRowClicked"
>
<template #header>
<b-button
v-if="canCreate"
data-test-id="button-create-workflow"
variant="primary"
size="lg"
class="float-left mr-1"
:to="{ name: 'workflow.create' }"
>
{{ $t('general:new-workflow') }}
</b-button>
<import
v-if="canCreate"
:disabled="importProcessing"
class="float-left mr-1"
@import="importJSON"
/>
<export
class="float-left mr-1"
/>
<c-permissions-button
v-if="canGrant"
resource="corteza::automation:workflow/*"
:button-label="$t('general:permissions')"
button-variant="light"
class="float-left btn-lg"
/>
</template>
<template #toolbar>
<b-col>
<b-form-radio-group
v-model="filter.subWorkflow"
:options="[
{ value: 0, text: $t('general:without') },
{ value: 1, text: $t('general:including') },
{ value: 2, text: $t('general:only') }
]"
buttons
button-variant="outline-primary"
size="sm"
name="radio-btn-outline"
@change="filterList"
/>
{{ $t('general:subworkflows') }}
</b-col>
<b-col>
<b-form-radio-group
v-model="filter.disabled"
:options="[
{ value: 0, text: $t('general:without') },
{ value: 1, text: $t('general:including') },
{ value: 2, text: $t('general:only') }
]"
buttons
button-variant="outline-primary"
size="sm"
name="radio-btn-outline"
@change="filterList"
/>
{{ $t('general:disabled') }}
</b-col>
<b-col>
<b-form-radio-group
v-model="filter.deleted"
:options="[
{ value: 0, text: $t('general:without') },
{ value: 1, text: $t('general:including') },
{ value: 2, text: $t('general:only') }
]"
buttons
button-variant="outline-primary"
size="sm"
name="radio-btn-outline"
@change="filterList"
/>
{{ $t('general:deleted') }}
</b-col>
</template>
<template #name="{ item: w }">
{{ w.meta.name || w.handle }}
<h5 class="d-inline-block ml-2">
<b-badge
v-if="w.meta.subWorkflow"
variant="info"
>
{{ $t('general:subworkflow') }}
</b-badge>
</h5>
</template>
<template #enabled="{ item: w }">
<font-awesome-icon
:icon="['fas', w.enabled ? 'check' : 'times']"
/>
</template>
<template #changedAt="{ item }">
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
</template>
<template #actions="{ item: w }">
<c-permissions-button
v-if="w.canGrant"
:tooltip="$t('permissions:resources.automation.workflow.tooltip')"
:title="w.meta.name || w.handle || w.workflowID"
:target="w.meta.name || w.handle || w.workflowID"
:resource="`corteza::automation:workflow/${w.workflowID}`"
link
class="btn px-2"
/>
</template>
</c-resource-list>
<b-form-radio-group
v-model="filter.subWorkflow"
:options="[
{ value: 0, text: $t('general:without') },
{ value: 1, text: $t('general:including') },
{ value: 2, text: $t('general:only') }
]"
buttons
button-variant="outline-primary"
size="sm"
name="radio-btn-outline"
@change="filterList"
/>
{{ $t('general:subworkflows') }}
</b-col>
</b-row>
</b-container>
</div>
<b-col>
<b-form-radio-group
v-model="filter.disabled"
:options="[
{ value: 0, text: $t('general:without') },
{ value: 1, text: $t('general:including') },
{ value: 2, text: $t('general:only') }
]"
buttons
button-variant="outline-primary"
size="sm"
name="radio-btn-outline"
@change="filterList"
/>
{{ $t('general:disabled') }}
</b-col>
<b-col>
<b-form-radio-group
v-model="filter.deleted"
:options="[
{ value: 0, text: $t('general:without') },
{ value: 1, text: $t('general:including') },
{ value: 2, text: $t('general:only') }
]"
buttons
button-variant="outline-primary"
size="sm"
name="radio-btn-outline"
@change="filterList"
/>
{{ $t('general:deleted') }}
</b-col>
</template>
<template #name="{ item: w }">
{{ w.meta.name || w.handle }}
<h5 class="d-inline-block ml-2">
<b-badge
v-if="w.meta.subWorkflow"
variant="info"
>
{{ $t('general:subworkflow') }}
</b-badge>
</h5>
</template>
<template #enabled="{ item: w }">
<font-awesome-icon
:icon="['fas', w.enabled ? 'check' : 'times']"
/>
</template>
<template #changedAt="{ item }">
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
</template>
<template #actions="{ item: w }">
<c-permissions-button
v-if="w.canGrant"
:tooltip="$t('permissions:resources.automation.workflow.tooltip')"
:title="w.meta.name || w.handle || w.workflowID"
:target="w.meta.name || w.handle || w.workflowID"
:resource="`corteza::automation:workflow/${w.workflowID}`"
link
class="btn px-2"
/>
</template>
</c-resource-list>
</b-container>
</template>
<script>