From f83c6cc7e0d93b051a9d474a3acf89b2b56643b0 Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Mon, 29 Apr 2024 12:23:52 -0300
Subject: [PATCH] views: Video Config: Improv protocol selection

* Change from using a combobox that allow for empty protocol aray to use
  a new approach with select boxes that alway keeps one item selected
---
 src/views/ConfigurationVideoView.vue | 34 +++++++++++++++++-----------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/views/ConfigurationVideoView.vue b/src/views/ConfigurationVideoView.vue
index 348b9f18..6e618628 100644
--- a/src/views/ConfigurationVideoView.vue
+++ b/src/views/ConfigurationVideoView.vue
@@ -37,19 +37,19 @@
         />
       </div>
 
-      <div class="flex w-[30rem] flex-wrap">
-        <v-combobox
-          v-model="allowedIceProtocols"
-          multiple
-          :items="availableICEProtocols"
-          label="Allowed WebRTC protocols"
-          class="w-full my-3 uri-input"
-          variant="outlined"
-          chips
-          clearable
-          hint="Specific protocols allowed to be used for the WebRTC. Blank means any protocol will be supported."
-          persistent-hint
-        />
+      <p class="text-sm font-bold text-grey-darken-1 bg-grey-lighten-5">Allowed WebRTC protocols:</p>
+      <div class="flex items-center justify-start">
+        <div v-for="protocol in availableICEProtocols" :key="protocol" class="mx-2">
+          <v-checkbox
+            v-model="allowedIceProtocols"
+            :label="protocol.toUpperCase()"
+            :value="protocol"
+            :disabled="
+              allowedIceProtocols.length === 1 && allowedIceProtocols[0].toLowerCase() === protocol.toLowerCase()
+            "
+            class="text-sm"
+          />
+        </div>
       </div>
     </template>
   </BaseConfigurationView>
@@ -57,6 +57,7 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
+import { onMounted } from 'vue'
 
 import { useVideoStore } from '@/stores/video'
 
@@ -69,5 +70,12 @@ import BaseConfigurationView from './BaseConfigurationView.vue'
 const availableICEProtocols = ['udp', 'tcp']
 
 const videoStore = useVideoStore()
+
+onMounted(() => {
+  if (allowedIceProtocols.value.length === 0) {
+    allowedIceProtocols.value = availableICEProtocols
+  }
+})
+
 const { allowedIceIps, allowedIceProtocols, availableIceIps } = storeToRefs(videoStore)
 </script>