use delete confirmation modal

Author: samfreund

photon-client/src/components/settings/RecordingsCard.vue

@@ -5,6 +5,7 @@ import { useTheme } from "vuetify";
 import { axiosPost } from "@/lib/PhotonUtils";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import PvSelect from "@/components/common/pv-select.vue";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 
 const theme = useTheme();
@@ -33,8 +34,6 @@ const deleteRecordings = async (recordingsToDelete: string[], cameraUniqueName:
     recordings: recordingsToDelete,
     cameraUniqueName: cameraUniqueName
   });
-
-  confirmDeleteDialog.value.show = false;
 };
 
 const exportRecordings = ref();
@@ -245,31 +244,14 @@ const nukeRecordings = () => {
         </v-card-text>
       </v-card>
     </v-dialog>
-    <v-dialog v-model="confirmDeleteDialog.show" width="600">
-      <v-card color="surface" dark>
-        <v-card-title>Delete Recording</v-card-title>
-        <v-card-text class="pt-0">
-          Are you sure you want to delete the recording(s) {{ confirmDeleteDialog.recordings.join(", ") }}?
-          <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
-            <v-btn
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-              color="buttonPassive"
-              @click="confirmDeleteDialog.show = false"
-            >
-              Cancel
-            </v-btn>
-            <v-btn
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-              color="error"
-              @click="deleteRecordings(confirmDeleteDialog.recordings, confirmDeleteDialog.cameraUniqueName)"
-            >
-              Delete
-            </v-btn>
-          </v-card-actions>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
   </v-card>
+
+  <pv-delete-modal
+    v-model="confirmDeleteDialog.show"
+    title="Confirm Delete Recordings"
+    :description="'Are you sure you want to delete the recording(s) ' + confirmDeleteDialog.recordings.join(', ') + '?'"
+    @confirm="() => deleteRecordings(confirmDeleteDialog.recordings, confirmDeleteDialog.cameraUniqueName)"
+  />
 </template>
 
 <style scoped lang="scss">