EDX-2410: Resolve button setup for program duplicate resolution

frontend/src/components/sdcCollection/sdcDistrictCollection/stepFourInDistrictDuplicates/DuplicateTab.vue

@@ -91,7 +91,10 @@
                   </v-icon>
                   <span class="ml-2">Change Grade</span>
                 </v-list-item>
-                <v-list-item>
+                <v-list-item 
+                  id="resolve"
+                  @click="resolveDuplicate(duplicate)"
+                  >
                   <v-icon
                     color="#003366"
                     class="pr-1 mb-1"
@@ -204,15 +207,31 @@
       />
     </v-row>
   </template>
+  <v-bottom-sheet
+    v-model="openProgramResolutionView"
+    :inset="true"
+    :no-click-animation="true"
+    :scrollable="true"
+    :persistent="true"
+  >
+  <ProgramDuplicateResolution 
+    @close="openProgramResolutionView = !openProgramResolutionView"
+    >
+  </ProgramDuplicateResolution>
+  </v-bottom-sheet>
 </template>
 <script>
 import {defineComponent} from 'vue';
 import CustomTable from '../../../common/CustomTable.vue';
 import {IN_DISTRICT_DUPLICATES} from '../../../../utils/sdc/DistrictCollectionTableConfiguration';
+import ProgramDuplicateResolution from './ProgramDuplicateResolution.vue';
 
 export default defineComponent({
   name: 'DuplicateTab',
-  components: {CustomTable},
+  components: { 
+    CustomTable, 
+    ProgramDuplicateResolution
+  },
   props: {
     duplicateType: {
       type: String,
@@ -234,13 +253,23 @@ export default defineComponent({
   data() {
     return {
       duplicateView: '1',
-      editOptionsOpen: []
+      editOptionsOpen: [],
+      openProgramResolutionView: false,
+      selectedProgramDuplicate: {}
     };
   },
   computed: {
     IN_DISTRICT_DUPLICATES() {
       return IN_DISTRICT_DUPLICATES;
     }
+  },
+  methods: {
+    resolveDuplicate(duplicate) {
+      if(this.duplicateType === 'program') {
+        this.selectedProgramDuplicate = duplicate;
+        this.openProgramResolutionView = !this.openProgramResolutionView;
+      }
+    }
   }
 });
 </script>

frontend/src/components/sdcCollection/sdcDistrictCollection/stepFourInDistrictDuplicates/ProgramDuplicateResolution.vue

@@ -0,0 +1,135 @@
+<template>
+    <v-card
+      id="programDuplicate"
+    >
+      <v-card-title
+        id="programDuplicateTitle"
+        class="sheetHeader pt-1 pb-1"
+      >
+        <v-row no-gutters>
+          <v-col class="d-flex justify-start">
+            Resolve Program Duplicates
+          </v-col>
+          <v-col class="d-flex justify-end">
+            <v-btn
+              id="cancel"
+              color="white"
+              text="Close"
+              size="30"
+              icon="mdi-close"
+              variant="tonal"
+              @click="cancel"
+            />
+          </v-col>
+        </v-row>
+      </v-card-title>
+      <v-divider />
+      <v-card-text>
+        here
+      </v-card-text>
+    </v-card>
+  </template>
+  <script>
+
+
+
+  export default {
+    name: 'ProgramDuplicateResolution',
+    components: {
+
+    },
+    props: {
+
+    },
+    emits: ['close'],
+    data() {
+      return {
+
+      };
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    mounted() {
+    },
+    async created() {
+
+    },
+    methods: {
+      cancel() {
+        this.$emit('close');
+      },
+    }
+  };
+  </script>
+
+  <style scoped>
+   .containerSetup{
+      padding-right: 0em !important;
+      padding-left: 0em !important;
+    }
+
+    .border {
+      border: 2px solid grey;
+      border-radius: 5px;
+      padding: 35px;
+      margin-bottom: 2em;
+    }
+
+    .clear-message {
+      border: 1px solid darkgreen;
+      color: darkgreen;
+      background-color: transparent;
+      padding: 10px;
+    }
+
+   .inner-border {
+     display: inline-block;
+     min-width: 100%;
+     border: 1px solid rgba(42, 45, 38, 0.38);
+     border-radius: 5px;
+     padding: 2em;
+     margin-bottom: 2em;
+   }
+
+    @media screen and (max-width: 1200px) {
+      .containerSetup{
+        padding-right: 3em !important;
+        padding-left: 3em !important;
+      }
+    }
+
+    .footer-text {
+      font-style: italic;
+      color: grey;
+    }
+
+    .filter-text {
+      font-style: italic;
+      color: rgb(56, 89, 138);
+    }
+
+    .filter-text:hover {
+    text-decoration: underline;
+    }
+
+    .success-message{
+      vertical-align: sub;
+     }
+
+    .sheetHeader {
+      background-color: #003366;
+      color: white;
+      font-size: medium !important;
+      font-weight: bolder !important;
+    }
+
+    .v-banner::v-deep .v-banner__content {
+      justify-content: space-between !important;
+    }
+
+  </style>
+