Logitar · Utar94 · Jan 27, 2025 · Jan 27, 2025 · Jan 27, 2025
diff --git a/frontend/src/components/contents/ContentMultiselect.vue b/frontend/src/components/contents/ContentMultiselect.vue
@@ -11,6 +11,7 @@ import type { SearchResults } from "@/types/search";
 const { orderBy } = arrayUtils;
 
 const props = defineProps<{
+  describedBy?: string;
   contentTypeId?: string;
   id?: string;
   label?: string;
@@ -57,6 +58,7 @@ onMounted(async () => {
 
 <template>
   <AppMultiselect
+    :described-by="describedBy"
     :id="id"
     :label="label"
     :model-value="modelValue"
@@ -70,5 +72,8 @@ onMounted(async () => {
     <template #label-override>
       <slot name="label-override"></slot>
     </template>
+    <template #after>
+      <slot name="after"></slot>
+    </template>
   </AppMultiselect>
 </template>
diff --git a/frontend/src/components/contents/ContentSelect.vue b/frontend/src/components/contents/ContentSelect.vue
@@ -15,6 +15,7 @@ const { parseBoolean } = parsingUtils;
 const props = withDefaults(
   defineProps<{
     contentTypeId?: string;
+    describedBy?: string;
     id?: string;
     label?: string;
     languageId?: string;
@@ -77,6 +78,7 @@ onMounted(async () => {
 
 <template>
   <AppSelect
+    :described-by="describedBy"
     floating
     :id="id"
     :label="label"
@@ -91,5 +93,8 @@ onMounted(async () => {
     <template #label-override>
       <slot name="label-override"></slot>
     </template>
+    <template #after>
+      <slot name="after"></slot>
+    </template>
   </AppSelect>
 </template>
diff --git a/frontend/src/components/fields/BooleanFieldValueEdit.vue b/frontend/src/components/fields/BooleanFieldValueEdit.vue
@@ -1,16 +1,20 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import { parsingUtils } from "logitar-js";
 
 import AppCheckbox from "@/components/shared/AppCheckbox.vue";
+import FieldValueDescription from "./FieldValueDescription.vue";
 import type { FieldDefinition } from "@/types/fields";
 
 const { parseBoolean } = parsingUtils;
 
-defineProps<{
+const props = defineProps<{
   definition: FieldDefinition;
   modelValue?: string;
 }>();
 
+const descriptionId = computed<string>(() => `${props.definition.id}-description`);
+
 defineEmits<{
   (e: "update:model-value", value: string): void;
 }>();
@@ -24,5 +28,9 @@ defineEmits<{
     :name="definition.uniqueName"
     raw
     @update:model-value="$emit('update:model-value', ($event as boolean).toString())"
-  />
+  >
+    <template #after>
+      <FieldValueDescription :definition="definition" :id="descriptionId" />
+    </template>
+  </AppCheckbox>
 </template>
diff --git a/frontend/src/components/fields/DateTimeFieldValueEdit.vue b/frontend/src/components/fields/DateTimeFieldValueEdit.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 
 import DateTimeInput from "@/components/shared/DateTimeInput.vue";
+import FieldValueDescription from "./FieldValueDescription.vue";
 import FieldValueLabel from "./FieldValueLabel.vue";
 import type { FieldDefinition, FieldType } from "@/types/fields";
 
@@ -10,6 +11,7 @@ const props = defineProps<{
   modelValue?: string;
 }>();
 
+const descriptionId = computed<string>(() => `${props.definition.id}-description`);
 const fieldType = computed<FieldType>(() => props.definition.fieldType);
 
 defineEmits<{
@@ -19,6 +21,7 @@ defineEmits<{
 
 <template>
   <DateTimeInput
+    :described-by="descriptionId"
     floating
     :id="definition.id"
     :label="definition.displayName ?? definition.uniqueName"
@@ -32,5 +35,8 @@ defineEmits<{
     <template #label-override>
       <FieldValueLabel :definition="definition" />
     </template>
+    <template #after>
+      <FieldValueDescription :definition="definition" :id="descriptionId" />
+    </template>
   </DateTimeInput>
 </template>
diff --git a/frontend/src/components/fields/FieldValueDescription.vue b/frontend/src/components/fields/FieldValueDescription.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { FieldDefinition } from "@/types/fields";
+
+defineProps<{
+  definition: FieldDefinition;
+  id: string;
+}>();
+</script>
+
+<template>
+  <i :id="id"><font-awesome-icon icon="fas fa-circle-info" /> {{ definition.description }}</i>
+</template>
diff --git a/frontend/src/components/fields/NumberFieldValueEdit.vue b/frontend/src/components/fields/NumberFieldValueEdit.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 
 import AppInput from "@/components/shared/AppInput.vue";
+import FieldValueDescription from "./FieldValueDescription.vue";
 import FieldValueLabel from "./FieldValueLabel.vue";
 import type { FieldDefinition, FieldType } from "@/types/fields";
 
@@ -10,6 +11,7 @@ const props = defineProps<{
   modelValue?: string;
 }>();
 
+const descriptionId = computed<string>(() => `${props.definition.id}-description`);
 const fieldType = computed<FieldType>(() => props.definition.fieldType);
 
 defineEmits<{
@@ -35,5 +37,8 @@ defineEmits<{
     <template #label-override>
       <FieldValueLabel :definition="definition" />
     </template>
+    <template #after>
+      <FieldValueDescription :definition="definition" :id="descriptionId" />
+    </template>
   </AppInput>
 </template>
diff --git a/frontend/src/components/fields/RelatedContentFieldValueEdit.vue b/frontend/src/components/fields/RelatedContentFieldValueEdit.vue
@@ -3,6 +3,7 @@ import { computed } from "vue";
 
 import ContentMultiselect from "@/components/contents/ContentMultiselect.vue";
 import ContentSelect from "@/components/contents/ContentSelect.vue";
+import FieldValueDescription from "./FieldValueDescription.vue";
 import FieldValueLabel from "./FieldValueLabel.vue";
 import type { FieldDefinition, FieldType } from "@/types/fields";
 import type { Language } from "@/types/languages";
@@ -14,6 +15,7 @@ const props = defineProps<{
 }>();
 
 const contentIds = computed<string[] | undefined>(() => (props.modelValue ? JSON.parse(props.modelValue) : undefined));
+const descriptionId = computed<string>(() => `${props.definition.id}-description`);
 const fieldType = computed<FieldType>(() => props.definition.fieldType);
 
 const emit = defineEmits<{
@@ -29,6 +31,7 @@ function onContentIdsUpdate(contentIds: string[]): void {
   <ContentMultiselect
     v-if="fieldType.relatedContent?.isMultiple"
     :content-type-id="fieldType.relatedContent?.contentTypeId"
+    :described-by="descriptionId"
     :id="definition.id"
     :label="definition.displayName ?? definition.uniqueName"
     :language-id="language?.id"
@@ -41,10 +44,14 @@ function onContentIdsUpdate(contentIds: string[]): void {
     <template #label-override>
       <FieldValueLabel :definition="definition" />
     </template>
+    <template #after v-if="definition.description">
+      <FieldValueDescription :definition="definition" :id="descriptionId" />
+    </template>
   </ContentMultiselect>
   <ContentSelect
     v-else
     :content-type-id="fieldType.relatedContent?.contentTypeId"
+    :described-by="descriptionId"
     :id="definition.id"
     :label="definition.displayName ?? definition.uniqueName"
     :language-id="language?.id"
@@ -57,5 +64,8 @@ function onContentIdsUpdate(contentIds: string[]): void {
     <template #label-override>
       <FieldValueLabel :definition="definition" />
     </template>
+    <template #after v-if="definition.description">
+      <FieldValueDescription :definition="definition" :id="descriptionId" />
+    </template>
   </ContentSelect>
 </template>
diff --git a/frontend/src/components/fields/RichTextFieldValueEdit.vue b/frontend/src/components/fields/RichTextFieldValueEdit.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 
 import AppTextarea from "@/components/shared/AppTextarea.vue";
+import FieldValueDescription from "./FieldValueDescription.vue";
 import FieldValueLabel from "./FieldValueLabel.vue";
 import type { FieldDefinition, FieldType } from "@/types/fields";
 
@@ -10,6 +11,7 @@ const props = defineProps<{
   modelValue?: string;
 }>();
 
+const descriptionId = computed<string>(() => `${props.definition.id}-description`);
 const fieldType = computed<FieldType>(() => props.definition.fieldType);
 
 defineEmits<{
@@ -20,6 +22,7 @@ defineEmits<{
 <template>
   <AppTextarea
     floating
+    :described-by="descriptionId"
     :id="definition.id"
     :label="definition.displayName ?? definition.uniqueName"
     :min="fieldType.string?.minimumLength"
@@ -34,5 +37,8 @@ defineEmits<{
     <template #label-override>
       <FieldValueLabel :definition="definition" />
     </template>
+    <template #after v-if="definition.description">
+      <FieldValueDescription :definition="definition" :id="descriptionId" />
+    </template>
   </AppTextarea>
 </template>
diff --git a/frontend/src/components/fields/SelectFieldValueEdit.vue b/frontend/src/components/fields/SelectFieldValueEdit.vue
@@ -4,6 +4,7 @@ import { computed } from "vue";
 
 import AppMultiselect from "@/components/shared/AppMultiselect.vue";
 import AppSelect from "@/components/shared/AppSelect.vue";
+import FieldValueDescription from "./FieldValueDescription.vue";
 import FieldValueLabel from "./FieldValueLabel.vue";
 import type { FieldDefinition, FieldType } from "@/types/fields";
 
@@ -12,6 +13,7 @@ const props = defineProps<{
   modelValue?: string;
 }>();
 
+const descriptionId = computed<string>(() => `${props.definition.id}-description`);
 const fieldType = computed<FieldType>(() => props.definition.fieldType);
 const options = computed<SelectOption[]>(
   () =>
@@ -39,6 +41,7 @@ function onValuesUpdate(values: string[]): void {
 <template>
   <AppMultiselect
     v-if="fieldType.select?.isMultiple"
+    :described-by="descriptionId"
     floating
     :id="definition.id"
     :label="definition.displayName ?? definition.uniqueName"
@@ -52,9 +55,13 @@ function onValuesUpdate(values: string[]): void {
     <template #label-override>
       <FieldValueLabel :definition="definition" />
     </template>
+    <template #after v-if="definition.description">
+      <FieldValueDescription :definition="definition" :id="descriptionId" />
+    </template>
   </AppMultiselect>
   <AppSelect
     v-else
+    :described-by="descriptionId"
     floating
     :id="definition.id"
     :label="definition.displayName ?? definition.uniqueName"
@@ -68,5 +75,8 @@ function onValuesUpdate(values: string[]): void {
     <template #label-override>
       <FieldValueLabel :definition="definition" />
     </template>
+    <template #after v-if="definition.description">
+      <FieldValueDescription :definition="definition" :id="descriptionId" />
+    </template>
   </AppSelect>
 </template>
diff --git a/frontend/src/components/fields/StringFieldValueEdit.vue b/frontend/src/components/fields/StringFieldValueEdit.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 
 import AppInput from "@/components/shared/AppInput.vue";
+import FieldValueDescription from "./FieldValueDescription.vue";
 import FieldValueLabel from "./FieldValueLabel.vue";
 import type { FieldDefinition, FieldType } from "@/types/fields";
 
@@ -10,6 +11,7 @@ const props = defineProps<{
   modelValue?: string;
 }>();
 
+const descriptionId = computed<string>(() => `${props.definition.id}-description`);
 const fieldType = computed<FieldType>(() => props.definition.fieldType);
 
 defineEmits<{
@@ -19,6 +21,7 @@ defineEmits<{
 
 <template>
   <AppInput
+    :described-by="descriptionId"
     floating
     :id="definition.id"
     :min="fieldType.string?.minimumLength"
@@ -33,5 +36,8 @@ defineEmits<{
     <template #label-override>
       <FieldValueLabel :definition="definition" />
     </template>
+    <template #after v-if="definition.description">
+      <FieldValueDescription :definition="definition" :id="descriptionId" />
+    </template>
   </AppInput>
 </template>
diff --git a/frontend/src/components/fields/TagsFieldValueEdit.vue b/frontend/src/components/fields/TagsFieldValueEdit.vue
@@ -2,6 +2,7 @@
 import { computed } from "vue";
 
 import AppTags from "@/components/tags/AppTags.vue";
+import FieldValueDescription from "./FieldValueDescription.vue";
 import FieldValueLabel from "./FieldValueLabel.vue";
 import type { FieldDefinition } from "@/types/fields";
 
@@ -10,6 +11,7 @@ const props = defineProps<{
   modelValue?: string;
 }>();
 
+const descriptionId = computed<string>(() => `${props.definition.id}-description`);
 const tags = computed<string[]>(() => (props.modelValue ? JSON.parse(props.modelValue) : []));
 
 const emit = defineEmits<{
@@ -26,5 +28,8 @@ function onModelValueUpdate(tags: string[]): void {
     <template #label-override>
       <FieldValueLabel :definition="definition" />
     </template>
+    <template #after>
+      <FieldValueDescription :definition="definition" :id="descriptionId" />
+    </template>
   </AppTags>
 </template>
diff --git a/frontend/src/components/shared/AppCheckbox.vue b/frontend/src/components/shared/AppCheckbox.vue
@@ -45,5 +45,6 @@ defineEmits<{
       :value="value"
       @update:model-value="$emit('update:model-value', $event)"
     />
+    <slot name="after"></slot>
   </div>
 </template>
diff --git a/frontend/src/components/shared/AppInput.vue b/frontend/src/components/shared/AppInput.vue
@@ -31,7 +31,14 @@ const props = withDefaults(
 
 const inputRef = ref<InstanceType<typeof TarInput> | null>(null);
 
-const describedBy = computed<string>(() => `${props.id}_invalid-feedback`);
+const describedBy = computed<string>(() => {
+  const ids: string[] = [];
+  if (props.describedBy) {
+    ids.push(props.describedBy);
+  }
+  ids.push(`${props.id}_invalid-feedback`);
+  return ids.join(" ");
+});
 const inputMax = computed<number | string | undefined>(() => (props.validation === "server" || isDateTimeInput(props.type) ? props.max : undefined));
 const inputMin = computed<number | string | undefined>(() => (props.validation === "server" || isDateTimeInput(props.type) ? props.min : undefined));
 const inputName = computed<string>(() => props.name ?? props.id);

diff --git a/frontend/src/components/shared/AppMultiselect.vue b/frontend/src/components/shared/AppMultiselect.vue
@@ -12,6 +12,7 @@ const { t } = useI18n();
 
 const props = withDefaults(
   defineProps<{
+    describedBy?: string;
     id?: string;
     label?: string;
     modelValue?: string[];
@@ -72,6 +73,7 @@ function toggle(option: SelectOption): void {
       aria-expanded="false"
       data-bs-auto-close="outside"
       data-bs-toggle="dropdown"
+      :described-by="describedBy"
       floating
       :id="id"
       :label="label"
@@ -86,6 +88,9 @@ function toggle(option: SelectOption): void {
       <template #label-override>
         <slot name="label-override"></slot>
       </template>
+      <template #after>
+        <slot name="after"></slot>
+      </template>
     </AppTextarea>
     <ul class="dropdown-menu">
       <li v-if="placeholder" class="disabled dropdown-item">{{ isRaw ? placeholder : t(placeholder) }}</li>