Toggle submitted recordings in sidebar

Author: naglepuff

client/src/components/RecordingList.vue

@@ -7,7 +7,15 @@ import  { EditingRecording } from './UploadRecording.vue';
 export default defineComponent({
   setup() {
 
-    const { sharedList, recordingList, currentUser, configuration } = useState();
+    const {
+      sharedList,
+      recordingList,
+      currentUser,
+      configuration,
+      showSubmittedRecordings,
+      myRecordingsDisplay,
+      sharedRecordingsDisplay,
+    } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
 
     const fetchRecordings = async () => {
@@ -47,18 +55,27 @@ export default defineComponent({
         openPanel,
         userSubmittedAnnotation,
         configuration,
+        myRecordingsDisplay,
+        sharedRecordingsDisplay,
+        showSubmittedRecordings,
      };
   },
 });
 </script>
 
 <template>
   <v-expansion-panels v-model="openPanel">
+    <v-checkbox
+      v-if="configuration.mark_annotations_completed_enabled"
+      v-model="showSubmittedRecordings"
+      label="Show submitted recordings"
+      hide-details
+    />
     <v-expansion-panel>
       <v-expansion-panel-title>My Recordings</v-expansion-panel-title>
       <v-expansion-panel-text>
         <div
-          v-for="item in recordingList"
+          v-for="item in myRecordingsDisplay"
           :key="`public_${item.id}`"
         >
           <v-card class="pa-2 my-2">

client/src/use/useState.ts

@@ -1,4 +1,4 @@
-import { ref, Ref, watch } from "vue";
+import { computed, ref, Ref, watch } from "vue";
 import { useRouter } from 'vue-router';
 import { cloneDeep } from "lodash";
 import * as d3 from "d3";
@@ -160,6 +160,65 @@ export default function useState() {
 
   const showSubmittedRecordings = ref(false);
 
+  const submittedMyRecordings = computed(() => {
+    const submittedByMe = recordingList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length > 0;
+    });
+    return submittedByMe;
+  });
+
+  const submittedSharedRecordings = computed(() => {
+    const submittedByMe = sharedList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length > 0;
+    });
+    return submittedByMe;
+  });
+
+  const unsubmittedMyRecordings = computed(() => {
+    const unsubmitted = recordingList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length === 0;
+    });
+    return unsubmitted;
+  });
+
+  const unsubmittedSharedRecordings = computed(() => {
+    const unsubmitted = sharedList.value.filter((recording: Recording) => {
+      const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
+        annotation.owner === currentUser.value && annotation.submitted
+      ));
+      return myAnnotations.length === 0;
+    });
+    return unsubmitted;
+  });
+
+  // Use state to determine which recordings should be shown to the user
+  const myRecordingsDisplay = computed(() => {
+    if (!configuration.value.mark_annotations_completed_enabled) {
+      return recordingList.value;
+    } else {
+      return showSubmittedRecordings.value ? recordingList.value : unsubmittedMyRecordings.value;
+    }
+  });
+
+  const sharedRecordingsDisplay = computed(() => {
+    if (!configuration.value.mark_annotations_completed_enabled) {
+      return sharedList.value;
+    } else {
+      return showSubmittedRecordings.value ? sharedList.value : unsubmittedSharedRecordings.value;
+    }
+  });
+
+
+
   return {
     annotationState,
     creationType,
@@ -203,5 +262,11 @@ export default function useState() {
     fixedAxes,
     toggleFixedAxes,
     showSubmittedRecordings,
+    submittedMyRecordings,
+    submittedSharedRecordings,
+    unsubmittedMyRecordings,
+    unsubmittedSharedRecordings,
+    myRecordingsDisplay,
+    sharedRecordingsDisplay,
   };
 }

client/src/views/Recordings.vue

@@ -22,13 +22,13 @@ import RecordingAnnotationSummary from '@components/RecordingAnnotationSummary.v
 import { FilterFunction, InternalItem } from 'vuetify';
 
 export default defineComponent({
-    components: {
-        UploadRecording,
-        MapLocation,
-        BatchUploadRecording,
-        RecordingInfoDisplay,
-        RecordingAnnotationSummary,
-    },
+  components: {
+    UploadRecording,
+    MapLocation,
+    BatchUploadRecording,
+    RecordingInfoDisplay,
+    RecordingAnnotationSummary,
+  },
   setup() {
     const itemsPerPage = ref(-1);
     const {
@@ -39,6 +39,10 @@ export default defineComponent({
       configuration,
       loadCurrentUser,
       showSubmittedRecordings,
+      submittedMyRecordings,
+      submittedSharedRecordings,
+      myRecordingsDisplay,
+      sharedRecordingsDisplay,
     } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
     let intervalRef: number | null = null;
@@ -232,46 +236,6 @@ export default defineComponent({
       }
     }
 
-    const submittedMyRecordings = computed(() => {
-      const submittedByMe = recordingList.value.filter((recording: Recording) => {
-        const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
-          annotation.owner === currentUser.value && annotation.submitted
-        ));
-        return myAnnotations.length > 0;
-      });
-      return submittedByMe;
-    });
-
-    const submittedSharedRecordings = computed(() => {
-      const submittedByMe = sharedList.value.filter((recording: Recording) => {
-        const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
-          annotation.owner === currentUser.value && annotation.submitted
-        ));
-        return myAnnotations.length > 0;
-      });
-      return submittedByMe;
-    });
-
-    const unsubmittedMyRecordings = computed(() => {
-      const unsubmitted = recordingList.value.filter((recording: Recording) => {
-        const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
-          annotation.owner === currentUser.value && annotation.submitted
-        ));
-        return myAnnotations.length === 0;
-      });
-      return unsubmitted;
-    });
-
-    const unsubmittedSharedRecordings = computed(() => {
-      const unsubmitted = sharedList.value.filter((recording: Recording) => {
-        const myAnnotations = recording.fileAnnotations.filter((annotation: FileAnnotation) => (
-          annotation.owner === currentUser.value && annotation.submitted
-        ));
-        return myAnnotations.length === 0;
-      });
-      return unsubmitted;
-    });
-
     const recordingListStyles = computed(() => {
       const sectionHeight = configuration.value.mark_annotations_completed_enabled ? '35vh' : '40vh';
       return {
@@ -359,10 +323,10 @@ export default defineComponent({
         configuration,
         submittedMyRecordings,
         submittedSharedRecordings,
-        unsubmittedMyRecordings,
-        unsubmittedSharedRecordings,
         recordingListStyles,
         showSubmittedRecordings,
+        myRecordingsDisplay,
+        sharedRecordingsDisplay,
      };
   },
 });
@@ -436,7 +400,7 @@ export default defineComponent({
       <v-data-table
         v-model:items-per-page="itemsPerPage"
         :headers="headers"
-        :items="showSubmittedRecordings ? recordingList : unsubmittedMyRecordings"
+        :items="myRecordingsDisplay"
         :custom-filter="tagFilter"
         filter-keys="['tag']"
         :search="filterTags.length ? 'seach-active' : ''"
@@ -637,7 +601,7 @@ export default defineComponent({
       <v-data-table
         v-model:items-per-page="itemsPerPage"
         :headers="sharedHeaders"
-        :items="showSubmittedRecordings ? sharedList : unsubmittedSharedRecordings"
+        :items="sharedRecordingsDisplay"
         :custom-filter="sharedTagFilter"
         filter-keys="['tag']"
         :search="sharedFilterTags.length ? 'seach-active' : ''"