Galleys sorting, Links to Library and Activity log

src/components/Icon/Icon.stories.js

@@ -67,7 +67,10 @@ export const iconGallery = {
 			'Cancel',
 			'Catalog',
 			'Complete',
+			'ChevronDown',
+			'ChevronUp',
 			'Dashboard',
+			'DefaultDocument',
 			'DecreaseTextSize',
 			'DisableUser',
 			'Dropdown',
@@ -76,7 +79,6 @@ export const iconGallery = {
 			'Email',
 			'EmailOpened',
 			'Expand',
-			'DefaultDocument',
 			'FileAudio',
 			'FileDoc',
 			'FileEpub',
@@ -87,6 +89,7 @@ export const iconGallery = {
 			'FileVideo',
 			'FileZip',
 			'Help',
+			'History',
 			'InProgress',
 			'IncreaseTextSize',
 			'InsertContent',
@@ -99,6 +102,7 @@ export const iconGallery = {
 			'MySubmissions',
 			'NavDoi',
 			'NavAdmin',
+			'New',
 			'Notifications',
 			'OpenReview',
 			'Orcid',
@@ -107,6 +111,7 @@ export const iconGallery = {
 			'Publication',
 			'ReadRecommendation',
 			'ReviewAssignments',
+			'ReviewRequestDeclined',
 			'ReviewSent',
 			'Search',
 			'Settings',

src/components/Icon/Icon.vue

@@ -44,6 +44,8 @@ import Bold from './icons/Bold.vue';
 import Bullets from './icons/Bullets.vue';
 import Cancel from './icons/Cancel.vue';
 import Catalog from './icons/Catalog.vue';
+import ChevronDown from './icons/ChevronDown.vue';
+import ChevronUp from './icons/ChevronUp.vue';
 import Complete from './icons/Complete.vue';
 import Dashboard from './icons/Dashboard.vue';
 import DecreaseTextSize from './icons/DecreaseTextSize.vue';
@@ -110,6 +112,8 @@ const svgIcons = {
 	Cancel,
 	Catalog,
 	Complete,
+	ChevronDown,
+	ChevronUp,
 	Dashboard,
 	DefaultDocument,
 	DecreaseTextSize,

src/components/Icon/icons/ChevronDown.vue

@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M11.9999 13.9394L17.4696 8.46973L18.5303 9.53039L11.9999 16.0607L5.46961 9.53039L6.53027 8.46973L11.9999 13.9394Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>

src/components/Icon/icons/ChevronUp.vue

@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M12.0001 10.0606L6.53039 15.5303L5.46973 14.4696L12.0001 7.93929L18.5304 14.4696L17.4697 15.5303L12.0001 10.0606Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>

src/components/TableNext/TableCell.vue

@@ -28,6 +28,13 @@ const props = defineProps({
 			return false;
 		},
 	},
+	/** Take only width as the content needs */
+	fitContent: {
+		type: Boolean,
+		default() {
+			return false;
+		},
+	},
 });
 
 const classes = computed(() => {
@@ -39,6 +46,10 @@ const classes = computed(() => {
 	if (props.fullWidthTruncated) {
 		list.push('w-full max-w-0 truncate');
 	}
+
+	if (props.fitContent) {
+		list.push('whitespace-nowrap w-1');
+	}
 	return list;
 });
 </script>

src/composables/useDataChangedProvider.js

@@ -11,8 +11,8 @@ export function useDataChangedProvider(callback) {
 		callbacks = callbacks.filter((callback) => callback !== _callback);
 	}
 
-	function triggerDataChange() {
-		callbacks.forEach((callback) => callback());
+	async function triggerDataChange() {
+		return Promise.all(callbacks.map((callback) => callback()));
 	}
 
 	if (callback) {

src/managers/GalleyManager/GalleyManager.vue

@@ -1,6 +1,33 @@
 <template>
 	<PkpTable>
 		<template #label>{{ t('submission.layout.galleys') }}</template>
+		<template #top-controls>
+			<component
+				:is="Components[action.component] || action.component"
+				v-bind="action.props || {}"
+				v-for="(action, i) in galleyManagerStore.topItems"
+				:key="i"
+			>
+				{{ action.label }}
+			</component>
+		</template>
+		<TableHeader>
+			<TableColumn v-for="(column, i) in galleyManagerStore.columns" :key="i">
+				<span :class="column.headerSrOnly ? 'sr-only' : ''">
+					{{ column.header }}
+				</span>
+			</TableColumn>
+		</TableHeader>
+		<TableBody>
+			<TableRow v-for="galley in galleyManagerStore.galleys" :key="galley.id">
+				<component
+					:is="Components[column.component] || column.component"
+					v-for="(column, i) in galleyManagerStore.columns"
+					:key="i"
+					:galley="galley"
+				></component>
+			</TableRow>
+		</TableBody>
 		<template #bottom-controls>
 			<div class="space-x-y flex">
 				<PkpButton
@@ -14,23 +41,6 @@
 				</PkpButton>
 			</div>
 		</template>
-		<TableHeader>
-			<TableColumn>{{ t('common.name') }}</TableColumn>
-			<TableColumn>{{ t('common.language') }}</TableColumn>
-			<TableColumn>
-				<span class="sr-only">{{ t('common.moreActions') }}</span>
-			</TableColumn>
-		</TableHeader>
-		<TableBody>
-			<GalleyManagerTableRow
-				v-for="galley in galleyManagerStore.galleys"
-				:key="galley.id"
-				:galley="galley"
-				:metadata-locales="submission.metadataLocales"
-				:item-actions="galleyManagerStore.itemActions"
-				@action="galleyManagerStore.handleAction"
-			></GalleyManagerTableRow>
-		</TableBody>
 	</PkpTable>
 </template>
 
@@ -41,9 +51,22 @@ import PkpTable from '@/components/TableNext/Table.vue';
 import TableColumn from '@/components/TableNext/TableColumn.vue';
 import TableHeader from '@/components/TableNext/TableHeader.vue';
 import TableBody from '@/components/TableNext/TableBody.vue';
-import GalleyManagerTableRow from './GalleyManagerTableRow.vue';
+import TableRow from '@/components/TableNext/TableRow.vue';
+
 import PkpButton from '@/components/Button/Button.vue';
 
+import GalleyManagerCellName from './GalleyManagerCellName.vue';
+import GalleyManagerCellLanguage from './GalleyManagerCellLanguage.vue';
+import GalleyManagerCellActions from './GalleyManagerCellActions.vue';
+import GalleyManagerSortButton from './GalleyManagerSortButton.vue';
+
+const Components = {
+	GalleyManagerCellName,
+	GalleyManagerCellLanguage,
+	GalleyManagerCellActions,
+	GalleyManagerSortButton,
+};
+
 const props = defineProps({
 	publication: {type: Object, required: true},
 	submission: {type: Object, required: true},

src/managers/GalleyManager/GalleyManagerCellActions.vue

@@ -0,0 +1,31 @@
+<template>
+	<TableCell class="w-28">
+		<TableRowRortControls
+			v-if="galleyManagerStore.sortingEnabled"
+			@up="galleyManagerStore.sortMoveUp(galley.id)"
+			@down="galleyManagerStore.sortMoveDown(galley.id)"
+		/>
+		<DropdownActions
+			v-else
+			:label="t('common.moreActions')"
+			:display-as-ellipsis="true"
+			:actions="galleyManagerStore.itemActions"
+			@action="
+				(actionName) => galleyManagerStore.handleAction(actionName, {galley})
+			"
+		></DropdownActions>
+	</TableCell>
+</template>
+<script setup>
+import {useGalleyManagerStore} from './galleyManagerStore';
+import TableRowRortControls from './TableRowSortControls.vue';
+
+defineProps({
+	galley: {type: Object, required: true},
+});
+
+import TableCell from '@/components/TableNext/TableCell.vue';
+import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
+
+const galleyManagerStore = useGalleyManagerStore();
+</script>

src/managers/GalleyManager/GalleyManagerCellLanguage.vue

@@ -0,0 +1,24 @@
+<template>
+	<TableCell>
+		<span class="text-base-normal">
+			{{ language }}
+		</span>
+	</TableCell>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+
+import {useGalleyManagerStore} from './galleyManagerStore';
+
+const props = defineProps({
+	galley: {type: Object, required: true},
+});
+
+const galleyManagerStore = useGalleyManagerStore();
+
+const language = computed(() => {
+	return galleyManagerStore.submission.metadataLocales[props.galley.locale];
+});
+</script>

src/managers/GalleyManager/GalleyManagerCellName.vue

@@ -0,0 +1,34 @@
+<template>
+	<TableCell>
+		<div class="flex items-center">
+			<Icon :icon="fileIcon" class="h-6 w-6 flex-none text-heading" />
+
+			<span class="ms-2 text-base-normal">
+				<a
+					v-if="galley?.file?.url"
+					class="hover:underline"
+					target="_blank"
+					:href="galley.file.url"
+				>
+					{{ galley.label }}
+				</a>
+				<template v-else>{{ galley.label }}</template>
+			</span>
+		</div>
+	</TableCell>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+import Icon from '@/components/Icon/Icon.vue';
+
+const props = defineProps({galley: {type: Object, required: true}});
+
+const fileIcon = computed(() =>
+	!!pkp.documentTypeIcons &&
+	!!pkp.documentTypeIcons[props.galley?.file?.documentType]
+		? pkp.documentTypeIcons[props.galley?.file?.documentType]
+		: 'DocumentDefault',
+);
+</script>

src/managers/GalleyManager/GalleyManagerSortButton.vue

@@ -0,0 +1,28 @@
+<template>
+	<PkpButton @click="handleAction">{{ buttonLabel }}</PkpButton>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import PkpButton from '@/components/Button/Button.vue';
+import {useGalleyManagerStore} from './galleyManagerStore';
+
+import {useLocalize} from '@/composables/useLocalize';
+const {t} = useLocalize();
+
+const galleyManagerStore = useGalleyManagerStore();
+
+const buttonLabel = computed(() =>
+	galleyManagerStore.sortingEnabled
+		? t('grid.action.saveOrdering')
+		: t('grid.action.order'),
+);
+
+function handleAction() {
+	if (galleyManagerStore.sortingEnabled) {
+		galleyManagerStore.saveSorting();
+	} else {
+		galleyManagerStore.startSorting();
+	}
+}
+</script>