From 7c654f80c4f83936a9c70c4d20288f9786effdeb Mon Sep 17 00:00:00 2001
From: Venkata Chandra Sekhar Nainala <mailcs76@gmail.com>
Date: Fri, 17 Nov 2023 00:19:50 +0100
Subject: [PATCH] fix: updated study public card and other bug fixes

---
 app/Http/Controllers/API/SearchController.php |   2 +-
 app/Http/Resources/StudyResource.php          |   1 +
 app/Models/Study.php                          |  12 ++
 resources/js/Shared/StudyCard.vue             |  40 -----
 resources/js/Shared/StudyCardPublic.vue       | 156 +++++++++++++++---
 5 files changed, 150 insertions(+), 61 deletions(-)

diff --git a/app/Http/Controllers/API/SearchController.php b/app/Http/Controllers/API/SearchController.php
index f4dd4ff8..020fa5be 100644
--- a/app/Http/Controllers/API/SearchController.php
+++ b/app/Http/Controllers/API/SearchController.php
@@ -269,7 +269,7 @@ public function search(Request $request)
                         $offset;
                 } else {
                     $statement =
-                        'select id, COUNT(*) OVER () from mols limit '.
+                        'select id, COUNT(*) OVER () from molecules WHERE identifier NOTNULL limit '.
                         $limit.
                         ' offset '.
                         $offset;
diff --git a/app/Http/Resources/StudyResource.php b/app/Http/Resources/StudyResource.php
index 570b4485..43387af2 100644
--- a/app/Http/Resources/StudyResource.php
+++ b/app/Http/Resources/StudyResource.php
@@ -42,6 +42,7 @@ public function toArray($request)
             'public_url' => $this->public_url ? $this->public_url : null,
             'updated_at' => $this->updated_at,
             'study_preview_urls' => $this->study_preview_urls,
+            'experiment_types' => $this->study_experiment_types,
             'download_url' => $this->download_url,
             'has_nmrium' => $this->has_nmrium,
             $this->mergeWhen(! $this->lite, function () {
diff --git a/app/Models/Study.php b/app/Models/Study.php
index e528d192..fd0f97a5 100644
--- a/app/Models/Study.php
+++ b/app/Models/Study.php
@@ -124,6 +124,18 @@ public function getStudyPreviewUrlsAttribute()
         return $urls;
     }
 
+
+    /**
+     * Get the experiment types performed on this sample.
+     *
+     * @return string
+     */
+    public function getStudyExperimentTypesAttribute()
+    {
+        $experiment_types = $this->datasets->pluck('type');
+        return $experiment_types;
+    }
+
     public function project()
     {
         return $this->belongsTo(Project::class, 'project_id');
diff --git a/resources/js/Shared/StudyCard.vue b/resources/js/Shared/StudyCard.vue
index e675144a..e3f97232 100644
--- a/resources/js/Shared/StudyCard.vue
+++ b/resources/js/Shared/StudyCard.vue
@@ -45,46 +45,6 @@
                 </ul>
                 <div class="bg-white"></div>
             </div>
-            <!-- <span
-                v-if="
-                    study.photo_url ||
-                    (study.study_preview_urls &&
-                        study.study_preview_urls.length > 0) ||
-                    (study.sample &&
-                        study.sample.molecules &&
-                        study.sample.molecules.length > 0)
-                "
-            >
-                <ul v-if="study.molecules.length > 0" role="list">
-                    <li
-                        class="col-span-1 divide-y divide-gray-200 cursor-pointer"
-                    >
-                        <div
-                            class="bg-white absolute top-0 left-0 bg-white opacity-80 item-center w-full rounded-t-md flex justify-center items-center"
-                        >
-                            <span
-                                ><div
-                                    v-html="getSVGString(study.molecules[0])"
-                                ></div
-                            ></span>
-                        </div>
-                    </li>
-                </ul>
-
-                <img
-                    class="h-48 w-full rounded-t-md shadow-lg"
-                    v-if="study.photo_url"
-                    :src="study.photo_url"
-                    alt="study.name"
-                />
-            </span>
-            <span v-else>
-                <img
-                    class="12rem w-full rounded-t-md shadow-lg"
-                    src="https://via.placeholder.com/340x180/FFF/f1f1f4?text=No preview"
-                    alt=""
-                />
-            </span> -->
         </div>
         <div class="flex-1 border-t bg-white p-3 flex flex-col justify-between">
             <div>
diff --git a/resources/js/Shared/StudyCardPublic.vue b/resources/js/Shared/StudyCardPublic.vue
index ca8f67ca..0128f996 100644
--- a/resources/js/Shared/StudyCardPublic.vue
+++ b/resources/js/Shared/StudyCardPublic.vue
@@ -3,14 +3,13 @@
         v-if="study"
         class="flex flex-col border rounded-lg shadow-lg transition ease-in-out delay-150 duration-300 overflow-hidden"
     >
-        <Link :href="study.public_url">
-            <div>
-                <ul role="list">
+        <div>
+            <!-- <ul role="list">
                     <li
                         class="col-span-1 divide-y divide-gray-200 cursor-pointer"
                     >
                         <div
-                            class="h-64 bg-white rounded-t-md flex justify-center items-center"
+                            class="h-48 bg-white rounded-t-md flex justify-center items-center"
                         >
                             <span
                                 v-if="
@@ -28,12 +27,120 @@
                             </span>
                         </div>
                     </li>
-                </ul>
-                <div class="bg-white"></div>
+                </ul> -->
+            <!-- <div class="h-48">
+                
+
+                    <span v-if="study.photo_url && study.photo_url != ''">
+                        <img
+                            class="h-48 w-full rounded-t-md"
+                            v-if="study.photo_url"
+                            :src="study.photo_url"
+                            alt="study.name"
+                        />
+                    </span>
+                    <span
+                        v-if="
+                            study.study_preview_urls &&
+                            study.study_preview_urls.length > 0
+                        "
+                    >
+                        <span v-for="url in study.study_preview_urls">
+                            <img
+                                class="h-48 w-full rounded-t-md"
+                                :src="url"
+                                alt="study.name"
+                            />
+                        </span>
+                    </span>
+                </div>
+                <div class="bg-white"></div> -->
+            <div>
+                <span
+                    v-if="
+                        study.study_preview_urls &&
+                        study.study_preview_urls.length > 0
+                    "
+                >
+                    <span v-if="study.study_preview_urls.length == 1">
+                        <img
+                            class="h-48 w-full rounded-t-md"
+                            :src="study.study_preview_urls[0]"
+                            alt=""
+                        />
+                    </span>
+                    <span v-else>
+                        <div class="relative">
+                            <span
+                                v-for="(url, index) in study.study_preview_urls"
+                                :key="url"
+                            >
+                                <span v-if="index == selectedPreviewIndex">
+                                    <img
+                                        class="h-48 w-full rounded-t-md"
+                                        :src="url"
+                                        alt=""
+                                    />
+                                </span>
+                            </span>
+
+                            <div
+                                class="absolute w-full py-2.5 bottom-0 inset-x-0 pl-4 text-white text-xs text-center leading-4"
+                            >
+                                <div>
+                                    <ol
+                                        role="list"
+                                        class="flex items-center space-x-2"
+                                    >
+                                        <li
+                                            v-for="(
+                                                url, index
+                                            ) in study.study_preview_urls"
+                                            :key="index"
+                                        >
+                                            <a
+                                                v-if="
+                                                    index ===
+                                                    selectedPreviewIndex
+                                                "
+                                                class="block w-2.5 h-2.5 bg-teal-200 rounded-full hover:bg-teal-400"
+                                                @click.prevent="
+                                                    selectedPreviewIndex = index
+                                                "
+                                            >
+                                            </a>
+                                            <a
+                                                v-else
+                                                class="cursor-pointer block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400"
+                                                @click.prevent="
+                                                    selectedPreviewIndex = index
+                                                "
+                                            >
+                                            </a>
+                                        </li>
+                                    </ol>
+                                </div>
+                            </div>
+                        </div>
+                        <span
+                            class="bg-gradient-to-r from-cyan-500 to-blue-500"
+                        >
+                        </span>
+                    </span>
+                </span>
+                <span v-else>
+                    <img
+                        class="h-48 w-full rounded-t-md"
+                        src="https://via.placeholder.com/340x180/FFF/f1f1f4?text=No preview"
+                        alt=""
+                    />
+                </span>
             </div>
-            <div
-                class="flex-1 bg-white p-3 border-t mt-1 flex flex-col justify-between"
-            >
+        </div>
+        <div
+            class="flex-1 bg-white p-3 border-t mt-1 flex flex-col justify-between"
+        >
+            <Link :href="study.public_url">
                 <div>
                     <small
                         v-if="study.identifier"
@@ -53,22 +160,31 @@
                         </div>
                     </div>
                 </div>
+            </Link>
 
-                <div class="flex-1">
-                    <p
-                        class="text-lg mt-2 font-semibold text-gray-900 line-clamp-1"
+            <div class="flex-1">
+                <p
+                    class="text-lg mt-2 font-semibold text-gray-900 line-clamp-1"
+                >
+                    {{ study.name }}
+                </p>
+                <div class="mt-1 h-14 overflow-hidden">
+                    <span
+                        v-for="type in study.experiment_types"
+                        :key="type"
+                        class="mt-1 inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
                     >
-                        {{ study.name }}
-                    </p>
+                        {{ type }}
+                    </span>
                 </div>
-                <div class="pt-1">
-                    <div class="text-xs text-gray-600">
-                        <span class="text-gray-400">Last updated on</span>
-                        {{ formatDate(study.updated_at) }}
-                    </div>
+            </div>
+            <div class="pt-1">
+                <div class="text-xs text-gray-600">
+                    <span class="text-gray-400">Last updated on</span>
+                    {{ formatDate(study.updated_at) }}
                 </div>
             </div>
-        </Link>
+        </div>
     </div>
 </template>