@mongoosejs/studio 0.2.12 → 0.3.0

package/frontend/src/navbar/navbar.js

@@ -13,23 +13,29 @@ module.exports = app => app.component('navbar', {
   template: template,
   props: ['user', 'roles'],
   inject: ['state'],
-  data: () => ({ showFlyout: false }),
+  data: () => ({
+    showFlyout: false,
+    darkMode: typeof localStorage !== 'undefined' && localStorage.getItem('studio-theme') === 'dark'
+  }),
   mounted: function() {
     const mobileMenuMask = document.querySelector('#mobile-menu-mask');
     const mobileMenu = document.querySelector('#mobile-menu');
+    const openBtn = document.querySelector('#open-mobile-menu');
 
-    document.querySelector('#open-mobile-menu').addEventListener('click', (event) => {
-      event.stopPropagation();
-      mobileMenuMask.style.display = 'block';
-      mobileMenu.classList.remove('translate-x-full');
-      mobileMenu.classList.add('translate-x-0');
-    });
+    if (openBtn && mobileMenuMask && mobileMenu) {
+      openBtn.addEventListener('click', (event) => {
+        event.stopPropagation();
+        mobileMenuMask.style.display = 'block';
+        mobileMenu.classList.remove('translate-x-full');
+        mobileMenu.classList.add('translate-x-0');
+      });
 
-    document.querySelector('body').addEventListener('click', () => {
-      mobileMenuMask.style.display = 'none';
-      mobileMenu.classList.remove('translate-x-0');
-      mobileMenu.classList.add('translate-x-full');
-    });
+      document.querySelector('body').addEventListener('click', () => {
+        mobileMenuMask.style.display = 'none';
+        mobileMenu.classList.remove('translate-x-0');
+        mobileMenu.classList.add('translate-x-full');
+      });
+    }
   },
   computed: {
     dashboardView() {
@@ -42,7 +48,7 @@ module.exports = app => app.component('navbar', {
       return ['chat index', 'chat'].includes(this.$route.name);
     },
     taskView() {
-      return ['tasks'].includes(this.$route.name);
+      return ['tasks', 'taskByName', 'taskSingle'].includes(this.$route.name);
     },
     routeName() {
       return this.$route.name;
@@ -82,6 +88,19 @@ module.exports = app => app.component('navbar', {
     logout() {
       window.localStorage.setItem('_mongooseStudioAccessToken', '');
       window.location.reload();
+    },
+    toggleDarkMode() {
+      this.darkMode = !this.darkMode;
+      const theme = this.darkMode ? 'dark' : 'light';
+      window.localStorage.setItem('studio-theme', theme);
+      if (this.darkMode) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+      const meta = document.querySelector('meta[name="theme-color"]');
+      if (meta) meta.setAttribute('content', this.darkMode ? '#0f0f0f' : '#ffffff');
+      document.documentElement.dispatchEvent(new CustomEvent('studio-theme-changed', { detail: { dark: this.darkMode } }));
     }
   },
   directives: {

package/frontend/src/routes.js

@@ -2,14 +2,14 @@
 
 // Role-based access control configuration
 const roleAccess = {
-  owner: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat'],
-  admin: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat'],
-  member: ['root', 'model', 'document', 'dashboards', 'dashboard', 'chat'],
+  owner: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat', 'tasks', 'taskByName', 'taskSingle'],
+  admin: ['root', 'model', 'document', 'dashboards', 'dashboard', 'team', 'chat', 'tasks', 'taskByName', 'taskSingle'],
+  member: ['root', 'model', 'document', 'dashboards', 'dashboard', 'chat', 'tasks', 'taskByName', 'taskSingle'],
   readonly: ['root', 'model', 'document', 'chat'],
   dashboards: ['dashboards', 'dashboard']
 };
 
-const allowedRoutesForLocalDev = ['document', 'root', 'chat', 'model'];
+const allowedRoutesForLocalDev = ['document', 'dashboards', 'dashboard', 'root', 'chat', 'model', 'tasks', 'taskByName', 'taskSingle'];
 
 // Helper function to check if a role has access to a route
 function hasAccess(roles, routeName) {
@@ -76,6 +76,22 @@ module.exports = {
         authorized: true
       }
     },
+    {
+      path: '/tasks/:name',
+      name: 'taskByName',
+      component: 'task-by-name',
+      meta: {
+        authorized: true
+      }
+    },
+    {
+      path: '/tasks/:name/:id',
+      name: 'taskSingle',
+      component: 'task-single',
+      meta: {
+        authorized: true
+      }
+    },
     {
       path: '/chat',
       name: 'chat index',

package/frontend/src/splash/splash.html

@@ -1,7 +1,7 @@
 <div class="w-full h-full flex items-center justify-center">
   <div class="text-center">
-    <div class="rounded-full bg-gray-100 p-6 inline-block">
-      <img src="images/logo.svg" class="w-48 h-48">
+    <div class="rounded-full bg-muted p-6 inline-block">
+      <img src="images/mongoose-studio.svg" class="w-48 h-48">
     </div>
     <div class="text-lg mt-2 font-bold">
       Mongoose Studio
@@ -9,7 +9,7 @@
     <div v-if="loading" class="mt-2">
       <img src="images/loader.gif" class="inline w-16 h-16">
     </div>
-    <div class="mt-2 text-gray-700" v-if="!loading">
+    <div class="mt-2 text-content-secondary" v-if="!loading">
       {{workspaceName}}
     </div>
     <div class="mt-4 flex gap-4 justify-center" v-if="!loading">
@@ -17,7 +17,7 @@
         <async-button
           type="button"
           @click="loginWithGithub"
-          class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:bg-gray-500">
+          class="rounded bg-primary px-2 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:bg-page0">
           <svg viewBox="0 0 98 98" class="inline mr-1" height="1.5em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
           Login With GitHub
         </async-button>
@@ -26,7 +26,7 @@
         <async-button
           type="button"
           @click="loginWithGoogle"
-          class="rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600 disabled:bg-gray-500">
+          class="rounded bg-primary px-2 py-2 text-sm font-semibold text-primary-text shadow-sm hover:bg-primary-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:bg-page0">
           <svg class="inline" xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"><path fill="#fff" d="M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z"/><path fill="#fff" d="M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z"/><path fill="#fff" d="M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z"/><path fill="#fff" d="M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z"/></svg>
           Login With Google
         </async-button>

package/frontend/src/task-by-name/task-by-name.html

@@ -0,0 +1,15 @@
+<div class="p-4 space-y-6">
+  <div v-if="status === 'init'">
+    <img src="images/loader.gif" alt="Loading" />
+  </div>
+  <div v-else-if="status === 'error'" class="text-red-600">
+    {{ errorMessage }}
+  </div>
+  <task-details
+    v-else-if="taskGroup"
+    :task-group="taskGroup"
+    :back-to="{ name: 'tasks' }"
+    @task-created="onTaskCreated"
+    @task-cancelled="onTaskCancelled"
+  ></task-details>
+</div>

package/frontend/src/task-by-name/task-by-name.js

@@ -0,0 +1,78 @@
+'use strict';
+
+// Page: all tasks with a given name. Reuses task-details to render the list (many tasks).
+const template = require('./task-by-name.html');
+const api = require('../api');
+
+function buildTaskGroup(name, tasks) {
+  const statusCounts = { pending: 0, succeeded: 0, failed: 0, cancelled: 0, in_progress: 0, unknown: 0 };
+  let lastRun = null;
+  tasks.forEach(task => {
+    const status = task.status || 'unknown';
+    if (Object.prototype.hasOwnProperty.call(statusCounts, status)) {
+      statusCounts[status]++;
+    } else {
+      statusCounts.unknown++;
+    }
+    const taskTime = new Date(task.scheduledAt || task.createdAt || 0);
+    if (!lastRun || taskTime > lastRun) lastRun = taskTime;
+  });
+  return {
+    name,
+    tasks,
+    statusCounts,
+    totalCount: tasks.length,
+    lastRun
+  };
+}
+
+module.exports = app => app.component('task-by-name', {
+  template,
+  data: () => ({
+    status: 'init',
+    taskGroup: null,
+    errorMessage: ''
+  }),
+  computed: {
+    taskName() {
+      return this.$route.params.name || '';
+    }
+  },
+  watch: {
+    taskName: {
+      immediate: true,
+      handler() {
+        this.loadTasks();
+      }
+    }
+  },
+  methods: {
+    async loadTasks() {
+      if (!this.taskName) return;
+      this.status = 'init';
+      this.taskGroup = null;
+      this.errorMessage = '';
+      const start = new Date();
+      start.setHours(start.getHours() - 1);
+      const end = new Date();
+      try {
+        const { tasks } = await api.Task.getTasks({
+          name: this.taskName,
+          start,
+          end
+        });
+        this.taskGroup = buildTaskGroup(this.taskName, tasks);
+        this.status = 'loaded';
+      } catch (err) {
+        this.status = 'error';
+        this.errorMessage = err?.response?.data?.message || err.message || 'Failed to load tasks';
+      }
+    },
+    async onTaskCreated() {
+      await this.loadTasks();
+    },
+    async onTaskCancelled() {
+      await this.loadTasks();
+    }
+  }
+});

package/frontend/src/task-single/task-single.html

@@ -0,0 +1,157 @@
+<div class="p-4 space-y-6">
+  <div v-if="status === 'init'">
+    <img src="images/loader.gif" alt="Loading" />
+  </div>
+  <div v-else-if="status === 'error'" class="text-red-600">
+    {{ errorMessage }}
+  </div>
+  <div v-else-if="status === 'notfound'" class="text-gray-600">
+    Task not found.
+  </div>
+  <div v-else-if="task" class="max-w-4xl">
+    <button @click="goBack" class="text-content-tertiary hover:text-content-secondary mb-4 flex items-center gap-1">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+      </svg>
+      Back to {{ task.name }}
+    </button>
+    <h1 class="text-2xl font-bold text-content-secondary mb-1">{{ task.name }}</h1>
+    <p class="text-content-tertiary mb-6">Task details</p>
+
+    <div class="bg-surface rounded-lg shadow p-6 md:p-8">
+      <div class="flex items-center gap-3 mb-6">
+        <span class="text-sm font-medium text-content">ID: {{ task.id }}</span>
+        <span
+          class="text-xs px-2 py-1 rounded-full font-medium"
+          :class="getStatusColor(task.status)"
+        >
+          {{ task?.status }}
+        </span>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+        <div>
+          <label class="block text-sm font-medium text-content-secondary mb-1">Scheduled At</label>
+          <div class="text-sm text-content">{{ formatDate(task.scheduledAt) }}</div>
+        </div>
+        <div v-if="task?.startedAt">
+          <label class="block text-sm font-medium text-content-secondary mb-1">Started At</label>
+          <div class="text-sm text-content">{{ formatDate(task.startedAt) }}</div>
+        </div>
+        <div v-if="task?.completedAt">
+          <label class="block text-sm font-medium text-content-secondary mb-1">Completed At</label>
+          <div class="text-sm text-content">{{ formatDate(task.completedAt) }}</div>
+        </div>
+      </div>
+
+      <div v-if="task?.params" class="mb-6">
+        <label class="block text-sm font-medium text-content-secondary mb-2">Params</label>
+        <div class="bg-page rounded-md p-4">
+          <list-json :value="task.params"></list-json>
+        </div>
+      </div>
+
+      <div v-if="task?.result" class="mb-6">
+        <label class="block text-sm font-medium text-content-secondary mb-2">Result</label>
+        <div class="bg-page rounded-md p-4">
+          <list-json :value="task.result"></list-json>
+        </div>
+      </div>
+
+      <div v-if="task?.error" class="mb-6">
+        <label class="block text-sm font-medium text-content-secondary mb-2">Error</label>
+        <div class="bg-page rounded-md p-4">
+          <list-json :value="task.error"></list-json>
+        </div>
+      </div>
+
+      <div class="flex flex-wrap gap-3 pt-4 border-t border-edge">
+        <button
+          @click="showRescheduleConfirmation(task)"
+          class="flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-blue-600 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          :disabled="task.status === 'in_progress'"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          Reschedule
+        </button>
+        <button
+          @click="showRunConfirmation(task)"
+          class="flex items-center justify-center gap-2 bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-green-600 hover:to-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          :disabled="task.status === 'in_progress'"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3l14 9-14 9V3z"></path>
+          </svg>
+          Run Now
+        </button>
+        <button
+          v-if="task.status === 'pending'"
+          @click="showCancelConfirmation(task)"
+          class="flex items-center justify-center gap-2 bg-gradient-to-r from-red-500 to-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-red-600 hover:to-red-700"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+          Cancel Task
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Reschedule Modal -->
+  <modal v-if="showRescheduleModal" containerClass="!max-w-md">
+    <template #body>
+      <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showRescheduleModal = false" role="button" aria-label="Close modal">&times;</div>
+      <div class="p-6">
+        <h3 class="text-lg font-medium text-content mb-4">Reschedule Task</h3>
+        <p class="text-sm text-gray-600 mb-2">Reschedule task <strong>{{ selectedTask?.id }}</strong>?</p>
+        <p class="text-sm text-content-tertiary mb-4">This will reset the task's status and schedule it to run again.</p>
+        <label for="newScheduledTime" class="block text-sm font-medium text-content-secondary mb-2">New Scheduled Time</label>
+        <input
+          id="newScheduledTime"
+          v-model="newScheduledTime"
+          type="datetime-local"
+          class="w-full px-3 py-2 border border-edge-strong rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 mb-4"
+        />
+        <div class="flex gap-3">
+          <button @click="confirmRescheduleTask" class="flex-1 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 font-medium">Reschedule</button>
+          <button @click="showRescheduleModal = false" class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium">Cancel</button>
+        </div>
+      </div>
+    </template>
+  </modal>
+
+  <!-- Run Modal -->
+  <modal v-if="showRunModal" containerClass="!max-w-md">
+    <template #body>
+      <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showRunModal = false" role="button" aria-label="Close modal">&times;</div>
+      <div class="p-6">
+        <h3 class="text-lg font-medium text-content mb-4">Run Task Now</h3>
+        <p class="text-sm text-gray-600 mb-2">Run task <strong>{{ selectedTask?.id }}</strong> immediately?</p>
+        <p class="text-sm text-content-tertiary mb-4">This will execute the task right away, bypassing its scheduled time.</p>
+        <div class="flex gap-3">
+          <button @click="confirmRunTask" class="flex-1 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 font-medium">Run Now</button>
+          <button @click="showRunModal = false" class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium">Cancel</button>
+        </div>
+      </div>
+    </template>
+  </modal>
+
+  <!-- Cancel Task Modal -->
+  <modal v-if="showCancelModal" containerClass="!max-w-md">
+    <template #body>
+      <div class="absolute font-mono right-1 top-1 cursor-pointer text-xl" @click="showCancelModal = false" role="button" aria-label="Close modal">&times;</div>
+      <div class="p-6">
+        <h3 class="text-lg font-medium text-content mb-4">Cancel Task</h3>
+        <p class="text-sm text-gray-600 mb-2">Cancel task <strong>{{ selectedTask?.id }}</strong>?</p>
+        <p class="text-sm text-content-tertiary mb-4">This will permanently cancel the task and it cannot be undone.</p>
+        <div class="flex gap-3">
+          <button @click="confirmCancelTask" class="flex-1 bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700 font-medium">Cancel Task</button>
+          <button @click="showCancelModal = false" class="flex-1 bg-gray-300 text-content-secondary px-4 py-2 rounded-md hover:bg-gray-400 font-medium">Keep Task</button>
+        </div>
+      </div>
+    </template>
+  </modal>
+</div>

package/frontend/src/task-single/task-single.js

@@ -0,0 +1,116 @@
+'use strict';
+
+// Page: one task by id. Dedicated single-task detail UI (not the list).
+const template = require('./task-single.html');
+const api = require('../api');
+
+module.exports = app => app.component('task-single', {
+  template,
+  data: () => ({
+    status: 'init',
+    task: null,
+    errorMessage: '',
+    showRescheduleModal: false,
+    showRunModal: false,
+    showCancelModal: false,
+    selectedTask: null,
+    newScheduledTime: ''
+  }),
+  computed: {
+    taskId() {
+      return this.$route.params.id || '';
+    },
+    taskByNamePath() {
+      const name = this.task?.name ?? this.$route.params.name ?? '';
+      const path = `/tasks/${encodeURIComponent(name || '')}`;
+      const query = this.$route.query?.status ? { status: this.$route.query.status } : {};
+      return { path, query };
+    }
+  },
+  watch: {
+    '$route.params': {
+      deep: true,
+      handler() {
+        this.loadTask();
+      }
+    }
+  },
+  methods: {
+    getStatusColor(status) {
+      if (status === 'succeeded') return 'bg-green-100 text-green-800';
+      if (status === 'pending') return 'bg-yellow-100 text-yellow-800';
+      if (status === 'cancelled') return 'bg-gray-100 text-gray-800';
+      if (status === 'failed') return 'bg-red-100 text-red-800';
+      if (status === 'in_progress') return 'bg-blue-100 text-blue-800';
+      return 'bg-slate-100 text-slate-800';
+    },
+    formatDate(dateString) {
+      if (!dateString) return 'N/A';
+      return new Date(dateString).toLocaleString();
+    },
+    async loadTask() {
+      if (!this.taskId) return;
+      this.status = 'init';
+      this.task = null;
+      this.errorMessage = '';
+      try {
+        const { doc } = await api.Model.getDocument({ model: 'Task', documentId: this.taskId });
+        this.task = doc;
+        this.status = 'loaded';
+      } catch (err) {
+        const status = err?.response?.status;
+        const notFound = status === 404 || err?.response?.data?.name === 'DocumentNotFoundError';
+        this.status = notFound ? 'notfound' : 'error';
+        this.errorMessage = notFound ? '' : (err?.response?.data?.message || err.message || 'Failed to load task');
+      }
+    },
+    showRescheduleConfirmation(task) {
+      this.selectedTask = task;
+      const defaultTime = new Date();
+      defaultTime.setHours(defaultTime.getHours() + 1);
+      this.newScheduledTime = defaultTime.toISOString().slice(0, 16);
+      this.showRescheduleModal = true;
+    },
+    showRunConfirmation(task) {
+      this.selectedTask = task;
+      this.showRunModal = true;
+    },
+    showCancelConfirmation(task) {
+      this.selectedTask = task;
+      this.showCancelModal = true;
+    },
+    async confirmRescheduleTask() {
+      if (!this.newScheduledTime) return;
+      await api.Task.rescheduleTask({ taskId: this.selectedTask.id, scheduledAt: this.newScheduledTime });
+      this.$toast.success({ title: 'Task Rescheduled', text: `Task ${this.selectedTask.id} has been rescheduled` });
+      this.showRescheduleModal = false;
+      this.selectedTask = null;
+      this.newScheduledTime = '';
+      await this.loadTask();
+    },
+    async confirmRunTask() {
+      await api.Task.runTask({ taskId: this.selectedTask.id });
+      this.$toast.success({ title: 'Task Started', text: `Task ${this.selectedTask.id} is now running`, type: 'success' });
+      this.showRunModal = false;
+      this.selectedTask = null;
+      await this.loadTask();
+    },
+    goBack() {
+      if (window.history.length > 1) {
+        window.history.back();
+      } else {
+        this.$router.push(this.taskByNamePath);
+      }
+    },
+    async confirmCancelTask() {
+      await api.Task.cancelTask({ taskId: this.selectedTask.id });
+      this.$toast.success({ title: 'Task Cancelled', text: `Task ${this.selectedTask.id} has been cancelled` });
+      this.showCancelModal = false;
+      this.selectedTask = null;
+      this.goBack();
+    }
+  },
+  mounted() {
+    this.loadTask();
+  }
+});