feat: add bypass toggle

src/components/computed-properties.vue

@@ -19,6 +19,7 @@
         :fields="fields"
         :items="current"
         filter-key="name"
+        disable-key="byPass"
         :inline-edit="false"
         :data-test-actions="{
           tableBox: { 'data-cy': 'calcs-table' },
@@ -30,13 +31,15 @@
         @item-delete="deleteProperty"
         @add-page="displayFormProperty"
       >
-        <template #options>
+        <template #options="{ item }">
           <button
             v-b-tooltip="{ customClass: 'bypass-btn-tooltip' }"
-            title="Unbypass Calc"
+            :title="item.byPass ? 'Unbypass Calc' : 'Bypass Calc'"
             class="btn"
+            @click="toggleBypass(item.id)"
           >
-            <i class="fas fa-sign-in-alt"></i>
+            <i v-show="!item.byPass" class="fas fa-sign-out-alt"></i>
+            <i v-show="item.byPass" class="fas fa-sign-in-alt"></i>
           </button>
           <div class="sortable-item-vr"></div>
         </template>
@@ -238,9 +241,14 @@ export default {
       this.value.forEach((item) => {
         this.numberItem++;
         item.id = this.numberItem;
+
+        if (!Object.hasOwn(item, 'byPass')) {
+          item.byPass = false;
+        }
       });
+
       this.current = this.value;
-    }
+    },
   },
   created() {
     Validator.register(
@@ -314,6 +322,13 @@ export default {
         this.focusFirstCalculatedPropertiesError();
       }
     },
+    toggleBypass(itemId) {
+      this.current = this.current.map((item) =>
+        item.id === itemId ? { ...item, byPass: !item.byPass } : item,
+      );
+
+      this.$emit("input", this.current);
+    },
     saveProperty() {
       if (this.add.id === 0) {
         this.numberItem++;
@@ -322,7 +337,8 @@ export default {
           property: this.add.property,
           name: this.add.name,
           formula: this.add.formula,
-          type: this.add.type
+          type: this.add.type,
+          byPass: false,
         });
       } else {
         this.current.forEach((item) => {

src/components/sortable/Sortable.vue

@@ -28,13 +28,14 @@
       :items="items"
       :filtered-items="filteredItems"
       :inline-edit="inlineEdit"
+      :disable-key="disableKey"
       :data-test-actions="dataTestActions"
       @ordered="$emit('ordered', $event)"
       @item-edit="$emit('item-edit', $event)"
       @item-delete="$emit('item-delete', $event)"
     >
-      <template #options>
-        <slot name="options"></slot>
+      <template #options="{ item }">
+        <slot name="options" :item="item"></slot>
       </template>
     </SortableList>
   </div>
@@ -52,6 +53,7 @@ export default {
     fields: { type: Array, required: true },
     items: { type: Array, required: true },
     filterKey: { type: String, required: true },
+    disableKey: { type: String, default: null },
     inlineEdit: { type: Boolean, default: true },
     dataTestActions: {
       type: Object,

src/components/sortable/sortableList/SortableList.vue

@@ -22,7 +22,11 @@
         :data-order="item.order"
         :data-test="`item-${item.order}`"
         :title="item.name"
-        class="sortable-list-tr sortable-item"
+        :class="[
+          'sortable-list-tr',
+          'sortable-item',
+          { 'sortable-item-disabled': isDisabled(item) },
+        ]"
         draggable="true"
         @dragstart="(event) => dragStart(event, item.order)"
         @dragenter="(event) => dragEnter(event, item.order)"
@@ -69,7 +73,7 @@
               <i class="fas fa-edit"></i>
             </button>
             <div class="sortable-item-vr"></div>
-            <slot name="options"></slot>
+            <slot name="options" :item="item"></slot>
             <button
               class="btn"
               title="Delete"
@@ -93,6 +97,7 @@ export default {
     items: { type: Array, required: true },
     filteredItems: { type: Array, required: true },
     inlineEdit: { type: Boolean, default: true },
+    disableKey: { type: String, default: null },
     dataTestActions: { type: Object, required: true },
   },
   data() {
@@ -223,6 +228,9 @@ export default {
     dragOver(event) {
       event.preventDefault();
     },
+    isDisabled(item) {
+      return this.disableKey ? item[this.disableKey] : false;
+    },
   },
 }
 </script>

src/components/sortable/sortableList/sortableList.scss

@@ -77,6 +77,10 @@ $border-color: #cdddee;
       margin: 9px 0;
       border-right: 1px solid $border-color;
     }
+
+    &-disabled > .sortable-item-prop {
+      color: rgba(85, 98, 113, 0.5);
+    }
   }
 }