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
Prev Previous commit
Next Next commit
Add component for table with frozen columns
matthew-white committed May 25, 2023
commit 8c21c1255e9c3e498fd6256fad8afeceffcd1c2f
20 changes: 0 additions & 20 deletions src/assets/scss/app.scss
Original file line number Diff line number Diff line change
@@ -574,26 +574,6 @@ select {
}
}

.table-frozen {
float: left;
width: auto;
}

.table-container {
// Placing the margin here rather than on the table so that the horizontal
// scrollbar appears immediately below the table, above the margin.
margin-bottom: $margin-bottom-table;
overflow-x: auto;

.table {
margin-bottom: 0;
}
}

.table-actions {
margin-bottom: 20px;
}

.empty-table-message {
color: #555;
font-size: 15px;
102 changes: 38 additions & 64 deletions src/components/entity/table.vue
Original file line number Diff line number Diff line change
@@ -10,85 +10,59 @@ including this file, may be copied, modified, propagated, or distributed
except according to the terms contained in the LICENSE file.
-->
<template>
<div>
<table id="entity-table-metadata" class="table table-frozen">
<thead>
<tr>
<th><!-- Row number --></th>
<th>{{ $t('header.createdBy') }}</th>
<th>{{ $t('header.createdAt') }}</th>
</tr>
</thead>
<tbody>
<template v-if="odataEntities.dataExists">
<entity-metadata-row v-for="(entity, index) in odataEntities.value"
:key="entity.__id" :entity="entity"
:row-number="odataEntities.value.length - index"/>
</template>
</tbody>
</table>
<div class="table-container">
<table id="entity-table-data" class="table">
<thead>
<tr v-if="properties != null">
<th v-for="property of properties" :key="property.id">
<span v-tooltip.text>{{ property.name }}</span>
</th>
<th>{{ $t('entity.label') }}</th>
<th>{{ $t('entity.entityId') }}</th>
</tr>
</thead>
<tbody>
<template v-if="odataEntities.dataExists && properties != null">
<entity-data-row v-for="(entity) in odataEntities.value"
:key="entity.__id" :entity="entity"
:properties="properties"/>
</template>
</tbody>
</table>
</div>
</div>
<table-freeze :data="odataEntities.value" key-prop="__id"
:frozen-only="properties == null"
ids="entity-table-metadata entity-table-data" divider>
<template #head-frozen>
<th><!-- Row number --></th>
<th>{{ $t('header.createdBy') }}</th>
<th>{{ $t('header.createdAt') }}</th>
</template>
<template #head-scrolling>
<template v-if="properties != null">
<th v-for="property of properties" :key="property.id">
matthew-white marked this conversation as resolved.
Show resolved Hide resolved
<span v-tooltip.text>{{ property.name }}</span>
</th>
</template>
<th>{{ $t('entity.label') }}</th>
<th>{{ $t('entity.entityId') }}</th>
</template>

<template #data-frozen="{ data, index }">
<entity-metadata-row :entity="data"
:row-number="odataEntities.value.length - index"/>
</template>
<template #data-scrolling="{ data }">
<entity-data-row :entity="data" :properties="properties"/>
</template>
</table-freeze>
</template>

<script>
export default {
name: 'EntityTable'
};
</script>
<script setup>
import EntityDataRow from './data-row.vue';
import EntityMetadataRow from './metadata-row.vue';
import TableFreeze from '../table-freeze.vue';

import { useRequestData } from '../../request-data';

defineProps({
properties: Array
});

export default {
name: 'EntityTable',
components: { EntityDataRow, EntityMetadataRow },
props: {
properties: Array
},
setup() {
// The component does not assume that this data will exist when the
// component is created.
const { odataEntities } = useRequestData();
return { odataEntities };
}
};
// The component does not assume that this data will exist when the component is
// created.
const { odataEntities } = useRequestData();
</script>

<style lang="scss">
@import '../../assets/scss/mixins';

#entity-table-metadata {
box-shadow: 3px 0 0 rgba(0, 0, 0, 0.04);
position: relative;
// Adding z-index so that the background color of the other table's thead does
// not overlay the box shadow.
z-index: 1;

th:last-child { border-right: $border-bottom-table-heading; }
td:last-child { border-right: $border-top-table-data; }
}

#entity-table-data {
width: auto;

th, td {
@include text-overflow-ellipsis;
max-width: 250px;
90 changes: 43 additions & 47 deletions src/components/project/form-access/table.vue
Original file line number Diff line number Diff line change
@@ -10,56 +10,49 @@ including this file, may be copied, modified, propagated, or distributed
except according to the terms contained in the LICENSE file.
-->
<template>
<div id="project-form-access-table" class="clearfix">
<table class="table table-frozen"
:class="{ 'no-field-keys': fieldKeys.withToken.length === 0 }">
<thead>
<tr>
<th>{{ $t('header.form') }}</th>
<th>
<span>{{ $t('header.state') }}</span>
<button type="button" class="btn btn-link"
@click="$emit('show-states')">
<span class="icon-question-circle"></span>
</button>
</th>
</tr>
</thead>
<tbody v-if="forms.length !== 0">
<project-form-access-row v-for="form of forms" :key="form.xmlFormId"
:form="form" :changes="changesByForm[form.xmlFormId]" frozen
@update:state="updateState"/>
</tbody>
</table>
<div v-if="fieldKeys.withToken.length !== 0" class="table-container">
<table class="table">
<thead>
<tr>
<th><div>{{ $t('resource.appUsers') }}</div></th>
<th v-for="fieldKey of fieldKeys.withToken" :key="fieldKey.id">
<div><span v-tooltip.text>{{ fieldKey.displayName }}</span></div>
</th>
<th></th>
</tr>
</thead>
<tbody v-if="forms.length !== 0">
<project-form-access-row v-for="form of forms" :key="form.xmlFormId"
:form="form" :changes="changesByForm[form.xmlFormId]"
@update:field-key-access="updateFieldKeyAccess"/>
</tbody>
</table>
</div>
</div>
<table-freeze id="project-form-access-table"
:class="{ 'no-field-keys': noFieldKeys }" :data="forms.data"
key-prop="xmlFormId" :frozen-only="noFieldKeys">
<template #head-frozen>
<th>{{ $t('header.form') }}</th>
<th>
<span>{{ $t('header.state') }}</span>
<button type="button" class="btn btn-link"
@click="$emit('show-states')">
<span class="icon-question-circle"></span>
</button>
</th>
</template>
<template #head-scrolling>
<th><div>{{ $t('resource.appUsers') }}</div></th>
<th v-for="fieldKey of fieldKeys.withToken" :key="fieldKey.id">
<div><span v-tooltip.text>{{ fieldKey.displayName }}</span></div>
</th>
<th></th>
</template>

<template #data-frozen="{ data: form }">
<project-form-access-row :form="form"
:changes="changesByForm[form.xmlFormId]" frozen
@update:state="updateState"/>
</template>
<template #data-scrolling="{ data: form }">
<project-form-access-row :form="form"
:changes="changesByForm[form.xmlFormId]"
@update:field-key-access="updateFieldKeyAccess"/>
</template>
</table-freeze>
</template>

<script>
import ProjectFormAccessRow from './row.vue';
import TableFreeze from '../../table-freeze.vue';

import { useRequestData } from '../../../request-data';

export default {
name: 'ProjectFormAccessTable',
components: { ProjectFormAccessRow },
components: { ProjectFormAccessRow, TableFreeze },
props: {
changesByForm: {
type: Object,
@@ -71,6 +64,11 @@ export default {
const { forms, fieldKeys } = useRequestData();
return { forms, fieldKeys };
},
computed: {
noFieldKeys() {
return this.fieldKeys.dataExists && this.fieldKeys.withToken.length === 0;
}
},
methods: {
updateState(form, state) {
this.$emit('update:state', form, state);
@@ -87,14 +85,14 @@ export default {

#project-form-access-table {
// Space above the tables
.table-frozen {
.table-freeze-frozen {
margin-top: 70px;

&.no-field-keys {
margin-top: 0;
}
}
.table-container {
.table-freeze-scrolling-container {
// Using padding rather than margin so that the rotated column header text
// does not overflow the container, which would cause the text to be hidden.
padding-top: 70px;
@@ -111,7 +109,7 @@ export default {
}
}

.table-frozen {
.table-freeze-frozen {
$form-name-width: 250px;
$state-width: 200px;

@@ -133,9 +131,7 @@ export default {
}
}

.table-container .table {
width: auto;

.table-freeze-scrolling {
thead {
background-color: transparent;
}
Loading