scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-10 16:31:22 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add micro-interactions on the revamped modals [SCI-10265]

Browse source
This commit is contained in:
wandji20 2024-02-27 13:03:41 +01:00
parent fb734b1b3e
commit 0070db5e78
20 changed files with 493 additions and 446 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/stylesheets/tailwind/buttons.css
View file

@ -59,7 +59,9 @@
} }
.btn.btn-primary:hover, .btn.btn-primary:hover,
.btn.btn-success:hover{ .btn.btn-success:hover,
.btn.btn-primary:focus,
.btn.btn-success:focus{
@apply bg-sn-blue-hover text-sn-white; @apply bg-sn-blue-hover text-sn-white;
} }
@ -80,7 +82,8 @@
} }
.btn.btn-secondary:hover, .btn.btn-secondary:hover,
.btn.btn-default:hover { .btn.btn-default:hover,
.btn.btn-secondary:focus {
@apply border-sn-blue-hover; @apply border-sn-blue-hover;
} }
@ -129,7 +132,8 @@
@apply bg-sn-delete-red text-sn-white; @apply bg-sn-delete-red text-sn-white;
} }
.btn.btn-danger:hover { .btn.btn-danger:hover,
.btn.btn-danger:focus {
@apply bg-sn-delete-red-hover; @apply bg-sn-delete-red-hover;
} }

42
app/javascript/vue/experiments/modals/duplicate.vue
View file

@ -1,27 +1,29 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name"> </button>
{{ i18n.t("experiments.clone.modal_title", { experiment: experiment.name }) }} <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name">
</h4> {{ i18n.t("experiments.clone.modal_title", { experiment: experiment.name }) }}
</h4>
</div>
<div class="modal-body">
<SelectDropdown :optionsUrl="experiment.urls.projects_to_clone"
:value="targetProject"
@change="changeProject" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetProject" type="submit">
{{ i18n.t('experiments.clone.modal_submit') }}
</button>
</div>
</div> </div>
<div class="modal-body"> </form>
<SelectDropdown :optionsUrl="experiment.urls.projects_to_clone"
:value="targetProject"
@change="changeProject" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetProject" @click="submit" type="submit">
{{ i18n.t('experiments.clone.modal_submit') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

61
app/javascript/vue/experiments/modals/edit.vue
View file

@ -1,38 +1,41 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" :title="experiment.name"> </button>
{{ i18n.t('experiments.edit.modal_title', { experiment: experiment.name }) }} <h4 class="modal-title truncate !block" :title="experiment.name">
</h4> {{ i18n.t('experiments.edit.modal_title', { experiment: experiment.name }) }}
</div> </h4>
<div class="modal-body">
<label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
<div class="sci-input-container-v2 mb-4">
<input type="text" class="sci-input-field"
v-model="name"
autofocus
:placeholder="i18n.t('experiments.new.name_placeholder')">
</div> </div>
<label class="sci-label">{{ i18n.t('experiments.new.description') }}</label> <div class="modal-body">
<div class="sci-input-container-v2 h-40"> <label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
<textarea class="sci-input-field" <div class="sci-input-container-v2 mb-4">
ref="description" <input type="text" class="sci-input-field"
v-model="description"> v-model="name"
</textarea> autofocus
ref="input"
:placeholder="i18n.t('experiments.new.name_placeholder')">
</div>
<label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
<div class="sci-input-container-v2 h-40">
<textarea class="sci-input-field"
ref="description"
v-model="description">
</textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="button" :disabled="!validName" class="btn btn-primary">
{{ i18n.t('experiments.edit.modal_create') }}
</button>
</div> </div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
{{ i18n.t('experiments.edit.modal_create') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

44
app/javascript/vue/experiments/modals/move.vue
View file

@ -1,28 +1,30 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name"> </button>
{{ i18n.t("experiments.move.modal_title", { experiment: experiment.name }) }} <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name">
</h4> {{ i18n.t("experiments.move.modal_title", { experiment: experiment.name }) }}
</h4>
</div>
<div class="modal-body">
<p><small>{{ i18n.t("experiments.move.notice") }}</small></p>
<SelectDropdown :optionsUrl="experiment.urls.projects_to_move"
:value="targetProject"
@change="changeProject" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetProject" type="submit">
{{ i18n.t('experiments.move.modal_submit') }}
</button>
</div>
</div> </div>
<div class="modal-body"> </form>
<p><small>{{ i18n.t("experiments.move.notice") }}</small></p>
<SelectDropdown :optionsUrl="experiment.urls.projects_to_move"
:value="targetProject"
@change="changeProject" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetProject" @click="submit" type="submit">
{{ i18n.t('experiments.move.modal_submit') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

60
app/javascript/vue/experiments/modals/new.vue
View file

@ -1,38 +1,40 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block"> </button>
{{ i18n.t('experiments.new.modal_title') }} <h4 class="modal-title truncate !block">
</h4> {{ i18n.t('experiments.new.modal_title') }}
</div> </h4>
<div class="modal-body">
<label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
<div class="sci-input-container-v2 mb-4">
<input type="text" class="sci-input-field"
v-model="name"
autofocus
:placeholder="i18n.t('experiments.new.name_placeholder')">
</div> </div>
<label class="sci-label">{{ i18n.t('experiments.new.description') }}</label> <div class="modal-body">
<div class="sci-input-container-v2 h-40"> <label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
<textarea class="sci-input-field" <div class="sci-input-container-v2 mb-4">
ref="description" <input type="text" class="sci-input-field"
v-model="description"> v-model="name"
</textarea> autofocus ref="input"
:placeholder="i18n.t('experiments.new.name_placeholder')">
</div>
<label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
<div class="sci-input-container-v2 h-40">
<textarea class="sci-input-field"
ref="description"
v-model="description">
</textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="submit" :disabled="!validName" class="btn btn-primary">
{{ i18n.t('experiments.new.modal_create') }}
</button>
</div> </div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
{{ i18n.t('experiments.new.modal_create') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

46
app/javascript/vue/my_modules/modals/edit.vue
View file

@ -1,30 +1,32 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" :title="my_module.name"> </button>
{{ i18n.t('experiments.canvas.edit.modal_edit_module.title') }} <h4 class="modal-title truncate !block" :title="my_module.name">
</h4> {{ i18n.t('experiments.canvas.edit.modal_edit_module.title') }}
</div> </h4>
<div class="modal-body"> </div>
<label class="sci-label">{{ i18n.t('experiments.canvas.edit.modal_edit_module.name') }}</label> <div class="modal-body">
<div class="sci-input-container-v2 mb-4"> <label class="sci-label">{{ i18n.t('experiments.canvas.edit.modal_edit_module.name') }}</label>
<input type="text" class="sci-input-field" <div class="sci-input-container-v2 mb-4">
v-model="name" <input type="text" class="sci-input-field"
autofocus> v-model="name" ref="input"
autofocus>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="submit" :disabled="!nameIsValid" class="btn btn-primary">
{{ i18n.t('experiments.canvas.edit.modal_edit_module.confirm') }}
</button>
</div> </div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="button" :disabled="!nameIsValid" class="btn btn-primary" @click="submit">
{{ i18n.t('experiments.canvas.edit.modal_edit_module.confirm') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

42
app/javascript/vue/my_modules/modals/move.vue
View file

@ -1,27 +1,29 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="my_module.name"> </button>
{{ i18n.t('experiments.table.modal_move_modules.title') }} <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="my_module.name">
</h4> {{ i18n.t('experiments.table.modal_move_modules.title') }}
</h4>
</div>
<div class="modal-body">
<SelectDropdown :optionsUrl="my_module.urls.experiments_to_move"
:value="targetExperiment"
@change="changeExperiment" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetExperiment" type="submit">
{{ i18n.t('experiments.table.modal_move_modules.confirm') }}
</button>
</div>
</div> </div>
<div class="modal-body"> </form>
<SelectDropdown :optionsUrl="my_module.urls.experiments_to_move"
:value="targetExperiment"
@change="changeExperiment" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" :disabled="!targetExperiment" @click="submit" type="submit">
{{ i18n.t('experiments.table.modal_move_modules.confirm') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

102
app/javascript/vue/my_modules/modals/new.vue
View file

@ -1,69 +1,71 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block"> </button>
{{ i18n.t('experiments.canvas.new_my_module_modal.title') }} <h4 class="modal-title truncate !block">
</h4> {{ i18n.t('experiments.canvas.new_my_module_modal.title') }}
</div> </h4>
<div class="modal-body">
<label class="sci-label">{{ i18n.t('experiments.canvas.new_my_module_modal.name') }}</label>
<div class="sci-input-container-v2 mb-4">
<input type="text" class="sci-input-field"
v-model="name"
autofocus
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.name_placeholder')">
</div> </div>
<div class="modal-body">
<label class="sci-label"> <label class="sci-label">{{ i18n.t('experiments.canvas.new_my_module_modal.name') }}</label>
{{ i18n.t('experiments.canvas.new_my_module_modal.due_date') }} <div class="sci-input-container-v2 mb-4">
</label> <input type="text" class="sci-input-field"
<DateTimePicker v-model="name"
@change="setDueDate" autofocus ref="input"
mode="datetime" :placeholder="i18n.t('experiments.canvas.new_my_module_modal.name_placeholder')">
class="mb-4" </div>
size="mb"
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.due_date_placeholder')"
:clearable="true"/>
<label class="sci-label"> <label class="sci-label">
{{ i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_label') }} {{ i18n.t('experiments.canvas.new_my_module_modal.due_date') }}
</label> </label>
<SelectDropdown <DateTimePicker
@change="setDueDate"
mode="datetime"
class="mb-4" class="mb-4"
@change="setTags" size="mb"
:options="formattedTags" :placeholder="i18n.t('experiments.canvas.new_my_module_modal.due_date_placeholder')"
:option-renderer="tagsRenderer" :clearable="true"/>
:label-renderer="tagsRenderer"
:multiple="true"
:searchable="true"
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_placeholder')"
:tagsView="true" ></SelectDropdown>
<label class="sci-label"> <label class="sci-label">
{{ i18n.t('experiments.canvas.new_my_module_modal.assigned_users') }} {{ i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_label') }}
</label> </label>
<SelectDropdown <SelectDropdown
@change="setUsers" class="mb-4"
:options="formattedUsers" @change="setTags"
:option-renderer="usersRenderer" :options="formattedTags"
:label-renderer="usersRenderer" :option-renderer="tagsRenderer"
:label-renderer="tagsRenderer"
:multiple="true" :multiple="true"
:searchable="true" :searchable="true"
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_users_placeholder')" :placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_placeholder')"
:tagsView="true" ></SelectDropdown> :tagsView="true" ></SelectDropdown>
<label class="sci-label">
{{ i18n.t('experiments.canvas.new_my_module_modal.assigned_users') }}
</label>
<SelectDropdown
@change="setUsers"
:options="formattedUsers"
:option-renderer="usersRenderer"
:label-renderer="usersRenderer"
:multiple="true"
:searchable="true"
:placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_users_placeholder')"
:tagsView="true" ></SelectDropdown>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="submit" :disabled="!validName" class="btn btn-primary" @click="submit">
{{ i18n.t('experiments.canvas.new_my_module_modal.create') }}
</button>
</div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
{{ i18n.t('experiments.canvas.new_my_module_modal.create') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

68
app/javascript/vue/projects/modals/edit.vue
View file

@ -1,43 +1,45 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="project.name"> </button>
{{ i18n.t('projects.index.modal_edit_project.modal_title', {project: project.name}) }} <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="project.name">
</h4> {{ i18n.t('projects.index.modal_edit_project.modal_title', {project: project.name}) }}
</div> </h4>
<div class="modal-body"> </div>
<div class="mb-6"> <div class="modal-body">
<label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label> <div class="mb-6">
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error"> <label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
<input type="text" v-model="name" class="sci-input-field" <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
autofocus="true" <input type="text" v-model="name" class="sci-input-field"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" /> autofocus="true" ref="input"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
</div>
</div>
<div class="flex gap-2 text-xs items-center">
<div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
<span class="sci-checkbox-label"></span>
</div>
<span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
</div> </div>
</div> </div>
<div class="flex gap-2 text-xs items-center"> <div class="modal-footer">
<div class="sci-checkbox-container"> <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/> <button class="btn btn-primary" type="submit">
<span class="sci-checkbox-label"></span> {{ i18n.t('projects.index.modal_edit_project.submit') }}
</div> </button>
<span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
</div> </div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('projects.index.modal_edit_project.submit') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

48
app/javascript/vue/projects/modals/edit_folder.vue
View file

@ -1,32 +1,34 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="folder.name"> </button>
{{ i18n.t('projects.index.modal_edit_folder.title', {folder: folder.name}) }} <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="folder.name">
</h4> {{ i18n.t('projects.index.modal_edit_folder.title', {folder: folder.name}) }}
</div> </h4>
<div class="modal-body"> </div>
<div class="mb-6"> <div class="modal-body">
<label class="sci-label">{{ i18n.t("projects.index.modal_edit_folder.folder_name_field") }}</label> <div class="mb-6">
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error"> <label class="sci-label">{{ i18n.t("projects.index.modal_edit_folder.folder_name_field") }}</label>
<input type="text" v-model="name" <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
class="sci-input-field" autofocus="true" <input type="text" v-model="name"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" /> class="sci-input-field" autofocus="true" ref="input"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
</div>
</div> </div>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('projects.index.modal_edit_folder.submit') }}
</button>
</div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('projects.index.modal_edit_folder.submit') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

71
app/javascript/vue/projects/modals/move.vue
View file

@ -1,44 +1,47 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label"> </button>
{{ this.title }} <h4 class="modal-title truncate !block" id="edit-project-modal-label">
</h4> {{ this.title }}
</div> </h4>
<div class="modal-body"> </div>
<div class="mb-4">{{ this.description }}</div> <div class="modal-body">
<div class="mb-4"> <div class="mb-4">{{ this.description }}</div>
<div class="sci-input-container-v2 left-icon"> <div class="mb-4">
<input type="text" <div class="sci-input-container-v2 left-icon">
v-model="query" <input type="text"
class="sci-input-field" v-model="query"
autofocus="true" class="sci-input-field"
:placeholder="i18n.t('projects.index.modal_move_folder.find_folder')" /> ref="input"
<i class="sn-icon sn-icon-search"></i> autofocus="true"
:placeholder="i18n.t('projects.index.modal_move_folder.find_folder')" />
<i class="sn-icon sn-icon-search"></i>
</div>
</div>
<div class="max-h-80 overflow-y-auto">
<div class="p-2 flex items-center gap-2 cursor-pointer text-sn-blue hover:bg-sn-super-light-grey"
@click="selectFolder(null)"
:class="{'!bg-sn-super-light-blue': selectedFolderId == null}">
<i class="sn-icon sn-icon-projects"></i>
{{ i18n.t('projects.index.modal_move_folder.projects') }}
</div>
<MoveTree :objects="filteredFoldersTree" :value="selectedFolderId" @selectFolder="selectFolder" />
</div> </div>
</div> </div>
<div class="max-h-80 overflow-y-auto"> <div class="modal-footer">
<div class="p-2 flex items-center gap-2 cursor-pointer text-sn-blue hover:bg-sn-super-light-grey" <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
@click="selectFolder(null)" <button class="btn btn-primary" type="submit">
:class="{'!bg-sn-super-light-blue': selectedFolderId == null}"> {{ i18n.t('projects.index.modal_move_folder.submit') }}
<i class="sn-icon sn-icon-projects"></i> </button>
{{ i18n.t('projects.index.modal_move_folder.projects') }}
</div>
<MoveTree :objects="filteredFoldersTree" :value="selectedFolderId" @selectFolder="selectFolder" />
</div> </div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('projects.index.modal_move_folder.submit') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

2
app/javascript/vue/projects/modals/move_tree.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="pl-6" v-for="object in objects" :key="object.folder.id"> <div class="pl-6" v-if="objects.length" v-for="object in objects" :key="object.folder.id">
<div class="flex items-center"> <div class="flex items-center">
<i v-if="object.children.length > 0" <i v-if="object.children.length > 0"
:class="{'sn-icon-up': opendedFolders[object.folder.id], 'sn-icon-down': !opendedFolders[object.folder.id]}" :class="{'sn-icon-up': opendedFolders[object.folder.id], 'sn-icon-down': !opendedFolders[object.folder.id]}"

74
app/javascript/vue/projects/modals/new.vue
View file

@ -1,44 +1,47 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label"> </button>
{{ i18n.t('projects.index.modal_new_project.modal_title') }} <h4 class="modal-title truncate !block" id="edit-project-modal-label">
</h4> {{ i18n.t('projects.index.modal_new_project.modal_title') }}
</div> </h4>
<div class="modal-body"> </div>
<div class="mb-6"> <div class="modal-body">
<label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label> <div class="mb-6">
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error"> <label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
<input type="text" v-model="name" <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
class="sci-input-field" <input type="text" v-model="name"
autofocus="true" class="sci-input-field"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" /> ref="input"
autofocus="true"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
</div>
</div>
<div class="flex gap-2 text-xs items-center">
<div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
<span class="sci-checkbox-label"></span>
</div>
<span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
</div> </div>
</div> </div>
<div class="flex gap-2 text-xs items-center"> <div class="modal-footer">
<div class="sci-checkbox-container"> <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/> <button class="btn btn-primary" type="submit">
<span class="sci-checkbox-label"></span> {{ i18n.t('projects.index.modal_new_project.create') }}
</div> </button>
<span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
</div> </div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('projects.index.modal_new_project.create') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -66,10 +69,12 @@ export default {
visible: false, visible: false,
defaultRole: null, defaultRole: null,
error: null, error: null,
disableSubmit: false
}; };
}, },
methods: { methods: {
submit() { submit() {
this.disableSubmit = true;
axios.post(this.createUrl, { axios.post(this.createUrl, {
project: { project: {
name: this.name, name: this.name,
@ -83,6 +88,7 @@ export default {
}).catch((error) => { }).catch((error) => {
this.error = error.response.data.name; this.error = error.response.data.name;
}); });
this.disableSubmit = false;
}, },
changeRole(role) { changeRole(role) {
this.defaultRole = role; this.defaultRole = role;

48
app/javascript/vue/projects/modals/new_folder.vue
View file

@ -1,32 +1,34 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label"> </button>
{{ i18n.t('projects.index.modal_new_project_folder.modal_title') }} <h4 class="modal-title truncate !block" id="edit-project-modal-label">
</h4> {{ i18n.t('projects.index.modal_new_project_folder.modal_title') }}
</div> </h4>
<div class="modal-body"> </div>
<div class="mb-6"> <div class="modal-body">
<label class="sci-label">{{ i18n.t('projects.index.modal_new_project_folder.name') }}</label> <div class="mb-6">
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error"> <label class="sci-label">{{ i18n.t('projects.index.modal_new_project_folder.name') }}</label>
<input type="text" v-model="name" <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
class="sci-input-field" autofocus="true" <input type="text" v-model="name"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" /> class="sci-input-field" autofocus="true" ref="input"
:placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
</div>
</div> </div>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('projects.index.modal_new_project.create') }}
</button>
</div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('projects.index.modal_new_project.create') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

70
app/javascript/vue/protocols/modals/new.vue
View file

@ -1,44 +1,46 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label"> </button>
{{ i18n.t("protocols.new_protocol_modal.title_new") }} <h4 class="modal-title truncate !block" id="edit-project-modal-label">
</h4> {{ i18n.t("protocols.new_protocol_modal.title_new") }}
</div> </h4>
<div class="modal-body"> </div>
<div class="mb-6"> <div class="modal-body">
<label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.name_label") }}</label> <div class="mb-6">
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error"> <label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.name_label") }}</label>
<input type="text" v-model="name" <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
class="sci-input-field" <input type="text" v-model="name"
autofocus="true" class="sci-input-field"
:placeholder="i18n.t('protocols.new_protocol_modal.name_placeholder')" /> autofocus="true" ref="input"
:placeholder="i18n.t('protocols.new_protocol_modal.name_placeholder')" />
</div>
</div>
<div class="flex gap-2 text-xs items-center">
<div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
<span class="sci-checkbox-label"></span>
</div>
<span v-html="i18n.t('protocols.new_protocol_modal.access_label')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.role_label") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
</div> </div>
</div> </div>
<div class="flex gap-2 text-xs items-center"> <div class="modal-footer">
<div class="sci-checkbox-container"> <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/> <button class="btn btn-primary" type="submit">
<span class="sci-checkbox-label"></span> {{ i18n.t('protocols.new_protocol_modal.create_new') }}
</div> </button>
<span v-html="i18n.t('protocols.new_protocol_modal.access_label')"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.role_label") }}</label>
<SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
</div> </div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('protocols.new_protocol_modal.create_new') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

48
app/javascript/vue/repositories/modals/duplicate.vue
View file

@ -1,32 +1,34 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name"> </button>
{{ i18n.t('repositories.index.modal_copy.title_html', {name: repository.name }) }} <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name">
</h4> {{ i18n.t('repositories.index.modal_copy.title_html', {name: repository.name }) }}
</div> </h4>
<div class="modal-body"> </div>
<div class="mb-6"> <div class="modal-body">
<label class="sci-label">{{ i18n.t("repositories.index.modal_copy.name") }}</label> <div class="mb-6">
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error"> <label class="sci-label">{{ i18n.t("repositories.index.modal_copy.name") }}</label>
<input type="text" v-model="name" class="sci-input-field" <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
autofocus="true" <input type="text" v-model="name" class="sci-input-field"
:placeholder="i18n.t('repositories.index.modal_copy.name_placeholder')" /> autofocus="true" ref="input"
:placeholder="i18n.t('repositories.index.modal_copy.name_placeholder')" />
</div>
</div> </div>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('repositories.index.modal_copy.copy') }}
</button>
</div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('repositories.index.modal_copy.copy') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

48
app/javascript/vue/repositories/modals/edit.vue
View file

@ -1,32 +1,34 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name"> </button>
{{ i18n.t('repositories.index.modal_rename.title_html', {name: repository.name }) }} <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name">
</h4> {{ i18n.t('repositories.index.modal_rename.title_html', {name: repository.name }) }}
</div> </h4>
<div class="modal-body"> </div>
<div class="mb-6"> <div class="modal-body">
<label class="sci-label">{{ i18n.t("repositories.index.modal_rename.name") }}</label> <div class="mb-6">
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error"> <label class="sci-label">{{ i18n.t("repositories.index.modal_rename.name") }}</label>
<input type="text" v-model="name" class="sci-input-field" <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
autofocus="true" <input type="text" v-model="name" class="sci-input-field"
:placeholder="i18n.t('repositories.index.modal_rename.name_placeholder')" /> autofocus="true" ref="input"
:placeholder="i18n.t('repositories.index.modal_rename.name_placeholder')" />
</div>
</div> </div>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('repositories.index.modal_rename.rename') }}
</button>
</div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('repositories.index.modal_rename.rename') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

50
app/javascript/vue/repositories/modals/new.vue
View file

@ -1,33 +1,35 @@
<template> <template>
<div ref="modal" class="modal" tabindex="-1" role="dialog"> <div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <form @submit.prevent="submit">
<div class="modal-header"> <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <div class="modal-header">
<i class="sn-icon sn-icon-close"></i> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <i class="sn-icon sn-icon-close"></i>
<h4 class="modal-title truncate !block" id="edit-project-modal-label"> </button>
{{ i18n.t('repositories.index.modal_create.title') }} <h4 class="modal-title truncate !block" id="edit-project-modal-label">
</h4> {{ i18n.t('repositories.index.modal_create.title') }}
</div> </h4>
<div class="modal-body"> </div>
<div class="mb-6"> <div class="modal-body">
<label class="sci-label">{{ i18n.t("repositories.index.modal_create.name_label") }}</label> <div class="mb-6">
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error"> <label class="sci-label">{{ i18n.t("repositories.index.modal_create.name_label") }}</label>
<input type="text" v-model="name" <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
class="sci-input-field" <input type="text" v-model="name"
autofocus="true" class="sci-input-field"
:placeholder="i18n.t('repositories.index.modal_create.name_placeholder')" /> autofocus="true" ref="input"
:placeholder="i18n.t('repositories.index.modal_create.name_placeholder')" />
</div>
</div> </div>
</div> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit">
{{ i18n.t('repositories.index.modal_create.submit') }}
</button>
</div>
</div> </div>
<div class="modal-footer"> </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" @click="submit" type="submit">
{{ i18n.t('repositories.index.modal_create.submit') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

4
app/javascript/vue/shared/access_modal/assign_flyout.vue
View file

@ -8,6 +8,7 @@
<div class="sci-input-container-v2 left-icon"> <div class="sci-input-container-v2 left-icon">
<input type="text" v-model="query" class="sci-input-field" <input type="text" v-model="query" class="sci-input-field"
autofocus="true" autofocus="true"
ref="input"
:placeholder="i18n.t('access_permissions.partials.new_assignments_form.find_people_html')" /> :placeholder="i18n.t('access_permissions.partials.new_assignments_form.find_people_html')" />
<i class="sn-icon sn-icon-search"></i> <i class="sn-icon sn-icon-search"></i>
</div> </div>
@ -80,6 +81,9 @@ export default {
mounted() { mounted() {
this.getUnAssignedUsers(); this.getUnAssignedUsers();
this.getRoles(); this.getRoles();
this.$nextTick(() => {
this.$refs.input?.focus();
});
}, },
components: { components: {
MenuDropdown, MenuDropdown,

1
app/javascript/vue/shared/modal_mixin.js
View file

@ -1,6 +1,7 @@
export default { export default {
mounted() { mounted() {
$(this.$refs.modal).modal('show'); $(this.$refs.modal).modal('show');
this.$refs.input?.focus();
$(this.$refs.modal).on('hidden.bs.modal', () => { $(this.$refs.modal).on('hidden.bs.modal', () => {
this.$emit('close'); this.$emit('close');
}); });