From 0997f00196ad1708a2ec68c0d9a74f5bc1f0ce68 Mon Sep 17 00:00:00 2001
From: simon <31130607+forgive38@users.noreply.github.com>
Date: Fri, 3 Mar 2023 11:18:11 +0100
Subject: [PATCH] pkp/pkp-lib#7495 show list of submissions as a table

---
 src/components/Container/Container.vue        |    2 +
 .../Panel/SubmissionsTablePanel.vue           |  493 +++++++
 src/components/Panel/TablePanel.vue           |  326 +++++
 src/components/Table/SubmissionTableCell.vue  | 1262 +++++++++++++++++
 src/mixins/fetch.js                           |    4 +-
 5 files changed, 2085 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Panel/SubmissionsTablePanel.vue
 create mode 100644 src/components/Panel/TablePanel.vue
 create mode 100644 src/components/Table/SubmissionTableCell.vue

diff --git a/src/components/Container/Container.vue b/src/components/Container/Container.vue
index 6ff7ded3a..c7e5663c4 100644
--- a/src/components/Container/Container.vue
+++ b/src/components/Container/Container.vue
@@ -3,6 +3,7 @@ import ListPanel from '@/components/ListPanel/ListPanel.vue';
 import PkpForm from '@/components/Form/Form.vue';
 import SelectReviewerListPanel from '@/components/ListPanel/users/SelectReviewerListPanel.vue';
 import SubmissionsListPanel from '@/components/ListPanel/submissions/SubmissionsListPanel.vue';
+import SubmissionsTablePanel from '@/components/Panel/SubmissionsTablePanel.vue';
 
 export default {
 	name: 'Container',
@@ -11,6 +12,7 @@ export default {
 		PkpForm,
 		SelectReviewerListPanel,
 		SubmissionsListPanel,
+		SubmissionsTablePanel,
 	},
 	data() {
 		return {
diff --git a/src/components/Panel/SubmissionsTablePanel.vue b/src/components/Panel/SubmissionsTablePanel.vue
new file mode 100644
index 000000000..6cf94f8a2
--- /dev/null
+++ b/src/components/Panel/SubmissionsTablePanel.vue
@@ -0,0 +1,493 @@
+<template>
+	<div class="submissionsListPanel">
+		<table-panel
+			:isSidebarVisible="isSidebarVisible"
+			:items="items"
+			class="listPanel--submissions"
+		>
+			<pkp-header slot="header">
+				<h2>{{ title }}</h2>
+				<spinner v-if="isLoading" />
+				<template slot="actions">
+					<search
+						:searchPhrase="searchPhrase"
+						@search-phrase-changed="setSearchPhrase"
+					/>
+					<pkp-button
+						:isActive="isSidebarVisible"
+						@click="isSidebarVisible = !isSidebarVisible"
+					>
+						<icon icon="filter" :inline="true" />
+						{{ __('common.filter') }}
+					</pkp-button>
+					<pkp-button
+						v-if="addUrl && currentUserCanAddSubmission"
+						element="a"
+						:href="addUrl"
+					>
+						{{ __('submission.submit.newSubmissionSingle') }}
+					</pkp-button>
+				</template>
+			</pkp-header>
+
+			<template slot="sidebar">
+				<pkp-header :isOneLine="false">
+					<h3>
+						<icon icon="filter" :inline="true" />
+						{{ __('common.filter') }}
+					</h3>
+				</pkp-header>
+				<div
+					v-for="(filterSet, index) in filters"
+					:key="index"
+					class="listPanel__block"
+				>
+					<pkp-header v-if="filterSet.heading">
+						<h4>{{ filterSet.heading }}</h4>
+					</pkp-header>
+					<component
+						v-for="filter in filterSet.filters"
+						:key="filter.param + filter.value"
+						:is="filter.filterType || 'pkp-filter'"
+						v-bind="filter"
+						:isFilterActive="isFilterActive(filter.param, filter.value)"
+						@add-filter="addFilter"
+						@remove-filter="removeFilter"
+						@update-filter="addFilter"
+					/>
+				</div>
+			</template>
+
+			<template slot="itemsEmpty">
+				<template v-if="isLoading">
+					<spinner />
+					{{ __('common.loading') }}
+				</template>
+				<template v-else>
+					{{ __('submission.list.empty') }}
+				</template>
+			</template>
+			<template slot="myTable">
+				<pkp-table
+					labelled-by="publicationDetailTableLabel"
+					:columns="tableColumns"
+					:rows="items"
+					:order-by="orderBy"
+					:order-direction="orderDirection"
+					@order-by="setOrderBy"
+				>
+					<template slot-scope="{row, rowIndex}">
+						<submission-table-cell
+							v-for="(column, columnIndex) in tableColumns"
+							:key="column.name"
+							:column="column"
+							:row="row"
+							:item="row"
+							:tabindex="!rowIndex && !columnIndex ? 0 : -1"
+							:apiUrl="apiUrl"
+							:infoUrl="infoUrl"
+							:assignParticipantUrl="assignParticipantUrl"
+							:getParticipantsApiUrl="getParticipantsApiUrl"
+							:openSubmissionsInANewTab="openSubmissionsInANewTab"
+							@addFilter="addFilter"
+						></submission-table-cell>
+					</template>
+				</pkp-table>
+			</template>
+
+			<pagination
+				v-if="lastPage > 1"
+				slot="footer"
+				:currentPage="currentPage"
+				:isLoading="isLoading"
+				:lastPage="lastPage"
+				@set-page="setPage"
+			/>
+		</table-panel>
+	</div>
+</template>
+
+<script>
+import TablePanel from '@/components/Panel/TablePanel.vue';
+import Pagination from '@/components/Pagination/Pagination.vue';
+import PkpFilter from '@/components/Filter/Filter.vue';
+import PkpFilterSlider from '@/components/Filter/FilterSlider.vue';
+import PkpFilterAutosuggest from '@/components/Filter/FilterAutosuggest.vue';
+import PkpHeader from '@/components/Header/Header.vue';
+import Search from '@/components/Search/Search.vue';
+import fetch from '@/mixins/fetch';
+import PkpTable from '@/components/Table/Table.vue';
+import SubmissionTableCell from '@/components/Table/SubmissionTableCell.vue';
+
+export default {
+	name: 'SubmissionsTablePanel',
+	mixins: [fetch],
+	components: {
+		TablePanel,
+		Pagination,
+		PkpFilter,
+		PkpFilterSlider,
+		PkpFilterAutosuggest,
+		PkpHeader,
+		Search,
+		PkpTable,
+		SubmissionTableCell
+	},
+	props: {
+		addUrl: {
+			type: String,
+			required: true
+		},
+		assignParticipantUrl: {
+			type: String,
+			default() {
+				return '';
+			}
+		},
+		filters: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		id: {
+			type: String,
+			required: true
+		},
+		infoUrl: {
+			type: String,
+			required: true
+		},
+		getParticipantsApiUrl: {
+			type: String,
+			required: true
+		},
+		items: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		itemsMax: {
+			type: Number,
+			defaut() {
+				return 0;
+			}
+		},
+		title: {
+			type: String,
+			required: true
+		},
+		allowSubmissions: {
+			type: Boolean,
+			default() {
+				return true;
+			}
+		},
+		tableColumns: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		orderBy: {
+			type: String,
+			default() {
+				return '';
+			}
+		},
+		orderDirection: {
+			type: Boolean,
+			default() {
+				return false;
+			}
+		},
+		openSubmissionsInANewTab: {
+			type: Boolean,
+			required: true
+		},
+		offset: {
+			type: Number,
+			default() {
+				return 0;
+			}
+		}
+	},
+	data() {
+		return {
+			isSidebarVisible: false
+		};
+	},
+	computed: {
+		/**
+		 * Can the current user filter the list?
+		 */
+		currentUserCanFilter() {
+			return this.userHasRole([
+				pkp.const.ROLE_ID_MANAGER,
+				pkp.const.ROLE_ID_SUB_EDITOR,
+				pkp.const.ROLE_ID_ASSISTANT
+			]);
+		},
+
+		/**
+		 * Does the current user have a role which can create a new submission?
+		 */
+		currentUserCanAddSubmission() {
+			return (
+				this.allowSubmissions &&
+				this.userHasRole([
+					pkp.const.ROLE_ID_MANAGER,
+					pkp.const.ROLE_ID_SUB_EDITOR,
+					pkp.const.ROLE_ID_ASSISTANT,
+					pkp.const.ROLE_ID_AUTHOR,
+					pkp.const.ROLE_ID_REVIEWER
+				])
+			);
+		}
+	},
+	methods: {
+		/**
+		 * The params to send with each GET request
+		 *
+		 * @param string
+		 * @return Object
+		 */
+		getParams2() {
+			let params = {
+				...this.activeFilters
+			};
+
+			if (this.searchPhrase) {
+				params.searchPhrase = this.searchPhrase;
+			}
+
+			if (this.orderBy) {
+				params.orderBy = this.orderBy;
+				params.orderDirection = this.orderDirection ? 'DESC' : 'ASC';
+			}
+			return params;
+		},
+		/**
+		 * Get the list of items from the server based on the current params
+		 */
+		getItems() {
+			let self = this;
+
+			this.isLoadingItems = true;
+			this.latestItemsGetRequest = $.pkp.classes.Helper.uuid();
+
+			$.ajax({
+				url: this.apiUrl,
+				type: 'GET',
+				data: this.getParams2(),
+				_uuid: this.latestItemsGetRequest,
+				error(r) {
+					if (self.latestItemsGetRequest !== this._uuid) {
+						return;
+					}
+					self.ajaxErrorCallback(r);
+				},
+				success(r) {
+					if (self.latestItemsGetRequest !== this._uuid) {
+						return;
+					}
+					self.setItems(r.items, r.itemsMax);
+				},
+				complete(r) {
+					if (self.latestItemsGetRequest !== this._uuid) {
+						return;
+					}
+					self.isLoadingItems = false;
+				}
+			});
+		},
+
+		/**
+		 * Add a filter
+		 *
+		 * @param {String} param
+		 * @param {mixed} value
+		 */
+		addFilter(param, value) {
+			// Don't allow other filters to be active when the
+			// isIncomplete filter is active
+			if (param === 'isIncomplete') {
+				this.activeFilters = {isIncomplete: value};
+				this.get();
+			} else {
+				let newFilters = {...this.activeFilters};
+				if (newFilters.hasOwnProperty('isIncomplete')) {
+					delete newFilters.isIncomplete;
+				}
+				if (
+					[
+						'isOverdue',
+						'daysInactive',
+						'assignedTo',
+						'issueIds',
+						'sectionIds',
+						'categoryIds',
+						'assignedTo'
+					].includes(param)
+				) {
+					newFilters[param] = value;
+				} else {
+					if (!newFilters[param]) {
+						newFilters[param] = [];
+					}
+					newFilters[param].push(value);
+				}
+				this.activeFilters = newFilters;
+			}
+		},
+
+		/**
+		 * Is a filter currently active?
+		 *
+		 * @param {string} param The filter param
+		 * @param {mixed} value The filter value
+		 * @return {Boolean}
+		 */
+		isFilterActive(param, value) {
+			if (!Object.keys(this.activeFilters).includes(param)) {
+				return false;
+			} else if (Array.isArray(this.activeFilters[param])) {
+				return this.activeFilters[param].includes(value);
+			} else if (['isOverdue', 'daysInactive'].includes(param)) {
+				return true;
+			} else {
+				return this.activeFilters[param] === value;
+			}
+		},
+
+		/**
+		 * Remove a filter
+		 *
+		 * @param {String} param
+		 * @param {mixed} value
+		 */
+		removeFilter(param, value) {
+			let newFilters = {...this.activeFilters};
+			if (
+				[
+					'isIncomplete',
+					'isOverdue',
+					'daysInactive',
+					'issueIds',
+					'sectionIds',
+					'categoryIds',
+					'assignedTo'
+				].includes(param)
+			) {
+				delete newFilters[param];
+			} else {
+				newFilters[param] = newFilters[param].filter(v => v !== value);
+			}
+			this.activeFilters = newFilters;
+		},
+
+		/**
+		 * Update the list of items
+		 *
+		 * @param array items
+		 * @param int itemsMax
+		 */
+		setItems(items, itemsMax) {
+			this.$emit('set', this.id, {
+				items,
+				itemsMax
+			});
+		},
+
+		/**
+		 * Helper function to determine if the current user has a role
+		 *
+		 * @param int|array roles The role ID to look for (pkp.const.ROLE_ID...)
+		 * @return bool
+		 */
+		userHasRole(roles) {
+			if (!Array.isArray(roles)) {
+				roles = [roles];
+			}
+
+			var hasRole = false;
+			roles.forEach(role => {
+				if (pkp.currentUser.roles.indexOf(role) > -1) {
+					hasRole = true;
+				}
+			});
+
+			return hasRole;
+		},
+		/**
+		 * Set the orderBy and orderDirection values
+		 *
+		 * @param string orderBy What param to order by
+		 * @param boolean orderDirection true = DESC, false = ASC
+		 */
+		setOrderBy(orderBy, orderDirection) {
+		this.$emit('set', this.id, {
+				orderBy,
+				orderDirection
+			});
+		}
+	},
+	mounted() {
+		/**
+		 * Refresh the list when a submission is updated
+		 */
+		pkp.eventBus.$on('updated:submission', () => this.get());
+
+		/**
+		 * Remove a submission from the list when it is deleted
+		 */
+		pkp.eventBus.$on('deleted:submission', data => {
+			if (
+				!data.id ||
+				!this.items.find(submission => submission.id === data.id)
+			) {
+				return;
+			}
+			this.setItems(
+				this.items.filter((item) => {
+					return data.id !== item.id;
+				}),
+				this.itemsMax - 1
+			);
+		});
+	},
+	watch: {
+		orderBy(newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			let offset = 0;
+			this.$emit('set', this.id, {
+				offset
+			});
+			this.getItems();
+		},
+		orderDirection(newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			let offset = 0;
+			this.$emit('set', this.id, {
+				offset
+			});
+			this.getItems();
+		}
+	},
+	destroyed() {
+		pkp.eventBus.$off('updated:submission');
+		pkp.eventBus.$off('deleted:submission');
+	}
+};
+</script>
+
+<style lang="less">
+.width {
+	max-width: 100% !important;
+}
+</style>
diff --git a/src/components/Panel/TablePanel.vue b/src/components/Panel/TablePanel.vue
new file mode 100644
index 000000000..3e94b8fa1
--- /dev/null
+++ b/src/components/Panel/TablePanel.vue
@@ -0,0 +1,326 @@
+<template>
+	<div class="listPanel">
+		<div class="listPanel__header">
+			<slot name="header">
+				<pkp-header>
+					<component :is="headingLevel">{{ title }}</component>
+				</pkp-header>
+			</slot>
+		</div>
+		<div class="listPanel__body">
+			<transition name="listPanel__sidebar">
+				<div
+					v-if="!!$slots.sidebar && isSidebarVisible"
+					class="listPanel__sidebar"
+					ref="sidebar"
+				>
+					<slot name="sidebar" />
+				</div>
+			</transition>
+			<div class="listPanel__items">
+				<div v-if="!items.length" class="listPanel__empty">
+					<slot name="itemsEmpty">{{ currentEmptyLabel }}</slot>
+				</div>
+				<slot name="myTable">
+					<pkp-table :rows="items"
+					/>
+				</slot>
+			</div>
+		</div>
+		<div v-if="!!$slots.footer" class="listPanel__footer">
+			<slot name="footer" />
+		</div>
+	</div>
+</template>
+
+<script>
+import Notification from '@/components/Notification/Notification.vue';
+import PkpHeader from '@/components/Header/Header.vue';
+import PkpTable from '@/components/Table/Table.vue';
+export default {
+	name: 'TablePanel',
+	components: {
+		Notification,
+		PkpHeader,
+		PkpTable
+	},
+	props: {
+		description: {
+			type: String,
+			default() {
+				return '';
+			}
+		},
+		emptyLabel: {
+			type: String,
+			default() {
+				return '';
+			}
+		},
+		expanded: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		headingLevel: {
+			type: String,
+			default() {
+				return 'h2';
+			}
+		},
+		isSidebarVisible: {
+			type: Boolean,
+			default() {
+				return false;
+			}
+		},
+		items: {
+			type: Array,
+			required: true
+		},
+		title: {
+			type: String,
+			default() {
+				return '';
+			}
+		}
+	},
+	computed: {
+		currentEmptyLabel() {
+			return this.emptyLabel ? this.emptyLabel : this.__('common.noItemsFound');
+		}
+	},
+	watch: {
+		/**
+		 * Adjust focus when sidebar opened or closed
+		 */
+		isSidebarVisible: function(newVal, oldVal) {
+			if (newVal) {
+				this.$nextTick(() => {
+					// move focus into the sidebar when it is made visible
+					if (newVal) {
+						if (Object.keys(this.$refs).includes('sidebar')) {
+							this.setFocusIn(this.$refs.sidebar);
+						}
+					}
+				});
+			}
+		}
+	}
+};
+</script>
+
+<style lang="less">
+@import '../../styles/_import';
+
+.listPanel {
+	position: relative;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+	border-radius: @radius;
+	border-top: @grid-border;
+}
+
+.listPanel__header {
+	padding: 0.5rem 0.5rem 0.5rem 1rem;
+	font-size: @font-sml;
+	line-height: 1.5rem;
+
+	> .pkpHeader {
+		padding: 0;
+	}
+}
+
+.listPanel .pkpNotification {
+	border: none;
+	box-shadow: none;
+	padding: 1rem;
+}
+
+.listPanel__body {
+	display: flex;
+	align-items: top;
+	border-top: @grid-border;
+}
+
+.listPanel__sidebar {
+	position: relative;
+	flex: 0 0 12rem;
+	border-right: @grid-border;
+}
+
+.listPanel__sidebar-enter {
+	margin-right: -12rem;
+	opacity: 0;
+}
+
+.listPanel__sidebar-enter-active {
+	transition: opacity 0.15s ease-in-out 0.15s, margin-right 0.15s ease-in-out;
+}
+
+.listPanel__sidebar-enter-to {
+	margin-right: 0;
+	opacity: 1;
+}
+
+.listPanel__sidebar-leave {
+	margin-right: 0;
+	opacity: 1;
+}
+
+.listPanel__sidebar-leave-to {
+	margin-right: -12em;
+	opacity: 0;
+}
+
+.listPanel__sidebar-leave-active {
+	transition: opacity 0.15s ease-in-out, margin-right 0.15s ease-in-out 0.15s;
+}
+
+.listPanel__sidebar > .pkpHeader {
+	padding-left: 1rem;
+	padding-right: 1rem;
+}
+
+.listPanel__block {
+	margin: 1rem 0.5rem 1rem 1rem;
+
+	.pkpHeader {
+		padding: 0;
+	}
+
+	.pkpFilter {
+		margin-left: -1rem;
+		margin-right: -0.5rem;
+	}
+}
+
+.listPanel__sidebar .pkpHeader + .listPanel__block {
+	margin-top: 0;
+}
+
+.listPanel__sidebar .pkpHeader__title > h1,
+.listPanel__sidebar .pkpHeader__title > h2,
+.listPanel__sidebar .pkpHeader__title > h3,
+.listPanel__sidebar .pkpHeader__title > h4,
+.listPanel__sidebar .pkpHeader__title > h5,
+.listPanel__sidebar .pkpHeader__title > h6,
+.listPanel__sidebar .pkpHeader__title {
+	font-size: @font-sml;
+	font-weight: @bold;
+	line-height: 1.5em;
+}
+
+.listPanel__items {
+	width: 100%; // Force full width as flexed box
+	min-width: 0;
+}
+
+.listPanel__itemsList {
+	margin: 0;
+	padding: 0.5rem 0;
+	list-style: none;
+}
+
+.listPanel__item {
+	padding: 0.75rem 0.5rem 0.75rem 1rem;
+}
+
+.listPanel__itemSummary {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+}
+
+.listPanel__itemIdentity {
+	font-size: @font-sml;
+	line-height: 1.5rem;
+	flex: 1;
+	min-width: 0;
+}
+
+.listPanel__itemTitle {
+	font-weight: @bold;
+}
+
+.listPanel__itemTitle,
+.listPanel__itemSubtitle {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.listPanel__empty {
+	padding: 2rem;
+	font-size: @font-sml;
+	line-height: 1.5rem;
+	text-align: center;
+}
+
+.listPanel__itemActions {
+	display: flex;
+	align-items: center;
+	margin-left: auto;
+	padding-left: 0.5rem;
+	font-size: @font-tiny;
+	line-height: 1.5em;
+
+	> * {
+		white-space: nowrap;
+	}
+
+	// Space between each button or action
+	> * + * {
+		margin-left: 0.25rem;
+	}
+}
+
+.listPanel__itemExpanded {
+	margin-right: 2.25rem;
+}
+
+.listPanel__itemExpanded .list {
+	margin-top: 0.5rem;
+}
+
+.listPanel__itemExpandedActions {
+	margin-top: 0.5rem;
+	text-align: right;
+
+	> * + * {
+		margin-left: 0.25rem;
+	}
+}
+
+.listPanel__footer {
+	padding: 0.5rem;
+}
+
+[dir='rtl'] {
+	.listPanel__itemActions {
+		padding-left: 0;
+		padding-right: 0.5rem;
+
+		// Space between each button or action
+		> * + * {
+			margin-left: 0;
+			margin-right: 0.25rem;
+		}
+	}
+
+	.listPanel__itemExpanded {
+		margin-right: 0;
+		margin-left: 2.25rem;
+	}
+
+	.listPanel__itemExpandedActions {
+		text-align: left;
+
+		> * + * {
+			margin-left: 0;
+			margin-right: 0.25rem;
+		}
+	}
+}
+</style>
diff --git a/src/components/Table/SubmissionTableCell.vue b/src/components/Table/SubmissionTableCell.vue
new file mode 100644
index 000000000..9b7dde200
--- /dev/null
+++ b/src/components/Table/SubmissionTableCell.vue
@@ -0,0 +1,1262 @@
+<template>
+	<component
+		:is="tag"
+		:class="classes"
+		:scope="tag === 'th' ? 'row' : false"
+		:tabindex="tabindex"
+	>
+		<template v-if="hasSlot">
+			**hasSlot**
+			<slot :column="column" :row="row" />
+		</template>
+
+		<!-- column title-->
+		<template v-if="column.name === 'title'">
+			<a
+				:href="item.urlEditorialWorkflow"
+				:target="openSubmissionsInANewTab ? '_blank' : false"
+			>
+				<div class="listPanel__itemSubtitle">
+					{{
+						localizeSubmission(
+							currentPublication.fullTitle,
+							currentPublication.locale
+						)
+					}}
+				</div>
+			</a>
+			<!-- authors -->
+			<div v-if="currentPublication.authorsStringShort">
+				{{ currentPublication.authorsStringShort }}
+			</div>
+
+			<!-- Warnings and notices -->
+			<div
+				v-if="reviewerWorkflowLink"
+				class="listPanel__item--submission__notice"
+			>
+				<span v-html="reviewerWorkflowLink" />
+			</div>
+			<div v-else-if="notice" class="listPanel__item--submission__notice">
+				<icon icon="exclamation-triangle" :inline="true" />
+				<strong>{{ notice }}</strong>
+				<button
+					v-if="shouldAssignEditor"
+					class="-linkButton"
+					@click.stop.prevent="openAssignParticipant"
+				>
+					{{ __('submission.list.assignEditor') }}
+				</button>
+			</div>
+		</template>
+
+		<!-- column open discussion -->
+		<template v-else-if="column.name === 'openDiscussion'">
+			<div class="listPanel__item--submission__flags" aria-hidden="true">
+				<span v-if="openQueryCount">
+					<icon icon="comment-o" :inline="true" />
+					{{ openQueryCount }}
+				</span>
+			</div>
+		</template>
+		<!-- column workflow stage -->
+		<template v-else-if="column.name === 'stage'">
+			<badge
+				class="listPanel__item--submission__stage"
+				:isButton="!isArchived"
+				:label="currentStageDescription"
+				:stage="isArchived ? '' : currentStage"
+				:isPrimary="isScheduled"
+				:isSuccess="isPublished"
+				:isWarnable="isDeclined"
+				@click="filterByStage(activeStage.id)"
+			>
+				{{ currentStageLabel }}<span v-if="isReviewStage">&nbsp;/{{ currentReviewRound }}</span>
+			</badge>
+
+			<!-- column current review round : number of reviewers, name, dateDue, status -->
+			<template v-if="isReviewStage">
+				<div>
+					<div
+						style="display: inline-block"
+						v-for="reviewAssignment in currentReviewAssignments"
+						:key="reviewAssignment.id"
+					>
+						<v-popover offset="3">
+							<!-- This will be the popover target (for the events and position) -->
+							<div
+								class="tooltip-target b3"
+								v-html="getRemainingDaysAndPercent(reviewAssignment)"
+							/>
+
+							<!-- This will be the content of the popover -->
+							<template slot="popover">
+								<p>
+									<b>{{ reviewAssignment.fullName }}</b>
+								</p>
+								<template v-if="reviewAssignment.recommendation">
+										<hr />
+										{{ __('editor.submission.recommendation.display', {recommendation: reviewAssignment.recommendation }) }}
+								</template>
+								<template v-else>
+									{{ __('submission.list.reviewAssignment') }}: {{ reviewAssignment.ask }}
+									<br />
+									{{ __('submission.list.responseDue', {date: reviewAssignment.responseDue}) }}
+									<br />
+									{{ __('submission.list.reviewDue', {date: reviewAssignment.due}) }}
+									<br />
+								</template>
+								<hr />
+								<p>{{ reviewAssignment.status }}</p>
+								<pkp-button
+									element="a"
+									:target="openSubmissionsInANewTab ? '_blank' : false"
+									:href="item.urlEditorialWorkflow"
+								>
+									{{ __('common.edit') }}
+								</pkp-button>
+							</template>
+						</v-popover>
+					</div>
+				</div>
+			</template>
+		</template>
+		<!-- column participants -->
+		<template v-else-if="column.name === 'participants'">
+			<ul>
+				<li v-for="(participant, index) in participants" :key="index">
+					{{ participant.user }}{{ participant.userGroups }}
+				</li>
+			</ul>
+		</template>
+
+		<!-- column submissionId - other (dates,  )-->
+		<template v-else>
+			<span v-html="value" />
+		</template>
+	</component>
+</template>
+
+<script>
+import Expander from '@/components/Expander/Expander.vue';
+import List from '@/components/List/List.vue';
+import ListItem from '@/components/List/ListItem.vue';
+import ajaxError from '@/mixins/ajaxError';
+import fetch from '@/mixins/fetch';
+import localizeSubmission from '@/mixins/localizeSubmission';
+import dialog from '@/mixins/dialog';
+
+export default {
+	name: 'SubmissionTableCell',
+	mixins: [ajaxError, fetch, localizeSubmission, dialog],
+	components: {
+		Expander,
+		List,
+		ListItem
+	},
+	props: {
+		apiUrl: {
+			type: String,
+			required: true
+		},
+		assignParticipantUrl: {
+			type: String,
+			required: true
+		},
+		infoUrl: {
+			type: String,
+			required: true
+		},
+		getParticipantsApiUrl: {
+			type: String,
+			required: true
+		},
+		participants: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		item: {
+			type: Object,
+			required: true
+		},
+		column: Object,
+		row: Object,
+		openSubmissionsInANewTab: {
+			type: Boolean,
+			required: true
+		},
+		tabindex: [Number, Boolean]
+	},
+	data() {
+		return {
+			isExpanded: false,
+			mask: null,
+			noticeActions: [],
+			noticeActionLabels: []
+		};
+	},
+	computed: {
+		/**
+		 * Determine what kind of tag to use for the root element
+		 */
+		tag() {
+			return this.column.isRowHeader ? 'th' : 'td';
+		},
+
+		/**
+		 * Compile classes for the root element
+		 */
+		classes() {
+			let classes = ['pkpTable__cell'];
+
+			if (this.column.truncate) {
+				classes.push('-truncate');
+				classes.push('-truncate-' + this.column.truncate);
+			}
+
+			return classes;
+		},
+
+		/**
+		 * Is there slot content in the default position?
+		 */
+		hasSlot() {
+			return this.$slots.default;
+		},
+
+		/**
+		 * The value retrieved from the row
+		 */
+		value() {
+			if (typeof this.column.value === 'function') {
+				return this.column.value(this.row);
+			} else if (typeof this.row[this.column.value] !== 'undefined') {
+				return this.row[this.column.value];
+			}
+			return '';
+		},
+		/**
+		 * The current publication of the submission
+		 *
+		 * @return {Object}
+		 */
+		currentPublication() {
+			return this.row.publications.find(
+				publication => publication.id === this.item.currentPublicationId
+			);
+		},
+
+		/**
+		 * Can the current user delete this submission?
+		 *
+		 * @return {Boolean}
+		 */
+		currentUserCanDelete() {
+			if (
+				!this.userAssignedRole(pkp.const.ROLE_ID_AUTHOR) &&
+				this.userAssignedRole([
+					pkp.const.ROLE_ID_MANAGER,
+					pkp.const.ROLE_ID_SITE_ADMIN
+				]) &&
+				this.item.status === pkp.const.STATUS_DECLINED
+			) {
+				return true;
+			} else if (
+				this.userAssignedRole(pkp.const.ROLE_ID_AUTHOR) &&
+				this.item.submissionProgress !== 0
+			) {
+				return true;
+			}
+			return false; // @todo
+		},
+
+		/**
+		 * Can the current user view the info center?
+		 *
+		 * @return {Boolean}
+		 */
+		currentUserCanViewInfoCenter() {
+			return this.userAssignedRole([
+				pkp.const.ROLE_ID_SITE_ADMIN,
+				pkp.const.ROLE_ID_MANAGER,
+				pkp.const.ROLE_ID_SUB_EDITOR
+			]);
+		},
+
+		/**
+		 * Is the current user a reviewer on this submission?
+		 *
+		 * @return {Boolean}
+		 */
+		currentUserIsReviewer() {
+			for (var review of this.item.reviewAssignments) {
+				if (review.isCurrentUserAssigned) {
+					return true;
+				}
+			}
+			return false;
+		},
+
+		/**
+		 * The current stage
+		 *
+		 * @return {Array}
+		 */
+		activeStage() {
+			return this.item.stages.find(stage => {
+				return stage.isActiveStage === true;
+			});
+		},
+
+		/**
+		 * Compile a notice depending on the stage status
+		 *
+		 * Only stage status that have pending work for the current user should
+		 * result in a notice.
+		 *
+		 * @return {String}
+		 */
+		notice() {
+			var notice = '';
+
+			// Incomplete submissions should not show notices
+			if (this.item.submissionProgress > 0) {
+				return notice;
+			}
+
+			// Notices for journal managers
+			if (this.shouldAssignEditor) {
+				notice = this.activeStage.status;
+			}
+
+			// Notices for journal managers and subeditors
+			if (
+				this.userAssignedRole([
+					pkp.const.ROLE_ID_MANAGER,
+					pkp.const.ROLE_ID_SUB_EDITOR
+				])
+			) {
+				if (this.isReviewStage) {
+					switch (this.activeStage.statusId) {
+						case pkp.const.REVIEW_ROUND_STATUS_PENDING_REVIEWERS:
+						case pkp.const.REVIEW_ROUND_STATUS_REVIEWS_READY:
+						case pkp.const.REVIEW_ROUND_STATUS_REVIEWS_COMPLETED:
+						case pkp.const.REVIEW_ROUND_STATUS_REVIEWS_OVERDUE:
+						case pkp.const.REVIEW_ROUND_STATUS_REVISIONS_SUBMITTED:
+						case pkp.const.REVIEW_ROUND_STATUS_RESUBMIT_FOR_REVIEW_SUBMITTED:
+							notice = this.activeStage.status;
+							break;
+					}
+					if (!this.activeStage.currentUserCanRecommendOnly) {
+						switch (this.activeStage.statusId) {
+							case pkp.const.REVIEW_ROUND_STATUS_RECOMMENDATIONS_READY:
+							case pkp.const.REVIEW_ROUND_STATUS_RECOMMENDATIONS_COMPLETED:
+								notice = this.activeStage.status;
+								break;
+						}
+					}
+				}
+			}
+
+			// Notices for authors
+			if (this.userAssignedRole(pkp.const.ROLE_ID_AUTHOR)) {
+				if (this.isReviewStage) {
+					switch (this.activeStage.statusId) {
+						case pkp.const.REVIEW_ROUND_STATUS_REVISIONS_REQUESTED:
+						case pkp.const.REVIEW_ROUND_STATUS_RESUBMIT_FOR_REVIEW:
+							notice = this.activeStage.status;
+							break;
+					}
+				}
+			}
+
+			// Notices for reviewers
+			if (this.currentUserIsReviewer) {
+				switch (this.currentUserLatestReviewAssignment.statusId) {
+					case pkp.const.REVIEW_ASSIGNMENT_STATUS_AWAITING_RESPONSE:
+					case pkp.const.REVIEW_ASSIGNMENT_STATUS_RESPONSE_OVERDUE:
+					case pkp.const.REVIEW_ASSIGNMENT_STATUS_REVIEW_OVERDUE:
+					case pkp.const.REVIEW_ASSIGNMENT_STATUS_REQUEST_RESEND:
+						notice = this.currentUserLatestReviewAssignment.status;
+						break;
+				}
+			}
+
+			return notice;
+		},
+
+		/**
+		 * Does this submission need an editor assigned and can the current user
+		 * assign one?
+		 *
+		 * @return {Boolean}
+		 */
+		shouldAssignEditor() {
+			return (
+				this.userAssignedRole(pkp.const.ROLE_ID_MANAGER) &&
+				this.activeStage.id === pkp.const.WORKFLOW_STAGE_ID_SUBMISSION &&
+				this.activeStage.statusId ===
+					pkp.const.STAGE_STATUS_SUBMISSION_UNASSIGNED
+			);
+		},
+
+		/**
+		 * Get the current stage to pass to pkpBadge
+		 *
+		 * @return {String}
+		 */
+		currentStage() {
+			switch (this.activeStage.id) {
+				case pkp.const.WORKFLOW_STAGE_ID_SUBMISSION:
+					return 'submission';
+				case pkp.const.WORKFLOW_STAGE_ID_INTERNAL_REVIEW:
+				case pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW:
+					return 'review';
+				case pkp.const.WORKFLOW_STAGE_ID_EDITING:
+					return 'copyediting';
+				case pkp.const.WORKFLOW_STAGE_ID_PRODUCTION:
+					return 'production';
+			}
+			return '';
+		},
+
+		/**
+		 * Get the label for the current stage
+		 *
+		 * @return {String}
+		 */
+		currentStageLabel() {
+			if (this.isArchived) {
+				return this.item.statusLabel;
+			} else if (this.item.submissionProgress > 0) {
+				return this.__('submissions.incomplete');
+			}
+			return this.activeStage.label;
+		},
+
+		/**
+		 * Get an a11y description for the current stage badge
+		 *
+		 * @return {String}
+		 */
+		currentStageDescription() {
+			return this.__('submission.list.currentStage', {
+				stage: this.currentStageLabel
+			});
+		},
+
+		/**
+		 * Has this submission been archived?
+		 *
+		 * @return {Boolean}
+		 */
+		isArchived() {
+			return (
+				this.item.status === pkp.const.STATUS_SCHEDULED ||
+				this.item.status === pkp.const.STATUS_PUBLISHED ||
+				this.item.status === pkp.const.STATUS_DECLINED
+			);
+		},
+
+		/**
+		 * Has this submission been declined?
+		 *
+		 * @return {Boolean}
+		 */
+		isDeclined() {
+			return this.item.status === pkp.const.STATUS_DECLINED;
+		},
+
+		/**
+		 * Has this submission been scheduled for publication
+		 *
+		 * @return {Boolean}
+		 */
+		isScheduled() {
+			return this.item.status === pkp.const.STATUS_SCHEDULED;
+		},
+
+		/**
+		 * Has this submission been published
+		 *
+		 * @return {Boolean}
+		 */
+		isPublished() {
+			return this.item.status === pkp.const.STATUS_PUBLISHED;
+		},
+
+		/**
+		 * Compile the count of open discussions
+		 *
+		 * @return {Number}
+		 */
+		openQueryCount() {
+			return this.activeStage.openQueryCount;
+		},
+
+		/**
+		 * Determine the correct label for the count of files based on the active
+		 * stage.
+		 *
+		 * @return {String}
+		 */
+		activeStageFilesLabel() {
+			switch (this.activeStage.id) {
+				case pkp.const.WORKFLOW_STAGE_ID_INTERNAL_REVIEW:
+				case pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW:
+					return this.__('submission.list.revisionsSubmitted');
+				case pkp.const.WORKFLOW_STAGE_ID_EDITING:
+					return this.__('submission.list.copyeditsSubmitted');
+				case pkp.const.WORKFLOW_STAGE_ID_PRODUCTION:
+					return this.__('submission.list.galleysCreated');
+			}
+			return '';
+		},
+
+		/**
+		 * Is this the submission stage?
+		 *
+		 * @return {Boolean}
+		 */
+		isSubmissionStage() {
+			return this.activeStage.id === pkp.const.WORKFLOW_STAGE_ID_SUBMISSION;
+		},
+
+		/**
+		 * Is this the review stage?
+		 *
+		 * @return {Boolean}
+		 */
+		isReviewStage() {
+			return (
+				this.activeStage.id === pkp.const.WORKFLOW_STAGE_ID_INTERNAL_REVIEW ||
+				this.activeStage.id === pkp.const.WORKFLOW_STAGE_ID_EXTERNAL_REVIEW
+			);
+		},
+
+		/**
+		 * Retrieve all role assignments for any stage
+		 *
+		 * @return {Array}
+		 */
+		currentRoleAssignments() {
+			let roles = [];
+			this.item.stages.forEach(stage => {
+				stage.currentUserAssignedRoles.forEach(role => {
+					if (roles.indexOf(role) === -1) {
+						roles.push(role);
+					}
+				});
+			});
+			return roles;
+		},
+
+		/**
+		 * If the user is assigned to more than one role, and has access to both the
+		 * editorial and author dashboards, provide a description and links to both.
+		 *
+		 * @return {String}
+		 */
+		dualWorkflowLinks() {
+			if (
+				!this.userAssignedRole(pkp.const.ROLE_ID_AUTHOR) ||
+				!this.userAssignedRole([
+					pkp.const.ROLE_ID_MANAGER,
+					pkp.const.ROLE_ID_SUB_EDITOR,
+					pkp.const.ROLE_ID_ASSISTANT
+				])
+			) {
+				return '';
+			}
+			return this.__('submission.list.dualWorkflowLinks', {
+				urlAuthorWorkflow: this.item.urlAuthorWorkflow,
+				urlEditorialWorkflow: this.item.urlEditorialWorkflow
+			});
+		},
+
+		/**
+		 * If the user is assigned as a reviewer, but also to an editorial role,
+		 * provide a description and link to the editorial workflow.
+		 *
+		 * @return {String}
+		 */
+		reviewerWorkflowLink() {
+			if (
+				!this.currentUserIsReviewer ||
+				!this.userAssignedRole([
+					pkp.const.ROLE_ID_MANAGER,
+					pkp.const.ROLE_ID_SUB_EDITOR,
+					pkp.const.ROLE_ID_ASSISTANT
+				])
+			) {
+				return '';
+			}
+			return this.__('submission.list.reviewerWorkflowLink', {
+				urlEditorialWorkflow: this.item.urlEditorialWorkflow
+			});
+		},
+
+		/**
+		 * Retrieve the review assignments for the latest review round
+		 *
+		 * @return {Array}
+		 */
+		currentReviewRound() {
+			if (!this.item.reviewRounds.length) {
+				return 0;
+			}
+			return this.item.reviewRounds.length;
+		},
+
+		/**
+		 * Retrieve the review assignments for the latest review round
+		 *
+		 * @return {Array}
+		 */
+		currentReviewAssignments() {
+			if (
+				!this.item.reviewRounds.length ||
+				!this.item.reviewAssignments.length
+			) {
+				return [];
+			}
+			var currentReviewRoundId = this.item.reviewRounds[
+				this.item.reviewRounds.length - 1
+			].id;
+			return this.item.reviewAssignments.filter(assignment => {
+				return assignment.roundId === currentReviewRoundId;
+			});
+		},
+
+		/**
+		 * The current user's latest review assignment. This retrieves the
+		 * review assignment from the latest round if available, or any other
+		 * round if not available.
+		 *
+		 * @return {Object|Boolean} False if no review assignment exists
+		 */
+		currentUserLatestReviewAssignment() {
+			if (!this.currentUserIsReviewer) {
+				return false;
+			}
+
+			var assignments = this.item.reviewAssignments.filter(assignment => {
+				return assignment.isCurrentUserAssigned === true;
+			});
+
+			if (!assignments.length) {
+				return false;
+			}
+
+			var latest = assignments.reduce((prev, current) => {
+				return prev.round > current.round ? prev : current;
+			});
+
+			switch (latest.statusId) {
+				case pkp.const.REVIEW_ASSIGNMENT_STATUS_AWAITING_RESPONSE:
+				case pkp.const.REVIEW_ASSIGNMENT_STATUS_RESPONSE_OVERDUE:
+				case pkp.const.REVIEW_ASSIGNMENT_STATUS_REQUEST_RESEND:
+					latest.responsePending = true;
+					latest.reviewPending = true;
+					break;
+
+				case pkp.const.REVIEW_ASSIGNMENT_STATUS_ACCEPTED:
+				case pkp.const.REVIEW_ASSIGNMENT_STATUS_REVIEW_OVERDUE:
+					latest.reviewPending = true;
+					break;
+
+				case pkp.const.REVIEW_ASSIGNMENT_STATUS_RECEIVED:
+				case pkp.const.REVIEW_ASSIGNMENT_STATUS_COMPLETE:
+				case pkp.const.REVIEW_ASSIGNMENT_STATUS_THANKED:
+					latest.reviewComplete = true;
+					break;
+			}
+
+			return latest;
+		},
+
+		/**
+		 * Compile the count of completed reviews
+		 *
+		 * @return {Number}
+		 */
+		completedReviewsCount() {
+			if (!this.isReviewStage) {
+				return 0;
+			}
+			return this.currentReviewAssignments.filter(review => {
+				return review.statusId >= pkp.const.REVIEW_ASSIGNMENT_STATUS_RECEIVED;
+			}).length;
+		}
+	},
+	methods: {
+		/**
+		 * Check if a user is assigned a given role on this submission. If no
+		 * assignments exist, match global roles for site admin and manager
+		 *
+		 * @param {Number|Array} roles
+		 */
+		userAssignedRole: function(roles) {
+			if (!Array.isArray(roles)) {
+				roles = [roles];
+			}
+			if (this.currentRoleAssignments.length) {
+				return roles.some(role => {
+					return this.currentRoleAssignments.includes(role);
+				});
+			} else {
+				var managerRoles = roles.filter(role => {
+					return (
+						role === pkp.const.ROLE_ID_SITE_ADMIN ||
+						role === pkp.const.ROLE_ID_MANAGER
+					);
+				});
+				if (managerRoles.length) {
+					return this.userHasRole(managerRoles);
+				}
+			}
+			return false;
+		},
+
+		/**
+		 * Filter by a submission stage
+		 *
+		 * @param {Number} stageId
+		 */
+		filterByStage: function(stageId) {
+			this.$emit('addFilter', 'stageIds', stageId);
+		},
+
+		/**
+		 * Load a modal displaying history and notes of a submission
+		 */
+		openInfoCenter() {
+			var opts = {
+				title: this.localizeSubmission(
+					this.currentPublication.fullTitle,
+					this.currentPublication.locale
+				),
+				url: this.infoUrl.replace('__id__', this.item.id),
+				closeCallback: this.resetFocusInfoCenter
+			};
+
+			$(
+				'<div id="' +
+					$.pkp.classes.Helper.uuid() +
+					'" ' +
+					'class="pkp_modal pkpModalWrapper" tabindex="-1"></div>'
+			).pkpHandler('$.pkp.controllers.modal.AjaxModalHandler', opts);
+		},
+
+		/**
+		 * Reset the focus on the info center link when the modal has been
+		 * closed. This is a callback function passed into ModalHandler.js
+		 */
+		resetFocusInfoCenter() {
+			this.$el.querySelector('.listPanel__item__openInfoCenter').focus();
+		},
+
+		/**
+		 * Load a modal displaying the assign participant options
+		 */
+		openAssignParticipant() {
+			var opts = {
+				title: this.__('submission.list.assignEditor'),
+				url: this.assignParticipantUrl
+					.replace('__id__', this.item.id)
+					.replace('__stageId__', this.activeStage.id),
+				closeCallback: this.resetFocusAssignParticipant
+			};
+
+			$(
+				'<div id="' +
+					$.pkp.classes.Helper.uuid() +
+					'" ' +
+					'class="pkp_modal pkpModalWrapper" tabIndex="-1"></div>'
+			).pkpHandler('$.pkp.controllers.modal.AjaxModalHandler', opts);
+		},
+
+		/**
+		 * Reset the focus on the assign participant button when the modal has been
+		 * closed. This is a callback function passed into ModalHandler.js
+		 */
+		resetFocusAssignParticipant() {
+			this.$el
+				.querySelector('.listPanel__item--submission__notice button')
+				.focus();
+		},
+
+		/**
+		 * Display a confirmation prompt before deleting a submission
+		 */
+		deleteSubmissionPrompt() {
+			this.openDialog({
+				name: 'deleteSubmission',
+				title: this.__('common.delete'),
+				message: this.__('editor.submissionArchive.confirmDelete'),
+				actions: [
+					{
+						label: this.__('common.yes'),
+						isPrimary: true,
+						callback: this.deleteSubmission
+					},
+					{
+						label: this.__('common.no'),
+						isWarnable: true,
+						callback: () => this.$modal.hide('deleteSubmission')
+					}
+				]
+			});
+		},
+
+		/**
+		 * Send a request to delete the submission and handle the response
+		 */
+		deleteSubmission() {
+			var self = this;
+			$.ajax({
+				url: this.apiUrl + '/' + this.item.id,
+				type: 'POST',
+				headers: {
+					'X-Csrf-Token': pkp.currentUser.csrfToken,
+					'X-Http-Method-Override': 'DELETE'
+				},
+				error: this.ajaxErrorCallback,
+				success() {
+					pkp.eventBus.$emit('deleted:submission', {id: self.item.id});
+				},
+				complete() {
+					self.$modal.hide('deleteSubmission');
+				}
+			});
+		},
+
+		/**
+		 * Helper function to determine if the current user has a role
+		 *
+		 * @param int|array roles The role ID to look for (pkp.const.ROLE_ID...)
+		 * @return bool
+		 */
+		userHasRole(roles) {
+			if (!Array.isArray(roles)) {
+				roles = [roles];
+			}
+
+			var hasRole = false;
+			roles.forEach(role => {
+				if (pkp.currentUser.roles.indexOf(role) > -1) {
+					hasRole = true;
+				}
+			});
+
+			return hasRole;
+		},
+
+		/**
+		 * Helper function to prepare a list of editors
+		 * ( pkp.const.ROLE_ID_MANAGER, pkp.const.ROLE_ID_SUB_EDITOR)role with user group name
+		 *
+		 * @param array users: list of users from API submission getParticipants
+		 * @return array [{fullName: abbrev}, ...]
+		 */
+		prepareEditors(users) {
+			var usersList = [];
+			users.forEach(user => {
+				let uG = [];
+				var userGroups = user['assignedAs'];
+				let isEditor = false;
+				userGroups.forEach(userGroup => {
+					if (
+						[pkp.const.ROLE_ID_MANAGER, pkp.const.ROLE_ID_SUB_EDITOR].includes(
+							userGroup.roleId
+						)
+					) {
+						isEditor = true;
+						uG.push(
+							this.localizeSubmission(
+								userGroup.abbrev,
+								this.currentPublication.locale
+							)
+						);
+					}
+				});
+				if (isEditor) {
+					usersList.push({user: user['fullName'], userGroups: uG});
+				}
+			});
+			return usersList;
+		},
+
+		/**
+		 * Get participants from API submission getParticipants
+		 * @return array [{fullName: abbrev}, ...]
+		 */
+		getParticipants() {
+			var url = this.getParticipantsApiUrl
+				.replace('__id__', this.item.id)
+				.replace('__stageId__', this.activeStage.id);
+			let self = this;
+
+			$.ajax({
+				url: url,
+				type: 'GET',
+				_uuid: this.latestItemsGetRequest,
+				error(r) {
+					if (self.latestItemsGetRequest !== this._uuid) {
+						return;
+					}
+					self.ajaxErrorCallback(r);
+				},
+				success(r) {
+					if (self.latestItemsGetRequest !== this._uuid) {
+						return;
+					}
+					self.participants = self.prepareEditors(r);
+				},
+				complete(r) {
+					if (self.latestItemsGetRequest !== this._uuid) {
+						return;
+					}
+				}
+			});
+		},
+		/**
+		 * Get remaining day from dateDue or dateResponseDue
+		 * status REVIEW_ASSIGNMENT_STATUS_REQUEST_RESEND : not treated (TODO)
+		 * @return Array("remainingDays": int, "percent": int, "color": color rgb )
+		 */
+		getRemainingDaysAndPercent(reviewAssignment) {
+			if (
+				[
+					pkp.const.REVIEW_ASSIGNMENT_STATUS_AWAITING_RESPONSE,
+					pkp.const.REVIEW_ASSIGNMENT_STATUS_RESPONSE_OVERDUE,
+					pkp.const.REVIEW_ASSIGNMENT_STATUS_ACCEPTED,
+					pkp.const.REVIEW_ASSIGNMENT_STATUS_REVIEW_OVERDUE
+				].includes(reviewAssignment.statusId)
+			) {
+				// waiting for a review
+				var dateDue;
+				if (
+					[
+						pkp.const.REVIEW_ASSIGNMENT_STATUS_AWAITING_RESPONSE,
+						pkp.const.REVIEW_ASSIGNMENT_STATUS_RESPONSE_OVERDUE
+					].includes(reviewAssignment.statusId)
+				) {
+					dateDue = reviewAssignment.responseDue;
+				} else if (
+					[
+						pkp.const.REVIEW_ASSIGNMENT_STATUS_ACCEPTED,
+						pkp.const.REVIEW_ASSIGNMENT_STATUS_REVIEW_OVERDUE
+					].includes(reviewAssignment.statusId)
+				) {
+					dateDue = reviewAssignment.due;
+				}
+				// compute remaining days
+
+				var now = Date.now();
+				dateDue = Date.parse(dateDue);
+				var ms = dateDue - now;
+				var days = Math.round(ms / (1000 * 60 * 60 * 24));
+				var dateAsked = Date.parse(reviewAssignment.ask);
+				var delay = Math.round((dateDue - dateAsked) / (1000 * 60 * 60 * 24)); // days between ask and dateDue
+
+				var percent = (100 * days) / delay;
+				// try to have 0% 25% 50% 75% 100%
+				percent = Math.round(percent / 25) * 25;
+				switch (true) {
+					case days < -3:
+						return (
+							'<div class="radialProgressBar red100"><div class="overlayRed">' +
+							days +
+							'</div></div>'
+						);
+					case days <= 0:
+						return (
+							'<div class="radialProgressBar red25"><div class="overlay">' +
+							days +
+							'</div></div>'
+						);
+					case days <= 3:
+						return (
+							'<div class="radialProgressBar orange25"><div class="overlay">' +
+							days +
+							'</div></div>'
+						);
+					case days > 3:
+						return (
+							'<div class="radialProgressBar green' +
+							percent +
+							'"><div class="overlay">' +
+							days +
+							'</div></div>'
+						);
+				}
+			} // end waiting for a review
+			else if (
+				reviewAssignment.statusId == pkp.const.REVIEW_ASSIGNMENT_STATUS_RECEIVED
+			) {
+				// review has been submitted
+				return '<div class="radialProgressBar green25"><div class="overlayGreen"> </div></div>';
+			} else if (
+				reviewAssignment.statusId == pkp.const.REVIEW_ASSIGNMENT_STATUS_COMPLETE
+			) {
+				// review has been confirmed by an editor
+				return '<div class="radialProgressBar green50"><div class="overlayGreen"> </div></div>';
+			} else if (
+				reviewAssignment.statusId == pkp.const.REVIEW_ASSIGNMENT_STATUS_THANKED
+			) {
+				// reviewer has been thanked
+				return '<div class="radialProgressBar green100"><div class="overlayGreen"> </div></div>';
+			}
+			// pkp.const.REVIEW_ASSIGNMENT_STATUS_CANCELLED
+		}
+	},
+	watch: {
+		/**
+		 * When item change Get from API, participants to the active stage and filter on Editors
+		 *
+		 * @return Array
+		 */
+		item: function(newItem) {
+			if (this.column.name == 'participants') {
+				this.getParticipants();
+			}
+		}
+	},
+	mounted() {
+		if (this.column.name == 'participants') {
+			this.getParticipants();
+		}
+	}
+};
+</script>
+
+<style lang="less">
+@import '../../styles/_import';
+
+.pkpTable__cell.-truncate {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	width: 100%;
+	max-width: 20em;
+}
+
+.pkpTable__cell.-truncate-small {
+	max-width: 10em;
+}
+
+.pkpTable__cell.-truncate-large {
+	max-width: 40em;
+}
+
+.listPanel__itemIdentity--submission,
+.listPanel__itemExpanded--submission {
+	padding-left: 2.5rem;
+}
+
+.listPanel__item--submission__id {
+	position: absolute;
+	top: 0;
+	left: 0;
+	font-size: @font-tiny;
+	line-height: 22px; // Match baseline of title
+	color: @text;
+}
+
+.listPanel__item--submission__title,
+.listPanel__item--submission__author,
+.listPanel__item--submission__notice {
+	display: block;
+	padding-right: 2em;
+}
+
+.listPanel__item--submission__author {
+	font-weight: @bold;
+}
+
+.listPanel__item--submission__notice,
+.listPanel__item--submission__reviewerWorkflowLink {
+	margin-top: 0.5em;
+	font-size: @font-tiny;
+	line-height: 1.5em;
+	color: @text;
+
+	.fa {
+		font-size: @font-sml;
+		color: @no;
+	}
+}
+
+.listPanel__item--submission__notice {
+	.-linkButton:not(:last-child) {
+		margin-right: 0.5em;
+	}
+}
+
+.listPanel__item--submission__flags {
+	display: inline-block;
+	font-size: @font-tiny;
+	line-height: 1.5em;
+
+	> * {
+		margin-right: 1em;
+	}
+
+	.fa {
+		margin-right: 0.25em;
+		font-size: @font-sml;
+		color: @text-light-rgba;
+	}
+}
+
+.listPanel__item--submission__stage {
+	margin-left: 0.5rem;
+	margin-right: 0.25rem;
+}
+
+.listPanel__itemExpanded--submission {
+	margin-top: 1rem;
+}
+
+.listPanel__item--submission__reviewDetails {
+	margin-top: 0.25em;
+	font-size: @font-tiny;
+	line-height: 1.5em;
+}
+
+.listPanel__item--submission__dueDate {
+	margin-right: 1rem;
+}
+
+.listPanel__item--submission__reviewComplete .fa {
+	color: @yes;
+}
+
+[dir='rtl'] {
+	.listPanel__itemIdentity--submission {
+		padding-left: 0rem;
+		padding-right: 2.5rem;
+	}
+
+	.listPanel__item--submission__id {
+		position: absolute;
+		left: auto;
+		right: 0;
+		text-align: left;
+	}
+}
+
+.orange25 {
+	background-image: -webkit-linear-gradient(0deg, #ddd 50%, transparent 50%),
+		-webkit-linear-gradient(left, orange 50%, #ddd 50%) !important;
+	background-image: linear-gradient(0deg, #ddd 50%, transparent 50%),
+		linear-gradient(90deg, orange 50%, #ddd 50%) !important;
+}
+
+.red25 {
+	background-image: -webkit-linear-gradient(left, red 50%, transparent 50%),
+		-webkit-linear-gradient(right, red 50%, #ddd 50%) !important;
+	background-image: linear-gradient(90deg, red 50%, transparent 50%),
+		linear-gradient(-90deg, red 50%, #ddd 50%) !important;
+}
+
+.red100 {
+	background-image: -webkit-linear-gradient(0deg, #ddd 50%, transparent 50%),
+		-webkit-linear-gradient(left, red 50%, #ddd 50%) !important;
+	background-image: linear-gradient(0deg, #ddd 50%, transparent 50%),
+		linear-gradient(90deg, red 50%, #ddd 50%) !important;
+}
+
+.green25 {
+	background-image: -webkit-linear-gradient(0deg, #ddd 50%, transparent 50%),
+		-webkit-linear-gradient(left, green 50%, #ddd 50%) !important;
+	background-image: linear-gradient(0deg, #ddd 50%, transparent 50%),
+		linear-gradient(90deg, green 50%, #ddd 50%) !important;
+}
+
+.green50 {
+	background-image: -webkit-linear-gradient(right, #ddd 50%, transparent 50%),
+		-webkit-linear-gradient(left, green 50%, #ddd 50%) !important;
+	background-image: linear-gradient(-90deg, #ddd 50%, transparent 50%),
+		linear-gradient(90deg, green 50%, #ddd 50%) !important;
+}
+
+.green75 {
+	background-image: -webkit-linear-gradient(left, green 50%, transparent 50%),
+		-webkit-linear-gradient(75deg, green 50%, #ddd 50%) !important;
+	background-image: linear-gradient(90deg, green 50%, transparent 50%),
+		linear-gradient(0deg, green 50%, #ddd 50%) !important;
+}
+
+.green100 {
+	background-image: -webkit-linear-gradient(left, green 50%, transparent 50%),
+		-webkit-linear-gradient(right, green 50%, #ddd 50%) !important;
+	background-image: linear-gradient(90deg, green 50%, transparent 50%),
+		linear-gradient(-90deg, green 50%, #ddd 50%) !important;
+}
+
+.radialProgressBar {
+	border-radius: 50%;
+	-webkit-transform: translate(50%, 50%);
+	transform: translate(50%, 50%);
+	width: 32px;
+	height: 32px;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	background: #ddd;
+	margin: 2px;
+	float: left;
+}
+
+.radialProgressBar .overlay {
+	border-radius: 50%;
+	width: 26px;
+	height: 26px;
+	margin: auto;
+	background: #fff;
+	text-align: center;
+	padding-top: 30%;
+	line-height: 6px;
+}
+
+.radialProgressBar .overlayGreen {
+	border-radius: 50%;
+	width: 26px;
+	height: 26px;
+	margin: auto;
+	background: green;
+	text-align: center;
+	padding-top: 30%;
+	line-height: 6px;
+}
+
+.radialProgressBar .overlayRed {
+	border-radius: 50%;
+	width: 26px;
+	height: 26px;
+	margin: auto;
+	background: red;
+	text-align: center;
+	padding-top: 30%;
+	line-height: 6px;
+	color: white;
+}
+
+.tooltip-inner {
+	background: white !important;
+	color: black !important;
+	box-shadow: 2px 2px 4px #222222;
+}
+
+.tooltip-inner a {
+	color: #006798 !important;
+}
+
+.submissionsListPanel {
+	overflow-x: auto;
+}
+</style>
diff --git a/src/mixins/fetch.js b/src/mixins/fetch.js
index b175a52fb..65a868de5 100644
--- a/src/mixins/fetch.js
+++ b/src/mixins/fetch.js
@@ -183,14 +183,14 @@ export default {
 		/**
 		 * Perform a search whenever the searchPhrase is updated
 		 */
-		searchPhrase(newVal, oldVal) {
+		searchPhrase(newVal, oldVal) {		
 			if (newVal === oldVal) {
 				return;
 			}
 			if (this.offset) {
 				this.offset = 0; // will fire this.get()
 			} else {
-				this.$nextTick(() => this.get());
+				this.$nextTick(() => this.get());			
 			}
 		},
 	},