Browse Source

Merge pull request #5531 from nith2001/develop

Bug fix for issue #5438, resolved text-overflow with text-wrapping
pull/5824/head
Raju Udava 1 year ago committed by GitHub
parent
commit
f0cb659a50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 20
      packages/nc-gui/components/smartsheet/Form.vue
  2. 5
      packages/nc-gui/components/smartsheet/header/Cell.vue
  3. 5
      packages/nc-gui/components/smartsheet/header/VirtualCell.vue
  4. 17
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
  5. 14
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
  6. 7
      tests/playwright/pages/Dashboard/Form/index.ts
  7. 2
      tests/playwright/tests/db/viewForm.spec.ts

20
packages/nc-gui/components/smartsheet/Form.vue

@ -532,10 +532,10 @@ watch(view, (nextView) => {
<!-- Header -->
<div v-if="isEditable" class="px-4 lg:px-12">
<a-form-item v-if="isEditable">
<a-input
<a-textarea
v-model:value="formViewData.heading"
class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
:style="{ borderRightWidth: '0px !important' }"
:style="{ borderRightWidth: '0px !important', 'height': '54px', 'min-height': '54px', resize: 'vertical' }"
size="large"
hide-details
placeholder="Form Title"
@ -551,10 +551,10 @@ watch(view, (nextView) => {
<!-- Sub Header -->
<div v-if="isEditable" class="px-4 lg:px-12">
<a-form-item>
<a-input
<a-textarea
v-model:value="formViewData.subheading"
class="w-full !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
:style="{ borderRightWidth: '0px !important' }"
:style="{ borderRightWidth: '0px !important', height: '40px', 'min-height': '40px', resize: 'vertical' }"
size="large"
hide-details
:placeholder="$t('msg.info.formDesc')"
@ -697,7 +697,7 @@ watch(view, (nextView) => {
<a-form-item
v-if="isVirtualCol(element)"
:name="element.title"
class="!mb-0"
class="!mb-0 nc-input-required-error"
:rules="[
{
required: isRequired(element, element.required),
@ -719,7 +719,7 @@ watch(view, (nextView) => {
<a-form-item
v-else
:name="element.title"
class="!mb-0"
class="!mb-0 nc-input-required-error"
:rules="[
{
required: isRequired(element, element.required),
@ -743,7 +743,7 @@ watch(view, (nextView) => {
</LazySmartsheetDivDataCell>
</a-form-item>
<div class="text-gray-500 text-xs" data-testid="nc-form-input-help-text-label">{{ element.description }}</div>
<div class="nc-form-help-text text-gray-500 text-xs" data-testid="nc-form-input-help-text-label">{{ element.description }}</div>
</div>
</template>
@ -861,6 +861,12 @@ watch(view, (nextView) => {
}
}
.nc-form-help-text, .nc-input-required-error {
max-width: 100%;
word-break: break-all;
white-space: pre-line;
}
:deep(.nc-cell-attachment) {
@apply p-0;

5
packages/nc-gui/components/smartsheet/header/Cell.vue

@ -53,7 +53,7 @@ const openHeaderMenu = () => {
v-if="column"
class="name"
:class="{ 'cursor-pointer': !isForm && isUIAllowed('edit-column') && !hideMenu }"
style="white-space: nowrap"
style="white-space: pre-line"
:title="column.title"
@dblclick="openHeaderMenu"
>{{ column.title }}</span
@ -95,7 +95,6 @@ const openHeaderMenu = () => {
<style scoped>
.name {
max-width: calc(100% - 40px);
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
</style>

5
packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@ -121,7 +121,7 @@ const closeAddColumnDropdown = () => {
<template #title>
{{ tooltipMsg }}
</template>
<span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
<span class="name" style="white-space: pre-line" :title="column.title"> {{ column.title }}</span>
</a-tooltip>
<span v-if="isVirtualColRequired(column, meta?.columns || []) || required" class="text-red-500">&nbsp;*</span>
@ -164,7 +164,6 @@ const closeAddColumnDropdown = () => {
<style scoped>
.name {
max-width: calc(100% - 40px);
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
</style>

17
packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue

@ -75,9 +75,18 @@ const onDecode = async (scannedCodeValue: string) => {
class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl)"
>
<template v-if="sharedFormView">
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
<h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6">
<h1
class="prose-2xl font-bold self-center my-4"
style="word-break: break-all"
>
{{ sharedFormView.heading }}
</h1>
<h2
v-if="sharedFormView.subheading"
class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"
style="word-break: break-all"
>
{{ sharedFormView.subheading }}
</h2>
@ -180,7 +189,7 @@ const onDecode = async (scannedCodeValue: string) => {
</a-button>
</LazySmartsheetDivDataCell>
<div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
<div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1" style="word-break: break-all">
<div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
{{ error.$message }}
</div>

14
packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@ -244,13 +244,17 @@ onMounted(() => {
class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
>
<div class="px-4 md:px-0 flex flex-col justify-end">
<h1 class="prose-2xl font-bold self-center my-4" data-testid="nc-survey-form__heading">
<h1
class="prose-2xl font-bold self-center my-4"
data-testid="nc-survey-form__heading"
style="word-break: break-all">
{{ sharedFormView.heading }}
</h1>
<h2
v-if="sharedFormView.subheading && sharedFormView.subheading !== ''"
class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"
style="word-break: break-all"
data-testid="nc-survey-form__sub-heading"
>
{{ sharedFormView?.subheading }}
@ -287,7 +291,7 @@ onMounted(() => {
<LazySmartsheetVirtualCell
v-if="isVirtualCol(field)"
v-model="formState[field.title]"
class="mt-0 nc-input"
class="mt-0 nc-input h-auto"
:row="{ row: {}, oldRow: {}, rowMeta: {} }"
:data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
:column="field"
@ -296,7 +300,7 @@ onMounted(() => {
<LazySmartsheetCell
v-else
v-model="formState[field.title]"
class="nc-input"
class="nc-input h-auto"
:data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
:column="field"
:edit-enabled="editEnabled[index]"
@ -305,11 +309,10 @@ onMounted(() => {
@update:edit-enabled="editEnabled[index] = $event"
/>
<div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
<div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1" style="word-break: break-all">
<div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
{{ error.$message }}
</div>
<div
class="block text-[14px]"
:class="field.uidt === UITypes.Checkbox ? 'text-center' : ''"
@ -350,6 +353,7 @@ onMounted(() => {
:mouse-enter-delay="0.25"
:mouse-leave-delay="0"
>
<!-- Ok button for question -->
<button
class="bg-opacity-100 scaling-btn flex items-center gap-1"
data-testid="nc-survey-form__btn-next"

7
tests/playwright/pages/Dashboard/Form/index.ts

@ -124,8 +124,11 @@ export class FormPage extends BasePage {
async addField({ field, mode }: { mode: string; field: string }) {
if (mode === 'dragDrop') {
const src = await this.get().locator(`[data-testid="nc-form-hidden-column-${field}"]`);
const dst = await this.get().locator(`.nc-form-drag-Country`);
const src = await this.get().locator(`[data-testid="nc-form-hidden-column-${field}"] > div.ant-card-body`);
const dst = await this.get().locator(`[data-testid="nc-form-input-Country"]`);
await src.waitFor({ state: 'visible' });
await dst.waitFor({ state: 'visible' });
await src.dragTo(dst, { trial: true });
await src.dragTo(dst);
} else if (mode === 'clickField') {
const src = await this.get().locator(`[data-testid="nc-form-hidden-column-${field}"]`);

2
tests/playwright/tests/db/viewForm.spec.ts

@ -55,7 +55,7 @@ test.describe('Form view', () => {
// add & verify (drag-drop)
await form.addField({ field: 'City List', mode: 'dragDrop' });
await form.verifyFormViewFieldsOrder({
fields: ['LastUpdate', 'City List', 'Country'],
fields: ['LastUpdate', 'Country', 'City List'],
});
// remove & verify (hide field button)

Loading…
Cancel
Save