Fix grid rows

code16 · Nov 21, 2024 · 50d7cc4 · 50d7cc4
1 parent ce76921
commit 50d7cc4
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 40 deletions.
diff --git a/resources/js/Layouts/Layout.vue b/resources/js/Layouts/Layout.vue
@@ -200,7 +200,7 @@ if(currentItemWithChildren) {
                                     </SidebarMenuButton>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" :side-offset="4" :collision-boundary="null" align="end">
-                                    <template v-if="menu.userMenu">
+                                    <template v-if="menu.userMenu?.items?.length">
                                         <DropdownMenuGroup>
                                             <template v-for="item in menu.userMenu.items">
                                                 <template v-if="item.isSeparator">
@@ -219,7 +219,7 @@ if(currentItemWithChildren) {
                                             </template>
                                         </DropdownMenuGroup>
                                     </template>
-                                    <DropdownMenuSeparator />
+                                    <DropdownMenuSeparator class="first:hidden" />
                                     <DropdownMenuSub>
                                         <DropdownMenuSubTrigger>
                                             <Sun class="w-4 h-4 mr-2 dark:hidden" />

diff --git a/resources/js/Pages/Show/Show.vue b/resources/js/Pages/Show/Show.vue
@@ -303,11 +303,11 @@
                                             <div class="min-w-0 w-full sm:w-[calc(var(--size)/12*100%)] px-4" :style="{ '--size': `${column.size}` }">
                                                 <FieldGrid class="gap-x-4 gap-y-6">
                                                     <template v-for="row in column.fields">
-                                                        <FieldGridRow>
+                                                        <FieldGridRow v-show="show.fieldRowShouldBeVisible(row, locale)">
                                                             <template v-for="fieldLayout in row">
                                                                 <FieldGridColumn
                                                                     :layout="fieldLayout"
-                                                                    v-show="show.fieldShouldBeVisible(show.fields[fieldLayout.key], show.data[fieldLayout.key], locale)"
+                                                                    v-show="show.fieldShouldBeVisible(fieldLayout, locale)"
                                                                 >
                                                                     <template v-if="show.fields[fieldLayout.key]">
                                                                         <SharpShowField
@@ -319,6 +319,7 @@
                                                                             :entity-key="entityKey"
                                                                             :instance-id="instanceId"
                                                                             :is-right-col="columnIndex === section.columns.length - 1"
+                                                                            :row="row"
                                                                             @reordering="onEntityListReordering(fieldLayout.key, $event)"
                                                                         />
                                                                     </template>

diff --git a/resources/js/components/ui/FieldGrid.vue b/resources/js/components/ui/FieldGrid.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="grid grid-cols-12">
+    <div class="grid grid-cols-1">
         <slot></slot>
     </div>
 </template>

diff --git a/resources/js/components/ui/FieldGridRow.vue b/resources/js/components/ui/FieldGridRow.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="contents">
+    <div class="col-span-full grid grid-cols-12 gap-[inherit]">
         <slot></slot>
     </div>
 </template>
diff --git a/resources/js/form/Form.ts b/resources/js/form/Form.ts
@@ -4,6 +4,7 @@ import {
     FormData,
     FormEditorFieldData,
     FormFieldData,
+    FormLayoutColumnData,
     FormLayoutFieldsetData,
     FormLayoutTabData,
     FormListFieldData,
@@ -179,6 +180,14 @@ export class Form implements FormData, CommandFormData {
         };
     }
 
+    fieldRowShouldBeVisible(row: FormLayoutColumnData['fields'][0], fields = this.fields, data = this.data) {
+        return row.some(fieldLayout =>
+            'legend' in fieldLayout
+                ? this.fieldsetShouldBeVisible(fieldLayout, fields, data)
+                : this.fieldShouldBeVisible(fieldLayout, fields, data)
+        );
+    }
+
     fieldShouldBeVisible(fieldLayout: LayoutFieldData, fields = this.fields, data = this.data) {
         const field = fields[fieldLayout.key];
 

diff --git a/resources/js/form/components/Form.vue b/resources/js/form/components/Form.vue
@@ -173,10 +173,10 @@
                                     <div class="col-[span_var(--size)]" :style="{ '--size': `${column.size}` }">
                                         <FieldGrid class="gap-6">
                                             <template v-for="row in column.fields">
-                                                <FieldGridRow>
+                                                <FieldGridRow v-show="form.fieldRowShouldBeVisible(row)">
                                                     <template v-for="fieldLayout in row">
                                                         <template v-if="'legend' in fieldLayout">
-                                                            <FieldGridColumn>
+                                                            <FieldGridColumn v-show="form.fieldsetShouldBeVisible(fieldLayout)">
                                                                 <Card>
                                                                     <CardHeader>
                                                                         <CardTitle class="text-sm font-semibold">
@@ -186,9 +186,9 @@
                                                                     <CardContent>
                                                                         <FieldGrid class="gap-6">
                                                                             <template v-for="row in fieldLayout.fields">
-                                                                                <FieldGridRow>
+                                                                                <FieldGridRow v-show="form.fieldRowShouldBeVisible(row)">
                                                                                     <template v-for="fieldLayout in row">
-                                                                                        <FieldGridColumn :layout="fieldLayout" :class="{ '!hidden': !form.fieldShouldBeVisible(fieldLayout) }">
+                                                                                        <FieldGridColumn :layout="fieldLayout" v-show="form.fieldShouldBeVisible(fieldLayout)">
                                                                                             <SharpFormField
                                                                                                 :field="form.getField(fieldLayout.key)"
                                                                                                 :field-layout="fieldLayout"
@@ -211,7 +211,7 @@
                                                             </FieldGridColumn>
                                                         </template>
                                                         <template v-else>
-                                                            <FieldGridColumn :layout="fieldLayout" :class="{ '!hidden': !form.fieldShouldBeVisible(fieldLayout) }">
+                                                            <FieldGridColumn :layout="fieldLayout" v-show="form.fieldShouldBeVisible(fieldLayout)">
                                                                 <SharpFormField
                                                                     :field="form.getField(fieldLayout.key)"
                                                                     :field-layout="fieldLayout"

diff --git a/resources/js/form/components/fields/List.vue b/resources/js/form/components/fields/List.vue
@@ -196,14 +196,14 @@
                                 <div :inert="reordering">
                                     <FieldGrid class="flex-1 min-w-0 gap-6">
                                         <template v-for="row in fieldLayout.item">
-                                            <FieldGridRow>
+                                            <FieldGridRow v-show="form.fieldRowShouldBeVisible(row, field.itemFields, item)">
                                                 <template v-for="itemFieldLayout in row">
-                                                    <FieldGridColumn :layout="itemFieldLayout" :class="{ '!hidden': !form.fieldShouldBeVisible(itemFieldLayout, field.itemFields, item) }">
+                                                    <FieldGridColumn :layout="itemFieldLayout" v-show="form.fieldShouldBeVisible(itemFieldLayout, field.itemFields, item)">
                                                         <SharpFormField
                                                             :field="form.getField(itemFieldLayout.key, field.itemFields, item)"
                                                             :field-layout="itemFieldLayout"
                                                             :field-error-key="`${field.key}.${item[errorIndex] ?? item[itemKey]}.${itemFieldLayout.key}`"
-                                                            :parent-field="props.field"
+                                                            :parent-field="field"
                                                             :value="item[itemFieldLayout.key]"
                                                             :locale="form.getMeta(`${field.key}.${item[itemKey]}.${itemFieldLayout.key}`)?.locale ?? form.defaultLocale"
                                                             :row="row"

diff --git a/resources/js/show/Show.ts b/resources/js/show/Show.ts
@@ -1,9 +1,9 @@
 import {
     CommandData,
-    EntityStateValueData,
+    EntityStateValueData, LayoutFieldData,
     ShowData,
     ShowFieldData,
-    ShowFieldType,
+    ShowFieldType, ShowLayoutColumnData,
     ShowLayoutSectionData,
     ShowListFieldData,
     ShowTextFieldData
@@ -88,11 +88,6 @@ export class Show implements ShowData {
         return this.sectionFields(section).some(field => field.type === type);
     }
 
-    sectionShouldBeVisible(section: ShowLayoutSectionData, locale: string): boolean {
-        return this.sectionFields(section)
-            .some(field => this.fieldShouldBeVisible(field, this.data[field.key], locale));
-    }
-
     sectionCommands(section: ShowLayoutSectionData): Array<Array<CommandData>> | null {
         if(!section.key) {
             return null;
@@ -101,7 +96,25 @@ export class Show implements ShowData {
             .map(group => group.filter(command => command.authorization));
     }
 
-    fieldShouldBeVisible(field: ShowFieldData, value: ShowFieldData['value'], locale: string): boolean {
+    sectionShouldBeVisible(section: ShowLayoutSectionData, locale: string): boolean {
+        return section.columns
+            .map((column) => column.fields)
+            .flat(2)
+            .some(fieldLayout => this.fieldShouldBeVisible(fieldLayout, locale));
+    }
+
+    fieldRowShouldBeVisible(row: ShowLayoutColumnData['fields'][0], locale: string, fields = this.fields, data = this.data): boolean {
+        return row
+            .some(fieldLayout => this.fieldShouldBeVisible(fieldLayout, locale, fields, data));
+    }
+
+    fieldShouldBeVisible(fieldLayout: LayoutFieldData, locale: string, fields = this.fields, data = this.data): boolean {
+        const field = fields[fieldLayout.key];
+
+        if(!field) {
+            return false;
+        }
+
         if(field.type === 'entityList') {
             return true;
         }
@@ -111,15 +124,17 @@ export class Show implements ShowData {
         }
 
         if(field.type === 'text') {
+            const value = data[field.key] as ShowTextFieldData['value'];
             return field.localized
-                ? !!(value as ShowTextFieldData['value'])?.text?.[locale]
-                : !!(value as ShowTextFieldData['value'])?.text;
+                ? !!value?.text?.[locale]
+                : !!value?.text;
         }
 
         if(field.type === 'list') {
-            return (value as ShowListFieldData['value'])?.length > 0;
+            const value = data[field.key] as ShowListFieldData['value']
+            return value?.length > 0;
         }
 
-        return !!value;
+        return !!data[field.key];
     }
 }
diff --git a/resources/js/show/components/Field.vue b/resources/js/show/components/Field.vue
@@ -22,10 +22,8 @@
 </script>
 
 <template>
-    <div>
-        <component
-            :is="isCustomField(field.type) ? resolveCustomField(field.type) : components[field.type]"
-            v-bind="$props"
-        />
-    </div>
+    <component
+        :is="isCustomField(field.type) ? resolveCustomField(field.type) : components[field.type]"
+        v-bind="$props"
+    />
 </template>
diff --git a/resources/js/show/components/ShowFieldLayout.vue b/resources/js/show/components/ShowFieldLayout.vue
@@ -2,16 +2,27 @@
     import { Label } from "@/components/ui/label";
     import { ShowFieldProps } from "@/show/types";
     import { ShowFieldData } from "@/types";
+    import { computed } from "vue";
 
     const props = defineProps<ShowFieldProps<ShowFieldData, any>>();
+    const hasLabelRow = computed(() =>
+        !props.hideLabel && (
+            'label' in props.field && props.field.label
+            || props.row?.length > 1
+        )
+    );
 </script>
 
 <template>
-    <div class="grid grid-cols-1 gap-2.5">
-        <template v-if="'label' in props.field && !props.hideLabel">
-            <Label>
-                {{ props.field.label }}
-            </Label>
+    <div class="grid grid-cols-1 gap-2.5" :class="hasLabelRow ? 'md:grid-rows-subgrid md:row-span-2' : ''">
+        <template v-if="hasLabelRow">
+            <div class="flex" :class="!('label' in props.field && props.field.label) ? 'max-md:hidden' : ''">
+                <template v-if="'label' in props.field">
+                    <Label>
+                        {{ props.field.label }}
+                    </Label>
+                </template>
+            </div>
         </template>
 
         <div>

diff --git a/resources/js/show/components/fields/List.vue b/resources/js/show/components/fields/List.vue
@@ -33,18 +33,19 @@
                         <CardContent :class="hasOnlyOneVisibleFileField ? '!p-0' : ''">
                             <FieldGrid class="gap-6">
                                 <template v-for="row in fieldLayout.item">
-                                    <FieldGridRow>
+                                    <FieldGridRow v-show="show.fieldRowShouldBeVisible(row, props.locale, props.field.itemFields, item)">
                                         <template v-for="itemFieldLayout in row">
                                             <FieldGridColumn
                                                 :layout="itemFieldLayout"
-                                                v-show="field.itemFields?.[itemFieldLayout.key] && show.fieldShouldBeVisible(field.itemFields[itemFieldLayout.key], item[itemFieldLayout.key], locale)"
+                                                v-show="show.fieldShouldBeVisible(itemFieldLayout, props.locale, props.field.itemFields, item)"
                                             >
                                                 <template v-if="field.itemFields?.[itemFieldLayout.key]">
                                                     <SharpShowField
-                                                        v-bind="$props"
+                                                        v-bind="props"
                                                         :field="field.itemFields?.[itemFieldLayout.key]"
                                                         :value="item[itemFieldLayout.key]"
                                                         :hide-label="hasOnlyOneVisibleFileField"
+                                                        :row="row"
                                                     />
                                                 </template>
                                                 <template v-else>

diff --git a/resources/js/show/types.ts b/resources/js/show/types.ts
@@ -9,4 +9,5 @@ export type ShowFieldProps<Data extends ShowFieldData = ShowFieldData, Value = D
     root?: boolean,
     isRightCol?: boolean,
     hideLabel?: boolean,
+    row?: LayoutFieldData[],
 }