wip

bcgov · Jul 17, 2024 · 8319a95 · 8319a95
1 parent 976c0f2
commit 8319a95
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 57 deletions.
diff --git a/src/components/Dashboard/PendingList.vue b/src/components/Dashboard/PendingList.vue
@@ -68,60 +68,21 @@ export default class PendingList extends Vue {
 <style lang="scss" scoped>
 @import "@/assets/styles/theme.scss";
 
-// *** TODO: move these styles to the template or sub-component
+:deep(.v-expansion-panel-header) {
+  min-height: auto !important;
+  padding: 0;
+  margin-top: 0.25rem;
 
-// .pending-item {
-//   // disable expansion generally
-//   pointer-events: none;
-
-//   // enable all buttons (that aren't explicitly disabled)
-//   .v-btn:not(:disabled) {
-//     pointer-events: auto;
-//   }
-
-//   .theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
-//     color: white !important;
-//     background-color: $app-blue !important;
-//     opacity: 0.2;
-//   }
-// }
-
-// .pending-item .list-item {
-//   padding: 0;
-//   justify-content: space-evenly;
-//   align-items: flex-start;
-// }
-
-// .list-item__title {
-//   min-height: 20px; // for consistent height with and without icon button
-
-//   .v-btn {
-//     // adjust button position so it fits within the title height
-//     margin-top: -8px;
-//     margin-bottom: -4px;
-//   }
-// }
-
-// .pending-subtitle {
-//   color: $gray7;
-//   display: flex;
-//   align-items: center;
-//   justify-content: flex-start;
-// }
-
-// .vert-pipe {
-//   margin-top: 0.1rem;
-//   margin-left: 0.75rem;
-//   margin-right: 0.75rem;
-//   height: 1rem;
-//   border-left: 1px solid $gray6;
-// }
+  .v-expansion-panel-header__icon {
+    display: none;
+  }
+}
 
-// .v-expansion-panel-header:before {
-//   background-color: white !important;
-// }
+:deep(.v-expansion-panel-content__wrap) {
+  padding: 0;
+}
 
-// :deep(.v-expansion-panel-content__wrap) {
-//   padding: 0;
-// }
+:deep(.theme--light.v-list-item--disabled) {
+  opacity: 0.38 !important;
+}
 </style>
diff --git a/src/components/Dashboard/PendingList/PendingTemplate.vue b/src/components/Dashboard/PendingList/PendingTemplate.vue
@@ -13,9 +13,15 @@
           </h3>
 
           <slot name="subtitle">
-            <span>PENDING STAFF REVIEW</span>
-            <span class="vert-pipe" />
-            <span>PAID</span>
+            <div class="item-header-subtitle">
+              <span>PENDING STAFF REVIEW</span>
+              <span class="vert-pipe" />
+              <span>PAID (filed by {{ submitter }} on <DateTooltip :date="submittedDate" />)</span>
+            </div>
+          </slot>
+
+          <slot name="details-button">
+            <!-- no default details button at this time -->
           </slot>
         </div>
 
@@ -32,17 +38,36 @@
       <slot name="body">
         <!-- no default body at this time -->
       </slot>
+
+      <slot name="documents">
+        <!-- no default documents at this time -->
+      </slot>
+
+      <slot name="detail-comments">
+        <!-- no default detail-comments at this time -->
+      </slot>
     </v-expansion-panel-content>
   </v-expansion-panel>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
+import { DateTooltip } from '@/components/common'
 
-@Component({})
+@Component({
+  components: { DateTooltip }
+})
 export default class PendingTemplate extends Vue {
   @Prop({ required: true }) readonly item!: any
   @Prop({ required: true }) readonly index!: number
+
+  get submitter (): Date {
+    return this.item.header.submitter
+  }
+
+  get submittedDate (): Date {
+    return new Date(this.item.header.date)
+  }
 }
 </script>