Sort the calendars alphabetically by name

src/components/TheCollections/General.vue

@@ -108,9 +108,8 @@ export default {
 		 * @param {String} collectionId the Id of the collection in question
 		 */
 		filteredCalendars: function() {
-			return Object.values(this.$store.state.calendars.calendars)
-				.filter(calendar => {
-					return this.$store.getters.getCalendarCountByCollectionId(calendar.uri, this.$route.params.collectionId)
+			return this.calendars.filter(calendar => {
+					return this.calendarCount(calendar.uri, this.$route.params.collectionId)
 				})
 		},
 
@@ -129,7 +128,9 @@ export default {
 	},
 	mapGetters({
 		tasks: 'getTasksByCalendarId',
-		calendar: 'getDefaultCalendar'
+		calendar: 'getDefaultCalendar',
+		calendars: 'getSortedCalendars',
+		calendarCount: 'getCalendarCountByCollectionId'
 	})
 	),
 	methods: {

src/components/TheList.vue

@@ -39,7 +39,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			</a>
 			<div v-if="collection.id!='completed'" class="app-navigation-entry-utils">
 				<ul>
-					<li class="app-navigation-entry-utils-counter">{{ getCollectionCount(collection.id) | counterFormatter }}</li>
+					<li class="app-navigation-entry-utils-counter">{{ collectionCount(collection.id) | counterFormatter }}</li>
 				</ul>
 			</div>
 		</router-link>
@@ -63,7 +63,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			</a>
 			<div class="app-navigation-entry-utils">
 				<ul>
-					<li class="app-navigation-entry-utils-counter">{{ getCalendarCount(calendar.uri) | counterFormatter }}</li>
+					<li class="app-navigation-entry-utils-counter">{{ calendarCount(calendar.uri) | counterFormatter }}</li>
 					<popover v-show="calendar.writable" tag="li" class="app-navigation-entry-utils-menu-button">
 						<ul>
 							<li>
@@ -210,14 +210,14 @@ export default {
 	},
 	computed: Object.assign({},
 		mapState({
-			collections: state => state.collections.collections,
-			calendars: state => state.calendars.calendars
+			collections: state => state.collections.collections
 		}),
-		mapGetters([
-			'getCollectionCount',
-			'getCalendarCount',
-			'isCalendarNameUsed'
-		])
+		mapGetters({
+			calendars: 'getSortedCalendars',
+			collectionCount: 'getCollectionCount',
+			calendarCount: 'getCalendarCount',
+			isCalendarNameUsed: 'isCalendarNameUsed'
+		})
 	),
 	methods: {
 		hideCollection: function(collection) {
@@ -227,7 +227,7 @@ export default {
 			case 1:
 				return false
 			case 2:
-				return this.getCollectionCount(collection.id) < 1
+				return this.collectionCount(collection.id) < 1
 			}
 		},
 		showTooltip: function(target) {

src/store/calendars.js

@@ -34,6 +34,17 @@ const state = {
 
 const getters = {
 
+	/**
+	 * Returns the calendars sorted alphabetically
+	 */
+	getSortedCalendars: state => {
+		return Object.values(state.calendars).sort(function(cal1, cal2) {
+			var n1 = cal1.displayname.toUpperCase()
+			var n2 = cal2.displayname.toUpperCase()
+			return (n1 < n2) ? -1 : (n1 > n2) ? 1 : 0
+		})
+	},
+
 	/**
 	 * Returns the count of tasks in a calendar
 	 *