Web: add Job Actions Bar for action buttons

Add a bar for "job actions", i.e. buttons that do something with the
selected job(s).

Just has one button, and it doesn't do much either, but at least the
framework for these things is here.

web/app/src/App.vue

@@ -222,4 +222,38 @@ footer {
   background-color: #333333;
   color: #EEE;
 }
+
+section.action-bar button.action {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.1rem 0.75rem;
+  border-radius: 0.3rem;
+  border: thin solid white;
+
+  background: #6E6D70;
+  color: #DFDEDF;
+  touch-action: manipulation;
+
+  transition-duration: 150ms;
+  transition-property: color, background-color, border-color, box-shadow
+}
+
+section.action-bar button.action[disabled] {
+  background-color: #4c4b4d;
+  color: #858585;
+  border: thin solid #858585;
+}
+
+section.action-bar button.action:focus {
+  background-color: cadetblue;
+}
+
+section.action-bar button.action.dangerous {
+  background-color: darkred;
+}
+
+section.action-bar button.action.dangerous[disabled] {
+  background-color: #53413e;
+}
 </style>

web/app/src/components/JobActionsBar.vue

@@ -0,0 +1,35 @@
+<template>
+  <section class="action-bar jobs">
+    <button class="action delete dangerous" :disabled="!jobs.canDelete" v-on:click="onButtonDelete">Delete</button>
+  </section>
+</template>
+
+<script>
+import { useJobs } from '@/stores/jobs';
+
+export default {
+  name: "JobActionsBar",
+  events: ["actionDone", "apiError"],
+  data: () => ({
+    jobs: useJobs(),
+  }),
+  computed: {
+  },
+  methods: {
+    onButtonDelete() {
+      const numJobs = this.jobs.numSelected;
+      this.jobs.deleteJobs()
+        .then(() => {
+          this.$emit("actionDone", `${numJobs} jobs marked for deletion`)
+        })
+        .catch((error) => {
+          this.$emit("apiError", error);
+        })
+    },
+  }
+}
+
+</script>
+
+<style scoped>
+</style>

web/app/src/components/JobsTable.vue

@@ -1,4 +1,5 @@
 <template>
+  <job-actions-bar />
   <div class="job-list" id="flamenco_job_list"></div>
 </template>
 
@@ -6,10 +7,14 @@
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import * as datetime from "@/datetime";
 import * as API from '@/manager-api'
+import JobActionsBar from '@/components/JobActionsBar.vue'
 
 export default {
   emits: ["selectedJobChange"],
   props: ["apiClient"],
+  components: {
+    JobActionsBar,
+  },
   data: () => {
     const options = {
       // See pkg/api/flamenco-manager.yaml, schemas Job and JobUpdate.

web/app/src/stores/jobs.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 
+import * as urls from '@/urls'
 import * as API from '@/manager-api';
 
 // 'use' prefix is idiomatic for Pinia stores.
@@ -15,6 +16,9 @@ export const useJobs = defineStore('jobs', {
     numSelected() {
       return this.selectedJobs.length;
     },
+    canDelete() {
+      return this._anyJobWithStatus(["queued", "paused", "failed", "completed"])
+    },
   },
   actions: {
     // Selection of jobs.
@@ -30,5 +34,17 @@ export const useJobs = defineStore('jobs', {
       this.selectedJobs = [];
       this.activeJob = null;
     },
+
+    // Actions on the selected jobs.
+    deleteJobs() {
+      const deletionPromise = new Promise( (resolutionFunc, rejectionFunc) => {
+        rejectionFunc({code: 327, message: "deleting jobs is not implemented in JS yet"});
+      });
+      return deletionPromise;
+    },
+    // Internal methods.
+    _anyJobWithStatus(statuses) {
+      return this.selectedJobs.reduce((foundJob, job) => (foundJob || statuses.includes(job.status)), false);
+    }
   },
 })