Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "Last Updated / Actions" column to EntityTable #811

Merged
merged 11 commits into from
May 29, 2023
Merged
Next Next commit
Add useRowChanged() composable to highlight row that has changed
matthew-white committed May 25, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 54ed37e0f7c7dea76ca82f4b691f93be716d3890
12 changes: 12 additions & 0 deletions src/assets/scss/app.scss
Original file line number Diff line number Diff line change
@@ -825,3 +825,15 @@ becomes more complicated.
}
}
}



////////////////////////////////////////////////////////////////////////////////
// useRowChanged()

[data-use-row-changed="false"] { transition: background-color 0.6s 6s; }

[data-use-row-changed="true"] {
background-color: #faf1cd;
transition: none;
}
16 changes: 8 additions & 8 deletions src/components/submission/metadata-row.vue
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ including this file, may be copied, modified, propagated, or distributed
except according to the terms contained in the LICENSE file.
-->
<template>
<tr class="submission-metadata-row">
<tr ref="el" class="submission-metadata-row">
<!-- ^^^ SubmissionTable assumes that this element does not have a class
binding. -->

@@ -56,11 +56,14 @@ except according to the terms contained in the LICENSE file.
</template>

<script>
import { ref } from 'vue';

import DateTime from '../date-time.vue';

import useReviewState from '../../composables/review-state';
import useRoutes from '../../composables/routes';
import { apiPaths } from '../../util/request';
import { useRowChanged } from '../../composables/row-changed';

export default {
name: 'SubmissionMetadataRow',
@@ -88,6 +91,10 @@ export default {
setup() {
const { reviewStateIcon } = useReviewState();
const { submissionPath } = useRoutes();

const el = ref(null);
useRowChanged(el);

return { reviewStateIcon, submissionPath };
},
computed: {
@@ -126,13 +133,6 @@ export default {
@import '../../assets/scss/mixins';

.submission-metadata-row {
transition: background-color 0.6s 6s;

&.updated {
background-color: #faf1cd;
transition: none;
}

.row-number {
color: #999;
font-size: 11px;
18 changes: 18 additions & 0 deletions src/composables/row-changed.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { watchSync } from '../util/reactivity';

export const useRowChanged = (tr) => {
watchSync(tr, () => {
if (tr.value != null)
// eslint-disable-next-line no-param-reassign
tr.value.dataset.useRowChanged = 'false';
});
};

export const rowsChanged = (trs) => {
for (const tr of trs) tr.dataset.useRowChanged = 'true';
setTimeout(() => {
matthew-white marked this conversation as resolved.
Show resolved Hide resolved
for (const tr of trs) tr.dataset.useRowChanged = 'false';
});
};

export const rowChanged = (tr) => { rowsChanged([tr]); };
33 changes: 33 additions & 0 deletions test/composables/row-changed.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { rowChanged, rowsChanged } from '../../src/composables/row-changed';

import RowChanged from '../util/components/row-changed.vue';

import { mount } from '../util/lifecycle';
import { wait } from '../util/util';

describe('useRowChanged()', () => {
it('toggles data-use-row-changed for a single row', async () => {
const table = mount(RowChanged, {
props: { rowCount: 1 }
});
const row = table.get('tr').element;
row.dataset.useRowChanged.should.equal('false');
rowChanged(row);
row.dataset.useRowChanged.should.equal('true');
await wait();
row.dataset.useRowChanged.should.equal('false');
});

it('toggles data-use-row-changed for multiple rows', async () => {
const table = mount(RowChanged, {
props: { rowCount: 2 }
});
const rows = table.findAll('tr').map(wrapper => wrapper.element);
rowsChanged(rows);
rows[0].dataset.useRowChanged.should.equal('true');
rows[1].dataset.useRowChanged.should.equal('true');
await wait();
rows[0].dataset.useRowChanged.should.equal('false');
rows[1].dataset.useRowChanged.should.equal('false');
});
});
26 changes: 26 additions & 0 deletions test/util/components/row-changed.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<table>
<tbody>
<tr v-for="(_, index) of new Array(rowCount)" :key="index" ref="rows">
<td>foo</td>
</tr>
</tbody>
</table>
</template>

<script setup>
import { computed, ref } from 'vue';

import { useRowChanged } from '../../../src/composables/row-changed';

const props = defineProps({
rowCount: {
type: Number,
required: true
}
});

const rows = ref([]);
for (let i = 0; i < props.rowCount; i += 1)
useRowChanged(computed(() => rows.value[i]));
</script>