Skip to content

Commit 2a7d556

Browse files
kzamanbdkzamanbd
committed
Refactor product category field name and enhance layout styles for image fields
1 parent 55ebd6b commit 2a7d556

File tree

4 files changed

+93
-37
lines changed

4 files changed

+93
-37
lines changed

‎includes/ProductForm/Init.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ public function init_general_fields() {
320320
Elements::CATEGORIES, [
321321
'title' => __( 'Categories', 'dokan-lite' ),
322322
'field_type' => 'select',
323-
'name' => 'chosen_product_cat[]',
323+
'name' => 'chosen_product_cat',
324324
'placeholder' => __( 'Select product categories', 'dokan-lite' ),
325325
'options' => ProductCategoryHelper::get_product_categories_tree(),
326326
'required' => true,

‎src/dashboard/form-manager/components/FeatureImage.tsx‎

Lines changed: 86 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,100 @@
11
import { DokanButton, MediaUploader } from '@src/components';
22
import { __ } from '@wordpress/i18n';
3-
import { Upload } from 'lucide-react';
3+
import { Upload, X } from 'lucide-react';
44
import CustomField from './CustomField';
55

6-
const FeatureImage = ( { data, field, onChange }: any ) => {
6+
export const ImagePreview = ( {
7+
images,
8+
onRemove,
9+
multiple = false,
10+
}: {
11+
images: any;
12+
onRemove: ( index: number ) => void;
13+
multiple?: boolean;
14+
} ) => {
15+
const items = Array.isArray( images ) ? images : [ images ];
16+
if ( items.length === 0 ) {
17+
return null;
18+
}
19+
20+
return (
21+
<div className="flex flex-wrap gap-3 mt-3">
22+
{ items.map( ( item: any, index: number ) => (
23+
<div
24+
key={ index }
25+
className={ `relative group border border-gray-200 rounded-md overflow-hidden ${
26+
multiple && 'w-20 h-20'
27+
}` }
28+
>
29+
<img
30+
src={ item.url }
31+
alt="product"
32+
className="w-full h-full object-cover"
33+
/>
34+
<button
35+
type="button"
36+
className="absolute top-1 right-1 bg-white rounded-full p-0.5 shadow-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:text-red-500"
37+
onClick={ ( e ) => {
38+
e.preventDefault();
39+
onRemove( index );
40+
} }
41+
>
42+
<X size={ 14 } />
43+
</button>
44+
</div>
45+
) ) }
46+
</div>
47+
);
48+
};
49+
50+
const FeatureImage = ( { field, onChange }: any ) => {
751
const onSelect = ( value: any ) => {
52+
let ids, values;
53+
54+
if ( Array.isArray( value ) ) {
55+
ids = value.map( ( item: any ) => item.id );
56+
values = value;
57+
} else {
58+
ids = value.id;
59+
values = value;
60+
}
61+
62+
onChange( {
63+
[ field.id ]: ids,
64+
[ `$${ field.id }_value` ]: values,
65+
} );
66+
};
67+
68+
const onRemove = () => {
869
onChange( {
9-
[ field.id ]: value.id,
10-
[ `$${ field.id }_url` ]: value.url,
70+
[ field.id ]: [],
71+
[ `$${ field.id }_value` ]: [],
1172
} );
1273
};
1374

14-
const label = field.field_type === 'gallery' ? '' : field.label;
75+
const multiple = field.field_type === 'gallery';
76+
const images = field.value;
1577

1678
return (
17-
<CustomField label={ label }>
18-
<MediaUploader
19-
onSelect={ onSelect }
20-
className={ `product-${ field.id }` }
21-
multiple={ field.field_type === 'gallery' }
22-
>
23-
<DokanButton variant="secondary" className="uppercase">
24-
<Upload size={ 16 } />
25-
{ __( 'Upload File', 'dokan-lite' ) }
26-
</DokanButton>
27-
<span>
28-
{ __( 'A product cover image here.', 'dokan-lite' ) }
29-
</span>
30-
{ data[ `$${ field.id }_url` ] && (
31-
<img
32-
src={ data[ `$${ field.id }_url` ] }
33-
alt="Product"
34-
style={ {
35-
marginTop: '10px',
36-
maxWidth: '100%',
37-
width: '150px',
38-
} }
39-
/>
40-
) }
41-
</MediaUploader>
79+
<CustomField label={ field.label } className={ `${ field.id }-field` }>
80+
{ images.length ? (
81+
<ImagePreview images={ images } onRemove={ onRemove } />
82+
) : (
83+
<MediaUploader
84+
onSelect={ onSelect }
85+
className={ `product-${ field.id }` }
86+
multiple={ field.field_type === 'gallery' }
87+
>
88+
{ }
89+
<DokanButton variant="secondary" className="uppercase">
90+
<Upload size={ 16 } />
91+
{ __( 'Upload File', 'dokan-lite' ) }
92+
</DokanButton>
93+
<span>
94+
{ __( 'A product cover image here.', 'dokan-lite' ) }
95+
</span>
96+
</MediaUploader>
97+
) }
4298
</CustomField>
4399
);
44100
};

‎src/dashboard/form-manager/components/FieldRenderer.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,9 @@ export const getFieldConfig = ( field: FormField ) => {
8181

8282
if ( Array.isArray( field.value ) ) {
8383
mappedField.type = 'array';
84-
mappedField.multiple = true;
8584
}
8685

87-
if ( field.name === 'chosen_product_cat[]' ) {
86+
if ( field.name === 'chosen_product_cat' ) {
8887
mappedField.Edit = CategoriesEdit;
8988
mappedField.type = 'array';
9089
}
@@ -94,8 +93,8 @@ export const getFieldConfig = ( field: FormField ) => {
9493
mappedField.Edit = FeatureImage;
9594
break;
9695
case 'gallery':
97-
mappedField.type = 'array';
98-
mappedField.Edit = FeatureImage;
96+
// mappedField.type = 'array';
97+
// mappedField.Edit = FeatureImage;
9998
break;
10099
default:
101100
mappedField.type = 'text';

‎src/dashboard/form-manager/layout.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,10 @@ const fields = [
7373
type: 'row',
7474
styles: {
7575
image_id: {
76-
flex: 2,
76+
display: 'flex',
77+
flex: 1,
7778
},
78-
gallery_image_ids: { flex: 2 },
79+
gallery_image_ids: { flex: 4 },
7980
},
8081
},
8182
children: [ 'image_id', 'gallery_image_ids' ],

0 commit comments

Comments
 (0)