WIP WIP Removing dependency on bootstrap-vue (#716) WIP WIP

Closes: #716
Related-Issue: #716
Projected-Results-Impact: none

HISTORY.rst

@@ -130,6 +130,7 @@ Full Change List
 - Adding unit test for clinvar Vue app (#692).
 - Moving clinvar Vue app (#711).
 - Bugfix that allow clinvar export submission set deletion (#713).
+- Removing dependency on bootstrap-vue package (#716).
 
 ------
 v1.2.0

clinvar_export/vueapp/src/components/ClinvarExportApp.vue

@@ -1,13 +1,20 @@
 <template>
   <div id="#app">
-    <b-overlay :show="showOverlay">
+    <div class="varfish-overlay-wrap position-relative">
       <submission-set-list
         v-if="['list', 'initializing'].includes(appState)"
       ></submission-set-list>
       <submission-set-wizard
         v-if="['edit', 'add'].includes(appState)"
       ></submission-set-wizard>
-    </b-overlay>
+
+      <div v-if="showOverlay" class="varfish-overlay position-absolute"  style="inset: 0; z-index: 10;">
+        <div class="position-absolute bg-light" style="inset: 0; opacity: 0.85; backdrop-filter: blur(2px);"></div>
+        <div class="position-absolute" style="top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">
+          <span aria-hidden="true" class="spinner-border"><!----></span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 

clinvar_export/vueapp/src/components/SubmissionCaseListEntry.vue

@@ -1,12 +1,12 @@
 <template>
-  <b-card header-tag="header">
-    <template #header>
+  <div class="card">
+    <div class="card-header">
       <h4 class="mb-0 ml-0">
         Case &raquo;{{ individual ? individual.name : 'null' }}&laquo;
-        <b-button-group class="float-right pb-0 mb-0">
-          <b-button
-            size="sm"
-            variant="secondary"
+        <div class="btn-group float-right pb-0 mb-0">
+          <button
+            type="button"
+            class="btn btn-sm btn-secondary"
             :disabled="isMoveDisabled(true)"
             @click="
               moveSubmissionIndividual({
@@ -17,10 +17,10 @@
           >
             <i class="iconify" data-icon="mdi:arrow-up-circle"></i>
             move up
-          </b-button>
-          <b-button
-            size="sm"
-            variant="secondary"
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-secondary"
             :disabled="isMoveDisabled(false)"
             @click="
               moveSubmissionIndividual({
@@ -31,10 +31,10 @@
           >
             <i class="iconify" data-icon="mdi:arrow-down-circle"></i>
             move down
-          </b-button>
-          <b-button
-            size="sm"
-            variant="danger"
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-danger"
             @click="removeSubmissionIndividualFromCurrentSubmission(value)"
           >
             <span
@@ -43,11 +43,11 @@
               data-inline="false"
             ></span>
             remove from variant
-          </b-button>
-        </b-button-group>
+          </button>
+        </div>
       </h4>
-    </template>
-    <b-card-text class="px-2">
+    </div>
+    <div class="card-body px-2">
       <div class="row">
         <div class="col-12 px-0">
           <b-form-group
@@ -192,8 +192,8 @@
           </b-form-group>
         </div>
       </div>
-    </b-card-text>
-  </b-card>
+    </div>
+  </div>
 </template>
 
 <script>

clinvar_export/vueapp/src/components/SubmissionEditor.vue

@@ -2,36 +2,40 @@
   <div class="flex-grow-1 mt-1">
     <h4 class="border-bottom pb-2 mb-3">
       Variant: {{ getSubmissionLabel(currentSubmission) }}
-      <b-button-group class="float-right">
-        <b-button
+      <div class="btn-group float-right">
+        <button
           ref="buttonMoveCurrentSubmissionUp"
-          size="sm"
-          variant="secondary"
+          type="button"
+          class="btn btn-sm btn-secondary"
           :disabled="isMoveCurrentSubmissionDisabled(true)"
           @click="moveCurrentSubmission(true)"
         >
           <i class="iconify" data-icon="mdi:arrow-up-circle"></i>
           move up
-        </b-button>
-        <b-button
+        </button>
+        <button
           ref="buttonMoveCurrentSubmissionDown"
-          size="sm"
-          variant="secondary"
+          type="button"
+          class="btn btn-sm btn-secondary"
           :disabled="isMoveCurrentSubmissionDisabled(false)"
           @click="moveCurrentSubmission(false)"
         >
           <i class="iconify" data-icon="mdi:arrow-down-circle"></i>
           move down
-        </b-button>
-        <b-button size="sm" variant="danger" @click="deleteCurrentSubmission()">
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm btn-danger"
+          @click="deleteCurrentSubmission()"
+        >
           <span
             class="iconify"
             data-icon="mdi:close"
             data-inline="false"
           ></span>
           remove from submission
-        </b-button>
-      </b-button-group>
+        </button>
+      </div>
     </h4>
 
     <div class="row">

clinvar_export/vueapp/src/components/SubmissionList.vue

@@ -2,19 +2,16 @@
   <div class="row">
     <div class="col-2 px-0">
       <div>
-        <b-list-group flush>
-          <b-list-group-item
-            class="font-weight-bold"
-            variant="secondary"
-            inactive
+        <ul class="list-group list-group-flush">
+          <li
+            class="list-group-item list-group-item-secondary font-weight-bold"
           >
             <h5>
               Submissions
-              <b-button
+              <div
                 ref="buttonAddSubmission"
-                size="sm"
-                variant="primary"
-                class="float-right"
+                type="button"
+                class="btn btn-primary btn-small float-right"
                 @click="onAddSubmissionClicked()"
               >
                 <span
@@ -23,14 +20,17 @@
                   data-inline="false"
                 ></span>
                 add
-              </b-button>
+              </div>
             </h5>
-          </b-list-group-item>
+          </li>
           <draggable ref="submissionList" v-model="submissionList">
-            <b-list-group-item
+            <li
               v-for="item in submissionList"
               :key="item.sodar_uuid"
-              :class="{ active: item === currentSubmission }"
+              :class="{
+                'list-group-item list-group-item-action list-group-item-primary': item === currentSubmission,
+                'list-group-item list-group-item-action': item !== currentSubmission,
+              }"
               @click="onListItemClicked(item.sodar_uuid)"
             >
               {{ getSubmissionLabel(item) }}
@@ -45,15 +45,15 @@
               <div class="pull-right">
                 <span class="iconify" data-icon="fa-solid:chevron-right"></span>
               </div>
-            </b-list-group-item>
+            </li>
           </draggable>
-          <b-list-group-item
+          <li
             v-if="!submissionList.length"
-            class="inactive text-muted font-italic text-center"
+            class="list-group-item list-group-item-light font-italic text-center"
           >
             There are no variants for this submission yet.
-          </b-list-group-item>
-        </b-list-group>
+          </li>
+        </ul>
       </div>
     </div>
     <div class="col-10 border-left d-flex">
@@ -76,9 +76,8 @@
     >
       <p>
         Create new submissions by selecting from the variants below and clicking
-        <b-badge variant="primary"
-          ><i class="iconify" data-icon="fa-solid:plus"></i></b-badge
-        >. If you select no variant, a blank submission will be created.
+        <span class="badge badge-primary"><i class="iconify" data-icon="fa-solid:plus"></i></span>.
+        If you select no variant, a blank submission will be created.
       </p>
       <ul class="list-group mb-3">
         <li
@@ -215,19 +214,20 @@
               </span>
             </div>
             <div class="form-group ml-3" style="height: 43px">
-              <b-form-checkbox v-model="onlyAddAffected">
-                affecteds only
-              </b-form-checkbox>
+              <div class="custom-control custom-checkbox">
+                <input id="submission-set-affecteds-only" v-model="onlyAddAffected" type="checkbox" class="custom-control-input" value="true">
+                <label for="submission-set-affecteds-only" class="custom-control-label">affecteds only</label>
+              </div>
             </div>
             <div class="form-group ml-auto">
-              <b-button
+              <button
                 ref="buttonAddSelectedSubmissions"
-                size="sm"
-                variant="primary"
+                type="button"
+                class="btn btn-sm btn-primary"
                 @click="onCreateSubmissionClicked()"
               >
                 <i class="iconify" data-icon="fa-solid:plus"></i>
-              </b-button>
+              </button>
             </div>
           </div>
         </li>

clinvar_export/vueapp/src/components/SubmissionSetEditor.vue

@@ -1,13 +1,13 @@
 <template>
-  <b-card-body>
-    <b-alert variant="info" class="small pl-3" show>
+  <div class="card-body">
+    <div class="alert alert-info small pl-3">
       <i class="iconify mr-1" data-icon="fa-solid:info-circle"></i>
       A Clinvar submission set consists of multiple variants (aka submissions).
       Edit the base properties here and continue by clicking "Variants" on the
       bottom right. Click "Save" to save the submission and go back to the list
       and use "Cancel" to discard changes and go back to the list without saving
       them.
-    </b-alert>
+    </div>
     <b-form>
       <b-form-group
         id="input-group-title"
@@ -85,7 +85,7 @@
         >
       </b-form-group>
     </b-form>
-  </b-card-body>
+  </div>
 </template>
 
 <script>