People: Open new faces tab when there are no people #22

frontend/src/pages/people.vue

@@ -8,8 +8,8 @@
         slider-color="secondary-dark"
         :height="$vuetify.breakpoint.smAndDown ? 48 : 64"
     >
-      <v-tab v-for="(item, index) in tabs" :id="'tab-' + item.name" :key="index" :class="item.class" ripple
-             @click="changePath(item.path)">
+      <v-tab v-for="(item, index) in tabs" :id="'tab-' + item.name" :key="index" :class="item.class"
+             ripple @click="changePath(item.path)">
         <v-icon v-if="$vuetify.breakpoint.smAndDown" :title="item.label">{{ item.icon }}</v-icon>
         <template v-else>
           <v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon> {{ item.label }}
@@ -78,17 +78,7 @@ export default {
       rtl: this.$rtl,
     };
   },
-  created() {
-    this.load();
-  },
   methods: {
-    load() {
-      this.$config.load().then(() => {
-        if(this.$config.values.count.people === 0) {
-          this.changePath(this.tabs[1].path);
-        }
-      });
-    },
     changePath: function (path) {
       if (this.$route.path !== path) {
         this.$router.replace(path);

frontend/src/pages/people/faces.vue

@@ -514,14 +514,17 @@ export default {
     },
     onShow(face) {
       this.busy = true;
+      this.dirty = true;
       face.show().finally(() => this.busy = false);
     },
     onHide(face) {
       this.busy = true;
+      this.dirty = true;
       face.hide().finally(() => this.busy = false);
     },
     onClearSubject(marker) {
       this.busy = true;
+      this.dirty = true;
       this.$notify.blockUI();
       marker.clearSubject(marker).finally(() => {
         this.$notify.unblockUI();
@@ -530,6 +533,7 @@ export default {
     },
     onRename(marker) {
       this.busy = true;
+      this.dirty = true;
       this.$notify.blockUI();
       marker.rename().finally(() => {
         this.$notify.unblockUI();

frontend/src/routes.js

@@ -45,7 +45,7 @@ import Feedback from "pages/about/feedback.vue";
 import License from "pages/about/license.vue";
 import Help from "pages/help.vue";
 import { $gettext } from "common/vm";
-import { session } from "./session";
+import { session, config } from "./session";
 
 const c = window.__CONFIG__;
 const appName = c.name;
@@ -264,6 +264,20 @@ export default [
     component: People,
     meta: { title: $gettext("People"), auth: true, background: "application-light" },
     props: { tab: "people-subjects" },
+    beforeEnter: (to, from, next) => {
+      if (from.name.startsWith("people")) {
+        next();
+      } else {
+        config.load().finally(() => {
+          // Open new faces tab when there are no people.
+          if (config.values.count.people === 0) {
+            next({ name: "people_faces" });
+          } else {
+            next();
+          }
+        });
+      }
+    },
   },
   {
     name: "people_faces",