Skip to content

Commit

Permalink
fix: updated study public card and other bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@CS76
CS76 committed Nov 16, 2023
1 parent bb3d701 commit 7c654f8
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 61 deletions.
2 changes: 1 addition & 1 deletion app/Http/Controllers/API/SearchController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions app/Http/Resources/StudyResource.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down
12 changes: 12 additions & 0 deletions app/Models/Study.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
40 changes: 0 additions & 40 deletions resources/js/Shared/StudyCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
156 changes: 136 additions & 20 deletions resources/js/Shared/StudyCardPublic.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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="
Expand All @@ -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"
Expand All @@ -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>

Expand Down

0 comments on commit 7c654f8

Please sign in to comment.