Fixes: Mobile - Improve value output for the multiple Select fields

zammad · Apr 18, 2023 · abac114 · abac114
1 parent 53fc3ee
commit abac114
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 58 deletions.
diff --git a/...ields/FieldTreeSelect/__image_snapshots__/renders long multiple selected #0.png b/...ields/FieldTreeSelect/__image_snapshots__/renders long multiple selected #0.png
diff --git a/app/frontend/shared/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue b/app/frontend/shared/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue
@@ -127,21 +127,20 @@ useFormBlock(contextReactive, onInputClick)
     >
       <div v-if="hasValue" class="flex grow flex-wrap gap-1" role="list">
         <div
-          v-for="selectedValue in valueContainer"
+          v-for="(selectedValue, idx) in valueContainer"
           :key="selectedValue"
-          class="flex items-center text-base leading-[19px] after:content-[','] last:after:content-none"
+          class="flex items-center text-base leading-[19px]"
           role="listitem"
         >
           <CommonIcon
             v-if="getSelectedOptionIcon(selectedValue)"
             :name="getSelectedOptionIcon(selectedValue)"
             size="tiny"
             class="ltr:mr-1 rtl:ml-1"
-          />
-          {{
+          />{{
             getSelectedOptionLabel(selectedValue) ||
             i18n.t('%s (unknown)', selectedValue)
-          }}
+          }}{{ idx === valueContainer.length - 1 ? '' : ',' }}
         </div>
       </div>
       <CommonIcon

diff --git a/app/frontend/shared/components/Form/fields/FieldSelect/FieldSelectInput.vue b/app/frontend/shared/components/Form/fields/FieldSelect/FieldSelectInput.vue
@@ -12,7 +12,6 @@ import useValue from '../../composables/useValue'
 import useSelectOptions from '../../composables/useSelectOptions'
 import useSelectPreselect from '../../composables/useSelectPreselect'
 import type { SelectContext } from './types'
-import FieldSelectInputSelected from './FieldSelectInputSelected.vue'
 
 interface Props {
   context: SelectContext
@@ -113,9 +112,9 @@ setupMissingOptionHandling()
           </template>
           <template v-else-if="hasValue">
             <div
-              v-for="selectedValue in valueContainer"
+              v-for="(selectedValue, idx) in valueContainer"
               :key="selectedValue"
-              class="flex items-center text-base leading-[19px] after:content-[','] last:after:content-none"
+              class="flex items-center text-base leading-[19px]"
               role="listitem"
             >
               <CommonIcon
@@ -124,14 +123,10 @@ setupMissingOptionHandling()
                 size="tiny"
                 class="ltr:mr-1 rtl:ml-1"
                 decorative
-              />
-              <FieldSelectInputSelected
-                :slotted="(context.slots as any)?.output"
-                :label="
-                  getSelectedOptionLabel(selectedValue) ||
-                  i18n.t('%s (unknown)', selectedValue)
-                "
-              />
+              />{{
+                getSelectedOptionLabel(selectedValue) ||
+                i18n.t('%s (unknown)', selectedValue)
+              }}{{ idx === valueContainer.length - 1 ? '' : ',' }}
             </div>
           </template>
         </div>

diff --git a/app/frontend/shared/components/Form/fields/FieldSelect/FieldSelectInputSelected.vue b/app/frontend/shared/components/Form/fields/FieldSelect/FieldSelectInputSelected.vue
diff --git a/app/frontend/shared/components/Form/fields/FieldSelect/__tests__/FieldSelect.spec.ts b/app/frontend/shared/components/Form/fields/FieldSelect/__tests__/FieldSelect.spec.ts
@@ -567,23 +567,6 @@ describe('Form - Field - Select - Features', () => {
     )
   })
 
-  it('can pass down a slot', () => {
-    const wrapper = renderComponent(FormKit, {
-      ...wrapperParameters,
-      props: {
-        ...commonProps,
-        type: 'select',
-        options: testOptions,
-        value: testOptions[1].value,
-      },
-      slots: {
-        output: '<span>Custom label</span>',
-      },
-    })
-
-    expect(wrapper.getByText('Custom label')).toBeInTheDocument()
-  })
-
   it('supports selection clearing', async () => {
     const wrapper = renderComponent(FormKit, {
       ...wrapperParameters,

diff --git a/app/frontend/shared/components/Form/fields/FieldTreeSelect/FieldTreeSelectInput.vue b/app/frontend/shared/components/Form/fields/FieldTreeSelect/FieldTreeSelectInput.vue
@@ -6,7 +6,6 @@ import { i18n } from '@shared/i18n'
 import { useDialog } from '@shared/composables/useDialog'
 import CommonTicketStateIndicator from '@shared/components/CommonTicketStateIndicator/CommonTicketStateIndicator.vue'
 import { useFormBlock } from '@mobile/form/useFormBlock'
-import { EnumTicketStateColorCode } from '@shared/graphql/types'
 import useValue from '../../composables/useValue'
 import useSelectOptions from '../../composables/useSelectOptions'
 import useSelectPreselect from '../../composables/useSelectPreselect'
@@ -190,7 +189,7 @@ setupMissingOptionHandling()
           <CommonTicketStateIndicator
             v-for="selectedValue in valueContainer"
             :key="selectedValue"
-            :color-code="getSelectedOptionStatus(selectedValue) as EnumTicketStateColorCode"
+            :color-code="getSelectedOptionStatus(selectedValue)!"
             :label="getSelectedOptionFullPath(selectedValue)"
             :data-test-status="getSelectedOptionStatus(selectedValue)"
             role="listitem"
@@ -199,9 +198,9 @@ setupMissingOptionHandling()
         </template>
         <template v-else>
           <div
-            v-for="selectedValue in valueContainer"
+            v-for="(selectedValue, idx) in valueContainer"
             :key="selectedValue"
-            class="flex items-center text-base leading-[19px] after:content-[','] last:after:content-none"
+            class="flex items-center text-base leading-[19px]"
             role="listitem"
           >
             <CommonIcon
@@ -210,7 +209,8 @@ setupMissingOptionHandling()
               size="tiny"
               class="ltr:mr-1 rtl:ml-1"
             />
-            {{ getSelectedOptionFullPath(selectedValue) }}
+            {{ getSelectedOptionFullPath(selectedValue)
+            }}{{ idx === valueContainer.length - 1 ? '' : ',' }}
           </div>
         </template>
       </div>

diff --git a/spec/support/custom_matchers/system/form_matchers/have_selected_option.rb b/spec/support/custom_matchers/system/form_matchers/have_selected_option.rb
@@ -27,7 +27,8 @@ module FormMatchers
     match do
       expected.all? do |label|
         begin
-          actual.find('[role="listitem"]', exact_text: label, wait: false)
+          exact_text = label.is_a?(Regexp) ? label : %r{#{Regexp.escape(label)},?}
+          actual.find('[role="listitem"]', exact_text: exact_text, wait: false)
         rescue
           false
         end

diff --git a/spec/support/custom_matchers/system/form_matchers/have_selected_option_with_parent.rb b/spec/support/custom_matchers/system/form_matchers/have_selected_option_with_parent.rb
@@ -31,7 +31,8 @@ module FormMatchers
     match do
       expected.all? do |path|
         begin
-          actual.find('[role="listitem"]', exact_text: label_of(path), wait: false)
+          exact_text = path.is_a?(Regexp) ? path : %r{#{Regexp.escape(label_of(path))},?}
+          actual.find('[role="listitem"]', exact_text: exact_text, wait: false)
         rescue
           false
         end