Merge pull request #79 from mapswipe/feature/project-instruction

Author: tnagorra

package.json

@@ -2,6 +2,7 @@
   "name": "mapswipe-web",
   "version": "0.2.8",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",

src/components/CompareProject.vue

@@ -28,6 +28,7 @@ interface ProjectCompareType {
   }
   credits: string
   lookFor: string
+  projectInstruction: string
 }
 
 const defaultOptions: Option[] = [
@@ -146,7 +147,9 @@ export default defineComponent({
       return attribution.join('; ')
     },
     mission() {
-      const message = this.$t('projectView.youAreLookingFor', { lookFor: this.project.lookFor })
+      const message = isDefined(this.project.projectInstruction)
+        ? this.project.projectInstruction
+        : this.$t('projectView.youAreLookingFor', { lookFor: this.project.lookFor })
       return message
     },
   },

src/components/CompareProjectTutorial.vue

@@ -18,6 +18,7 @@ export interface Tutorial {
   projectId: string
   name: string
   lookFor?: string
+  projectInstruction?: string
   screens: {
     hint: Screen
     instructions: Screen
@@ -58,7 +59,9 @@ export default defineComponent({
   },
   computed: {
     mission() {
-      const message = this.$t('projectView.youAreLookingFor', { lookFor: this.tutorial.lookFor })
+      const message = isDefined(this.tutorial?.projectInstruction)
+        ? this.tutorial.projectInstruction
+        : this.$t('projectView.youAreLookingFor', { lookFor: this.tutorial?.lookFor })
       return message
     },
     currentScreen() {

src/components/CompletenessProject.vue

@@ -58,7 +58,9 @@ const debounceTimeoutRef = shallowRef();
 const startTime = shallowRef<string>();
 
 const instruction = computed(
-  () => t('projectView.youAreLookingFor', { lookFor: props.project.lookFor })
+  () => isDefined(props.project.projectInstruction)
+    ? props.project.projectInstruction
+    : t('projectView.youAreLookingFor', { lookFor: props.project.lookFor })
 );
 
 const numSelectedTasks = computed(() => Object.values(selectedTasks.value).filter(Boolean).length);

src/components/CompletenessProjectTutorial.vue

@@ -42,7 +42,9 @@ const optionMap = computed(() => {
 });
 
 const instruction = computed(
-  () => t('projectView.youAreLookingFor', { lookFor: props.tutorial.lookFor })
+  () => isDefined(props.tutorial.projectInstruction)
+    ? props.tutorial.projectInstruction
+    : t('projectView.youAreLookingFor', { lookFor: props.tutorial.lookFor })
 );
 
 const currentScreen = computed(() => (

src/components/FindProjectTutorial.vue

@@ -27,6 +27,7 @@ export interface Tutorial {
   projectId: string
   name: string
   lookFor?: string
+  projectInstruction?: string
   screens: {
     hint: Screen
     instructions: Screen
@@ -86,7 +87,9 @@ export default defineComponent({
         )
     },
     mission() {
-      const message = this.$t('projectView.youAreLookingFor', { lookFor: this.tutorial.lookFor })
+      const message = isDefined(this.tutorial?.projectInstruction) 
+        ? this.tutorial.projectInstruction
+        : this.$t('projectView.youAreLookingFor', { lookFor: this.tutorial.lookFor })
       return message
     },
     currentScreen() {

src/components/MediaProject.vue

@@ -6,6 +6,7 @@ import ProjectHeader from './ProjectHeader.vue'
 import ProjectInfo from './ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import MediaProjectInstructions from './MediaProjectInstructions.vue'
+import { isDefined } from '@togglecorp/fujs'
 
 export default defineComponent({
   components: {
@@ -86,7 +87,9 @@ export default defineComponent({
       return attribution
     },
     mission() {
-      const message = this.project?.lookFor
+      const message = isDefined(this.project?.projectInstruction)
+        ? this.project.projectInstruction
+        : this.project?.lookFor
       return message
     },
     isImageTask() {

src/components/StreetProject.vue

@@ -8,6 +8,7 @@ import ProjectInfo from './ProjectInfo.vue'
 import TaskProgress from '@/components/TaskProgress.vue'
 import StreetProjectInstructions from './StreetProjectInstructions.vue'
 import { defineComponent } from 'vue'
+import { isDefined } from '@togglecorp/fujs'
 
 export default defineComponent({
   components: {
@@ -94,7 +95,9 @@ export default defineComponent({
   },
   computed: {
     mission() {
-      const message = this.$t('projectView.youAreLookingFor', { lookFor: this.project.lookFor })
+      const message = isDefined(this.project.projectInstruction)
+        ? this.project.projectInstruction
+        : this.$t('projectView.youAreLookingFor', { lookFor: this.project.lookFor })
       return message
     },
   },

src/components/ValidateImageProject.vue

@@ -63,7 +63,9 @@ const saveResults = inject<(results: Record<string, number>, startTime: string)
 const arrowKeys = ref(true);
 const startTime = shallowRef<string>();
 const instruction = computed(
-  () => t('validateProject.doesTheShapeOutline', { feature: props.project.lookFor })
+  () => isDefined(props.project.projectInstruction)
+    ? props.project.projectInstruction
+    : t('validateProject.doesTheShapeOutline', { feature: props.project.lookFor })
 );
 
 const emit = defineEmits<{ created: []}>();

src/components/ValidateImageProjectTutorial.vue

@@ -25,7 +25,9 @@ const answersRevealed = ref(false);
 const results = ref<Record<string, number>>({});
 
 const instruction = computed(
-  () => t('validateProject.doesTheShapeOutline', { feature: props.tutorial.lookFor })
+  () => isDefined(props.tutorial.projectInstruction)
+    ? props.tutorial.projectInstruction
+    : t('validateProject.doesTheShapeOutline', { feature: props.tutorial.lookFor })
 );
 
 const hasTasks = computed(() => isDefined(props.tasks) && props.tasks.length !== 0);