feat(locate-features): add screens

Author: frozenhelium

src/components/LocateFeaturesProject.vue

@@ -0,0 +1,244 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+import type {
+  Project,
+  TaskGroup,
+  Tutorial,
+  CustomOption,
+  TutorialTileTask,
+  TileTask,
+} from '@/utils/types'
+import { computed, inject, onMounted, ref, shallowRef, useTemplateRef, watchEffect } from 'vue'
+import { isDefined, isNotDefined, listToMap } from '@togglecorp/fujs'
+
+import createInformationPages from '@/utils/createInformationPages'
+import { createFallbackInformationPages } from '@/utils/domain'
+import LocateFeaturesProjectTask from '@/components/LocateFeaturesProjectTask.vue'
+import LocateFeaturesProjectInstructions from '@/components/LocateFeaturesProjectInstructions.vue'
+import LocateFeaturesProjectTutorial from '@/components/LocateFeaturesProjectTutorial.vue'
+import buildTasks from '@/utils/buildTasks'
+
+import ProjectInfo from './ProjectInfo.vue'
+import ProjectHeader from './ProjectHeader.vue'
+import TaskProgress from './TaskProgress.vue'
+import type { VContainer } from 'vuetify/components'
+
+interface Props {
+  group: TaskGroup
+  first: boolean
+  options: CustomOption[]
+  project: Project
+  tutorial: Tutorial
+  tutorialTasks: TutorialTileTask[]
+  tasks: TileTask[] | undefined
+}
+
+const taskOffset = ref(0)
+const projectInfoRef = useTemplateRef('projectInfo')
+
+const props = defineProps<Props>()
+const taskContainer = shallowRef<VContainer | null>(null)
+
+const logMappingStarted = inject<(projectType: string) => void>('logMappingStarted')
+const saveResults =
+  inject<(results: Record<string, number[]>, startTime: string) => void>('saveResults')
+const arrowKeys = ref(true)
+const startTime = shallowRef<string>()
+const instruction = computed(() =>
+  isDefined(props.project.projectInstruction)
+    ? props.project.projectInstruction
+    : t('validateProject.doesTheShapeOutline', { feature: props.project.lookFor }),
+)
+
+const emit = defineEmits<{ created: [] }>()
+const results = ref<Record<string, number[]>>({})
+const tileSize = ref<number>(1);
+
+const subGridSizeExponent = computed(() => {
+  const subGridSizeToExponentMapping: Record<string, number> = {
+    '2x2': 1,
+    '4x4': 2,
+    '8x8': 3,
+  }
+
+  if ('subGridSize' in props.project && typeof props.project.subGridSize === 'string') {
+    return subGridSizeToExponentMapping[props.project.subGridSize] ?? 1;
+  }
+
+  return 1;
+})
+
+const processedTasks = computed(() => {
+  const tasks = props.tasks?.length ? props.tasks : buildTasks(props.project, props.group)
+
+  const sortedTasks = tasks.sort((a, b) => (a.taskId > b.taskId ? 1 : -1))
+
+  return sortedTasks
+})
+
+watchEffect(() => {
+  results.value = listToMap(
+    processedTasks.value,
+    ({ taskId }) => taskId,
+    () => Array.from(new Array((2 ** subGridSizeExponent.value) ** 2).keys()).map(
+      // FIXME: default value should be the first option value
+      // () => props.options[0].value,
+      () => 0,
+    ),
+  )
+
+  /*
+  selectedTasks.value = listToMap(
+    processedTasks.value,
+    ({ taskId }) => taskId,
+    () => false,
+  )
+  */
+  startTime.value = new Date().toISOString()
+})
+
+const optionMapping = computed(() =>
+  listToMap(
+    props.options,
+    ({ value }) => value,
+  )
+)
+const nextOptionMapping = computed(() =>
+  listToMap(
+    props.options,
+    ({ value }) => value,
+    (_, __, index) => {
+      if (index === props.options.length - 1) {
+        return props.options[0].value
+      }
+
+      return props.options[index + 1].value
+    },
+  ),
+)
+
+
+const currentTask = computed(() => processedTasks.value?.[taskOffset.value] ?? {})
+const currentTaskValue = computed(() => results.value[currentTask.value.taskId]);
+
+onMounted(() => {
+  logMappingStarted?.(props.project.projectType)
+  emit('created')
+})
+
+const isLastTask = computed(() => processedTasks.value.length - 1 === taskOffset.value)
+const currentTaskAnswered = computed(() => isDefined(results.value[currentTask.value.taskId]))
+
+function handleBack() {
+  if (taskOffset.value > 0) {
+    taskOffset.value = taskOffset.value - 1
+  }
+}
+
+function handleForward() {
+  if (taskOffset.value < processedTasks.value.length - 1) {
+    taskOffset.value = taskOffset.value + 1
+  }
+}
+
+function handleTaskValueChange(taskId: string, newValue: number[]) {
+  results.value[taskId] = newValue;
+}
+
+function handleTaskContainerResize() {
+  const el = taskContainer.value?.$el as HTMLDivElement | null;
+  const bcr = el?.getBoundingClientRect();
+
+  if (isNotDefined(bcr)) {
+    return undefined;
+  }
+
+  const { width, height } = bcr;
+  tileSize.value = Math.min(width, height);
+}
+
+</script>
+
+<template>
+  <ProjectHeader :mission="instruction">
+    <ProjectInfo
+      ref="projectInfo"
+      :first="first"
+      :informationPages="createInformationPages(props.tutorial, props.project, createFallbackInformationPages)"
+      :manualUrl="project?.manualUrl"
+      @toggle-dialog="arrowKeys = !arrowKeys"
+    >
+      <template #instructions>
+        <LocateFeaturesProjectInstructions :instruction="instruction" :options="props.options" />
+      </template>
+      <template #tutorial>
+        <LocateFeaturesProjectTutorial
+          :tutorial="tutorial"
+          :tasks="tutorialTasks"
+          :options="options"
+          @tutorialComplete="projectInfoRef?.toggleDialog"
+        />
+      </template>
+    </ProjectInfo>
+  </ProjectHeader>
+  <v-container
+    class="ma-0 pa-0 container"
+    ref="taskContainer"
+    v-resize="handleTaskContainerResize"
+  >
+    <LocateFeaturesProjectTask
+      :v-if="currentTask"
+      :task="currentTask"
+      :subGridSizeExponent="subGridSizeExponent"
+      :value="currentTaskValue"
+      :optionMapping="optionMapping"
+      :nextOptionMapping="nextOptionMapping"
+      :tileSize="tileSize"
+      @onValueChange="handleTaskValueChange"
+    />
+  </v-container>
+  <v-toolbar color="white" density="compact" extension-height="20" extended>
+    <v-spacer />
+    <v-btn
+      :title="$t('findProject.moveLeft')"
+      icon="mdi-chevron-left"
+      color="secondary"
+      :disabled="taskOffset <= 0"
+      @click="handleBack"
+      v-shortkey.once="[arrowKeys ? 'arrowleft' : '']"
+      @shortkey="handleBack"
+    />
+    <v-btn
+      v-if="isDefined(startTime)"
+      :title="$t('projectView.saveResults')"
+      icon="mdi-content-save"
+      color="primary"
+      :disabled="!isLastTask"
+      @click="saveResults?.(results, startTime)"
+    />
+    <v-btn
+      :title="$t('findProject.moveRight')"
+      icon="mdi-chevron-right"
+      color="secondary"
+      :disabled="!currentTaskAnswered || isLastTask"
+      @click="handleForward"
+      v-shortkey.once="[arrowKeys ? 'arrowright' : '']"
+      @shortkey="handleForward"
+    />
+    <v-spacer />
+    <template #extension>
+      <TaskProgress :progress="taskOffset + 1" :total="processedTasks.length" />
+    </template>
+  </v-toolbar>
+</template>
+
+<style scoped>
+.container {
+  height: calc(100vh - 20rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/components/LocateFeaturesProjectInstructions.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import OptionButton from '@/components/OptionButton.vue'
+import type { CustomOption } from '@/utils/types'
+
+interface Props {
+  instruction: string
+  options: CustomOption[]
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <v-card-text>
+    <div class="text-h6">
+      {{ $t('projectInstructions.classifyTitle') }}
+    </div>
+    <div class="text-p">
+      {{ props.instruction }} {{ $t('projectInstructions.classifyInstruction') }}.
+    </div>
+    <v-row v-for="(option, optionIndex) in props.options" :key="optionIndex" align="center" dense>
+      <v-col cols="auto" class="mt-5 mr-4">
+        <option-button :option="option" :only-icon="true" />
+      </v-col>
+      <v-col class="mt-5">{{
+        [option.title, option.description].filter(Boolean).join(': ')
+      }}</v-col>
+    </v-row>
+
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.useButtonsToNavigate') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-chevron-left" color="secondary" class="mr-2" variant="text" />
+          <v-btn icon="mdi-chevron-right" color="secondary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('projectInstructions.move') }}</v-col>
+      </v-row>
+    </div>
+
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.saveYourAnswers') }}</div>
+    <div class="text-p mt-2">
+      <v-row class="align-center" dense>
+        <v-col cols="auto" class="mr-4">
+          <v-btn icon="mdi-content-save" color="primary" variant="text" />
+        </v-col>
+        <v-col>{{ $t('validateProjectInstructions.seenAll') }}</v-col>
+      </v-row>
+    </div>
+    <div class="text-h6 mt-10">{{ $t('projectInstructions.dontWorry') }}</div>
+    <div class="text-p">{{ $t('projectInstructions.everyTaskIsViewedBy') }}.</div>
+  </v-card-text>
+</template>
+
+<style scoped></style>