Skip to content

Commit

Permalink
feat(home): improve table actions and styles (#1384)
Browse files Browse the repository at this point in the history 
Closes #1355
Closes #1333

(cherry picked from commit b50a36a)
  • Loading branch information
@leiyre @frascuchon
leiyre authored and frascuchon committed May 10, 2022
1 parent 1ba7371 commit f09746e
Show file tree
Hide file tree
Showing 8 changed files with 227 additions and 87 deletions.
6 changes: 5 additions & 1 deletion frontend/components/commons/header/appHeader.vue
View file
Expand Up @@ -22,7 +22,11 @@
:class="['header', sticky && dataset ? 'sticky' : null]"
>
<ReTopbarBrand>
<ReBreadcrumbs :breadcrumbs="breadcrumbs" :copy-button="copyButton" />
<ReBreadcrumbs
:breadcrumbs="breadcrumbs"
:copy-button="copyButton"
@breadcrumb-action="$emit('breadcrumb-action', $event)"
/>
<user />
</ReTopbarBrand>
<slot />
Expand Down
36 changes: 25 additions & 11 deletions frontend/components/core/ReBreadcrumbs.vue
View file
Expand Up @@ -18,15 +18,20 @@
<template>
<div class="breadcrumbs">
<ul>
<li>
<li v-for="breadcrumb in filteredBreadcrumbs" :key="breadcrumb.name">
<NuxtLink
v-for="breadcrumb in filteredBreadcrumbs"
:key="breadcrumb.name"
class="breadcrumbs__item"
v-if="breadcrumb.link"
:to="breadcrumb.link"
>
{{ breadcrumb.name }}
</NuxtLink>
<span
class="breadcrumbs__item --action"
v-else
@click="$emit('breadcrumb-action', breadcrumb.action)"
>{{ breadcrumb.name }}</span
>
</li>
</ul>
<re-action-tooltip tooltip="Copied">
Expand Down Expand Up @@ -84,27 +89,36 @@ export default {
display: flex;
align-items: center;
ul {
display: inline-block;
display: flex;
padding-left: 0;
font-weight: normal;
list-style: none;
}
li {
margin: auto 0.5em auto auto;
&:not(:last-child):after {
content: "/";
margin-left: 0.5em;
}
&:last-child {
font-weight: 600;
a {
cursor: default;
pointer-events: none;
}
}
}
&__copy {
.svg-icon {
fill: $lighter-color;
}
}
&__item {
margin: auto 0.5em auto auto;
color: $lighter-color;
text-decoration: none;
outline: none;
&:not(:last-child):after {
content: "/";
margin-left: 0.5em;
}
&:last-child {
font-weight: 600;
&.--action {
cursor: pointer;
}
}
}
Expand Down
9 changes: 7 additions & 2 deletions frontend/components/core/ReCheckbox.vue
View file
Expand Up @@ -40,6 +40,7 @@

<script>
import "assets/icons/check2";
import _ from "lodash";
export default {
model: {
prop: "areChecked",
Expand All @@ -55,7 +56,8 @@ export default {
classes() {
return {
checked: Array.isArray(this.areChecked)
? this.areChecked.includes(this.value)
? this.areChecked.includes(this.value) ||
_.find(this.areChecked, this.value)
: this.checked,
disabled: this.disabled,
};
Expand All @@ -76,7 +78,10 @@ export default {
if (!this.disabled) {
if (Array.isArray(this.areChecked)) {
const checked = this.areChecked.slice();
const found = checked.indexOf(this.value);
const found =
typeof this.value === "string"
? checked.indexOf(this.value)
: _.findIndex(checked, this.value);
if (found !== -1) {
checked.splice(found, 1);
} else {
Expand Down
50 changes: 25 additions & 25 deletions frontend/components/core/table/ReTableInfo.vue
View file
Expand Up @@ -39,7 +39,7 @@
:class="[sortOrder, { active: sortedBy === column.field }]"
@click="sort(column)"
>
{{ column.name }}
<span>{{ column.name }}</span>
<svgicon color="#4C4EA3" width="15" height="15" name="sort" />
</button>
</div>
Expand All @@ -65,7 +65,13 @@
:key="String(item.id)"
>
<div class="table-info__item">
<!-- <ReCheckbox v-if="globalActions" v-model="item.selectedRecord" class="list__item__checkbox" :value="item.name" @change="onCheckboxChanged($event, item.id, key)" /> -->
<re-checkbox
v-if="globalActions"
v-model="item.selectedRecord"
class="list__item__checkbox"
:value="item.name"
@change="onCheckboxChanged($event, item.id)"
/>
<span
v-for="(column, idx) in columns"
:key="idx"
Expand Down Expand Up @@ -192,26 +198,6 @@
</div>
</li>
</ul>
<!-- <ReModal :modal-custom="true" :prevent-body-scroll="true" modal-class="modal-primary" :modal-visible="visibleModalId === 'all'" modal-position="modal-center" @close-modal="$emit('close-modal')">
<div>
<p class="modal__title">Delete confirmation</p>
<span>
You are about to delete: <br />
<span v-for="item in selectedItems" :key="item.id">
<strong>{{ item.actionName }}</strong><br /></span>
</span>
<p>This process cannot be undone</p>
<br />
<div class="modal-buttons">
<ReButton class="button-tertiary--small button-tertiary--outline" @click="$emit('close-modal')">
Cancel
</ReButton>
<ReButton class="button-primary--small" @click="$emit('delete-multiple')">
Yes, delete
</ReButton>
</div>
</div>
</ReModal> -->
</div>
</template>
<ResultsEmpty v-else :title="emptySearchInfo.title" />
Expand Down Expand Up @@ -328,7 +314,13 @@ export default {
const matchFilters = (item) => {
if (Object.values(this.filters).length) {
return Object.keys(this.filters).every((key) => {
return this.filters[key].toString().includes(item[key]);
if (this.isObject(item[key])) {
return this.filters[key].find(
(filter) => filter.value === item[key][filter.key]
);
} else {
return this.filters[key].toString().includes(item[key]);
}
});
}
return true;
Expand Down Expand Up @@ -359,6 +351,9 @@ export default {
this.sortedBy = this.sortedByField;
},
methods: {
isObject(obj) {
return Object.prototype.toString.call(obj) === "[object Object]";
},
itemValue(item, column) {
if (column.subfield) {
return item[column.field][column.subfield];
Expand Down Expand Up @@ -482,8 +477,12 @@ export default {
color: $font-secondary;
@include font-size(14px);
font-family: $sff;
text-align: left;
span {
white-space: nowrap;
}
.svg-icon {
margin-left: 0.5em;
margin-left: 5px;
}
}
}
Expand All @@ -504,7 +503,7 @@ export default {
outline: none;
&__col {
text-align: left;
margin-right: 1.5em;
margin-right: 1em;
flex: 1 1 0px;
&:nth-last-of-type(-n + 1) {
max-width: 120px;
Expand Down Expand Up @@ -602,6 +601,7 @@ export default {
margin-top: 0;
margin-bottom: 0;
display: block;
word-break: break-all;
}
}
.text {
Expand Down
68 changes: 57 additions & 11 deletions frontend/components/core/table/TableFiltrableColumn.vue
View file
Expand Up @@ -19,15 +19,16 @@
<ul>
<li
v-for="option in filterOptions(this.options, searchText)"
:key="option"
:key="option.index"
>
<ReCheckbox
:id="option"
v-model="selectedOptions"
class="re-checkbox--dark"
:value="option"
>
{{ option }} ({{ datasetsCounter(option) | formatNumber }})
{{ isObject(option) ? `${option.key}: ${option.value}` : option }}
({{ tableItemsCounter(option) | formatNumber }})
</ReCheckbox>
</li>
<li
Expand Down Expand Up @@ -74,15 +75,42 @@ export default {
computed: {
options() {
const rawOptions = this.data.map((item) => item[this.column.field]);
return [...new Set(rawOptions)];
if (rawOptions.every((option) => this.isObject(option))) {
const removedEmptyOptions = rawOptions
.filter((opt) => Object.values(opt).length)
.flatMap((opt) => opt);
const optionsArray = Object.values(removedEmptyOptions).flatMap(
(options) =>
Object.keys(options).map((key) => {
return { key: key, value: options[key] };
})
);
const keys = ["key", "value"];
return optionsArray.filter(
(
(s) => (o) =>
((k) => !s.has(k) && s.add(k))(keys.map((k) => o[k]).join("|"))
)(new Set())
);
} else {
return [...new Set(rawOptions)];
}
},
},
watch: {
selectedOptions() {
this.$emit("applyFilters", this.column, this.selectedOptions);
},
filters(val) {
if (!Object.keys(val).length) {
this.selectedOptions = [];
}
},
},
methods: {
isObject(obj) {
return Object.prototype.toString.call(obj) === "[object Object]";
},
openFilter() {
this.visibleFilter = true;
},
Expand All @@ -94,22 +122,37 @@ export default {
return options;
}
let filtered = options.filter((id) =>
id.toLowerCase().match(text.toLowerCase())
JSON.stringify(id).toLowerCase().match(text.toLowerCase())
);
return filtered;
},
datasetsCounter(option) {
tableItemsCounter(option) {
const keys = Object.keys(this.filters).filter(
(k) => k !== this.column.field
);
const filteredData = this.data.filter((dataset) => {
const filteredData = this.data.filter((tableItem) => {
return keys.every((key) => {
return this.filters[key].includes(dataset[key]);
if (this.filters[key].every((f) => this.isObject(f))) {
return this.filters[key].find(
(f) => f.value === tableItem[key][f.key]
);
} else {
return this.filters[key].includes(tableItem[key]);
}
});
});
return filteredData.filter(
(dataset) => dataset[this.column.field] === option
).length;
if (
filteredData.every((data) => this.isObject(data[this.column.field]))
) {
return filteredData.filter(
(tableItem) =>
tableItem[this.column.field][option.key] === option.value
).length;
} else {
return filteredData.filter(
(tableItem) => tableItem[this.column.field] === option
).length;
}
},
},
};
Expand Down Expand Up @@ -143,6 +186,9 @@ export default {
width: 100% !important;
cursor: default;
}
::v-deep .checkbox-label {
line-height: 13px;
}
}
.highlight-text {
display: inline-block;
Expand Down Expand Up @@ -201,7 +247,7 @@ button {
}
}
.svg-icon {
margin-left: 0.5em;
margin-left: 5px;
margin-right: 1em;
}
}
Expand Down

0 comments on commit f09746e

Please sign in to comment.