app_api/src/components/DaemonConfig/ConfirmDaemonDeleteModal.vue at ea4aec8a013897a00957a7ace8a25afd98ef7e7a · nextcloud/app_api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!--
  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<div class="confirm-daemon-delete">
		<NcModal :show="show" @close="closeModal">
			<div class="confirm-delete-dialog">
				<h2>{{ t('app_api', 'Are you sure you want delete Deploy Daemon') }}</h2>

				<NcCheckboxRadioSwitch
					:checked.sync="removeExAppsOnDaemonDelete"
					:placeholder="t('app_api', 'All ExApps on this daemon will be removed')"
					:aria-label="t('app_api', 'All ExApps on this daemon will be removed')">
					<template #default>
						{{ t('app_api', 'All ExApps installed on this daemon will be removed') }}
					</template>
				</NcCheckboxRadioSwitch>

				<div class="actions">
					<NcButton type="success" @click="closeModal">
						<template #icon>
							<Cancel :size="20" />
						</template>
						{{ t('app_api', 'Cancel') }}
					</NcButton>
					<NcButton type="error"
						:disabled="!removeExAppsOnDaemonDelete || deleting"
						@click="deleteDaemonConfig(daemon)">
						<template #icon>
							<NcLoadingIcon v-if="deleting" :size="20" />
							<Delete v-else :size="20" />
						</template>
						{{ t('app_api', 'Delete') }}
					</NcButton>
				</div>
			</div>
		</NcModal>
	</div>
</template>

<script>
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
import Cancel from 'vue-material-design-icons/Cancel.vue'
import Delete from 'vue-material-design-icons/TrashCanOutline.vue'

export default {
	name: 'ConfirmDaemonDeleteModal',
	components: {
		NcModal,
		NcCheckboxRadioSwitch,
		Cancel,
		NcLoadingIcon,
		Delete,
		NcButton,
	},
	props: {
		show: {
			type: Boolean,
			required: true,
			default: false,
		},
		deleteDaemonConfig: {
			type: Function,
			required: true,
		},
		deleting: {
			type: Boolean,
			required: true,
			default: false,
		},
		daemon: {
			type: Object,
			required: true,
			default: () => {},
		},
	},
	data() {
		return {
			removeExAppsOnDaemonDelete: false,
		}
	},
	methods: {
		closeModal() {
			this.removeExAppsOnDaemonDelete = false
			this.$emit('update:show', false)
		},
	},
}
</script>

<style scoped lang="scss">
.confirm-delete-dialog {
	padding: 20px;

	p {
		margin-bottom: 10px;
	}

	.actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;

		button:first-child {
			margin-right: 10px;
		}
	}
}
</style>