mirror of
https://github.com/nextcloud/server.git
synced 2026-05-28 04:32:30 -04:00
feat: Deprecate OC.dialogs.prompt an replace with Vue implementation
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen
parent
e70cf9c14b
commit
46e78d1b8b
2 changed files with 125 additions and 61 deletions
|
|
@ -51,8 +51,9 @@ import IconMove from '@mdi/svg/svg/folder-move.svg?raw'
|
|||
import IconCopy from '@mdi/svg/svg/folder-multiple.svg?raw'
|
||||
|
||||
import OC from './index.js'
|
||||
import { FilePickerType, getFilePickerBuilder } from '@nextcloud/dialogs'
|
||||
import { FilePickerType, getFilePickerBuilder, spawnDialog } from '@nextcloud/dialogs'
|
||||
import { basename } from 'path'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
/**
|
||||
* this class to ease the usage of jquery dialogs
|
||||
|
|
@ -169,69 +170,25 @@ const Dialogs = {
|
|||
* @param {string} name name of the input field
|
||||
* @param {boolean} password whether the input should be a password input
|
||||
* @returns {Promise}
|
||||
*
|
||||
* @deprecated Use NcDialog from `@nextcloud/vue` instead
|
||||
*/
|
||||
prompt: function(text, title, callback, modal, name, password) {
|
||||
return $.when(this._getMessageTemplate()).then(function($tmpl) {
|
||||
var dialogName = 'oc-dialog-' + Dialogs.dialogsCounter + '-content'
|
||||
var dialogId = '#' + dialogName
|
||||
var $dlg = $tmpl.octemplate({
|
||||
dialog_name: dialogName,
|
||||
title: title,
|
||||
message: text,
|
||||
type: 'notice'
|
||||
})
|
||||
var input = $('<input/>')
|
||||
input.attr('type', password ? 'password' : 'text').attr('id', dialogName + '-input').attr('placeholder', name)
|
||||
var label = $('<label/>').attr('for', dialogName + '-input').text(name + ': ')
|
||||
$dlg.append(label)
|
||||
$dlg.append(input)
|
||||
if (modal === undefined) {
|
||||
modal = false
|
||||
}
|
||||
$('body').append($dlg)
|
||||
|
||||
// wrap callback in _.once():
|
||||
// only call callback once and not twice (button handler and close
|
||||
// event) but call it for the close event, if ESC or the x is hit
|
||||
if (callback !== undefined) {
|
||||
callback = _.once(callback)
|
||||
}
|
||||
|
||||
var buttonlist = [{
|
||||
text: t('core', 'No'),
|
||||
click: function() {
|
||||
if (callback !== undefined) {
|
||||
// eslint-disable-next-line standard/no-callback-literal
|
||||
callback(false, input.val())
|
||||
}
|
||||
$(dialogId).ocdialog('close')
|
||||
}
|
||||
}, {
|
||||
text: t('core', 'Yes'),
|
||||
click: function() {
|
||||
if (callback !== undefined) {
|
||||
// eslint-disable-next-line standard/no-callback-literal
|
||||
callback(true, input.val())
|
||||
}
|
||||
$(dialogId).ocdialog('close')
|
||||
return new Promise((resolve) => {
|
||||
spawnDialog(
|
||||
defineAsyncComponent(() => import('../components/LegacyDialogPrompt.vue')),
|
||||
{
|
||||
text,
|
||||
name: title,
|
||||
callback,
|
||||
inputName: name,
|
||||
isPassword: !!password
|
||||
},
|
||||
defaultButton: true
|
||||
}]
|
||||
|
||||
$(dialogId).ocdialog({
|
||||
closeOnEscape: true,
|
||||
modal: modal,
|
||||
buttons: buttonlist,
|
||||
close: function() {
|
||||
// callback is already fired if Yes/No is clicked directly
|
||||
if (callback !== undefined) {
|
||||
// eslint-disable-next-line standard/no-callback-literal
|
||||
callback(false, input.val())
|
||||
}
|
||||
}
|
||||
})
|
||||
input.focus()
|
||||
Dialogs.dialogsCounter++
|
||||
(...args) => {
|
||||
callback(...args)
|
||||
resolve()
|
||||
},
|
||||
)
|
||||
})
|
||||
},
|
||||
|
||||
|
|
|
|||
107
core/src/components/LegacyDialogPrompt.vue
Normal file
107
core/src/components/LegacyDialogPrompt.vue
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<NcDialog dialog-classes="legacy-prompt__dialog"
|
||||
:buttons="buttons"
|
||||
:name="name"
|
||||
@update:open="$emit('close', false, inputValue)">
|
||||
<p class="legacy-prompt__text" v-text="text" />
|
||||
<NcPasswordField v-if="isPassword"
|
||||
ref="input"
|
||||
autocomplete="new-password"
|
||||
class="legacy-prompt__input"
|
||||
:label="name"
|
||||
:name="inputName"
|
||||
:value.sync="inputValue" />
|
||||
<NcTextField v-else
|
||||
ref="input"
|
||||
class="legacy-prompt__input"
|
||||
:label="name"
|
||||
:name="inputName"
|
||||
:value.sync="inputValue" />
|
||||
</NcDialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { translate as t } from '@nextcloud/l10n'
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
|
||||
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
|
||||
import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LegacyDialogPrompt',
|
||||
|
||||
components: {
|
||||
NcDialog,
|
||||
NcTextField,
|
||||
NcPasswordField,
|
||||
},
|
||||
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
text: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
isPassword: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
|
||||
inputName: {
|
||||
type: String,
|
||||
default: 'prompt-input',
|
||||
},
|
||||
},
|
||||
|
||||
emits: ['close'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
inputValue: '',
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
buttons() {
|
||||
return [
|
||||
{
|
||||
label: t('core', 'No'),
|
||||
callback: () => this.$emit('close', false, this.inputValue),
|
||||
},
|
||||
{
|
||||
label: t('core', 'Yes'),
|
||||
type: 'primary',
|
||||
callback: () => this.$emit('close', true, this.inputValue),
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => this.$refs.input?.focus?.())
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.legacy-prompt {
|
||||
&__text {
|
||||
margin-block: 0 .75em;
|
||||
}
|
||||
|
||||
&__input {
|
||||
margin-block: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.legacy-prompt__dialog .dialog__actions) {
|
||||
min-width: calc(100% - 12px);
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue