# HG changeset patch
# User Sebastien Jodogne <s.jodogne@gmail.com>
# Date 1734385206 -3600
# Node ID bdcea1ec1683c8c6aac8bd8ff8e0694ef7bbdc2a
# Parent  280980f6dda3b6cb725d80bf58e4ebbd07c07d7f
started removing dependency on bootstrap-vue

diff -r 280980f6dda3 -r bdcea1ec1683 WebApplication/app.js
--- a/WebApplication/app.js	Mon Dec 16 16:31:37 2024 +0100
+++ b/WebApplication/app.js	Mon Dec 16 22:40:06 2024 +0100
@@ -35,8 +35,6 @@
     showStudies: false,
     showSeries: false,
     maxResults: MAX_RESULTS,
-    currentPage: 0,
-    perPage: 10,
     servers: [ ],
     serversInfo: { },
     activeServer: '',
@@ -49,28 +47,20 @@
     jobDetails: '',
     studiesFields: [
       {
-        key: DICOM_TAG_PATIENT_ID + '.Value',
-        label: 'Patient ID',
-        sortable: true
-      },
-      {
-        key: DICOM_TAG_PATIENT_NAME + '.Value',
-        label: 'Patient name',
-        sortable: true
+        key: DICOM_TAG_PATIENT_ID,
+        label: 'Patient ID'
       },
       {
-        key: DICOM_TAG_ACCESSION_NUMBER + '.Value',
-        label: 'Accession number',
-        sortable: true
+        key: DICOM_TAG_PATIENT_NAME,
+        label: 'Patient name'
       },
       {
-        key: DICOM_TAG_STUDY_DATE + '.Value',
-        label: 'Study date',
-        sortable: true
+        key: DICOM_TAG_ACCESSION_NUMBER,
+        label: 'Accession number'
       },
       {
-        key: 'operations',
-        label: ''
+        key: DICOM_TAG_STUDY_DATE,
+        label: 'Study date'
       }
     ],
     studyToDelete: null,
diff -r 280980f6dda3 -r bdcea1ec1683 WebApplication/index.html
--- a/WebApplication/index.html	Mon Dec 16 16:31:37 2024 +0100
+++ b/WebApplication/index.html	Mon Dec 16 22:40:06 2024 +0100
@@ -75,32 +75,47 @@
       <!-- LOOKUP -->
 
       <div class="row">
-        <b-alert variant="danger" dismissible v-model="showNoServer">
+        <div class="alert alert-danger alert-dismissible" v-if="showNoServer">
           No DICOMweb server is configured!
-        </b-alert>
-        <b-form style="width:100%;padding:5px;">
-          <b-form-group label="DICOMweb server:" label-cols-sm="4" label-cols-lg="3">
-            <b-form-select v-model="lookup.server" :options="servers"></b-form-select>
-          </b-form-group>
-          <b-form-group label="Patient ID:" label-cols-sm="4" label-cols-lg="3">
-            <b-form-input v-model="lookup.patientID"></b-form-input>
-          </b-form-group>
-          <b-form-group label="Patient name:" label-cols-sm="4" label-cols-lg="3">
-            <b-form-input v-model="lookup.patientName"></b-form-input>
-          </b-form-group>
-          <b-form-group label="Accession number:" label-cols-sm="4" label-cols-lg="3">
-            <b-form-input v-model="lookup.accessionNumber"></b-form-input>
-          </b-form-group>
-          <b-form-group label="Study date:" label-cols-sm="4" label-cols-lg="3">
-            <b-form-input v-model="lookup.studyDate"></b-form-input>
-          </b-form-group>
+        </div>
+        <form style="width:100%;padding:5px;">
+          <div class="form-group row">
+            <label class="col-form-label col-sm-3 cols-lg-3">DICOMweb server:</label>
+            <div class="col-sm-9 cols-lg-9">
+              <select class="form-control" v-model="lookup.server">
+                <option v-for="option in servers">{{ option }}</option>
+              </select>
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-form-label col-sm-3 cols-lg-3">Patient ID:</label>
+            <div class="col-sm-9 cols-lg-9">
+              <input type="text" class="form-control" v-model="lookup.patientID"></input>
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-form-label col-sm-3 cols-lg-3">Patient name:</label>
+            <div class="col-sm-9 cols-lg-9">
+              <input type="text" class="form-control" v-model="lookup.patientName"></input>
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-form-label col-sm-3 cols-lg-3">Accession number:</label>
+            <div class="col-sm-9 cols-lg-9">
+              <input type="text" class="form-control" v-model="lookup.accessionNumber"></input>
+            </div>
+          </div>
+          <div class="form-group row">
+            <label class="col-form-label col-sm-3 cols-lg-3">Study date:</label>
+            <div class="col-sm-9 cols-lg-9">
+              <input type="text" class="form-control" v-model="lookup.studyDate"></input>
+            </div>
+          </div>
           <p class="pull-right">
-          <b-button type="submit" variant="success" @click="OnLookup" 
-                    size="lg">Do lookup</b-button>
-          <b-button type="reset" variant="outline-danger" @click="OnReset" 
-                    size="lg">Reset</b-button>
+            <button type="button" class="btn btn-lg btn-success" @click="OnLookup">Do lookup</button>
+            <button type="button" class="btn btn-lg btn-outline-danger" @click="OnReset">Reset</button>
           </p>
-        </b-form>
+        </form>
       </div>
 
 
@@ -111,30 +126,39 @@
         <h1>Studies</h1>
       </div>
       <div class="row" v-show="showStudies">
-        <b-alert variant="warning" dismissible v-model="showTruncatedStudies">
+        <div class="alert alert-warning alert-dismissible" v-if="showTruncatedStudies">
           More than {{ maxResults }} matching studies, results have been truncated!
-        </b-alert>
+        </div>
       </div>
       <div class="row" v-show="showStudies">
-        <b-pagination v-model="currentPage" :per-page="perPage" :total-rows="studiesCount"></b-pagination>
-        <b-table striped hover :current-page="currentPage" :per-page="perPage"
-                 :items="studies" :fields="studiesFields" :fixed="false">
-          <template slot="operations" slot-scope="data">
-            <b-button @click="OpenSeries(data.item)" title="Open series">
-              <i class="fa fa-folder-open"></i>
-            </b-button>
-            <b-button @click="OpenStudyDetails(data.item)" title="Open tags">
-              <i class="fa fa-address-card"></i>
-            </b-button>
-            <b-button @click="RetrieveStudy(data.item)" title="Retrieve study using WADO-RS">
-              <i class="fa fa-cloud-download"></i>
-            </b-button>
-            <b-button @click="ConfirmDeleteStudy(data.item)"
-                      v-if="serversInfo[activeServer].HasDelete == '1'" title="Delete remote study">
-              <i class="fa fa-trash"></i>
-            </b-button>
-          </template>
-        </b-table>
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th scope="col" v-for="column in studiesFields">{{column.label}}</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="study in studies">
+              <td v-for="column in studiesFields">{{column.key in study ? study[column.key].Value : ''}}</td>
+              <td>
+                <button type="button" class="btn btn-secondary" @click="OpenSeries(study)" title="Open series">
+                  <i class="fa fa-folder-open"></i>
+                </button>
+                <button type="button" class="btn btn-secondary" @click="OpenStudyDetails(study)" title="Open tags">
+                  <i class="fa fa-address-card"></i>
+                </button>
+                <button type="button" class="btn btn-secondary" @click="RetrieveStudy(study)" title="Retrieve study using WADO-RS">
+                  <i class="fa fa-cloud-download"></i>
+                </button>
+                <button type="button" class="btn btn-secondary" @click="ConfirmDeleteStudy(study)" title="Delete remote study"
+                        v-if="serversInfo[activeServer].HasDelete == '1'">
+                  <i class="fa fa-trash"></i>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
 
         <b-modal ref="study-details" size="xl" ok-only="true">
           <template slot="modal-title">