Corollarium /
modelarium
| Total Complexity | 44 |
| Total Lines | 509 |
| Duplicated Lines | 0 % |
| Changes | 10 | ||
| Bugs | 3 | 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); |
||
| 25 | class FrontendVueGenerator |
||
| 26 | { |
||
| 27 | /** |
||
| 28 | * @var FrontendGenerator |
||
| 29 | */ |
||
| 30 | protected $generator = null; |
||
| 31 | |||
| 32 | public function __construct(FrontendGenerator $generator) |
||
| 33 | { |
||
| 34 | $this->generator = $generator; |
||
| 35 | $this->buildTemplateParameters(); |
||
| 36 | } |
||
| 37 | |||
| 38 | public function getOptions(): Options |
||
| 39 | { |
||
| 40 | return $this->generator->getOptions(); |
||
| 41 | } |
||
| 42 | |||
| 43 | public function getStubDir(): string |
||
| 44 | { |
||
| 45 | return $this->generator->getStubDir() . '/Vue/'; |
||
| 46 | } |
||
| 47 | |||
| 48 | protected function getCollection(): GeneratedCollection |
||
| 51 | } |
||
| 52 | |||
| 53 | public function generate(): void |
||
| 54 | { |
||
| 55 | /** |
||
| 56 | * @var FrameworkVue $vue |
||
| 57 | */ |
||
| 58 | $vue = $this->generator->getComposer()->getByName('Vue'); |
||
| 59 | $vueCode = $vue->getVueCode(); |
||
| 60 | |||
| 61 | // set basic data for vue |
||
| 62 | $extraprops = [ |
||
| 63 | new Prop( |
||
| 64 | 'id', |
||
| 65 | 'string', |
||
| 66 | true |
||
| 67 | ) |
||
| 68 | ]; |
||
| 69 | $vueCode->setExtraProps($extraprops); |
||
| 70 | |||
| 71 | // build basic vue components |
||
| 72 | $this->vuePublish(); |
||
| 73 | $this->makeVuePaginationComponent(); |
||
| 74 | |||
| 75 | $this->vueCard($vue); |
||
| 76 | $this->vueLink($vue); |
||
| 77 | $this->vueTableItem($vue); |
||
| 78 | $this->vueTable($vue); |
||
| 79 | |||
| 80 | $this->makeVue($vue, 'List', 'viewable'); |
||
| 81 | $this->makeVue($vue, 'Show', 'viewable'); |
||
| 82 | $this->makeVue($vue, 'Edit', 'editable'); |
||
| 83 | $this->vueForm($vue); |
||
| 84 | $this->makeVueRoutes(); |
||
| 85 | $this->makeVueCrud(); |
||
| 86 | $this->makeVueIndex(); |
||
| 87 | $this->makeVueIndexDynamic(); |
||
| 88 | } |
||
| 89 | |||
| 90 | public function buildTemplateParameters(): void |
||
| 91 | { |
||
| 92 | $hasVueRouter = $this->generator != null; //TODO: temporary true condition while we don't have a setting for this |
||
| 93 | |||
| 94 | $hasCan = $this->generator->getModel()->getExtradataValue('hasCan', 'value', false); |
||
| 95 | $routeBase = $this->generator->getRouteBase(); |
||
| 96 | $keyAttribute = $this->generator->getKeyAttribute(); |
||
| 97 | $targetAttribute = $hasVueRouter ? 'to' : 'href'; |
||
| 98 | |||
| 99 | $buttonCreate = $this->generator->getComposer()->nodeElement( |
||
| 100 | 'Button', |
||
| 101 | [ |
||
| 102 | Button::TYPE => ($hasVueRouter ? 'router-link' : 'a'), |
||
| 103 | Button::ATTRIBUTES => [ |
||
| 104 | $targetAttribute => "/{$routeBase}/edit", |
||
| 105 | ] + ($hasCan ? [ "v-if" => 'can(\'create\')' ]: []), |
||
| 106 | ] |
||
| 107 | )->setContent( |
||
| 108 | '<i class="fa fa-plus"></i> ' . $this->getOptions()->getOption('frontend', 'messages')['addNew'], |
||
| 109 | true, |
||
| 110 | true |
||
| 111 | )->getRenderHTML(); |
||
| 112 | |||
| 113 | $buttonEdit = $this->generator->getComposer()->nodeElement( |
||
| 114 | 'Button', |
||
| 115 | [ |
||
| 116 | Button::TYPE => ($hasVueRouter ? 'router-link' : 'a'), |
||
| 117 | Button::ATTRIBUTES => [ |
||
| 118 | $targetAttribute => "'/{$routeBase}/' + model.{$keyAttribute} + '/edit'", |
||
| 119 | ] + ($hasCan ? [ "v-if" => 'can(\'edit\')' ]: []), |
||
| 120 | ] |
||
| 121 | )->setContent( |
||
| 122 | '<i class="fa fa-pencil"></i> ' . $this->getOptions()->getOption('frontend', 'messages')['edit'], |
||
| 123 | true, |
||
| 124 | true |
||
| 125 | )->getRenderHTML(); |
||
| 126 | |||
| 127 | $buttonDelete = $this->generator->getComposer()->nodeElement( |
||
| 128 | 'Button', |
||
| 129 | [ |
||
| 130 | Button::TYPE => 'a', |
||
| 131 | Button::COLOR => Button::COLOR_WARNING, |
||
| 132 | Button::ATTRIBUTES => [ |
||
| 133 | 'href' => '#', |
||
| 134 | '@click.prevent' => 'remove(model.id)', |
||
| 135 | ] + ($hasCan ? [ "v-if" => 'can(\'delete\')' ]: []), |
||
| 136 | ] |
||
| 137 | )->setContent( |
||
| 138 | '<i class="fa fa-trash"></i> ' . $this->getOptions()->getOption('frontend', 'messages')['delete'], |
||
| 139 | true, |
||
| 140 | true |
||
| 141 | )->getRenderHTML(); |
||
| 142 | |||
| 143 | if (!$hasCan && $this->getOptions()->getOption('vue', 'actionButtonsNoCan') === false) { |
||
| 144 | $this->generator->templateParameters['buttonCreate'] = ''; |
||
| 145 | $this->generator->templateParameters['buttonEdit'] = ''; |
||
| 146 | $this->generator->templateParameters['buttonDelete'] = ''; |
||
| 147 | } else { |
||
| 148 | $this->generator->templateParameters['buttonCreate'] = $buttonCreate; |
||
| 149 | $this->generator->templateParameters['buttonEdit'] = $buttonEdit; |
||
| 150 | $this->generator->templateParameters['buttonDelete'] = $buttonDelete; |
||
| 151 | } |
||
| 152 | $this->generator->templateParameters['options'] = $this->getOptions()->options; |
||
| 153 | |||
| 154 | $this->generator->templateParameters['tableItemFields'] = |
||
| 155 | array_values(array_map(function (Field $f) { |
||
| 156 | $required = $f->getValidator('required', false); |
||
| 157 | if ($f->getDatatype()->getBasetype() === 'relationship') { |
||
| 158 | $name = $f->getName(); |
||
| 159 | return "<{$name}-link " . ($required ? '' : "v-if=\"{$name}\"") . "v-bind=\"{$name}\"></{$name}-link>"; |
||
| 160 | } |
||
| 161 | return '{{ ' . $f->getName() . ' }}'; |
||
| 162 | }, $this->generator->getTableFields())); |
||
| 163 | } |
||
| 164 | |||
| 165 | /** |
||
| 166 | * Publishes the Vue component dependencies |
||
| 167 | * |
||
| 168 | * @return void |
||
| 169 | */ |
||
| 170 | protected function vuePublish(): void |
||
| 171 | { |
||
| 172 | $this->getCollection()->push( |
||
| 173 | new GeneratedItem( |
||
| 174 | GeneratedItem::TYPE_FRONTEND, |
||
| 175 | $this->generator->templateCallback( |
||
| 176 | __DIR__ . "/Vue/Renderable/RelationshipAutocomplete.vue", |
||
| 177 | $this->generator->getComposer()->getByName('Vue'), |
||
|
Bug
introduced
by
|
|||
| 178 | [], |
||
| 179 | $this->generator->getModel() |
||
| 180 | ), |
||
| 181 | "Modelarium/RelationshipAutocomplete.vue" |
||
| 182 | ) |
||
| 183 | ); |
||
| 184 | $this->getCollection()->push( |
||
| 185 | new GeneratedItem( |
||
| 186 | GeneratedItem::TYPE_FRONTEND, |
||
| 187 | $this->generator->templateCallback( |
||
| 188 | __DIR__ . "/Vue/Renderable/RelationshipSelect.vue", |
||
| 189 | $this->generator->getComposer()->getByName('Vue'), |
||
| 190 | [], |
||
| 191 | $this->generator->getModel() |
||
| 192 | ), |
||
| 193 | "Modelarium/RelationshipSelect.vue" |
||
| 194 | ) |
||
| 195 | ); |
||
| 196 | // $this->getCollection()->push( |
||
| 197 | // new GeneratedItem( |
||
| 198 | // GeneratedItem::TYPE_FRONTEND, |
||
| 199 | // file_get_contents(__DIR__ . "/Vue/Renderable/RelationshipSelectMultiple.vue"), |
||
| 200 | // "Modelarium/RelationshipSelectMultiple.vue" |
||
| 201 | // ) |
||
| 202 | // ); |
||
| 203 | } |
||
| 204 | |||
| 205 | protected function makeVuePaginationComponent(): void |
||
| 206 | { |
||
| 207 | // TODO: this is called once per type |
||
| 208 | $pagination = $this->generator->getComposer()->nodeElement( |
||
| 209 | 'Pagination', |
||
| 210 | [ |
||
| 211 | ] |
||
| 212 | ); |
||
| 213 | $html = $pagination->getRenderHTML(); |
||
| 214 | $script = PaginationVue::script(); |
||
| 215 | |||
| 216 | $this->getCollection()->push( |
||
| 217 | new GeneratedItem( |
||
| 218 | GeneratedItem::TYPE_FRONTEND, |
||
| 219 | "<template>\n$html\n</template>\n<script>\n$script\n</script>\n", |
||
| 220 | "Modelarium/Pagination.vue" |
||
| 221 | ) |
||
| 222 | ); |
||
| 223 | } |
||
| 224 | |||
| 225 | /** |
||
| 226 | * Appends computed item |
||
| 227 | * |
||
| 228 | * @param FrameworkVue $vue |
||
| 229 | * @return void |
||
| 230 | */ |
||
| 231 | protected function vueCodeLinkItem(FrameworkVue $vue): void |
||
| 239 | ) |
||
| 240 | ); |
||
| 241 | } |
||
| 242 | |||
| 243 | protected function vueCard(FrameworkVue $vue): void |
||
| 244 | { |
||
| 245 | $vueCode = $vue->getVueCode(); |
||
| 246 | // set basic data for vue |
||
| 247 | $extraprops = [ |
||
| 248 | new Prop( |
||
| 249 | 'id', |
||
| 250 | 'String', |
||
| 251 | true |
||
| 252 | ) |
||
| 253 | ]; |
||
| 254 | $cardFieldNames = array_map(function (Field $f) { |
||
| 255 | return $f->getName(); |
||
| 256 | }, $this->generator->getCardFields()); |
||
| 257 | $vueCode->setExtraProps($extraprops); |
||
| 258 | $this->vueCodeLinkItem($vue); |
||
| 259 | |||
| 260 | foreach ($this->generator->getCardFields() as $f) { |
||
| 261 | $vueCode->appendExtraProp( |
||
| 262 | new Prop( |
||
| 263 | $f->getName(), |
||
| 264 | $vueCode->mapTypeToJs($f->getDatatype()), |
||
| 265 | true |
||
| 266 | ) |
||
| 267 | ); |
||
| 268 | } |
||
| 269 | $vueCode->appendMethod( |
||
| 270 | 'escapeIdentifier(identifier)', |
||
| 271 | $this->getOptions()->getOption('vue', 'escapeIdentifierBody') |
||
| 272 | ); |
||
| 273 | |||
| 274 | $this->makeVue($vue, 'Card', 'viewable', $cardFieldNames); |
||
| 275 | } |
||
| 276 | |||
| 277 | protected function vueLink(FrameworkVue $vue): void |
||
| 278 | { |
||
| 279 | $vueCode = $vue->getVueCode(); |
||
| 280 | // set basic data for vue |
||
| 281 | $vueCode->setExtraProps([]); |
||
| 282 | $cardFieldNames = array_map(function (Field $f) { |
||
| 283 | return $f->getName(); |
||
| 284 | }, $this->generator->getCardFields()); |
||
| 285 | foreach ($this->generator->getCardFields() as $f) { |
||
| 286 | $vueCode->appendExtraProp( |
||
| 287 | new Prop( |
||
| 288 | $f->getName(), |
||
| 289 | $vueCode->mapTypeToJs($f->getDatatype()), |
||
| 290 | true |
||
| 291 | ) |
||
| 292 | ); |
||
| 293 | } |
||
| 294 | foreach ($this->generator->getTitleFields() as $f) { |
||
| 295 | $vueCode->appendExtraProp( |
||
| 296 | new Prop( |
||
| 297 | $f->getName(), |
||
| 298 | $vueCode->mapTypeToJs($f->getDatatype()), |
||
| 299 | true |
||
| 300 | ) |
||
| 301 | ); |
||
| 302 | } |
||
| 303 | |||
| 304 | if (!$vueCode->getExtraProps()) { |
||
| 305 | $vueCode->appendExtraProp( |
||
| 306 | new Prop( |
||
| 307 | 'id', |
||
| 308 | 'String', |
||
| 309 | true |
||
| 310 | ) |
||
| 311 | ); |
||
| 312 | } |
||
| 313 | |||
| 314 | $this->vueCodeLinkItem($vue); |
||
| 315 | $this->makeVue($vue, 'Link', 'viewable', $cardFieldNames); |
||
| 316 | } |
||
| 317 | |||
| 318 | public function vueTableItem(FrameworkVue $vue): void |
||
| 319 | { |
||
| 320 | $vueCode = $vue->getVueCode(); |
||
| 321 | $tableFieldNames = array_map(function (Field $f) { |
||
| 322 | return $f->getName(); |
||
| 323 | }, $this->generator->getTableFields()); |
||
| 324 | $vueCode->setExtraProps([]); |
||
| 325 | $vueCode->appendExtraProp( |
||
| 326 | new Prop( |
||
| 327 | 'id', |
||
| 328 | 'String', |
||
| 329 | true |
||
| 330 | ) |
||
| 331 | ); |
||
| 332 | |||
| 333 | foreach ($this->generator->getTableFields() as $f) { |
||
| 334 | /** |
||
| 335 | * @var Field $f |
||
| 336 | */ |
||
| 337 | $required = $f->getValidator('required', false); |
||
| 338 | $prop = new Prop( |
||
| 339 | $f->getName(), |
||
| 340 | $vueCode->mapTypeToJs($f->getDatatype()), |
||
| 341 | $required |
||
| 342 | ); |
||
| 343 | if (!$required) { |
||
| 344 | if ($f->getDatatype()->getBasetype() === 'relationship') { |
||
| 345 | $prop->default = '() => null'; |
||
| 346 | } else { |
||
| 347 | $prop->default = $f->getDatatype()->getDefault(); |
||
| 348 | } |
||
| 349 | } |
||
| 350 | |||
| 351 | $vueCode->appendExtraProp($prop); |
||
| 352 | } |
||
| 353 | $this->makeVue($vue, 'TableItem', 'viewable', $tableFieldNames); |
||
| 354 | } |
||
| 355 | |||
| 356 | public function vueTable(FrameworkVue $vue): void |
||
| 357 | { |
||
| 358 | $this->makeVue($vue, 'Table', 'viewable'); |
||
| 359 | } |
||
| 360 | |||
| 361 | public function vueForm(FrameworkVue $vue): void |
||
| 362 | { |
||
| 363 | $vueCode = $vue->getVueCode(); |
||
| 364 | $vueCode->setExtraProps([]); |
||
| 365 | |||
| 366 | $createGraphqlVariables = $this->generator->getModel()->mapFields( |
||
| 367 | function (Field $f) { |
||
| 368 | if (!$f->getRenderable('form', true)) { |
||
| 369 | return null; |
||
| 370 | } |
||
| 371 | $d = $f->getDatatype(); |
||
| 372 | if ($d->getBasetype() == 'relationship') { |
||
| 373 | return $f->getName() . ": {connect: this.model." . $f->getName() . '}'; |
||
| 374 | } |
||
| 375 | return $f->getName() . ": this.model." . $f->getName(); |
||
| 376 | } |
||
| 377 | ); |
||
| 378 | $createGraphqlVariables = join(",\n", array_filter($createGraphqlVariables)); |
||
| 379 | |||
| 380 | $this->generator->templateParameters['createGraphqlVariables'] = $createGraphqlVariables; |
||
| 381 | // they're the same now |
||
| 382 | $this->generator->templateParameters['updateGraphqlVariables'] = $createGraphqlVariables; |
||
| 383 | |||
| 384 | $this->makeVue( |
||
| 385 | $vue, |
||
| 386 | 'Form', |
||
| 387 | 'editable', |
||
| 388 | function (Field $f) { |
||
| 389 | if (!$f->getExtradata('modelFillable')) { |
||
| 390 | return false; |
||
| 391 | } |
||
| 392 | return $f->getRenderable('form', true); |
||
| 393 | } |
||
| 394 | ); |
||
| 395 | } |
||
| 396 | |||
| 397 | /** |
||
| 398 | * @param FrameworkVue $vue |
||
| 399 | * @param string $component |
||
| 400 | * @param string $mode |
||
| 401 | * @param string[]|callable $restrictFields |
||
| 402 | * @return void |
||
| 403 | */ |
||
| 404 | protected function makeVue(FrameworkVue $vue, string $component, string $mode, $restrictFields = null): void |
||
| 405 | { |
||
| 406 | $path = $this->generator->getModel()->getName() . '/' . |
||
| 407 | $this->generator->getModel()->getName() . $component . '.vue'; |
||
| 408 | |||
| 409 | $stub = $this->getStubDir() . "/Vue{$component}.mustache.vue"; |
||
| 410 | |||
| 411 | if ($mode == 'editable') { |
||
| 412 | $vue->setEditableTemplate( |
||
| 413 | function (FrameworkVue $vue, array $data, Model $m) use ($stub) { |
||
| 414 | return $this->generator->templateCallback($stub, $vue, $data, $m); |
||
| 415 | } |
||
| 416 | ); |
||
| 417 | |||
| 418 | $this->getCollection()->push( |
||
| 419 | new GeneratedItem( |
||
| 420 | GeneratedItem::TYPE_FRONTEND, |
||
| 421 | $this->generator->getModel()->editable($this->generator->getComposer(), [], $restrictFields), |
||
| 422 | $path |
||
| 423 | ) |
||
| 424 | ); |
||
| 425 | } else { |
||
| 426 | $vue->setViewableTemplate( |
||
| 427 | function (FrameworkVue $vue, array $data, Model $m) use ($stub) { |
||
| 428 | return $this->generator->templateCallback($stub, $vue, $data, $m); |
||
| 429 | } |
||
| 430 | ); |
||
| 431 | |||
| 432 | $this->getCollection()->push( |
||
| 433 | new GeneratedItem( |
||
| 434 | GeneratedItem::TYPE_FRONTEND, |
||
| 435 | $this->generator->getModel()->viewable($this->generator->getComposer(), [], $restrictFields), |
||
| 436 | $path |
||
| 437 | ) |
||
| 438 | ); |
||
| 439 | } |
||
| 440 | $vue->resetVueCode(); |
||
| 441 | $vue->getVueCode()->setFieldModelVariable('model.'); |
||
| 442 | } |
||
| 443 | |||
| 444 | protected function makeVueIndex(): void |
||
| 445 | { |
||
| 446 | $path = $this->generator->getModel()->getName() . '/index.js'; |
||
| 447 | $name = $this->generator->getStudlyName(); |
||
| 448 | |||
| 449 | $contents = function ($basepath, $element) use ($name) { |
||
| 450 | $dir = $basepath . '/' . $name; |
||
| 451 | $import = []; |
||
| 452 | $export = []; |
||
| 453 | foreach (scandir($dir) as $i) { |
||
| 454 | if (StringUtil::endsWith($i, '.vue')) { |
||
| 455 | $name = substr($i, 0, -4); |
||
| 456 | $import[] = "import $name from './$name.vue';"; |
||
| 457 | $export[] = " {$name},"; |
||
| 458 | } |
||
| 459 | } |
||
| 460 | return implode("\n", $import) . "\n\n" . |
||
| 461 | "export {\n" . |
||
| 462 | implode("\n", $export) . "\n};\n"; |
||
| 463 | }; |
||
| 464 | |||
| 465 | $this->getCollection()->push( |
||
| 466 | new GeneratedItem( |
||
| 467 | GeneratedItem::TYPE_FRONTEND, |
||
| 468 | $contents, |
||
| 469 | $path |
||
| 470 | ) |
||
| 471 | ); |
||
| 472 | } |
||
| 473 | |||
| 474 | protected function makeVueIndexDynamic(): void |
||
| 475 | { |
||
| 476 | $path = $this->generator->getModel()->getName() . '/index.dynamic.js'; |
||
| 477 | $name = $this->generator->getStudlyName(); |
||
| 478 | |||
| 479 | $contents = function ($basepath, $element) use ($name) { |
||
| 480 | $dir = $basepath . '/' . $name; |
||
| 481 | $import = []; |
||
| 482 | $export = []; |
||
| 483 | foreach (scandir($dir) as $i) { |
||
| 484 | if (StringUtil::endsWith($i, '.vue')) { |
||
| 485 | $componentName = substr($i, 0, -4); |
||
| 486 | $import[] = "const $componentName = () => import(/* webpackChunkName: \"$name\" */ './$componentName.vue');"; |
||
| 487 | $export[] = " {$componentName},"; |
||
| 488 | } |
||
| 489 | } |
||
| 490 | return implode("\n", $import) . "\n\n" . |
||
| 491 | "export {\n" . |
||
| 492 | implode("\n", $export) . "\n};\n"; |
||
| 493 | }; |
||
| 494 | $this->getCollection()->push( |
||
| 495 | new GeneratedItem( |
||
| 496 | GeneratedItem::TYPE_FRONTEND, |
||
| 497 | $contents, |
||
| 498 | $path |
||
| 499 | ) |
||
| 500 | ); |
||
| 501 | } |
||
| 502 | |||
| 503 | protected function makeVueRoutes(): void |
||
| 504 | { |
||
| 505 | $path = $this->generator->getModel()->getName() . '/routes.js'; |
||
| 506 | |||
| 507 | $this->getCollection()->push( |
||
| 508 | new GeneratedItem( |
||
| 509 | GeneratedItem::TYPE_FRONTEND, |
||
| 510 | $this->generator->templateFile( |
||
| 511 | $this->getStubDir() . "/routes.mustache.js", |
||
| 512 | [ |
||
| 513 | 'routeName' => $this->generator->getRouteBase(), |
||
| 514 | 'keyAttribute' => $this->generator->getKeyAttribute() |
||
| 515 | ] |
||
| 516 | ), |
||
| 517 | $path |
||
| 518 | ) |
||
| 519 | ); |
||
| 520 | } |
||
| 521 | |||
| 522 | protected function makeVueCrud(): void |
||
| 534 | ) |
||
| 535 | ); |
||
| 536 | } |
||
| 537 | } |
||
| 538 |
Loading history...