Shared functionality / base views about apiato

[llstarscreamll]

Hi, I did not make this on Hello-API yet, I'm coding my frontEnd app with Angular 2, but maybe could be something like this:

- Containers
  - ShellView # or ShellViewTheme or WhatEver
    - Config # maybe set the theme here?
    - Providers # or here?
    - IU
      - WEB
        - Composers
        - Views # the shared views for all containers
          - Themes # themes available on this container, maybe you write only one
            - AdminLTE
              - layouts
                - rightSideBar
                - topNavBar
              - components # very easy thanks to Laravel 5.4 slots and components
                - card
                - pageHeader
                - pageBody
                - pageFoter
            - PureBootstrap
              - layouts
                - rightSideBar
                - topNavBar
              - components
                - card
                - pageHeader
                - pageBody
                - pageFoter
            - BootstrapMaterialDesign
              - layouts
                - rightSideBar
                - topNavBar
              - components
                - card
                - pageHeader
                - pageBody
                - pageFoter
            - Shared # maybe some shared/common html code, like scripts/css imports, plugins setup, etc...
              - ...
  - Customer
    - Config
    - UI
      - WEB
        - Views
          - layouts/ # maybe set default and very basic layouts?
          - components/ # maybe set default and very basic components?
          - customer-index
          - customer-form
          - customer-statics
          - customer-table

In Customer container, UI/WEB/Controllers/FooController.php:

class Controller extends PortWebController
{
  public function index()
  {
    $data = SomeClass::getViewData();
    return view('customer-index', $data);
  }
}

The view:

{{-- the layout for the specific theme --}}
@extends(config('customer::theme').'layout.rightSideBar')

{{-- rightSideBar layout title yield --}}
@section('title') {{ trans('customer::views.index.title') }} @endsection
{{-- /rightSideBar layout title yield --}}

{{-- rightSideBar layout content yield --}}
@section('content')

  {{-- page header component for specific theme --}}
  @component(config('customer::theme').'components.pageHeader')
    <h1>Customers Dashboard!!</h1>
  @endcomponent
  {{-- /page header component for specific theme --}}

  {{-- card component for specific theme --}}
  @component(config('customer::theme').'components.card')
    {{-- card title content for this card component --}}
    @slot('card_title')
      <h3>My Card Title Here!!</h3>
    @endslot
    {{-- /card title content for this card component --}}

    {{-- the body for this component --}}
    <p>Some Body Here!!</p>

    {{-- card footer content for this card component --}}
    @slot('card_footer')
      <div>Some footer | v.0.1</div>
    @endslot
    {{-- /card footer content for this card component --}}
  @endcomponent
  {{-- /card component for specific theme --}}

@endsection
{{-- /rightSideBar layout content yield --}}

{{-- rightSideBar layout scripts yield --}}
@section('scripts')
  {{-- some global scripts --}}
  @include(config('customer::theme').'shared.fooScript')

  {{-- some specific page scripts --}}
  <script>
    // ...
  </script>
@endsection
{{-- /rightSideBar layout scripts yield --}}

Maybe you have now the basic idea. In customers container you have a config file where you decide what theme to use from your ShellTheme container, like:

// customers container config file
return [
  'theme' => 'shellTheme::Themes.AdminLTE.', // don't forget the dot at the end!!
  // or maybe:
  'theme' => 'shellTheme::'.config('shellTheme::activeTheme').'.', // 'shellTheme::BootstrapMaterialDesign.'
  // or maybe:
  'theme' => '', // to use the default customer container layouts and component views
];

And the ShellTheme container service provider:

private function loadResources()
{
  $theme = config('shellTheme::activeTheme', 'PureBootstrap');

  // make all themes available
  $this->loadViewsFrom(__DIR__.'/../UI/WEB/Views', 'shellTheme');
  // or make only one theme available
  $this->loadViewsFrom(__DIR__.'/../UI/WEB/Views/Themes/'.$theme, 'shellTheme');
  // setup shared views, etc..
}

Notes:

• You must have to share the same layouts and components on each theme
• If you don't want to have your customer container tightly coupled to shellTheme container, write the default layouts and components for the customer container.
• Maybe you should to publish a package.json and a gulp.js from Shell Theme container service provider to setup the theme assets.
• Maybe you should have some tricky name on ShellTheme folder container to make sure that it is loaded on time.

You should do this the way that fits your specific needs, this is only an quick idea.

Hope this helps.

[Mahmoudz]

@MrSnoozles thanks you for your support.

The Port layer is the place you are looking for. It is where you put all the shared between codes between the containers. I am considering refactoring that layer in the future to make the folders more similar in structure..

Regarding the HTML and Views I really haven't used that! because my frontend apps are completely separated from the backend code. But I've just created that Simple Login and Admin web pages as a demo.

However, I know some people are serving HTML from Hello API like @llstarscreamll so maybe he can recommend something for you based on his experience in that area.

I would say feel free to put your code wherever you think is best for you, and consider adding a View folder in the Port layer.. If it worked well also consider a PR.

Best,