SAN Notice/Orders: Edit/Remove (#1886)

* AddRemove Notice/Orders * Version bump and test fix * styling fix * Unit test update * hide show label swap
bcgov · May 21, 2024 · 28c5618 · 28c5618
1 parent f6bfa91
commit 28c5618
Show file tree

Hide file tree

Showing 7 changed files with 373 additions and 146 deletions.
diff --git a/ppr-ui/src/components/registration/securities-act-notices/AddEditCourtOrder.vue b/ppr-ui/src/components/registration/securities-act-notices/AddEditCourtOrder.vue
@@ -166,7 +166,7 @@ const props = withDefaults(defineProps<{
 /** Local Properties **/
 const isValidCourtOrderForm = ref(false)
 const validateAddEditCourtOrder = ref(false)
-const courtOrderData: Ref<CourtOrderIF> = ref(props.courtOrderProp || {
+const courtOrderData: Ref<CourtOrderIF> = ref({
   courtOrder: true,
   courtName: '',
   courtRegistry: '',
@@ -175,7 +175,7 @@ const courtOrderData: Ref<CourtOrderIF> = ref(props.courtOrderProp || {
   effectOfOrder: ''
 })
 const addEditLabel = ref(computed(() => props.isEditing ? 'Edit' : 'Add'))
-const isFormValid = ref(computed(() => isValidCourtOrderForm.value && !!courtOrderData.value.orderDate))
+const isFormValid = computed(() => isValidCourtOrderForm.value && !!courtOrderData.value.orderDate)
 
 /** Form Rules **/
 const nameOrRegistryRules = customRules(
@@ -198,10 +198,13 @@ const submitAddEditCourtOrder = async () => {
     emits('done', courtOrderData.value)
   }
 }
-
-watch(() => isFormValid.value,  () => {
-  emits('isValid', !validateAddEditCourtOrder.value || isFormValid.value)
+watch(() => validateAddEditCourtOrder.value,  (val: boolean) => {
+  if (val) emits('isValid', isFormValid.value)
 })
+watch(() => props.isEditing,  (val: boolean) => {
+  if (val) courtOrderData.value = { ...props.courtOrderProp }
+}, { immediate: true })
+
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/theme';

diff --git a/ppr-ui/src/components/registration/securities-act-notices/CourtCommissionOrderReview.vue b/ppr-ui/src/components/registration/securities-act-notices/CourtCommissionOrderReview.vue
@@ -1,76 +1,84 @@
 <template>
-  <v-row
-    id="court-commission-order-review"
-    class="pa-4"
-    noGuttters
-  >
-    <v-col
-      cols="12"
-      class="py-0"
+  <v-expand-transition>
+    <v-row
+      id="court-commission-order-review"
+      class="pa-4"
+      noGuttters
     >
-      <h4>{{ courtCommissionLabel }}</h4>
-    </v-col>
-    <v-col
-      cols="3"
-      class="pt-1 pb-0 mb-0"
-    >
-      <h4>Court Name</h4>
-    </v-col>
-    <v-col
-      cols="9"
-      class="pt-1 pb-0 mb-0"
-    >
-      <p>{{ order.courtName }}</p>
-    </v-col>
-    <v-col
-      cols="3"
-      class="pt-1 pb-0 mb-0"
-    >
-      <h4>Court Registry</h4>
-    </v-col>
-    <v-col
-      cols="9"
-      class="pt-1 pb-0 mb-0"
-    >
-      <p>{{ order.courtRegistry }}</p>
-    </v-col>
-    <v-col
-      cols="3"
-      class="pt-1 pb-0 mb-0"
-    >
-      <h4>Court File Number</h4>
-    </v-col>
-    <v-col
-      cols="9"
-      class="pt-1 pb-0 mb-0"
-    >
-      <p>{{ order.fileNumber }}</p>
-    </v-col>
-    <v-col
-      cols="3"
-      class="pt-1 pb-0 mb-0"
-    >
-      <h4>Date of Order</h4>
-    </v-col>
-    <v-col
-      cols="9"
-      class="pt-1 pb-0 mb-0"
-    >
-      <p>{{ yyyyMmDdToPacificDate(order.orderDate, true) }}</p>
-    </v-col>
-    <v-col
-      cols="3"
-      class="pt-1 pb-0 mb-0"
-    >
-      <h4>Effect of Order</h4>
-    </v-col>
-    <v-col
-      cols="9"
-      class="pt-1 pb-0 mb-0"
-    >
-      <p>{{ order.effectOfOrder || '(Not Entered)' }}</p>
-    </v-col>
-  </v-row>
+      <v-col
+        cols="3"
+        class="py-0"
+      >
+        <h4>{{ courtCommissionLabel }}</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="py-0 px-0 mx-0 mt-n1"
+      >
+        <slot name="actions" />
+      </v-col>
+      <v-col
+        cols="3"
+        class="pt-1 pb-0 mb-0"
+      >
+        <h4>Court Name</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="pt-1 pb-0 mb-0"
+      >
+        <p>{{ order.courtName }}</p>
+      </v-col>
+      <v-col
+        cols="3"
+        class="pt-1 pb-0 mb-0"
+      >
+        <h4>Court Registry</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="pt-1 pb-0 mb-0"
+      >
+        <p>{{ order.courtRegistry }}</p>
+      </v-col>
+      <v-col
+        cols="3"
+        class="pt-1 pb-0 mb-0"
+      >
+        <h4>Court File Number</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="pt-1 pb-0 mb-0"
+      >
+        <p>{{ order.fileNumber }}</p>
+      </v-col>
+      <v-col
+        cols="3"
+        class="pt-1 pb-0 mb-0"
+      >
+        <h4>Date of Order</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="pt-1 pb-0 mb-0"
+      >
+        <p>{{ yyyyMmDdToPacificDate(order.orderDate, true) }}</p>
+      </v-col>
+      <v-col
+        cols="3"
+        class="pt-1 pb-0 mb-0"
+      >
+        <h4>Effect of Order</h4>
+      </v-col>
+      <v-col
+        cols="9"
+        class="pt-1 pb-0 mb-0"
+      >
+        <p>{{ order.effectOfOrder || '(Not Entered)' }}</p>
+      </v-col>
+    </v-row>
+  </v-expand-transition>
 </template>
 
 <script setup lang="ts">