UI patches (#905)

- Show 0 clients when NT server props are undefined
- Add Prettier 

---------

Co-authored-by: Matthew Morley <matthew.morley.ca@gmail.com>

photon-client/src/components/common/cv-icon.vue

@@ -1,34 +1,30 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  iconName: string,
-  color?: string,
-  tooltip?: string,
-  right?: boolean,
-  hover?: boolean
-}>(), {
-  right: false,
-  hover: false
-});
+const props = withDefaults(
+  defineProps<{
+    iconName: string;
+    color?: string;
+    tooltip?: string;
+    right?: boolean;
+    hover?: boolean;
+  }>(),
+  {
+    right: false,
+    hover: false
+  }
+);
+
+defineEmits<{
+  (e: "click"): void;
+}>();
 
 const hoverClass = props.hover ? "hover" : "";
 </script>
 
 <template>
   <div>
-    <v-tooltip
-      :right="right"
-      :bottom="!right"
-      nudge-right="10"
-      :disabled="tooltip === undefined"
-    >
+    <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" v-on="on" @click="$emit('click')">
           {{ iconName }}
         </v-icon>
       </template>
@@ -38,7 +34,7 @@ const hoverClass = props.hover ? "hover" : "";
 </template>
 
 <style scoped>
-    .hover:hover {
-        color: white !important;
-    }
+.hover:hover {
+  color: white !important;
+}
 </style>

photon-client/src/components/common/cv-input.vue

@@ -2,38 +2,40 @@
 import { computed } from "vue";
 import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
 
-const props = withDefaults(defineProps<{
-  label?: string,
-  tooltip?: string,
-  // TODO fully update v-model usage in custom components on Vue3 update
-  value: string,
-  disabled?: boolean,
-  errorMessage?: string,
-  placeholder?: string,
-  labelCols?: number,
-  inputCols?: number,
-  rules?: ((v: string) => boolean | string)[]
-}>(), {
-  disabled: false,
-  inputCols: 8
-});
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    tooltip?: string;
+    // TODO fully update v-model usage in custom components on Vue3 update
+    value: string;
+    disabled?: boolean;
+    errorMessage?: string;
+    placeholder?: string;
+    labelCols?: number;
+    inputCols?: number;
+    rules?: ((v: string) => boolean | string)[];
+  }>(),
+  {
+    disabled: false,
+    inputCols: 8
+  }
+);
 
 const emit = defineEmits<{
-  (e: "input", value: string): void
-  (e: "onEnter", value: string): void
-  (e: "onEscape"): void
+  (e: "input", value: string): void;
+  (e: "onEnter", value: string): void;
+  (e: "onEscape"): void;
 }>();
 
 const localValue = computed({
   get: () => props.value,
-  set: v => emit("input", v)
+  set: (v) => emit("input", v)
 });
 
-
 const handleKeydown = ({ key }) => {
   switch (key) {
     case "Enter":
-      if(!(props.rules || []).some(v => v(localValue.value) === false || typeof v(localValue.value) === "string")) {
+      if (!(props.rules || []).some((v) => v(localValue.value) === false || typeof v(localValue.value) === "string")) {
         emit("onEnter", localValue.value);
       }
       break;
@@ -42,20 +44,13 @@ const handleKeydown = ({ key }) => {
       break;
   }
 };
-
 </script>
 
 <template>
   <div>
-    <v-row
-      dense
-      align="center"
-    >
-      <v-col :cols="labelCols || (12 - inputCols)">
-        <tooltipped-label
-          :tooltip="tooltip"
-          :label="label"
-        />
+    <v-row dense align="center">
+      <v-col :cols="labelCols || 12 - inputCols">
+        <tooltipped-label :tooltip="tooltip" :label="label" />
       </v-col>
 
       <v-col :cols="inputCols">

photon-client/src/components/common/cv-number-input.vue

@@ -2,42 +2,39 @@
 import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
 import { computed } from "vue";
 
-const props = withDefaults(defineProps<{
-  label?: string,
-  tooltip?: string,
-  // TODO fully update v-model usage in custom components on Vue3 update
-  value: number,
-  disabled?: boolean,
-  labelCols?: number,
-  rules?: ((v: number) => boolean | string)[],
-  step?: number
-}>(), {
-  disabled: false,
-  labelCols: 2,
-  step: 1
-});
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    tooltip?: string;
+    // TODO fully update v-model usage in custom components on Vue3 update
+    value: number;
+    disabled?: boolean;
+    labelCols?: number;
+    rules?: ((v: number) => boolean | string)[];
+    step?: number;
+  }>(),
+  {
+    disabled: false,
+    labelCols: 2,
+    step: 1
+  }
+);
 
 const emit = defineEmits<{
-  (e: "input", value: number): void
+  (e: "input", value: number): void;
 }>();
 
 const localValue = computed({
   get: () => props.value,
-  set: v => emit("input", parseFloat(v as unknown as string))
+  set: (v) => emit("input", parseFloat(v as unknown as string))
 });
 </script>
 
 <template>
   <div>
-    <v-row
-      dense
-      align="center"
-    >
+    <v-row dense align="center">
       <v-col :cols="labelCols">
-        <tooltipped-label
-          :tooltip="tooltip"
-          :label="label"
-        />
+        <tooltipped-label :tooltip="tooltip" :label="label" />
       </v-col>
       <v-col>
         <v-text-field

photon-client/src/components/common/cv-radio.vue

@@ -2,48 +2,40 @@
 import { computed } from "vue";
 import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
 
-const props = withDefaults(defineProps<{
-  label?: string,
-  tooltip?: string,
-  // TODO fully update v-model usage in custom components on Vue3 update
-  value: number,
-  disabled?: boolean,
-  inputCols?: number,
-  list: string[]
-}>(), {
-  disabled: false,
-  inputCols: 8
-});
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    tooltip?: string;
+    // TODO fully update v-model usage in custom components on Vue3 update
+    value: number;
+    disabled?: boolean;
+    inputCols?: number;
+    list: string[];
+  }>(),
+  {
+    disabled: false,
+    inputCols: 8
+  }
+);
 
 const emit = defineEmits<{
-  (e: "input", value: number): void
+  (e: "input", value: number): void;
 }>();
 
 const localValue = computed({
   get: () => props.value,
-  set: v => emit("input", v)
+  set: (v) => emit("input", v)
 });
 </script>
 
 <template>
   <div>
-    <v-row
-      dense
-      align="center"
-    >
+    <v-row dense align="center">
       <v-col :cols="12 - inputCols">
-        <tooltipped-label
-          :tooltip="tooltip"
-          :label="label"
-        />
+        <tooltipped-label :tooltip="tooltip" :label="label" />
       </v-col>
       <v-col :cols="inputCols">
-        <v-radio-group
-          v-model="localValue"
-          row
-          dark
-          :mandatory="true"
-        >
+        <v-radio-group v-model="localValue" row dark :mandatory="true">
           <v-radio
             v-for="(radioName, index) in list"
             :key="index"

photon-client/src/components/common/cv-range-slider.vue

@@ -2,34 +2,37 @@
 import { computed } from "vue";
 import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
 
-const props = withDefaults(defineProps<{
-  label?: string,
-  tooltip?: string,
-  // TODO fully update v-model usage in custom components on Vue3 update
-  // value: [number, number] | WebsocketNumberPair, // Vue doesnt like Union types for the value prop for some reason.
-  value: [number, number],
-  min: number,
-  max: number,
-  step?: number,
-  sliderCols?: number,
-  disabled?: boolean,
-  inverted?: boolean,
-}>(), {
-  step: 1,
-  disabled: false,
-  inverted: false,
-  sliderCols: 10
-});
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    tooltip?: string;
+    // TODO fully update v-model usage in custom components on Vue3 update
+    // value: [number, number] | WebsocketNumberPair, // Vue doesnt like Union types for the value prop for some reason.
+    value: [number, number];
+    min: number;
+    max: number;
+    step?: number;
+    sliderCols?: number;
+    disabled?: boolean;
+    inverted?: boolean;
+  }>(),
+  {
+    step: 1,
+    disabled: false,
+    inverted: false,
+    sliderCols: 10
+  }
+);
 
 const emit = defineEmits<{
-  (e: "input", value: [number, number]): void
+  (e: "input", value: [number, number]): void;
 }>();
 
 const localValue = computed<[number, number]>({
-  get: ():[number, number] => {
+  get: (): [number, number] => {
     return Object.values(props.value) as [number, number];
   },
-  set: v => emit("input", v)
+  set: (v) => emit("input", v)
 });
 
 const changeFromSlot = (v: number, i: number) => {
@@ -42,15 +45,9 @@ const changeFromSlot = (v: number, i: number) => {
 
 <template>
   <div>
-    <v-row
-      dense
-      align="center"
-    >
+    <v-row dense align="center">
       <v-col :cols="12 - sliderCols">
-        <tooltipped-label
-          :tooltip="tooltip"
-          :label="label"
-        />
+        <tooltipped-label :tooltip="tooltip" :label="label" />
       </v-col>
       <v-col :cols="sliderCols">
         <v-range-slider
@@ -79,7 +76,7 @@ const changeFromSlot = (v: number, i: number) => {
               :step="step"
               type="number"
               style="width: 60px"
-              @input="v => changeFromSlot(v, 0)"
+              @input="(v) => changeFromSlot(v, 0)"
             />
           </template>
           <template #append>
@@ -95,7 +92,7 @@ const changeFromSlot = (v: number, i: number) => {
               :step="step"
               type="number"
               style="width: 60px"
-              @input="v => changeFromSlot(v, 1)"
+              @input="(v) => changeFromSlot(v, 1)"
             />
           </template>
         </v-range-slider>

photon-client/src/components/common/cv-select.vue

@@ -3,37 +3,40 @@ import { computed } from "vue";
 import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
 
 interface SelectItem {
-  name: string | number,
-  value: string | number,
-  disabled?: boolean
+  name: string | number;
+  value: string | number;
+  disabled?: boolean;
 }
 
-const props = withDefaults(defineProps<{
-  label?: string,
-  tooltip?: string,
-  selectCols?: number,
-  // TODO fully update v-model usage in custom components on Vue3 update
-  value: number,
-  disabled?: boolean,
-  items: string[] | number[] | SelectItem[]
-}>(), {
-  selectCols: 9,
-  disabled: false
-});
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    tooltip?: string;
+    selectCols?: number;
+    // TODO fully update v-model usage in custom components on Vue3 update
+    value: number;
+    disabled?: boolean;
+    items: string[] | number[] | SelectItem[];
+  }>(),
+  {
+    selectCols: 9,
+    disabled: false
+  }
+);
 
 const emit = defineEmits<{
-  (e: "input", value: number): void
+  (e: "input", value: number): void;
 }>();
 
 const localValue = computed({
   get: () => props.value,
-  set: v => emit("input", v)
+  set: (v) => emit("input", v)
 });
 
 // Computed in case items changes
 const items = computed<SelectItem[]>(() => {
   // Check if the prop exists on the object to infer object type
-  if((props.items[0] as SelectItem).name) {
+  if ((props.items[0] as SelectItem).name) {
     return props.items as SelectItem[];
   }
   return props.items.map((v, i) => ({ name: v, value: i }));
@@ -42,15 +45,9 @@ const items = computed<SelectItem[]>(() => {
 
 <template>
   <div>
-    <v-row
-      dense
-      align="center"
-    >
+    <v-row dense align="center">
       <v-col :cols="12 - selectCols">
-        <tooltipped-label
-          :tooltip="tooltip"
-          :label="label"
-        />
+        <tooltipped-label :tooltip="tooltip" :label="label" />
       </v-col>
       <v-col :cols="selectCols">
         <v-select

photon-client/src/components/common/cv-slider.vue

@@ -2,43 +2,40 @@
 import { computed } from "vue";
 import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
 
-const props = withDefaults(defineProps<{
-  label?: string,
-  tooltip?: string,
-  // TODO fully update v-model usage in custom components on Vue3 update
-  value: number,
-  min: number,
-  max: number,
-  step?: number
-  disabled?: boolean,
-  sliderCols?: number,
-}>(), {
-  step: 1,
-  disabled: false,
-  sliderCols: 8
-});
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    tooltip?: string;
+    // TODO fully update v-model usage in custom components on Vue3 update
+    value: number;
+    min: number;
+    max: number;
+    step?: number;
+    disabled?: boolean;
+    sliderCols?: number;
+  }>(),
+  {
+    step: 1,
+    disabled: false,
+    sliderCols: 8
+  }
+);
 
 const emit = defineEmits<{
-  (e: "input", value: number): void
+  (e: "input", value: number): void;
 }>();
 
 const localValue = computed({
   get: () => props.value,
-  set: v => emit("input", v)
+  set: (v) => emit("input", v)
 });
 </script>
 
 <template>
   <div>
-    <v-row
-      dense
-      align="center"
-    >
+    <v-row dense align="center">
       <v-col :cols="12 - sliderCols">
-        <tooltipped-label
-          :tooltip="tooltip"
-          :label="label"
-        />
+        <tooltipped-label :tooltip="tooltip" :label="label" />
       </v-col>
       <v-col :cols="sliderCols">
         <v-slider

photon-client/src/components/common/cv-switch.vue

@@ -2,48 +2,40 @@
 import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
 import { computed } from "vue";
 
-const props = withDefaults(defineProps<{
-  label?: string,
-  tooltip?: string,
-  // TODO fully update v-model usage in custom components on Vue3 update
-  value: boolean,
-  disabled?: boolean,
-  labelCols?: number,
-  switchCols?: number
-}>(), {
-  disabled: false,
-  labelCols: 2
-});
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    tooltip?: string;
+    // TODO fully update v-model usage in custom components on Vue3 update
+    value: boolean;
+    disabled?: boolean;
+    labelCols?: number;
+    switchCols?: number;
+  }>(),
+  {
+    disabled: false,
+    labelCols: 2
+  }
+);
 
 const emit = defineEmits<{
-  (e: "input", value: boolean): void
+  (e: "input", value: boolean): void;
 }>();
 
 const localValue = computed({
   get: () => props.value,
-  set: v => emit("input", v)
+  set: (v) => emit("input", v)
 });
 </script>
 
 <template>
   <div>
-    <v-row
-      dense
-      align="center"
-    >
-      <v-col :cols="(12 - switchCols) || labelCols">
-        <tooltipped-label
-          :tooltip="tooltip"
-          :label="label"
-        />
+    <v-row dense align="center">
+      <v-col :cols="12 - switchCols || labelCols">
+        <tooltipped-label :tooltip="tooltip" :label="label" />
       </v-col>
-      <v-col :cols="switchCols || (12 - labelCols)">
-        <v-switch
-          v-model="localValue"
-          dark
-          :disabled="disabled"
-          color="#ffd843"
-        />
+      <v-col :cols="switchCols || 12 - labelCols">
+        <v-switch v-model="localValue" dark :disabled="disabled" color="#ffd843" />
       </v-col>
     </v-row>
   </div>

photon-client/src/components/common/cv-tooltipped-label.vue

@@ -1,24 +1,15 @@
 <script setup lang="ts">
 defineProps<{
-  label?: string,
-  tooltip?: string
+  label?: string;
+  tooltip?: string;
 }>();
 </script>
 
 <template>
   <div>
-    <v-tooltip
-      :disabled="tooltip === undefined"
-      right
-      open-delay="300"
-    >
+    <v-tooltip :disabled="tooltip === undefined" right open-delay="300">
       <template #activator="{ on, attrs }">
-        <span
-          style="cursor: text !important;"
-          class="white--text"
-          v-bind="attrs"
-          v-on="on"
-        >{{ label }}</span>
+        <span style="cursor: text !important" class="white--text" v-bind="attrs" v-on="on">{{ label }}</span>
       </template>
       <span>{{ tooltip }}</span>
     </v-tooltip>