| 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 |