Initial

src/components/MassEditDialog.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-dialog :model-value="modelValue" max-width="460" @update:model-value="$emit('update:modelValue', $event)">
+    <v-card>
+      <v-card-title>Mass edit</v-card-title>
+      <v-card-text>
+        <v-select v-model="localChanges.status" :items="statusItems" clearable label="Status" />
+        <v-text-field v-model="localChanges.location" label="Location" />
+        <v-text-field v-model="localChanges.department" label="Department" />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="$emit('update:modelValue', false)">Cancel</v-btn>
+        <v-btn color="primary" @click="$emit('apply', localChanges)">Apply</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    changes: { type: Object, required: true },
+    modelValue: { type: Boolean, default: false },
+    statusItems: { type: Array, required: true }
+  },
+  emits: ['apply', 'update:modelValue'],
+  data() {
+    return {
+      localChanges: { ...this.changes }
+    };
+  },
+  watch: {
+    changes: {
+      handler(value) {
+        this.localChanges = { ...value };
+      },
+      deep: true
+    }
+  }
+};
+</script>