feat: Toggle automation status (#3991)

app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue

@@ -34,12 +34,19 @@
               <td>{{ automation.name }}</td>
               <td>{{ automation.description }}</td>
               <td>
-                <fluent-icon
-                  v-if="automation.active"
-                  icon="checkmark-square"
-                  type="solid"
-                />
-                <fluent-icon v-else icon="square" />
+                <button
+                  type="button"
+                  class="toggle-button"
+                  :class="{ active: automation.active }"
+                  role="switch"
+                  :aria-checked="automation.active.toString()"
+                  @click="toggleAutomation(automation, automation.active)"
+                >
+                  <span
+                    aria-hidden="true"
+                    :class="{ active: automation.active }"
+                  ></span>
+                </button>
               </td>
               <td>{{ readableTime(automation.created_on) }}</td>
               <td class="button-wrapper">
@@ -120,6 +127,11 @@
         @saveAutomation="submitAutomation"
       />
     </woot-modal>
+    <woot-confirm-modal
+      ref="confirmDialog"
+      :title="toggleModalTitle"
+      :description="toggleModalDescription"
+    />
   </div>
 </template>
 <script>
@@ -142,6 +154,10 @@ export default {
       showEditPopup: false,
       showDeleteConfirmationPopup: false,
       selectedResponse: {},
+      toggleModalTitle: this.$t('AUTOMATION.TOGGLE.ACTIVATION_TITLE'),
+      toggleModalDescription: this.$t(
+        'AUTOMATION.TOGGLE.ACTIVATION_DESCRIPTION'
+      ),
     };
   },
   computed: {
@@ -235,6 +251,34 @@ export default {
         this.showAlert(errorMessage);
       }
     },
+    async toggleAutomation(automation, status) {
+      try {
+        this.toggleModalTitle = status
+          ? this.$t('AUTOMATION.TOGGLE.DEACTIVATION_TITLE')
+          : this.$t('AUTOMATION.TOGGLE.ACTIVATION_TITLE');
+        this.toggleModalDescription = status
+          ? this.$t('AUTOMATION.TOGGLE.DEACTIVATION_DESCRIPTION', {
+              automationName: automation.name,
+            })
+          : this.$t('AUTOMATION.TOGGLE.ACTIVATION_DESCRIPTION', {
+              automationName: automation.name,
+            });
+        // Check if uses confirms to proceed
+        const ok = await this.$refs.confirmDialog.showConfirmation();
+        if (ok) {
+          await await this.$store.dispatch('automations/update', {
+            id: automation.id,
+            active: !status,
+          });
+          const message = status
+            ? this.$t('AUTOMATION.TOGGLE.DEACTIVATION_SUCCESFUL')
+            : this.$t('AUTOMATION.TOGGLE.ACTIVATION_SUCCESFUL');
+          this.showAlert(message);
+        }
+      } catch (error) {
+        this.showAlert(this.$t('AUTOMATION.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
     readableTime(date) {
       return this.messageStamp(new Date(date), 'LLL d, h:mm a');
     },
@@ -246,4 +290,41 @@ export default {
 .automation__status-checkbox {
   margin: 0;
 }
+.toggle-button {
+  background-color: var(--s-200);
+  position: relative;
+  display: inline-flex;
+  height: 19px;
+  width: 34px;
+  border: 2px solid transparent;
+  border-radius: var(--border-radius-large);
+  cursor: pointer;
+  transition-property: background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  flex-shrink: 0;
+}
+
+.toggle-button.active {
+  background-color: var(--w-500);
+}
+
+.toggle-button span {
+  --space-one-point-five: 1.5rem;
+  height: var(--space-one-point-five);
+  width: var(--space-one-point-five);
+  display: inline-block;
+  background-color: var(--white);
+  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
+    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  transform: translate(0, 0);
+  border-radius: 100%;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.toggle-button span.active {
+  transform: translate(var(--space-one-point-five), var(--space-zero));
+}
 </style>