DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Adjust compose resource list UX

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/web/compose/src/components/Admin/Page/Tree.vue
View File

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

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

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

20
client/web/compose/src/views/Admin/Charts/List.vue
View File

@ -1,12 +1,12 @@
<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"
@ -25,6 +25,8 @@
nextPagination: $t('general:resourceList.pagination.next'),
}"
clickable
sticky-header
class="h-100"
@search="filterList"
@row-clicked="handleRowClicked"
>
@ -83,24 +85,24 @@
</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}`"
link
class="btn px-2"
: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>
<script>
import { mapGetters, mapActions } from 'vuex'

32
client/web/compose/src/views/Admin/Modules/List.vue
View File

@ -1,12 +1,12 @@
"<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"
@ -26,6 +26,8 @@
nextPagination: $t('general:resourceList.pagination.next'),
}"
clickable
sticky-header
class="h-100"
@search="filterList"
@row-clicked="handleRowClicked"
>
@ -108,23 +110,32 @@
:namespace="namespace"
:module="m"
/>
<b-button-group
class="ml-2"
>
<b-button
data-test-id="button-all-records"
variant="link"
variant="outline-light"
:title="$t('allRecords.label')"
:to="{name: 'admin.modules.record.list', params: { moduleID: m.moduleID }}"
class="text-dark text-decoration-none"
class="text-primary d-print-none border-0"
>
{{ $t('allRecords.label') }}
<font-awesome-icon
:icon="['fas', 'columns']"
/>
</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
button-variant="outline-light"
class="text-dark d-print-none border-0"
/>
</b-button-group>
</template>
<template #name="{ item: m }">
@ -150,10 +161,7 @@
{{ (item.deletedAt || item.updatedAt || item.createdAt) | locFullDateTime }}
</template>
</c-resource-list>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'

38
client/web/compose/src/views/Admin/Pages/List.vue
View File

@ -1,19 +1,19 @@
<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"
class="shadow-sm h-100"
>
<b-card-header
header-bg-variant="white"
class="py-3"
class="border-bottom"
>
<b-row
no-gutters
@ -56,23 +56,18 @@
/>
</div>
</b-row>
</b-card-header>
<b-row
class="pages-list-header border-top align-content-center"
no-gutters
class="align-content-center mt-2"
>
<b-col
cols="12"
class="pl-4"
>
<span class="font-weight-bold">
{{ $t('newPlaceholder') }}
</span>
<span class="text-muted font-italic ml-3">
<span class="text-muted font-italic">
{{ $t('instructions') }}
</span>
</b-col>
</b-row>
</b-card-header>
<div
v-if="processing"
@ -90,14 +85,11 @@
v-else
v-model="tree"
:namespace="namespace"
class="pb-2"
class="card overflow-auto"
@reorder="handleReorder"
/>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</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;

37
client/web/compose/src/views/Namespace/Manage.vue
View File

@ -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,15 +23,8 @@
</b-btn>
</portal>
<b-container
class="ns-wrapper"
fluid="xl"
>
<b-row
class="my-3"
no-gutters
>
<c-resource-list
data-test-id="table-namespaces-list"
:primary-key="primaryKey"
:filter="filter"
:sorting="sorting"
@ -48,7 +42,8 @@
nextPagination: $t('general:resourceList.pagination.next'),
}"
clickable
class="h-100 w-100"
sticky-header
class="h-100"
@search="filterList"
@row-clicked="handleRowClicked"
>
@ -93,10 +88,22 @@
<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-row>
</b-container>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
@ -121,10 +128,6 @@ export default {
return {
primaryKey: 'namespaceID',
pagination: {
limit: 13,
},
filter: {
query: '',
},

23
lib/vue/src/components/resourceList/CResourceList.vue
View File

@ -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: {

1
locale/en/corteza-webapp-compose/permissions.yaml
View File

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