Merge pull request #908 from NFDI4Chem/development

Development
NFDI4Chem · Nov 17, 2023 · d4fe15c · d4fe15c
2 parents d4b3ae0 + 7e1362d
commit d4fe15c
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 63 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>
 

diff --git a/resources/js/Shared/Validation.vue b/resources/js/Shared/Validation.vue
@@ -691,7 +691,7 @@ export default {
  if (typeof value == "boolean") {
  return value;
  }
- return value.split("|")[0] == "true";
+ return value ? value.split("|")[0] == "true" : "false";
  },
  update(model, property) {
  if (this.mode == "study") {

diff --git a/resources/js/Shared/ValidationStatus.vue b/resources/js/Shared/ValidationStatus.vue
@@ -74,7 +74,7 @@ export default {
  if (typeof this.status == "boolean") {
  return this.status;
  }
- return this.status.split("|")[0] == "true";
+ return this.status ? this.status.split("|")[0] == "true" : "false";
  },
  },
 };