feat: show project type on project cards

- add project type tag to cards in ProjectsView
- make project card images cover their container
- rename "LocateFeatures" project type to "Locate Objects"
- sort answer options inside LocateFeaturesProject instead of ProjectView

Author: frozenhelium

src/components/LocateFeaturesProject.vue

@@ -11,7 +11,7 @@ import type {
   TileTask,
 } from '@/utils/types'
 import { computed, inject, onMounted, ref, shallowRef, useTemplateRef, watchEffect } from 'vue'
-import { isDefined, isNotDefined, listToMap } from '@togglecorp/fujs'
+import { compareNumber, isDefined, isNotDefined, listToMap } from '@togglecorp/fujs'
 
 import createInformationPages from '@/utils/createInformationPages'
 import { createFallbackInformationPages } from '@/utils/domain'
@@ -42,6 +42,8 @@ const projectInfoRef = useTemplateRef('projectInfo')
 const props = defineProps<Props>()
 const taskContainer = shallowRef<VContainer | null>(null)
 
+const options = computed(() => [...props.options ?? []].sort((a, b) => compareNumber(a.value, b.value)))
+
 const logMappingStarted = inject<(projectType: string) => void>('logMappingStarted')
 const saveResults =
   inject<(results: Record<string, number[]>, startTime: string) => void>('saveResults')
@@ -92,7 +94,7 @@ watchEffect(() => {
     processedTasks.value,
     ({ taskId }) => taskId,
     () => Array.from(new Array(numSubGridElements.value).keys()).map(
-      () => props.options[0].value,
+      () => options.value[0].value,
     ),
   )
 
@@ -107,20 +109,20 @@ watchEffect(() => {
 
 const optionMapping = computed(() =>
   listToMap(
-    props.options,
+    options.value,
     ({ value }) => value,
   )
 )
 const nextOptionMapping = computed(() =>
   listToMap(
-    props.options,
+    options.value,
     ({ value }) => value,
     (_, __, index) => {
-      if (index === props.options.length - 1) {
-        return props.options[0].value
+      if (index === options.value.length - 1) {
+        return options.value[0].value
       }
 
-      return props.options[index + 1].value
+      return options.value[index + 1].value
     },
   ),
 )
@@ -223,7 +225,7 @@ function handleSelectAll() {
       <template #instructions>
         <LocateFeaturesProjectInstructions
           :instruction="instruction"
-          :options="props.options"
+          :options="options"
           :exampleTileUrl="processedTasks[0].url"
         />
       </template>

src/config/projectTypes.ts

@@ -28,7 +28,7 @@ const projectTypes = {
     component: 'streetProject',
   },
   '9': {
-    name: 'LocateFeatures',
+    name: 'Locate Objects',
     component: 'locateFeaturesProject',
   },
   '10': {

src/views/ProjectView.vue

@@ -27,7 +27,6 @@ import ValidateImageProject from '@/components/ValidateImageProject.vue'
 import LocateFeaturesProject from '@/components/LocateFeaturesProject.vue'
 import projectTypes from '@/config/projectTypes'
 import { decompressTasks } from '@/utils/tasks'
-import { compareNumber } from '@togglecorp/fujs'
 
 export default defineComponent({
   components: {
@@ -118,10 +117,7 @@ export default defineComponent({
   computed: {
     ...mapStores(useCurrentUserStore),
     options() {
-      const optionsTemp = this.project?.customOptions ?? this.project?.answerLabels;
-      const options = optionsTemp
-        ? [...optionsTemp].sort((a, b) => compareNumber(a.value, b.value))
-        : undefined;
+      const options = this.project?.customOptions ?? this.project?.answerLabels;
       const completedOptions = options?.map(this.completeOptions)
       return completedOptions
     },

src/views/ProjectsView.vue

@@ -21,6 +21,7 @@ export default defineComponent({
     currentProject: null,
     selectedItems: projectFilters.map((f) => f.defaultItems),
     showFilterCard: false,
+    projectTypes: projectTypes,
   }),
   computed: {
     ...mapStores(useCurrentUserStore),
@@ -210,10 +211,15 @@ export default defineComponent({
               width="350"
               tile
             >
+              <div class="project-type-tag">
+                {{ projectTypes[project.projectType].name }}
+              </div>
               <v-img
+                class="cover-image"
                 height="250"
                 :src="project.image"
                 @error="() => (project.image = fallbackImage)"
+                cover
               />
               <v-card-title class="text-wrap">{{ project.projectTopic }}</v-card-title>
               <v-card-text>
@@ -257,3 +263,20 @@ export default defineComponent({
     </v-row>
   </basic-page>
 </template>
+<style scoped>
+.project-type-tag {
+  position: absolute;
+  left: 0.5rem;
+  top: 0.5rem;
+  background-color: white;
+  z-index: 1;
+  font-size: 0.75rem;
+  padding: 0.125rem 0.75rem;
+  border-radius: 0.75rem;
+  border: 1px solid rgba(0, 0, 0, .1);
+}
+
+.cover-image {
+  background-color: #999;
+}
+</style>