Feat: Create Group in EditMonitor page (#3379)

* Feat: Create Group in EditMonitor page

* Fix: Start group mon. after child is added

* Chore: Swap confirm & cancel for ergonomics

* Fix rarely issue that group monitor can throw an error if lastBeat is null

* Resume the group monitor in the callback

---------

Co-authored-by: Louis Lam <louislam@users.noreply.github.com>

src/components/ActionSelect.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="input-group mb-3">
+        <select ref="select" v-model="model" class="form-select" :disabled="disabled">
+            <option v-for="option in options" :key="option" :value="option.value">{{ option.label }}</option>
+        </select>
+        <a class="btn btn-outline-primary" @click="action()">
+            <font-awesome-icon :icon="icon" />
+        </a>
+    </div>
+</template>
+
+<script>
+/**
+ * Generic select field with a customizable action on the right.
+ * Action is passed in as a function.
+ */
+export default {
+    props: {
+        options: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         * The value of the select field.
+         */
+        modelValue: {
+            type: Number,
+            default: null,
+        },
+        /**
+         * Whether the select field is enabled / disabled.
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The icon displayed in the right button of the select field.
+         * Accepts a Font Awesome icon string identifier.
+         * @example "plus"
+         */
+        icon: {
+            type: String,
+            required: true,
+        },
+        /**
+         * The action to be performed when the button is clicked.
+         * Action is passed in as a function.
+         */
+        action: {
+            type: Function,
+            default: () => {},
+        }
+    },
+    emits: [ "update:modelValue" ],
+    computed: {
+        /**
+         * Send value update to parent on change.
+         */
+        model: {
+            get() {
+                return this.modelValue;
+            },
+            set(value) {
+                this.$emit("update:modelValue", value);
+            }
+        }
+    },
+};
+</script>

src/components/CreateGroupDialog.vue

@@ -0,0 +1,56 @@
+<template>
+    <div ref="modal" class="modal fade" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        {{ $t("New Group") }}
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                </div>
+                <div class="modal-body">
+                    <form @submit.prevent="confirm">
+                        <div>
+                            <label for="draftGroupName" class="form-label">{{ $t("Group Name") }}</label>
+                            <input id="draftGroupName" v-model="groupName" type="text" class="form-control">
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                        {{ $t("Cancel") }}
+                    </button>
+                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" :disabled="groupName == '' || groupName == null" @click="confirm">
+                        {{ $t("Confirm") }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Modal } from "bootstrap";
+
+export default {
+    props: {},
+    emits: [ "added" ],
+    data: () => ({
+        modal: null,
+        groupName: null,
+    }),
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+    methods: {
+        /** Show the confirm dialog */
+        show() {
+            this.modal.show();
+        },
+        confirm() {
+            this.$emit("added", this.groupName);
+            this.modal.hide();
+        },
+    },
+};
+</script>