Total Complexity | 43 |
Total Lines | 481 |
Duplicated Lines | 0 % |
Changes | 7 | ||
Bugs | 2 | Features | 0 |
Complex classes like FrontendVueGenerator often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
While breaking up the class, it is a good idea to analyze how other classes use FrontendVueGenerator, and based on these observations, apply Extract Interface, too.
1 | <?php declare(strict_types=1); |
||
23 | class FrontendVueGenerator |
||
24 | { |
||
25 | /** |
||
26 | * @var FrontendGenerator |
||
27 | */ |
||
28 | protected $generator = null; |
||
29 | |||
30 | public function __construct(FrontendGenerator $generator) |
||
31 | { |
||
32 | $this->generator = $generator; |
||
33 | $this->buildTemplateParameters(); |
||
34 | } |
||
35 | |||
36 | public function getOptions(): Options |
||
37 | { |
||
38 | return $this->generator->getOptions(); |
||
39 | } |
||
40 | |||
41 | public function getStubDir() |
||
42 | { |
||
43 | return $this->generator->getStubDir() . '/Vue/'; |
||
44 | } |
||
45 | |||
46 | protected function getCollection(): GeneratedCollection |
||
49 | } |
||
50 | |||
51 | public function generate(): void |
||
84 | } |
||
85 | |||
86 | public function buildTemplateParameters(): void |
||
87 | { |
||
88 | $hasVueRouter = $this->generator != null; //TODO: temporary true condition while we don't have a setting for this |
||
89 | |||
90 | $hasCan = $this->generator->getModel()->getExtradataValue('hasCan', 'value', false); |
||
91 | $routeBase = $this->generator->getRouteBase(); |
||
92 | $keyAttribute = $this->generator->getKeyAttribute(); |
||
93 | $targetAttribute = $hasVueRouter ? 'to' : 'href'; |
||
94 | |||
95 | $buttonCreate = $this->generator->getComposer()->nodeElement( |
||
96 | 'Button', |
||
97 | [ |
||
98 | Button::TYPE => ($hasVueRouter ? 'router-link' : 'a'), |
||
99 | Button::ATTRIBUTES => [ |
||
100 | $targetAttribute => "/{$routeBase}/edit", |
||
101 | ] + ($hasCan ? [ "v-if" => 'can(\'create\')' ]: []), |
||
102 | ] |
||
103 | )->setContent( |
||
104 | '<i class="fa fa-plus"></i> Add new', |
||
105 | true, |
||
106 | true |
||
107 | )->getRenderHTML(); |
||
108 | |||
109 | $buttonEdit = $this->generator->getComposer()->nodeElement( |
||
110 | 'Button', |
||
111 | [ |
||
112 | Button::TYPE => ($hasVueRouter ? 'router-link' : 'a'), |
||
113 | Button::ATTRIBUTES => [ |
||
114 | $targetAttribute => "'/{$routeBase}/' + model.{$keyAttribute} + '/edit'", |
||
115 | ] + ($hasCan ? [ "v-if" => 'can(\'edit\')' ]: []), |
||
116 | ] |
||
117 | )->setContent( |
||
118 | '<i class="fa fa-pencil"></i> Edit', |
||
119 | true, |
||
120 | true |
||
121 | )->getRenderHTML(); |
||
122 | |||
123 | $buttonDelete = $this->generator->getComposer()->nodeElement( |
||
124 | 'Button', |
||
125 | [ |
||
126 | Button::TYPE => 'a', |
||
127 | Button::COLOR => Button::COLOR_WARNING, |
||
128 | Button::ATTRIBUTES => [ |
||
129 | 'href' => '#', |
||
130 | '@click.prevent' => 'remove', |
||
131 | ] + ($hasCan ? [ "v-if" => 'can(\'delete\')' ]: []), |
||
132 | ] |
||
133 | )->setContent( |
||
134 | '<i class="fa fa-trash"></i> Delete', |
||
135 | true, |
||
136 | true |
||
137 | )->getRenderHTML(); |
||
138 | |||
139 | if (!$hasCan && $this->getOptions()->getOption('vue', 'actionButtonsNoCan') === false) { |
||
140 | $this->generator->templateParameters['buttonCreate'] = ''; |
||
141 | $this->generator->templateParameters['buttonEdit'] = ''; |
||
142 | $this->generator->templateParameters['buttonDelete'] = ''; |
||
143 | } else { |
||
144 | $this->generator->templateParameters['buttonCreate'] = $buttonCreate; |
||
145 | $this->generator->templateParameters['buttonEdit'] = $buttonEdit; |
||
146 | $this->generator->templateParameters['buttonDelete'] = $buttonDelete; |
||
147 | } |
||
148 | $this->generator->templateParameters['options'] = $this->getOptions()->options; |
||
149 | |||
150 | $this->generator->templateParameters['tableItemFields'] = |
||
151 | array_values(array_map(function (Field $f) { |
||
152 | $required = $f->getValidator('required', false); |
||
153 | if ($f->getDatatype()->getBasetype() === 'relationship') { |
||
154 | $name = $f->getName(); |
||
155 | return "<{$name}-link " . ($required ? '' : "v-if=\"{$name}\"") . "v-bind=\"{$name}\"></{$name}-link>"; |
||
156 | } |
||
157 | return '{{ ' . $f->getName() . ' }}'; |
||
158 | }, $this->generator->getTableFields())); |
||
159 | } |
||
160 | |||
161 | /** |
||
162 | * Publishes the Vue component dependencies |
||
163 | * |
||
164 | * @return void |
||
165 | */ |
||
166 | protected function vuePublish(): void |
||
167 | { |
||
168 | $this->getCollection()->push( |
||
169 | new GeneratedItem( |
||
170 | GeneratedItem::TYPE_FRONTEND, |
||
171 | $this->generator->templateCallback( |
||
172 | __DIR__ . "/Vue/Renderable/RelationshipAutocomplete.vue", |
||
173 | $this->generator->getComposer()->getByName('Vue'), |
||
|
|||
174 | [], |
||
175 | $this->generator->getModel() |
||
176 | ), |
||
177 | "Modelarium/RelationshipAutocomplete.vue" |
||
178 | ) |
||
179 | ); |
||
180 | $this->getCollection()->push( |
||
181 | new GeneratedItem( |
||
182 | GeneratedItem::TYPE_FRONTEND, |
||
183 | $this->generator->templateCallback( |
||
184 | __DIR__ . "/Vue/Renderable/RelationshipSelect.vue", |
||
185 | $this->generator->getComposer()->getByName('Vue'), |
||
186 | [], |
||
187 | $this->generator->getModel() |
||
188 | ), |
||
189 | "Modelarium/RelationshipSelect.vue" |
||
190 | ) |
||
191 | ); |
||
192 | // $this->getCollection()->push( |
||
193 | // new GeneratedItem( |
||
194 | // GeneratedItem::TYPE_FRONTEND, |
||
195 | // file_get_contents(__DIR__ . "/Vue/Renderable/RelationshipSelectMultiple.vue"), |
||
196 | // "Modelarium/RelationshipSelectMultiple.vue" |
||
197 | // ) |
||
198 | // ); |
||
199 | } |
||
200 | |||
201 | protected function makeVuePaginationComponent(): void |
||
202 | { |
||
203 | // TODO: this is called once per type |
||
204 | $pagination = $this->generator->getComposer()->nodeElement( |
||
205 | 'Pagination', |
||
206 | [ |
||
207 | ] |
||
208 | ); |
||
209 | $html = $pagination->getRenderHTML(); |
||
210 | $script = PaginationVue::script(); |
||
211 | |||
212 | $this->getCollection()->push( |
||
213 | new GeneratedItem( |
||
214 | GeneratedItem::TYPE_FRONTEND, |
||
215 | "<template>\n$html\n</template>\n<script>\n$script\n</script>\n", |
||
216 | "Modelarium/Pagination.vue" |
||
217 | ) |
||
218 | ); |
||
219 | } |
||
220 | |||
221 | /** |
||
222 | * Appends computed item |
||
223 | * |
||
224 | * @param FrameworkVue $vue |
||
225 | * @return void |
||
226 | */ |
||
227 | protected function vueCodeLinkItem(FrameworkVue $vue): void |
||
233 | ); |
||
234 | } |
||
235 | |||
236 | protected function vueCard(FrameworkVue $vue): void |
||
237 | { |
||
238 | $vueCode = $vue->getVueCode(); |
||
239 | // set basic data for vue |
||
240 | $extraprops = [ |
||
241 | [ |
||
242 | 'name' => 'id', |
||
243 | 'type' => 'String', |
||
244 | 'required' => true |
||
245 | ] |
||
246 | ]; |
||
247 | $cardFieldNames = array_map(function (Field $f) { |
||
248 | return $f->getName(); |
||
249 | }, $this->generator->getCardFields()); |
||
250 | $vueCode->setExtraProps($extraprops); |
||
251 | $this->vueCodeLinkItem($vue); |
||
252 | |||
253 | foreach ($this->generator->getCardFields() as $f) { |
||
254 | $vueCode->appendExtraProp($f->getName(), [ |
||
255 | 'name' => $f->getName(), |
||
256 | 'type' => $vueCode->mapTypeToJs($f->getDatatype()), |
||
257 | 'required' => true |
||
258 | ]); |
||
259 | } |
||
260 | $vueCode->appendMethod( |
||
261 | 'escapeIdentifier(identifier)', |
||
262 | $this->getOptions()->getOption('vue', 'escapeIdentifierBody') |
||
263 | ); |
||
264 | |||
265 | $this->makeVue($vue, 'Card', 'viewable', $cardFieldNames); |
||
266 | } |
||
267 | |||
268 | protected function vueLink(FrameworkVue $vue): void |
||
269 | { |
||
270 | $vueCode = $vue->getVueCode(); |
||
271 | // set basic data for vue |
||
272 | $vueCode->setExtraProps([]); |
||
273 | $cardFieldNames = array_map(function (Field $f) { |
||
274 | return $f->getName(); |
||
275 | }, $this->generator->getCardFields()); |
||
276 | foreach ($this->generator->getCardFields() as $f) { |
||
277 | $vueCode->appendExtraProp($f->getName(), [ |
||
278 | 'name' => $f->getName(), |
||
279 | 'type' => $vueCode->mapTypeToJs($f->getDatatype()), |
||
280 | 'required' => true |
||
281 | ]); |
||
282 | } |
||
283 | foreach ($this->generator->getTitleFields() as $f) { |
||
284 | $vueCode->appendExtraProp($f->getName(), [ |
||
285 | 'name' => $f->getName(), |
||
286 | 'type' => $vueCode->mapTypeToJs($f->getDatatype()), |
||
287 | 'required' => true |
||
288 | ]); |
||
289 | } |
||
290 | |||
291 | if (!$vueCode->getExtraProps()) { |
||
292 | $vueCode->appendExtraProp('id', [ |
||
293 | 'name' => 'id', |
||
294 | 'type' => 'String', |
||
295 | 'required' => true |
||
296 | ]); |
||
297 | } |
||
298 | |||
299 | $this->vueCodeLinkItem($vue); |
||
300 | $this->makeVue($vue, 'Link', 'viewable', $cardFieldNames); |
||
301 | } |
||
302 | |||
303 | public function vueTableItem(FrameworkVue $vue): void |
||
304 | { |
||
305 | $vueCode = $vue->getVueCode(); |
||
306 | $tableFieldNames = array_map(function (Field $f) { |
||
307 | return $f->getName(); |
||
308 | }, $this->generator->getTableFields()); |
||
309 | $vueCode->setExtraProps([]); |
||
310 | $vueCode->appendExtraProp( |
||
311 | 'id', |
||
312 | [ |
||
313 | 'name' => 'id', |
||
314 | 'type' => 'String', |
||
315 | 'required' => true |
||
316 | ] |
||
317 | ); |
||
318 | |||
319 | foreach ($this->generator->getTableFields() as $f) { |
||
320 | /** |
||
321 | * @var Field $f |
||
322 | */ |
||
323 | $required = $f->getValidator('required', false); |
||
324 | $prop = [ |
||
325 | 'name' => $f->getName(), |
||
326 | 'type' => $vueCode->mapTypeToJs($f->getDatatype()), |
||
327 | 'required' => $required |
||
328 | ]; |
||
329 | if (!$required) { |
||
330 | if ($f->getDatatype()->getBasetype() === 'relationship') { |
||
331 | $prop['default'] = '() => null'; |
||
332 | } else { |
||
333 | $prop['default'] = $f->getDatatype()->getDefault; |
||
334 | } |
||
335 | } |
||
336 | |||
337 | $vueCode->appendExtraProp($f->getName(), $prop); |
||
338 | } |
||
339 | $this->makeVue($vue, 'TableItem', 'viewable', $tableFieldNames); |
||
340 | } |
||
341 | |||
342 | public function vueTable(FrameworkVue $vue): void |
||
343 | { |
||
344 | $this->makeVue($vue, 'Table', 'viewable'); |
||
345 | } |
||
346 | |||
347 | public function vueForm(FrameworkVue $vue): void |
||
348 | { |
||
349 | $vueCode = $vue->getVueCode(); |
||
350 | $vueCode->setExtraProps([]); |
||
351 | |||
352 | $createGraphqlVariables = $this->generator->getModel()->mapFields( |
||
353 | function (Field $f) { |
||
354 | if (!$f->getRenderable('form', true)) { |
||
355 | return null; |
||
356 | } |
||
357 | $d = $f->getDatatype(); |
||
358 | if ($d->getBasetype() == 'relationship') { |
||
359 | return $f->getName() . ": {connect: this.model." . $f->getName() . '}'; |
||
360 | } |
||
361 | return $f->getName() . ": this.model." . $f->getName(); |
||
362 | } |
||
363 | ); |
||
364 | $createGraphqlVariables = join(",\n", array_filter($createGraphqlVariables)); |
||
365 | |||
366 | $this->generator->templateParameters['createGraphqlVariables'] = $createGraphqlVariables; |
||
367 | // they're the same now |
||
368 | $this->generator->templateParameters['updateGraphqlVariables'] = $createGraphqlVariables; |
||
369 | |||
370 | $this->makeVue( |
||
371 | $vue, |
||
372 | 'Form', |
||
373 | 'editable', |
||
374 | function (Field $f) { |
||
375 | if (!$f->getExtradata('modelFillable')) { |
||
376 | return false; |
||
377 | } |
||
378 | return $f->getRenderable('form', true); |
||
379 | } |
||
380 | ); |
||
381 | } |
||
382 | |||
383 | /** |
||
384 | * @param FrameworkVue $vue |
||
385 | * @param string $component |
||
386 | * @param string $mode |
||
387 | * @param string[]|callable $restrictFields |
||
388 | * @return void |
||
389 | */ |
||
390 | protected function makeVue(FrameworkVue $vue, string $component, string $mode, $restrictFields = null): void |
||
428 | } |
||
429 | |||
430 | protected function makeVueIndex(): void |
||
431 | { |
||
432 | $path = $this->generator->getModel()->getName() . '/index.js'; |
||
433 | $name = $this->generator->getStudlyName(); |
||
434 | |||
435 | $contents = function ($basepath, $element) use ($name) { |
||
436 | $dir = $basepath . '/' . $name; |
||
437 | $import = []; |
||
438 | $export = []; |
||
439 | foreach (scandir($dir) as $i) { |
||
440 | if (StringUtil::endsWith($i, '.vue')) { |
||
441 | $name = substr($i, 0, -4); |
||
442 | $import[] = "import $name from './$name.vue';"; |
||
443 | $export[] = " {$name},"; |
||
444 | } |
||
445 | } |
||
446 | return implode("\n", $import) . "\n\n" . |
||
447 | "export default {\n" . |
||
448 | implode("\n", $export) . "\n};\n"; |
||
449 | }; |
||
450 | |||
451 | $this->getCollection()->push( |
||
452 | new GeneratedItem( |
||
453 | GeneratedItem::TYPE_FRONTEND, |
||
454 | $contents, |
||
455 | $path |
||
456 | ) |
||
457 | ); |
||
458 | } |
||
459 | |||
460 | protected function makeVueIndexDynamic(): void |
||
461 | { |
||
462 | $path = $this->generator->getModel()->getName() . '/index.dynamic.js'; |
||
463 | $name = $this->generator->getStudlyName(); |
||
464 | |||
465 | $contents = function ($basepath, $element) use ($name) { |
||
466 | $dir = $basepath . '/' . $name; |
||
467 | $import = []; |
||
468 | $export = []; |
||
469 | foreach (scandir($dir) as $i) { |
||
470 | if (StringUtil::endsWith($i, '.vue')) { |
||
471 | $name = substr($i, 0, -4); |
||
472 | $import[] = "const $name = () => import('./$name.vue');"; |
||
473 | $export[] = " {$name},"; |
||
474 | } |
||
475 | } |
||
476 | return implode("\n", $import) . "\n\n" . |
||
477 | "export default {\n" . |
||
478 | implode("\n", $export) . "\n};\n"; |
||
479 | }; |
||
480 | $this->getCollection()->push( |
||
481 | new GeneratedItem( |
||
482 | GeneratedItem::TYPE_FRONTEND, |
||
483 | $contents, |
||
484 | $path |
||
485 | ) |
||
486 | ); |
||
487 | } |
||
488 | |||
489 | protected function makeVueRoutes(): void |
||
504 | ) |
||
505 | ); |
||
506 | } |
||
507 | } |
||
508 |