Improve Identification list view

Author: epou

package-lock.json

@@ -14,12 +14,13 @@
           <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}
           </Message>
         </FormField>
-        <!-- <FormField v-slot="$field" name="isExecutive" :initial-value="false" class="flex ml-auto items-center gap-2">
+        <FormField v-if="$can('change', annotationSubject, 'is_decisive')" v-slot="$field" name="isExecutive"
+          :initial-value="false" class="flex ml-auto items-center gap-2">
           <label>Is executive?</label>
           <ToggleSwitch v-model="isExecutive" :disabled="isFlagged" />
           <Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}
           </Message>
-        </FormField> -->
+        </FormField>
       </div>
 
       <div v-if="isExtended" class="flex flex-col w-full">
@@ -108,6 +109,8 @@ import { ref, watch, computed } from 'vue';
 import { Form } from '@primevue/forms';
 import { useToast } from 'primevue/usetoast';
 
+import { subject } from '@casl/ability';
+
 import type { AssignedObservation, Photo, SimplePhoto, Taxon, AnnotationRequest, AnnotationClassificationRequest, AnnotationFeedbackRequest, AnnotationCharacteristicsRequest } from 'mosquito-alert';
 import { AnnotationType, AnnotationClassificationConfidenceLabel, AnnotationCharacteristicsSex } from 'mosquito-alert';
 
@@ -148,6 +151,18 @@ const props = withDefaults(defineProps<{
   canSetIsExecutive: true
 });
 
+const annotationSubject = computed(() =>
+  subject('Annotation', {
+    observation: {
+      location: {
+        country: {
+          id: props.observation.location.country?.id
+        }
+      }
+    }
+  })
+)
+
 watch(
   selectedSex,
   (newSex) => {

src/components/annotations/AnnotationForm.vue

@@ -0,0 +1,48 @@
+<template>
+  <Button v-if="$can('add', 'Annotation')" label="Start annotating" icon="pi pi-arrow-right" iconPos="right"
+    :loading="isLoading" @click="onStartAnnotationClicked" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router'
+
+import { useToast } from "primevue/usetoast";
+
+import { useAssignmentStore } from '@/stores/assignmentStore';
+
+const router = useRouter()
+const toast = useToast();
+const assignmentStore = useAssignmentStore();
+
+const isLoading = ref<boolean>(false);
+
+const onStartAnnotationClicked = async () => {
+  try {
+    isLoading.value = true;
+    await assignmentStore.fetchNewAssignment();
+  } catch (error) {
+    toast.add(
+      { severity: 'error', summary: 'Error', detail: error, life: 3000 }
+    )
+    return;
+  } finally {
+    isLoading.value = false;
+  }
+
+  const assignment = assignmentStore.assignment
+  if (assignment) {
+    router.push({
+      name: 'annotate_identification_task',
+      params: {
+        observationUuid: assignment.observation.uuid
+      }
+    })
+  } else {
+    toast.add(
+      { severity: 'info', summary: 'Task queue empty', detail: 'No identification tasks available at the moment', life: 3000 }
+    )
+  }
+}
+
+</script>

src/components/annotations/AnnotationStartButton.vue

@@ -2,10 +2,7 @@
   <MultiSelect v-model="selectedCountries" :options="sortedCountries" optionLabel="name_en" :loading="loading"
     display="chip" dropdown-icon="pi pi-plus-circle" filter showClear resetFilterOnClear :maxSelectedLabels="3">
     <template #option="slotProps">
-      <div class="flex items-center gap-2">
-        <i :class="`flag flag-${slotProps.option.iso3_code.toLowerCase()} rounded`" style="width: 24px" />
-        <span>{{ slotProps.option.name_en }}</span>
-      </div>
+      <CountryTag :country="slotProps.option" />
     </template>
   </MultiSelect>
 </template>
@@ -14,17 +11,29 @@
 import { ref, onMounted, computed } from 'vue';
 
 import { useCountryStore } from '@/stores/countryStore';
+import CountryTag from './CountryTag.vue';
 
 import type { Country } from 'mosquito-alert';
 
 const selectedCountries = defineModel<Country[]>();
 
+const props = defineProps<{
+  allowedCountryIds?: number[];
+}>();
+
 const loading = ref<boolean>(false);
 
 const countries = ref<Country[]>();
 const sortedCountries = computed<Country[]>(() => {
   if (!countries.value) return [];
-  return [...countries.value].sort((a, b) => a.name_en.localeCompare(b.name_en));
+
+  let filtered = countries.value;
+
+  if (props.allowedCountryIds?.length) {
+    filtered = filtered.filter(country => props.allowedCountryIds?.includes(country.id));
+  }
+
+  return [...filtered].sort((a, b) => a.name_en.localeCompare(b.name_en));
 })
 
 const countryStore = useCountryStore();
@@ -34,7 +43,7 @@ onMounted(async () => {
 })
 
 async function fetchCountries() {
-  if (!countryStore.countries) {
+  if (countryStore.countries.length === 0) {
     loading.value = true
     await countryStore.fetchCountries();
     loading.value = false

src/components/CountryMultipleSelect.vue renamed to src/components/countries/CountryMultipleSelect.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="flex items-center gap-2">
+    <i :class="`flag flag-${country.iso3_code.toLowerCase()} rounded`" style="width: 24px" />
+    <span>{{ country.name_en }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Country } from 'mosquito-alert';
+
+defineProps<{
+  country: Country
+}>();
+
+
+</script>

src/components/countries/CountryTag.vue

@@ -8,15 +8,12 @@
             image-class="aspect-square object-cover transition-all duration-300 cursor-pointer"
             class="w-full h-full group-hover:brightness-50" />
           <figcaption class="absolute top-2 left-2 text-white rounded-md gap-1">
-            <Tag v-if="item.status" :value="item.status.toUpperCase()" :severity="getStatusSeverity(item.status)" />
+            <IdentificationTaskStatusTag v-if="item.status" :status="item.status" />
           </figcaption>
           <figcaption v-if="item.observation.location.country"
             class="absolute top-2 right-2 rounded-md gap-1 flex flex-col">
-            <div class="text-white bg-black/50 flex gap-1 p-2 rounded-md">
-              <i :class="`flag flag-${item.observation.location.country?.iso3_code.toLowerCase()} rounded`"
-                style="width: 24px" />
-              <span>{{ item.observation.location.country?.name_en }}</span>
-            </div>
+            <CountryTag v-if="item.observation.location.country" :country="item.observation.location.country"
+              class="text-white bg-black/50 rounded-md p-2" />
             <div class="gap-1 flex justify-end">
               <Tag v-if="item.is_flagged" icon="pi pi-flag" severity="danger" />
               <Tag v-if="item.is_safe" icon="pi pi-shield" severity="success" />
@@ -26,7 +23,7 @@
 
           </figcaption>
           <figcaption v-if="item.result.source" class="absolute bottom-2 left-2">
-            <TaxonClassificationTag class="bg-white/80!" :classification="item.result" />
+            <IdentificationTaskResultTag class="bg-white/80!" :result="item.result" />
           </figcaption>
         </figure>
       </router-link>
@@ -38,8 +35,10 @@
 <script setup lang="ts">
 
 import type { IdentificationTask } from 'mosquito-alert';
-import { getStatusSeverity } from '@/utils/IdentificationTaskUtils';
-import TaxonClassificationTag from './taxa/TaxonClassificationTag.vue';
+
+import CountryTag from '@/components/countries/CountryTag.vue';
+import IdentificationTaskStatusTag from '@/components/identificationTasks/IdentificationTaskStatusTag.vue';
+import IdentificationTaskResultTag from '@/components/identificationTasks/IdentificationTaskResultTag.vue';
 
 defineProps<{
   tasks: IdentificationTask[]

src/components/IdentificationTaskGrid.vue renamed to src/components/identificationTasks/IdentificationTaskGrid.vue

@@ -1,28 +1,34 @@
 <template>
   <DataTable :value="tasks" ref="dt" stripedRows :loading="loading" data-key="observation.uuid" row-hover
     selectionMode="single" @rowClick="goToAnnotation">
-    <template #header>
+    <!-- <template #header>
       <div style="text-align:left">
         <MultiSelect id="column_select" :modelValue="selectedColumns" :options="columns" optionLabel="header"
           @update:modelValue="onSelectColumn" display="chip" :maxSelectedLabels="0" filter selectedItemsLabel="Columns"
           placeholder="Columns" />
       </div>
-    </template>
+    </template> -->
     <Column field="observation.uuid" header="UUID" />
+    <Column header="Status">
+      <template #body="slotProps">
+        <IdentificationTaskStatusTag :status="slotProps.data.status" />
+      </template>
+    </Column>
     <Column header="Image">
       <template #body="slotProps">
         <Image :src="`${slotProps.data.public_photo.url}`" preview
           imageClass="aspect-square object-cover rounded w-16" />
       </template>
     </Column>
-
+    <Column header="Taxon">
+      <template #body="slotProps">
+        <IdentificationTaskResultTag :result="slotProps.data.result" />
+      </template>
+    </Column>
     <Column header="Country">
       <template #body="slotProps">
-        <div class="flex items-center gap-2">
-          <i :class="`flag flag-${slotProps.data.observation.location.country?.iso3_code.toLowerCase()} rounded`"
-            style="width: 24px" />
-          <span>{{ slotProps.data.observation.location.country?.name_en }}</span>
-        </div>
+        <CountryTag v-if="slotProps.data.observation.location.country"
+          :country="slotProps.data.observation.location.country" />
       </template>
     </Column>
     <Column header="Assignations">
@@ -43,17 +49,12 @@
     <Column field="is_safe" header="Is Safe" dataType="boolean" style="min-width: 6rem">
       <template #body="slotProps">
         <i v-if='slotProps.data.is_safe' class="pi pi-shield text-green-500" />
-
       </template>
     </Column>
-    <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header"
+    <!-- <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header"
       :key="col.field + '_' + index">
-    </Column>
-    <Column header="Status">
-      <template #body="slotProps">
-        <Tag :value="slotProps.data.status.toUpperCase()" :severity="getStatusSeverity(slotProps.data.status)" />
-      </template>
-    </Column>
+    </Column> -->
+
     <Column header="Created at">
       <template #body="slotProps">
         {{ formatLocalDateTime(slotProps.data.created_at) }}
@@ -77,9 +78,11 @@ import type { DataTableRowClickEvent } from 'primevue';
 
 import type { IdentificationTask } from 'mosquito-alert';
 
-import UserAvatar from './users/UserAvatar.vue';
+import CountryTag from '@/components/countries/CountryTag.vue';
+import IdentificationTaskStatusTag from '@/components/identificationTasks/IdentificationTaskStatusTag.vue';
+import IdentificationTaskResultTag from '@/components/identificationTasks/IdentificationTaskResultTag.vue';
+import UserAvatar from '@/components/users/UserAvatar.vue';
 
-import { getStatusSeverity } from '@/utils/IdentificationTaskUtils';
 import { formatLocalDateTime } from '@/utils/DateUtils';
 
 defineProps<{

src/components/IdentificationTaskList.vue renamed to src/components/identificationTasks/IdentificationTaskList.vue

@@ -1,15 +1,13 @@
 <template>
-  <div class="relative">
-    <TaxonClassificationTag :classification="result || null" />
+  <TaxonClassificationTag :classification="result || null">
     <div v-if="result.source"
-      class="flex absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 origin-[100%_0%] m-0 outline-2 outline-solid outline-white bg-white justify-items-center items-center p-1 rounded-full">
+      class="flex absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 origin-[100%_0%] m-0 outline-2 outline-solid outline-white text-surface-900 bg-white justify-items-center items-center p-1 rounded-full">
       <i v-if='result.source === IdentificationTaskResultSource.Ai' class="pi pi-microchip-ai"
         v-tooltip.right="'From artificial intelligence'" />
       <i v-if='result.source === IdentificationTaskResultSource.Expert' class="pi pi-users"
         v-tooltip.right="'From experts agreement'" />
     </div>
-  </div>
-
+  </TaxonClassificationTag>
 </template>
 
 <script setup lang="ts">

src/components/IdentificationTaskResultTag.vue renamed to src/components/identificationTasks/IdentificationTaskResultTag.vue

@@ -0,0 +1,25 @@
+<template>
+  <MultiSelect v-model="selectedIdentificationTaskResultSource" display="chip" :options="options" optionValue="value"
+    optionLabel="label" data-key="value" :maxSelectedLabels="3" dropdown-icon="pi pi-plus-circle" filter showClear
+    resetFilterOnClear>
+    <template #option="slotProps">
+      <div class="flex items-center gap-2">
+        <i :class="slotProps.option.icon"></i>
+        <span>{{ slotProps.option.label }}</span>
+      </div>
+    </template>
+  </MultiSelect>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IdentificationTaskResultSource } from 'mosquito-alert';
+
+const selectedIdentificationTaskResultSource = defineModel<IdentificationTaskResultSource[]>();
+
+const options = ref<Array<{ value: IdentificationTaskResultSource; label: string; icon: string }>>([
+  { value: IdentificationTaskResultSource.Expert, label: 'Expert community', icon: 'pi pi-users' },
+  { value: IdentificationTaskResultSource.Ai, label: 'Artificial Intelligence', icon: 'pi pi-microchip-ai' },
+]);
+
+</script>

src/components/identificationTasks/IdentificationTaskSourceMultiSelect.vue

@@ -0,0 +1,28 @@
+<template>
+  <MultiSelect id="status_filter" v-model="selectedIdentificationTaskStatus" display="chip" :options="options"
+    optionValue="value" optionLabel="label" data-key="value" :maxSelectedLabels="3" dropdown-icon="pi pi-plus-circle"
+    filter showClear resetFilterOnClear>
+    <template #option="slotProps">
+      <div class="flex items-center">
+        <IdentificationTaskStatusTag :status="slotProps.option.value" />
+      </div>
+    </template>
+  </MultiSelect>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IdentificationTaskStatus } from 'mosquito-alert';
+import IdentificationTaskStatusTag from './IdentificationTaskStatusTag.vue';
+
+const selectedIdentificationTaskStatus = defineModel<IdentificationTaskStatus[]>();
+
+const options = ref<Array<{ value: IdentificationTaskStatus; label: string }>>([
+  { value: IdentificationTaskStatus.Open, label: 'Open' },
+  { value: IdentificationTaskStatus.Conflict, label: 'Conflict' },
+  { value: IdentificationTaskStatus.Review, label: 'Review' },
+  { value: IdentificationTaskStatus.Done, label: 'Done' },
+  { value: IdentificationTaskStatus.Archived, label: 'Archived' },
+]);
+
+</script>