src/Administration/Resources/app/administration/src/module/sw-cms/elements/cross-selling/component/index.js - Code Metrics - Inspection of "Merge branch 'next-12059/create-cross-selling-elem..." - shopware/platform - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 2bebd2...d93fd7 )

by Christian

created 2020-11-30 09:09 UTC

src/Administration/Resources/app/administration/src/module/sw-cms/elements/cross-selling/component/index.js A

↳ Parent: Project

Complexity

Total Complexity	25
Complexity/F	1.56

Size

Lines of Code	179
Function Count	16

Duplication

Duplicated Lines	179
Ratio	100 %

Importance

Changes

Metric	Value
eloc	104
dl	179
loc	179
rs	10
c	0
b	0
f	0
wmc	25
mnd	9
bc	9
fnc	16
bpm	0.5625
cpm	1.5625
noi	1

How to fix Duplicated Code

import template from './sw-cms-el-cross-selling.html.twig';

import './sw-cms-el-cross-selling.scss';

const { Component, Mixin } = Shopware;

const { isEmpty } = Shopware.Utils.types;

Component.register('sw-cms-el-cross-selling', {
    template,

    mixins: [
        Mixin.getByName('cms-element'),
        Mixin.getByName('placeholder')
    ],

    data() {
        return {
            sliderBoxLimit: 3
        };
    },

    computed: {
        demoProductElement() {
            return {
                config: {
                    boxLayout: {
                        source: 'static',
                        value: this.element.config.boxLayout.value
                    },
                    displayMode: {
                        source: 'static',
                        value: this.element.config.displayMode.value
                    },
                    elMinWidth: {
                        source: 'static',
                        value: this.element.config.elMinWidth.value
                    }
                },
                data: {
                    product: {
                        name: 'Lorem ipsum dolor',
                        description: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                    sed diam voluptua.`.trim(),
                        price: [
                            { gross: 19.90 }
                        ],
                        cover: {
                            media: {
                                url: '/administration/static/img/cms/preview_glasses_large.jpg',
                                alt: 'Lorem Ipsum dolor'
                            }
                        }
                    }
                }
            };
        },

        sliderBoxMinWidth() {
            if (this.element.config.elMinWidth.value && this.element.config.elMinWidth.value.indexOf('px') > -1) {
                return `repeat(auto-fit, minmax(${this.element.config.elMinWidth.value}, 1fr))`;
            }

            return null;
        },

        currentDeviceView() {
            return this.cmsPageState.currentCmsDeviceView;
        },

        crossSelling() {
            if (!this.element.data.product || !this.element.data.product.crossSellings.length) {
                return {
                    name: 'Similar products'
                };
            }

            return this.element.data.product.crossSellings[0];
        },

        crossSellingProducts() {
            return (this.element.data.product.crossSellings.length)
                ? this.element.data.product.crossSellings[0].assignedProducts
                : [];
        },

        currentDemoEntity() {
            if (this.cmsPageState.currentMappingEntity === 'product') {
                return this.cmsPageState.currentDemoEntity;
            }

            return null;
        }
    },

    watch: {
        'element.config.elMinWidth.value': {
            handler() {
                this.setSliderRowLimit();
            }
        },

        currentDeviceView() {
            setTimeout(() => {
                this.setSliderRowLimit();
            }, 400);
        }
    },

    created() {
        this.createdComponent();
    },

    mounted() {
        this.mountedComponent();
    },

    methods: {
        createdComponent() {
            this.initElementConfig('cross-selling');
            this.initElementData('cross-selling');
        },

        mountedComponent() {
            this.setSliderRowLimit();
        },

        setSliderRowLimit() {
            if (isEmpty(this.element.config)) {
                this.createdComponent();
            }

            if (this.currentDeviceView === 'mobile' || (this.$refs.productHolder && this.$refs.productHolder.offsetWidth < 500)) {
                this.sliderBoxLimit = 1;
                return;
            }

            if (!this.element.config.elMinWidth.value ||
                this.element.config.elMinWidth.value === 'px' ||
                this.element.config.elMinWidth.value.indexOf('px') === -1) {
                this.sliderBoxLimit = 3;
                return;
            }

            if (parseInt(this.element.config.elMinWidth.value.replace('px', ''), 10) <= 0) {
                return;
            }

            // Subtract to fake look in storefront which has more width
            const fakeLookWidth = 100;
            const boxWidth = this.$refs.productHolder.offsetWidth;
            const elGap = 32;
            let elWidth = parseInt(this.element.config.elMinWidth.value.replace('px', ''), 10);

            if (elWidth >= 300) {
                elWidth -= fakeLookWidth;
            }

            this.sliderBoxLimit = Math.floor(boxWidth / (elWidth + elGap));
        },

        getProductEl(product) {
            return {
                config: {
                    boxLayout: {
                        source: 'static',
                        value: this.element.config.boxLayout.value
                    },
                    displayMode: {
                        source: 'static',
                        value: this.element.config.displayMode.value
                    }
                },
                data: {
                    product
                }
            };
        }
    }
});


1	View Code Duplication	import template from './sw-cms-el-cross-selling.html.twig';
		0 ignored issues – show Duplication introduced 2020-11-30 09:21 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
2		import './sw-cms-el-cross-selling.scss';
3
4		const { Component, Mixin } = Shopware;
		0 ignored issues – show Bug introduced 2019-10-17 13:30 UTC by Report Bug Copy Issue Report The variable `Shopware` seems to be never declared. If this is a global, consider adding a `/** global: Shopware */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
5		const { isEmpty } = Shopware.Utils.types;
6
7		Component.register('sw-cms-el-cross-selling', {
8		template,
9
10		mixins: [
11		Mixin.getByName('cms-element'),
12		Mixin.getByName('placeholder')
13		],
14
15		data() {
16		return {
17		sliderBoxLimit: 3
18		};
19		},
20
21		computed: {
22		demoProductElement() {
23		return {
24		config: {
25		boxLayout: {
26		source: 'static',
27		value: this.element.config.boxLayout.value
28		},
29		displayMode: {
30		source: 'static',
31		value: this.element.config.displayMode.value
32		},
33		elMinWidth: {
34		source: 'static',
35		value: this.element.config.elMinWidth.value
36		}
37		},
38		data: {
39		product: {
40		name: 'Lorem ipsum dolor',
41		description: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
42		sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
43		sed diam voluptua.`.trim(),
44		price: [
45		{ gross: 19.90 }
46		],
47		cover: {
48		media: {
49		url: '/administration/static/img/cms/preview_glasses_large.jpg',
50		alt: 'Lorem Ipsum dolor'
51		}
52		}
53		}
54		}
55		};
56		},
57
58		sliderBoxMinWidth() {
59		if (this.element.config.elMinWidth.value && this.element.config.elMinWidth.value.indexOf('px') > -1) {
60		return `repeat(auto-fit, minmax(${this.element.config.elMinWidth.value}, 1fr))`;
61		}
62
63		return null;
64		},
65
66		currentDeviceView() {
67		return this.cmsPageState.currentCmsDeviceView;
68		},
69
70		crossSelling() {
71		if (!this.element.data.product \|\| !this.element.data.product.crossSellings.length) {
72		return {
73		name: 'Similar products'
74		};
75		}
76
77		return this.element.data.product.crossSellings[0];
78		},
79
80		crossSellingProducts() {
81		return (this.element.data.product.crossSellings.length)
82		? this.element.data.product.crossSellings[0].assignedProducts
83		: [];
84		},
85
86		currentDemoEntity() {
87		if (this.cmsPageState.currentMappingEntity === 'product') {
88		return this.cmsPageState.currentDemoEntity;
89		}
90
91		return null;
92		}
93		},
94
95		watch: {
96		'element.config.elMinWidth.value': {
97		handler() {
98		this.setSliderRowLimit();
99		}
100		},
101
102		currentDeviceView() {
103		setTimeout(() => {
104		this.setSliderRowLimit();
105		}, 400);
106		}
107		},
108
109		created() {
110		this.createdComponent();
111		},
112
113		mounted() {
114		this.mountedComponent();
115		},
116
117		methods: {
118		createdComponent() {
119		this.initElementConfig('cross-selling');
120		this.initElementData('cross-selling');
121		},
122
123		mountedComponent() {
124		this.setSliderRowLimit();
125		},
126
127		setSliderRowLimit() {
128		if (isEmpty(this.element.config)) {
129		this.createdComponent();
130		}
131
132		if (this.currentDeviceView === 'mobile' \|\| (this.$refs.productHolder && this.$refs.productHolder.offsetWidth < 500)) {
133		this.sliderBoxLimit = 1;
134		return;
135		}
136
137		if (!this.element.config.elMinWidth.value \|\|
138		this.element.config.elMinWidth.value === 'px' \|\|
139		this.element.config.elMinWidth.value.indexOf('px') === -1) {
140		this.sliderBoxLimit = 3;
141		return;
142		}
143
144		if (parseInt(this.element.config.elMinWidth.value.replace('px', ''), 10) <= 0) {
145		return;
146		}
147
148		// Subtract to fake look in storefront which has more width
149		const fakeLookWidth = 100;
150		const boxWidth = this.$refs.productHolder.offsetWidth;
151		const elGap = 32;
152		let elWidth = parseInt(this.element.config.elMinWidth.value.replace('px', ''), 10);
153
154		if (elWidth >= 300) {
155		elWidth -= fakeLookWidth;
156		}
157
158		this.sliderBoxLimit = Math.floor(boxWidth / (elWidth + elGap));
159		},
160
161		getProductEl(product) {
162		return {
163		config: {
164		boxLayout: {
165		source: 'static',
166		value: this.element.config.boxLayout.value
167		},
168		displayMode: {
169		source: 'static',
170		value: this.element.config.displayMode.value
171		}
172		},
173		data: {
174		product
175		}
176		};
177		}
178		}
179		});
180

shopware / platform

Push — master ( 2bebd2...d93fd7 )

src/Administration/Resources/app/administration/src/module/sw-cms/elements/cross-selling/component/index.js A

Complexity

Size

Duplication

Importance

How to fix Duplicated Code

Duplicated Code

Duplication Side-by-Side

Filter issues like