fix: updated spectra viewer and public study page

NFDI4Chem · Oct 18, 2023 · afe16e3 · afe16e3
1 parent ee6c9b0
commit afe16e3
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 3 deletions.
diff --git a/resources/js/Pages/Public/Project/Study.vue b/resources/js/Pages/Public/Project/Study.vue
@@ -299,7 +299,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="mt-3">
+                    <!-- <div class="mt-3">
                         <label
                             for="location"
                             class="block text-sm font-medium text-gray-700"
@@ -336,7 +336,7 @@
                                 />
                             </span>
                         </div>
-                    </div>
+                    </div> -->
                     <div class="mt-3">
                         <SpectraViewer
                             :dataset="selectedDataset"
@@ -345,6 +345,106 @@
                             ref="spectraViewerREF"
                         ></SpectraViewer>
                     </div>
+
+                    <div class="my-2">
+                        <div>
+                            <h2 class="text-sm font-medium text-gray-500">
+                                Spectra Datasets
+                            </h2>
+                            <ul
+                                role="list"
+                                class="mt-3 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3"
+                            >
+                                <li
+                                    v-for="dataset in study.data.datasets.sort(
+                                        (a, b) => (a.name > b.name ? 1 : -1)
+                                    )"
+                                    :key="dataset.slug"
+                                    class="col-span-1 flex rounded-md shadow-sm"
+                                >
+                                    <a
+                                        class="cursor-pointer"
+                                        :href="
+                                            '/' +
+                                            dataset.identifier.replace(
+                                                'NMRXIV:',
+                                                ''
+                                            )
+                                        "
+                                        target="_blank"
+                                    >
+                                        <!-- <div
+                                        class="flex w-16 flex-shrink-0 items-center justify-center bg-pink-600 rounded-l-md text-sm font-medium text-white"
+                                    >
+                                    
+                                    </div> -->
+                                        <div
+                                            class="flex flex-1 border-l rounded-md items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white"
+                                        >
+                                            <div
+                                                class="flex-1 truncate px-4 py-2 text-sm"
+                                            >
+                                                <a
+                                                    class="font-medium text-lg text-gray-900 hover:text-gray-600"
+                                                >
+                                                    {{ dataset.name }}
+                                                    <span v-if="dataset.type"
+                                                        >({{
+                                                            dataset.type.replace(
+                                                                /,\s*$/,
+                                                                ""
+                                                            )
+                                                        }})</span
+                                                    ></a
+                                                >
+                                                <p class="text-gray-500">
+                                                    <img
+                                                        :src="
+                                                            'badge/doi/' +
+                                                            dataset.identifier
+                                                        "
+                                                    />
+                                                </p>
+                                            </div>
+                                            <div class="flex-shrink-0 pr-2">
+                                                <!-- {{ dataset.identifier }} -->
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    fill="none"
+                                                    viewBox="0 0 24 24"
+                                                    stroke-width="1.5"
+                                                    stroke="currentColor"
+                                                    class="h-5 w-5 text-gray-600 ml-4"
+                                                >
+                                                    <path
+                                                        stroke-linecap="round"
+                                                        stroke-linejoin="round"
+                                                        d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+                                                    ></path>
+                                                </svg>
+                                            </div>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                        <!-- 
+                        <span
+                               
+                                :value="dataset"
+                            >
+                            <span class="text-gray-400 float-left mr-1 pt-2">
+                                
+                                <img
+                                    :src="
+                                        'badge/doi/' +
+                                        dataset.identifier
+                                    "
+                                />
+                            </span>
+                        </span> -->
+                    </div>
+                    <div>&emsp;</div>
                 </div>
             </div>
         </template>

diff --git a/resources/js/Shared/SpectraViewer.vue b/resources/js/Shared/SpectraViewer.vue
@@ -319,7 +319,8 @@ export default {
         nmriumURL() {
             return this.$page.props.nmriumURL
                 ? String(this.$page.props.nmriumURL + "?id=" + Math.random())
-                : "http://nmriumdev.nmrxiv.org?defaultEmptyMessage=loading&workspace=embedded&id=" + Math.random();
+                : "http://nmriumdev.nmrxiv.org?defaultEmptyMessage=loading&workspace=embedded&id=" +
+                      Math.random();
         },
     },
     methods: {