Added actor alphanetic and gender filters.

assets/js/actors/actions.js

@@ -171,14 +171,34 @@ function initActorActions(store, _router) {
         return curateActor(actor);
     }
 
-    async function fetchActors({ _commit }, { actorSlug, limit = 100 }) {
+    async function fetchActors({ _commit }, {
+        actorSlug,
+        limit = 100,
+        letter,
+        genders,
+    }) {
         if (actorSlug) {
             return fetchActorBySlug(actorSlug);
         }
 
         const { actors } = await graphql(`
-            query Actors($limit:Int) {
-                actors(first:$limit, orderBy: NAME_ASC) {
+            query Actors(
+                $limit: Int,
+                $letter: String! = "",
+                $genders: [String!] = ["female"],
+            ) {
+                actors(
+                    first:$limit,
+                    orderBy: NAME_ASC,
+                    filter: {
+                        name: {
+                            startsWith: $letter
+                        },
+                        gender: {
+                            in: $genders
+                        },
+                    },
+                ) {
                     id
                     name
                     slug
@@ -199,6 +219,8 @@ function initActorActions(store, _router) {
             }
         `, {
             limit,
+            letter,
+            genders,
         });
 
         return actors.map(actor => curateActor(actor));

assets/js/router.js

@@ -53,6 +53,17 @@ const routes = [
     {
         path: '/actors',
         component: Actors,
+        redirect: {
+            name: 'actors',
+            params: {
+                gender: 'female',
+                letter: 'all',
+            },
+        },
+    },
+    {
+        path: '/actors/:gender/:letter',
+        component: Actors,
         name: 'actors',
     },
     {