From b36d9b42c7090bc9749a0f8e92e5c1c64b61da05 Mon Sep 17 00:00:00 2001
From: Miguel Angel <miguelangeldev@icloud.com>
Date: Wed, 12 Jun 2024 08:56:47 -0400
Subject: [PATCH] fix(cr): add missing translations, improve sortable list

---
 src/components/computed-properties.vue        | 55 +++++++++++--------
 .../sortable/sortableList/SortableList.vue    |  2 +-
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/computed-properties.vue b/src/components/computed-properties.vue
index 39e5fa88a..a8e020150 100644
--- a/src/components/computed-properties.vue
+++ b/src/components/computed-properties.vue
@@ -34,7 +34,7 @@
         <template #options="{ item }">
           <button
             v-b-tooltip="{ customClass: 'bypass-btn-tooltip' }"
-            :title="item.byPass ? 'Unbypass Calc' : 'Bypass Calc'"
+            :title="item.byPass ? $t('Unbypass Calc') : $t('Bypass Calc')"
             class="btn"
             data-test="calcs-bypass"
             @click="toggleBypass(item.id)"
@@ -52,29 +52,36 @@
     </template>
 
     <template v-else>
-      <required />
-      <form-input
-        ref="property"
-        v-model="add.property"
-        :label="$t('Property Name') + ' *'"
-        name="property"
-        :error="errors.property"
-        class="mb-3"
-        data-cy="calcs-property-name"
-        required
-        aria-required="true"
-      />
-      <form-text-area
-        ref="name"
-        v-model="add.name"
-        :label="$t('Description') + ' *'"
-        name="name"
-        :error="errors.name"
-        class="mb-3"
-        data-cy="calcs-property-description"
-        required
-        aria-required="true"
-      />
+      <b-container>
+        <b-row class="p-0">
+          <b-col class="pl-0">
+            <form-input
+              ref="property"
+              v-model="add.property"
+              :label="$t('Property Name') + ' *'"
+              name="property"
+              :error="errors.property"
+              class="mb-3"
+              data-cy="calcs-property-name"
+              required
+              aria-required="true"
+            />
+          </b-col>
+          <b-col class="pr-0">
+            <form-text-area
+              ref="name"
+              v-model="add.name"
+              :label="$t('Description') + ' *'"
+              name="name"
+              :error="errors.name"
+              class="mb-3"
+              data-cy="calcs-property-description"
+              required
+              aria-required="true"
+            />
+          </b-col>
+        </b-row>
+      </b-container>
       <div class="form-group mb-3" style="position: relative">
         <label v-show="isJS">{{ $t("Formula") + " *" }}</label>
         <div class="float-right">
diff --git a/src/components/sortable/sortableList/SortableList.vue b/src/components/sortable/sortableList/SortableList.vue
index 221a32241..3e73e4a10 100644
--- a/src/components/sortable/sortableList/SortableList.vue
+++ b/src/components/sortable/sortableList/SortableList.vue
@@ -18,7 +18,7 @@
       </div>
       <div
         v-for="(item, index) in sortedItems"
-        :key="index"
+        :key="`item-${index}`"
         :data-order="item.order"
         :data-test="`item-${item.order}`"
         :title="item.name"