OHIF-101: Display Series Details for selected studies

Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.html

@@ -0,0 +1,104 @@
+<template name="seriesDetailsTable">
+    {{#unless selectedStudies.length}}
+        <p align="center">Series details not found</p>
+    {{/unless}}
+    {{#each selectedStudies}}
+        <div class="selectedStudyContainer">
+            <table class="table table-responsive tblStudyDetails">
+                <tbody>
+                <tr>
+                    <td class="center patientID">
+                        <div>
+                            <span>Patient ID</span>
+                        </div>
+                        <input type="text"
+                               class="form-control"
+                               id="patientID"
+                               placeholder="Patient ID"
+                               disabled="disabled"
+                               value="{{ patientId }}">
+                    </td>
+                    <td class="patientName">
+                        <div>
+                            <span>Patient Name</span>
+                        </div>
+                        <input type="text"
+                               class="form-control"
+                               id="patientName"
+                               placeholder="Patient Name"
+                               disabled="disabled"
+                               value="{{ formatPN patientName }}">
+                    </td>
+                    <td class="accessionNumber">
+                        <div>
+                            <span>Accession Number</span>
+                        </div>
+                        <input type="text"
+                               class="form-control"
+                               id="accessionNumber"
+                               placeholder="Accession Number"
+                               disabled="disabled"
+                               value="{{ accessionNumber }}">
+                    </td>
+                </tr>
+                <tr>
+                    <td class="studyDescription">
+                        <div>
+                            <span>Study Description</span>
+                        </div>
+                        <input type="text"
+                               class="form-control"
+                               id="studyDescription"
+                               placeholder="Study Description"
+                               disabled="disabled"
+                               value="{{ studyDescription }}">
+                    </td>
+                    <td class="studyDate">
+                        <div>
+                            <span>Study Date</span>
+                        </div>
+                        <input type="text"
+                               class="form-control"
+                               id="studyDate"
+                               placeholder="Study Date"
+                               disabled="disabled"
+                               value="{{ formatDA studyDate }}">
+                    </td>
+
+                    <td></td>
+                </tr>
+                </tbody>
+            </table>
+
+            <table class="table table-responsive tblSeriesDetails">
+                <thead>
+                <tr>
+                    <th class="header">Number</th>
+                    <th class="header">Modality</th>
+                    <th class="header">Description</th>
+                    <th class="header">Instances</th>
+                </tr>
+                </thead>
+
+                <tbody>
+                {{#if displaySeriesLoadingText}}
+                    <tr>
+                        <td colspan="4" class="center">
+                            {{> loadingText }}
+                        </td>
+                    </tr>
+                {{/if}}
+
+                {{#each seriesList}}
+                    <tr>
+                        <td class="center">{{ seriesNumber }}</td>
+                        <td class="center">{{ modality }}</td>
+                        <td class="center">{{ seriesDescription }}</td>
+                        <td class="center">{{ instances.length }}</td>
+                    </tr>
+                {{/each}}
+                </tbody>
+            </table>
+        </div>
+    {{/each}}
+</template>

Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.js

@@ -0,0 +1,51 @@
+Template.seriesDetailsTable.onCreated(() => {
+    const instance = Template.instance();
+
+    // Create selected studies
+    instance.selectedStudies = new ReactiveDict();
+
+    let selectedStudiesData = instance.data.selectedStudies;
+
+    if (!selectedStudiesData) {
+        return;
+    }
+
+    // Display loading text while getting series
+    _.each(selectedStudiesData, selectedStudy => {
+
+        selectedStudy.displaySeriesLoadingText = true;
+    });
+
+    // Set reactive selected studies
+    instance.selectedStudies.set('studies', selectedStudiesData);
+});
+
+Template.seriesDetailsTable.onRendered(() => {
+    const instance = Template.instance();
+    const studies = instance.selectedStudies.get('studies');
+
+    if (!studies) {
+        return;
+    }
+
+    // Get series list for the study
+    _.map(studies, (selectedStudy, index) => {
+        studies[index].seriesList = [];
+        getStudyMetadata(selectedStudy.studyInstanceUid, study => {
+
+            // Set series list
+            studies[index].seriesList = study.seriesList;
+            studies[index].displaySeriesLoadingText = false;
+
+            // Update selected studies
+            instance.selectedStudies.set('studies', studies);
+        });
+    });
+});
+
+Template.seriesDetailsTable.helpers({
+    selectedStudies() {
+        const instance = Template.instance();
+        return instance.selectedStudies.get('studies');
+    }
+});

Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.styl

@@ -0,0 +1,30 @@
+@import "{design}/app"
+
+.selectedStudyContainer
+  margin-bottom: 15px;
+
+  .tblStudyDetails
+    tbody > tr > td > label
+      color: $textPrimaryColor
+
+    tbody > tr > td > input[type="text"]
+      height: 28px
+      background-color: $primaryBackgroundColor
+      color: $textPrimaryColor
+      width: calc(100% - 10px)
+      border-radius: 4px
+      box-sizing: border-box
+
+  .tblSeriesDetails
+    thead > tr > th
+      text-align: center
+
+    tbody > tr
+
+      td
+        text-align: center
+        color: $textPrimaryColor
+
+    .loadingTextDiv
+      font-size: 13px
+      color: $textSecondaryColor