Add material overview for orphan (unassigned) material items

frontend/src/components/material/MaterialLists.vue

@@ -8,6 +8,29 @@
         <v-icon color="blue-grey lighten-3">mdi-chevron-right</v-icon>
       </v-list-item-icon>
     </v-list-item>
+    <v-list-item
+      v-if="unassignedCount > 0"
+      :to="materialListRoute(camp, '/unassigned', { isDetail: true })"
+      exact-path
+    >
+      <v-list-item-content>
+        <v-list-item-title>
+          <span class="italic">{{
+            $tc('components.material.materialLists.unassigned')
+          }}</span>
+        </v-list-item-title>
+        <v-list-item-subtitle
+          >{{
+            $tc('components.material.materialLists.materialsCount', unassignedCount, {
+              count: unassignedCount,
+            })
+          }}
+        </v-list-item-subtitle>
+      </v-list-item-content>
+      <v-list-item-icon>
+        <v-icon color="blue-grey lighten-3">mdi-chevron-right</v-icon>
+      </v-list-item-icon>
+    </v-list-item>
     <v-skeleton-loader v-if="materialLists._meta.loading" type="list-item@3" />
     <v-list-item
       v-for="materialList in materailListsSorted"
@@ -49,9 +72,23 @@ export default {
     materialLists() {
       return this.camp.materialLists()
     },
+    allMaterialItems() {
+      return this.camp.periods().items.flatMap((period) => period.materialItems().items)
+    },
     materailListsSorted() {
       return materialListsSorted(this.materialLists.allItems)
     },
+    unassignedCount() {
+      if (this.allMaterialItems.length === 0 || this.materialLists._meta.loading) {
+        return 0
+      }
+      return (
+        this.allMaterialItems.length -
+        this.materialLists.items.reduce((sum, list) => {
+          return sum + list.itemCount
+        }, 0)
+      )
+    },
   },
   mounted() {
     this.materialLists.$loadItems()

frontend/src/components/material/useMaterialViewHelper.js

@@ -158,6 +158,7 @@ export function useMaterialViewHelper(camp, list) {
   return {
     collection,
     downloadXlsx,
+    downloadMaterialList,
     openPeriods,
   }
 }

frontend/src/locales/de.json

@@ -314,7 +314,8 @@
       },
       "materialLists": {
         "materialsCount": "Keine Einträge | 1 Eintrag | {count} Einträge",
-        "overview": "Gesamtübersicht"
+        "overview": "Gesamtübersicht",
+        "unassigned": "Nicht zugewiesen"
       },
       "materialTable": {
         "addNewItem": "Eintrag hinzufügen",
@@ -758,6 +759,10 @@
           "download": "Übersicht herunterladen",
           "title": "Gesamtübersicht"
         },
+        "materialUnassigned": {
+          "excelTitle": "nicht zugewiesen",
+          "title": "Nicht zugewiesenes Material"
+        },
         "sideBarMaterialLists": {
           "title": "Materiallisten"
         }

frontend/src/locales/en.json

@@ -314,7 +314,8 @@
       },
       "materialLists": {
         "materialsCount": "No entries | 1 entry | {count} entries",
-        "overview": "General overview"
+        "overview": "General overview",
+        "unassigned": "Not assigned"
       },
       "materialTable": {
         "addNewItem": "Add new item",
@@ -758,6 +759,10 @@
           "download": "Download overview",
           "title": "General overview"
         },
+        "materialUnassigned": {
+          "excelTitle": "unassigned",
+          "title": "Unassigned material"
+        },
         "sideBarMaterialLists": {
           "title": "Material lists"
         }

frontend/src/router.js

@@ -339,6 +339,23 @@ export default new Router({
         }),
       },
     },
+    {
+      name: 'camp/material/unassigned',
+      path: '/camps/:campId/:campShortTitle?/material/unassigned',
+      components: {
+        navigation: NavigationCamp,
+        default: () => import('./views/camp/material/MaterialUnassigned.vue'),
+        aside: () => import('./views/camp/material/SideBarMaterialLists.vue'),
+      },
+      beforeEnter: all([requireAuth, requireCamp]),
+      props: {
+        navigation: (route) => ({ camp: campFromRoute(route) }),
+        aside: (route) => ({ camp: campFromRoute(route) }),
+        default: (route) => ({
+          camp: campFromRoute(route),
+        }),
+      },
+    },
     {
       name: 'camp/overview/checklists/checklist',
       path: '/camps/:campId/:campShortTitle?/overview/checklists/:checklistId/:checklistName?',

frontend/src/scss/tailwind.scss

@@ -43,3 +43,7 @@
 .opacity-60 {
   opacity: 0.6;
 }
+
+.italic {
+  font-style: italic;
+}

frontend/src/views/camp/CampProgram.vue

@@ -44,7 +44,7 @@ Show all activity schedule entries of a single period.
       />
       <v-menu offset-y>
         <template #activator="{ on, attrs }">
-          <v-btn icon v-bind="attrs" v-on="on" data-testid="campprogram-menu">
+          <v-btn icon v-bind="attrs" data-testid="campprogram-menu" v-on="on">
             <v-badge
               v-if="!$vuetify.breakpoint.smAndUp && filteredPropertiesCount > 0"
               overlap

frontend/src/views/camp/material/MaterialUnassigned.vue

@@ -0,0 +1,104 @@
+<template>
+  <v-container fluid>
+    <content-card :title="$tc('views.camp.material.materialUnassigned.title')" toolbar>
+      <template #title-actions>
+        <v-menu offset-y>
+          <template #activator="{ attrs, on }">
+            <v-btn icon v-bind="attrs" v-on="on">
+              <v-icon>mdi-dots-vertical</v-icon>
+            </v-btn>
+          </template>
+          <v-list class="py-0">
+            <v-list-item @click="downloadFilteredXlsx">
+              <v-list-item-icon>
+                <v-icon>mdi-microsoft-excel</v-icon>
+              </v-list-item-icon>
+              <v-list-item-content
+                >{{ $tc('global.button.download') }}
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </template>
+      <v-expansion-panels
+        v-if="filteredCollection.length > 1"
+        v-model="openPeriods"
+        multiple
+        flat
+        accordion
+      >
+        <PeriodMaterialLists
+          v-for="{ period, materialItems } in filteredCollection"
+          :key="period._meta.self"
+          :period="period"
+          :material-item-collection="materialItems"
+        />
+      </v-expansion-panels>
+      <v-card-text v-else-if="filteredCollection.length === 1">
+        <MaterialTable
+          v-for="{ period, materialItems } in filteredCollection"
+          :key="period._meta.self"
+          :camp="camp"
+          :material-item-collection="materialItems"
+          :period="period"
+          disabled
+        />
+      </v-card-text>
+    </content-card>
+  </v-container>
+</template>
+
+<script>
+import ContentCard from '@/components/layout/ContentCard.vue'
+import MaterialTable from '@/components/material/MaterialTable.vue'
+import PeriodMaterialLists from '@/components/material/PeriodMaterialLists.vue'
+import { campRoleMixin } from '@/mixins/campRoleMixin.js'
+import { useMaterialViewHelper } from '@/components/material/useMaterialViewHelper.js'
+
+export default {
+  name: 'MaterialUnassigned',
+  components: {
+    ContentCard,
+    MaterialTable,
+    PeriodMaterialLists,
+  },
+  mixins: [campRoleMixin],
+  props: {
+    camp: { type: Object, required: true },
+  },
+  setup(props) {
+    return useMaterialViewHelper(props.camp, null)
+  },
+  head() {
+    return {
+      title: this.$tc('views.camp.material.materialUnassigned.title'),
+    }
+  },
+  computed: {
+    filteredCollection() {
+      return this.collection.map(({ period, materialItems }) => {
+        return {
+          period,
+          materialItems: {
+            items: materialItems.items.filter((item) => {
+              return item.materialList === null
+            }),
+            _meta: {
+              loading: materialItems._meta.loading,
+            },
+          },
+        }
+      })
+    },
+  },
+  methods: {
+    downloadFilteredXlsx() {
+      this.downloadMaterialList(
+        this.camp,
+        { value: this.filteredCollection },
+        this.$tc('views.camp.material.materialUnassigned.excelTitle')
+      )()
+    },
+  },
+}
+</script>