pkp/pkp-lib#3594 Add multilingual progress to select and options fields

src/components/Form/fields/FieldBase.vue

@@ -138,7 +138,12 @@ export default {
 			if (!this.isMultilingual) {
 				return 0;
 			}
-			return Object.values(this.value).filter((val) => val).length;
+			return Object.values(this.value).filter((val) => {
+				if (Array.isArray(val)) {
+					return val.length;
+				}
+				return val;
+			}).length;
 		},
 	},
 	methods: {

src/components/Form/fields/FieldOptions.vue

@@ -27,6 +27,12 @@
 				/>
 				{{ option.label }}
 			</label>
+			<multilingual-progress v-if="isMultilingual"
+				:id="multilingualProgressId"
+				:count="multilingualFieldsCompleted"
+				:total="locales.length"
+				:i18n="i18n"
+			/>
 		</div>
 	</fieldset>
 </template>
@@ -139,4 +145,8 @@ export default {
 	left: 0;
 	transform: translateY(-50%);
 }
+
+.pkpFormField--options .multilingualProgress {
+	margin-top: @base;
+}
 </style>

src/components/Form/fields/FieldRichTextarea.vue

@@ -108,7 +108,7 @@ export default {
 	border-radius: @radius;
 }
 
-.pkpFormField--richTextarea .MultilingualProgress {
+.pkpFormField--richTextarea .multilingualProgress {
 	padding: @half @base;
 	display: block;
 	border-top: @bg-border;

src/components/Form/fields/FieldSelect.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}">
 			<select
 				class="pkpFormField__input pkpFormField--select__input"
 				v-model="currentValue"
@@ -22,6 +22,12 @@
 			>
 				<option v-for="option in localizedOptions" v-bind="option">{{ option.label }}</option>
 			</select>
+			<multilingual-progress v-if="isMultilingual"
+				:id="multilingualProgressId"
+				:count="multilingualFieldsCompleted"
+				:total="locales.length"
+				:i18n="i18n"
+			/>
 		</div>
 		<div v-if="description"
 			class="pkpFormField__description"
@@ -64,4 +70,50 @@ export default {
   color: transparent;
   text-shadow: 0 0 0 @text;
 }
+
+.pkpFormField__control--isMultilingual .pkpFormField--select__input {
+	padding-left: 3rem;
+}
+
+.pkpFormField--select .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--select__input:hover + .multilingualProgress button {
+	border-color: @shade;
+}
+
+.pkpFormField--select__input:focus + .multilingualProgress button {
+	border-color: @primary;
+}
 </style>

src/components/Form/fields/FieldText.vue

@@ -59,7 +59,7 @@ export default {
 	padding-left: 3rem;
 }
 
-.pkpFormField--text .MultilingualProgress {
+.pkpFormField--text .multilingualProgress {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -93,11 +93,11 @@ export default {
 	}
 }
 
-.pkpFormField--text__input:hover + .MultilingualProgress button {
+.pkpFormField--text__input:hover + .multilingualProgress button {
 	border-color: @shade;
 }
 
-.pkpFormField--text__input:focus + .MultilingualProgress button {
+.pkpFormField--text__input:focus + .multilingualProgress button {
 	border-color: @primary;
 }
 </style>

src/components/MultilingualProgress/MultilingualProgress.vue

@@ -1,5 +1,5 @@
 <template>
-	<span class="MultilingualProgress" :class="classes">
+	<span class="multilingualProgress" :class="classes">
 		<button v-tooltip="tooltip" aria-hidden="true" @click.prevent>
 			<icon icon="globe" />
 		</button>
@@ -38,11 +38,11 @@ export default {
 		classes: function () {
 			let classes = [];
 			if (this.count === this.total) {
-				classes.push('MultilingualProgress--isComplete');
+				classes.push('multilingualProgress--isComplete');
 			} else if (!this.count) {
-				classes.push('MultilingualProgress--isEmpty');
+				classes.push('multilingualProgress--isEmpty');
 			} else {
-				classes.push('MultilingualProgress--isIncomplete');
+				classes.push('multilingualProgress--isIncomplete');
 			}
 			return classes;
 		},
@@ -65,7 +65,7 @@ export default {
 <style lang="less">
 @import '../../styles/_import';
 
-.MultilingualProgress {
+.multilingualProgress {
 	display: inline-block;
 	line-height: @line-sml;
 
@@ -81,15 +81,15 @@ export default {
 	}
 }
 
-.MultilingualProgress--isEmpty .fa {
+.multilingualProgress--isEmpty .fa {
 	color: @text-light;
 }
 
-.MultilingualProgress--isIncomplete .fa {
+.multilingualProgress--isIncomplete .fa {
 	color: @no;
 }
 
-.MultilingualProgress--isComplete .fa {
+.multilingualProgress--isComplete .fa {
 	color: @yes;
 }
 </style>