How to watch for page status changes in Vue?

Kirby 3 Questions 🤔
,
1

I’m attempting to use Kirby’s “unlisted” status as a type of poor-man’s “redirected” status (since I’m only using “public” and “draft” previously and Kirby doesn’t yet allow custom statuses, this seems like the cleanest option).

The last piece of the puzzle is updating the UI on page status change.

The PHP code is almost the default changeStatus code, except that it adds a custom text field for the redirect URL. The value from this field gets saved to the content entry. Here’s the submit code:

'submit' => function (string $id) {
   $request = App::instance()->request();
   $page = Find::page($id);

   $updatedPage = $page->changeStatus($request->get('status'), $request->get('position'));

   $archivedRedirectUrl = $request->get('archived_redirect_url');
   if ($archivedRedirectUrl) {
      $updatedPage->update([
         'archived_redirect_url' => $archivedRedirectUrl,
      ]);
   }

   return [
      'event' => 'page.changeStatus',
   ];
},

On the Vue side, I conditionally display a notice that the page is redirected if the content entries has the archived_redirect_url field and it has a value. When the user is on an entry page and updates the redirect URL, this display should update (it displays the redirect URL). The only approach I’ve been able to think of for this is to add a Vue watcher:

this.$store.watch(
   () => this.$store.getters['content/values'](),
   (updatedContentObject) => {
      if (archivedRedirectUrl !== updatedContentObject.archivedRedirectUrl) {
         this.archivedRedirectUrl = updatedContentObject.archivedRedirectUrl
      }
   }
)

But this doesn’t work (the function is never executed).

Any ideas?

What is the proper/working approach to this?

2

Here’s a screenshot of the customized “change status” dialog:

CleanShot 2023-02-13 at 13.20.26@2x
CleanShot 2023-02-13 at 13.20.26@2x1138Ă—1004 84.2 KB

3

I’ve figured out that there’s a page.changeStatus event fired on the frontend. So it’s possible to listen for changes on this and proceed accordingly:

this.$events.$on('page.changeStatus', () => {
   // This logic executes but `this.$store.getters['content/values']()` seems to always return the data as it was when the page was first loaded
   this.archivedRedirectUrl = this.$store.getters['content/values']()['archived_redirect_url']
})

As the comment points out, that logic gets executed but this.$store.getters['content/values']() does not point to the updated content.

4

It seems the only workable approach to getting the latest data from disk is via the API:

this.$events.$on('page.changeStatus', () => {
   this.$api.get(this.$view.path, {select: 'status,content'}).then((response) => {
      if (response.status === 'unlisted') {
         this.archivedRedirectUrl = response.content.archived_redirect_url
      }
   })
})