Skip to content

Commit 0f232a6

Browse files
don9x2Edon9x2E
committed
refactor: format AppNavigationForm.vue
Signed-off-by: don9x2E <revan@kakao.com>
1 parent 66d0be7 commit 0f232a6

1 file changed

Lines changed: 107 additions & 100 deletions

File tree

‎src/components/AppNavigationForm.vue‎

Lines changed: 107 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -16,105 +16,97 @@
1616
params: { hash: form.hash },
1717
}"
1818
@click="mobileCloseNavigation">
19-
<template #icon>
20-
<NcLoadingIcon v-if="loading" :size="16" />
21-
<IconCheck v-else-if="isExpired" :size="16" />
22-
<FormsIcon v-else :size="16" />
23-
</template>
24-
<template v-if="hasSubtitle" #subname>
25-
{{ formSubtitle }}
26-
</template>
27-
<template
28-
v-if="!loading && (!readOnly || canEdit || canSeeResults)"
29-
#actions>
30-
<NcActionRouter
31-
v-if="!isArchived && canEdit"
32-
close-after-click
33-
:disabled="isFormLocked"
34-
exact
35-
:to="{ name: 'edit', params: { hash: form.hash } }"
36-
@click="mobileCloseNavigation">
37-
<template #icon>
38-
<IconPencil :size="20" />
39-
</template>
40-
{{ t('forms', 'Edit form') }}
41-
</NcActionRouter>
42-
<NcActionButton
43-
v-if="!isArchived && !readOnly"
44-
close-after-click
45-
@click="onShareForm">
46-
<template #icon>
47-
<IconShareVariant :size="20" />
48-
</template>
49-
{{ t('forms', 'Share form') }}
50-
</NcActionButton>
51-
<NcActionRouter
52-
v-if="canSeeResults"
53-
close-after-click
54-
exact
55-
:to="{ name: 'results', params: { hash: form.hash } }"
56-
@click="mobileCloseNavigation">
57-
<template #icon>
58-
<IconPoll :size="20" />
59-
</template>
60-
{{ t('forms', 'Results') }}
61-
</NcActionRouter>
62-
<NcActionButton v-if="canEdit" close-after-click @click="onCloneForm">
63-
<template #icon>
64-
<IconContentCopy :size="20" />
65-
</template>
66-
{{ t('forms', 'Copy form') }}
67-
</NcActionButton>
68-
<NcActionSeparator v-if="canEdit && !readOnly" />
69-
<NcActionButton
70-
v-if="canEdit && !readOnly"
71-
close-after-click
72-
:disabled="isFormLocked"
73-
@click="onToggleArchive">
74-
<template #icon>
75-
<IconArchiveOff v-if="isArchived" :size="20" />
76-
<IconArchive v-else :size="20" />
77-
</template>
78-
{{
79-
isArchived
80-
? t('forms', 'Unarchive form')
81-
: t('forms', 'Archive form')
82-
}}
83-
</NcActionButton>
84-
<NcActionButton
85-
v-if="canEdit && !readOnly"
86-
close-after-click
87-
:disabled="isFormLocked"
88-
@click="showDeleteDialog = true">
89-
<template #icon>
90-
<IconDelete :size="20" />
91-
</template>
92-
{{ t('forms', 'Delete form') }}
93-
</NcActionButton>
94-
<NcDialog
95-
:open.sync="showDeleteDialog"
96-
:name="t('forms', 'Delete form')"
97-
:message="
98-
t('forms', 'Are you sure you want to delete {title}?', {
99-
title: formTitle,
100-
})
101-
"
102-
:buttons="buttons" />
103-
</template>
19+
<template #icon>
20+
<NcLoadingIcon v-if="loading" :size="16" />
21+
<IconCheck v-else-if="isExpired" :size="16" />
22+
<FormsIcon v-else :size="16" />
23+
</template>
24+
<template v-if="hasSubtitle" #subname>
25+
{{ formSubtitle }}
26+
</template>
27+
<template
28+
v-if="!loading && (!readOnly || canEdit || canSeeResults)"
29+
#actions>
30+
<NcActionRouter
31+
v-if="!isArchived && canEdit"
32+
close-after-click
33+
:disabled="isFormLocked"
34+
exact
35+
:to="{ name: 'edit', params: { hash: form.hash } }"
36+
@click="mobileCloseNavigation">
37+
<template #icon>
38+
<IconPencil :size="20" />
39+
</template>
40+
{{ t('forms', 'Edit form') }}
41+
</NcActionRouter>
42+
<NcActionButton
43+
v-if="!isArchived && !readOnly"
44+
close-after-click
45+
@click="onShareForm">
46+
<template #icon>
47+
<IconShareVariant :size="20" />
48+
</template>
49+
{{ t('forms', 'Share form') }}
50+
</NcActionButton>
51+
<NcActionRouter
52+
v-if="canSeeResults"
53+
close-after-click
54+
exact
55+
:to="{ name: 'results', params: { hash: form.hash } }"
56+
@click="mobileCloseNavigation">
57+
<template #icon>
58+
<IconPoll :size="20" />
59+
</template>
60+
{{ t('forms', 'Results') }}
61+
</NcActionRouter>
62+
<NcActionButton
63+
v-if="canEdit"
64+
close-after-click
65+
@click="onCloneForm">
66+
<template #icon>
67+
<IconContentCopy :size="20" />
68+
</template>
69+
{{ t('forms', 'Copy form') }}
70+
</NcActionButton>
71+
<NcActionSeparator v-if="canEdit && !readOnly" />
72+
<NcActionButton
73+
v-if="canEdit && !readOnly"
74+
close-after-click
75+
:disabled="isFormLocked"
76+
@click="onToggleArchive">
77+
<template #icon>
78+
<IconArchiveOff v-if="isArchived" :size="20" />
79+
<IconArchive v-else :size="20" />
80+
</template>
81+
{{
82+
isArchived
83+
? t('forms', 'Unarchive form')
84+
: t('forms', 'Archive form')
85+
}}
86+
</NcActionButton>
87+
<NcActionButton
88+
v-if="canEdit && !readOnly"
89+
close-after-click
90+
:disabled="isFormLocked"
91+
@click="onConfirmDelete">
92+
<template #icon>
93+
<IconDelete :size="20" />
94+
</template>
95+
{{ t('forms', 'Delete form') }}
96+
</NcActionButton>
97+
</template>
10498
</NcListItem>
10599
</template>
106100

107101
<script>
108-
import IconDeleteSvg from '@mdi/svg/svg/delete.svg?raw'
109102
import { getCurrentUser } from '@nextcloud/auth'
110103
import axios from '@nextcloud/axios'
111-
import { showError } from '@nextcloud/dialogs'
104+
import { DialogSeverity, getDialogBuilder, showError } from '@nextcloud/dialogs'
112105
import moment from '@nextcloud/moment'
113106
import { generateOcsUrl } from '@nextcloud/router'
114107
import NcActionButton from '@nextcloud/vue/components/NcActionButton'
115108
import NcActionRouter from '@nextcloud/vue/components/NcActionRouter'
116109
import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
117-
import NcDialog from '@nextcloud/vue/components/NcDialog'
118110
import NcListItem from '@nextcloud/vue/components/NcListItem'
119111
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
120112
import IconArchiveOff from 'vue-material-design-icons/ArchiveOffOutline.vue'
@@ -146,7 +138,6 @@ export default {
146138
NcActionButton,
147139
NcActionRouter,
148140
NcActionSeparator,
149-
NcDialog,
150141
NcListItem,
151142
NcLoadingIcon,
152143
},
@@ -182,17 +173,6 @@ export default {
182173
data() {
183174
return {
184175
loading: false,
185-
showDeleteDialog: false,
186-
buttons: [
187-
{
188-
label: t('forms', 'Delete form'),
189-
icon: IconDeleteSvg,
190-
type: 'error',
191-
callback: () => {
192-
this.onDeleteForm()
193-
},
194-
},
195-
],
196176
}
197177
},
198178
@@ -312,6 +292,33 @@ export default {
312292
this.$emit('clone', this.form.id)
313293
},
314294
295+
async onConfirmDelete() {
296+
const dialog = getDialogBuilder(t('forms', 'Delete form'))
297+
.setText(
298+
t('forms', 'Are you sure you want to delete {title}?', {
299+
title: this.formTitle,
300+
}),
301+
)
302+
.setSeverity(DialogSeverity.Error)
303+
.setButtons([
304+
{
305+
label: t('forms', 'Cancel'),
306+
callback: () => {},
307+
variant: 'secondary',
308+
},
309+
{
310+
label: t('forms', 'Delete form'),
311+
callback: () => {
312+
this.onDeleteForm()
313+
},
314+
variant: 'error',
315+
},
316+
])
317+
.build()
318+
319+
await dialog.show()
320+
},
321+
315322
async onToggleArchive() {
316323
try {
317324
// TODO: add loading status feedback ?

0 commit comments

Comments
 (0)