update code
This commit is contained in:
manhlab
32
resources/js/app.js
Normal file
32
resources/js/app.js
Normal file
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* First we will load all of this project's JavaScript dependencies which
|
||||
* includes Vue and other libraries. It is a great starting point when
|
||||
* building robust, powerful web applications using Vue and Laravel.
|
||||
*/
|
||||
|
||||
require('./bootstrap');
|
||||
|
||||
window.Vue = require('vue');
|
||||
|
||||
/**
|
||||
* The following block of code may be used to automatically register your
|
||||
* Vue components. It will recursively scan this directory for the Vue
|
||||
* components and automatically register them with their "basename".
|
||||
*
|
||||
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
|
||||
*/
|
||||
|
||||
// const files = require.context('./', true, /\.vue$/i)
|
||||
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
|
||||
|
||||
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
|
||||
|
||||
/**
|
||||
* Next, we will create a fresh Vue application instance and attach it to
|
||||
* the page. Then, you may begin adding components to this application
|
||||
* or customize the JavaScript scaffolding to fit your unique needs.
|
||||
*/
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
});
|
||||
43
resources/js/bootstrap.js
vendored
Normal file
43
resources/js/bootstrap.js
vendored
Normal file
@@ -0,0 +1,43 @@
|
||||
window._ = require('lodash');
|
||||
|
||||
/**
|
||||
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
|
||||
* for JavaScript based Bootstrap features such as modals and tabs. This
|
||||
* code may be modified to fit the specific needs of your application.
|
||||
*/
|
||||
|
||||
try {
|
||||
window.Popper = require('popper.js').default;
|
||||
window.$ = window.jQuery = require('jquery');
|
||||
|
||||
require('bootstrap');
|
||||
} catch (e) {}
|
||||
|
||||
/**
|
||||
* We'll load the axios HTTP library which allows us to easily issue requests
|
||||
* to our Laravel back-end. This library automatically handles sending the
|
||||
* CSRF token as a header based on the value of the "XSRF" token cookie.
|
||||
*/
|
||||
|
||||
window.axios = require('axios');
|
||||
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
|
||||
axios.defaults.withCredentials = true;
|
||||
|
||||
/**
|
||||
* Echo exposes an expressive API for subscribing to channels and listening
|
||||
* for events that are broadcast by Laravel. Echo and event broadcasting
|
||||
* allows your team to easily build robust real-time web applications.
|
||||
*/
|
||||
|
||||
// import Echo from 'laravel-echo';
|
||||
|
||||
// window.Pusher = require('pusher-js');
|
||||
|
||||
// window.Echo = new Echo({
|
||||
// broadcaster: 'pusher',
|
||||
// key: process.env.MIX_PUSHER_APP_KEY,
|
||||
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
|
||||
// forceTLS: true
|
||||
// });
|
||||
23
resources/js/components/ExampleComponent.vue
Normal file
23
resources/js/components/ExampleComponent.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">Example Component</div>
|
||||
|
||||
<div class="card-body">
|
||||
I'm an example component.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
console.log('Component mounted.')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
14
resources/js/src/App.vue
Normal file
14
resources/js/src/App.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// Import Main styles for this application
|
||||
@import 'assets/scss/style';
|
||||
</style>
|
||||
0
resources/js/src/assets/.gitkeep
Normal file
0
resources/js/src/assets/.gitkeep
Normal file
221
resources/js/src/assets/icons/icons.js
Normal file
221
resources/js/src/assets/icons/icons.js
Normal file
@@ -0,0 +1,221 @@
|
||||
import {
|
||||
cibFacebook,
|
||||
cibTwitter,
|
||||
cibLinkedin,
|
||||
cibFlickr,
|
||||
cibTumblr,
|
||||
cibXing,
|
||||
cibGithub,
|
||||
cibStackOverflow,
|
||||
cibYoutube,
|
||||
cibDribbble,
|
||||
cibInstagram,
|
||||
cibPinterest,
|
||||
cibVk,
|
||||
cibYahoo,
|
||||
cibBehance,
|
||||
cibReddit,
|
||||
cibVimeo,
|
||||
cibCcMastercard,
|
||||
cibCcVisa,
|
||||
cibStripe,
|
||||
cibPaypal,
|
||||
cibGooglePay,
|
||||
cibCcAmex
|
||||
} from '@coreui/icons'
|
||||
import {
|
||||
cifUs,
|
||||
cifBr,
|
||||
cifIn,
|
||||
cifFr,
|
||||
cifEs,
|
||||
cifPl
|
||||
} from '@coreui/icons'
|
||||
import {
|
||||
cilArrowRight,
|
||||
cilBan,
|
||||
cilBasket,
|
||||
cilBell,
|
||||
cilCalculator,
|
||||
cilCalendar,
|
||||
cilCloudDownload,
|
||||
cilChartPie,
|
||||
cilCheck,
|
||||
cilChevronBottom,
|
||||
cilChevronTop,
|
||||
cilCheckCircle,
|
||||
cilCommentSquare,
|
||||
cilCursor,
|
||||
cilDrop,
|
||||
cilDollar,
|
||||
cilEnvelopeClosed,
|
||||
cilEnvelopeOpen,
|
||||
cilEuro,
|
||||
cilGlobeAlt,
|
||||
cilGrid,
|
||||
cilFile,
|
||||
cilJustifyCenter,
|
||||
cilLaptop,
|
||||
cilLayers,
|
||||
cilLightbulb,
|
||||
cilList,
|
||||
cilLocationPin,
|
||||
cilLockLocked,
|
||||
cilMagnifyingGlass,
|
||||
cilMoon,
|
||||
cilOptions,
|
||||
cilPencil,
|
||||
cilPeople,
|
||||
cilPuzzle,
|
||||
cilSettings,
|
||||
cilShieldAlt,
|
||||
cilSpeech,
|
||||
cilSpeedometer,
|
||||
cilStar,
|
||||
cilTask,
|
||||
cilUser,
|
||||
cilUserFemale,
|
||||
cilUserFollow,
|
||||
cilXCircle,
|
||||
cilDescription,
|
||||
cilShortText,
|
||||
cilAddressBook,
|
||||
cilSitemap,
|
||||
cilContact,
|
||||
cilTextSquare,
|
||||
cilBook,
|
||||
cilBuilding,
|
||||
cilListRich,
|
||||
cilLibrary,
|
||||
cilIndentDecrease,
|
||||
cilIndentIncrease,
|
||||
cilChevronLeft,
|
||||
cilLan,
|
||||
cilTouchApp,
|
||||
cilInstitution,
|
||||
cilTextSize,
|
||||
cilNotes,
|
||||
cilMedicalCross,
|
||||
cilRemove,
|
||||
cilCloudUpload,
|
||||
cilPlus,
|
||||
cilVerticalAlignBottom,
|
||||
cilVerticalAlignTop,
|
||||
cilHome,
|
||||
cilX,
|
||||
cilPowerStandby,
|
||||
|
||||
} from '@coreui/icons'
|
||||
import { logo } from './logo'
|
||||
|
||||
export const iconsSet = Object.assign(
|
||||
{},
|
||||
{ logo },
|
||||
{
|
||||
cilPowerStandby,
|
||||
cilX,
|
||||
cilHome,
|
||||
cilVerticalAlignTop,
|
||||
cilVerticalAlignBottom,
|
||||
cilPlus,
|
||||
cilCloudUpload,
|
||||
cilRemove,
|
||||
cilMedicalCross,
|
||||
cilNotes,
|
||||
cilTextSize,
|
||||
cilInstitution,
|
||||
cilTouchApp,
|
||||
cilLan,
|
||||
cilChevronLeft,
|
||||
cilArrowRight,
|
||||
cilBan,
|
||||
cilBasket,
|
||||
cilBell,
|
||||
cilCalculator,
|
||||
cilCalendar,
|
||||
cilCloudDownload,
|
||||
cilChartPie,
|
||||
cilCheck,
|
||||
cilChevronBottom,
|
||||
cilChevronTop,
|
||||
cilCheckCircle,
|
||||
cilCommentSquare,
|
||||
cilCursor,
|
||||
cilDrop,
|
||||
cilDollar,
|
||||
cilEnvelopeClosed,
|
||||
cilEnvelopeOpen,
|
||||
cilEuro,
|
||||
cilGlobeAlt,
|
||||
cilGrid,
|
||||
cilFile,
|
||||
cilJustifyCenter,
|
||||
cilLaptop,
|
||||
cilLayers,
|
||||
cilLightbulb,
|
||||
cilList,
|
||||
cilLocationPin,
|
||||
cilLockLocked,
|
||||
cilMagnifyingGlass,
|
||||
cilMoon,
|
||||
cilOptions,
|
||||
cilPencil,
|
||||
cilPeople,
|
||||
cilPuzzle,
|
||||
cilSettings,
|
||||
cilShieldAlt,
|
||||
cilSpeech,
|
||||
cilSpeedometer,
|
||||
cilStar,
|
||||
cilTask,
|
||||
cilUser,
|
||||
cilUserFemale,
|
||||
cilUserFollow,
|
||||
cilXCircle,
|
||||
cilDescription,
|
||||
cilShortText,
|
||||
cilAddressBook,
|
||||
cilSitemap,
|
||||
cilContact,
|
||||
cilTextSquare,
|
||||
cilBook,
|
||||
cilBuilding,
|
||||
cilListRich,
|
||||
cilLibrary,
|
||||
cilIndentDecrease,
|
||||
cilIndentIncrease
|
||||
},
|
||||
{
|
||||
cifUs,
|
||||
cifBr,
|
||||
cifIn,
|
||||
cifFr,
|
||||
cifEs,
|
||||
cifPl
|
||||
},
|
||||
{
|
||||
cibFacebook,
|
||||
cibTwitter,
|
||||
cibLinkedin,
|
||||
cibFlickr,
|
||||
cibTumblr,
|
||||
cibXing,
|
||||
cibGithub,
|
||||
cibStackOverflow,
|
||||
cibYoutube,
|
||||
cibDribbble,
|
||||
cibInstagram,
|
||||
cibPinterest,
|
||||
cibVk,
|
||||
cibYahoo,
|
||||
cibBehance,
|
||||
cibReddit,
|
||||
cibVimeo,
|
||||
cibCcMastercard,
|
||||
cibCcVisa,
|
||||
cibStripe,
|
||||
cibPaypal,
|
||||
cibGooglePay,
|
||||
cibCcAmex
|
||||
}
|
||||
)
|
||||
29
resources/js/src/assets/icons/logo.js
Normal file
29
resources/js/src/assets/icons/logo.js
Normal file
@@ -0,0 +1,29 @@
|
||||
// Example of SVG converted to js array, so it can be used with CIcon.
|
||||
// the first argument is two last values of svg viewBox,
|
||||
// the second argument is the SVG content stripped of SVG tags
|
||||
export const logo = ['556 134',`
|
||||
<g>
|
||||
<g style="fill:#1bbd93;">
|
||||
<path d="M347.9818,90.0869l-11.84-43.52-.0644-.1924q0-.5112.6406-.5117h1.2793a.66.66,0,0,1,.7051.5762l10.623,39.68c.042.0859.0859.1279.1289.1279.041,0,.084-.042.127-.1279l10.625-39.68a.657.657,0,0,1,.7031-.5762h1.2168a.54.54,0,0,1,.5762.7041l-11.9043,43.52a.6584.6584,0,0,1-.7041.5761h-1.4082A.6577.6577,0,0,1,347.9818,90.0869Z"/>
|
||||
<path d="M382.2786,89.5751a10.9023,10.9023,0,0,1-4.3515-4.5439,14.4586,14.4586,0,0,1-1.5362-6.7842V46.5029a.5656.5656,0,0,1,.64-.64h1.2168a.5659.5659,0,0,1,.64.64v32a10.5488,10.5488,0,0,0,2.72,7.5527,10.36,10.36,0,0,0,14.3359,0,10.5493,10.5493,0,0,0,2.7207-7.5527v-32a.5655.5655,0,0,1,.64-.64h1.2159a.5666.5666,0,0,1,.6406.64V78.247a13.01,13.01,0,0,1-3.3926,9.376,11.8974,11.8974,0,0,1-9.0234,3.5527A12.8481,12.8481,0,0,1,382.2786,89.5751Z"/>
|
||||
<path d="M439.5843,48.1035H419.5521a.2263.2263,0,0,0-.2559.2558V66.8554a.2259.2259,0,0,0,.2559.2559h13.8242a.5665.5665,0,0,1,.6406.64v.96a.5665.5665,0,0,1-.6406.6406H419.5521a.2263.2263,0,0,0-.2559.2559v18.56a.2259.2259,0,0,0,.2559.2559h20.0322a.5665.5665,0,0,1,.64.6406v.96a.5655.5655,0,0,1-.64.64H417.4407a.5654.5654,0,0,1-.6406-.64v-43.52a.5658.5658,0,0,1,.6406-.64h22.1436a.5659.5659,0,0,1,.64.64v.96A.5658.5658,0,0,1,439.5843,48.1035Z"/>
|
||||
<path d="M454.5921,89.5117a2.8385,2.8385,0,0,1-.8-2.0489,2.9193,2.9193,0,0,1,.8-2.1113,2.7518,2.7518,0,0,1,2.0791-.832,2.8465,2.8465,0,0,1,2.9443,2.9433,2.7561,2.7561,0,0,1-.832,2.08,2.9208,2.9208,0,0,1-2.1123.8008A2.7521,2.7521,0,0,1,454.5921,89.5117Z"/>
|
||||
<path d="M474.931,88.0078a11.3087,11.3087,0,0,1-3.2-8.4161v-5.44a.5655.5655,0,0,1,.64-.64h1.2158a.5662.5662,0,0,1,.6407.64v5.5039a9.1421,9.1421,0,0,0,2.5283,6.72,8.9734,8.9734,0,0,0,6.6875,2.5606,8.7916,8.7916,0,0,0,9.28-9.28V46.5029a.5655.5655,0,0,1,.64-.64h1.2158a.5656.5656,0,0,1,.64.64V79.5917a11.2541,11.2541,0,0,1-3.2315,8.4161,13.0621,13.0621,0,0,1-17.0556,0Z"/>
|
||||
<path d="M512.8753,88.1035a10.4847,10.4847,0,0,1-3.36-8.128v-1.792a.5665.5665,0,0,1,.6406-.6406h1.0879a.5666.5666,0,0,1,.64.6406v1.6a8.5461,8.5461,0,0,0,2.752,6.6563,10.5361,10.5361,0,0,0,7.36,2.4961,9.8741,9.8741,0,0,0,6.9766-2.3682,8.2188,8.2188,0,0,0,2.56-6.3359,8.3952,8.3952,0,0,0-1.12-4.416,11.3752,11.3752,0,0,0-3.3281-3.3926,71.6866,71.6866,0,0,0-6.1758-3.7119,71.0151,71.0151,0,0,1-6.24-3.84,12.1824,12.1824,0,0,1-3.4238-3.68,10.2659,10.2659,0,0,1-1.28-5.3437,9.86,9.86,0,0,1,3.0723-7.7441,12.0126,12.0126,0,0,1,8.3193-2.752q5.6969,0,8.9609,3.1035a10.8247,10.8247,0,0,1,3.2637,8.2246v1.6a.5658.5658,0,0,1-.6406.64h-1.1514a.5651.5651,0,0,1-.64-.64V56.8076a8.8643,8.8643,0,0,0-2.6241-6.6885,9.9936,9.9936,0,0,0-7.2324-2.5274,9.37,9.37,0,0,0-6.5283,2.1436,7.8253,7.8253,0,0,0-2.3672,6.1123,7.8088,7.8088,0,0,0,1.0235,4.16,10.3978,10.3978,0,0,0,3.0078,3.039,63.0249,63.0249,0,0,0,5.9521,3.4883,70.7955,70.7955,0,0,1,6.72,4.2559,13.4613,13.4613,0,0,1,3.6485,3.9365,10.044,10.044,0,0,1,1.28,5.1836,10.7185,10.7185,0,0,1-3.2647,8.1924q-3.2637,3.0717-8.832,3.0722Q516.2342,91.1757,512.8753,88.1035Z"/>
|
||||
</g>
|
||||
<g style="fill:currentColor;">
|
||||
<g>
|
||||
<path d="M99.367,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0337,12.0337,0,0,0-6,10.3924V91.4833a12.0331,12.0331,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0333,12.0333,0,0,0,6-10.3923V46.45A12.0336,12.0336,0,0,0,99.367,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
|
||||
<path d="M77.3886,82.0046h-2.866a4.0007,4.0007,0,0,0-1.9247.4934L55.3172,91.9833,35.367,80.4648V57.4872l19.95-11.5185L72.606,55.4236a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.16,38.9521a8.0389,8.0389,0,0,0-7.8427.09L31.3665,50.56a8.0245,8.0245,0,0,0-3.9995,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0427,8.0427,0,0,0,7.8432.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.3886,82.0046Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M172.1117,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0167,15.0167,0,0,0,172.1117,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
|
||||
<path d="M135.4458,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9892.9892,0,0,0,.9842.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7161-13.8837A15.2881,15.2881,0,0,0,121.367,60.7968V77.2037A15.288,15.288,0,0,0,135.6112,92.62a15.0182,15.0182,0,0,0,15.7161-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9892.9892,0,0,0-.9842.865,7.0106,7.0106,0,0,1-7.868,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.4458,53.4211Z"/>
|
||||
<path d="M218.2891,72.9277a12.1584,12.1584,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.324,46H196.367a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6215l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5912a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.3245,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
|
||||
<path d="M260.367,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.367,46Z"/>
|
||||
<path d="M298.367,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.367,46Z"/>
|
||||
<rect x="307.367" y="46" width="8" height="38" rx="1"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
`]
|
||||
1
resources/js/src/assets/scss/_custom.scss
Normal file
1
resources/js/src/assets/scss/_custom.scss
Normal file
@@ -0,0 +1 @@
|
||||
// Here you can add other styles
|
||||
1
resources/js/src/assets/scss/_variables.scss
Normal file
1
resources/js/src/assets/scss/_variables.scss
Normal file
@@ -0,0 +1 @@
|
||||
// Variable overrides
|
||||
17
resources/js/src/assets/scss/style.scss
Normal file
17
resources/js/src/assets/scss/style.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
// If you want to override variables do it here
|
||||
@import "variables";
|
||||
|
||||
// Import styles
|
||||
@import "~@coreui/coreui/scss/coreui";
|
||||
|
||||
// If you want to add something do it here
|
||||
@import "custom";
|
||||
|
||||
.card-header:not(.content-center) > .c-icon:first-child {
|
||||
margin-right: 0.1rem;
|
||||
margin-top: 0.1rem;
|
||||
vertical-align: top;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
64
resources/js/src/components/SearchBox.vue
Normal file
64
resources/js/src/components/SearchBox.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol sm="3">
|
||||
<CSelect :options="fields" @update:value="fieldChanged" />
|
||||
</CCol>
|
||||
<CCol sm="9">
|
||||
<CInput placeholder="Tìm kiếm" :value.sync="value" @update:value="valueChanged" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SearchBox",
|
||||
props: {
|
||||
fields: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [{ value: "", label: "Tất cả" }];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
field: String,
|
||||
value: "",
|
||||
searching: {},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
field: {
|
||||
handler(value) {
|
||||
this.$emit("fieldChanged", value);
|
||||
this.value = value.defaultValue;
|
||||
this.fireSearching();
|
||||
},
|
||||
},
|
||||
value: {
|
||||
handler(value) {
|
||||
this.$emit("valueChanged", value);
|
||||
this.fireSearching();
|
||||
},
|
||||
},
|
||||
searching: {
|
||||
handler(value) {
|
||||
this.$emit("searching", value);
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fieldChanged(field) {
|
||||
this.field = this.fields.find((e) => {
|
||||
return e.value == field;
|
||||
});
|
||||
},
|
||||
valueChanged(value) {
|
||||
this.value = value;
|
||||
},
|
||||
fireSearching(){
|
||||
this.searching = {field: this.field.value, value: this.value};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
129
resources/js/src/components/document/Attachments.vue
Normal file
129
resources/js/src/components/document/Attachments.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Tệp đính kèm</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDataTable :loading="loading" :items="attachments" :fields="fields">
|
||||
<template #id="{item, index}">
|
||||
<td>
|
||||
<CButton size="sm" @click="downloadAttachment(item)" variant="outline" color="primary">
|
||||
<CIcon name="cil-cloud-download" />
|
||||
</CButton>
|
||||
<CButton
|
||||
size="sm"
|
||||
@click="deleteAttachment(item.id, index)"
|
||||
variant="outline"
|
||||
color="danger"
|
||||
>
|
||||
<CIcon name="cil-remove" />
|
||||
</CButton>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
<CInputFile custom v-on:change="handleFileUpload" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
|
||||
export default {
|
||||
name: "Attachments",
|
||||
props: {
|
||||
documentId: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
fields: [
|
||||
{ key: "name", label: "Tên", _classes: "w-50" },
|
||||
{ key: "size", label: "Kích thước (KB)" },
|
||||
{ key: "downloads", label: "Lượt tải" },
|
||||
{ key: "id", label: "Hành động" }
|
||||
],
|
||||
attachments: [
|
||||
{
|
||||
id: "",
|
||||
name: "",
|
||||
size: 0,
|
||||
downloads: 0
|
||||
}
|
||||
],
|
||||
file: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
documentId: {
|
||||
handler() {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.fetch();
|
||||
},
|
||||
async fetch() {
|
||||
const attachmentResponse = await services.attachment.all({
|
||||
search: `document_id:${this.documentId}`
|
||||
});
|
||||
this.attachments = this.formatKeys(attachmentResponse.data, {
|
||||
id: "id",
|
||||
name: "name"
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
downloadAttachment(item) {
|
||||
services.attachment
|
||||
.download(item.id, item.name)
|
||||
.then(response => {
|
||||
item.downloads++;
|
||||
this.$toast.success("Đã tải xuống");
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
deleteAttachment(id, index) {
|
||||
services.attachment
|
||||
.delete(id)
|
||||
.then(response => {
|
||||
this.attachments.splice(index, 1);
|
||||
this.$toast.success("Đã xóa");
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
handleFileUpload(files, e) {
|
||||
this.file = files[0];
|
||||
this.uploadAttachment();
|
||||
},
|
||||
uploadAttachment() {
|
||||
let formData = new FormData();
|
||||
formData.append("attachments", this.file);
|
||||
formData.append("document_id", this.documentId);
|
||||
services.attachment
|
||||
.create(formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data"
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.attachments.push(response.data);
|
||||
this.$toast.success("Đã tải lên");
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
157
resources/js/src/components/document/CLinkDocument.vue
Normal file
157
resources/js/src/components/document/CLinkDocument.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Văn bản liên kết</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="form-group">
|
||||
<CCol v-if="isOutcome" sm="12">
|
||||
<label>Văn bản đến</label>
|
||||
<treeselect
|
||||
v-model="linkToDocument"
|
||||
:multiple="false"
|
||||
:options="documents"
|
||||
@search-change="fetchDocuments"
|
||||
@select="linkTo"
|
||||
@input="unLinkTo"
|
||||
>
|
||||
<div
|
||||
slot="option-label"
|
||||
slot-scope="{ node }"
|
||||
>{{ node.raw.label + ' - ' + node.raw.abstract || getSymbol(node.raw.id) }}</div>
|
||||
</treeselect>
|
||||
</CCol>
|
||||
<CCol v-else sm="12">
|
||||
<label>Danh sách đã liên kết</label>
|
||||
<treeselect
|
||||
v-model="documentsLinked"
|
||||
:options="linkedDocuments"
|
||||
:multiple="true"
|
||||
:openOnClick="false"
|
||||
:clearable="false"
|
||||
disabled
|
||||
placeholder
|
||||
>
|
||||
<CButton
|
||||
@click="redirectToDocument(node.raw.id)"
|
||||
class="btn-link p-0"
|
||||
slot="value-label"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
slot-scope="{ node }"
|
||||
>{{ node.raw.label }}</CButton>
|
||||
</treeselect>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
|
||||
// import the component
|
||||
import { Treeselect, ASYNC_SEARCH } from "@riophae/vue-treeselect";
|
||||
// import the styles
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "CLinkDocument",
|
||||
props: {
|
||||
documentId: {
|
||||
required: true
|
||||
},
|
||||
isOutcome: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
// define the default value
|
||||
linkToDocument: null,
|
||||
documentsLinked: [],
|
||||
// define options
|
||||
documents: [],
|
||||
linkedDocuments: [],
|
||||
document: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
documentId: {
|
||||
handler() {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.fetchDocuments();
|
||||
this.fetchDocument();
|
||||
},
|
||||
async fetchDocument() {
|
||||
const documentResponse = await services.document.get(this.documentId, {
|
||||
with: "linkTo;linked"
|
||||
});
|
||||
this.document = documentResponse.data;
|
||||
this.linkToDocument = this.document.link_to
|
||||
? this.document.link_to.id
|
||||
: null;
|
||||
this.documents.push(this.linkToDocument);
|
||||
this.linkedDocuments = this.formatKeys(this.document.linked, {
|
||||
id: "id",
|
||||
symbol: "label"
|
||||
});
|
||||
this.documentsLinked = this.document.linked.map(d => d.id);
|
||||
},
|
||||
fetchDocuments(query = "") {
|
||||
const documentsResponse = services.document
|
||||
.all({ search: `symbol:${query};book_id:1`, searchJoin: "and", orderBy: "created_at", sortedBy: "desc", })
|
||||
.then(response => {
|
||||
const documents = this.formatKeys(response.data.data, {
|
||||
id: "id",
|
||||
symbol: "label"
|
||||
});
|
||||
this.documents = documents;
|
||||
});
|
||||
},
|
||||
getSymbol(id) {
|
||||
this.fetchSymbol(id);
|
||||
return "Không có quyền truy cập";
|
||||
},
|
||||
async fetchSymbol(id) {
|
||||
const response = await services.document.get(id);
|
||||
if (!response.data.id) return;
|
||||
const document = {
|
||||
id: response.data.id,
|
||||
label: response.data.symbol
|
||||
};
|
||||
if (this.documents.map(item => item.id).includes(document.id)) return;
|
||||
this.documents.push(document);
|
||||
},
|
||||
linkTo(document) {
|
||||
services.document
|
||||
.update({ link_id: document.id }, this.documentId)
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
unLinkTo(document) {
|
||||
if(document === undefined){
|
||||
services.document
|
||||
.update({ link_id: null }, this.documentId)
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
redirectToDocument(id) {
|
||||
this.$emit("redirectTo", id);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
305
resources/js/src/components/document/Detail.vue
Normal file
305
resources/js/src/components/document/Detail.vue
Normal file
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong v-if="documentId">Chi tiết văn bản</strong>
|
||||
<strong v-else>Tạo văn bản</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CSelect
|
||||
class="mb-0"
|
||||
label="Sổ văn bản"
|
||||
:options="books"
|
||||
:value.sync="document.book_id"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CFormGroup class="form-group mb-0">
|
||||
<template #label>
|
||||
<slot name="label">
|
||||
<label>Loại văn bản</label>
|
||||
</slot>
|
||||
</template>
|
||||
<template #input>
|
||||
<treeselect
|
||||
v-model="document.type_id"
|
||||
:multiple="false"
|
||||
:options="types"
|
||||
:clearable="false"
|
||||
></treeselect>
|
||||
</template>
|
||||
</CFormGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="12">
|
||||
<CInput label="Số ký hiệu" :value.sync="document.symbol" class="mb-0" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CFormGroup class="form-group mb-0">
|
||||
<template #label>
|
||||
<slot name="label">
|
||||
<label>Người soạn</label>
|
||||
</slot>
|
||||
</template>
|
||||
<template #input>
|
||||
<treeselect
|
||||
v-model="document.writer_id"
|
||||
:multiple="false"
|
||||
:options="writers"
|
||||
@search-change="fetchWriters"
|
||||
@input="onClearWriter"
|
||||
>
|
||||
<label
|
||||
slot="option-label"
|
||||
slot-scope="{ node }"
|
||||
>{{ node.raw.department ? node.raw.label + ' - ' + node.raw.department.name : node.raw.label }}</label>
|
||||
</treeselect>
|
||||
</template>
|
||||
</CFormGroup>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CInput label="Người tạo" :value="document.creator.name" readonly class="mb-0" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CTextarea
|
||||
label="Trích yếu"
|
||||
placeholder="Content..."
|
||||
rows="5"
|
||||
:value.sync="document.abstract"
|
||||
/>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CFormGroup class="form-group mb-0">
|
||||
<template #label>
|
||||
<slot name="label">
|
||||
<label>Nơi ban hành</label>
|
||||
</slot>
|
||||
</template>
|
||||
<template #input>
|
||||
<treeselect
|
||||
v-model="document.publisher_id"
|
||||
:multiple="false"
|
||||
:options="publishers"
|
||||
:clearable="false"
|
||||
></treeselect>
|
||||
</template>
|
||||
</CFormGroup>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CInput
|
||||
:label="isIncome ? 'Ngày nhận' : 'Ngày ban hành'"
|
||||
type="date"
|
||||
:value.sync="document.effective_at"
|
||||
class="mb-0"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CFormGroup class="form-group mb-0">
|
||||
<template #label>
|
||||
<slot name="label">
|
||||
<label>Người ký</label>
|
||||
</slot>
|
||||
</template>
|
||||
<template #input>
|
||||
<treeselect
|
||||
v-model="document.signer_id"
|
||||
:multiple="false"
|
||||
:options="signers"
|
||||
:clearable="false"
|
||||
>
|
||||
<label
|
||||
slot="option-label"
|
||||
slot-scope="{ node }"
|
||||
>{{ node.raw.description ? node.raw.label + ' - ' + node.raw.description : node.raw.label }}</label>
|
||||
</treeselect>
|
||||
</template>
|
||||
</CFormGroup>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CInput label="Ngày ký" type="date" :value.sync="document.sign_at" class="mb-0" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton
|
||||
v-if="documentId"
|
||||
size="sm"
|
||||
@click="updateDocument"
|
||||
class="float-right"
|
||||
color="success"
|
||||
>
|
||||
<CIcon name="cil-check" />Lưu
|
||||
</CButton>
|
||||
<CButton v-else size="sm" @click="createDocument" class="float-right" color="success">
|
||||
<CIcon name="cil-plus" />Tạo
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
// import the component
|
||||
import { Treeselect } from "@riophae/vue-treeselect";
|
||||
// import the styles
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "Detail",
|
||||
props: {
|
||||
documentId: {
|
||||
required: false
|
||||
}
|
||||
},
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
books: [],
|
||||
types: [],
|
||||
signers: [],
|
||||
writers: [],
|
||||
publishers: [],
|
||||
document: {
|
||||
book_id: null,
|
||||
type_id: null,
|
||||
symbol: null,
|
||||
writer_id: null,
|
||||
abstract: null,
|
||||
publisher_id: null,
|
||||
effective_at: null,
|
||||
signer_id: null,
|
||||
sign_at: null,
|
||||
creator: {
|
||||
id: this.$store.state.auth.currentUser.id,
|
||||
name: this.$store.state.auth.currentUser.name
|
||||
},
|
||||
writer: {}
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
documentId: {
|
||||
handler() {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(route) {
|
||||
if (route.query && route.query.book) {
|
||||
this.document.book_id = Number.parseInt(route.query.book);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isIncome() {
|
||||
return this.document.book_id == 1;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
!this.documentId || this.fetchDocument();
|
||||
this.fetchTypes();
|
||||
this.fetchBooks();
|
||||
this.fetchPublishers();
|
||||
this.fetchSigners();
|
||||
this.fetchWriters();
|
||||
},
|
||||
async fetchDocument() {
|
||||
const documentResponse = await services.document.get(this.documentId, {
|
||||
with: "creator;writer"
|
||||
});
|
||||
this.document = documentResponse.data;
|
||||
return documentResponse.data;
|
||||
},
|
||||
async fetchTypes() {
|
||||
const typeResponse = await services.documentType.all();
|
||||
this.types = this.formatKeys(typeResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
return typeResponse;
|
||||
},
|
||||
async fetchBooks() {
|
||||
const bookResponse = await services.book.all();
|
||||
this.books = this.formatKeys(bookResponse.data);
|
||||
return bookResponse;
|
||||
},
|
||||
async fetchPublishers() {
|
||||
const publisherResponse = await services.publisher.all();
|
||||
this.publishers = this.formatKeys(publisherResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
return publisherResponse;
|
||||
},
|
||||
async fetchSigners() {
|
||||
const signerResponse = await services.signer.all();
|
||||
this.signers = this.formatKeys(signerResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
return signerResponse;
|
||||
},
|
||||
async fetchWriters(query = "") {
|
||||
const writersResponse = await services.user.all({
|
||||
search: `name:${query}`,
|
||||
with: "department"
|
||||
});
|
||||
this.writers = this.formatKeys(writersResponse.data.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
if (
|
||||
!this.writers.map(item => item.id).includes(this.document.writer_id) &&
|
||||
this.document.writer
|
||||
) {
|
||||
this.writers.push({
|
||||
id: this.document.writer.id,
|
||||
label: this.document.writer.name
|
||||
});
|
||||
}
|
||||
return writersResponse;
|
||||
},
|
||||
async updateDocument() {
|
||||
await services.document
|
||||
.update(this.document, this.documentId)
|
||||
.then(response => {
|
||||
this.$toast.success("Đã lưu");
|
||||
this.$emit("update", response.data);
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
createDocument() {
|
||||
services.document
|
||||
.create(this.document)
|
||||
.then(response => {
|
||||
this.$router.push({ path: `/documents/${response.data.id}` });
|
||||
this.$toast.success("Đã tạo văn bản");
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
onClearWriter(value) {
|
||||
if (value != undefined) return;
|
||||
this.document.writer_id = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
150
resources/js/src/components/document/Receivers.vue
Normal file
150
resources/js/src/components/document/Receivers.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Người nhận</strong>
|
||||
<CBadge
|
||||
color="success"
|
||||
class="float-right"
|
||||
v-c-tooltip="{ content: 'Đã xem' }"
|
||||
>{{ seenReceivers.length }}</CBadge
|
||||
>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="12">
|
||||
<!-- <label>Chọn xem</label> -->
|
||||
<treeselect
|
||||
@select="addViewer"
|
||||
@deselect="removeViewer"
|
||||
:normalizer="normalizer"
|
||||
v-model="viewers"
|
||||
:multiple="true"
|
||||
:options="viewerOptions"
|
||||
:clearable="false"
|
||||
>
|
||||
<div
|
||||
slot="value-label"
|
||||
slot-scope="{ node }"
|
||||
:class="seenStyle(node.raw.id)"
|
||||
>{{ node.raw.name }}</div>
|
||||
</treeselect>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
|
||||
// import the component
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
// import the styles
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "Receivers",
|
||||
props: {
|
||||
documentId: {
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
// define the default value
|
||||
viewers: [],
|
||||
// define options
|
||||
viewerOptions: [],
|
||||
seenReceivers: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
documentId: {
|
||||
handler() {
|
||||
this.init();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.fetchDepartments(), this.fetchViewers();
|
||||
},
|
||||
async fetchDepartments() {
|
||||
const departmentResponse = await services.department.all({
|
||||
with: "users",
|
||||
});
|
||||
const departments = departmentResponse.data;
|
||||
this.viewerOptions = departments;
|
||||
return departments;
|
||||
},
|
||||
async fetchViewers() {
|
||||
const receivers = await this.fetchReceivers();
|
||||
this.viewers = receivers.map((receiver) => receiver.id);
|
||||
this.seenReceivers = receivers
|
||||
.filter((receiver) => receiver.pivot.seen)
|
||||
.map((receiver) => receiver.id);
|
||||
return receivers;
|
||||
},
|
||||
async fetchReceivers() {
|
||||
const receiversResponse = await services.document.get(this.documentId, {
|
||||
with: "receivers",
|
||||
});
|
||||
const receivers = receiversResponse.data.receivers;
|
||||
this.handlerOptions = receivers;
|
||||
return receivers;
|
||||
},
|
||||
removeViewer(item) {
|
||||
var viewerIds = [item.id];
|
||||
if(item.users){
|
||||
viewerIds = item.users.map(u => u.id)
|
||||
}
|
||||
services.document
|
||||
.unassignReceivers(this.documentId, viewerIds)
|
||||
.then((response) => {
|
||||
this.fetchReceivers();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
addViewer(item) {
|
||||
var viewerIds = [item.id];
|
||||
if(item.users){
|
||||
viewerIds = item.users.map(u => u.id)
|
||||
}
|
||||
services.document
|
||||
.assignReceivers(this.documentId, viewerIds)
|
||||
.then((response) => {
|
||||
this.fetchReceivers();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
seenStyle(userId) {
|
||||
return this.seenReceivers.includes(userId) ? "seen" : null;
|
||||
},
|
||||
normalizer(node) {
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
[node.users == undefined
|
||||
? ""
|
||||
: node.users.length > 0
|
||||
? "children"
|
||||
: ""]: node.users,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.seen {
|
||||
color: #2eb85c;
|
||||
}
|
||||
</style>
|
||||
94
resources/js/src/components/document/Recipients.vue
Normal file
94
resources/js/src/components/document/Recipients.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Nơi nhận</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="12">
|
||||
<treeselect
|
||||
v-model="organizes"
|
||||
:multiple="true"
|
||||
:options="organizeOptions"
|
||||
:clearable="false"
|
||||
@select="addRecipient"
|
||||
@deselect="removeRecipient"
|
||||
></treeselect>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
|
||||
// import the component
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
// import the styles
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "Recipients",
|
||||
props: {
|
||||
documentId: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
// define the default value
|
||||
organizes: [],
|
||||
// define options
|
||||
organizeOptions: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
documentId: {
|
||||
handler() {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.fetchOrganizes();
|
||||
this.fetchRecipients();
|
||||
},
|
||||
async fetchOrganizes() {
|
||||
const organizesResponse = await services.publisher.all();
|
||||
const organizes = this.formatKeys(organizesResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
this.organizeOptions = organizes;
|
||||
return organizes;
|
||||
},
|
||||
async fetchRecipients() {
|
||||
const recipientResponse = await services.document.get(this.documentId , {
|
||||
with: 'organizes'
|
||||
});
|
||||
this.organizes = recipientResponse.data.organizes.map(organize => organize.id);
|
||||
return recipientResponse;
|
||||
},
|
||||
addRecipient(item) {
|
||||
services.document
|
||||
.assignRecipients(this.documentId, [item.id])
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
removeRecipient(item) {
|
||||
services.document
|
||||
.unassignRecipients(this.documentId, [item.id])
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
179
resources/js/src/components/form/List.vue
Normal file
179
resources/js/src/components/form/List.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-grid" />
|
||||
{{title}}
|
||||
<CButton
|
||||
v-if="canCreate"
|
||||
size="sm"
|
||||
class="float-right"
|
||||
color="primary"
|
||||
variant="outline"
|
||||
v-c-tooltip="'Tạo mới'"
|
||||
@click="showCreate"
|
||||
>
|
||||
<CIcon name="cil-plus" />
|
||||
</CButton>
|
||||
</CCardHeader>
|
||||
<CCardBody class="p-0">
|
||||
<CDataTable
|
||||
hover
|
||||
:loading="loading"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
@row-clicked="showDetail"
|
||||
clickable-rows
|
||||
sorter
|
||||
column-filter
|
||||
></CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CModal :title="title" :show.sync="isShowDetail">
|
||||
<CInput
|
||||
v-for="field in fields"
|
||||
:label="field.label"
|
||||
:key="field.key"
|
||||
:value.sync="itemUpdating[field.key]"
|
||||
/>
|
||||
<slot v-if="!createMode" name="append-body"></slot>
|
||||
<template #footer>
|
||||
<CButton
|
||||
v-if="canCreate && createMode"
|
||||
size="sm"
|
||||
class="float-right"
|
||||
color="success"
|
||||
@click="onClickCreate"
|
||||
>
|
||||
<CIcon name="cil-plus" /> Tạo mới
|
||||
</CButton>
|
||||
<CButton
|
||||
v-if="canUpdate && !createMode"
|
||||
size="sm"
|
||||
class="float-right"
|
||||
color="success"
|
||||
@click="onClickSave"
|
||||
>
|
||||
<CIcon name="cil-check" /> Lưu
|
||||
</CButton>
|
||||
<CButton
|
||||
v-if="canDelete && !createMode"
|
||||
size="sm"
|
||||
class="float-right"
|
||||
color="danger"
|
||||
@click="onClickDelete"
|
||||
>
|
||||
<CIcon name="cil-x" /> Xóa
|
||||
</CButton>
|
||||
</template>
|
||||
</CModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "List",
|
||||
props: {
|
||||
service: {
|
||||
required: true,
|
||||
type: Object
|
||||
},
|
||||
title: {
|
||||
required: false,
|
||||
type: String,
|
||||
default: "Danh sách"
|
||||
},
|
||||
canCreate: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
canUpdate: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
canDelete: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
fields: {
|
||||
required: true,
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
items: [],
|
||||
itemSelected: {},
|
||||
itemUpdating: {},
|
||||
isShowDetail: false,
|
||||
createMode: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.fetchList();
|
||||
},
|
||||
async fetchList() {
|
||||
this.loading = true;
|
||||
const response = await this.service.all();
|
||||
this.items = response.data;
|
||||
this.loading = false;
|
||||
},
|
||||
showDetail(item) {
|
||||
this.$emit("show", item);
|
||||
this.createMode = false;
|
||||
this.itemSelected = item;
|
||||
this.itemUpdating = _.clone(item);
|
||||
this.isShowDetail = true;
|
||||
},
|
||||
onClickSave() {
|
||||
this.service
|
||||
.update(this.itemUpdating, this.itemSelected.id)
|
||||
.then(response => {
|
||||
this.isShowDetail = false;
|
||||
this.$toast.success("Đã lưu");
|
||||
this.fetchList();
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
showCreate() {
|
||||
this.createMode = true;
|
||||
this.itemUpdating = {};
|
||||
this.isShowDetail = true;
|
||||
},
|
||||
onClickCreate() {
|
||||
this.service
|
||||
.create(this.itemUpdating)
|
||||
.then(response => {
|
||||
this.isShowDetail = false;
|
||||
this.$toast.success("Đã tạo");
|
||||
this.fetchList();
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
onClickDelete() {
|
||||
this.service
|
||||
.delete(this.itemSelected.id)
|
||||
.then(response => {
|
||||
this.isShowDetail = false;
|
||||
this.$toast.success("Đã xóa");
|
||||
this.fetchList();
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
117
resources/js/src/components/user/Info.vue
Normal file
117
resources/js/src/components/user/Info.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Thông tin</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput label="Mã" :value.sync="user.id" horizontal :readonly="true" />
|
||||
<CInput
|
||||
placeholder="Let us know your full name."
|
||||
label="Tên"
|
||||
:value.sync="user.name"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
label="Email"
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
:value.sync="user.email"
|
||||
horizontal
|
||||
autocomplete="email"
|
||||
/>
|
||||
<CInput
|
||||
label="Số điện thoại"
|
||||
placeholder="Enter your tel"
|
||||
:value.sync="user.tel"
|
||||
horizontal
|
||||
autocomplete="tel"
|
||||
/>
|
||||
<CInput label="Ngày sinh" type="date" :value.sync="user.birthday" horizontal />
|
||||
<CSelect
|
||||
label="Chức danh"
|
||||
horizontal
|
||||
:value.sync="user.title_id"
|
||||
:options="titles"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Phòng ban"
|
||||
horizontal
|
||||
:value.sync="user.department_id"
|
||||
:options="departments"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CFormGroup class="form-group form-row">
|
||||
<template #label>
|
||||
<slot name="label">
|
||||
<label class="col-form-label col-sm-3">Kích hoạt</label>
|
||||
</slot>
|
||||
</template>
|
||||
<template #input>
|
||||
<CSwitch class="mx-1" color="success" :checked.sync="user.active" />
|
||||
</template>
|
||||
</CFormGroup>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" @click="updateInfo" class="float-right" color="success">
|
||||
<CIcon name="cil-check" />Lưu
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
|
||||
export default {
|
||||
name: "Info",
|
||||
props: {
|
||||
userId: {
|
||||
required: true,
|
||||
},
|
||||
isMe: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
beforeRouteEnter(to, from, next) {
|
||||
next((vm) => {
|
||||
vm.usersOpened = from.fullPath.includes("users");
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
usersOpened: null,
|
||||
user: [],
|
||||
titles: [],
|
||||
departments: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
methods: {
|
||||
async fetch() {
|
||||
const titleResponse = await services.title.all();
|
||||
this.titles = this.formatKeys(titleResponse.data);
|
||||
const departmentResponse = await services.department.all();
|
||||
this.departments = this.formatKeys(departmentResponse.data);
|
||||
const userResponse = await services.user.get(this.userId);
|
||||
this.user = userResponse.data;
|
||||
},
|
||||
async updateInfo() {
|
||||
return await (this.isMe ? services.auth : services.user)
|
||||
.update(this.user, this.userId)
|
||||
.then((response) => {
|
||||
this.$toast.success("Đã lưu");
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
75
resources/js/src/components/user/Password.vue
Normal file
75
resources/js/src/components/user/Password.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Thay đổi mật khẩu</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput placeholder="Nhập mật khẩu." label="Mật khẩu" type="password" horizontal />
|
||||
<CInput
|
||||
placeholder="Nhập mật khẩu mới."
|
||||
label="Mật khẩu mới"
|
||||
type="password"
|
||||
:value.sync="password.password"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
placeholder="Nhập lại mật khẩu mới."
|
||||
label="Xác nhận"
|
||||
type="password"
|
||||
:value.sync="password.password_confirmation"
|
||||
horizontal
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton
|
||||
type="submit"
|
||||
@click="updatePassword"
|
||||
size="sm"
|
||||
class="float-right"
|
||||
color="success"
|
||||
>
|
||||
<CIcon name="cil-check" />Thay đổi
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
|
||||
export default {
|
||||
name: "Password",
|
||||
props: {
|
||||
userId: {
|
||||
required: true,
|
||||
},
|
||||
isMe: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
password: {
|
||||
password_confirmation: "",
|
||||
password: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async updatePassword() {
|
||||
return await (this.isMe ? services.auth : services.user)
|
||||
.update(this.password, this.userId)
|
||||
.then((response) => {
|
||||
this.$toast.success("Đã thay đổi");
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
65
resources/js/src/components/user/Permission.vue
Normal file
65
resources/js/src/components/user/Permission.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Phân quyền</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CRow form class="form-group" key="permission">
|
||||
<CCol sm="12">
|
||||
<CInputCheckbox
|
||||
v-for="(permission) in permissions"
|
||||
:key="permission.id"
|
||||
:label="permission.name"
|
||||
:value="permission.id"
|
||||
:checked="user.permissions.map(permission => permission.id).includes(permission.id)"
|
||||
@update:checked="givePermission"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
|
||||
export default {
|
||||
name: "Permission",
|
||||
props: {
|
||||
userId: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
permissions: [],
|
||||
user: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
methods: {
|
||||
async fetch() {
|
||||
const userResponse = await services.user.get(this.userId, {
|
||||
with: "permissions"
|
||||
});
|
||||
this.user = userResponse.data;
|
||||
const permissionResponse = await services.permission.all();
|
||||
this.permissions = permissionResponse.data;
|
||||
},
|
||||
async givePermission(checked, event) {
|
||||
const permissionId = event.target.value;
|
||||
const permissionRequest = (await checked)
|
||||
? services.user.givePermission(permissionId, this.userId)
|
||||
: services.user.revokePermission(permissionId, this.userId);
|
||||
permissionRequest.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
return permissionRequest;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
65
resources/js/src/components/user/Role.vue
Normal file
65
resources/js/src/components/user/Role.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Phân nhóm</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CRow form class="form-group" key="role">
|
||||
<CCol sm="12">
|
||||
<CInputCheckbox
|
||||
v-for="(role) in roles"
|
||||
:key="role.id"
|
||||
:label="role.name"
|
||||
:value="role.id"
|
||||
:checked="user.roles.map(role => role.id).includes(role.id)"
|
||||
@update:checked="giveRole"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
|
||||
export default {
|
||||
name: "Role",
|
||||
props: {
|
||||
userId: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
roles: [],
|
||||
user: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
methods: {
|
||||
async fetch() {
|
||||
const userResponse = await services.user.get(this.userId, {
|
||||
with: "roles"
|
||||
});
|
||||
this.user = userResponse.data;
|
||||
const roleResponse = await services.role.all();
|
||||
this.roles = roleResponse.data;
|
||||
},
|
||||
async giveRole(checked, event) {
|
||||
const roleId = event.target.value;
|
||||
const roleRequest = (await checked)
|
||||
? services.user.giveRole(roleId, this.userId)
|
||||
: services.user.revokeRole(roleId, this.userId);
|
||||
roleRequest.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
return roleRequest;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
74
resources/js/src/components/user/TreePermission.vue
Normal file
74
resources/js/src/components/user/TreePermission.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="12">
|
||||
<label>Phân theo chức năng</label>
|
||||
<treeselect
|
||||
@select="addPermission"
|
||||
@deselect="removePermission"
|
||||
v-model="permissions"
|
||||
:multiple="true"
|
||||
:options="permissionOptions"
|
||||
:clearable="false"
|
||||
></treeselect>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
|
||||
// import the component
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
// import the styles
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "TreePermission",
|
||||
props: {
|
||||
userId: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
permissionOptions: [],
|
||||
permissions: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchPermissions();
|
||||
this.fetchCurrentPermissions();
|
||||
},
|
||||
methods: {
|
||||
async fetchPermissions() {
|
||||
const permissionResponse = await services.permission.all();
|
||||
this.permissionOptions = this.formatKeys(permissionResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
return permissionResponse;
|
||||
},
|
||||
async fetchCurrentPermissions() {
|
||||
const userResponse = await services.user.get(this.userId, {
|
||||
with: "permissions"
|
||||
});
|
||||
this.permissions = userResponse.data.permissions.map(
|
||||
permission => permission.id
|
||||
);
|
||||
},
|
||||
addPermission(permission) {
|
||||
services.user.givePermission(permission.id, this.userId).catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
removePermission(permission) {
|
||||
services.user
|
||||
.revokePermission(permission.id, this.userId)
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
70
resources/js/src/components/user/TreeRole.vue
Normal file
70
resources/js/src/components/user/TreeRole.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="12">
|
||||
<label>Phân theo nhóm</label>
|
||||
<treeselect
|
||||
@select="addRole"
|
||||
@deselect="removeRole"
|
||||
v-model="roles"
|
||||
:multiple="true"
|
||||
:options="roleOptions"
|
||||
:clearable="false"
|
||||
></treeselect>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
|
||||
// import the component
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
// import the styles
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "TreeRole",
|
||||
props: {
|
||||
userId: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
roleOptions: [],
|
||||
roles: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchRoles();
|
||||
this.fetchCurrentRoles();
|
||||
},
|
||||
methods: {
|
||||
async fetchRoles() {
|
||||
const roleResponse = await services.role.all();
|
||||
this.roleOptions = this.formatKeys(roleResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
return roleResponse;
|
||||
},
|
||||
async fetchCurrentRoles() {
|
||||
const userResponse = await services.user.get(this.userId, {
|
||||
with: "roles"
|
||||
});
|
||||
this.roles = userResponse.data.roles.map(role => role.id);
|
||||
},
|
||||
addRole(role) {
|
||||
services.user.giveRole(role.id, this.userId).catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
removeRole(role) {
|
||||
services.user.revokeRole(role.id, this.userId).catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
44
resources/js/src/containers/TheContainer.vue
Normal file
44
resources/js/src/containers/TheContainer.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="c-app">
|
||||
<TheSidebar/>
|
||||
<CWrapper>
|
||||
<TheHeader/>
|
||||
<div class="c-body">
|
||||
<main class="c-main">
|
||||
<CContainer fluid>
|
||||
<transition name="fade">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</CContainer>
|
||||
</main>
|
||||
<TheFooter/>
|
||||
</div>
|
||||
</CWrapper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TheSidebar from './TheSidebar'
|
||||
import TheHeader from './TheHeader'
|
||||
import TheFooter from './TheFooter'
|
||||
|
||||
export default {
|
||||
name: 'TheContainer',
|
||||
components: {
|
||||
TheSidebar,
|
||||
TheHeader,
|
||||
TheFooter
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
18
resources/js/src/containers/TheFooter.vue
Normal file
18
resources/js/src/containers/TheFooter.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<CFooter :fixed="false">
|
||||
<!-- <div>
|
||||
<a href="https://coreui.io" target="_blank">CoreUI</a>
|
||||
<span class="ml-1">© {{new Date().getFullYear()}} creativeLabs.</span>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<span class="mr-1">Powered by</span>
|
||||
<a href="https://coreui.io/vue" target="_blank">CoreUI for Vue</a>
|
||||
</div> -->
|
||||
</CFooter>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TheFooter'
|
||||
}
|
||||
</script>
|
||||
42
resources/js/src/containers/TheHeader.vue
Normal file
42
resources/js/src/containers/TheHeader.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<CHeader fixed with-subheader light>
|
||||
<CToggler
|
||||
in-header
|
||||
class="ml-3 d-lg-none"
|
||||
@click="$store.commit('toggleSidebarMobile')"
|
||||
/>
|
||||
<CToggler
|
||||
in-header
|
||||
class="ml-3 d-md-down-none"
|
||||
@click="$store.commit('toggleSidebarDesktop')"
|
||||
/>
|
||||
<CHeaderBrand class="mx-auto d-lg-none" to="/">
|
||||
<CIcon name="logo" height="48" alt="Logo"/>
|
||||
</CHeaderBrand>
|
||||
<CHeaderNav class="d-md-down-none mr-auto">
|
||||
</CHeaderNav>
|
||||
<CHeaderNav class="mr-4">
|
||||
<CHeaderNavItem class="d-md-down-none mx-2">
|
||||
<!-- <CHeaderNavLink>
|
||||
<CIcon name="cil-bell"/>
|
||||
<CBadge color="danger" class="ml-auto">1</CBadge>
|
||||
</CHeaderNavLink> -->
|
||||
</CHeaderNavItem>
|
||||
<TheHeaderDropdownAccnt/>
|
||||
</CHeaderNav>
|
||||
<CSubheader class="px-3">
|
||||
<CBreadcrumbRouter class="border-0 mb-0"/>
|
||||
</CSubheader>
|
||||
</CHeader>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TheHeaderDropdownAccnt from './TheHeaderDropdownAccnt'
|
||||
|
||||
export default {
|
||||
name: 'TheHeader',
|
||||
components: {
|
||||
TheHeaderDropdownAccnt
|
||||
}
|
||||
}
|
||||
</script>
|
||||
51
resources/js/src/containers/TheHeaderDropdownAccnt.vue
Normal file
51
resources/js/src/containers/TheHeaderDropdownAccnt.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div>
|
||||
<CButton
|
||||
size="sm"
|
||||
color="info"
|
||||
@click="goProfile"
|
||||
variant="outline"
|
||||
v-c-tooltip="'Thông tin cá nhân'"
|
||||
>
|
||||
<CIcon name="cil-user" class="m-0" />
|
||||
</CButton>
|
||||
<CButton size="sm" color="danger" @click="logout" variant="outline" v-c-tooltip="'Đăng xuất'">
|
||||
<CIcon name="cil-power-standby" class="m-0" />
|
||||
</CButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TheHeaderDropdownAccnt",
|
||||
data() {
|
||||
return {
|
||||
itemsCount: 42
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
this.$store
|
||||
.dispatch("auth/logout")
|
||||
.then(response => {
|
||||
this.redirectToLogin();
|
||||
})
|
||||
.catch(error => {
|
||||
this.redirectToLogin();
|
||||
});
|
||||
},
|
||||
redirectToLogin() {
|
||||
this.$router.push({ name: "Login" });
|
||||
},
|
||||
goProfile() {
|
||||
this.$router.push({ name: "Profile" });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.c-icon {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
</style>
|
||||
207
resources/js/src/containers/TheSidebar.vue
Normal file
207
resources/js/src/containers/TheSidebar.vue
Normal file
File diff suppressed because one or more lines are too long
244
resources/js/src/containers/_nav.js
Normal file
244
resources/js/src/containers/_nav.js
Normal file
@@ -0,0 +1,244 @@
|
||||
export default [
|
||||
{
|
||||
_name: 'CSidebarNav',
|
||||
_children: [
|
||||
{
|
||||
_name: 'CSidebarNavItem',
|
||||
name: 'Trang chủ',
|
||||
to: '/dashboard',
|
||||
icon: 'cil-home',
|
||||
},
|
||||
// {
|
||||
// _name: 'CSidebarNavTitle',
|
||||
// _children: ['Theme']
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavItem',
|
||||
// name: 'Colors',
|
||||
// to: '/theme/colors',
|
||||
// icon: 'cil-drop'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavItem',
|
||||
// name: 'Typography',
|
||||
// to: '/theme/typography',
|
||||
// icon: 'cil-pencil'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavItem',
|
||||
// name: 'CKEditor',
|
||||
// to: '/theme/ckeditor',
|
||||
// icon: 'cil-short-text'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavTitle',
|
||||
// _children: ['Components']
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavDropdown',
|
||||
// name: 'Base',
|
||||
// route: '/base',
|
||||
// icon: 'cil-puzzle',
|
||||
// items: [
|
||||
// {
|
||||
// name: 'Breadcrumbs',
|
||||
// to: '/base/breadcrumbs'
|
||||
// },
|
||||
// {
|
||||
// name: 'Cards',
|
||||
// to: '/base/cards'
|
||||
// },
|
||||
// {
|
||||
// name: 'Carousels',
|
||||
// to: '/base/carousels'
|
||||
// },
|
||||
// {
|
||||
// name: 'Collapses',
|
||||
// to: '/base/collapses'
|
||||
// },
|
||||
// {
|
||||
// name: 'Forms',
|
||||
// to: '/base/forms'
|
||||
// },
|
||||
// {
|
||||
// name: 'Jumbotrons',
|
||||
// to: '/base/jumbotrons'
|
||||
// },
|
||||
// {
|
||||
// name: 'List Groups',
|
||||
// to: '/base/list-groups'
|
||||
// },
|
||||
// {
|
||||
// name: 'Navs',
|
||||
// to: '/base/navs'
|
||||
// },
|
||||
// {
|
||||
// name: 'Navbars',
|
||||
// to: '/base/navbars'
|
||||
// },
|
||||
// {
|
||||
// name: 'Paginations',
|
||||
// to: '/base/paginations'
|
||||
// },
|
||||
// {
|
||||
// name: 'Popovers',
|
||||
// to: '/base/popovers'
|
||||
// },
|
||||
// {
|
||||
// name: 'Progress Bars',
|
||||
// to: '/base/progress-bars'
|
||||
// },
|
||||
// {
|
||||
// name: 'Switches',
|
||||
// to: '/base/switches'
|
||||
// },
|
||||
// {
|
||||
// name: 'Tables',
|
||||
// to: '/base/tables'
|
||||
// },
|
||||
// {
|
||||
// name: 'Tabs',
|
||||
// to: '/base/tabs'
|
||||
// },
|
||||
// {
|
||||
// name: 'Tooltips',
|
||||
// to: '/base/tooltips'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavDropdown',
|
||||
// name: 'Buttons',
|
||||
// route: '/buttons',
|
||||
// icon: 'cil-cursor',
|
||||
// items: [
|
||||
// {
|
||||
// name: 'Buttons',
|
||||
// to: '/buttons/standard-buttons'
|
||||
// },
|
||||
// {
|
||||
// name: 'Button Dropdowns',
|
||||
// to: '/buttons/dropdowns'
|
||||
// },
|
||||
// {
|
||||
// name: 'Button Groups',
|
||||
// to: '/buttons/button-groups'
|
||||
// },
|
||||
// {
|
||||
// name: 'Brand Buttons',
|
||||
// to: '/buttons/brand-buttons'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavItem',
|
||||
// name: 'Charts',
|
||||
// to: '/charts',
|
||||
// icon: 'cil-chart-pie'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavDropdown',
|
||||
// name: 'Icons',
|
||||
// route: '/icons',
|
||||
// icon: 'cil-star',
|
||||
// items: [
|
||||
// {
|
||||
// name: 'CoreUI Icons',
|
||||
// to: '/icons/coreui-icons',
|
||||
// badge: {
|
||||
// color: 'info',
|
||||
// text: 'NEW'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// name: 'Brands',
|
||||
// to: '/icons/brands'
|
||||
// },
|
||||
// {
|
||||
// name: 'Flags',
|
||||
// to: '/icons/flags'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavDropdown',
|
||||
// name: 'Notifications',
|
||||
// route: '/notifications',
|
||||
// icon: 'cil-bell',
|
||||
// items: [
|
||||
// {
|
||||
// name: 'Alerts',
|
||||
// to: '/notifications/alerts'
|
||||
// },
|
||||
// {
|
||||
// name: 'Badges',
|
||||
// to: '/notifications/badges'
|
||||
// },
|
||||
// {
|
||||
// name: 'Modals',
|
||||
// to: '/notifications/modals'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavItem',
|
||||
// name: 'Widgets',
|
||||
// to: '/widgets',
|
||||
// icon: 'cil-calculator',
|
||||
// badge: {
|
||||
// color: 'primary',
|
||||
// text: 'NEW',
|
||||
// shape: 'pill'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavDivider',
|
||||
// _class: 'm-2'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavTitle',
|
||||
// _children: ['Extras']
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavDropdown',
|
||||
// name: 'Pages',
|
||||
// route: '/pages',
|
||||
// icon: 'cil-star',
|
||||
// items: [
|
||||
// {
|
||||
// name: 'Login',
|
||||
// to: '/pages/login'
|
||||
// },
|
||||
// {
|
||||
// name: 'Register',
|
||||
// to: '/pages/register'
|
||||
// },
|
||||
// {
|
||||
// name: 'Error 404',
|
||||
// to: '/pages/404'
|
||||
// },
|
||||
// {
|
||||
// name: 'Error 500',
|
||||
// to: '/pages/500'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavItem',
|
||||
// name: 'Download CoreUI',
|
||||
// href: 'http://coreui.io/vue/',
|
||||
// icon: { name: 'cil-cloud-download', class: 'text-white' },
|
||||
// _class: 'bg-success text-white',
|
||||
// target: '_blank'
|
||||
// },
|
||||
// {
|
||||
// _name: 'CSidebarNavItem',
|
||||
// name: 'Try CoreUI PRO',
|
||||
// href: 'http://coreui.io/pro/vue/',
|
||||
// icon: { name: 'cil-layers', class: 'text-white' },
|
||||
// _class: 'bg-danger text-white',
|
||||
// target: '_blank'
|
||||
// }
|
||||
]
|
||||
}
|
||||
]
|
||||
32
resources/js/src/helper.js
Normal file
32
resources/js/src/helper.js
Normal file
@@ -0,0 +1,32 @@
|
||||
export default {
|
||||
methods: {
|
||||
/*
|
||||
Just know that it takes an array of properties to exclude from a given object
|
||||
@param: keysMap = { id: 'value', name: 'label' }
|
||||
@param: array = [{ id: 'x1', name: 'x2' }]
|
||||
@return [{ value: 'x1', label: 'x2' }]
|
||||
*/
|
||||
formatKeys(array, keysMap = { id: 'value', name: 'label' }) {
|
||||
return array.map(function (obj) {
|
||||
return Object.keys(obj).reduce(
|
||||
(acc, key) => ({
|
||||
...acc,
|
||||
...{ [keysMap[key] || key]: obj[key] }
|
||||
}),
|
||||
{}
|
||||
)
|
||||
})
|
||||
},
|
||||
getErrorMessage(error) {
|
||||
try {
|
||||
return error.response.data.errors.message ?? error.response.data.message
|
||||
} catch {
|
||||
return error.response.data.message || 'Unknow error'
|
||||
}
|
||||
},
|
||||
toastHttpError(error) {
|
||||
this.$toast.error(this.getErrorMessage(error))
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
32
resources/js/src/main.js
Normal file
32
resources/js/src/main.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import 'core-js/stable'
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
import CoreuiVue from '@coreui/vue'
|
||||
import { iconsSet as icons } from './assets/icons/icons.js'
|
||||
import store from './state/store'
|
||||
import CKEditor from '@ckeditor/ckeditor5-vue'
|
||||
import helper from './helper'
|
||||
|
||||
import VueToast from 'vue-toast-notification';
|
||||
import 'vue-toast-notification/dist/theme-default.css';
|
||||
Vue.use(VueToast);
|
||||
|
||||
Vue.config.performance = true
|
||||
Vue.use(CoreuiVue)
|
||||
Vue.prototype.$log = console.log.bind(console)
|
||||
|
||||
Vue.use(CKEditor)
|
||||
|
||||
Vue.mixin(helper)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
icons,
|
||||
template: '<App/>',
|
||||
components: {
|
||||
App
|
||||
},
|
||||
})
|
||||
562
resources/js/src/router/index.js
Normal file
562
resources/js/src/router/index.js
Normal file
@@ -0,0 +1,562 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import store from '../state/store'
|
||||
|
||||
// Containers
|
||||
const TheContainer = () => import('../containers/TheContainer')
|
||||
|
||||
// Views
|
||||
const Dashboard = () => import('../views/Dashboard')
|
||||
|
||||
const Colors = () => import('../views/theme/Colors')
|
||||
const Typography = () => import('../views/theme/Typography')
|
||||
const CKEditor = () => import('../views/theme/CKEditor')
|
||||
|
||||
const Charts = () => import('../views/charts/Charts')
|
||||
const Widgets = () => import('../views/widgets/Widgets')
|
||||
|
||||
// Views - Components
|
||||
const Cards = () => import('../views/base/Cards')
|
||||
const Forms = () => import('../views/base/Forms')
|
||||
const Switches = () => import('../views/base/Switches')
|
||||
const Tables = () => import('../views/base/Tables')
|
||||
const Tabs = () => import('../views/base/Tabs')
|
||||
const Breadcrumbs = () => import('../views/base/Breadcrumbs')
|
||||
const Carousels = () => import('../views/base/Carousels')
|
||||
const Collapses = () => import('../views/base/Collapses')
|
||||
const Jumbotrons = () => import('../views/base/Jumbotrons')
|
||||
const ListGroups = () => import('../views/base/ListGroups')
|
||||
const Navs = () => import('../views/base/Navs')
|
||||
const Navbars = () => import('../views/base/Navbars')
|
||||
const Paginations = () => import('../views/base/Paginations')
|
||||
const Popovers = () => import('../views/base/Popovers')
|
||||
const ProgressBars = () => import('../views/base/ProgressBars')
|
||||
const Tooltips = () => import('../views/base/Tooltips')
|
||||
|
||||
// Views - Buttons
|
||||
const StandardButtons = () => import('../views/buttons/StandardButtons')
|
||||
const ButtonGroups = () => import('../views/buttons/ButtonGroups')
|
||||
const Dropdowns = () => import('../views/buttons/Dropdowns')
|
||||
const BrandButtons = () => import('../views/buttons/BrandButtons')
|
||||
|
||||
// Views - Icons
|
||||
const CoreUIIcons = () => import('../views/icons/CoreUIIcons')
|
||||
const Brands = () => import('../views/icons/Brands')
|
||||
const Flags = () => import('../views/icons/Flags')
|
||||
|
||||
// Views - Notifications
|
||||
const Alerts = () => import('../views/notifications/Alerts')
|
||||
const Badges = () => import('../views/notifications/Badges')
|
||||
const Modals = () => import('../views/notifications/Modals')
|
||||
|
||||
// Views - Pages
|
||||
const Page404 = () => import('../views/pages/Page404')
|
||||
const Page500 = () => import('../views/pages/Page500')
|
||||
const Login = () => import('../views/pages/Login')
|
||||
const Register = () => import('../views/pages/Register')
|
||||
|
||||
// Users
|
||||
const Users = () => import('../views/users/Users')
|
||||
const User = () => import('../views/users/User')
|
||||
const CreateUser = () => import('../views/users/Create')
|
||||
const Me = () => import('../views/users/Me')
|
||||
|
||||
// Documents
|
||||
const Documents = () => import('../views/documents/Documents')
|
||||
const Document = () => import('../views/documents/Document')
|
||||
const DocumentCreate = () => import('../views/documents/Create')
|
||||
|
||||
// Statistic
|
||||
const Statistic = () => import('../views/statistic/Statistic')
|
||||
|
||||
// System
|
||||
const Titles = () => import('../views/system/Titles')
|
||||
const Departments = () => import('../views/system/Departments')
|
||||
const Signers = () => import('../views/system/Signers')
|
||||
const Publishers = () => import('../views/system/Publishers')
|
||||
const DocumentTypes = () => import('../views/system/DocumentTypes')
|
||||
const Books = () => import('../views/system/Books')
|
||||
const Groups = () => import('../views/system/Groups')
|
||||
const Permissions = () => import('../views/system/Permissions')
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
const router = new Router({
|
||||
mode: 'hash', // https://router.vuejs.org/api/#mode
|
||||
linkActiveClass: 'active',
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: configRoutes()
|
||||
})
|
||||
|
||||
// Before each route evaluates...
|
||||
router.beforeEach((routeTo, routeFrom, next) => {
|
||||
// Check if auth is required on this route
|
||||
// (including nested routes).
|
||||
const authRequired = routeTo.matched.some((route) => route.meta.authRequired)
|
||||
|
||||
// If auth isn't required for the route, just continue.
|
||||
if (!authRequired) return next()
|
||||
|
||||
if (store.getters['auth/loggedIn']) return next()
|
||||
|
||||
// Validate the local user token...
|
||||
return store.dispatch('auth/validate').then((validUser) => {
|
||||
// Then continue if the token still represents a valid user,
|
||||
// otherwise redirect to login.
|
||||
return validUser ? next() : redirectToLogin()
|
||||
}).catch(error => {
|
||||
return redirectToLogin()
|
||||
})
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function redirectToLogin() {
|
||||
// Pass the original route to the login component
|
||||
next({ name: 'Login', query: { redirectFrom: routeTo.fullPath } })
|
||||
}
|
||||
})
|
||||
|
||||
router.beforeResolve(async (routeTo, routeFrom, next) => {
|
||||
// Create a `beforeResolve` hook, which fires whenever
|
||||
// `beforeRouteEnter` and `beforeRouteUpdate` would. This
|
||||
// allows us to ensure data is fetched even when params change,
|
||||
// but the resolved route does not. We put it in `meta` to
|
||||
// indicate that it's a hook we created, rather than part of
|
||||
// Vue Router (yet?).
|
||||
try {
|
||||
// For each matched route...
|
||||
for (const route of routeTo.matched) {
|
||||
await new Promise((resolve, reject) => {
|
||||
// If a `beforeResolve` hook is defined, call it with
|
||||
// the same arguments as the `beforeEnter` hook.
|
||||
if (route.meta && route.meta.beforeResolve) {
|
||||
route.meta.beforeResolve(routeTo, routeFrom, (...args) => {
|
||||
// If the user chose to redirect...
|
||||
if (args.length) {
|
||||
// If redirecting to the same route we're coming from...
|
||||
// Complete the redirect.
|
||||
next(...args)
|
||||
reject(new Error('Redirected'))
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// Otherwise, continue resolving the route.
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
}
|
||||
// If a `beforeResolve` hook chose to redirect, just return.
|
||||
} catch (error) {
|
||||
return
|
||||
}
|
||||
|
||||
// If we reach this point, continue resolving the route.
|
||||
next()
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
function configRoutes () {
|
||||
return [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/dashboard',
|
||||
name: 'Trang chủ',
|
||||
component: TheContainer,
|
||||
meta: {
|
||||
authRequired: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
component: Dashboard
|
||||
},
|
||||
// Books
|
||||
{
|
||||
path: 'books',
|
||||
meta: {
|
||||
label: 'Sổ văn bản',
|
||||
},
|
||||
component: {
|
||||
render(c) {
|
||||
return c('router-view')
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'Sổ văn bản',
|
||||
component: Books
|
||||
},
|
||||
{
|
||||
path: ':book',
|
||||
name: 'Chi tiết sổ',
|
||||
component: Documents,
|
||||
children: [
|
||||
{
|
||||
path: 'documents',
|
||||
name: 'Danh sách văn bản',
|
||||
component: Documents,
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
// Documents
|
||||
{
|
||||
path: 'documents',
|
||||
meta: {
|
||||
label: 'Văn bản',
|
||||
},
|
||||
component: {
|
||||
render(c) {
|
||||
return c('router-view')
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'Danh sách',
|
||||
component: Documents
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'Tạo mới',
|
||||
component: DocumentCreate
|
||||
},
|
||||
{
|
||||
path: ':document',
|
||||
name: 'Chi tiết',
|
||||
component: Document,
|
||||
},
|
||||
]
|
||||
},
|
||||
// Statistic
|
||||
{
|
||||
path: 'statistic',
|
||||
name: 'Thống kê',
|
||||
component: Statistic
|
||||
},
|
||||
|
||||
//
|
||||
{
|
||||
path: 'theme',
|
||||
redirect: '/theme/colors',
|
||||
name: 'Theme',
|
||||
component: {
|
||||
render (c) { return c('router-view') }
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'colors',
|
||||
name: 'Colors',
|
||||
component: Colors
|
||||
},
|
||||
{
|
||||
path: 'typography',
|
||||
name: 'Typography',
|
||||
component: Typography
|
||||
},
|
||||
{
|
||||
path: 'ckeditor',
|
||||
name: 'CKEditor',
|
||||
component: CKEditor
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'charts',
|
||||
name: 'Charts',
|
||||
component: Charts
|
||||
},
|
||||
{
|
||||
path: 'widgets',
|
||||
name: 'Widgets',
|
||||
component: Widgets
|
||||
},
|
||||
{
|
||||
path: 'me',
|
||||
name: 'Profile',
|
||||
meta: {
|
||||
label: 'Cá nhân'
|
||||
},
|
||||
component: Me
|
||||
},
|
||||
{
|
||||
path: 'users',
|
||||
meta: {
|
||||
label: 'Người dùng'
|
||||
},
|
||||
component: {
|
||||
render(c) {
|
||||
return c('router-view')
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'Danh sách',
|
||||
component: Users
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
meta: {
|
||||
label: 'Tạo mới'
|
||||
},
|
||||
name: 'Create User',
|
||||
component: CreateUser
|
||||
},
|
||||
{
|
||||
path: ':id',
|
||||
meta: {
|
||||
label: 'Chi tiết'
|
||||
},
|
||||
name: 'User',
|
||||
component: User
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'titles',
|
||||
name: 'Chức danh',
|
||||
component: Titles
|
||||
},
|
||||
{
|
||||
path: 'departments',
|
||||
name: 'Phòng ban',
|
||||
component: Departments
|
||||
},
|
||||
{
|
||||
path: 'signers',
|
||||
name: 'Người ký',
|
||||
component: Signers
|
||||
},
|
||||
{
|
||||
path: 'publishers',
|
||||
name: 'Nơi ban hành',
|
||||
component: Publishers
|
||||
},
|
||||
{
|
||||
path: 'document-types',
|
||||
name: 'Loại văn bản',
|
||||
component: DocumentTypes
|
||||
},
|
||||
{
|
||||
path: 'roles',
|
||||
name: 'Nhóm',
|
||||
component: Groups
|
||||
},
|
||||
{
|
||||
path: 'permissions',
|
||||
name: 'Quyền',
|
||||
component: Permissions
|
||||
},
|
||||
{
|
||||
path: 'base',
|
||||
redirect: '/base/cards',
|
||||
name: 'Base',
|
||||
component: {
|
||||
render (c) { return c('router-view') }
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'cards',
|
||||
name: 'Cards',
|
||||
component: Cards
|
||||
},
|
||||
{
|
||||
path: 'forms',
|
||||
name: 'Forms',
|
||||
component: Forms
|
||||
},
|
||||
{
|
||||
path: 'switches',
|
||||
name: 'Switches',
|
||||
component: Switches
|
||||
},
|
||||
{
|
||||
path: 'tables',
|
||||
name: 'Tables',
|
||||
component: Tables
|
||||
},
|
||||
{
|
||||
path: 'tabs',
|
||||
name: 'Tabs',
|
||||
component: Tabs
|
||||
},
|
||||
{
|
||||
path: 'breadcrumbs',
|
||||
name: 'Breadcrumbs',
|
||||
component: Breadcrumbs
|
||||
},
|
||||
{
|
||||
path: 'carousels',
|
||||
name: 'Carousels',
|
||||
component: Carousels
|
||||
},
|
||||
{
|
||||
path: 'collapses',
|
||||
name: 'Collapses',
|
||||
component: Collapses
|
||||
},
|
||||
{
|
||||
path: 'jumbotrons',
|
||||
name: 'Jumbotrons',
|
||||
component: Jumbotrons
|
||||
},
|
||||
{
|
||||
path: 'list-groups',
|
||||
name: 'List Groups',
|
||||
component: ListGroups
|
||||
},
|
||||
{
|
||||
path: 'navs',
|
||||
name: 'Navs',
|
||||
component: Navs
|
||||
},
|
||||
{
|
||||
path: 'navbars',
|
||||
name: 'Navbars',
|
||||
component: Navbars
|
||||
},
|
||||
{
|
||||
path: 'paginations',
|
||||
name: 'Paginations',
|
||||
component: Paginations
|
||||
},
|
||||
{
|
||||
path: 'popovers',
|
||||
name: 'Popovers',
|
||||
component: Popovers
|
||||
},
|
||||
{
|
||||
path: 'progress-bars',
|
||||
name: 'Progress Bars',
|
||||
component: ProgressBars
|
||||
},
|
||||
{
|
||||
path: 'tooltips',
|
||||
name: 'Tooltips',
|
||||
component: Tooltips
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'buttons',
|
||||
redirect: '/buttons/standard-buttons',
|
||||
name: 'Buttons',
|
||||
component: {
|
||||
render (c) { return c('router-view') }
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'standard-buttons',
|
||||
name: 'Standard Buttons',
|
||||
component: StandardButtons
|
||||
},
|
||||
{
|
||||
path: 'button-groups',
|
||||
name: 'Button Groups',
|
||||
component: ButtonGroups
|
||||
},
|
||||
{
|
||||
path: 'dropdowns',
|
||||
name: 'Dropdowns',
|
||||
component: Dropdowns
|
||||
},
|
||||
{
|
||||
path: 'brand-buttons',
|
||||
name: 'Brand Buttons',
|
||||
component: BrandButtons
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'icons',
|
||||
redirect: '/icons/coreui-icons',
|
||||
name: 'CoreUI Icons',
|
||||
component: {
|
||||
render (c) { return c('router-view') }
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'coreui-icons',
|
||||
name: 'Icons library',
|
||||
component: CoreUIIcons
|
||||
},
|
||||
{
|
||||
path: 'brands',
|
||||
name: 'Brands',
|
||||
component: Brands
|
||||
},
|
||||
{
|
||||
path: 'flags',
|
||||
name: 'Flags',
|
||||
component: Flags
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'notifications',
|
||||
redirect: '/notifications/alerts',
|
||||
name: 'Notifications',
|
||||
component: {
|
||||
render (c) { return c('router-view') }
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'alerts',
|
||||
name: 'Alerts',
|
||||
component: Alerts
|
||||
},
|
||||
{
|
||||
path: 'badges',
|
||||
name: 'Badges',
|
||||
component: Badges
|
||||
},
|
||||
{
|
||||
path: 'modals',
|
||||
name: 'Modals',
|
||||
component: Modals
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/pages',
|
||||
redirect: '/pages/404',
|
||||
name: 'Pages',
|
||||
component: {
|
||||
render (c) { return c('router-view') }
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '404',
|
||||
name: 'Page404',
|
||||
component: Page404
|
||||
},
|
||||
{
|
||||
path: '500',
|
||||
name: 'Page500',
|
||||
component: Page500
|
||||
},
|
||||
{
|
||||
path: 'login',
|
||||
name: 'Login',
|
||||
meta: {
|
||||
authRequired: false
|
||||
},
|
||||
component: Login
|
||||
},
|
||||
{
|
||||
path: 'register',
|
||||
name: 'Register',
|
||||
component: Register
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
35
resources/js/src/services/attachment.js
Normal file
35
resources/js/src/services/attachment.js
Normal file
@@ -0,0 +1,35 @@
|
||||
const resource = '/api/attachments';
|
||||
|
||||
export default {
|
||||
all(params = null) {
|
||||
return axios.get(`${resource}`, { params })
|
||||
},
|
||||
get(id, params = null) {
|
||||
return axios.get(`${resource}/${id}`, { params })
|
||||
},
|
||||
create(data) {
|
||||
return axios.post(`${resource}`, data)
|
||||
},
|
||||
update(data, id) {
|
||||
return axios.put(`${resource}/${id}`, data)
|
||||
},
|
||||
delete(id) {
|
||||
return axios.delete(`${resource}/${id}`)
|
||||
},
|
||||
download(id, filename) {
|
||||
return axios.get(`/api/download/attachments/${id}`, {
|
||||
responseType: 'blob',
|
||||
}).then((response) => {
|
||||
var fileURL = window.URL.createObjectURL(new Blob([response.data]));
|
||||
var fileLink = document.createElement('a');
|
||||
|
||||
fileLink.href = fileURL;
|
||||
fileLink.setAttribute('download', filename);
|
||||
document.body.appendChild(fileLink);
|
||||
|
||||
fileLink.click();
|
||||
|
||||
return response
|
||||
});
|
||||
}
|
||||
}
|
||||
42
resources/js/src/services/auth.js
Normal file
42
resources/js/src/services/auth.js
Normal file
@@ -0,0 +1,42 @@
|
||||
export default {
|
||||
login({ email, password }) {
|
||||
return this.csrf().then((response) => {
|
||||
return axios.post('/login', {
|
||||
email: email,
|
||||
password: password
|
||||
}).then(response => {
|
||||
return this.me()
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
csrf() {
|
||||
return axios.get('/sanctum/csrf-cookie')
|
||||
},
|
||||
|
||||
me(params = null) {
|
||||
return axios.get('/api/me', {
|
||||
params
|
||||
})
|
||||
},
|
||||
|
||||
logout() {
|
||||
return axios.post('/logout')
|
||||
},
|
||||
|
||||
async namePermissions() {
|
||||
return await this.me({ with: 'roles.permissions;permissions' }).then(response => {
|
||||
const permissionsViaRoles = response.data.roles.map(role => {
|
||||
return role.permissions.map(permission => permission.name)
|
||||
})
|
||||
|
||||
const directPermissions = response.data.permissions.map(permission => permission.name)
|
||||
|
||||
return _.union([..._.union(...permissionsViaRoles.map(p => p)), ...directPermissions])
|
||||
})
|
||||
},
|
||||
|
||||
update(data) {
|
||||
return axios.put('api/me', data)
|
||||
},
|
||||
}
|
||||
19
resources/js/src/services/book.js
Normal file
19
resources/js/src/services/book.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const resource = '/api/books';
|
||||
|
||||
export default {
|
||||
all(params = null){
|
||||
return axios.get(`${resource}`, { params })
|
||||
},
|
||||
get(id, params = null){
|
||||
return axios.get(`${resource}/${id}`, { params })
|
||||
},
|
||||
create(data){
|
||||
return axios.post(`${resource}`, data)
|
||||
},
|
||||
update(data, id){
|
||||
return axios.put(`${resource}/${id}`, data)
|
||||
},
|
||||
delete(id){
|
||||
return axios.delete(`${resource}/${id}`)
|
||||
}
|
||||
}
|
||||
19
resources/js/src/services/department.js
Normal file
19
resources/js/src/services/department.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const resource = '/api/departments';
|
||||
|
||||
export default {
|
||||
all(params = null){
|
||||
return axios.get(`${resource}`, { params })
|
||||
},
|
||||
get(id, params = null){
|
||||
return axios.get(`${resource}/${id}`, { params })
|
||||
},
|
||||
create(data){
|
||||
return axios.post(`${resource}`, data)
|
||||
},
|
||||
update(data, id){
|
||||
return axios.put(`${resource}/${id}`, data)
|
||||
},
|
||||
delete(id){
|
||||
return axios.delete(`${resource}/${id}`)
|
||||
}
|
||||
}
|
||||
43
resources/js/src/services/document.js
Normal file
43
resources/js/src/services/document.js
Normal file
@@ -0,0 +1,43 @@
|
||||
const resource = '/api/documents';
|
||||
|
||||
export default {
|
||||
all(params = null){
|
||||
return axios.get(`${resource}`, { params })
|
||||
},
|
||||
get(id, params = null){
|
||||
return axios.get(`${resource}/${id}`, { params })
|
||||
},
|
||||
create(data){
|
||||
return axios.post(`${resource}`, data)
|
||||
},
|
||||
update(data, id){
|
||||
return axios.put(`${resource}/${id}`, data)
|
||||
},
|
||||
delete(id){
|
||||
return axios.delete(`${resource}/${id}`)
|
||||
},
|
||||
assignReceivers(id, receiverIds){
|
||||
return this.update({
|
||||
action: 'attach',
|
||||
params: JSON.stringify(["receivers", ...receiverIds])
|
||||
}, id);
|
||||
},
|
||||
unassignReceivers(id, receiverIds){
|
||||
return this.update({
|
||||
action: 'detach',
|
||||
params: JSON.stringify(["receivers", ...receiverIds])
|
||||
}, id);
|
||||
},
|
||||
assignRecipients(id, organizeIds){
|
||||
return this.update({
|
||||
action: 'attach',
|
||||
params: JSON.stringify(["organizes", ...organizeIds])
|
||||
}, id);
|
||||
},
|
||||
unassignRecipients(id, organizeIds){
|
||||
return this.update({
|
||||
action: 'detach',
|
||||
params: JSON.stringify(["organizes", ...organizeIds])
|
||||
}, id);
|
||||
},
|
||||
}
|
||||
19
resources/js/src/services/documentType.js
Normal file
19
resources/js/src/services/documentType.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const resource = '/api/document-types';
|
||||
|
||||
export default {
|
||||
all(params = null){
|
||||
return axios.get(`${resource}`, { params })
|
||||
},
|
||||
get(id, params = null){
|
||||
return axios.get(`${resource}/${id}`, { params })
|
||||
},
|
||||
create(data){
|
||||
return axios.post(`${resource}`, data)
|
||||
},
|
||||
update(data, id){
|
||||
return axios.put(`${resource}/${id}`, data)
|
||||
},
|
||||
delete(id){
|
||||
return axios.delete(`${resource}/${id}`)
|
||||
}
|
||||
}
|
||||
29
resources/js/src/services/factory.js
Normal file
29
resources/js/src/services/factory.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import auth from "./auth";
|
||||
import user from "./user";
|
||||
import title from "./title";
|
||||
import role from "./role";
|
||||
import permission from "./permission";
|
||||
import department from "./department";
|
||||
import documentType from "./documentType";
|
||||
import book from "./book";
|
||||
import document from "./document";
|
||||
import signer from "./signer";
|
||||
import publisher from "./publisher";
|
||||
import attachment from "./attachment";
|
||||
import statistic from "./statistic";
|
||||
|
||||
export default {
|
||||
auth,
|
||||
user,
|
||||
title,
|
||||
role,
|
||||
permission,
|
||||
department,
|
||||
documentType,
|
||||
book,
|
||||
document,
|
||||
signer,
|
||||
publisher,
|
||||
attachment,
|
||||
statistic,
|
||||
}
|
||||
19
resources/js/src/services/permission.js
Normal file
19
resources/js/src/services/permission.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const resource = '/api/permissions';
|
||||
|
||||
export default {
|
||||
all(params = null){
|
||||
return axios.get(`${resource}`, { params })
|
||||
},
|
||||
get(id, params = null){
|
||||
return axios.get(`${resource}/${id}`, { params })
|
||||
},
|
||||
create(data){
|
||||
return axios.post(`${resource}`, data)
|
||||
},
|
||||
update(data, id){
|
||||
return axios.put(`${resource}/${id}`, data)
|
||||
},
|
||||
delete(id){
|
||||
return axios.delete(`${resource}/${id}`)
|
||||
}
|
||||
}
|
||||
19
resources/js/src/services/publisher.js
Normal file
19
resources/js/src/services/publisher.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const resource = '/api/organizes';
|
||||
|
||||
export default {
|
||||
all(params = null){
|
||||
return axios.get(`${resource}`, { params })
|
||||
},
|
||||
get(id, params = null){
|
||||
return axios.get(`${resource}/${id}`, { params })
|
||||
},
|
||||
create(data){
|
||||
return axios.post(`${resource}`, data)
|
||||
},
|
||||
update(data, id){
|
||||
return axios.put(`${resource}/${id}`, data)
|
||||
},
|
||||
delete(id){
|
||||
return axios.delete(`${resource}/${id}`)
|
||||
}
|
||||
}
|
||||
25
resources/js/src/services/role.js
Normal file
25
resources/js/src/services/role.js
Normal file
@@ -0,0 +1,25 @@
|
||||
const resource = '/api/roles';
|
||||
|
||||
export default {
|
||||
all(params = null){
|
||||
return axios.get(`${resource}`, { params })
|
||||
},
|
||||
get(id, params = null){
|
||||
return axios.get(`${resource}/${id}`, { params })
|
||||
},
|
||||
create(data){
|
||||
return axios.post(`${resource}`, data)
|
||||
},
|
||||
update(data, id){
|
||||
return axios.put(`${resource}/${id}`, data)
|
||||
},
|
||||
delete(id){
|
||||
return axios.delete(`${resource}/${id}`)
|
||||
},
|
||||
givePermission(permission, id) {
|
||||
return axios.post(`${resource}/${id}/permissions/${permission}`)
|
||||
},
|
||||
revokePermission(permission, id) {
|
||||
return axios.delete(`${resource}/${id}/permissions/${permission}`)
|
||||
},
|
||||
}
|
||||
19
resources/js/src/services/signer.js
Normal file
19
resources/js/src/services/signer.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const resource = '/api/signers';
|
||||
|
||||
export default {
|
||||
all(params = null){
|
||||
return axios.get(`${resource}`, { params })
|
||||
},
|
||||
get(id, params = null){
|
||||
return axios.get(`${resource}/${id}`, { params })
|
||||
},
|
||||
create(data){
|
||||
return axios.post(`${resource}`, data)
|
||||
},
|
||||
update(data, id){
|
||||
return axios.put(`${resource}/${id}`, data)
|
||||
},
|
||||
delete(id){
|
||||
return axios.delete(`${resource}/${id}`)
|
||||
}
|
||||
}
|
||||
29
resources/js/src/services/statistic.js
Normal file
29
resources/js/src/services/statistic.js
Normal file
@@ -0,0 +1,29 @@
|
||||
const resource = '/api/statistic';
|
||||
|
||||
export default {
|
||||
download(params, ext) {
|
||||
return axios.get(`${resource}`, {
|
||||
params: params,
|
||||
responseType: 'blob',
|
||||
}).then(response => {
|
||||
const blob = new Blob([response.data]);
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
const contentDisposition = response.headers['content-disposition'];
|
||||
let fileName = 'unknown';
|
||||
if (contentDisposition) {
|
||||
const fileNameMatch = contentDisposition.match(/filename="(.+)"/);
|
||||
if (fileNameMatch.length === 2)
|
||||
fileName = fileNameMatch[1];
|
||||
}
|
||||
link.setAttribute('download', fileName);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
return response
|
||||
})
|
||||
},
|
||||
}
|
||||
19
resources/js/src/services/title.js
Normal file
19
resources/js/src/services/title.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const resource = '/api/titles';
|
||||
|
||||
export default {
|
||||
all(params = null){
|
||||
return axios.get(`${resource}`, { params })
|
||||
},
|
||||
get(id, params = null){
|
||||
return axios.get(`${resource}/${id}`, { params })
|
||||
},
|
||||
create(data){
|
||||
return axios.post(`${resource}`, data)
|
||||
},
|
||||
update(data, id){
|
||||
return axios.put(`${resource}/${id}`, data)
|
||||
},
|
||||
delete(id){
|
||||
return axios.delete(`${resource}/${id}`)
|
||||
}
|
||||
}
|
||||
59
resources/js/src/services/user.js
Normal file
59
resources/js/src/services/user.js
Normal file
@@ -0,0 +1,59 @@
|
||||
const resource = '/api/users';
|
||||
|
||||
export default {
|
||||
all(params = null) {
|
||||
return axios.get(`${resource}`, { params })
|
||||
},
|
||||
get(id, params = null) {
|
||||
return axios.get(`${resource}/${id}`, { params })
|
||||
},
|
||||
create(data) {
|
||||
return axios.post(`${resource}`, data)
|
||||
},
|
||||
update(data, id) {
|
||||
return axios.put(`${resource}/${id}`, data)
|
||||
},
|
||||
delete(id) {
|
||||
return axios.delete(`${resource}/${id}`)
|
||||
},
|
||||
giveRole(role, id) {
|
||||
return axios.post(`${resource}/${id}/roles/${role}`)
|
||||
},
|
||||
revokeRole(role, id) {
|
||||
return axios.delete(`${resource}/${id}/roles/${role}`)
|
||||
},
|
||||
givePermission(permission, id) {
|
||||
return axios.post(`${resource}/${id}/permissions/${permission}`)
|
||||
},
|
||||
revokePermission(permission, id) {
|
||||
return axios.delete(`${resource}/${id}/permissions/${permission}`)
|
||||
},
|
||||
import(data) {
|
||||
return axios.post(`${resource}/io/import`, data)
|
||||
},
|
||||
export(params = null) {
|
||||
return axios.get(`${resource}/io/export`, {
|
||||
params: params,
|
||||
responseType: 'blob',
|
||||
}).then(response => {
|
||||
const blob = new Blob([response.data]);
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
const contentDisposition = response.headers['content-disposition'];
|
||||
let fileName = 'unknown';
|
||||
if (contentDisposition) {
|
||||
const fileNameMatch = contentDisposition.match(/filename="(.+)"/);
|
||||
if (fileNameMatch.length === 2)
|
||||
fileName = fileNameMatch[1];
|
||||
}
|
||||
link.setAttribute('download', fileName);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
return response
|
||||
})
|
||||
},
|
||||
}
|
||||
78
resources/js/src/state/modules/auth.js
Normal file
78
resources/js/src/state/modules/auth.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import authService from '../../services/auth'
|
||||
|
||||
export const state = {
|
||||
currentUser: JSON.parse(sessionStorage.getItem('authUser')),
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
SET_CURRENT_USER(state, newValue) {
|
||||
state.currentUser = newValue
|
||||
saveSessionState('authUser', newValue)
|
||||
saveState('auth.currentUser', newValue)
|
||||
},
|
||||
UNSET_CURRENT_USER(state) {
|
||||
state.currentUser = null
|
||||
window.localStorage.removeItem('auth.currentUser')
|
||||
window.sessionStorage.removeItem('authUser')
|
||||
},
|
||||
}
|
||||
|
||||
export const getters = {
|
||||
// Whether the user is currently logged in.
|
||||
loggedIn(state) {
|
||||
return !!state.currentUser
|
||||
},
|
||||
userId(state) {
|
||||
return state.currentUser.id
|
||||
}
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
// This is automatically run in `src/state/store.js` when the app
|
||||
// starts, along with any other actions named `init` in other modules.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
init({ state, dispatch }) {
|
||||
dispatch('validate')
|
||||
},
|
||||
|
||||
// Logs in the current user.
|
||||
login({ commit, dispatch, getters }, { email, password } = {}) {
|
||||
return authService.login({email, password}).then(response => {
|
||||
commit('SET_CURRENT_USER', response.data)
|
||||
return response
|
||||
})
|
||||
},
|
||||
|
||||
// Logs out the current user.
|
||||
logout({ commit }) {
|
||||
commit('UNSET_CURRENT_USER')
|
||||
return authService.logout()
|
||||
},
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
resetPassword({ commit, dispatch, getters }, { email } = {}) {
|
||||
|
||||
},
|
||||
|
||||
// Validates the current user's token and refreshes it
|
||||
// with new data from the API.
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
validate({ commit, state }) {
|
||||
return authService.me().then(response => {
|
||||
commit('SET_CURRENT_USER', response.data)
|
||||
return response.data
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
// ===
|
||||
// Private helpers
|
||||
// ===
|
||||
|
||||
function saveState(key, state) {
|
||||
window.localStorage.setItem(key, JSON.stringify(state))
|
||||
}
|
||||
|
||||
function saveSessionState(key, state) {
|
||||
window.sessionStorage.setItem(key, JSON.stringify(state))
|
||||
}
|
||||
80
resources/js/src/state/modules/index.js
Normal file
80
resources/js/src/state/modules/index.js
Normal file
@@ -0,0 +1,80 @@
|
||||
// Register each file as a corresponding Vuex module. Module nesting
|
||||
// will mirror [sub-]directory hierarchy and modules are namespaced
|
||||
// as the camelCase equivalent of their file name.
|
||||
|
||||
import camelCase from 'lodash/camelCase'
|
||||
|
||||
const modulesCache = {}
|
||||
const storeData = { modules: {} }
|
||||
|
||||
;(function updateModules() {
|
||||
// Allow us to dynamically require all Vuex module files.
|
||||
// https://webpack.js.org/guides/dependency-management/#require-context
|
||||
const requireModule = require.context(
|
||||
// Search for files in the current directory.
|
||||
'.',
|
||||
// Search for files in subdirectories.
|
||||
true,
|
||||
// Include any .js files that are not this file or a unit test.
|
||||
/^((?!index|\.unit\.).)*\.js$/
|
||||
)
|
||||
|
||||
// For every Vuex module...
|
||||
requireModule.keys().forEach((fileName) => {
|
||||
const moduleDefinition = requireModule(fileName)
|
||||
|
||||
// Skip the module during hot reload if it refers to the
|
||||
// same module definition as the one we have cached.
|
||||
if (modulesCache[fileName] === moduleDefinition) return
|
||||
|
||||
// Update the module cache, for efficient hot reloading.
|
||||
modulesCache[fileName] = moduleDefinition
|
||||
|
||||
// Get the module path as an array.
|
||||
const modulePath = fileName
|
||||
// Remove the "./" from the beginning.
|
||||
.replace(/^\.\//, '')
|
||||
// Remove the file extension from the end.
|
||||
.replace(/\.\w+$/, '')
|
||||
// Split nested modules into an array path.
|
||||
.split(/\//)
|
||||
// camelCase all module namespaces and names.
|
||||
.map(camelCase)
|
||||
|
||||
// Get the modules object for the current path.
|
||||
const { modules } = getNamespace(storeData, modulePath)
|
||||
|
||||
// Add the module to our modules object.
|
||||
modules[modulePath.pop()] = {
|
||||
// Modules are namespaced by default.
|
||||
namespaced: true,
|
||||
...moduleDefinition,
|
||||
}
|
||||
})
|
||||
|
||||
// If the environment supports hot reloading...
|
||||
if (module.hot) {
|
||||
// Whenever any Vuex module is updated...
|
||||
module.hot.accept(requireModule.id, () => {
|
||||
// Update `storeData.modules` with the latest definitions.
|
||||
updateModules()
|
||||
// Trigger a hot update in the store.
|
||||
require('../store').default.hotUpdate({ modules: storeData.modules })
|
||||
})
|
||||
}
|
||||
})()
|
||||
|
||||
// Recursively get the namespace of a Vuex module, even if nested.
|
||||
function getNamespace(subtree, path) {
|
||||
if (path.length === 1) return subtree
|
||||
|
||||
const namespace = path.shift()
|
||||
subtree.modules[namespace] = {
|
||||
modules: {},
|
||||
namespaced: true,
|
||||
...subtree.modules[namespace],
|
||||
}
|
||||
return getNamespace(subtree.modules[namespace], path)
|
||||
}
|
||||
|
||||
export default storeData.modules
|
||||
32
resources/js/src/state/store.js
Normal file
32
resources/js/src/state/store.js
Normal file
@@ -0,0 +1,32 @@
|
||||
require('../../bootstrap');
|
||||
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
import modules from './modules'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const state = {
|
||||
sidebarShow: 'responsive',
|
||||
sidebarMinimize: false
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
toggleSidebarDesktop (state) {
|
||||
console.log()
|
||||
},
|
||||
toggleSidebarMobile (state) {
|
||||
const sidebarClosed = [false, 'responsive'].includes(state.sidebarShow)
|
||||
state.sidebarShow = sidebarClosed ? true : 'responsive'
|
||||
},
|
||||
set (state, [variable, value]) {
|
||||
state[variable] = value
|
||||
}
|
||||
}
|
||||
|
||||
export default new Vuex.Store({
|
||||
state,
|
||||
mutations,
|
||||
modules,
|
||||
})
|
||||
121
resources/js/src/views/Dashboard.vue
Normal file
121
resources/js/src/views/Dashboard.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol v-for="book in books" sm="6" md="4" :key="book.id">
|
||||
<CWidgetBrand
|
||||
color="white"
|
||||
:right-header="''+book.unread"
|
||||
right-footer="Chưa xem"
|
||||
:left-header="''+book.count"
|
||||
left-footer="Đã nhận"
|
||||
>
|
||||
<h3 style="color:#3c4b64" class="m-3">{{book.name}}</h3>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-grid" /> Văn bản gần đây
|
||||
</CCardHeader>
|
||||
<CCardBody class="p-0">
|
||||
<CDataTable
|
||||
hover
|
||||
striped
|
||||
:loading="loading"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
clickable-rows
|
||||
@row-clicked="rowClicked"
|
||||
>
|
||||
<template #type="{item}">
|
||||
<td>{{item.type.name}}</td>
|
||||
</template>
|
||||
<template #book="{item}">
|
||||
<td>{{item.book.name}}</td>
|
||||
</template>
|
||||
<template #abstract="{item}">
|
||||
<td>
|
||||
<label :class="!item.seen ? highlightStyle : ''">{{item.abstract}}</label>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../services/factory";
|
||||
|
||||
export default {
|
||||
name: "Dashboard",
|
||||
data() {
|
||||
return {
|
||||
books: [],
|
||||
loading: true,
|
||||
items: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
computed: {
|
||||
query() {
|
||||
return {
|
||||
...this.withQuery,
|
||||
...this.orderQuery,
|
||||
};
|
||||
},
|
||||
withQuery() {
|
||||
return {
|
||||
with: "book;type",
|
||||
};
|
||||
},
|
||||
orderQuery() {
|
||||
return {
|
||||
orderBy: "updated_at",
|
||||
sortedBy: "desc",
|
||||
};
|
||||
},
|
||||
fields() {
|
||||
return [
|
||||
{ key: "symbol", label: "Số ký hiệu" },
|
||||
{
|
||||
key: "abstract",
|
||||
label: "Trích yếu",
|
||||
_classes: "w-50 font-weight-bold",
|
||||
},
|
||||
{ key: "type", label: "Loại" },
|
||||
{ key: "book", label: "Sổ" },
|
||||
];
|
||||
},
|
||||
highlightStyle() {
|
||||
return "font-weight-bold";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.fetchBooks();
|
||||
this.fetchDocuments();
|
||||
},
|
||||
async fetchBooks() {
|
||||
const bookResponse = await services.book.all();
|
||||
this.books = bookResponse.data;
|
||||
return bookResponse;
|
||||
},
|
||||
async fetchDocuments() {
|
||||
this.loading = true;
|
||||
const response = await services.document.all(this.query);
|
||||
this.items = response.data.data;
|
||||
this.loading = false;
|
||||
},
|
||||
rowClicked(item, index) {
|
||||
this.$router.push({ path: `/documents/${item.id}` });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
96
resources/js/src/views/base/Breadcrumbs.vue
Normal file
96
resources/js/src/views/base/Breadcrumbs.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Bootstrap Breadcrumb</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/breadcrumb"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBreadcrumb :items="items"/>
|
||||
<CBreadcrumb :items="items2"/>
|
||||
<CBreadcrumb :items="items3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Breadcrumbs',
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
text: 'Admin',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Manage',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Library'
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
items2: [
|
||||
{
|
||||
text: 'Go to dashboard',
|
||||
to: '/dashboard'
|
||||
},
|
||||
{
|
||||
text: 'Go to widgets',
|
||||
to: '/Widgets'
|
||||
},
|
||||
{
|
||||
text: 'Go to Google',
|
||||
href: 'http://google.com'
|
||||
},
|
||||
{
|
||||
text: 'Current page'
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
items3: [
|
||||
{
|
||||
text: 'Added',
|
||||
to: '#2',
|
||||
addClasses: 'font-xl'
|
||||
},
|
||||
{
|
||||
text: 'Custom',
|
||||
to: '#3',
|
||||
addClasses: 'font-xl'
|
||||
},
|
||||
{
|
||||
text: 'Classes',
|
||||
to: '#4',
|
||||
addClasses: 'font-xl text-danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.breadcrumb-item + .font-xl.breadcrumb-item::before {
|
||||
color: rgb(140, 195, 38);
|
||||
content: '>>';
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
289
resources/js/src/views/base/Cards.vue
Normal file
289
resources/js/src/views/base/Cards.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card title
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/card-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
<CCardFooter>Card Footer</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader><CIcon name="cil-check"/> Card with icon</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with switch
|
||||
<CSwitch
|
||||
class="float-right"
|
||||
size="sm"
|
||||
shape="pill"
|
||||
color="info"
|
||||
data-on="On"
|
||||
data-off="Off"
|
||||
:checked="true"
|
||||
/>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with label
|
||||
<CBadge color="success" class="float-right">Success</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with label
|
||||
<CBadge shape="pill" color="danger" class="float-right">42</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="primary">
|
||||
<CCardHeader>Card outline primary</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="secondary">
|
||||
<CCardHeader>Card outline secondary</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="success">
|
||||
<CCardHeader>Card outline success</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="info">
|
||||
<CCardHeader>Card outline info</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="warning">
|
||||
<CCardHeader>Card outline warning</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="danger">
|
||||
<CCardHeader>Card outline danger</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="primary">
|
||||
<CCardHeader>Card with primary accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="secondary">
|
||||
<CCardHeader>Card with secondary accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="success">
|
||||
<CCardHeader>Card with success accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="info">
|
||||
<CCardHeader>Card with info accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="info">
|
||||
<CCardHeader>Card with info accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="danger">
|
||||
<CCardHeader>Card with danger accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="primary" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard
|
||||
color="success"
|
||||
class="text-center"
|
||||
body-wrapper
|
||||
text-color="white"
|
||||
>
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="info" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="warning" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="danger" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="secondary" class="text-center" body-wrapper>
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="primary" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="success" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="info" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="warning" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="danger" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<transition name="fade">
|
||||
<CCard v-if="show" color="secondary">
|
||||
<CCardHeader>
|
||||
Card with header actions
|
||||
<div class="card-header-actions">
|
||||
<CLink href="#" class="card-header-action btn-setting">
|
||||
<CIcon name="cil-settings"/>
|
||||
</CLink>
|
||||
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
|
||||
<CIcon :name="`cil-chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
|
||||
</CLink>
|
||||
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
|
||||
<CIcon name="cil-x-circle"/>
|
||||
</CLink>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCollapse :show="isCollapsed" :duration="400">
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</transition>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Cards',
|
||||
data: function () {
|
||||
return {
|
||||
show: true,
|
||||
isCollapsed: true,
|
||||
loremIpsum: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
50
resources/js/src/views/base/Carousels.vue
Normal file
50
resources/js/src/views/base/Carousels.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol md="12" lg="7">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Carousel</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/carousel"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCarousel
|
||||
arrows
|
||||
indicators
|
||||
animate
|
||||
height="400px"
|
||||
>
|
||||
<CCarouselItem
|
||||
captionHeader="First Slide"
|
||||
image="https://picsum.photos/1024/480/?image=52"
|
||||
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
/>
|
||||
<CCarouselItem
|
||||
captionHeader="Blank page"
|
||||
:image="{ placeholderColor: 'grey' }"
|
||||
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
/>
|
||||
<CCarouselItem
|
||||
image="https://picsum.photos/1024/480/?image=54"
|
||||
/>
|
||||
</CCarousel>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Carousels'
|
||||
}
|
||||
</script>
|
||||
80
resources/js/src/views/base/Collapses.vue
Normal file
80
resources/js/src/views/base/Collapses.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Collapse </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/collapse"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton @click="collapse = !collapse" color="primary" class="mb-2">
|
||||
Toggle Collapse
|
||||
</CButton>
|
||||
<CCollapse :show="collapse" :duration="400">
|
||||
<CCard body-wrapper>
|
||||
<CCardText>Collapse contents Here</CCardText>
|
||||
<CButton
|
||||
@click="innerCollapse = !innerCollapse"
|
||||
size="sm"
|
||||
color="secondary"
|
||||
>
|
||||
Toggle Inner Collapse
|
||||
</CButton>
|
||||
<CCollapse :show="innerCollapse" class="mt-2">
|
||||
<CCard body-wrapper>Hello!</CCard>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader
|
||||
@click="cardCollapse = !cardCollapse"
|
||||
class="btn text-left"
|
||||
>
|
||||
<strong>Collapsible card</strong>
|
||||
</CCardHeader>
|
||||
<CCollapse :show="cardCollapse">
|
||||
<CCardBody class="m-1">
|
||||
{{text}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Collapses',
|
||||
data () {
|
||||
return {
|
||||
collapse: false,
|
||||
cardCollapse: true,
|
||||
innerCollapse: false,
|
||||
text: `
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
|
||||
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
|
||||
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
|
||||
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
|
||||
wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
|
||||
vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
|
||||
synth nesciunt you probably haven't heard of them accusamus labore VHS.
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
881
resources/js/src/views/base/Forms.vue
Normal file
881
resources/js/src/views/base/Forms.vue
Normal file
@@ -0,0 +1,881 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Credit Card </strong> <small>Form</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/form-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CInput
|
||||
label="Name"
|
||||
placeholder="Enter your name"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CInput
|
||||
label="Credit Card Number"
|
||||
placeholder="0000 0000 0000 0000"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CSelect
|
||||
label="Month"
|
||||
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CSelect
|
||||
label="Year"
|
||||
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CInput
|
||||
label="CVV/CVC"
|
||||
placeholder="123"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Company </strong><small>Form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Company"
|
||||
placeholder="Enter your company name"
|
||||
/>
|
||||
<CInput
|
||||
label="VAT"
|
||||
placeholder="PL1234567890"
|
||||
/>
|
||||
<CInput
|
||||
label="Street"
|
||||
placeholder="Enter street name"
|
||||
/>
|
||||
<CRow>
|
||||
<CCol sm="8">
|
||||
<CInput
|
||||
label="City"
|
||||
placeholder="Enter your city"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CInput
|
||||
label="Postal code"
|
||||
placeholder="Postal code"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CInput
|
||||
label="Country"
|
||||
placeholder="Country name"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Basic Form</strong> Elements
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
description="Let us know your full name."
|
||||
label="Enter your name"
|
||||
horizontal
|
||||
autocomplete="name"
|
||||
/>
|
||||
<CInput
|
||||
label="Static"
|
||||
value="Username"
|
||||
horizontal
|
||||
plaintext
|
||||
/>
|
||||
<CInput
|
||||
label="Text input"
|
||||
description="This is a help text"
|
||||
placeholder="Text"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
label="Date"
|
||||
type="date"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
label="Email input"
|
||||
description="Please enter your email"
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
horizontal
|
||||
autocomplete="email"
|
||||
/>
|
||||
<CInput
|
||||
label="Password Input"
|
||||
description="Please enter a complex password"
|
||||
placeholder="Enter your password"
|
||||
type="password"
|
||||
horizontal
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
<CInput
|
||||
label="Disabled Input"
|
||||
placeholder="Disabled"
|
||||
horizontal
|
||||
disabled
|
||||
/>
|
||||
<CTextarea
|
||||
label="Textarea"
|
||||
placeholder="Content..."
|
||||
horizontal
|
||||
rows="9"
|
||||
/>
|
||||
<CSelect
|
||||
label="Select"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Large select"
|
||||
size="lg"
|
||||
horizontal
|
||||
:value.sync="selectedOption"
|
||||
:options="selectOptions"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Small select"
|
||||
size="sm"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Select"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
disabled
|
||||
/>
|
||||
<template v-for="(name, key) in checkboxNames">
|
||||
<CRow form class="form-group" :key="name">
|
||||
<CCol tag="label" sm="3" class="col-form-label">
|
||||
{{name}}
|
||||
</CCol>
|
||||
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
|
||||
<CInputCheckbox
|
||||
v-for="(option, optionIndex) in options"
|
||||
:key="key + option"
|
||||
:label="option"
|
||||
:value="option"
|
||||
:custom="key > 1"
|
||||
:name="`Option 1${key}`"
|
||||
:checked="optionIndex === key"
|
||||
:inline="key % 2 === 1"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
<template v-for="(name, key) in radioNames">
|
||||
<CRow form class="form-group" :key="name">
|
||||
<CCol sm="3">
|
||||
{{name}}
|
||||
</CCol>
|
||||
<CInputRadioGroup
|
||||
class="col-sm-9"
|
||||
:options="options"
|
||||
:custom="key > 1"
|
||||
:checked="`Option ${key}`"
|
||||
:inline="key % 2 === 1"
|
||||
/>
|
||||
</CRow>
|
||||
</template>
|
||||
<CInputFile
|
||||
label="File input"
|
||||
horizontal
|
||||
/>
|
||||
<CInputFile
|
||||
label="Multiple file input"
|
||||
horizontal
|
||||
multiple
|
||||
/>
|
||||
<CInputFile
|
||||
label="File custom input"
|
||||
horizontal
|
||||
custom
|
||||
/>
|
||||
<CInputFile
|
||||
label="Multiple file custom input"
|
||||
horizontal
|
||||
multiple
|
||||
custom
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Inline</strong> Form
|
||||
</CCardHeader>
|
||||
|
||||
<CCardBody>
|
||||
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-2"
|
||||
placeholder="Jane Doe"
|
||||
>
|
||||
<template #label>
|
||||
<small>Name: </small>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="jane.doe@example.com"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #label>
|
||||
<small>Email: </small>
|
||||
</template>
|
||||
</CInput>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Horizontal</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
type="email"
|
||||
description="Please enter your email."
|
||||
autocomplete="email"
|
||||
label="Email"
|
||||
horizontal
|
||||
placeholder="Enter Email..."
|
||||
/>
|
||||
<CInput
|
||||
type="password"
|
||||
description="Please enter your password."
|
||||
autocomplete="current-password"
|
||||
label="Password"
|
||||
horizontal
|
||||
placeholder="Enter Password..."
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Normal</strong> Form
|
||||
</CCardHeader>
|
||||
<CForm novalidate>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
type="email"
|
||||
description="Please enter your email."
|
||||
autocomplete="email"
|
||||
label="Email"
|
||||
placeholder="Enter Email..."
|
||||
required
|
||||
was-validated
|
||||
/>
|
||||
<CInput
|
||||
type="password"
|
||||
description="Please enter your password."
|
||||
autocomplete="current-password"
|
||||
label="Password"
|
||||
placeholder="Enter Password..."
|
||||
required
|
||||
was-validated
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CForm>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input <strong>Grid</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="3">
|
||||
<CInput class="mb-0" placeholder=".col-sm-3"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="4">
|
||||
<CInput class="mb-0" placeholder=".col-sm-4"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="5">
|
||||
<CInput class="mb-0" placeholder=".col-sm-5"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CInput class="mb-0" placeholder=".col-sm-6"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="7">
|
||||
<CInput class="mb-0" placeholder=".col-sm-7"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="8">
|
||||
<CInput class="mb-0" placeholder=".col-sm-8"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="9">
|
||||
<CInput class="mb-0" placeholder=".col-sm-9"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="10">
|
||||
<CInput class="mb-0" placeholder=".col-sm-10"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="11">
|
||||
<CInput class="mb-0" placeholder=".col-sm-11"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="12">
|
||||
<CInput class="mb-0" placeholder=".col-sm-12"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-user"/> Login</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input <strong>Sizes</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Small input"
|
||||
size="sm"
|
||||
horizontal
|
||||
placeholder="size='sm'"
|
||||
/>
|
||||
<CInput
|
||||
label="Default input"
|
||||
horizontal
|
||||
placeholder="normal"
|
||||
/>
|
||||
<CInput
|
||||
label="Large input"
|
||||
size="lg"
|
||||
horizontal
|
||||
placeholder="size='lg'"
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
|
||||
<CCol sm="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Basic Validation</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm validated novalidate>
|
||||
<CInput
|
||||
label="Input is valid"
|
||||
valid-feedback="Input is not required."
|
||||
/>
|
||||
<CInput
|
||||
label="Input is invalid"
|
||||
required
|
||||
valid-feedback="Thank you :)"
|
||||
invalid-feedback="Please provide a required input."
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Custom Validation</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
label="Input is valid"
|
||||
valid-feedback="Input is valid."
|
||||
invalid-feedback="Please provide at least 4 characters."
|
||||
value="Valid value"
|
||||
:is-valid="validator"
|
||||
/>
|
||||
<CInput
|
||||
label="Input is invalid"
|
||||
valid-feedback="Thank you :)"
|
||||
invalid-feedback="Please provide at least 4 characters."
|
||||
:is-valid="validator"
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Icon/Text</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-open"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="ex. $1.000.000"
|
||||
append=".00"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-euro"/></template>
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Buttons</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend>
|
||||
<CButton color="primary">
|
||||
<CIcon name="cil-magnifying-glass"/> Search
|
||||
</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append>
|
||||
<CButton type="submit" color="primary">Submit</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #prepend>
|
||||
<CButton color="primary"><CIcon name="cib-facebook" height="14"/></CButton>
|
||||
</template>
|
||||
<template #append>
|
||||
<CButton color="primary"><CIcon name="cib-twitter" height="14"/></CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Dropdowns</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
right
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput placeholder="...">
|
||||
|
||||
<template #prepend>
|
||||
<CDropdown
|
||||
togglerText="Split"
|
||||
color="primary"
|
||||
split
|
||||
>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
right
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow
|
||||
class="form-group"
|
||||
v-for="(number, key) in [4,5,6,7,8]"
|
||||
:key="key"
|
||||
>
|
||||
<CCol :col="12 - number">
|
||||
<CInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
|
||||
</CCol>
|
||||
<CCol :col="number">
|
||||
<CInput class="mb-0" :placeholder="`.col-md-${number}`"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton size="sm" color="primary">Action</CButton>
|
||||
<CButton size="sm" color="danger">Action</CButton>
|
||||
<CButton size="sm" color="warning">Action</CButton>
|
||||
<CButton size="sm" color="info">Action</CButton>
|
||||
<CButton size="sm" color="success">Action</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input Grid for small devices! <small> <code>.col-*</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow
|
||||
class="form-group"
|
||||
v-for="(number, key) in [4,5,6,7,8]"
|
||||
:key="key"
|
||||
>
|
||||
<CCol :col="number">
|
||||
<CInput class="mb-0" :placeholder="`.col-${number}`"/>
|
||||
</CCol>
|
||||
<CCol :col="12 - number">
|
||||
<CInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton size="sm" color="primary">Action</CButton>
|
||||
<CButton size="sm" color="danger">Action</CButton>
|
||||
<CButton size="sm" color="warning">Action</CButton>
|
||||
<CButton size="sm" color="info">Action</CButton>
|
||||
<CButton size="sm" color="success">Action</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput prepend="Username">
|
||||
<template #append-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
prepend="Email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
prepend="Password"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" size="sm" color="primary">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput placeholder="Username">
|
||||
<template #append-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" class="btn btn-sm btn-secondary">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" size="sm" color="success">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol lg="12">
|
||||
<transition name="fade">
|
||||
<CCard v-if="show">
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-pencil"/> Form Elements
|
||||
<div class="card-header-actions">
|
||||
<CLink href="#" class="card-header-action btn-setting">
|
||||
<CIcon name="cil-settings"/>
|
||||
</CLink>
|
||||
<CLink
|
||||
class="card-header-action btn-minimize"
|
||||
@click="formCollapsed=!formCollapsed"
|
||||
>
|
||||
<CIcon :name="`cil-chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
|
||||
</CLink>
|
||||
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
||||
<CIcon name="cil-x-circle"/>
|
||||
</CLink>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCollapse :show="formCollapsed">
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Prepended text"
|
||||
description="Here's some help text"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
prepend="@"
|
||||
/>
|
||||
<CInput
|
||||
label="Appended text"
|
||||
append=".00"
|
||||
description="Here's some help text"
|
||||
/>
|
||||
<CInput
|
||||
label="Appended and prepended text"
|
||||
append=".00"
|
||||
description="Here's some help text"
|
||||
prepend="$"
|
||||
/>
|
||||
<CInput
|
||||
label="Append with button"
|
||||
description="Here's some help text"
|
||||
>
|
||||
<template #append>
|
||||
<CButton color="primary">Go!</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput label="Two-buttons append">
|
||||
<template #append>
|
||||
<CButton color="primary">Search</CButton>
|
||||
<CButton color="danger">Options</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<div class="form-actions">
|
||||
<CButton type="submit" color="primary">Save changes</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</transition>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Forms',
|
||||
data () {
|
||||
return {
|
||||
selected: [], // Must be an array reference!
|
||||
show: true,
|
||||
horizontal: { label:'col-3', input:'col-9' },
|
||||
options: ['Option 1', 'Option 2', 'Option 3'],
|
||||
selectOptions: [
|
||||
'Option 1', 'Option 2', 'Option 3',
|
||||
{
|
||||
value: ['some value', 'another value'],
|
||||
label: 'Selected option'
|
||||
}
|
||||
],
|
||||
selectedOption: ['some value', 'another value'],
|
||||
|
||||
formCollapsed: true,
|
||||
checkboxNames: ['Checkboxes', 'Inline Checkboxes',
|
||||
'Checkboxes - custom', 'Inline Checkboxes - custom'],
|
||||
radioNames: ['Radios', 'Inline Radios',
|
||||
'Radios - custom', 'Inline Radios - custom']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validator (val) {
|
||||
return val ? val.length >= 4 : false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
90
resources/js/src/views/base/Jumbotrons.vue
Normal file
90
resources/js/src/views/base/Jumbotrons.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Jumbotron </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/jumbotron"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron>
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
|
||||
<p>For more information visit website</p>
|
||||
<CButton color="primary" href="#">More Info</CButton>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
|
||||
<small>with slots</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron header="Bootstrap 4" lead="">
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</p>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
<CButton color="primary" href="#">Do Something</CButton>
|
||||
<CButton color="success" href="#">Do Something Else</CButton>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron
|
||||
color="info"
|
||||
text-color="white"
|
||||
border-color="dark"
|
||||
>
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</p>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Jumbotrons'
|
||||
}
|
||||
</script>
|
||||
285
resources/js/src/views/base/ListGroups.vue
Normal file
285
resources/js/src/views/base/ListGroups.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap list group </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/list-group"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> List group </strong><small>active items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>disabled items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>actionable items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
|
||||
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
|
||||
<CListGroupItem href="#">Action links are easy</CListGroupItem>
|
||||
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem tag="button">Button item</CListGroupItem>
|
||||
<CListGroupItem tag="button">I am a button</CListGroupItem>
|
||||
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
|
||||
<CListGroupItem tag="button">This is a button too</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>with badges</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Cras justo odio
|
||||
<CBadge color="primary" shape="pill">14</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Dapibus ac facilisis in
|
||||
<CBadge color="primary" shape="pill">2</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Morbi leo risus
|
||||
<CBadge color="primary" shape="pill">1</CBadge>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>colors active</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>inside cards</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardGroup deck>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<b>Card with list group</b>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardText class="mt-2">
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader><b>Card with flush list group</b></CCardHeader>
|
||||
<CListGroup flush>
|
||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> List group </strong><small>custom content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem
|
||||
href="#"
|
||||
active
|
||||
class="flex-column align-items-start"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem href="#" class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem href="#" disabled class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">Disabled List group item</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ListGroups'
|
||||
}
|
||||
</script>
|
||||
179
resources/js/src/views/base/Navbars.vue
Normal file
179
resources/js/src/views/base/Navbars.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navbar </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/navbar"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar
|
||||
expandable="md"
|
||||
color="info"
|
||||
>
|
||||
<CToggler inNavbar @click="show=!show"/>
|
||||
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
||||
<CCollapse :show="show" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<CNavItem href="#" disabled>Disabled</CNavItem>
|
||||
</CNavbarNav>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<CNavbarNav class="ml-auto">
|
||||
<CForm inline class="align-middle">
|
||||
<CInput
|
||||
class="mr-2 my-0"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton color="light" size="sm">
|
||||
Search
|
||||
</CButton>
|
||||
</CForm>
|
||||
|
||||
<CDropdown
|
||||
toggler-text="Lang"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
|
||||
<CDropdown
|
||||
in-nav
|
||||
toggler-text="User"
|
||||
>
|
||||
<CDropdownItem>Profile</CDropdownItem>
|
||||
<CDropdownItem>Signout</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>brand</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<!-- Image and text -->
|
||||
<CNavbar color="faded" light>
|
||||
<CNavbarBrand href="#">
|
||||
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
|
||||
CoreuiVue
|
||||
</CNavbarBrand>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>text</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar toggleable="sm" light color="light">
|
||||
<CToggler inNavbar @click="navbarText=!navbarText"/>
|
||||
<CNavbarBrand>CoreuiVue</CNavbarBrand>
|
||||
<CCollapse :show="navbarText" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavbarText>Navbar text</CNavbarText>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>dropdown</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar expandable="sm" color="primary" >
|
||||
<CToggler inNavbar @click="navbarDropdown = !navbarDropdown"/>
|
||||
<CCollapse :show="navbarDropdown" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Home</CNavItem>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<!-- Navbar dropdowns -->
|
||||
<CDropdown
|
||||
toggler-text="Lang"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
toggler-text="User"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>Account</CDropdownItem>
|
||||
<CDropdownItem>Settings</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar light color="light">
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton color="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>input group</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar light color="light">
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Navbars',
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
navbarText: false,
|
||||
navbarDropdown: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
164
resources/js/src/views/base/Navs.vue
Normal file
164
resources/js/src/views/base/Navs.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Bootstrap Navs</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/nav"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem title="Link"/>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem active>
|
||||
<CIcon name="cil-basket"/>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CIcon name="cil-settings"/>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CIcon name="cil-bell"/>
|
||||
</CNavItem>
|
||||
<CNavItem disabled>
|
||||
<CIcon name="cil-envelope-closed"/>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>tab style</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="tabs">
|
||||
<CNavItem active>
|
||||
Active
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Link
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Another Link
|
||||
</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader @click="item++">
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>pill style</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>fill tabs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav fill variant="tabs">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>justified tabs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav justified variant="tabs">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>dropdown support</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CDropdown
|
||||
in-nav
|
||||
placement="bottom-end"
|
||||
button-content="Dropdown"
|
||||
>
|
||||
<CDropdownItem>one</CDropdownItem>
|
||||
<CDropdownItem>two</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>three</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>vertical variation</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="3" class="m-0">
|
||||
<CNav vertical pills >
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Navs'
|
||||
}
|
||||
</script>
|
||||
94
resources/js/src/views/base/Paginations.vue
Normal file
94
resources/js/src/views/base/Paginations.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Pagination </strong>
|
||||
<small>size</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/pagination"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default</h6>
|
||||
<CPagination
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
responsive
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Small</h6>
|
||||
<CPagination
|
||||
size="sm"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"/>
|
||||
<br>
|
||||
|
||||
<div class="d-md-down-none">
|
||||
<h6>Large</h6>
|
||||
<CPagination
|
||||
size="lg"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
responsive
|
||||
/>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Pagination </strong>
|
||||
<small>alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Left alignment (default)</h6>
|
||||
<CPagination
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Center alignment</h6>
|
||||
<CPagination
|
||||
align="center"
|
||||
:pages="10"
|
||||
:active-page.sync="currentPage"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Right (end) alignment</h6>
|
||||
<CPagination
|
||||
align="end"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Paginations',
|
||||
data () {
|
||||
return {
|
||||
currentPage: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
95
resources/js/src/views/base/Popovers.vue
Normal file
95
resources/js/src/views/base/Popovers.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Popovers</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/directives/popover"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover header',
|
||||
content: 'I am popover content!'
|
||||
}"
|
||||
>
|
||||
Click Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: 'I start <strong>open</strong>',
|
||||
active: true
|
||||
}"
|
||||
>
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Popovers </strong>
|
||||
<small>placement</small>
|
||||
</CCardHeader>
|
||||
<CCardBody class="my-3">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Popovers',
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
250
resources/js/src/views/base/ProgressBars.vue
Normal file
250
resources/js/src/views/base/ProgressBars.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Progress</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/progress"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
|
||||
<CProgress class="mt-1" :max="max" show-value>
|
||||
<CProgressBar :value="counter*(6/10)" color="success"/>
|
||||
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
|
||||
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
|
||||
</CProgress>
|
||||
<CButton
|
||||
@click="clicked"
|
||||
color="secondary"
|
||||
class="mt-4"
|
||||
>
|
||||
Click me to animate progress bars
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Progress </strong><small>labels</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>No label</h6>
|
||||
<CProgress :value="value" :max="max2" class="mb-3"/>
|
||||
<h6>Value label</h6>
|
||||
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
|
||||
<h6>Progress label</h6>
|
||||
<CProgress :value="value" :max="max2" show-percentage class="mb-3"/>
|
||||
<h6>Value label with precision</h6>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
|
||||
<h6>Progress label with precision</h6>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-percentage class="mb-3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>width</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default width</h6>
|
||||
<CProgress :value="value3" class="mb-3"/>
|
||||
<h6>Custom widths</h6>
|
||||
<CProgress :value="value3" class="w-75 mb-2"/>
|
||||
<CProgress :value="value3" class="w-50 mb-2"/>
|
||||
<CProgress :value="value3" class="w-25"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>height</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default height</h6>
|
||||
<CProgress :value="value3" show-percentage class="mb-3"/>
|
||||
<h6>Custom heights</h6>
|
||||
<CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
|
||||
<CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
|
||||
<CProgress height="2px" :value="value3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
|
||||
<div class="col-sm-2">{{ bar.color }}:</div>
|
||||
<div class="col-sm-10 pt-1">
|
||||
<CProgress
|
||||
:value="bar.value"
|
||||
:color="bar.color"
|
||||
:key="bar.color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>striped</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress
|
||||
:value="25"
|
||||
color="success"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="50"
|
||||
color="info"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="75"
|
||||
color="warning"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="100"
|
||||
color="danger"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CButton color="secondary" @click="striped = !striped">
|
||||
{{ striped ? 'Remove' : 'Add'}} Striped
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>animated</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress
|
||||
:value="25"
|
||||
color="success"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="50"
|
||||
color="info"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="75"
|
||||
color="warning"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="100"
|
||||
color="danger"
|
||||
:animated="animate"
|
||||
class="mb-3"
|
||||
/>
|
||||
<CButton color="secondary" @click="animate = !animate">
|
||||
{{ animate ? 'Stop' : 'Start'}} Animation
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>multiple bars</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]"/>
|
||||
<CProgressBar color="success" :value="values[1]"/>
|
||||
<CProgressBar color="info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress show-percentage :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]"/>
|
||||
<CProgressBar color="success" :value="values[1]"/>
|
||||
<CProgressBar color="info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress show-value striped :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]"/>
|
||||
<CProgressBar color="success" :value="values[1]"/>
|
||||
<CProgressBar color="info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]" show-percentage/>
|
||||
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
|
||||
<CProgressBar color="info" :value="values[2]" striped show-percentage/>
|
||||
</CProgress>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProgressBars',
|
||||
data () {
|
||||
return {
|
||||
counter: 73,
|
||||
max: 100,
|
||||
max2: 50,
|
||||
value: 33.333333333,
|
||||
value3: 75,
|
||||
bars: [
|
||||
{color: 'success', value: 75},
|
||||
{color: 'info', value: 75},
|
||||
{color: 'warning', value: 75},
|
||||
{color: 'danger', value: 75},
|
||||
{color: 'primary', value: 75},
|
||||
{color: 'secondary', value: 75},
|
||||
{color: 'dark', value: 75}
|
||||
],
|
||||
timer: null,
|
||||
striped: true,
|
||||
animate: true,
|
||||
max3: 100,
|
||||
values: [ 15, 30, 20 ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clicked () {
|
||||
this.counter = Math.random() * this.max
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timer = setInterval(() => {
|
||||
this.bars.forEach(bar => {
|
||||
bar.value = 25 + (Math.random() * 75)
|
||||
})
|
||||
}, 2000)
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
396
resources/js/src/views/base/Switches.vue
Normal file
396
resources/js/src/views/base/Switches.vue
Normal file
@@ -0,0 +1,396 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard v-if="true">
|
||||
<CCardHeader>
|
||||
Radio switches
|
||||
<CBadge :color="radio" class="mr-auto">{{radio}}</CBadge>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/switch"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch
|
||||
v-for="(color, key) in colors"
|
||||
:key="'radio' + key"
|
||||
class="mx-1"
|
||||
:color="color"
|
||||
variant="3d"
|
||||
v-bind="labelIcon"
|
||||
type="radio"
|
||||
name="radio"
|
||||
:checked="key === 2"
|
||||
@update:checked="(val) => val ? radio = color : null"
|
||||
:value="color"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch default
|
||||
<CBadge color="primary">{{checker}}</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch
|
||||
class="mx-1"
|
||||
color="primary"
|
||||
name="switch1"
|
||||
:checked.sync="checker"
|
||||
/>
|
||||
<CSwitch
|
||||
class="mx-1"
|
||||
:color="color"
|
||||
checked
|
||||
:key="key"
|
||||
v-for="(color, key) in ['secondary', 'success','warning','info','danger','light','dark']"
|
||||
/>
|
||||
<CSwitch class="mx-1" color="primary" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch pills
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" disabled shape="pill" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>disabled</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>label</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" variant="3d" shape="square" checked v-bind="labelIcon"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="outline" shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="opposite" shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked v-bind="labelIcon"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>shape
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill" v-bind="labelTxt" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol md="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Sizes
|
||||
</CCardHeader>
|
||||
<CCardBody class="p-0">
|
||||
<CDataTable
|
||||
hover
|
||||
striped
|
||||
class="table-align-middle mb-0"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
no-sorting
|
||||
>
|
||||
<template #example="{item}">
|
||||
<td>
|
||||
<CSwitch
|
||||
:variant="item.example.variant"
|
||||
:color="item.example.color"
|
||||
:size="item.example.size"
|
||||
:checked="item.example.checked"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
<template #size_prop="{item}">
|
||||
<td>
|
||||
<span v-html="item.size_prop"></span>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Switches',
|
||||
data () {
|
||||
return {
|
||||
colors: [
|
||||
'primary','secondary','warning','success','info','danger','light','dark'
|
||||
],
|
||||
fields: [
|
||||
{ key: 'size' },
|
||||
{ key: 'example' },
|
||||
{ key: 'size_prop', label: 'Size prop' }
|
||||
],
|
||||
items: [
|
||||
{
|
||||
size: 'Large',
|
||||
example: { variant: '3d', color: 'primary', size: 'lg', checked: true },
|
||||
size_prop: 'Add following prop <code>size="lg"</code>'
|
||||
},
|
||||
{
|
||||
size: 'Normal',
|
||||
example: { variant: '3d', color: 'primary', size: '', checked: true },
|
||||
size_prop: '-'
|
||||
},
|
||||
{
|
||||
size: 'Small',
|
||||
example: { variant: '3d', color: 'primary', size: 'sm', checked: true},
|
||||
size_prop: 'Add following prop <code>size="sm"</code>'
|
||||
}
|
||||
],
|
||||
checker: true,
|
||||
radio: 'warning',
|
||||
labelIcon: {
|
||||
labelOn: '\u2713',
|
||||
labelOff: '\u2715'
|
||||
},
|
||||
labelTxt: {
|
||||
labelOn: 'yes',
|
||||
labelOff: 'no'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
62
resources/js/src/views/base/Table.vue
Normal file
62
resources/js/src/views/base/Table.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<slot name="header">
|
||||
<CIcon name="cil-grid"/> {{caption}}
|
||||
</slot>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDataTable
|
||||
:hover="hover"
|
||||
:striped="striped"
|
||||
:bordered="bordered"
|
||||
:small="small"
|
||||
:fixed="fixed"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:items-per-page="small ? 10 : 5"
|
||||
:dark="dark"
|
||||
pagination
|
||||
>
|
||||
<template #status="{item}">
|
||||
<td>
|
||||
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Table',
|
||||
props: {
|
||||
items: Array,
|
||||
fields: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['username', 'registered', 'role', 'status']
|
||||
}
|
||||
},
|
||||
caption: {
|
||||
type: String,
|
||||
default: 'Table'
|
||||
},
|
||||
hover: Boolean,
|
||||
striped: Boolean,
|
||||
bordered: Boolean,
|
||||
small: Boolean,
|
||||
fixed: Boolean,
|
||||
dark: Boolean
|
||||
},
|
||||
methods: {
|
||||
getBadge (status) {
|
||||
return status === 'Active' ? 'success'
|
||||
: status === 'Inactive' ? 'secondary'
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
104
resources/js/src/views/base/Tables.vue
Normal file
104
resources/js/src/views/base/Tables.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper :items="getShuffledUsersData()">
|
||||
<template #header>
|
||||
<CIcon name="cil-grid"/> Simple Table
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/nav"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</CTableWrapper>
|
||||
</CCol>
|
||||
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
striped
|
||||
caption="Striped Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
small
|
||||
caption="Condensed Table"
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
fixed
|
||||
bordered
|
||||
caption="Bordered Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
caption="Combined All Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
dark
|
||||
caption="Combined All dark Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CTableWrapper from './Table.vue'
|
||||
import usersData from '../users/UsersData'
|
||||
|
||||
export default {
|
||||
name: 'Tables',
|
||||
components: { CTableWrapper },
|
||||
methods: {
|
||||
shuffleArray (array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
let j = Math.floor(Math.random() * (i + 1))
|
||||
let temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
},
|
||||
|
||||
getShuffledUsersData () {
|
||||
return this.shuffleArray(usersData.slice(0))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
219
resources/js/src/views/base/Tabs.vue
Normal file
219
resources/js/src/views/base/Tabs.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/tabs"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs>
|
||||
<CTab title="Home" active>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Profile" active>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Disabled" disabled>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs variant="pills">
|
||||
<CTab title="Home" active>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Profile">
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab title="Disabled" disabled>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs with icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs :active-tab.sync="activeTab">
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/>
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/>
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/>
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs with icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs add-tab-classes="mt-1">
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/> {{tabs[0]}}
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/> {{tabs[1]}}
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/> {{tabs[2]}}
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs vertical
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs variant="pills" vertical>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/> {{tabs[0]}}
|
||||
</template>
|
||||
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/> {{tabs[1]}}
|
||||
</template>
|
||||
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/> {{tabs[2]}}
|
||||
</template>
|
||||
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Tabs',
|
||||
data () {
|
||||
return {
|
||||
tabs: [
|
||||
'Calculator',
|
||||
'Shopping cart',
|
||||
'Charts'
|
||||
],
|
||||
activeTab: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
90
resources/js/src/views/base/Tooltips.vue
Normal file
90
resources/js/src/views/base/Tooltips.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Tooltips </strong>
|
||||
<small><code>v-c-tooltip</code> directive</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/directives/tooltip"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<div class="text-center my-3">
|
||||
<CButton
|
||||
color="secondary"
|
||||
v-c-tooltip.hover.click="'I am a tooltip!'"
|
||||
>
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<div class="text-center my-3">
|
||||
<CButton
|
||||
v-c-tooltip="{content: 'I start open!', active:true }"
|
||||
color="secondary"
|
||||
>
|
||||
Hover me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Tooltips </strong>
|
||||
<small>placement</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div class="my-3">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-tooltip.hover="{
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Tooltips',
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
224
resources/js/src/views/buttons/BrandButtons.vue
Normal file
224
resources/js/src/views/buttons/BrandButtons.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>{{ $options.usage }}</code>
|
||||
<hr/>
|
||||
<h6>
|
||||
Size Small
|
||||
<small>Add <code>size="sm"</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="sm" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="lg" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button </strong> <small>Icons only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>{{ $options.iconsOnlyUsage }}</code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="sm" :name="'cib-' + brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon :name="'cib-' + brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="lg" :name="'cib-' + brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button </strong> <small>Text only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>
|
||||
{{ $options.textOnlyUsage }}
|
||||
</code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
size="sm"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
size="lg"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BrandButtons',
|
||||
usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
|
||||
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
|
||||
textOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
|
||||
brands: [
|
||||
'facebook',
|
||||
'twitter',
|
||||
'linkedin',
|
||||
'flickr',
|
||||
'tumblr',
|
||||
'xing',
|
||||
'github',
|
||||
'stack-overflow',
|
||||
'youtube',
|
||||
'dribbble',
|
||||
'instagram',
|
||||
'pinterest',
|
||||
'vk',
|
||||
'yahoo',
|
||||
'behance',
|
||||
'reddit',
|
||||
'vimeo'
|
||||
]
|
||||
// labels: {
|
||||
// facebook: 'Facebook',
|
||||
// twitter: 'Twitter',
|
||||
// linkedin: 'LinkedIn',
|
||||
// flickr: 'Flickr',
|
||||
// tumblr: 'Tumblr',
|
||||
// xing: 'Xing',
|
||||
// github: 'Github',
|
||||
// 'stack-overflow': 'StackOverflow',
|
||||
// youtube: 'YouTube',
|
||||
// dribbble: 'Dribbble',
|
||||
// instagram: 'Instagram',
|
||||
// pinterest: 'Pinterest',
|
||||
// vk: 'VK',
|
||||
// yahoo: 'Yahoo',
|
||||
// behance: 'Behance',
|
||||
// reddit: 'Reddit',
|
||||
// vimeo: 'Vimeo'
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
margin-bottom: 4px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
198
resources/js/src/views/buttons/ButtonGroups.vue
Normal file
198
resources/js/src/views/buttons/ButtonGroups.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap button group</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">One</CButton>
|
||||
<CButton color="secondary">Two</CButton>
|
||||
<CButton color="secondary">Three</CButton>
|
||||
<CButton color="secondary">Four</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">Five</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup>
|
||||
<CButton class="d-sm-down-none" color="success">Success</CButton>
|
||||
<CButton color="info">Info</CButton>
|
||||
<CButton color="warning">Warn</CButton>
|
||||
<CButton class="d-sm-down-none" color="primary">Primary</CButton>
|
||||
<CButton color="danger">Danger</CButton>
|
||||
<CButton color="link">Link</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button group </strong>sizing
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="sm">
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="lg">
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Button group </strong>dropdown support
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 1</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 2</CButton>
|
||||
<CDropdown right text="Menu" color="success">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 3</CButton>
|
||||
<CDropdown right split text="Split Menu" color="info">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button group </strong>vertical variation
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup vertical>
|
||||
<CButton color="secondary">Top</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Bottom</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button toolbar </strong>
|
||||
<small>with button groups</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups" >
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary" class="d-sm-down-none">«</CButton>
|
||||
<CButton color="secondary">‹</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary" class="d-sm-down-none">Edit</CButton>
|
||||
<CButton color="secondary">Undo</CButton>
|
||||
<CButton color="secondary">Redo</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary">›</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">»</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
<hr class="d-sm-down-none"/>
|
||||
<CButtonToolbar
|
||||
aria-label="Toolbar with button groups and input groups"
|
||||
class="d-sm-down-none"
|
||||
>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton color="secondary">New</CButton>
|
||||
<CButton color="secondary">Edit</CButton>
|
||||
</CButtonGroup>
|
||||
<CInput
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
append=".00"
|
||||
value="100"
|
||||
prepend="$"
|
||||
/>
|
||||
<CSelect
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
value="Medium"
|
||||
:options="['Large','Medium','Small']"
|
||||
custom
|
||||
prepend="Size"
|
||||
/>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton color="secondary">Save</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
<hr/>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||
<CButtonGroup class="mx-1 d-sm-down-none">
|
||||
<CButton color="secondary">New</CButton>
|
||||
<CButton color="secondary">Edit</CButton>
|
||||
<CButton color="secondary">Undo</CButton>
|
||||
</CButtonGroup>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
class="mx-1"
|
||||
placement="bottom-end"
|
||||
button-content="Menu"
|
||||
>
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary">Save</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonGroups',
|
||||
}
|
||||
</script>
|
||||
363
resources/js/src/views/buttons/Dropdowns.vue
Normal file
363
resources/js/src/views/buttons/Dropdowns.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Dropdown</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/dropdown"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown Button"
|
||||
class="m-2"
|
||||
color="secondary"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<CDropdown toggler-text="Dropdown using buttons as menu items" class="m-2">
|
||||
<CDropdownItem>I'm a button</CDropdownItem>
|
||||
<CDropdownItem>I'm also a button</CDropdownItem>
|
||||
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
|
||||
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div> -->
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown with divider"
|
||||
class="m-2"
|
||||
color="secondary"
|
||||
>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second item</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Separated Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown with header"
|
||||
class="m-2"
|
||||
color="secondary"
|
||||
>
|
||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>positioning</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Left align"
|
||||
color="primary"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
placement="bottom-end"
|
||||
toggler-text="Right align"
|
||||
color="primary"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Drop-Up"
|
||||
color="info"
|
||||
class="m-2"
|
||||
placement="top-start"
|
||||
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
:offset="[10, 5]"
|
||||
toggler-text="Offset Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
split
|
||||
toggler-text="Split Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>hidden caret</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="link"
|
||||
size="lg"
|
||||
:caret="false"
|
||||
>
|
||||
<template #toggler-content>
|
||||
🔍<span class="sr-only">Search</span>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="lg"
|
||||
toggler-text="Large"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="lg"
|
||||
split
|
||||
toggler-text="Large Split"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<br>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="sm"
|
||||
toggler-text="Small"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="sm"
|
||||
split toggler-text="Small Split"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>headers and accessibility</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown ARIA" color="primary"
|
||||
class="m-2"
|
||||
>
|
||||
<div role="group">
|
||||
<CDropdownHeader>Groups</CDropdownHeader>
|
||||
<CDropdownItem>Add</CDropdownItem>
|
||||
<CDropdownItem>Delete</CDropdownItem>
|
||||
</div>
|
||||
<div role="group">
|
||||
<CDropdownHeader>Users</CDropdownHeader>
|
||||
<CDropdownItem>Add</CDropdownItem>
|
||||
<CDropdownItem>Delete</CDropdownItem>
|
||||
</div>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>
|
||||
Something <strong>not</strong> associated with user
|
||||
</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small><code>color</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Primary"
|
||||
color="primary"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Secondary"
|
||||
color="secondary"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Success"
|
||||
color="success"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Warning"
|
||||
color="warning"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Danger"
|
||||
color="danger"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Info"
|
||||
color="info"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Light"
|
||||
color="light"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Dark"
|
||||
color="dark"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Link"
|
||||
color="link"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Dropdowns'
|
||||
}
|
||||
</script>
|
||||
704
resources/js/src/views/buttons/StandardButtons.vue
Normal file
704
resources/js/src/views/buttons/StandardButtons.vue
Normal file
@@ -0,0 +1,704 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Standard buttons</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Outline Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use <code>variant="outline"</code> prop
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Ghost Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>variant="ghost"</code> prop for ghost buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Square Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>square</code> prop for square buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" square>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" square>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" square>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" square>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" square>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" square>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" square>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" square>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" square>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" square aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" square aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" square aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" square aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" square aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" square aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" square aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" square aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" square aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" square disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" square disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" square disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" square disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" square disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" square disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" square disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" square disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" square disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Pill Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>pill</code> prop for pill buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" shape="pill">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" shape="pill">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" shape="pill">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" shape="pill">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" shape="pill">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" shape="pill">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" shape="pill">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" shape="pill">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" shape="pill">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" shape="pill" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" shape="pill" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" shape="pill" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" shape="pill" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" shape="pill" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" shape="pill" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" shape="pill" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" shape="pill" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" shape="pill" aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" shape="pill" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" shape="pill" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" shape="pill" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" shape="pill" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" shape="pill" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" shape="pill" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" shape="pill" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" shape="pill" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" shape="pill" disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Sizes</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Small
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary" size="sm">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary" size="sm">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton size="sm" variant="ghost" color="success">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" size="sm" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" size="sm" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="ghost" color="success">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Large
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary" size="lg">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" size="lg" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" size="lg" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>With Icons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="align-items-center">
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="primary">
|
||||
<CIcon name="cil-lightbulb"/> Standard Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="secondary" variant="outline">
|
||||
<CIcon name="cil-lightbulb"/> Outline Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="success">
|
||||
<CIcon name="cil-lightbulb"/> Ghost Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="warning" square>
|
||||
<CIcon name="cil-lightbulb"/> Square Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="danger" shape="pill">
|
||||
<CIcon name="cil-lightbulb"/> Pill Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Toggle pressed state</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton size="lg" color="secondary" block>Block level button</CButton>
|
||||
<CButton size="lg" color="primary" block>Block level button</CButton>
|
||||
<CButton size="lg" color="success" block>Block level button</CButton>
|
||||
<CButton size="lg" color="info" block>Block level button</CButton>
|
||||
<CButton size="lg" color="warning" block>Block level button</CButton>
|
||||
<CButton size="lg" color="danger" block>Block level button</CButton>
|
||||
<CButton size="lg" color="link" block>Block level button</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton size="lg" variant="outline" color="secondary" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="primary" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="success" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="info" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="warning" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="danger" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="ghost" color="info" block>Block level button</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StandardButtons',
|
||||
data () {
|
||||
return { togglePress: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
26
resources/js/src/views/charts/CChartBarExample.vue
Normal file
26
resources/js/src/views/charts/CChartBarExample.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:datasets="defaultDatasets"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartBar } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartBarExample',
|
||||
components: { CChartBar },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
70
resources/js/src/views/charts/CChartBarSimple.vue
Normal file
70
resources/js/src/views/charts/CChartBarSimple.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:datasets="computedDatasets"
|
||||
:options="computedOptions"
|
||||
:labels="labels"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartBar } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
|
||||
export default {
|
||||
name: 'CChartBarSimple',
|
||||
components: { CChartBar },
|
||||
props: {
|
||||
...CChartBar.props,
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,.2)'
|
||||
},
|
||||
pointHoverBackgroundColor: String,
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: Boolean
|
||||
},
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
|
||||
label: this.label,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computedDatasets () {
|
||||
return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions () {
|
||||
return deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
30
resources/js/src/views/charts/CChartDoughnutExample.vue
Normal file
30
resources/js/src/views/charts/CChartDoughnutExample.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<CChartDoughnut
|
||||
:datasets="defaultDatasets"
|
||||
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartDoughnut } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartDoughnutExample',
|
||||
components: { CChartDoughnut },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
31
resources/js/src/views/charts/CChartLineExample.vue
Normal file
31
resources/js/src/views/charts/CChartLineExample.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="defaultDatasets"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartLineExample',
|
||||
components: { CChartLine },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: 'rgb(228,102,81,0.9)',
|
||||
data: [30, 39, 10, 50, 30, 70, 35]
|
||||
},
|
||||
{
|
||||
label: 'Data Two',
|
||||
backgroundColor: 'rgb(0,216,255,0.9)',
|
||||
data: [39, 80, 40, 35, 40, 20, 45]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
136
resources/js/src/views/charts/CChartLineSimple.vue
Normal file
136
resources/js/src/views/charts/CChartLineSimple.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="computedDatasets"
|
||||
:options="computedOptions"
|
||||
:labels="labels"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
|
||||
export default {
|
||||
name: 'CChartLineSimple',
|
||||
components: { CChartLine },
|
||||
props: {
|
||||
...CChartLine.props,
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,.55)'
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: Boolean,
|
||||
pointHoverBackgroundColor: String
|
||||
},
|
||||
computed: {
|
||||
pointHoverColor () {
|
||||
if (this.pointHoverBackgroundColor) {
|
||||
return this.pointHoverBackgroundColor
|
||||
} else if (this.backgroundColor !== 'transparent') {
|
||||
return this.backgroundColor
|
||||
}
|
||||
return this.borderColor
|
||||
},
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
borderColor: getColor(this.borderColor),
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointBackgroundColor: getColor(this.pointHoverColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverColor),
|
||||
label: this.label
|
||||
}
|
||||
]
|
||||
},
|
||||
pointedOptions () {
|
||||
return {
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
offset: true,
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, this.dataPoints) - 5,
|
||||
max: Math.max.apply(Math, this.dataPoints) + 5
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
straightOptions () {
|
||||
return {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultOptions () {
|
||||
const options = this.pointed ? this.pointedOptions : this.straightOptions
|
||||
return Object.assign({}, options, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
})
|
||||
},
|
||||
computedDatasets () {
|
||||
return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions () {
|
||||
return deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
30
resources/js/src/views/charts/CChartPieExample.vue
Normal file
30
resources/js/src/views/charts/CChartPieExample.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<CChartPie
|
||||
:datasets="defaultDatasets"
|
||||
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartPie } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartPieExample',
|
||||
components: { CChartPie },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
48
resources/js/src/views/charts/CChartPolarAreaExample.vue
Normal file
48
resources/js/src/views/charts/CChartPolarAreaExample.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<CChartPolarArea
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="[
|
||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
||||
'Coding', 'Cycling', 'Running'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartPolarArea } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartPolarAreaExample',
|
||||
components: { CChartPolarArea },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
52
resources/js/src/views/charts/CChartRadarExample.vue
Normal file
52
resources/js/src/views/charts/CChartRadarExample.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<CChartRadar
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="[
|
||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
||||
'Coding', 'Cycling', 'Running'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartRadar } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartRadarExample',
|
||||
components: { CChartRadar },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: '2019',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
borderColor: 'rgba(179,181,198,1)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
tooltipLabelColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: '2020',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
tooltipLabelColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
68
resources/js/src/views/charts/Charts.vue
Normal file
68
resources/js/src/views/charts/Charts.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCardGroup columns class="card-columns cols-2">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Line Chart
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/charts"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLineExample/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Bar Chart</CCardHeader>
|
||||
<CCardBody><CChartBarExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Doughnut Chart</CCardHeader>
|
||||
<CCardBody><CChartDoughnutExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Radar Chart</CCardHeader>
|
||||
<CCardBody><CChartRadarExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Pie Chart</CCardHeader>
|
||||
<CCardBody><CChartPieExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Polar Area Chart</CCardHeader>
|
||||
<CCardBody><CChartPolarAreaExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Simple line chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLineSimple border-color="success" labels="months"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Simple pointed chart</CCardHeader>
|
||||
<CCardBody><CChartLineSimple pointed border-color="warning"/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Simple bar chart</CCardHeader>
|
||||
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Charts from './index.js'
|
||||
export default {
|
||||
name: 'Charts',
|
||||
components: {
|
||||
...Charts
|
||||
}
|
||||
}
|
||||
</script>
|
||||
103
resources/js/src/views/charts/MainChartExample.vue
Normal file
103
resources/js/src/views/charts/MainChartExample.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils/src'
|
||||
|
||||
function random (min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'MainChartExample',
|
||||
components: {
|
||||
CChartLine
|
||||
},
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
const brandSuccess = getStyle('success2') || '#4dbd74'
|
||||
const brandInfo = getStyle('info') || '#20a8d8'
|
||||
const brandDanger = getStyle('danger') || '#f86c6b'
|
||||
|
||||
let elements = 27
|
||||
const data1 = []
|
||||
const data2 = []
|
||||
const data3 = []
|
||||
|
||||
for (let i = 0; i <= elements; i++) {
|
||||
data1.push(random(50, 200))
|
||||
data2.push(random(80, 100))
|
||||
data3.push(65)
|
||||
}
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: hexToRgba(brandInfo, 10),
|
||||
borderColor: brandInfo,
|
||||
pointHoverBackgroundColor: brandInfo,
|
||||
borderWidth: 2,
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandSuccess,
|
||||
pointHoverBackgroundColor: brandSuccess,
|
||||
borderWidth: 2,
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandDanger,
|
||||
pointHoverBackgroundColor: brandDanger,
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5],
|
||||
data: data3
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
drawOnChartArea: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250
|
||||
},
|
||||
gridLines: {
|
||||
display: true
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
19
resources/js/src/views/charts/index.js
Normal file
19
resources/js/src/views/charts/index.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import CChartLineSimple from './CChartLineSimple'
|
||||
import CChartBarSimple from './CChartBarSimple'
|
||||
import CChartLineExample from './CChartLineExample'
|
||||
import CChartBarExample from './CChartBarExample'
|
||||
import CChartDoughnutExample from './CChartDoughnutExample'
|
||||
import CChartRadarExample from './CChartRadarExample'
|
||||
import CChartPieExample from './CChartPieExample'
|
||||
import CChartPolarAreaExample from './CChartPolarAreaExample'
|
||||
|
||||
export {
|
||||
CChartLineSimple,
|
||||
CChartBarSimple,
|
||||
CChartLineExample,
|
||||
CChartBarExample,
|
||||
CChartDoughnutExample,
|
||||
CChartRadarExample,
|
||||
CChartPieExample,
|
||||
CChartPolarAreaExample
|
||||
}
|
||||
14
resources/js/src/views/documents/Create.vue
Normal file
14
resources/js/src/views/documents/Create.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<CDetail />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CDetail from "../../components/document/Detail";
|
||||
|
||||
export default {
|
||||
name: "Create",
|
||||
components: {
|
||||
CDetail,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
78
resources/js/src/views/documents/Document.vue
Normal file
78
resources/js/src/views/documents/Document.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div>
|
||||
<CDetail :documentId.sync="documentId" @update="onUpdateDetail" />
|
||||
<CAttachments :documentId.sync="documentId" />
|
||||
<CReceivers v-if="!isDocumentOutcome" :documentId.sync="documentId" />
|
||||
<CRecipients v-if="isDocumentOutcome" :documentId.sync="documentId" />
|
||||
<CLinkDocument :isOutcome="isDocumentOutcome" :documentId.sync="documentId" @redirectTo="redirectTo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CDetail from "../../components/document/Detail";
|
||||
import CAttachments from "../../components/document/Attachments";
|
||||
import CReceivers from "../../components/document/Receivers";
|
||||
import CRecipients from "../../components/document/Recipients";
|
||||
import CLinkDocument from "../../components/document/CLinkDocument";
|
||||
|
||||
export default {
|
||||
name: "Document",
|
||||
components: {
|
||||
CDetail,
|
||||
CAttachments,
|
||||
CReceivers,
|
||||
CRecipients,
|
||||
CLinkDocument,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
documentId: "",
|
||||
document: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(route) {
|
||||
if (route.params && route.params.document) {
|
||||
this.documentId = route.params.document;
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.fetch()
|
||||
},
|
||||
async fetch() {
|
||||
const documentResponse = await services.document.get(this.documentId).catch(error => {
|
||||
this.toastHttpError(error);
|
||||
this.goBack()
|
||||
});
|
||||
this.document = documentResponse.data;
|
||||
},
|
||||
rowClicked(item, index) {
|
||||
this.$router.push({ path: `/documents/${item.id}` });
|
||||
},
|
||||
onUpdateDetail(document) {
|
||||
this.document = document;
|
||||
},
|
||||
redirectTo(id){
|
||||
this.$router.push({ path: `/documents/${id}` });
|
||||
},
|
||||
goBack() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isDocumentOutcome() {
|
||||
return this.document.book_id == 2;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
209
resources/js/src/views/documents/Documents.vue
Normal file
209
resources/js/src/views/documents/Documents.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-grid" />Danh sách văn bản
|
||||
<CButton
|
||||
size="sm"
|
||||
@click="goCreate"
|
||||
class="float-right"
|
||||
color="primary"
|
||||
variant="outline"
|
||||
v-c-tooltip="'Tạo mới'"
|
||||
>
|
||||
<CIcon name="cil-plus" />
|
||||
</CButton>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSearchBox :fields="searchFields" @searching="searching" />
|
||||
<CDataTable
|
||||
hover
|
||||
striped
|
||||
:loading="loading"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
clickable-rows
|
||||
@row-clicked="rowClicked"
|
||||
>
|
||||
<template #publisher="{item}">
|
||||
<td>{{item.publisher.name}}</td>
|
||||
</template>
|
||||
<template #type="{item}">
|
||||
<td>{{item.type.name}}</td>
|
||||
</template>
|
||||
<template #abstract="{item}">
|
||||
<td>
|
||||
<label :class="!item.seen ? highlightStyle : ''">{{item.abstract}}</label>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
<CPagination
|
||||
align="center"
|
||||
:pages="pages"
|
||||
:active-page.sync="currentPage"
|
||||
:activePage="currentPage"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CSearchBox from "../../components/SearchBox";
|
||||
|
||||
export default {
|
||||
name: "Documents",
|
||||
components: {
|
||||
CSearchBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
items: null,
|
||||
currentPage: 1,
|
||||
pages: 0,
|
||||
size: 0,
|
||||
searchValue: "",
|
||||
searchField: "symbol",
|
||||
bookId: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(route) {
|
||||
if (route.params && route.params.book) {
|
||||
this.bookId = route.params.book;
|
||||
}
|
||||
if (route.query && route.query.page) {
|
||||
this.currentPage = Number(route.query.page);
|
||||
}
|
||||
},
|
||||
},
|
||||
currentPage: {
|
||||
handler(page) {
|
||||
this.pageChange(page);
|
||||
this.currentPage = page;
|
||||
this.fetch();
|
||||
},
|
||||
},
|
||||
bookId: {
|
||||
handler(page) {
|
||||
this.fetch();
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
query() {
|
||||
return {
|
||||
...this.withQuery,
|
||||
...this.pageQuery,
|
||||
...this.searchQuery,
|
||||
...this.orderQuery,
|
||||
};
|
||||
},
|
||||
orderQuery() {
|
||||
return {
|
||||
orderBy: "created_at",
|
||||
sortedBy: "desc",
|
||||
};
|
||||
},
|
||||
pageQuery() {
|
||||
return this.currentPage ? { page: this.currentPage } : {};
|
||||
},
|
||||
withQuery() {
|
||||
return {
|
||||
with: "publisher;type",
|
||||
};
|
||||
},
|
||||
searchQuery() {
|
||||
return {
|
||||
search:
|
||||
`book.id:${this.bookId}` +
|
||||
(this.searchField && this.searchValue != null
|
||||
? ";" + (this.searchField + ":" + this.searchValue)
|
||||
: ""),
|
||||
searchJoin: "and",
|
||||
};
|
||||
},
|
||||
isDocumentsIncome() {
|
||||
return this.bookId == 1;
|
||||
},
|
||||
fields() {
|
||||
return [
|
||||
{ key: "symbol", label: "Số ký hiệu" },
|
||||
{
|
||||
key: "abstract",
|
||||
label: "Trích yếu",
|
||||
_classes: "w-50 font-weight-bold",
|
||||
},
|
||||
{ key: "type", label: "Loại" },
|
||||
{ key: "publisher", label: "Nơi ban hành" },
|
||||
{
|
||||
key: "effective_at",
|
||||
label: this.isDocumentsIncome ? "Ngày nhận" : "Ngày ban hành",
|
||||
},
|
||||
];
|
||||
},
|
||||
searchFields() {
|
||||
return [
|
||||
{ value: "symbol", label: "Số ký hiệu" },
|
||||
{ value: "abstract", label: "Trích yếu" },
|
||||
{ value: "type.name", label: "Loại" },
|
||||
{ value: "creator.name", label: "Người soạn" },
|
||||
{ value: "signer.name", label: "Người ký" },
|
||||
{
|
||||
value: "effective_at",
|
||||
label: this.isDocumentsIncome ? "Ngày nhận" : "Ngày ban hành",
|
||||
},
|
||||
{ value: "sign_at", label: "Ngày ký" },
|
||||
{ value: "publisher.name", label: "Nơi ban hành" },
|
||||
{ value: "organizes.name", label: "Nơi nhận" },
|
||||
{ value: "linkTo.symbol", label: "Liên kết văn bản đến" },
|
||||
{ value: "receivers.seen", label: "Chưa xem", defaultValue: 0 },
|
||||
];
|
||||
},
|
||||
highlightStyle() {
|
||||
return "font-weight-bold";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async fetch() {
|
||||
this.loading = true;
|
||||
const response = await services.document.all(this.query);
|
||||
this.items = response.data.data;
|
||||
// this.items = response.data.data.map(item => {
|
||||
// item["_classes"] = 'bg-success';
|
||||
// return item;
|
||||
// });
|
||||
|
||||
this.currentPage = response.data.current_page;
|
||||
this.pages = response.data.last_page;
|
||||
this.loading = false;
|
||||
},
|
||||
rowClicked(item, index) {
|
||||
this.$router.push({ path: `/documents/${item.id}` });
|
||||
},
|
||||
goCreate() {
|
||||
this.$router.push({
|
||||
path: `/documents/create`,
|
||||
query: { book: this.bookId },
|
||||
});
|
||||
},
|
||||
pageChange(val) {
|
||||
this.$router.push({ query: { page: val } });
|
||||
},
|
||||
searching(payload) {
|
||||
this.searchField = payload.field;
|
||||
this.searchValue = payload.value;
|
||||
this.fetch();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
37
resources/js/src/views/icons/Brands.vue
Normal file
37
resources/js/src/views/icons/Brands.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-basket"/>Brand icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<template v-for="(brand, brandName) in $options.brands">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
:key="brandName"
|
||||
>
|
||||
<CIcon :height="42" :content="brand"/>
|
||||
<div>{{toKebabCase(brandName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { brandSet as brands } from '@coreui/icons'
|
||||
export default {
|
||||
name: 'Brands',
|
||||
brands,
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
50
resources/js/src/views/icons/CoreUIIcons.vue
Normal file
50
resources/js/src/views/icons/CoreUIIcons.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon :content="$options.freeSet.cilHandPointDown"/>
|
||||
CoreUI Icons
|
||||
<CBadge color="info">New</CBadge>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://github.com/coreui/coreui-icons"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
class="card-header-action"
|
||||
>
|
||||
<small class="text-muted">Github</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<template v-for="(icon, iconName) in $options.freeSet">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
:key="iconName"
|
||||
>
|
||||
<CIcon :height="42" :content="icon"/>
|
||||
<div>{{toKebabCase(iconName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { freeSet } from '@coreui/icons'
|
||||
export default {
|
||||
name: 'CoreUIIcons',
|
||||
freeSet,
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
49
resources/js/src/views/icons/Flags.vue
Normal file
49
resources/js/src/views/icons/Flags.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-globe-alt"/> Flags
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<CCol class="mb-5" col="12">
|
||||
<!-- For using the flags inline with text add the classes
|
||||
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
||||
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
||||
span. If you want to have a squared version flag then add the class
|
||||
flag-icon-squared as well. -->
|
||||
</CCol>
|
||||
<template v-for="(flag, flagName) in displayedFlags">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
:key="flagName"
|
||||
>
|
||||
<CIcon :height="42" :content="flag"/>
|
||||
<div>{{toKebabCase(flagName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { flagSet } from '@coreui/icons'
|
||||
export default {
|
||||
name: 'Flags',
|
||||
flagSet,
|
||||
computed: {
|
||||
displayedFlags () {
|
||||
return this.$options.flagSet
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
195
resources/js/src/views/notifications/Alerts.vue
Normal file
195
resources/js/src/views/notifications/Alerts.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Alert</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/alert"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<p></p>
|
||||
<CAlert show color="primary">Primary Alert</CAlert>
|
||||
<CAlert show color="secondary">Secondary Alert</CAlert>
|
||||
<CAlert show color="success">Success Alert</CAlert>
|
||||
<CAlert show color="danger">Danger Alert</CAlert>
|
||||
<CAlert show color="warning">Warning Alert</CAlert>
|
||||
<CAlert show color="info">Info Alert</CAlert>
|
||||
<CAlert show color="light">Light Alert</CAlert>
|
||||
<CAlert show color="dark">Dark Alert</CAlert>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alert
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert show color="primary">
|
||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="secondary">
|
||||
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="success">
|
||||
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="danger">
|
||||
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="warning">
|
||||
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="info">
|
||||
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="light">
|
||||
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="dark">
|
||||
Dark Alert with
|
||||
<CLink href="#" class="alert-link">an example link</CLink>
|
||||
.
|
||||
</CAlert>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alerts <small>with additional content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CAlert show color="success">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>
|
||||
Aww yeah, you successfully read this important alert message.
|
||||
This example text is going to run a bit longer so that you can see
|
||||
how spacing within an alert works with this kind of content.
|
||||
</p>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
</p>
|
||||
</CAlert>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alerts
|
||||
<small>dismissible</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CAlert
|
||||
color="secondary"
|
||||
closeButton
|
||||
:show.sync="alert1"
|
||||
>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
|
||||
<CAlert
|
||||
color="secondary"
|
||||
:show.sync="alert2"
|
||||
class="alert-dismissible"
|
||||
>
|
||||
Dismissible Alert with custom button!
|
||||
<CButton
|
||||
class="position-absolute"
|
||||
color="secondary"
|
||||
style="right:10px;top: 50%;transform: translateY(-50%);"
|
||||
@click="alert2 = false"
|
||||
>
|
||||
Close
|
||||
</CButton>
|
||||
</CAlert>
|
||||
<CButton
|
||||
@click="showDismissibleAlerts"
|
||||
color="info"
|
||||
class="m-1"
|
||||
>
|
||||
Show dismissible alerts
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alerts
|
||||
<small>auto dismissible</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert
|
||||
:show.sync="dismissCountDown"
|
||||
closeButton
|
||||
color="warning"
|
||||
fade
|
||||
>
|
||||
Alert will dismiss after
|
||||
<strong>{{dismissCountDown}}</strong> seconds...
|
||||
</CAlert>
|
||||
|
||||
<CAlert
|
||||
:show.sync="dismissCountDown"
|
||||
closeButton
|
||||
color="info"
|
||||
>
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<CProgress
|
||||
color="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px"
|
||||
/>
|
||||
</CAlert>
|
||||
<CButton @click="showAlert" color="info" class="m-1">
|
||||
Show alert with timer
|
||||
</CButton>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Alerts',
|
||||
data () {
|
||||
return {
|
||||
dismissSecs: 10,
|
||||
dismissCountDown: 10,
|
||||
alert1: true,
|
||||
alert2: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
countDownChanged (dismissCountDown) {
|
||||
this.dismissCountDown = dismissCountDown
|
||||
},
|
||||
showAlert () {
|
||||
this.dismissCountDown = this.dismissSecs
|
||||
},
|
||||
showDismissibleAlerts () {
|
||||
['alert1', 'alert2'].forEach(alert => this[alert] = true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
91
resources/js/src/views/notifications/Badges.vue
Normal file
91
resources/js/src/views/notifications/Badges.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template functional>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Badge</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/badge"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h2>Example heading <CBadge color="primary">New</CBadge></h2>
|
||||
<h3>Example heading <CBadge color="primary">New</CBadge></h3>
|
||||
<h4>Example heading <CBadge color="primary">New</CBadge></h4>
|
||||
<h5>Example heading <CBadge color="primary">New</CBadge></h5>
|
||||
<h6>Example heading <CBadge color="primary">New</CBadge></h6>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton color="primary">
|
||||
Notifications
|
||||
<CBadge color="light" class="ml-2 position-static">4</CBadge>
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Badge
|
||||
<small>contextual variations</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge color="primary">Primary</CBadge>
|
||||
<CBadge color="secondary">Secondary</CBadge>
|
||||
<CBadge color="success">Success</CBadge>
|
||||
<CBadge color="danger">Danger</CBadge>
|
||||
<CBadge color="warning">Warning</CBadge>
|
||||
<CBadge color="info">Info</CBadge>
|
||||
<CBadge color="light">Light</CBadge>
|
||||
<CBadge color="dark">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Badge
|
||||
<small>shape="pill"</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge shape="pill" color="primary">Primary</CBadge>
|
||||
<CBadge shape="pill" color="secondary">Secondary</CBadge>
|
||||
<CBadge shape="pill" color="success">Success</CBadge>
|
||||
<CBadge shape="pill" color="danger">Danger</CBadge>
|
||||
<CBadge shape="pill" color="warning">Warning</CBadge>
|
||||
<CBadge shape="pill" color="info">Info</CBadge>
|
||||
<CBadge shape="pill" color="light">Light</CBadge>
|
||||
<CBadge shape="pill" color="dark">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Badge
|
||||
<small>actionable</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge href="#" color="primary">Primary</CBadge>
|
||||
<CBadge href="#" color="secondary">Secondary</CBadge>
|
||||
<CBadge href="#" color="success">Success</CBadge>
|
||||
<CBadge href="#" color="danger">Danger</CBadge>
|
||||
<CBadge href="#" color="warning">Warning</CBadge>
|
||||
<CBadge href="#" color="info">Info</CBadge>
|
||||
<CBadge href="#" color="light">Light</CBadge>
|
||||
<CBadge href="#" color="dark">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Badges'
|
||||
}
|
||||
</script>
|
||||
195
resources/js/src/views/notifications/Modals.vue
Normal file
195
resources/js/src/views/notifications/Modals.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Bootstrap Modals
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/modal"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton color="secondary" @click="myModal = true" class="mr-1">
|
||||
Launch demo modal
|
||||
</CButton>
|
||||
<CButton color="secondary" @click="largeModal = true" class="mr-1">
|
||||
Launch large modal
|
||||
</CButton>
|
||||
<CButton color="secondary" @click="smallModal = true" class="mr-1">
|
||||
Launch small modal
|
||||
</CButton>
|
||||
<hr>
|
||||
<CButton color="primary" @click="primaryModal = true" class="mr-1">
|
||||
Launch primary modal
|
||||
</CButton>
|
||||
<CButton color="success" @click="successModal = true" class="mr-1">
|
||||
Launch success modal
|
||||
</CButton>
|
||||
<CButton color="warning" @click="warningModal = true" class="mr-1">
|
||||
Launch warning modal
|
||||
</CButton>
|
||||
<CButton color="danger" @click="dangerModal = true" class="mr-1">
|
||||
Launch danger modal
|
||||
</CButton>
|
||||
<CButton color="info" @click="infoModal = true" class="mr-1">
|
||||
Launch info modal
|
||||
</CButton>
|
||||
<CButton color="dark" @click="darkModal = true" class="mr-1">
|
||||
Launch dark modal
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
<!-- Modal Component -->
|
||||
<CModal
|
||||
title="Modal title"
|
||||
:show.sync="myModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
size="lg"
|
||||
:show.sync="largeModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
size="sm"
|
||||
:show.sync="smallModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</CModal>
|
||||
|
||||
<CModal
|
||||
title="Modal title"
|
||||
:show.sync="primaryModal"
|
||||
color="primary"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="success"
|
||||
:show.sync="successModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="warning"
|
||||
:show.sync="warningModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="danger"
|
||||
:show.sync="dangerModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="info"
|
||||
:show.sync="infoModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</CModal>
|
||||
<CModal
|
||||
:show.sync="darkModal"
|
||||
:no-close-on-backdrop="true"
|
||||
:centered="true"
|
||||
title="Modal title 2"
|
||||
size="lg"
|
||||
color="dark"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
<template #header>
|
||||
<h6 class="modal-title">Custom smaller modal title</h6>
|
||||
<CButtonClose @click="darkModal = false" class="text-white"/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CButton @click="darkModal = false" color="danger">Discard</CButton>
|
||||
<CButton @click="darkModal = false" color="success">Accept</CButton>
|
||||
</template>
|
||||
</CModal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Modals',
|
||||
data () {
|
||||
return {
|
||||
myModal: false,
|
||||
largeModal: false,
|
||||
smallModal: false,
|
||||
primaryModal: false,
|
||||
successModal: false,
|
||||
warningModal: false,
|
||||
dangerModal: false,
|
||||
infoModal: false,
|
||||
darkModal: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
71
resources/js/src/views/pages/Login.vue
Normal file
71
resources/js/src/views/pages/Login.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<CContainer class="d-flex content-center min-vh-100">
|
||||
<CRow class="col-md-6">
|
||||
<CCol>
|
||||
<CCardGroup>
|
||||
<CCard class="p-4 px-5">
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<h1 class="pb-4">Đăng nhập</h1>
|
||||
<CAlert :show="!!error" color="warning">{{error}}</CAlert>
|
||||
<CInput autocomplete="email" placeholder="Email or Username..." v-model="email" required>
|
||||
<template #prepend-content>
|
||||
<CIcon name="cil-user" />
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="curent-password"
|
||||
v-model="password"
|
||||
>
|
||||
<template #prepend-content>
|
||||
<CIcon name="cil-lock-locked" />
|
||||
</template>
|
||||
</CInput>
|
||||
<CRow>
|
||||
<CCol col="6" class="text-left">
|
||||
<CButton color="primary" @click="login">Đăng nhập</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" class="text-right">
|
||||
<CButton color="link">Quên mật khẩu?</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
return {
|
||||
email: "admin@domain.com",
|
||||
password: "password",
|
||||
error: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
this.$store
|
||||
.dispatch("auth/login", { email: this.email, password: this.password })
|
||||
.then(response => {
|
||||
this.$router.push(
|
||||
this.$route.query.redirectFrom || { name: "Trang chủ" }
|
||||
);
|
||||
})
|
||||
.then(response => {
|
||||
this.$toast.success("Đăng nhập thành công");
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
30
resources/js/src/views/pages/Page404.vue
Normal file
30
resources/js/src/views/pages/Page404.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<CContainer class="d-flex align-items-center min-vh-100">
|
||||
<CRow class="w-100 justify-content-center">
|
||||
<CCol md="6">
|
||||
<div class="w-100">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">404</h1>
|
||||
<h4 class="pt-3">Oops! You're lost.</h4>
|
||||
<p class="text-muted">The page you are looking for was not found.</p>
|
||||
</div>
|
||||
<CInput
|
||||
class="mb-3"
|
||||
placeholder="What are you looking for?"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
|
||||
<template #append>
|
||||
<CButton color="info">Search</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Page404'
|
||||
}
|
||||
</script>
|
||||
28
resources/js/src/views/pages/Page500.vue
Normal file
28
resources/js/src/views/pages/Page500.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<CContainer class="d-flex align-items-center min-vh-100">
|
||||
<CRow class="w-100 justify-content-center">
|
||||
<CCol md="6">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">500</h1>
|
||||
<h4 class="pt-3">Houston, we have a problem!</h4>
|
||||
<p class="text-muted">The page you are looking for is temporarily unavailable.</p>
|
||||
</div>
|
||||
<CInput
|
||||
class="mb-3"
|
||||
placeholder="What are you looking for?"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
|
||||
<template #append>
|
||||
<CButton color="info">Search</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Page500'
|
||||
}
|
||||
</script>
|
||||
65
resources/js/src/views/pages/Register.vue
Normal file
65
resources/js/src/views/pages/Register.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="d-flex align-items-center min-vh-100">
|
||||
<CContainer fluid>
|
||||
<CRow class="justify-content-center">
|
||||
<CCol md="6">
|
||||
<CCard class="mx-4 mb-0">
|
||||
<CCardBody class="p-4">
|
||||
<CForm>
|
||||
<h1>Register</h1>
|
||||
<p class="text-muted">Create your account</p>
|
||||
<CInput
|
||||
placeholder="Username"
|
||||
autocomplete="username"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
prepend="@"
|
||||
/>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Repeat password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="mb-4"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CButton color="success" block>Create Account</CButton>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter class="p-4">
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<CButton block color="facebook">
|
||||
Facebook
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<CButton block color="twitter">
|
||||
Twitter
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Register'
|
||||
}
|
||||
</script>
|
||||
140
resources/js/src/views/statistic/Statistic.vue
Normal file
140
resources/js/src/views/statistic/Statistic.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Thống kê</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CFormGroup class="form-group mb-0">
|
||||
<template #label>
|
||||
<slot name="label">
|
||||
<label>Sổ văn bản</label>
|
||||
</slot>
|
||||
</template>
|
||||
<template #input>
|
||||
<treeselect
|
||||
v-model="statistic.book"
|
||||
:multiple="false"
|
||||
:options="books"
|
||||
:clearable="true"
|
||||
placeholder="Tất cả"
|
||||
></treeselect>
|
||||
</template>
|
||||
</CFormGroup>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CFormGroup class="form-group mb-0">
|
||||
<template #label>
|
||||
<slot name="label">
|
||||
<label>Loại văn bản</label>
|
||||
</slot>
|
||||
</template>
|
||||
<template #input>
|
||||
<treeselect
|
||||
v-model="statistic.type"
|
||||
:multiple="false"
|
||||
:options="types"
|
||||
:clearable="true"
|
||||
placeholder="Tất cả"
|
||||
></treeselect>
|
||||
</template>
|
||||
</CFormGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CInput label="Từ ngày" type="date" :value.sync="statistic.from" class="mb-0" />
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CInput label="Đến ngày" type="date" :value.sync="statistic.to" class="mb-0" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group" v-if="false">
|
||||
<CCol sm="6">
|
||||
<CSelect
|
||||
class="mb-0"
|
||||
label="Kiểu xuất"
|
||||
:options="exportTypes"
|
||||
placeholder="Please select"
|
||||
:value.sync="statistic.export"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton size="sm" @click="download" class="float-right" color="success">
|
||||
<CIcon name="cil-vertical-align-bottom" />Xuất
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
// import the component
|
||||
import { Treeselect } from "@riophae/vue-treeselect";
|
||||
// import the styles
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "Statistic",
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
exportTypes: [
|
||||
{ value: "Xlsx", label: "Xlsx" },
|
||||
{ value: "Xls", label: "Xls" },
|
||||
{ value: "Html", label: "Html" }
|
||||
],
|
||||
books: [],
|
||||
types: [],
|
||||
statistic: {
|
||||
book: null,
|
||||
type: null,
|
||||
from: null,
|
||||
to: null,
|
||||
export: "Xlsx"
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
!this.documentId || this.fetchDocument();
|
||||
this.fetchTypes();
|
||||
this.fetchBooks();
|
||||
},
|
||||
async fetchTypes() {
|
||||
const typeResponse = await services.documentType.all();
|
||||
this.types = this.formatKeys(typeResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
return typeResponse;
|
||||
},
|
||||
async fetchBooks() {
|
||||
const bookResponse = await services.book.all();
|
||||
this.books = this.formatKeys(bookResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
return bookResponse;
|
||||
},
|
||||
download() {
|
||||
services.statistic
|
||||
.download(this.statistic)
|
||||
.then(response => {
|
||||
this.$toast.success("Đã xuất báo cáo");
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
29
resources/js/src/views/system/Books.vue
Normal file
29
resources/js/src/views/system/Books.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CFormList :service="service" :fields="fields" :title="title" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
|
||||
export default {
|
||||
name: "Books",
|
||||
components: {
|
||||
CFormList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" }
|
||||
],
|
||||
service: services.book,
|
||||
title: "Sổ văn bản"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
30
resources/js/src/views/system/Departments.vue
Normal file
30
resources/js/src/views/system/Departments.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-8">
|
||||
<CFormList :service="service" :fields="fields" :title="title" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
|
||||
export default {
|
||||
name: "Departments",
|
||||
components: {
|
||||
CFormList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" },
|
||||
{ key: "tel", label: "Số điện thoại" }
|
||||
],
|
||||
service: services.department,
|
||||
title: "Phòng ban"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
29
resources/js/src/views/system/DocumentTypes.vue
Normal file
29
resources/js/src/views/system/DocumentTypes.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CFormList :service="service" :fields="fields" :title="title" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
|
||||
export default {
|
||||
name: "DocumentTypes",
|
||||
components: {
|
||||
CFormList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" },
|
||||
],
|
||||
service: services.documentType,
|
||||
title: "Loại văn bản"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
84
resources/js/src/views/system/Groups.vue
Normal file
84
resources/js/src/views/system/Groups.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CFormList
|
||||
:service="service"
|
||||
:fields="fields"
|
||||
:title="title"
|
||||
@show="fetchRolePermissions"
|
||||
>
|
||||
<template #append-body>
|
||||
<label>Quyền</label>
|
||||
<treeselect
|
||||
@select="addPermission"
|
||||
@deselect="removePermission"
|
||||
v-model="permissions"
|
||||
:multiple="true"
|
||||
:options="permissionOptions"
|
||||
:clearable="false"
|
||||
></treeselect>
|
||||
</template>
|
||||
</CFormList>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "Groups",
|
||||
components: {
|
||||
CFormList,
|
||||
Treeselect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" },
|
||||
],
|
||||
service: services.role,
|
||||
title: "Nhóm",
|
||||
permissionOptions: [],
|
||||
permissions: [],
|
||||
role: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchPermissions();
|
||||
},
|
||||
methods: {
|
||||
async fetchPermissions() {
|
||||
const permissionResponse = await services.permission.all();
|
||||
this.permissionOptions = this.formatKeys(permissionResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
return permissionResponse;
|
||||
},
|
||||
async fetchRolePermissions(role) {
|
||||
this.role = role;
|
||||
const roleResponse = await services.role.get(role.id, {
|
||||
with: "permissions"
|
||||
});
|
||||
this.permissions = roleResponse.data.permissions.map(
|
||||
permission => permission.id
|
||||
);
|
||||
},
|
||||
addPermission(permission) {
|
||||
services.role.givePermission(permission.id, this.role.id).catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
removePermission(permission) {
|
||||
services.role.revokePermission(permission.id, this.role.id).catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user