Documentation - ReadyKit

Language Setting

If you would like to change any language, please copy the text from default.php to custom.php.
Please note, we may replace all other files except the custom.php in future updates.

Set Settings
1. Go to "resources/lang" directory of the project.
2. Add a new directory named on your new language's code name. Like, for Spanish language your directory name would be 'es', for Arabic 'ar' etc.
  
  For getting more language's code name you can go to "config/language.php" of the project. Here you can find all the possible language name and their code.
  N:B: Make sure the directory name is same as the valid code of your language.
3. Copy all the files from "resources/lang/en" directory.
4. Change "resources/lang/your-new-language-name/default.php" file. Just make the changes to the right sided text in your language. Suppose, you are adding a new language "Portuguese" in this app. So add a new directory named "portuguese" in "resources/lang". Copy all files from "resources/lang/en" directory to "resources/lang/pr". Then change the "default.php" file in this directory. There can be translations from English (such as, "add"=>"Add"). You should change this to portuguese (such as, "add" => "Adicionar").
Update language
1. Go to "Settings">"Application Settings".
2. Select your preferred language from "Language Settings" section. Save the changes.
3. If you would like to change any language, please copy the text from default.php to custom.php.
4. Please note, we may replace all other files except the custom.php in future updates.
5. After changing any text, please remember to clear cache from the Settings > Application settings by login as admin.

Environment configuration

Open your project on an editor. Open terminal and run "npm i". Make sure that Nodejs is installed on your PC. If Nodejs is not installed on your PC Click here to download and install Nodejs.
After successfully installed node_modules, To change something in vue component you need to go through the following steps -
Steps : Go to resources/js/tenant/Components/View (You will find all the component here with specific folder) > Change something in vue component > run "npm run watch" command from terminal (You must have Nodejs install first) > Refresh browser to see the change

Add New Page

Go to "resources/views/" directory of the project.
Create a directory and name it similar to your feature.
Add a new blade file with the following code. Make sure to change "default .preferred_title_of_this_page" to your page title which is added in default.php of your language file and change the "app-component-name" to your component name related to feature. (component create process described below) for app level use @extends('layout.app').
Go to "app/Http/Controllers/App" make a directory similar to your feature name. Create a controller class like "YourFeatureNameController", which is extends "App\Http\Controllers\Controller". create a function that returns view of the page you created before. Like for example:
Go to "routes/" directory, check route files and subdirectories. You can create a .php file or you also can add in existing file which is similar to your feature. and create a route for your page like that-
Now go to "resources/js/app/Components/View" directory. make a directory related to your feature.
Add a new .vue file. Like for example-

Write your desired HTML code inside the component.
Go to "resources/js/app/AppComponent.js" file and register your vue component

Save your changes. Make sure that your component is compiling successfully.
Now hit your route in the browser and see the new page.

Change Color & Design

After installing the application locally you can modify and change any design by changing the files from `resources/sass` folder.

Change Brand Color

Install the app locally.
Go to resources/sass/core/_variables.scss file.
On line 22 you can see $brand-color: #019AFF;
Change the color code with your new color code.
Build the css with npm
And your application should appear with new brand color.

Route registration guide

The following steps will show you how to register a view called 'charts' in the UI Elements module.

Please note that these instructions are not module specific

Step 1: Create the route

Create a route in the 'routes/app/elements.php' file

<?php
Route::get('/charts', [InterfaceController::class, 'charts'])
    ->name('charts');
?>

Step 2: Create a method in the controller class

Define a charts method in the 'app/Http/Controllers/App/UI/InterfaceController.php' file

As you can see, this method returns a blade file to the browser,

This blade file will contain a root Vue component

<?php
public function charts()
{
    return view('ui-features.charts');
}
?>

Step 3: Create the blade file

In the 'resources/views/ui-features/' directory, create a blade file and add the following boilerplate code that extends the application's base layout and sections, and a <charts></charts> component

<?php
@extends('layouts.app')

@section('title', trans('default.charts')) // i18n

@section('contents')
	<charts></charts>
@endsection
?>

Step 4: Create the root Vue component

Create a root vue component for the charts view and globally register it in the 'resources/js/app/DemoComponent.js' file

Here we are registering a vue component in the './Components/Views/Demo/UI/Charts' directory called Charts.vue

Vue.component('charts', require('./Components/Views/Demo/UI/Charts/Charts').default);

Step 5: Add the link for the charts view in the sidebar

Add an associative array in the 'app/Http/Composer/SidebarComposer.php' file to your preferred module in the $menu array, here we are adding it to the UI elements module

[
    'id' => 'ui',
    'icon' => 'trello',
    'name' => trans('custom.ui_elements'),
    'permission' => authorize_any([
            'view_ui_avatar', 'view_ui_badges_pill', 'view_buttons', 'view_cards',
            'view_checkboxes_radios', 'view_error_notes', 'view_icons', 'view_modals', 'view_nothing_to_show', 'view_tabs',
    ]),
    'subMenu' => [
        // Add this associative array to this subMenu property
     	[
            'name' => trans('custom.charts'), // i18n
            'url' => request()->root() . '/charts',
            'permission' => auth()->user()->can('view_charts'),
        ]
    ],
],

Step 6: Update the lang files for i18n

Add "'charts' => 'Charts'" in the 'resources/lang/en/custom

Development Guide