Adding and deleting users

client/components/ui/InputDropdown.vue

@@ -4,7 +4,7 @@
     <div ref="wrapper" class="relative">
       <form @submit.prevent="submitForm">
         <div ref="inputWrapper" class="flex-wrap relative w-full shadow-sm flex items-center bg-primary border border-gray-600 rounded px-2 py-2">
-          <input ref="input" v-model="textInput" class="h-full w-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
+          <input ref="input" v-model="textInput" :readonly="!editable" class="h-full w-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" />
         </div>
       </form>
 
@@ -37,6 +37,10 @@ export default {
     items: {
       type: Array,
       default: () => []
+    },
+    editable: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

client/components/ui/ToggleSwitch.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="border rounded-full border-black-100 flex items-center cursor-pointer w-12 justify-end" :class="toggleColor" @click="clickToggle">
+      <span class="rounded-full border w-6 h-6 border-black-50 bg-white shadow transform transition-transform duration-100" :class="!toggleValue ? '-translate-x-6' : ''"> </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean
+  },
+  computed: {
+    toggleValue: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    toggleColor() {
+      return this.toggleValue ? 'bg-success' : 'bg-primary'
+    }
+  },
+  methods: {
+    clickToggle() {
+      console.log('click toggle', this.toggleValue)
+      this.toggleValue = !this.toggleValue
+    }
+  }
+}
+</script>