AMP-3154 etc:

- resolve responsive issue - update table-responsive - remove table-gap - minor adjustments on margin/padding etc - remove commented code
AudiovisualMetadataPlatform · May 22, 2024 · 1f1e091 · 1f1e091
1 parent 3ea0402
commit 1f1e091
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 92 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -658,9 +658,6 @@ svg.icon-user {
   height: 250px;
   overflow-y: scroll; }
 
-/* .highlight {
-  background: #F8ECB4; } */
-
 .scrollDiv td, .scrollDiv th {
   text-align: left; }
 
@@ -676,7 +673,7 @@ svg.icon-user {
 
 .table-responsive {
   position: relative;
-  padding-top: 19px; }
+  padding-top: 15px; }
 
 .final-choice-top {
   z-index: 1001;

diff --git a/src/components/dashboard/Dashboard.vue b/src/components/dashboard/Dashboard.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="collections w-100">
-    <!-- <loader :show="!isFilterApiLoaded"/> -->
     <div
       class="container-fluid"
       :class="{
@@ -621,7 +620,7 @@
                     <search-filter
                       v-if="parent !== 'Deliverables'"
                       :parent="parent"
-                      class="col-xl-3 col-md-3 col-sm-12 col-xs-12 px-0 my-0"
+                      class="col-xl-3 col-md-3 col-sm-12 col-xs-12 px-2 my-0"
                     />                        
                     <span
                       v-if="parent !== 'NewTest' && parent !== 'TestResults'"
@@ -652,7 +651,7 @@
                       <input
                         id="export-results"
                         type="button"
-                        class="btn btn-outline-primary btn-sm"
+                        class="btn btn-primary btn-sm"
                         v-on:click="exportResults"
                         value="Export to CSV"
                       />
@@ -1290,12 +1289,6 @@ export default {
   height: 24px;
 }
 
-.selected-filters-row {
-  margin-left: -30px;
-  margin-bottom: 8px;
-  flex-wrap: wrap;
-}
-
 .selected-filter-button {
   background-color: white;
   border: 2px solid;
@@ -1330,12 +1323,6 @@ export default {
 
 .relevant-togggle {
   margin-right: 0;
-  /*
-  display: flex;
-  justify-content: space-around;
-  position: absolute;
-  top: 0;  
-  */
 }
 
 .filter-gap {
@@ -1346,19 +1333,23 @@ export default {
   margin: 0px;
   padding: 0px;
 }
+
 #dropdown-form > button > span > svg > g > path {
   fill: #153c4d !important;
 }
+
 #dropdown-form > button:hover > span > svg > g > path {
   fill: #fff !important;
 }
+
 form.b-dropdown-form {
   width: 350px;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   flex-wrap: wrap;
 }
+
 form.b-dropdown-form > * {
   flex: 0 0 50%;
 }

diff --git a/src/components/dashboard/DashboardTable.vue b/src/components/dashboard/DashboardTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="dataTables_wrapper no-footer">
     <loader :show="workflowDashboard.loading" />
-    <div v-if="parent !== 'Deliverables'" class="col d-flex justify-content-between">
+    <div v-if="parent !== 'Deliverables'" class="col d-flex flex-wrap justify-content-between">
       <div
         class="
           col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12
@@ -45,16 +45,9 @@
       ></b-pagination>
       <slot name="show-hide-columns"></slot>
     </div>
-    <!-- <br v-if="parent !== 'Deliverables'" /> -->
+
     <div
       class="table-responsive"
-      :class="
-        parent === 'NewTest' ||
-        parent === 'TestResults' ||
-        parent === 'Deliverables'
-          ? 'table-gap'
-          : ''
-      "
     >
       <table id="myTable" class="table dataTable no-footer">
         <thead>
@@ -277,47 +270,48 @@
           </tr>
         </tbody>
       </table>
-      <div v-if="parent !== 'Deliverables'" class="col d-flex">
-        <label>{{ totalText }}</label>
-        <b-pagination
-          class="col-xl-6 col-lg-6 col-md-6 col-sm-12 w-100"
-          v-model="workflowDashboard.searchQuery.pageNum"
-          :total-rows="workflowDashboard.searchResult.totalResults"
-          :per-page="workflowDashboard.searchQuery.resultsPerPage"
-          @change="paginate($event)"
-          size="sm"
-          align="center"
-          first-number
-          limit="9"
-          last-number
-          prev-text="Prev"
-          next-text="Next"
-        ></b-pagination>
-      </div>
-
-      <!-- Modal for delete confirmation -->
-      <b-modal v-model="showModal" id="modal-center" centered>
-        <template #modal-header="{}">
-          <h5 class="text-capitalize">
-            Confirm
-          </h5>
-        </template>
-        <template #default="{}">
-          <div class="row pad-all-2">
-            Are you sure you want to delete this result from the Dashboard? This
-            action cannot be rolled back.
-          </div>
-        </template>
-        <template #modal-footer="{ hide }">
-          <button class="btn btn-outline" @click="hide()">
-            Cancel
-          </button>
-          <button size="sm" class="btn btn-primary" @click="handleDeleteRow()">
-            Delete
-          </button>
-        </template>
-      </b-modal>
+    </div>     
+
+    <div v-if="parent !== 'Deliverables'" class="col d-flex flex-wrap">
+      <label>{{ totalText }}</label>
+      <b-pagination
+        class="col-xl-6 col-lg-6 col-md-6 col-sm-12 w-100"
+        v-model="workflowDashboard.searchQuery.pageNum"
+        :total-rows="workflowDashboard.searchResult.totalResults"
+        :per-page="workflowDashboard.searchQuery.resultsPerPage"
+        @change="paginate($event)"
+        size="sm"
+        align="center"
+        first-number
+        limit="9"
+        last-number
+        prev-text="Prev"
+        next-text="Next"
+      ></b-pagination>
     </div>
+
+    <!-- Modal for delete confirmation -->
+    <b-modal v-model="showModal" id="modal-center" centered>
+      <template #modal-header="{}">
+        <h5 class="text-capitalize">
+          Confirm
+        </h5>
+      </template>
+      <template #default="{}">
+        <div class="row pad-all-2">
+          Are you sure you want to delete this result from the Dashboard? This
+          action cannot be rolled back.
+        </div>
+      </template>
+      <template #modal-footer="{ hide }">
+        <button class="btn btn-outline" @click="hide()">
+          Cancel
+        </button>
+        <button size="sm" class="btn btn-primary" @click="handleDeleteRow()">
+          Delete
+        </button>
+      </template>
+    </b-modal>
   </div>
 </template>
 
@@ -458,20 +452,9 @@ export default {
       return this.parent === "TestResults" || this.parent === "NewTest" ||
         wr.outputPath != null && wr.status == 'COMPLETE'
     },
-    // canAccessLink(result, forMedia) {      
-    //   let actionType = env.getEnv("VUE_APP_AC_ACTIONTYPE_READ");
-    //   let targetType = forMedia ? // for media or output
-    //     env.getEnv("VUE_APP_AC_TARGETTYPE_PRIMARYFILE_MEDIA") :
-    //     env.getEnv("VUE_APP_AC_TARGETTYPE_WORKFLOWRESULT_OUTPUT");
-    //   let actionKey = `${actionType}-${targetType}`;
-    //   let units =  this.accessControl.actionsUnits.get(actionKey);
-    //   return units && units.has(result.unitId);
-    // },
     canAccessLink(result, forMedia) {      
       // get units for media or output
-      let units = forMedia ? this.acUnitsMedia : this.acUnitsOutput;      
-        // console.log("forMedia: " + forMedia);	
-        // console.log("units: " + units);	
+      let units = forMedia ? this.acUnitsMedia : this.acUnitsOutput;      	
       return this.acIsAdmin || units && units.includes(result.unitId);
     },
     handleDeleteRow() {
@@ -583,7 +566,6 @@ export default {
   },
   watch: {
     filterByDates: function() {
-      // console.log("inside watcher for filterByDates",this.filterByDates[0]," ",this.filterByDates[1]);
       this.workflowDashboard.searchQuery.pageNum = 1;
       this.refreshData();
     },
@@ -728,11 +710,6 @@ th {
 .justify-content-right {
   justify-content: right;
 }
-.table-gap {
-  margin-top: -20px !important;
-  margin-bottom: 0px;
-  overflow-y: hidden;
-}
 .add-to-test-checkbox {
   width: 28px;
   height: 28px;

diff --git a/src/components/deliverables/Deliverables.vue b/src/components/deliverables/Deliverables.vue
@@ -14,7 +14,7 @@
                   <h1 class="card-title">AMP Deliverables</h1>
                   <button
                     v-bind:disabled="!canDeliverFinalResults"
-                    class="btn btn-primary marg-bot-4"
+                    class="btn btn-primary my-3"
                     data-toggle="modal"
                     data-target=".bd-example-modal-lg"
                   >
@@ -62,7 +62,7 @@
                       id="myTable_wrapper"
                       class="dataTables_wrapper no-footer"
                     >
-                      <div class="dataTables_length" id="myTable_length">
+                      <div class="dataTables_length mt-1" id="myTable_length">
                         <label
                           >Show
                           <select
@@ -479,10 +479,6 @@ export default {
   top: 0.5em;
   z-index: 1 !important;
 }
-.table-responsive {
-  position: relative;
-  padding-top: 19px;
-}
 .final-choice-top {
   z-index: 1001;
   display: flex;