Laravel+VueJS

build.txt

1. Fetch update on staging branch (Frontend+Backend)
git checkout staging
git pull origin staging

2. Change .env (Frontend)
For Live:
VUE_APP_SRC_URL=https://admin.catholicconnect.cloud/

For Staging:
VUE_APP_SRC_URL=https://cpanel.staging.catholicconnect.app/

3. Create a build, on Frontend repository
npm run build

4. Copy all the content of dist directory generated after executing step #3 (Frontend)
5. Paste it to the public folder of Backend repository

6. Upload/Update staging branch (Backend)
git add .
git commit -am " "
git push -u origin staging

ES-6.info

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

filters-vue.info

import Vue from 'vue'
Vue.use(require('vue-moment'));

Vue.filter('filterName', function (value) {
  
  return value
  
})

{{ var | filterName }}

Example:

Vue.filter('cleanUrl', function (value) {
    if (!value) return ''
    value = value.toLowerCase().trim(value)
    value = value.replace('http://',"");
    value = value.replace('https://',"");
    value = value.split('/')[0]
    return value;
});

{{ item.url | cleanUrl }}

         

gist.txt

git remote add origin https://wolfsyntax@bitbucket.org/wolfsyntax/delivery-app.git
git push -u origin master

GIT-GGDEV101.info

1.FOR BACKEND+FRONTEND
git checkout staging
git pull origin staging

2. FOR FRONTEND
npm run build

NOTE: After build, a dist directory is generated; Copy all the contents of dist directory to public directory of BACKEND

3. FOR BACKEND
git add .
git commit -am " #<Sprint#> YYYY-MM-DD #<Version>"
git push origin staging


UPDATE FOR SERVER
Admin Panel: 3.87.108.205
via Terminal
sudo ssh -i catholicconnect-keys.pem ubuntu@3.87.108.205

via PuTTY
1. Open PuTTYgen then convert *.pem file to *.ppk file
2. Session:
-Host name: 3.87.108.205
-port: 22 

3. SSH > Auth > Then import the Private key file for authentication

cd /var/www/<directory name>

- Admin Panel (staging) : adminpanel
- Admin Panel (live): catholicconnect-adminpanel

sudo chmod 777 .

Execute, ONCE ONLY (If didn't add your repository link and please check first if the alias is available):
To check:
git remote -v

To add you repo link
sudo git remote add <alias> https://<Your Username>@bitbucket.org/teamcatholicconnect/catholicconnect-adminpanel.git
sudo git pull <alias> staging

laravel-scratch.txt

> Installation
A. Installing Laravel
composer global require laravel/installer

Make sure to place Composer's system-wide vendor bin directory in your $PATH so the laravel executable can be located by your system. 
This directory exists in different locations based on your operating system

%USERPROFILE%\AppData\Roaming\Composer\vendor\bin

laravel new blog

B. Using Laravel without installing

composer create-project --prefer-dist laravel/laravel blog

> Local Development Server
If you have PHP installed locally and you would like to use PHP's built-in development server to serve your application, you may use the serve Artisan command. 
This command will start a development server at http://localhost:8000:

php artisan serve

laravel-vue-guide-v2.info

npm install --global vue-cli

vue init webpack my-new-app

BACKEND
npm install

npm install laravel-mix --save-dev

> webpack.mix.js
const mix = require('laravel-mix');

module.exports = {
    mode: 'local'
}

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/white/white-dashboard.scss', 'public/white/css')
.options({
        processCssUrls: false
});


npm run dev
npm install vue-template-compiler --save-dev --production=false

laravel-vue-guide.info

> resources/assets/js/components/*
- Component's path

> resources/assets/js/app.js

window.Vue = require('vue');

import App from './App.vue';

const app = new Vue({
  el: '#app',
  components: {
    App
  },
  render: h => h(App)
});


> resources/assets/js/components/App.vue

<template>
  <div id="app">
  
  </div>
</template>

mongoDB-1.info

var user = db.user.findOne({"id" : "001"}, {"friends": 1})
db.user.find( {"id" : {$in : user.friends }}).sort("age" : 1);

mongoDB.info

$users = User::all();

RETRIEVE VIA PRIMARY KEY
$user = User::find('517c43667db388101e00000f');

WHERE
$posts = Post::where('author.name', 'John')->take(10)->get();

OR Statement
$posts = Post::where('votes', '>', 0)->orWhere('is_approved', true)->get();

AND Statement
$users = User::where('age', '>', 18)->where('name', '!=', 'John')->get();  

WHERE IN Statement

$users = User::whereIn('age', [16, 18, 20])->get();

WHERE BETWEEN

$posts = Post::whereBetween('votes', [1, 100])->get();

WHERE NULL

$users = User::whereNull('age')->get();

Advanced WHEREs 

$users = User::where('name', 'John')->orWhere(function ($query) { 
  return $query->where('votes', '>', 100)->where('title', '<>', 'Admin');
})->get();

packages.info

npm install --save
  vue-youtube-embed
  

php-101.info

$obj_merged = (object) array_merge((array) $obj1, (array) $obj2);

server101.txt

sudo nano /etc/crontab

* * * * * root /usr/bin/7.2 /var/www/adminpanel/artisan schedule:run 1>> /dev/null 2>&1
* * * * * root /usr/bin/7.2 /var/www/catholicconnect-adminpanel/artisan schedule:run 1>> /dev/null 2>&1

solution.txt

Problem: After refresh, the URL results to page not found and only backend routes is recognized
Solution: 
Route::any( '/{any?}/{any2?}', function() {
  return File::get(public_path() . '/index.html');
});
Route::get('/{vue_capture?}', function () {
  return File::get(public_path() . '/index.html');
})->where('vue_capture', '[\/\w\.-]*');


Reset to specific commit

git reset --hard <commitID>
git reset --soft <commitID>

Can't push
git push -f origin <branch>

v-data-table.props

<v-data-table v-model="selected" :headers="headers" :items="parish" :search="search"
    :loading="loading" hide-default-footer :header-props="{ sortIcon: 'arrow_upward' }"
    class="elevation-1" show-select :single-select="singleSelect" item-key="_id">
  
    <template v-slot:top>
        <v-row justify="end" align="end">
            <v-col sm="4">
                <v-text-field v-model="search" append-icon="search" label="Search" hide-details @input="onSearchChange"></v-text-field>
            </v-col>
        </v-row>
        
        <v-divider></v-divider>
    </template>  

    <v-progress-linear v-slot:progress color="blue" indeterminate v-show="loading"></v-progress-linear>
      
    <template #header.action > ACTION  <v-icon small class="btn">settings</v-icon></template>

    <template v-slot:item.name="{ item }">
        <router-link :to="{ name: 'parish-show', params: { id: item._id } }"><span class="fontSize">{{ item.name }}</span></router-link>
    </template>

    <template v-slot:item.image="{ item }">
        <v-avatar size="42">
            <img :src="item.profilePhoto ? item.profilePhoto : defaultImage" @error="imageUrlAlt" />
        </v-avatar>
    </template>

    <template v-slot:item.date="{ item }">
        <span class="fontSize">{{ item.createdAt | moment("MMMM DD, YYYY") }}</span>
    </template>

    <template v-slot:item.website="{ item }">
        <span class="fontSize">{{ item.url | cleanUrl }}</span>
        <span v-show="!item.url">-</span>
    </template>

    <template v-slot:item.action="{ item }">
        <router-link :to="{ name: 'parish-edit', params: { id: item._id } }"><feather type="edit" class="btn btn-transparent text-primary mx-1" size="16" ></feather></router-link>
        <feather type="trash-2" class="btn btn-transparent text-danger mx-1" size="16" @click="activePrompt = true, itemKey = item, id=item._id "></feather>
    </template>

    <template v-slot:header>
        <vs-prompt @cancel="val=''" @accept="deleteParish(itemKey, id)" @close="close" :active.sync="activePrompt" title="Delete Parish" color="danger" accept-text="Delete">
            <div class="con-exemple-prompt">
                <span>Are you sure you want to delete this?</span>
            </div>
        </vs-prompt>
    </template>
      
    <template v-slot:footer>
        <v-pagination v-model="pagination.current" :length="pagination.total" @input="onPageChange" next-icon="chevron_right" prev-icon="chevron_left" :total-visible="7">
        </v-pagination>
    </template>
  
</v-data-table>

vuejs101.txt

this.$vs.loading()
this.$vs.loading.close()