pkp/pkp-lib#3594 Indicate progress in multilingual fields

NateWr · Jun 1, 2018 · fba37d9 · fba37d9
1 parent e1b3f11
commit fba37d9
Show file tree

Hide file tree

Showing 17 changed files with 419 additions and 100 deletions.
diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
@@ -130,7 +130,15 @@ export default {
 		 * }}
 		 */
 		fieldChanged: function (data) {
-			console.log('field changed', data);
+			this.fields.forEach((field) => {
+				if (field.name === data.name) {
+					if (data.localeKey) {
+						field.value[data.localeKey] = data.value;
+					} else {
+						field.value = data.value;
+					}
+				}
+			});
 		},
 
 		/**

diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
@@ -14,6 +14,7 @@
 								v-bind="field"
 								:localeKey="locale.key"
 								:formId="formId"
+								:locales="availableLocales"
 								:i18n="i18n"
 								@change="fieldChanged"
 							></component>

diff --git a/src/components/Form/fields/FieldBase.vue b/src/components/Form/fields/FieldBase.vue
@@ -2,13 +2,15 @@
 import FormFieldLabel from '../FormFieldLabel';
 import HelpButton from '@/components/HelpButton/HelpButton';
 import Tooltip from '@/components/Tooltip/Tooltip';
+import MultilingualProgress from '@/components/MultilingualProgress/MultilingualProgress';
 
 export default {
 	name: 'FieldBase',
 	components: {
 		FormFieldLabel,
 		HelpButton,
 		Tooltip,
+		MultilingualProgress,
 	},
 	props: {
 		name: String,
@@ -23,6 +25,7 @@ export default {
 		isRequired: Boolean,
 		validateAs: String,
 		localeKey: String,
+		locales: Array,
 		value: {
 			type: [String, Number, Object, Array, Boolean],
 			default: '',
@@ -90,6 +93,15 @@ export default {
 			return [this.formId, this.name, 'description'].join('-');
 		},
 
+		/**
+		 * A unique id for the field's multilingual progress indicator
+		 *
+		 * @return string
+		 */
+		multilingualProgressId: function () {
+			return [this.formId, this.name, 'multingualProgress'].join('-');
+		},
+
 		/**
 		 * IDs of the elements which describe this field.
 		 *
@@ -108,8 +120,26 @@ export default {
 			if (this.helpTopic) {
 				ids.push(this.describedByHelpId);
 			}
+			if (this.isMultilingual) {
+				ids.push(this.multilingualProgressId);
+			}
 			return ids.length ? ids.join(' ') : false;
 		},
+
+		/**
+		 * Count of multilingual fields completed
+		 *
+		 * If this is a multilingual field, it will return the number of locales
+		 * with values. Otherwise it will return 0.
+		 *
+		 * @return Number
+		 */
+		multilingualFieldsCompleted: function () {
+			if (!this.isMultilingual) {
+				return 0;
+			}
+			return Object.values(this.value).filter((val) => val).length;
+		},
 	},
 	methods: {
 		/**
@@ -151,6 +181,7 @@ export default {
 }
 
 .pkpFormField__control {
+	position: relative;
 	margin-top: 0.25rem;
 }
 

diff --git a/src/components/Form/fields/FieldText.vue b/src/components/Form/fields/FieldText.vue
@@ -11,7 +11,7 @@
 			<span class="-screenReader" :id="describedByTooltipId" v-html="tooltip" />
 			<help-button v-if="helpTopic" :id="describedByHelpId" :topic="helpTopic" :label="i18n.help" />
 		</div>
-		<div class="pkpFormField__control">
+		<div class="pkpFormField__control" :class="{'pkpFormField__control--isMultilingual': isMultilingual}">
 			<input
 				class="pkpFormField__input pkpFormField--text__input"
 				v-model="currentValue"
@@ -21,6 +21,12 @@
 				:aria-describedby="describedByIds"
 				:required="isRequired"
 			/>
+			<multilingual-progress v-if="isMultilingual"
+				:id="multilingualProgressId"
+				:count="multilingualFieldsCompleted"
+				:total="locales.length"
+				:i18n="i18n"
+			/>
 		</div>
 		<div v-if="description"
 			class="pkpFormField__description"
@@ -48,4 +54,50 @@ export default {
 .pkpFormField--text__input {
 	width: 20em;
 }
+
+.pkpFormField__control--isMultilingual .pkpFormField--text__input {
+	padding-left: 3rem;
+}
+
+.pkpFormField--text .MultilingualProgress {
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	button {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		width: 2.5rem;
+		height: 2.5rem;
+		border: 1px solid transparent;
+		border-right: @bg-border;
+
+		&:focus {
+			outline: 0;
+			border-color: @primary;
+			box-shadow: 0 3px 0 @primary;
+
+			.fa {
+				color: @primary;
+			}
+		}
+	}
+
+	.fa {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+}
+
+.pkpFormField--text__input:hover + .MultilingualProgress button {
+	border-color: @shade;
+}
+
+.pkpFormField--text__input:focus + .MultilingualProgress button {
+	border-color: @primary;
+}
 </style>
diff --git a/src/components/MultilingualProgress/MultilingualProgress.vue b/src/components/MultilingualProgress/MultilingualProgress.vue
@@ -0,0 +1,95 @@
+<template>
+	<span class="MultilingualProgress" :class="classes">
+		<button v-tooltip="tooltip" aria-hidden="true" @click.prevent>
+			<icon icon="globe" />
+		</button>
+		<span class="-screenReader">{{ tooltip }}</span>
+	</span>
+</template>
+
+<script>
+import Icon from '@/components/Icon/Icon';
+
+export default {
+	name: 'MultilingualProgress',
+	components: {
+		Icon,
+	},
+	props: {
+		count: {
+			type: Number,
+			required: true,
+		},
+		total: {
+			type: Number,
+			required: true,
+		},
+		i18n: {
+			type: Object,
+			required: true,
+		},
+	},
+	computed: {
+		/**
+		 * Classes to add to the wrapper element
+		 *
+		 * @return Array
+		 */
+		classes: function () {
+			let classes = [];
+			if (this.count === this.total) {
+				classes.push('MultilingualProgress--isComplete');
+			} else if (!this.count) {
+				classes.push('MultilingualProgress--isEmpty');
+			} else {
+				classes.push('MultilingualProgress--isIncomplete');
+			}
+			return classes;
+		},
+
+		/**
+		 * Tooltip
+		 *
+		 * @return string
+		 */
+		tooltip: function () {
+			return this.__('multilingualProgress', {
+				count: this.count,
+				total: this.total,
+			});
+		},
+	},
+};
+</script>
+
+<style lang="less">
+@import '../../styles/_import';
+
+.MultilingualProgress {
+	display: inline-block;
+	line-height: @line-sml;
+
+	button {
+		border: none;
+		background: none;
+		padding: 0;
+		cursor: pointer;
+	}
+
+	.fa {
+		font-size: @line-sml;
+	}
+}
+
+.MultilingualProgress--isEmpty .fa {
+	color: @text-light;
+}
+
+.MultilingualProgress--isIncomplete .fa {
+	color: @no;
+}
+
+.MultilingualProgress--isComplete .fa {
+	color: @yes;
+}
+</style>
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
@@ -36,102 +36,4 @@ export default {
 	background: transparent;
 	cursor: pointer;
 }
-
-.tooltip {
-  display: block !important;
-  z-index: 1;
-
-  .tooltip-inner {
-		padding: @half;
-		width: auto;
-		max-width: 320px;
-		background: @text;
-		border-radius: @radius;
-		color: @lift;
-		font-size: @font-tiny;
-		line-height: @line-tiny;
-  }
-
-  .tooltip-arrow {
-		position: absolute;
-		margin: 5px;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-color: black;
-    z-index: 1;
-  }
-
-  &[x-placement^="top"] {
-    margin-bottom: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    margin-top: 5px;
-
-    .tooltip-arrow {
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="right"] {
-    margin-left: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[x-placement^="left"] {
-    margin-right: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity .15s, visibility .15s;
-  }
-
-  &[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity .15s;
-  }
-}
 </style>
diff --git a/src/docs/examples.js b/src/docs/examples.js
@@ -12,6 +12,8 @@ import ViewList from './examples/List/ViewList.vue';
 import ViewListRaw from '!!raw-loader!./examples/List/ViewList.vue';
 import ListPanel from '@/components/ListPanel/ListPanel.vue';
 import ListPanelRaw from '!!raw-loader!@/components/ListPanel/ListPanel.vue';
+import ViewMultilingualProgress from './examples/MultilingualProgress/ViewMultilingualProgress.vue';
+import MultilingualProgressRaw from '!!raw-loader!@/components/MultilingualProgress/MultilingualProgress.vue';
 import SelectListPanel from '@/components/SelectListPanel/SelectListPanel.vue';
 import SelectListPanelRaw from '!!raw-loader!@/components/SelectListPanel/SelectListPanel.vue';
 import ViewTooltip from './examples/Tooltip/ViewTooltip.vue';
@@ -60,6 +62,12 @@ export default {
 		label: 'ListPanel',
 		url: '/components/ListPanel',
 	},
+	MultilingualProgress: {
+		component: ViewMultilingualProgress,
+		componentRaw: MultilingualProgressRaw,
+		label: 'MultilingualProgress',
+		url: '/components/MultilingualProgress',
+	},
 	SelectListPanel: {
 		component: SelectListPanel,
 		componentRaw: SelectListPanelRaw,