scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-13 00:24:42 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6508 from aignatov-bio/ai-sci-9576-add-drag-n-drop-to-results

Browse source 
Fix drag n drop on results
This commit is contained in:
aignatov-bio 2023-10-20 09:43:49 +02:00 • committed by GitHub
commit 453bdf0082
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 140 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
app/assets/stylesheets/steps/step.scss
View file

@ -170,35 +170,35 @@
pointer-events: none; pointer-events: none;
} }
} }
}
.storage-usage { .storage-usage {
@include font-small; @include font-small;
align-self: center; align-self: center;
color: $color-black; color: $color-black;
display: flex; display: flex;
margin-top: 1em; margin-top: 1em;
width: 400px; width: 400px;
.progress-container { .progress-container {
background-color: $color-white; background-color: $color-white;
border-radius: 2px; border-radius: 2px;
flex-grow: 1; flex-grow: 1;
height: 4px; height: 4px;
margin: 1em 1em 1em 0; margin: 1em 1em 1em 0;
overflow: hidden; overflow: hidden;
position: relative;
.progress-bar {
background-color: $brand-primary;
height: 100%;
position: relative; position: relative;
transition: 1s $timing-function-sharp;
.progress-bar {
background-color: $brand-primary;
height: 100%;
position: relative;
transition: 1s $timing-function-sharp;
}
} }
}
.progress-message { .progress-message {
line-height: 2em; line-height: 2em;
}
} }
} }

226
app/javascript/vue/results/result.vue
View file

@ -5,124 +5,127 @@
@dragover.prevent @dragover.prevent
:class="{ 'bg-sn-super-light-blue': dragingFile, 'bg-white': !dragingFile }" :class="{ 'bg-sn-super-light-blue': dragingFile, 'bg-white': !dragingFile }"
> >
<div class="text-xl items-center flex text-sn-blue h-full justify-center left-0 absolute top-0 w-full" <div class="text-xl items-center flex flex-col text-sn-blue h-full justify-center left-0 absolute top-0 w-full"
v-if="dragingFile" v-if="dragingFile"
@dragleave.prevent="dragingFile = false"> @dragleave.prevent="dragingFile = false">
{{ i18n.t('my_modules.results.drop_message', { name: result.attributes.name }) }} {{ i18n.t('my_modules.results.drop_message', { name: result.attributes.name }) }}
<StorageUsage v-if="showStorageUsage()" :parent="result"/> <StorageUsage v-if="showStorageUsage()" :parent="result"/>
</div> </div>
<div class="result-header flex justify-between" :class="{ 'opacity-0 pointer-events-none': dragingFile }"> <div :class="{ 'opacity-0 pointer-events-none': dragingFile }">
<div class="result-head-left flex items-start flex-grow gap-4"> <div class="result-header flex justify-between">
<a class="result-collapse-link hover:no-underline focus:no-underline py-0.5 border-0 border-y border-transparent border-solid text-sn-black" <div class="result-head-left flex items-start flex-grow gap-4">
:href="'#resultBody' + result.id" <a class="result-collapse-link hover:no-underline focus:no-underline py-0.5 border-0 border-y border-transparent border-solid text-sn-black"
data-toggle="collapse" :href="'#resultBody' + result.id"
data-remote="true"> data-toggle="collapse"
<span class="sn-icon sn-icon-right "></span> data-remote="true"
</a> @click="toggleCollapsed">
<InlineEdit <span class="sn-icon sn-icon-right "></span>
:value="result.attributes.name" </a>
class="flex-grow font-bold text-base" <InlineEdit
:class="{ 'pointer-events-none': !urls.update_url }" :value="result.attributes.name"
:singleLine="false" class="flex-grow font-bold text-base"
:characterLimit="255" :class="{ 'pointer-events-none': !urls.update_url }"
:allowBlank="false" :singleLine="false"
:attributeName="`${i18n.t('Result')} ${i18n.t('name')}`" :characterLimit="255"
:autofocus="editingName" :allowBlank="false"
:placeholder="i18n.t('my_modules.results.placeholder')" :attributeName="`${i18n.t('Result')} ${i18n.t('name')}`"
:defaultValue="i18n.t('my_modules.results.default_name')" :autofocus="editingName"
:timestamp="i18n.t('protocols.steps.timestamp', {date: result.attributes.created_at, user: result.attributes.created_by })" :placeholder="i18n.t('my_modules.results.placeholder')"
@editingEnabled="editingName = true" :defaultValue="i18n.t('my_modules.results.default_name')"
@editingDisabled="editingName = false" :timestamp="i18n.t('protocols.steps.timestamp', {date: result.attributes.created_at, user: result.attributes.created_by })"
:editOnload="result.newResult == true" @editingEnabled="editingName = true"
@update="updateName" @editingDisabled="editingName = false"
/> :editOnload="result.newResult == true"
</div> @update="updateName"
<div class="result-head-right flex elements-actions-container"> />
<input type="file" class="hidden" ref="fileSelector" @change="loadFromComputer" multiple /> </div>
<MenuDropdown <div class="result-head-right flex elements-actions-container">
:listItems="this.insertMenu" <input type="file" class="hidden" ref="fileSelector" @change="loadFromComputer" multiple />
:btnText="i18n.t('my_modules.results.insert.button')" <MenuDropdown
:position="'right'" :listItems="this.insertMenu"
:caret="true" :btnText="i18n.t('my_modules.results.insert.button')"
@create:table="(args) => args ? this.createElement('table', ...args) : this.createElement('table')" :position="'right'"
@create:checklist="createElement('checklist')" :caret="true"
@create:text="createElement('text')" @create:table="(args) => args ? this.createElement('table', ...args) : this.createElement('table')"
@create:file="openLoadFromComputer" @create:checklist="createElement('checklist')"
@create:wopi_file="openWopiFileModal" @create:text="createElement('text')"
@create:ove_file="openOVEditor" @create:file="openLoadFromComputer"
@create:marvinjs_file="openMarvinJsModal($refs.marvinJsButton)" @create:wopi_file="openWopiFileModal"
></MenuDropdown> @create:ove_file="openOVEditor"
<span @create:marvinjs_file="openMarvinJsModal($refs.marvinJsButton)"
class="new-marvinjs-upload-button hidden" ></MenuDropdown>
:data-object-id="result.id" <span
ref="marvinJsButton" class="new-marvinjs-upload-button hidden"
:data-marvin-url="result.attributes.marvinjs_context?.marvin_js_asset_url" :data-object-id="result.id"
:data-object-type="result.attributes.type" ref="marvinJsButton"
tabindex="0" :data-marvin-url="result.attributes.marvinjs_context?.marvin_js_asset_url"
></span> <!-- Hidden element to support legacy code --> :data-object-type="result.attributes.type"
tabindex="0"
></span> <!-- Hidden element to support legacy code -->
<a href="#" <a href="#"
ref="comments" ref="comments"
class="open-comments-sidebar btn icon-btn btn-light" class="open-comments-sidebar btn icon-btn btn-light"
data-turbolinks="false" data-turbolinks="false"
data-object-type="Result" data-object-type="Result"
:data-object-id="result.id"> :data-object-id="result.id">
<i class="sn-icon sn-icon-comments"></i> <i class="sn-icon sn-icon-comments"></i>
<span class="comments-counter" v-if="result.attributes.comments_count" <span class="comments-counter" v-if="result.attributes.comments_count"
:id="`comment-count-${result.id}`"> :id="`comment-count-${result.id}`">
{{ result.attributes.comments_count }} {{ result.attributes.comments_count }}
</span> </span>
</a> </a>
<MenuDropdown <MenuDropdown
v-if="!locked" v-if="!locked"
:listItems="this.actionsMenu" :listItems="this.actionsMenu"
:btnClasses="'btn btn-light icon-btn'" :btnClasses="'btn btn-light icon-btn'"
:position="'right'" :position="'right'"
:btnIcon="'sn-icon sn-icon-more-hori'" :btnIcon="'sn-icon sn-icon-more-hori'"
@reorder="openReorderModal" @reorder="openReorderModal"
@duplicate="duplicateResult" @duplicate="duplicateResult"
@archive="archiveResult" @archive="archiveResult"
@restore="restoreResult" @restore="restoreResult"
@delete="showDeleteModal" @delete="showDeleteModal"
></MenuDropdown> ></MenuDropdown>
</div>
</div> </div>
</div> <deleteResultModal v-if="confirmingDelete" @confirm="deleteResult" @cancel="closeDeleteModal"/>
<deleteResultModal v-if="confirmingDelete" @confirm="deleteResult" @cancel="closeDeleteModal"/>
<ReorderableItemsModal v-if="reordering" <ReorderableItemsModal v-if="reordering"
:title="i18n.t('my_modules.modals.reorder_results.title')" :title="i18n.t('my_modules.modals.reorder_results.title')"
:items="reorderableElements" :items="reorderableElements"
@reorder="updateElementOrder" @reorder="updateElementOrder"
@close="closeReorderModal" @close="closeReorderModal"
/> />
<div class="collapse in pl-10" :class="{ 'opacity-0 pointer-events-none': dragingFile }" :id="'resultBody' + result.id"> <div class="collapse in pl-10" :id="'resultBody' + result.id">
<div v-for="(element, index) in orderedElements" :key="element.id"> <div v-for="(element, index) in orderedElements" :key="element.id">
<component <component
:is="elements[index].attributes.orderable_type" :is="elements[index].attributes.orderable_type"
:element.sync="elements[index]" :element.sync="elements[index]"
:inRepository="false" :inRepository="false"
:reorderElementUrl="elements.length > 1 ? urls.reorder_elements_url : ''" :reorderElementUrl="elements.length > 1 ? urls.reorder_elements_url : ''"
:assignableMyModuleId="result.attributes.my_module_id" :assignableMyModuleId="result.attributes.my_module_id"
:isNew="element.isNew" :isNew="element.isNew"
@component:delete="deleteElement" @component:delete="deleteElement"
@update="updateElement" @update="updateElement"
@reorder="openReorderModal" @reorder="openReorderModal"
@component:insert="insertElement" @component:insert="insertElement"
@moved="moveElement" @moved="moveElement"
/> />
</div>
<Attachments v-if="attachments.length"
:parent="result"
:attachments="attachments"
:attachmentsReady="attachmentsReady"
@attachments:openFileModal="showFileModal = true"
@attachment:deleted="attachmentDeleted"
@attachment:uploaded="loadAttachments"
@attachment:moved="moveAttachment"
@attachments:order="changeAttachmentsOrder"
@attachments:viewMode="changeAttachmentsViewMode"
@attachment:viewMode="updateAttachmentViewMode"/>
</div> </div>
<Attachments v-if="attachments.length"
:parent="result"
:attachments="attachments"
:attachmentsReady="attachmentsReady"
@attachments:openFileModal="showFileModal = true"
@attachment:deleted="attachmentDeleted"
@attachment:uploaded="loadAttachments"
@attachment:moved="moveAttachment"
@attachments:order="changeAttachmentsOrder"
@attachments:viewMode="changeAttachmentsViewMode"
@attachment:viewMode="updateAttachmentViewMode"/>
</div> </div>
</div> </div>
</template> </template>
@ -149,7 +152,6 @@
result: { type: Object, required: true }, result: { type: Object, required: true },
resultToReload: { type: Number, required: false }, resultToReload: { type: Number, required: false },
activeDragResult: { activeDragResult: {
type: Number,
required: false required: false
} }
}, },
@ -170,7 +172,8 @@
{ text: I18n.t('protocols.steps.insert.well_plate_options.2_x_3'), emit: 'create:table', params: [[2, 3], true] } { text: I18n.t('protocols.steps.insert.well_plate_options.2_x_3'), emit: 'create:table', params: [[2, 3], true] }
], ],
editingName: false, editingName: false,
confirmingDelete: false confirmingDelete: false,
isCollapsed: false
} }
}, },
mixins: [UtilsMixin, AttachmentsMixin, WopiFileModal, OveMixin], mixins: [UtilsMixin, AttachmentsMixin, WopiFileModal, OveMixin],
@ -300,6 +303,9 @@
this.loadElements(); this.loadElements();
}, },
methods: { methods: {
toggleCollapsed() {
this.isCollapsed = !this.isCollapsed;
},
dragEnter(e) { dragEnter(e) {
if (!this.urls.upload_attachment_url) return; if (!this.urls.upload_attachment_url) return;