From 8446c9450812df148c6aeb8daf69edafcf8ee85e Mon Sep 17 00:00:00 2001
From: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>
Date: Sat, 21 Oct 2023 10:46:53 -0400
Subject: [PATCH] [photon-client] Fix camera and pipeline name editing (#969)

closes #965

    Had to disable the eslint rule that was causing the bug.
    Disallows disabling driver mode when there are no other pipelines to swap to
    Also adds icons for saving and canceling name edits
    Adds the option to create a new pipeline in driver mode if there are no other pipelines
    Adds disable prop to the driver mode switch on the camera settings page
---
 photon-client/.eslintrc.json                  |  3 +-
 .../src/components/cameras/CamerasView.vue    |  2 +-
 .../src/components/common/pv-icon.vue         | 11 +++-
 .../src/components/common/pv-input.vue        |  7 ++-
 .../dashboard/CameraAndPipelineSelectCard.vue | 59 ++++++++++++++-----
 .../src/components/dashboard/CamerasCard.vue  |  9 ++-
 6 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/photon-client/.eslintrc.json b/photon-client/.eslintrc.json
index a257cd186a..ca944a24c4 100644
--- a/photon-client/.eslintrc.json
+++ b/photon-client/.eslintrc.json
@@ -15,6 +15,7 @@
     "object-curly-spacing": ["error", "always"],
     "quote-props": ["error", "as-needed"],
     "no-case-declarations": "off",
-    "vue/require-default-prop": "off"
+    "vue/require-default-prop": "off",
+    "vue/v-on-event-hyphenation": "off"
   }
 }
diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
index 4448dcde1e..a0c1968d1e 100644
--- a/photon-client/src/components/cameras/CamerasView.vue
+++ b/photon-client/src/components/cameras/CamerasView.vue
@@ -68,7 +68,7 @@ const fpsTooLow = computed<boolean>(() => {
       <div>
         <v-switch
           v-model="driverMode"
-          :disabled="useCameraSettingsStore().isCalibrationMode"
+          :disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
           label="Driver Mode"
           style="margin-left: auto"
           color="accent"
diff --git a/photon-client/src/components/common/pv-icon.vue b/photon-client/src/components/common/pv-icon.vue
index 6781dff80e..6122a1cda3 100644
--- a/photon-client/src/components/common/pv-icon.vue
+++ b/photon-client/src/components/common/pv-icon.vue
@@ -2,6 +2,7 @@
 const props = withDefaults(
   defineProps<{
     iconName: string;
+    disabled?: boolean;
     color?: string;
     tooltip?: string;
     right?: boolean;
@@ -9,6 +10,7 @@ const props = withDefaults(
   }>(),
   {
     right: false,
+    disabled: false,
     hover: false
   }
 );
@@ -24,7 +26,14 @@ const hoverClass = props.hover ? "hover" : "";
   <div>
     <v-tooltip :right="right" :bottom="!right" nudge-right="10" :disabled="tooltip === undefined">
       <template #activator="{ on, attrs }">
-        <v-icon :class="hoverClass" :color="color" v-bind="attrs" v-on="on" @click="$emit('click')">
+        <v-icon
+          :class="hoverClass"
+          :color="color"
+          v-bind="attrs"
+          :disabled="disabled"
+          v-on="on"
+          @click="$emit('click')"
+        >
           {{ iconName }}
         </v-icon>
       </template>
diff --git a/photon-client/src/components/common/pv-input.vue b/photon-client/src/components/common/pv-input.vue
index ff3434132c..282e95e367 100644
--- a/photon-client/src/components/common/pv-input.vue
+++ b/photon-client/src/components/common/pv-input.vue
@@ -35,9 +35,10 @@ const localValue = computed({
 const handleKeydown = ({ key }) => {
   switch (key) {
     case "Enter":
-      if (!(props.rules || []).some((v) => v(localValue.value) === false || typeof v(localValue.value) === "string")) {
-        emit("onEnter", localValue.value);
-      }
+      // Explicitly check that all rule props return true
+      if (!props.rules?.every((rule) => rule(localValue.value) === true)) return;
+
+      emit("onEnter", localValue.value);
       break;
     case "Escape":
       emit("onEscape");
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index b01b4a4dd8..c7b6d3724b 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -138,7 +138,7 @@ const cancelPipelineCreation = () => {
   newPipelineType.value = useCameraSettingsStore().currentWebsocketPipelineType;
 };
 
-// Pipeline Creation
+// Pipeline Deletion
 const showPipelineDeletionConfirmationDialog = ref(false);
 const confirmDeleteCurrentPipeline = () => {
   useCameraSettingsStore().deleteCurrentPipeline();
@@ -186,6 +186,11 @@ const cancelChangePipelineType = () => {
   showPipelineTypeChangeDialog.value = false;
 };
 
+// Pipeline duplication'
+const duplicateCurrentPipeline = () => {
+  useCameraSettingsStore().duplicatePipeline(useCameraSettingsStore().currentCameraSettings.currentPipelineIndex);
+};
+
 // Change Props whenever the pipeline settings are changed
 useCameraSettingsStore().$subscribe((mutation, state) => {
   const currentCameraSettings = state.cameras[useStateStore().currentCameraIndex];
@@ -225,12 +230,27 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
           :input-cols="12 - 3"
           :rules="[(v) => checkCameraName(v)]"
           label="Camera"
-          @on-enter="saveCameraNameEdit"
-          @on-escape="cancelCameraNameEdit"
+          @onEnter="saveCameraNameEdit"
+          @onEscape="cancelCameraNameEdit"
         />
       </v-col>
       <v-col cols="2" style="display: flex; align-items: center; justify-content: center">
-        <pv-icon color="#c5c5c5" icon-name="mdi-pencil" tooltip="Edit Camera Name" @click="startCameraNameEdit" />
+        <div v-if="isCameraNameEdit" style="display: flex; gap: 14px">
+          <pv-icon
+            icon-name="mdi-content-save"
+            color="#c5c5c5"
+            :disabled="checkCameraName(currentCameraName) !== true"
+            @click="() => saveCameraNameEdit(currentCameraName)"
+          />
+          <pv-icon icon-name="mdi-cancel" color="red darken-2" @click="cancelCameraNameEdit" />
+        </div>
+        <pv-icon
+          v-else
+          color="#c5c5c5"
+          icon-name="mdi-pencil"
+          tooltip="Edit Camera Name"
+          @click="startCameraNameEdit"
+        />
       </v-col>
     </v-row>
     <v-row style="padding: 0 12px 0 24px">
@@ -250,12 +270,21 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
           :input-cols="12 - 3"
           :rules="[(v) => checkPipelineName(v)]"
           label="Pipeline"
-          @on-enter="(v) => savePipelineNameEdit(v)"
-          @on-escape="cancelPipelineNameEdit"
+          @onEnter="(v) => savePipelineNameEdit(v)"
+          @onEscape="cancelPipelineNameEdit"
         />
       </v-col>
       <v-col cols="2" class="pa-0" style="display: flex; align-items: center; justify-content: center">
-        <v-menu v-if="!useCameraSettingsStore().isDriverMode" offset-y nudge-bottom="7" auto>
+        <div v-if="isPipelineNameEdit" style="display: flex; gap: 14px">
+          <pv-icon
+            icon-name="mdi-content-save"
+            color="#c5c5c5"
+            :disabled="checkPipelineName(currentPipelineName) !== true"
+            @click="() => savePipelineNameEdit(currentPipelineName)"
+          />
+          <pv-icon icon-name="mdi-cancel" color="red darken-2" @click="cancelPipelineNameEdit" />
+        </div>
+        <v-menu v-else-if="!useCameraSettingsStore().isDriverMode" offset-y nudge-bottom="7" auto>
           <template #activator="{ on }">
             <v-icon color="#c5c5c5" v-on="on" @click="cancelPipelineNameEdit"> mdi-menu </v-icon>
           </template>
@@ -275,19 +304,21 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
                 <pv-icon color="red darken-2" :right="true" icon-name="mdi-delete" tooltip="Delete pipeline" />
               </v-list-item-title>
             </v-list-item>
-            <v-list-item
-              @click="
-                useCameraSettingsStore().duplicatePipeline(
-                  useCameraSettingsStore().currentCameraSettings.currentPipelineIndex
-                )
-              "
-            >
+            <v-list-item @click="duplicateCurrentPipeline">
               <v-list-item-title>
                 <pv-icon color="#c5c5c5" :right="true" icon-name="mdi-content-copy" tooltip="Duplicate pipeline" />
               </v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>
+        <pv-icon
+          v-else-if="useCameraSettingsStore().isDriverMode && useCameraSettingsStore().pipelineNames.length === 0"
+          color="#c5c5c5"
+          :right="true"
+          icon-name="mdi-plus"
+          tooltip="Add new pipeline"
+          @click="showCreatePipelineDialog"
+        />
       </v-col>
     </v-row>
     <v-row style="padding: 0 12px 12px 24px">
diff --git a/photon-client/src/components/dashboard/CamerasCard.vue b/photon-client/src/components/dashboard/CamerasCard.vue
index 5670106df3..21fb77ada2 100644
--- a/photon-client/src/components/dashboard/CamerasCard.vue
+++ b/photon-client/src/components/dashboard/CamerasCard.vue
@@ -66,7 +66,14 @@ const fpsTooLow = computed<boolean>(() => {
         </v-chip>
       </div>
       <div>
-        <v-switch v-model="driverMode" label="Driver Mode" style="margin-left: auto" color="accent" class="pt-2" />
+        <v-switch
+          v-model="driverMode"
+          :disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
+          label="Driver Mode"
+          style="margin-left: auto"
+          color="accent"
+          class="pt-2"
+        />
       </div>
     </v-card-title>
     <v-divider style="border-color: white" />