scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-03-04 19:53:19 +08:00
Code Issues Projects Releases Packages Wiki Activity

Update project/experiment cards

Browse source
This commit is contained in:
Anton 2024-03-01 13:37:31 +01:00
parent ff0ef34633
commit c1561f01f7
6 changed files with 71 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
app/javascript/vue/experiments/card.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="p-4 rounded sn-shadow-flyout flex flex-col"
<div class="px-3 pt-3 pb-4 rounded border-solid border border-sn-gray flex flex-col"
:class="{'bg-sn-light-grey': dtComponent.currentViewMode === 'archived'}">
<div class="flex items-center gap-2 mb-2">
<div class="flex items-center gap-4 mb-2">
<div class="sci-checkbox-container">
<input
type="checkbox"
@ -14,45 +14,52 @@
<RowMenuRenderer :params="{data: params, dtComponent: dtComponent}" class="ml-auto"/>
</div>
<a :href="params.urls.show"
:title="params.name"
:class="{'pointer-events-none text-sn-grey': !params.urls.show}"
class="font-bold mb-4 text-sn-black hover:no-underline hover:text-sn-black">
class="font-bold mb-4 text-sn-blue hover:no-underline line-clamp-2 hover:text-sn-blue h-10">
{{ params.name }}
</a>
<div class="flex">
<div class="grid gap-2 grid-cols-[100px_auto] mt-auto">
<span class="text-sn-grey">{{ i18n.t('experiments.card.start_date') }}</span>
<div class="flex gap-4 mb-2.5">
<div class="grid grow gap-x-2 gap-y-3 grid-cols-[100px_auto] mt-auto text-xs">
<span class="text-sn-dark-grey">{{ i18n.t('experiments.card.start_date') }}</span>
<span class="font-bold">{{ params.created_at }}</span>
<span class="text-sn-grey">{{ i18n.t('experiments.card.modified_date') }}</span>
<span class="font-bold">{{ params.updated_at }}</span>
<template v-if="dtComponent.viewMode == 'archived'">
<span class="text-sn-grey">{{ i18n.t('experiments.card.archived_date') }}</span>
<span class="text-sn-dark-grey">{{ i18n.t('experiments.card.archived_date') }}</span>
<span class="font-bold">{{ params.archived_on }}</span>
</template>
<template v-else>
<span class="text-sn-dark-grey">{{ i18n.t('experiments.card.modified_date') }}</span>
<span class="font-bold">{{ params.updated_at }}</span>
</template>
<span class="text-sn-grey">{{ i18n.t('experiments.card.completed_task') }}</span>
<span class="font-bold">{{ i18n.t(
'experiments.card.completed_value', {
completed: params.completed_tasks,
all: params.total_tasks
}
) }}</span>
<span class="text-sn-dark-grey">{{ i18n.t('experiments.card.completed_task') }}</span>
<div class="w-full">
<span class="font-bold">{{ i18n.t(
'experiments.card.completed_value', {
completed: params.completed_tasks,
all: params.total_tasks
}
) }}</span>
<div class="w-full h-1 bg-sn-sleepy-grey">
<div class="h-full"
:class="{
'bg-sn-black': dtComponent.viewMode == 'archived',
'bg-sn-blue': dtComponent.viewMode != 'archived'
}"
:style="{
width: params.completed_tasks / params.total_tasks * 100 + '%'
}"></div>
</div>
</div>
</div>
<div class="h-20 w-20 p-0.5 bg-sn-light-grey rounded-sm shrink-0 ml-auto relative">
<div class="h-20 w-20 p-0.5 bg-sn-sleepy-grey rounded-sm shrink-0 ml-auto relative">
<div v-if="imageLoading" class="flex absolute top-0 items-center justify-center w-full flex-grow h-full z-10">
<img src="/images/medium/loading.svg" alt="Loading" />
</div>
<img v-else :src="workflow_img" class="max-h-18 max-w-[72px]">
</div>
</div>
<div class="py-2">
<div class="w-full h-1 bg-sn-light-grey">
<div class="h-full bg-sn-blue" :style="{
width: params.completed_tasks / params.total_tasks * 100 + '%'
}"></div>
</div>
</div>
<Description :params="{data: params, value: params.description, dtComponent: dtComponent}" />
</div>
</template>

27
app/javascript/vue/experiments/renderers/description.vue
View file

@ -1,11 +1,18 @@
<template>
<div class="group relative flex items-center group-hover:marker">
<span v-if="shouldTruncateText"
class="line-clamp-1 cursor-pointer"
@click.stop="showDescriptionModal"
v-html="params.data.sa_description">
</span>
<span v-else v-html="params.data.sa_description"></span>
<div class="group relative flex items-center group-hover:marker text-xs">
<div class="flex items-end gap-2">
<span v-if="shouldTruncateText"
class="cursor-pointer grow"
:class="{
'line-clamp-1': params.dtComponent.currentViewRender === 'table',
'line-clamp-2': params.dtComponent.currentViewRender === 'cards'
}"
@click.stop="showDescriptionModal"
v-html="params.data.sa_description">
</span>
<span v-else class="grow" v-html="params.data.sa_description"></span>
<span v-if="shouldTruncateText" @click.stop="showDescriptionModal" class="text-sn-blue cursor-pointer shrink-0 text-sm">{{ i18n.t('experiments.card.more') }}</span>
</div>
</div>
</template>
@ -14,13 +21,13 @@ export default {
name: 'DescriptionRenderer',
props: {
params: {
required: true,
},
required: true
}
},
computed: {
shouldTruncateText() {
return this.params.data.description.length > 80;
},
}
},
methods: {
showDescriptionModal() {

21
app/javascript/vue/projects/card.vue
View file

@ -1,8 +1,8 @@
<template>
<div v-if="!params.folder"
:class="{'bg-sn-light-grey': dtComponent.currentViewMode === 'archived'}"
class="p-4 rounded sn-shadow-flyout flex flex-col">
<div class="flex items-center gap-2 mb-2">
class="px-3 pt-3 pb-4 rounded border-solid border border-sn-gray flex flex-col">
<div class="flex items-center gap-4 mb-2">
<div class="sci-checkbox-container">
<input
type="checkbox"
@ -15,19 +15,24 @@
<RowMenuRenderer :params="{data: params, dtComponent: dtComponent}" class="ml-auto"/>
</div>
<a :href="params.urls.show"
:title="params.name"
:class="{'pointer-events-none text-sn-grey': !params.urls.show}"
class="font-bold mb-4 text-sn-black hover:no-underline hover:text-sn-black">
class="font-bold mb-4 text-sn-blue hover:no-underline line-clamp-3 hover:text-sn-blue h-14">
{{ params.name }}
</a>
<div class="grid gap-2 grid-cols-[80px_auto] mt-auto">
<span class="text-sn-grey">{{ i18n.t('projects.index.card.start_date') }}</span>
<div class="grid gap-x-2 gap-y-3 grid-cols-[90px_auto] mt-auto text-xs">
<span class="text-sn-dark-grey">{{ i18n.t('projects.index.card.start_date') }}</span>
<span class="font-bold">{{ params.created_at }}</span>
<template v-if="dtComponent.viewMode == 'archived'">
<span class="text-sn-grey">{{ i18n.t('projects.index.card.archived_date') }}</span>
<template v-if="dtComponent.currentViewMode == 'archived'">
<span class="text-sn-dark-grey">{{ i18n.t('projects.index.card.archived_date') }}</span>
<span class="font-bold">{{ params.archived_on }}</span>
</template>
<span class="text-sn-grey">{{ i18n.t('projects.index.card.users') }}</span>
<template v-else>
<span class="text-sn-dark-grey">{{ i18n.t('projects.index.card.updated_on') }}</span>
<span class="font-bold">{{ params.updated_at }}</span>
</template>
<span class="text-sn-dark-grey">{{ i18n.t('projects.index.card.users') }}</span>
<UsersRenderer :params="{data: params, value: params.users, dtComponent: dtComponent}" class="-mt-2.5" />
</div>
</div>

4
app/javascript/vue/protocol/protocolMetadata.vue
View file

@ -141,7 +141,9 @@ export default {
},
methods: {
saveAsdraft() {
$.post(this.protocol.attributes.urls.save_as_draft_url);
$.post(this.protocol.attributes.urls.save_as_draft_url, (result) => {
window.location.replace(result.url);
});
},
updateAuthors(authors) {
$.ajax({

1
app/javascript/vue/shared/datatable/table.vue
View file

@ -534,6 +534,7 @@ export default {
if (this.currentViewRender === view) return;
this.currentViewRender = view;
this.saveTableState();
this.initializing = true;
this.selectedRows = [];
},

9
config/locales/en.yml
View file

@ -567,7 +567,8 @@ en:
comment_placeholder: "Your Message"
more_comments: "More Comments"
card:
start_date: "Started on"
start_date: "Created on"
updated_on: "Updated on"
id: "ID"
visibility: "Visible to"
users: "Access"
@ -1464,13 +1465,13 @@ en:
card:
name: "Experiment name"
id: "ID"
start_date: "Started on"
modified_date: "Modified date"
start_date: "Created on"
modified_date: "Updated on"
archived_date: "Archived on"
completed_task: "Completed"
completed_value: "%{completed}/%{all} tasks"
description: "Description"
more: "more"
more: "More"
index:
edit_option: "Edit"
clone_option: "Duplicate"