From 31aa29167232bf6d169683c291ec579c4736a889 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Fri, 25 Mar 2022 11:08:14 -0700
Subject: [PATCH] add checkbox

(merged to master after this branch was cut)
---
 src/api/forms/FormController.js               |  2 +
 src/api/forms/components/FormRow.vue          |  6 +-
 .../components/controls/CheckBoxField.vue     | 62 +++++++++++++++++++
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 src/api/forms/components/controls/CheckBoxField.vue

diff --git a/src/api/forms/FormController.js b/src/api/forms/FormController.js
index a1cadcaeb5..93f87b9dcf 100644
--- a/src/api/forms/FormController.js
+++ b/src/api/forms/FormController.js
@@ -1,5 +1,6 @@
 import AutoCompleteField from './components/controls/AutoCompleteField.vue';
 import ClockDisplayFormatField from './components/controls/ClockDisplayFormatField.vue';
+import CheckBoxField from './components/controls/CheckBoxField.vue';
 import Datetime from './components/controls/Datetime.vue';
 import FileInput from './components/controls/FileInput.vue';
 import Locator from './components/controls/Locator.vue';
@@ -12,6 +13,7 @@ import Vue from 'vue';
 
 export const DEFAULT_CONTROLS_MAP = {
     'autocomplete': AutoCompleteField,
+    'checkbox': CheckBoxField,
     'composite': ClockDisplayFormatField,
     'datetime': Datetime,
     'file-input': FileInput,
diff --git a/src/api/forms/components/FormRow.vue b/src/api/forms/components/FormRow.vue
index c69c81c8af..8f395e5034 100644
--- a/src/api/forms/components/FormRow.vue
+++ b/src/api/forms/components/FormRow.vue
@@ -75,10 +75,12 @@ export default {
         rowClass() {
             let cssClass = this.cssClass;
 
-            if (this.row.required) {
-                cssClass = `${cssClass} req`;
+            if (!this.row.required) {
+                return;
             }
 
+            cssClass = `${cssClass} req`;
+
             if (this.visited && this.valid !== undefined) {
                 if (this.valid === true) {
                     cssClass = `${cssClass} valid`;
diff --git a/src/api/forms/components/controls/CheckBoxField.vue b/src/api/forms/components/controls/CheckBoxField.vue
new file mode 100644
index 0000000000..6bbd215534
--- /dev/null
+++ b/src/api/forms/components/controls/CheckBoxField.vue
@@ -0,0 +1,62 @@
+/*****************************************************************************
+* Open MCT, Copyright (c) 2014-2022, United States Government
+* as represented by the Administrator of the National Aeronautics and Space
+* Administration. All rights reserved.
+*
+* Open MCT is licensed under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+* http://www.apache.org/licenses/LICENSE-2.0.
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*
+* Open MCT includes source code licensed under additional open source
+* licenses. See the Open Source Licenses file (LICENSES.md) included with
+* this source code distribution or the Licensing information page available
+* at runtime from the About dialog for additional information.
+*****************************************************************************/
+
+<template>
+<span class="form-control shell">
+    <span
+        class="field control"
+        :class="model.cssClass"
+    >
+        <input
+            type="checkbox"
+            :checked="isChecked"
+            @input="toggleCheckBox"
+        >
+    </span>
+</span>
+</template>
+
+<script>
+export default {
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            isChecked: this.model.value
+        };
+    },
+    methods: {
+        toggleCheckBox() {
+            this.isChecked = !this.isChecked;
+            const data = {
+                model: this.model,
+                value: this.isChecked
+            };
+            this.$emit('onChange', data);
+        }
+    }
+};
+</script>