Edit label (#146)

* Edit label

frontend/assets/css/main.scss

@@ -25,9 +25,14 @@ a {
 .link {
   color: var(--link-color);
   cursor: pointer;
-  &:hover {
+  &:hover:not([disabled="true"]) {
     opacity: 0.8;
   }
+
+  &[disabled="true"]{
+    color: var(--disabled-color);
+    cursor: unset;
+  }
 }
 
 @mixin container() {

frontend/components/bc/input/BcInputLabel.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import {
+  faCheck,
+  faEdit
+} from '@fortawesome/pro-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+interface Props {
+  value?: string,
+  label?: string, // used if not in edit mode, defaults to value,
+  disabled?: boolean,
+  canBeEmpty?: boolean,
+}
+
+const props = defineProps<Props>()
+const inputRef = ref<ComponentPublicInstance | null>(null)
+
+const emit = defineEmits<{(e: 'setValue', value: string): void }>()
+
+const isEditing = ref(false)
+const editValue = ref<string>(props.value ?? '')
+
+const iconClick = () => {
+  if (props.disabled) {
+    return
+  }
+  if (!isEditing.value) {
+    isEditing.value = true
+    return
+  }
+  if (!editValue.value && !props.canBeEmpty) {
+    return
+  }
+  if (editValue.value !== props.value) {
+    emit('setValue', editValue.value)
+  }
+
+  isEditing.value = false
+}
+
+const icon = computed(() => ({
+  icon: isEditing.value ? faCheck : faEdit,
+  disabled: props.disabled || (isEditing.value && (!editValue.value && !props.canBeEmpty))
+}))
+
+watch(() => props.value, (v) => {
+  editValue.value = v ?? ''
+})
+
+watch([isEditing, inputRef], ([edit, input]) => {
+  if (edit) {
+    input?.$el?.focus()
+  }
+})
+
+</script>
+
+<template>
+  <div class="input-container">
+    <div v-if="isEditing" class="input-wrapper">
+      <InputText ref="inputRef" v-model="editValue" @keypress.enter="iconClick" />
+    </div>
+    <span v-if="!isEditing" class="label">
+      {{ label || value }}
+    </span>
+    <FontAwesomeIcon v-if="!disabled" class="link" :icon="icon.icon" :disabled="icon.disabled" @click="iconClick" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use "~/assets/css/utils.scss";
+
+.input-container {
+  display: flex;
+  gap: var(--padding);
+  align-items: center;
+  height: 24px;
+
+  .input-wrapper {
+    flex-grow: 1;
+
+    input {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .label {
+    flex-grow: 1;
+    margin-left: 8px;
+    @include utils.truncate-text;
+  }
+}
+</style>

frontend/components/playground/PlaygroundComponents.vue

@@ -9,6 +9,9 @@
     <TabPanel header="Icons">
       <PlaygroundIcons />
     </TabPanel>
+    <TabPanel header="Input">
+      <PlaygroundInput />
+    </TabPanel>
     <TabPanel header="Dialog">
       <PlaygroundDialog />
     </TabPanel>

frontend/components/playground/PlaygroundInput.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+
+const input1 = ref('My name')
+const input2 = ref('Not empty')
+const input3 = ref('')
+
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <BcInputLabel :value="input1" @set-value="(v: string) => input1 = v" />
+    </div>
+    <div>
+      <BcInputLabel :value="input2" @set-value="(v: string) => input2 = v" />
+    </div>
+    <div>
+      <BcInputLabel :value="input3" :label="input3 || 'Default'" :can-be-empty="true" @set-value="(v: string) => input3 = v" />
+    </div>
+    <div>
+      <BcInputLabel :value="input1" :disabled="true" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  margin: 10px;
+  padding: 10px;
+  gap: 10px;
+  display: flex;
+  overflow: auto;
+  background: var(--container-background);
+  color: var(--container-color);
+  border: solid 1px var(--container-border-color);
+
+  >div {
+    width: 200px;
+    border: solid 1px var(--container-border-color);
+    padding: var(--padding-small);
+  }
+}
+</style>