From c1561f01f76b59ee6ab461f6b2bcff4d7ee8821f Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Fri, 1 Mar 2024 13:37:31 +0100
Subject: [PATCH] Update project/experiment cards

---
 app/javascript/vue/experiments/card.vue       | 57 +++++++++++--------
 .../vue/experiments/renderers/description.vue | 27 +++++----
 app/javascript/vue/projects/card.vue          | 21 ++++---
 .../vue/protocol/protocolMetadata.vue         |  4 +-
 app/javascript/vue/shared/datatable/table.vue |  1 +
 config/locales/en.yml                         |  9 +--
 6 files changed, 71 insertions(+), 48 deletions(-)

diff --git a/app/javascript/vue/experiments/card.vue b/app/javascript/vue/experiments/card.vue
index bf3417b85..faa454b3f 100644
--- a/app/javascript/vue/experiments/card.vue
+++ b/app/javascript/vue/experiments/card.vue
@@ -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>
diff --git a/app/javascript/vue/experiments/renderers/description.vue b/app/javascript/vue/experiments/renderers/description.vue
index e2befe7bf..bf6d5d4f1 100644
--- a/app/javascript/vue/experiments/renderers/description.vue
+++ b/app/javascript/vue/experiments/renderers/description.vue
@@ -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() {
diff --git a/app/javascript/vue/projects/card.vue b/app/javascript/vue/projects/card.vue
index ec745f00f..bddf570f3 100644
--- a/app/javascript/vue/projects/card.vue
+++ b/app/javascript/vue/projects/card.vue
@@ -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>
diff --git a/app/javascript/vue/protocol/protocolMetadata.vue b/app/javascript/vue/protocol/protocolMetadata.vue
index cb84a716d..0701695b5 100644
--- a/app/javascript/vue/protocol/protocolMetadata.vue
+++ b/app/javascript/vue/protocol/protocolMetadata.vue
@@ -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({
diff --git a/app/javascript/vue/shared/datatable/table.vue b/app/javascript/vue/shared/datatable/table.vue
index 6b9ce24ca..990785ac3 100644
--- a/app/javascript/vue/shared/datatable/table.vue
+++ b/app/javascript/vue/shared/datatable/table.vue
@@ -534,6 +534,7 @@ export default {
       if (this.currentViewRender === view) return;
 
       this.currentViewRender = view;
+      this.saveTableState();
       this.initializing = true;
       this.selectedRows = [];
     },
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 3a427d56c..1d2d0d052 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -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"