Merge pull request #5535 from pmattmann/feature/list-orders

Sort campCollaboration- & MaterialList-List

common/helpers/__tests__/materialListsSorted.spec.js

@@ -0,0 +1,21 @@
+import materialListsSorted from '../materialListsSorted.js'
+
+describe('materialListsSorted', () => {
+  const list1 = { campCollaboration: '1a2b3c4d', name: 'B2-name' }
+  const list2 = { campCollaboration: '1a2b3c4d', name: 'b1-name' }
+  const list3 = { campCollaboration: '1a2b3c4d', name: 'a3-name' }
+  const list4 = { campCollaboration: null, name: 'B2-name' }
+  const list5 = { campCollaboration: null, name: 'b1-name' }
+  const list6 = { campCollaboration: null, name: 'a3-name' }
+
+  it('sorts Non-User bevor User-Lists, then alphabetically', () => {
+    expect(materialListsSorted([list1, list2, list3, list4, list5, list6])).toEqual([
+      list6,
+      list5,
+      list4,
+      list3,
+      list2,
+      list1,
+    ])
+  })
+})

common/helpers/materialListsSorted.js

@@ -0,0 +1,10 @@
+import { sortBy } from 'lodash'
+
+export default function (materialLists) {
+  return sortBy(
+    materialLists,
+    (list) =>
+      (list.campCollaboration == null ? 'NonUserList_' : 'UserList_') +
+      list.name.toLowerCase()
+  )
+}

frontend/src/components/activity/ActivityResponsibles.vue

@@ -65,21 +65,24 @@ export default {
       )
     },
     availableCampCollaborations() {
-      return this.campCollaborations.items
-        .filter((cc) => {
-          return (
-            cc.status !== 'inactive' ||
-            this.currentCampCollaborationIRIs.includes(cc._meta.self)
-          )
-        })
-        .map((value) => {
-          // following structure is defined by vuetify v-select items property
-          return {
-            value: value._meta.self,
-            campCollaboration: value,
-            text: campCollaborationDisplayName(value, this.$tc.bind(this)),
-          }
-        })
+      return sortBy(
+        this.campCollaborations.items
+          .filter((cc) => {
+            return (
+              cc.status !== 'inactive' ||
+              this.currentCampCollaborationIRIs.includes(cc._meta.self)
+            )
+          })
+          .map((value) => {
+            // following structure is defined by vuetify v-select items property
+            return {
+              value: value._meta.self,
+              campCollaboration: value,
+              text: campCollaborationDisplayName(value, this.$tc.bind(this)),
+            }
+          }),
+        (value) => value.text.toLowerCase()
+      )
     },
     currentCampCollaborationIRIs() {
       return this.activityResponsibles.items.map(

frontend/src/components/collaborator/CollaboratorList.vue

@@ -19,6 +19,8 @@
 <script>
 import CollaboratorEdit from '@/components/collaborator/CollaboratorEdit.vue'
 import CollaboratorListItem from '@/components/collaborator/CollaboratorListItem.vue'
+import { sortBy } from 'lodash'
+import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
 
 const ROLE_ORDER = ['manager', 'member', 'guest']
 
@@ -35,8 +37,11 @@ export default {
   },
   computed: {
     sortedCollaborators() {
-      return [...this.collaborators].sort(
-        (a, b) => ROLE_ORDER.indexOf(a.role) - ROLE_ORDER.indexOf(b.role)
+      return sortBy(
+        [...this.collaborators],
+        (c) =>
+          String(ROLE_ORDER.indexOf(c.role)).padStart(3, '0') +
+          campCollaborationDisplayName(c, this.$tc.bind(this)).toLowerCase()
       )
     },
   },

frontend/src/components/material/MaterialCreateItem.vue

@@ -1,6 +1,6 @@
 <template>
   <ValidationObserver
-    v-if="materialLists.length > 0"
+    v-if="materialListsSorted.length > 0"
     ref="validation"
     tag="tr"
     class="newItemRow"
@@ -33,7 +33,7 @@
         dense
         vee-rules="required"
         :label="$tc('entity.materialList.name')"
-        :items="materialLists"
+        :items="materialListsSorted"
       />
     </td>
     <td class="pt-1">
@@ -60,6 +60,7 @@
 import { campRoute } from '@/router.js'
 import { ValidationObserver } from 'vee-validate'
 import ButtonAdd from '@/components/buttons/ButtonAdd.vue'
+import materialListsSorted from '@/common/helpers/materialListsSorted.js'
 
 export default {
   name: 'MaterialCreateItem',
@@ -83,8 +84,8 @@ export default {
     }
   },
   computed: {
-    materialLists() {
-      return this.camp.materialLists().items.map((list) => ({
+    materialListsSorted() {
+      return materialListsSorted(this.camp.materialLists().items).map((list) => ({
         value: list._meta.self,
         text: list.name,
       }))

frontend/src/components/material/MaterialLists.vue

@@ -10,7 +10,7 @@
     </v-list-item>
     <v-skeleton-loader v-if="materialLists._meta.loading" type="list-item@3" />
     <v-list-item
-      v-for="materialList in materialLists.allItems"
+      v-for="materialList in materailListsSorted"
       :key="materialList._meta.self"
       :to="materialListRoute(camp, materialList, { isDetail: true })"
       exact-path
@@ -38,6 +38,7 @@
 
 <script>
 import { materialListRoute } from '@/router.js'
+import materialListsSorted from '@/common/helpers/materialListsSorted.js'
 
 export default {
   name: 'MaterialLists',
@@ -48,6 +49,9 @@ export default {
     materialLists() {
       return this.camp.materialLists()
     },
+    materailListsSorted() {
+      return materialListsSorted(this.materialLists.allItems)
+    },
   },
   mounted() {
     this.materialLists.$loadItems()

frontend/src/components/material/MaterialListsEdit.vue

@@ -2,7 +2,7 @@
   <v-list>
     <v-skeleton-loader v-if="materialLists._meta.loading" type="list-item@3" />
     <DialogMaterialListEdit
-      v-for="materialList in materialLists.allItems"
+      v-for="materialList in materialListsSorted"
       :key="materialList._meta.self"
       :material-list="materialList"
     >
@@ -22,6 +22,7 @@
 <script>
 import ButtonEdit from '@/components/buttons/ButtonEdit.vue'
 import DialogMaterialListEdit from '@/components/campAdmin/DialogMaterialListEdit.vue'
+import materialListsSorted from '@/common/helpers/materialListsSorted.js'
 
 export default {
   name: 'MaterialListsEdit',
@@ -32,5 +33,10 @@ export default {
       required: true,
     },
   },
+  computed: {
+    materialListsSorted() {
+      return materialListsSorted(this.materialLists.allItems)
+    },
+  },
 }
 </script>

frontend/src/components/program/ScheduleEntryFilters.vue

@@ -180,7 +180,12 @@ export default {
           label: this.$tc('components.program.scheduleEntryFilters.responsibleNone'),
           _meta: { self: 'none' },
         },
-        ...keyBy(this.camp.campCollaborations().items, '_meta.self'),
+        ...keyBy(
+          sortBy(this.camp.campCollaborations().items, (u) =>
+            campCollaborationDisplayName(u, this.$tc.bind(this)).toLowerCase()
+          ),
+          '_meta.self'
+        ),
       }
     },
     categories() {