Bug fix
This commit is contained in:
Your Name
parent
732054d95b
commit
cf90a92139
File diff suppressed because it is too large
Load Diff
|
|
@ -21,7 +21,7 @@
|
|||
<!-- <dark-Toggler class="d-none d-lg-block" /> -->
|
||||
<!-- <search-bar /> -->
|
||||
<!-- <cart-dropdown /> -->
|
||||
<notification-dropdown />
|
||||
<!-- <notification-dropdown /> -->
|
||||
<user-dropdown />
|
||||
</b-navbar-nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,64 @@
|
|||
export const heightTransition = {
|
||||
/*
|
||||
/*
|
||||
|
||||
HowTo:
|
||||
1. Add dynamic style to element and set style as `trHeight`
|
||||
2. Set transition speed using `transition: 0.35s height;` <= you can use appropriate value;
|
||||
3. Optionally you can set `overflow: hidden;` to hide element overflow while height is animated.
|
||||
4. Set initial height using `trSetHeight` before any operation. [mounted hook is recommended - You can use `ref` for dynamic contents]
|
||||
5. Toggle height using height operations 🍻
|
||||
6. Toggle usage of $nextTick for height operations is any issue occur [experimental] 🔬
|
||||
HowTo:
|
||||
1. Add dynamic style to element and set style as `trHeight`
|
||||
2. Set transition speed using `transition: 0.35s height;` <= you can use appropriate value;
|
||||
3. Optionally you can set `overflow: hidden;` to hide element overflow while height is animated.
|
||||
4. Set initial height using `trSetHeight` before any operation. [mounted hook is recommended - You can use `ref` for dynamic contents]
|
||||
5. Toggle height using height operations 🍻
|
||||
6. Toggle usage of $nextTick for height operations is any issue occur [experimental] 🔬
|
||||
|
||||
*/
|
||||
*/
|
||||
|
||||
data() {
|
||||
return {
|
||||
trHeight: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
trAddHeight(val) {
|
||||
// Add height to existing height
|
||||
// Usage: Where new element is append or more height is added (e.g. list append)
|
||||
data()
|
||||
{
|
||||
return {
|
||||
trHeight: null,
|
||||
}
|
||||
},
|
||||
|
||||
/* Assumes:
|
||||
- Height is assigned and is `String`
|
||||
- Incoming value is valid number in `Number` or `String`
|
||||
*/
|
||||
const heightValue = Number(this.trHeight.substring(0, this.trHeight.length - 2))
|
||||
this.trHeight = `${heightValue + Number(val)}px`
|
||||
},
|
||||
trTrimHeight(val) {
|
||||
// Remove height from existing height
|
||||
// Usage: Where new element is removed or height is remove (e.g. list pop/ele remove)
|
||||
methods: {
|
||||
trAddHeight(val)
|
||||
{
|
||||
// Add height to existing height
|
||||
// Usage: Where new element is append or more height is added (e.g. list append)
|
||||
|
||||
/* Assumes:
|
||||
- Height is assigned and is `String`
|
||||
- Incoming value is valid number in `Number` or `String`
|
||||
*/
|
||||
const heightValue = Number(this.trHeight.substring(0, this.trHeight.length - 2))
|
||||
this.trHeight = `${heightValue - Number(val)}px`
|
||||
},
|
||||
trSetHeight(val) {
|
||||
// Set height
|
||||
// Usage: Mostly for assigning initial value from mounted hook
|
||||
/* Assumes:
|
||||
- Height is assigned and is `String`
|
||||
- Incoming value is valid number in `Number` or `String`
|
||||
*/
|
||||
const heightValue = Number(this.trHeight.substring(0, this.trHeight.length - 2))
|
||||
this.trHeight = `${heightValue + Number(val)}px`
|
||||
},
|
||||
|
||||
/* Assumes:
|
||||
- Height is not assigned and what to assign for add/remove operation
|
||||
- What to set height at something for odd usage
|
||||
- Incoming value is valid number in `Number` or `String`
|
||||
*/
|
||||
if (val === null) this.trHeight = 'auto'
|
||||
else this.trHeight = `${Number(val)}px`
|
||||
},
|
||||
},
|
||||
trTrimHeight(val)
|
||||
{
|
||||
// Remove height from existing height
|
||||
// Usage: Where new element is removed or height is remove (e.g. list pop/ele remove)
|
||||
|
||||
/* Assumes:
|
||||
- Height is assigned and is `String`
|
||||
- Incoming value is valid number in `Number` or `String`
|
||||
*/
|
||||
const heightValue = Number(this.trHeight.substring(0, this.trHeight.length - 2))
|
||||
this.trHeight = `${heightValue - Number(val)}px`
|
||||
},
|
||||
|
||||
trSetHeight(val)
|
||||
{
|
||||
// Set height
|
||||
// Usage: Mostly for assigning initial value from mounted hook
|
||||
|
||||
/* Assumes:
|
||||
- Height is not assigned and what to assign for add/remove operation
|
||||
- What to set height at something for odd usage
|
||||
- Incoming value is valid number in `Number` or `String`
|
||||
*/
|
||||
if( val === null ) this.trHeight = 'auto'
|
||||
else this.trHeight = `${Number(val)}px`
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
// Ignore below for now. We will remove it when we add more transition in future.
|
||||
|
|
|
|||
|
|
@ -278,3 +278,23 @@ body {
|
|||
[dir] .vs--searchable .vs__dropdown-toggle input {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Utility Classes
|
||||
//
|
||||
@media (min-width: 768px) {
|
||||
.w-md-25 {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<b-spinner class="mb-1" type="grow" label="Please wait..." />
|
||||
<span >
|
||||
Loading...
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BSpinner } from 'bootstrap-vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BSpinner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
<template>
|
||||
<b-sidebar
|
||||
id="user-filters--sidebar"
|
||||
bg-variant="white"
|
||||
title="Filters"
|
||||
v-bind:width="SidebarWidth"
|
||||
body-class="p-2"
|
||||
shadow
|
||||
backdrop
|
||||
right
|
||||
>
|
||||
<transition>
|
||||
<!-- No Filters -->
|
||||
<!-- <p v-if="Filters_D.length === 0" class="text-center text-dark" style="font-size: 1.125rem; font-weight: 500;">
|
||||
No filters are specified.
|
||||
</p> -->
|
||||
|
||||
<b-form
|
||||
ref="filters"
|
||||
id="filters-repeater-form"
|
||||
v-bind:style="{ height: trHeight }"
|
||||
v-on:submit.prevent="RepeatAgain()"
|
||||
>
|
||||
<b-row
|
||||
ref="row"
|
||||
v-for="(Filter, Index) in Filters_D"
|
||||
v-bind:key="Filter.ID"
|
||||
v-bind:id="Filter.ID"
|
||||
>
|
||||
<b-col md="3">
|
||||
<b-form-group label="Field">
|
||||
<v-select
|
||||
v-bind:options="RemainingTableColumns_D"
|
||||
label="title"
|
||||
v-bind:clearable="false"
|
||||
v-model="Filters_D[Index].Field"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col md="3">
|
||||
<b-form-group label="Condition">
|
||||
<v-select
|
||||
v-bind:options="Conditions_D"
|
||||
label="title"
|
||||
v-bind:clearable="false"
|
||||
v-model="Filters_D[Index].Condition"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col md="4">
|
||||
<b-form-group label="Value">
|
||||
<b-form-input />
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col md="2" class="mb-1">
|
||||
<b-form-group label=" ">
|
||||
<b-button
|
||||
v-ripple.400="'rgba(234, 84, 85, 0.15)'"
|
||||
variant="outline-danger"
|
||||
class="mt-0 mt-md-2"
|
||||
v-on:click="RemoveFilter(Index)"
|
||||
>
|
||||
<feather-icon icon="XIcon" class="mr-25" />
|
||||
<span>Delete</span>
|
||||
</b-button>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-form>
|
||||
</transition>
|
||||
|
||||
<!-- TODO(pooya): remove these lines when the query of table engine is written -->
|
||||
<!-- <b-row>
|
||||
<b-col>
|
||||
<b-form-checkbox v-model="Query_D.IsMain">Firms Only</b-form-checkbox>
|
||||
</b-col>
|
||||
</b-row> -->
|
||||
|
||||
<!-- Footer -->
|
||||
<hr>
|
||||
<div class="mt-1 d-flex justify-content-end" style="column-gap: 1rem;">
|
||||
<!-- Add Button -->
|
||||
<b-button variant="outline-primary" v-ripple.400="'rgba(255, 255, 255, 0.15)'" v-on:click="RepeatAgain()">
|
||||
<feather-icon icon="PlusIcon" classes="mr-25" />
|
||||
<span>Add New Filter</span>
|
||||
</b-button>
|
||||
<!-- Apply Button -->
|
||||
<b-button
|
||||
variant="primary"
|
||||
v-ripple.400="'rgba(255, 255, 255, 0.15)'"
|
||||
v-on:click="ApplyFilters()"
|
||||
v-bind:disabled="Filters_D.length === 0"
|
||||
>
|
||||
Apply Filters
|
||||
</b-button>
|
||||
</div>
|
||||
</b-sidebar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BSidebar, BRow, BCol, BCard, BButton, BForm, BFormGroup, BFormInput, BFormCheckbox } from 'bootstrap-vue'
|
||||
import vSelect from 'vue-select'
|
||||
import Ripple from 'vue-ripple-directive'
|
||||
import { heightTransition } from '@core/mixins/ui/transition'
|
||||
|
||||
export default {
|
||||
name: 'UserFiltersRepeatingFormComponent',
|
||||
|
||||
components: {
|
||||
BSidebar,
|
||||
BCard,
|
||||
BRow,
|
||||
BCol,
|
||||
BButton,
|
||||
BForm,
|
||||
BFormGroup,
|
||||
BFormInput,
|
||||
BFormCheckbox,
|
||||
vSelect,
|
||||
},
|
||||
|
||||
directives: {
|
||||
Ripple,
|
||||
},
|
||||
|
||||
mixins: [ heightTransition ],
|
||||
|
||||
props: {
|
||||
table: {
|
||||
// A ref to the table engine to apply the filters to
|
||||
// so that e.g. instead of this.$refs.usersTable, we can use this.table
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
Filters_D: [
|
||||
{
|
||||
ID: 1,
|
||||
Selected: 'male',
|
||||
Selected1: 'designer',
|
||||
PrevHeight: 0,
|
||||
},
|
||||
],
|
||||
NextFilterID_D: 0,
|
||||
RemainingTableColumns_D: [
|
||||
{ value: 'first_name', type: 'string', title: 'First Name' },
|
||||
{ value: 'last_name', type: 'string', title: 'Last Name' },
|
||||
{ value: 'email_address', type: 'string', title: 'Email' },
|
||||
{ value: 'is_main', type: 'boolean', title: 'Firm' },
|
||||
{ value: 'subscription.charge', type: 'integer', title: 'Charge' },
|
||||
{ value: 'total_uploaded_size', type: 'integer', title: 'Uploaded Size' },
|
||||
{ value: 'total_firm_uploaded_size', type: 'integer', title: 'Firm Uploaded Size' },
|
||||
],
|
||||
Conditions_D: [
|
||||
{ value: 'isnull', title: 'Is Empty' },
|
||||
{ value: '=', title: 'Equals' },
|
||||
{ value: '!=', title: 'Not Equals' },
|
||||
{ value: '>', title: 'Greater Than' },
|
||||
{ value: '>=', title: 'Greater Than or Equals' },
|
||||
{ value: '<', title: 'Less Than' },
|
||||
{ value: '<=', title: 'Less Than or Equals' },
|
||||
{ value: 'in', title: 'Contains' },
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
SidebarWidth()
|
||||
{
|
||||
if( this.$store.getters['app/windowIsLargerThanMD'] )
|
||||
return '992px'
|
||||
else
|
||||
return '320px'
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
InitTrHeight()
|
||||
{
|
||||
this.trSetHeight(null)
|
||||
// this.$nextTick(() => {
|
||||
// console.log('filters ref is', this.$refs)
|
||||
this.trSetHeight(this.$refs.filters.scrollHeight)
|
||||
this.RemoveFilter(0)
|
||||
// console.log('This is getting executed')
|
||||
// })
|
||||
},
|
||||
|
||||
// Adds a new row to the filters form repeater
|
||||
RepeatAgain()
|
||||
{
|
||||
this.Filters_D.push({
|
||||
ID: this.NextFilterID_D += 1,
|
||||
Field: this.RemainingTableColumns_D[0],
|
||||
Condition: this.Conditions_D[0],
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.trAddHeight(this.$refs.row[0].offsetHeight)
|
||||
})
|
||||
},
|
||||
|
||||
// Deletes a row from the filters form repeater
|
||||
RemoveFilter(Index)
|
||||
{
|
||||
this.Filters_D.splice(Index, 1)
|
||||
this.trTrimHeight(this.$refs.row[0].offsetHeight)
|
||||
},
|
||||
|
||||
ApplyFilters()
|
||||
{
|
||||
this.table.query.query = [
|
||||
]
|
||||
if( this.Query_D.IsMain )
|
||||
this.table.query.query.push({
|
||||
field: 'is_main',
|
||||
condition: '=',
|
||||
value: this.Query_D.IsMain,
|
||||
})
|
||||
this.table.fetch()
|
||||
},
|
||||
},
|
||||
|
||||
created() { window.addEventListener('resize', this.InitTrHeight) },
|
||||
mounted() { this.InitTrHeight() },
|
||||
destroyed() { window.removeEventListener('resize', this.InitTrHeight) },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#filters-repeater-form {
|
||||
// overflow: hidden;
|
||||
transition: 0.35s height;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,169 +1,190 @@
|
|||
<template>
|
||||
<div>
|
||||
<ACard ref="tblCard" class="overflow-auto">
|
||||
<!-- <div v-for="item,index in getColsFilter">-->
|
||||
<!-- <h2>{{item.scopedSlots.filterDropdown}}</h2>-->
|
||||
<!-- <h2>{{item.scopedSlots.filterIcon}}</h2>-->
|
||||
<!-- </div>-->
|
||||
<ASpin :spinning="loading" :indicator="indicator">
|
||||
|
||||
<div class="flex w-full justify-between">
|
||||
<a-input-search v-if="search" class="w-full md:w-1/4 pb-4" id="search" :placeholder="options.placeholder" enter-button="search" @search="onSearch"/>
|
||||
<div class="flex items-center">
|
||||
<a class="left-table-btn" @click="fullScreen">
|
||||
<feather-icon :icon="getFullIcon" svg-classes="w-5 h-5"/>
|
||||
</a>
|
||||
<ADropdown :trigger="['hover']">
|
||||
<div slot="overlay" class="p-2" style="min-width: 250px">
|
||||
<ACard @click.stop="noThings" :body-style="{padding:'8px'}">
|
||||
Table Columns
|
||||
<ADivider class="my-2"/>
|
||||
<div class="flex flex-col items-start" style="max-height:150px;overflow:auto">
|
||||
<Draggable v-model="cols">
|
||||
<div v-for="item,index in cols" :key="index" class="flex items-start">
|
||||
<feather-icon icon="MoreVerticalIcon" svg-classes="h-4 w-4 color-grey cursor-pointer"
|
||||
class="mr-0"/>
|
||||
<feather-icon icon="MoreVerticalIcon" svg-classes="h-4 w-4 color-grey cursor-pointer"
|
||||
style="position: relative;left: 9px;"/>
|
||||
<ACheckbox v-model="item.show">
|
||||
{{item.title}}
|
||||
</ACheckbox>
|
||||
</div>
|
||||
</Draggable>
|
||||
</div>
|
||||
</ACard>
|
||||
</div>
|
||||
<a class="left-table-btn ">
|
||||
<feather-icon icon="SettingsIcon" svg-classes="w-5 h-5"/>
|
||||
</a>
|
||||
</ADropdown>
|
||||
<a class="left-table-btn refresh-btn" @click="refresh">
|
||||
<feather-icon icon="RotateCwIcon" svg-classes="w-5 h-5"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ACard ref="tblCard" class="overflow-auto">
|
||||
<!-- <div v-for="item,index in getColsFilter">-->
|
||||
<!-- <h2>{{item.scopedSlots.filterDropdown}}</h2>-->
|
||||
<!-- <h2>{{item.scopedSlots.filterIcon}}</h2>-->
|
||||
<!-- </div>-->
|
||||
<ASpin :spinning="loading" :indicator="indicator">
|
||||
<b-row class="mb-4" style="row-gap: 0.75rem;">
|
||||
<b-col md="6">
|
||||
<b-input-group v-if="search">
|
||||
<b-form-input
|
||||
id="search"
|
||||
v-bind:placeholder="options.placeholder"
|
||||
>
|
||||
</b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button variant="primary" v-on:click="onSearch">
|
||||
Search
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
<b-col md="6">
|
||||
<a class="left-table-btn" v-on:click="fullScreen">
|
||||
<feather-icon v-bind:icon="getFullIcon" svg-classes="w-5 h-5"/>
|
||||
</a>
|
||||
<ADropdown :trigger="['hover']">
|
||||
<div slot="overlay" class="p-2" style="min-width: 250px">
|
||||
<ACard @click.stop="noThings" :body-style="{padding:'8px'}">
|
||||
Table Columns
|
||||
<ADivider class="my-2"/>
|
||||
<div class="d-flex flex-column align-items-start" style="max-height:150px;overflow:auto">
|
||||
<Draggable v-model="cols">
|
||||
<div v-for="item,index in cols" :key="index" class="flex items-start">
|
||||
<feather-icon icon="MoreVerticalIcon" svg-classes="h-4 w-4 color-grey cursor-pointer"
|
||||
class="mr-0"/>
|
||||
<feather-icon icon="MoreVerticalIcon" svg-classes="h-4 w-4 color-grey cursor-pointer"
|
||||
style="position: relative;left: 9px;"/>
|
||||
<ACheckbox v-model="item.show">
|
||||
{{item.title}}
|
||||
</ACheckbox>
|
||||
</div>
|
||||
</Draggable>
|
||||
</div>
|
||||
</ACard>
|
||||
</div>
|
||||
<a class="left-table-btn ">
|
||||
<feather-icon icon="SettingsIcon" svg-classes="w-5 h-5"/>
|
||||
</a>
|
||||
</ADropdown>
|
||||
<a class="left-table-btn refresh-btn" @click="refresh">
|
||||
<feather-icon icon="RotateCwIcon" svg-classes="w-5 h-5"/>
|
||||
</a>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
|
||||
<a-table
|
||||
@change="change"
|
||||
:indentSize="5"
|
||||
:pagination="false"
|
||||
ref="tbl"
|
||||
:locale="locale"
|
||||
:columns="visibleCols"
|
||||
:data-source="data"
|
||||
:row-selection="options.is_row_selection ? { selectedRowKeys: selectedRowKeys, onChange: onChange } : null"
|
||||
>
|
||||
<a-table
|
||||
@change="change"
|
||||
:indentSize="5"
|
||||
:pagination="false"
|
||||
ref="tbl"
|
||||
:locale="locale"
|
||||
:columns="visibleCols"
|
||||
:data-source="data"
|
||||
:row-selection="options.is_row_selection ? { selectedRowKeys: selectedRowKeys, onChange: onChange } : null"
|
||||
>
|
||||
|
||||
<template :slot="item" slot-scope="name, record, index" v-for="(item,ind) in customRender">
|
||||
<slot :name="item" :text="name" :record="record" :index="index"/>
|
||||
</template>
|
||||
<template :slot="item" slot-scope="name, record, index" v-for="(item,ind) in customRender">
|
||||
<slot :name="item" :text="name" :record="record" :index="index"/>
|
||||
</template>
|
||||
|
||||
<!-- <template slot="expandedRowRender" slot-scope="text, record, index">-->
|
||||
<!-- <slot name="expandedRowRender" :text="text" :record="record" :index="index"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template slot="expandedRowRender" slot-scope="text, record, index">-->
|
||||
<!-- <slot name="expandedRowRender" :text="text" :record="record" :index="index"/>-->
|
||||
<!-- </template>-->
|
||||
|
||||
<div slot="footer" slot-scope="{item}">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<div v-if="query.total">
|
||||
<span>{{query.total}}</span>
|
||||
Record found.
|
||||
</div>
|
||||
</div>
|
||||
<APagination
|
||||
v-if="is_pagenation"
|
||||
show-size-changer
|
||||
:pageSizeOptions="['5','10','20']"
|
||||
:page-size.sync="query.limit"
|
||||
@change="changePage"
|
||||
@showSizeChange="changePage"
|
||||
:default-current="1" :total="query.total" v-model.sync="query.page">
|
||||
<template slot="buildOptionText" slot-scope="props">
|
||||
<div dir="rtl">
|
||||
<span> {{ props.value }} </span>
|
||||
<span>record</span>
|
||||
</div>
|
||||
</template>
|
||||
</APagination>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" slot-scope="{item}">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<div v-if="query.total">
|
||||
<span>{{query.total}}</span>
|
||||
Record found.
|
||||
</div>
|
||||
</div>
|
||||
<APagination
|
||||
v-if="is_pagenation"
|
||||
show-size-changer
|
||||
:pageSizeOptions="['5','10','20']"
|
||||
:page-size.sync="query.limit"
|
||||
@change="changePage"
|
||||
@showSizeChange="changePage"
|
||||
:default-current="1" :total="query.total" v-model.sync="query.page">
|
||||
<template slot="buildOptionText" slot-scope="props">
|
||||
<div dir="rtl">
|
||||
<span> {{ props.value }} </span>
|
||||
<span>record</span>
|
||||
</div>
|
||||
</template>
|
||||
</APagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="item,index in getColsFilter" :slot="item.scopedSlots.filterDropdown"
|
||||
slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
|
||||
<div>
|
||||
<div v-for="item,index in getColsFilter" :slot="item.scopedSlots.filterDropdown"
|
||||
slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
|
||||
<div>
|
||||
|
||||
<TextXTableFilter v-if="item.filterType === 'default'"
|
||||
:column="column"
|
||||
@search="submitFilter"
|
||||
/>
|
||||
<TextXTableFilter v-if="item.filterType === 'default'"
|
||||
:column="column"
|
||||
@search="submitFilter"
|
||||
/>
|
||||
|
||||
<SwitchXTableFilter v-if="item.filterType === 'switch'"
|
||||
:column="column"
|
||||
@search="submitFilter"
|
||||
/>
|
||||
<SwitchXTableFilter v-if="item.filterType === 'switch'"
|
||||
:column="column"
|
||||
@search="submitFilter"
|
||||
/>
|
||||
|
||||
<NumberXTableFilter v-if="item.filterType === 'number'"
|
||||
:column="column"
|
||||
@search="submitFilter"
|
||||
/>
|
||||
<NumberXTableFilter v-if="item.filterType === 'number'"
|
||||
:column="column"
|
||||
@search="submitFilter"
|
||||
/>
|
||||
|
||||
<SelectOptionXTableFilter v-if="item.filterType === 'select'" :column="item"
|
||||
:set-selected-keys="setSelectedKeys" :selected-keys="selectedKeys"
|
||||
:confirm="confirm" :clear-filters="clearFilters"/>
|
||||
<SelectOptionXTableFilter v-if="item.filterType === 'select'" :column="item"
|
||||
:set-selected-keys="setSelectedKeys" :selected-keys="selectedKeys"
|
||||
:confirm="confirm" :clear-filters="clearFilters"/>
|
||||
|
||||
|
||||
<DateXTableFilter v-if="item.filterType === 'date'"
|
||||
:column="column"
|
||||
@search="submitFilter"
|
||||
/>
|
||||
<DateXTableFilter v-if="item.filterType === 'date'"
|
||||
:column="column"
|
||||
@search="submitFilter"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
<a-icon :slot="item.scopedSlots.filterIcon" slot-scope="filtered" type="search"
|
||||
:style="{ color: filtered ? '#108ee9' : undefined }"/>
|
||||
</div>
|
||||
</div>
|
||||
<a-icon :slot="item.scopedSlots.filterIcon" slot-scope="filtered" type="search"
|
||||
:style="{ color: filtered ? '#108ee9' : undefined }"/>
|
||||
</div>
|
||||
|
||||
</a-table>
|
||||
</ASpin>
|
||||
</ACard>
|
||||
</div>
|
||||
</a-table>
|
||||
</ASpin>
|
||||
</ACard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SwitchXTableFilter from './SwitchXTableFilter'
|
||||
import SelectOptionXTableFilter from './SelectOptionXTableFilter'
|
||||
import DateXTableFilter from './DateXTableFilter'
|
||||
import TextXTableFilter from './TextXTableFilter'
|
||||
import XTbl from "./model/XTbl";
|
||||
import Draggable from 'vuedraggable'
|
||||
import axios from "../../axios";
|
||||
import {openFullscreen, closeFullscreen} from "@/plugins/fullscreen";
|
||||
import NumberXTableFilter from "./NumberXTableFilter";
|
||||
import SwitchXTableFilter from './SwitchXTableFilter'
|
||||
import SelectOptionXTableFilter from './SelectOptionXTableFilter'
|
||||
import DateXTableFilter from './DateXTableFilter'
|
||||
import TextXTableFilter from './TextXTableFilter'
|
||||
import XTbl from "./model/XTbl";
|
||||
import Draggable from 'vuedraggable'
|
||||
import axios from "../../axios";
|
||||
import {openFullscreen, closeFullscreen} from "@/plugins/fullscreen";
|
||||
import NumberXTableFilter from "./NumberXTableFilter";
|
||||
import { BRow, BCol, BInputGroup, BInputGroupAppend, BFormInput, BButton } from 'bootstrap-vue'
|
||||
|
||||
|
||||
const list = [
|
||||
{
|
||||
title: 'emails',
|
||||
},
|
||||
{
|
||||
title: 'websites',
|
||||
},
|
||||
{
|
||||
title: 'Phones',
|
||||
}
|
||||
];
|
||||
const list = [
|
||||
{
|
||||
title: 'emails',
|
||||
},
|
||||
{
|
||||
title: 'websites',
|
||||
},
|
||||
{
|
||||
title: 'Phones',
|
||||
}
|
||||
];
|
||||
|
||||
export default {
|
||||
name: 'XTable',
|
||||
|
||||
components: {
|
||||
TextXTableFilter,
|
||||
NumberXTableFilter,
|
||||
SwitchXTableFilter,
|
||||
SelectOptionXTableFilter,
|
||||
Draggable,
|
||||
DateXTableFilter,
|
||||
BRow,
|
||||
BCol,
|
||||
BInputGroup,
|
||||
BInputGroupAppend,
|
||||
BFormInput,
|
||||
BButton,
|
||||
},
|
||||
|
||||
export default {
|
||||
name: 'XTable',
|
||||
components: {
|
||||
TextXTableFilter,
|
||||
NumberXTableFilter,
|
||||
SwitchXTableFilter,
|
||||
SelectOptionXTableFilter,
|
||||
Draggable,
|
||||
DateXTableFilter,
|
||||
},
|
||||
props: {
|
||||
model: {
|
||||
type: XTbl.default,
|
||||
|
|
@ -228,7 +249,8 @@
|
|||
change(item, filter, sorter) {
|
||||
if (sorter) {
|
||||
const {columnKey, order} = sorter;
|
||||
this.query.order = [`${order == 'ascend' ? '-' : '+'}${columnKey}`];
|
||||
// this.query.order = [`${order == 'ascend' ? '-' : '+'}${columnKey}`];
|
||||
this.query.order_by = `${order == 'ascend' ? '-' : ''}${columnKey}`;
|
||||
}
|
||||
this.fetch();
|
||||
},
|
||||
|
|
@ -324,7 +346,7 @@
|
|||
if(this.options.is_load_req){
|
||||
this.fetch();
|
||||
}
|
||||
console.log("this.model ==> ", this.model);
|
||||
// console.log("this.model ==> ", this.model);
|
||||
},
|
||||
created() {
|
||||
// console.log(this.options.noContent,'this.options.noContent')
|
||||
|
|
@ -334,37 +356,41 @@
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-enter-active {
|
||||
opacity: 0.5;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
.fade-enter-active {
|
||||
opacity: 0.5;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
.fade-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
|
||||
.left-table-btn {
|
||||
height: 30px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.left-table-btn {
|
||||
height: 30px;
|
||||
margin-left: 15px;
|
||||
/* display: flex;
|
||||
align-items: center; */
|
||||
}
|
||||
|
||||
|
||||
.refresh-btn {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
transition: all 0.2s ease;
|
||||
/* display: flex;
|
||||
align-items: center; */
|
||||
}
|
||||
|
||||
.refresh-btn:hover {
|
||||
transform: rotate(-45deg);
|
||||
/* display: flex;
|
||||
align-items: center; */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,177 +1,194 @@
|
|||
{
|
||||
"message": {
|
||||
"title": "Card Title",
|
||||
"text": "Cake sesame snaps cupcake gingerbread danish I love gingerbread. Apple pie pie jujubes chupa chups muffin halvah lollipop. Chocolate cake oat cake tiramisu marzipan sugar plum. Donut sweet pie oat cake dragée fruitcake cotton candy lemon drops.",
|
||||
"pagelength": "Showing 1 to",
|
||||
"of": "of",
|
||||
"pageText2": "entries",
|
||||
"seachLabel": "Search",
|
||||
"SearchPlaceholder": "Search",
|
||||
"tableHeader": {
|
||||
"name": "Name",
|
||||
"email": "Email",
|
||||
"date": "Date",
|
||||
"salary": "Salary",
|
||||
"status": "Status",
|
||||
"action": "Action"
|
||||
}
|
||||
},
|
||||
"UI Elements": "UI Elements",
|
||||
"Forms & Tables": "Forms & Tables",
|
||||
"Pages": "Pages",
|
||||
"Charts & Maps": "Charts & Maps",
|
||||
"Others": "Others",
|
||||
"Typography": "Typography",
|
||||
"Colors": "Colors",
|
||||
"Feather": "Feather",
|
||||
"Cards": "Cards",
|
||||
"Basic": "Basic",
|
||||
"Advance": "Advance",
|
||||
"Statistic": "Statistic",
|
||||
"Analytic": "Analytic",
|
||||
"Card Action": "Card Action",
|
||||
"Components": "Components",
|
||||
"Alert": "Alert",
|
||||
"Aspect": "Aspect",
|
||||
"Avatar": "Avatar",
|
||||
"Badge": "Badge",
|
||||
"Breadcrumb": "Breadcrumb",
|
||||
"Button": "Button",
|
||||
"Button Group": "Button Group",
|
||||
"Button Toolbar": "Button Toolbar",
|
||||
"Calendar": "Calendar",
|
||||
"Carousel": "Carousel",
|
||||
"Collapse": "Collapse",
|
||||
"Dropdown": "Dropdown",
|
||||
"Embed": "Embed",
|
||||
"Image": "Image",
|
||||
"List Group": "List Group",
|
||||
"Media": "Media",
|
||||
"Modal": "Modal",
|
||||
"Nav": "Nav",
|
||||
"Overlay": "Overlay",
|
||||
"Pagination": "Pagination",
|
||||
"Pagination Nav": "Pagination Nav",
|
||||
"Pill": "Pill",
|
||||
"Pill Badge": "Pill Badge",
|
||||
"Popover": "Popover",
|
||||
"Progress": "Progress",
|
||||
"Sidebar": "Sidebar",
|
||||
"spinner": "spinner",
|
||||
"Tab": "Tab",
|
||||
"Time": "Time",
|
||||
"Toasts": "Toasts",
|
||||
"Tooltip": "Tooltip",
|
||||
"Extensions": "Extensions",
|
||||
"Sweet Alert": "Sweet Alert",
|
||||
"Quill Editor": "Quill Editor",
|
||||
"Drag & Drop": "Drag & Drop",
|
||||
"Swiper": "Swiper",
|
||||
"Clipboard": "Clipboard",
|
||||
"Video Player": "Video Player",
|
||||
"Context Menu": "Context Menu",
|
||||
"Toastification": "Toastification",
|
||||
"I18n": "I18n",
|
||||
"Slider": "Slider",
|
||||
"Tour": "Tour",
|
||||
"Auto Suggest": "Auto Suggest",
|
||||
"Tree": "Tree",
|
||||
"Date Time Picker": "Date Time Picker",
|
||||
"Vue Select": "Vue Select",
|
||||
"Forms Elements": "Forms elements",
|
||||
"Select": "Select",
|
||||
"Switch": "Switch",
|
||||
"Checkbox": "Checkbox",
|
||||
"Radio": "Radio",
|
||||
"Input": "Input",
|
||||
"Textarea": "Textarea",
|
||||
"Spinbutton": "Spinbutton",
|
||||
"Input Group": "Input Group",
|
||||
"Form Rating": "Form Rating",
|
||||
"Form Tag": "Form Tag",
|
||||
"Form Datepicker": "Form Datepicker",
|
||||
"Form Timepicker": "Form Timepicker",
|
||||
"File Input": "File Input",
|
||||
"Input Mask": "Input Mask",
|
||||
"Form Layout": "Form Layout",
|
||||
"Form Wizard": "Form Wizard",
|
||||
"Form Validation": "Form Validation",
|
||||
"Form Repeater": "Form Repeater",
|
||||
"BS Table": "BS Table",
|
||||
"Good Table": "Good Table",
|
||||
"Charts": "Charts",
|
||||
"Apex Chart": "Apex Chart",
|
||||
"Chartjs": "Chartjs",
|
||||
"Echart": "Echart",
|
||||
"Leaflet": "Leaflet",
|
||||
"Profile": "Profile",
|
||||
"Account Settings": "Account Settings",
|
||||
"Faq": "Faq",
|
||||
"Knowledge Base": "Knowledge Base",
|
||||
"Pricing": "Pricing",
|
||||
"Blog": "Blog",
|
||||
"List": "List",
|
||||
"Detail": "Detail",
|
||||
"Edit": "Edit",
|
||||
"Search": "Search",
|
||||
"Menu Levels": "Menu Levels",
|
||||
"Menu Level 2.1": "Menu Level 2.1",
|
||||
"Menu Level 2.2": "Menu Level 2.2",
|
||||
"Menu Level 3.1": "Menu Level 3.1",
|
||||
"Menu Level 3.2": "Menu Level 3.2",
|
||||
"Disabled Menu": "Disabled Menu",
|
||||
"Support": "Support",
|
||||
"Raise Support": "Raise Support",
|
||||
"Documentation": "Documentation",
|
||||
"Dashboards": "Dashboards",
|
||||
"eCommerce": "eCommerce",
|
||||
"Analytics": "Analytics",
|
||||
"Apps & Pages": "Apps & Pages",
|
||||
"Email": "Email",
|
||||
"Chat": "Chat",
|
||||
"Todo": "Todo",
|
||||
"Invoice": "Invoice",
|
||||
"Preview": "Preview",
|
||||
"Add": "Add",
|
||||
"Shop": "Shop",
|
||||
"Details": "Details",
|
||||
"Wishlist": "Wishlist",
|
||||
"Checkout": "Checkout",
|
||||
"User": "User",
|
||||
"View": "View",
|
||||
"Authentication": "Authentication",
|
||||
"Login v1": "Login v1",
|
||||
"Login v2": "Login v2",
|
||||
"Register v1": "Register v1",
|
||||
"Register v2": "Register v2",
|
||||
"Forget Password v1": "Forget Password v1",
|
||||
"Forget Password v2": "Forget Password v2",
|
||||
"Forgot Password v1": "Forgot Password v1",
|
||||
"Forgot Password v2": "Forgot Password v2",
|
||||
"Reset Password v1": "Reset Password v1",
|
||||
"Reset Password v2": "Reset Password v2",
|
||||
"Miscellaneous": "Miscellaneous",
|
||||
"Coming Soon": "Coming Soon",
|
||||
"Not Authorized": "Not Authorized",
|
||||
"Under Maintenance": "Under Maintenance",
|
||||
"Error": "Error",
|
||||
"Statistics": "Statistics",
|
||||
"Card Actions": "Card Actions",
|
||||
"Media Objects": "Media Objects",
|
||||
"Timeline": "Timeline",
|
||||
"Access Control": "Access Control",
|
||||
"Apps": "Apps",
|
||||
"User Interface": "User Interface",
|
||||
"Mail Templates": "Mail Templates",
|
||||
"Welcome": "Welcome",
|
||||
"Reset Password": "Reset Password",
|
||||
"Verify Email": "Verify Email",
|
||||
"Deactivate Account": "Deactivate Account",
|
||||
"Promotional": "Promotional",
|
||||
"Page Layouts": "Page Layouts",
|
||||
"Collapsed Menu": "Collapsed Menu",
|
||||
"Layout Boxed": "Layout Boxed",
|
||||
"Without Menu": "Without Menu",
|
||||
"Layout Empty": "Layout Empty",
|
||||
"Layout Blank": "Layout Blank"
|
||||
"message": {
|
||||
"title": "Card Title",
|
||||
"text": "Cake sesame snaps cupcake gingerbread danish I love gingerbread. Apple pie pie jujubes chupa chups muffin halvah lollipop. Chocolate cake oat cake tiramisu marzipan sugar plum. Donut sweet pie oat cake dragée fruitcake cotton candy lemon drops.",
|
||||
"pagelength": "Showing 1 to",
|
||||
"of": "of",
|
||||
"pageText2": "entries",
|
||||
"seachLabel": "Search",
|
||||
"SearchPlaceholder": "Search",
|
||||
"tableHeader": {
|
||||
"name": "Name",
|
||||
"email": "Email",
|
||||
"date": "Date",
|
||||
"salary": "Salary",
|
||||
"status": "Status",
|
||||
"action": "Action"
|
||||
}
|
||||
},
|
||||
"Dashboard": "Dashboard",
|
||||
"Users": "Users",
|
||||
"Users List": "Users List",
|
||||
"Add User": "Add User",
|
||||
"User Reports": "User Reports",
|
||||
"Deleted Users List": "Deleted Users' List",
|
||||
"Admins": "Admins",
|
||||
"Add Admin": "Add Admin",
|
||||
"Permissions": "Permissions",
|
||||
"My Activities": "My Activities",
|
||||
"Financial": "Financial",
|
||||
"Financial List": "Financial List",
|
||||
"Financial Reports": "Financial Reports",
|
||||
"Refunds": "Refunds",
|
||||
"Refunds List": "Refunds List",
|
||||
"Add Refund": "Add Refund",
|
||||
"Refund Reports": "Refund Reports",
|
||||
"UI Elements": "UI Elements",
|
||||
"Forms & Tables": "Forms & Tables",
|
||||
"Pages": "Pages",
|
||||
"Charts & Maps": "Charts & Maps",
|
||||
"Others": "Others",
|
||||
"Typography": "Typography",
|
||||
"Colors": "Colors",
|
||||
"Feather": "Feather",
|
||||
"Cards": "Cards",
|
||||
"Basic": "Basic",
|
||||
"Advance": "Advance",
|
||||
"Statistic": "Statistic",
|
||||
"Analytic": "Analytic",
|
||||
"Card Action": "Card Action",
|
||||
"Components": "Components",
|
||||
"Alert": "Alert",
|
||||
"Aspect": "Aspect",
|
||||
"Avatar": "Avatar",
|
||||
"Badge": "Badge",
|
||||
"Breadcrumb": "Breadcrumb",
|
||||
"Button": "Button",
|
||||
"Button Group": "Button Group",
|
||||
"Button Toolbar": "Button Toolbar",
|
||||
"Calendar": "Calendar",
|
||||
"Carousel": "Carousel",
|
||||
"Collapse": "Collapse",
|
||||
"Dropdown": "Dropdown",
|
||||
"Embed": "Embed",
|
||||
"Image": "Image",
|
||||
"List Group": "List Group",
|
||||
"Media": "Media",
|
||||
"Modal": "Modal",
|
||||
"Nav": "Nav",
|
||||
"Overlay": "Overlay",
|
||||
"Pagination": "Pagination",
|
||||
"Pagination Nav": "Pagination Nav",
|
||||
"Pill": "Pill",
|
||||
"Pill Badge": "Pill Badge",
|
||||
"Popover": "Popover",
|
||||
"Progress": "Progress",
|
||||
"Sidebar": "Sidebar",
|
||||
"spinner": "spinner",
|
||||
"Tab": "Tab",
|
||||
"Time": "Time",
|
||||
"Toasts": "Toasts",
|
||||
"Tooltip": "Tooltip",
|
||||
"Extensions": "Extensions",
|
||||
"Sweet Alert": "Sweet Alert",
|
||||
"Quill Editor": "Quill Editor",
|
||||
"Drag & Drop": "Drag & Drop",
|
||||
"Swiper": "Swiper",
|
||||
"Clipboard": "Clipboard",
|
||||
"Video Player": "Video Player",
|
||||
"Context Menu": "Context Menu",
|
||||
"Toastification": "Toastification",
|
||||
"I18n": "I18n",
|
||||
"Slider": "Slider",
|
||||
"Tour": "Tour",
|
||||
"Auto Suggest": "Auto Suggest",
|
||||
"Tree": "Tree",
|
||||
"Date Time Picker": "Date Time Picker",
|
||||
"Vue Select": "Vue Select",
|
||||
"Forms Elements": "Forms elements",
|
||||
"Select": "Select",
|
||||
"Switch": "Switch",
|
||||
"Checkbox": "Checkbox",
|
||||
"Radio": "Radio",
|
||||
"Input": "Input",
|
||||
"Textarea": "Textarea",
|
||||
"Spinbutton": "Spinbutton",
|
||||
"Input Group": "Input Group",
|
||||
"Form Rating": "Form Rating",
|
||||
"Form Tag": "Form Tag",
|
||||
"Form Datepicker": "Form Datepicker",
|
||||
"Form Timepicker": "Form Timepicker",
|
||||
"File Input": "File Input",
|
||||
"Input Mask": "Input Mask",
|
||||
"Form Layout": "Form Layout",
|
||||
"Form Wizard": "Form Wizard",
|
||||
"Form Validation": "Form Validation",
|
||||
"Form Repeater": "Form Repeater",
|
||||
"BS Table": "BS Table",
|
||||
"Good Table": "Good Table",
|
||||
"Charts": "Charts",
|
||||
"Apex Chart": "Apex Chart",
|
||||
"Chartjs": "Chartjs",
|
||||
"Echart": "Echart",
|
||||
"Leaflet": "Leaflet",
|
||||
"Profile": "Profile",
|
||||
"Account Settings": "Account Settings",
|
||||
"Faq": "Faq",
|
||||
"Knowledge Base": "Knowledge Base",
|
||||
"Pricing": "Pricing",
|
||||
"Blog": "Blog",
|
||||
"List": "List",
|
||||
"Detail": "Detail",
|
||||
"Edit": "Edit",
|
||||
"Search": "Search",
|
||||
"Menu Levels": "Menu Levels",
|
||||
"Menu Level 2.1": "Menu Level 2.1",
|
||||
"Menu Level 2.2": "Menu Level 2.2",
|
||||
"Menu Level 3.1": "Menu Level 3.1",
|
||||
"Menu Level 3.2": "Menu Level 3.2",
|
||||
"Disabled Menu": "Disabled Menu",
|
||||
"Support": "Support",
|
||||
"Raise Support": "Raise Support",
|
||||
"Documentation": "Documentation",
|
||||
"Dashboards": "Dashboards",
|
||||
"eCommerce": "eCommerce",
|
||||
"Analytics": "Analytics",
|
||||
"Apps & Pages": "Apps & Pages",
|
||||
"Email": "Email",
|
||||
"Chat": "Chat",
|
||||
"Todo": "Todo",
|
||||
"Invoice": "Invoice",
|
||||
"Preview": "Preview",
|
||||
"Add": "Add",
|
||||
"Shop": "Shop",
|
||||
"Details": "Details",
|
||||
"Wishlist": "Wishlist",
|
||||
"Checkout": "Checkout",
|
||||
"User": "User",
|
||||
"View": "View",
|
||||
"Authentication": "Authentication",
|
||||
"Login v1": "Login v1",
|
||||
"Login v2": "Login v2",
|
||||
"Register v1": "Register v1",
|
||||
"Register v2": "Register v2",
|
||||
"Forget Password v1": "Forget Password v1",
|
||||
"Forget Password v2": "Forget Password v2",
|
||||
"Forgot Password v1": "Forgot Password v1",
|
||||
"Forgot Password v2": "Forgot Password v2",
|
||||
"Reset Password v1": "Reset Password v1",
|
||||
"Reset Password v2": "Reset Password v2",
|
||||
"Miscellaneous": "Miscellaneous",
|
||||
"Coming Soon": "Coming Soon",
|
||||
"Not Authorized": "Not Authorized",
|
||||
"Under Maintenance": "Under Maintenance",
|
||||
"Error": "Error",
|
||||
"Statistics": "Statistics",
|
||||
"Card Actions": "Card Actions",
|
||||
"Media Objects": "Media Objects",
|
||||
"Timeline": "Timeline",
|
||||
"Access Control": "Access Control",
|
||||
"Apps": "Apps",
|
||||
"User Interface": "User Interface",
|
||||
"Mail Templates": "Mail Templates",
|
||||
"Welcome": "Welcome",
|
||||
"Reset Password": "Reset Password",
|
||||
"Verify Email": "Verify Email",
|
||||
"Deactivate Account": "Deactivate Account",
|
||||
"Promotional": "Promotional",
|
||||
"Page Layouts": "Page Layouts",
|
||||
"Collapsed Menu": "Collapsed Menu",
|
||||
"Layout Boxed": "Layout Boxed",
|
||||
"Without Menu": "Without Menu",
|
||||
"Layout Empty": "Layout Empty",
|
||||
"Layout Blank": "Layout Blank"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,16 @@ export default [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Admins',
|
||||
icon: 'Edit2Icon',
|
||||
children: [
|
||||
{
|
||||
title: 'Add Admin',
|
||||
route: 'admins-add',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title : 'Permissions',
|
||||
icon : 'LockIcon' ,
|
||||
|
|
@ -55,7 +65,7 @@ export default [
|
|||
icon: 'RefreshCcwIcon',
|
||||
children: [
|
||||
{
|
||||
title: 'Refunds Lists',
|
||||
title: 'Refunds List',
|
||||
route: 'refunds-list',
|
||||
},
|
||||
{
|
||||
|
|
@ -68,54 +78,54 @@ export default [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Lawyers',
|
||||
icon: 'FeatherIcon',
|
||||
children: [
|
||||
{
|
||||
title: 'Lawyers List',
|
||||
route: 'lawyers-list',
|
||||
},
|
||||
{
|
||||
title: 'Add Lawyer',
|
||||
route: 'lawyers-add',
|
||||
},
|
||||
{
|
||||
title: 'Lawyer Reports',
|
||||
route: 'lawyers-reports',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Law Firms',
|
||||
icon: 'FlagIcon',
|
||||
children: [
|
||||
{
|
||||
title: 'Law Firms List',
|
||||
route: 'lawfirms-list',
|
||||
},
|
||||
{
|
||||
title: 'Add Law Firm',
|
||||
route: 'lawfirms-add',
|
||||
},
|
||||
{
|
||||
title: 'Law Firm Reports',
|
||||
route: 'lawfirms-reports',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Weblog',
|
||||
icon: 'LayoutIcon',
|
||||
children: [
|
||||
{
|
||||
title: 'Weblogs List',
|
||||
route: 'weblogs-list',
|
||||
},
|
||||
{
|
||||
title: 'Add Weblog',
|
||||
route: 'weblogs-add',
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// title: 'Lawyers',
|
||||
// icon: 'FeatherIcon',
|
||||
// children: [
|
||||
// {
|
||||
// title: 'Lawyers List',
|
||||
// route: 'lawyers-list',
|
||||
// },
|
||||
// {
|
||||
// title: 'Add Lawyer',
|
||||
// route: 'lawyers-add',
|
||||
// },
|
||||
// {
|
||||
// title: 'Lawyer Reports',
|
||||
// route: 'lawyers-reports',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'Law Firms',
|
||||
// icon: 'FlagIcon',
|
||||
// children: [
|
||||
// {
|
||||
// title: 'Law Firms List',
|
||||
// route: 'lawfirms-list',
|
||||
// },
|
||||
// {
|
||||
// title: 'Add Law Firm',
|
||||
// route: 'lawfirms-add',
|
||||
// },
|
||||
// {
|
||||
// title: 'Law Firm Reports',
|
||||
// route: 'lawfirms-reports',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// title: 'Weblog',
|
||||
// icon: 'LayoutIcon',
|
||||
// children: [
|
||||
// {
|
||||
// title: 'Weblogs List',
|
||||
// route: 'weblogs-list',
|
||||
// },
|
||||
// {
|
||||
// title: 'Add Weblog',
|
||||
// route: 'weblogs-add',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
]
|
||||
|
|
@ -4,13 +4,13 @@ import { canNavigate } from '@/libs/acl/routeProtection'
|
|||
import { isUserLoggedIn, getUserData, getHomeRouteForLoggedInUser } from '@/auth/utils'
|
||||
|
||||
// Routes
|
||||
import apps from './routes/apps'
|
||||
import dashboard from './routes/dashboard'
|
||||
import uiElements from './routes/ui-elements/index'
|
||||
// import apps from './routes/apps'
|
||||
// import dashboard from './routes/dashboard'
|
||||
// import uiElements from './routes/ui-elements/index'
|
||||
import pages from './routes/pages'
|
||||
import chartsMaps from './routes/charts-maps'
|
||||
import formsTable from './routes/forms-tables'
|
||||
import others from './routes/others'
|
||||
// import chartsMaps from './routes/charts-maps'
|
||||
// import formsTable from './routes/forms-tables'
|
||||
// import others from './routes/others'
|
||||
import Misc from './routes/misc'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
|
@ -22,7 +22,7 @@ const router = new VueRouter({
|
|||
return { x: 0, y: 0 }
|
||||
},
|
||||
routes: [
|
||||
{ path: '/', redirect: { name: 'users-list' } },
|
||||
{ path: '/', redirect: { name: 'dashboard' } },
|
||||
// ...apps,
|
||||
// ...dashboard,
|
||||
...pages,
|
||||
|
|
|
|||
|
|
@ -1,70 +1,70 @@
|
|||
export default [
|
||||
{
|
||||
path: '/charts-and-maps/charts/apex-chart',
|
||||
name: 'charts-apex-chart',
|
||||
component: () => import('@/views/charts-and-maps/charts/apex-chart/ApexChart.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Apex Chart',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Apex Chart',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/charts-and-maps/charts/chartjs',
|
||||
name: 'charts-chartjs',
|
||||
component: () => import('@/views/charts-and-maps/charts/chartjs/Chartjs.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Chartjs',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Chartjs',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/charts-and-maps/charts/echart',
|
||||
name: 'charts-echart',
|
||||
component: () => import('@/views/charts-and-maps/charts/echart/Echart.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Echart',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Echart',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/maps/leaflet',
|
||||
name: 'maps-leaflet',
|
||||
component: () => import('@/views/charts-and-maps/maps/leaflet/Leaflet.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Leaflet',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Table',
|
||||
},
|
||||
{
|
||||
text: 'Leaflet',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/charts-and-maps/charts/apex-chart',
|
||||
name: 'charts-apex-chart',
|
||||
component: () => import('@/views/Examples/charts-and-maps/charts/apex-chart/ApexChart.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Apex Chart',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Apex Chart',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/charts-and-maps/charts/chartjs',
|
||||
name: 'charts-chartjs',
|
||||
component: () => import('@/views/Examples/charts-and-maps/charts/chartjs/Chartjs.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Chartjs',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Chartjs',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/charts-and-maps/charts/echart',
|
||||
name: 'charts-echart',
|
||||
component: () => import('@/views/Examples/charts-and-maps/charts/echart/Echart.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Echart',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Echart',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/maps/leaflet',
|
||||
name: 'maps-leaflet',
|
||||
component: () => import('@/views/Examples/charts-and-maps/maps/leaflet/Leaflet.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Leaflet',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Table',
|
||||
},
|
||||
{
|
||||
text: 'Leaflet',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
export default [
|
||||
{
|
||||
path: '/dashboard/analytics',
|
||||
name: 'dashboard-analytics',
|
||||
component: () => import('@/views/dashboard/analytics/Analytics.vue'),
|
||||
},
|
||||
{
|
||||
path: '/dashboard/ecommerce',
|
||||
name: 'dashboard-ecommerce',
|
||||
component: () => import('@/views/dashboard/ecommerce/Ecommerce.vue'),
|
||||
},
|
||||
{
|
||||
path: '/dashboard/analytics',
|
||||
name: 'dashboard-analytics',
|
||||
component: () => import('@/views/Examples/dashboard/analytics/Analytics.vue'),
|
||||
},
|
||||
{
|
||||
path: '/dashboard/ecommerce',
|
||||
name: 'dashboard-ecommerce',
|
||||
component: () => import('@/views/Examples/dashboard/ecommerce/Ecommerce.vue'),
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -94,6 +94,15 @@ export default [
|
|||
component: () => import('@/views/LawFirms/LawFirmReports.vue'),
|
||||
},
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Admin Routes
|
||||
// -----------------------------------------------------------------------
|
||||
{
|
||||
path: '/admins/add',
|
||||
name: 'admins-add',
|
||||
component: () => import('@/views/Admins/AddAdmin.vue'),
|
||||
},
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// Misc Routes
|
||||
// -----------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
export default [
|
||||
{
|
||||
path: '/access-control',
|
||||
name: 'access-control',
|
||||
component: () => import('@/views/extensions/acl/AccessControl.vue'),
|
||||
meta: {
|
||||
resource: 'ACL',
|
||||
action: 'read',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/access-control',
|
||||
name: 'access-control',
|
||||
component: () => import('@/views/Examples/extensions/acl/AccessControl.vue'),
|
||||
meta: {
|
||||
resource: 'ACL',
|
||||
action: 'read',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,87 +1,87 @@
|
|||
export default [
|
||||
{
|
||||
path: '/card/card-basic',
|
||||
name: 'card-basic',
|
||||
component: () => import('@/views/card/card-basic/CardBasic.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Basic Card',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Card',
|
||||
},
|
||||
{
|
||||
text: 'Basic Card',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/card/card-advance',
|
||||
name: 'card-advance',
|
||||
component: () => import('@/views/card/card-advance/CardAdvance.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Advance Card',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Card',
|
||||
},
|
||||
{
|
||||
text: 'Advance Card',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/card/statistic',
|
||||
name: 'card-statistic',
|
||||
component: () => import('@/views/card/card-statistic/CardStatistic.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Statistics Cards',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Card',
|
||||
},
|
||||
{
|
||||
text: 'Statistics Cards',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/card/analytic',
|
||||
name: 'card-analytic',
|
||||
component: () => import('@/views/card/card-analytic/CardAnalytic.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Analytics Cards',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Card',
|
||||
},
|
||||
{
|
||||
text: 'Analytics Cards',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/card/action',
|
||||
name: 'card-action',
|
||||
component: () => import('@/views/card/card-action/CardAction.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Card Actions',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Card',
|
||||
},
|
||||
{
|
||||
text: 'Card Actions',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/card/card-basic',
|
||||
name: 'card-basic',
|
||||
component: () => import('@/views/Examples/card/card-basic/CardBasic.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Basic Card',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Card',
|
||||
},
|
||||
{
|
||||
text: 'Basic Card',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/card/card-advance',
|
||||
name: 'card-advance',
|
||||
component: () => import('@/views/Examples/card/card-advance/CardAdvance.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Advance Card',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Card',
|
||||
},
|
||||
{
|
||||
text: 'Advance Card',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/card/statistic',
|
||||
name: 'card-statistic',
|
||||
component: () => import('@/views/Examples/card/card-statistic/CardStatistic.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Statistics Cards',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Card',
|
||||
},
|
||||
{
|
||||
text: 'Statistics Cards',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/card/analytic',
|
||||
name: 'card-analytic',
|
||||
component: () => import('@/views/Examples/card/card-analytic/CardAnalytic.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Analytics Cards',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Card',
|
||||
},
|
||||
{
|
||||
text: 'Analytics Cards',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/card/action',
|
||||
name: 'card-action',
|
||||
component: () => import('@/views/Examples/card/card-action/CardAction.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Card Actions',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Card',
|
||||
},
|
||||
{
|
||||
text: 'Card Actions',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,158 +1,158 @@
|
|||
export default [
|
||||
{
|
||||
path: '/extensions/sweet-alert',
|
||||
name: 'extensions-sweet-alert',
|
||||
component: () => import('@/views/extensions/sweet-alert/SweetAlert.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Sweet Alerts',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Sweet Alerts',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/sweet-alert',
|
||||
name: 'extensions-sweet-alert',
|
||||
component: () => import('@/views/Examples/extensions/sweet-alert/SweetAlert.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Sweet Alerts',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Sweet Alerts',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/drag-drop',
|
||||
name: 'extensions-drag-and-drop',
|
||||
component: () => import('@/views/Examples/extensions/drag-drop/DragDrop.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Drag & Drop',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Drag & Drop',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/swiper',
|
||||
name: 'extensions-swiper',
|
||||
component: () => import('@/views/Examples/extensions/swiper/Swiper.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Swiper',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Swiper',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/clipboard',
|
||||
name: 'extensions-clipboard',
|
||||
component: () => import('@/views/Examples/extensions/clipboard/Clipboard.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Clipboard',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Clipboard',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/context-menu',
|
||||
name: 'extensions-context-menu',
|
||||
component: () => import('@/views/Examples/extensions/context-menu/ContextMenu.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Context Menu',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Context Menu',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/toastification',
|
||||
name: 'extensions-toastification',
|
||||
component: () => import('@/views/Examples/extensions/toastification/Toastification.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Toastification',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Toastification',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/i18n',
|
||||
name: 'extensions-i18n',
|
||||
component: () => import('@/views/Examples/extensions/i18n/i18n.vue'),
|
||||
meta: {
|
||||
pageTitle: 'I18n',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'I18n',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/slider',
|
||||
name: 'extensions-slider',
|
||||
component: () => import('@/views/Examples/extensions/slider/Slider.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Slider',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Slider',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/tour',
|
||||
name: 'extensions-tour',
|
||||
component: () => import('@/views/Examples/extensions/tour/Tour.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Tour',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Tour',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
path: '/extensions/drag-drop',
|
||||
name: 'extensions-drag-and-drop',
|
||||
component: () => import('@/views/extensions/drag-drop/DragDrop.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Drag & Drop',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Drag & Drop',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/swiper',
|
||||
name: 'extensions-swiper',
|
||||
component: () => import('@/views/extensions/swiper/Swiper.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Swiper',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Swiper',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/clipboard',
|
||||
name: 'extensions-clipboard',
|
||||
component: () => import('@/views/extensions/clipboard/Clipboard.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Clipboard',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Clipboard',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/context-menu',
|
||||
name: 'extensions-context-menu',
|
||||
component: () => import('@/views/extensions/context-menu/ContextMenu.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Context Menu',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Context Menu',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/toastification',
|
||||
name: 'extensions-toastification',
|
||||
component: () => import('@/views/extensions/toastification/Toastification.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Toastification',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Toastification',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/i18n',
|
||||
name: 'extensions-i18n',
|
||||
component: () => import('@/views/extensions/i18n/i18n.vue'),
|
||||
meta: {
|
||||
pageTitle: 'I18n',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'I18n',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/slider',
|
||||
name: 'extensions-slider',
|
||||
component: () => import('@/views/extensions/slider/Slider.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Slider',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Slider',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/extensions/tour',
|
||||
name: 'extensions-tour',
|
||||
component: () => import('@/views/extensions/tour/Tour.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Tour',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Extensions',
|
||||
},
|
||||
{
|
||||
text: 'Tour',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: '/extensions/tree',
|
||||
// name: 'extensions-tree',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@ import extensions from './extensions'
|
|||
import ui from './ui'
|
||||
import pageLayouts from './page-layouts'
|
||||
|
||||
const data = [...cards, ...components, ...extensions, ...ui, ...pageLayouts]
|
||||
const data = [
|
||||
...cards,
|
||||
...components,
|
||||
...extensions,
|
||||
...ui,
|
||||
...pageLayouts,
|
||||
]
|
||||
|
||||
export default data
|
||||
|
|
|
|||
|
|
@ -1,79 +1,79 @@
|
|||
export default [
|
||||
{
|
||||
path: '/page-layouts/collapsed-menu',
|
||||
name: 'page-layout-collapsed-menu',
|
||||
component: () => import('@/views/ui/page-layouts/CollapsedMenu.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Layout Collapsed Menu',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Layouts',
|
||||
},
|
||||
{
|
||||
text: 'Collapsed Menu',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/page-layouts/boxed-layout',
|
||||
name: 'page-layout-boxed-layout',
|
||||
component: () => import('@/views/ui/page-layouts/BoxedLayout.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Boxed Layout',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Layouts',
|
||||
},
|
||||
{
|
||||
text: 'Boxed Layout',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/page-layouts/without-menu',
|
||||
name: 'page-layout-without-menu',
|
||||
component: () => import('@/views/ui/page-layouts/WithoutMenu.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Layout Without Menu',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Layouts',
|
||||
},
|
||||
{
|
||||
text: 'Layout Without Menu',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/page-layouts/layout-empty',
|
||||
name: 'page-layout-layout-empty',
|
||||
component: () => import('@/views/ui/page-layouts/LayoutEmpty.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Layout Empty',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Layouts',
|
||||
},
|
||||
{
|
||||
text: 'Layout Empty',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/page-layouts/layout-blank',
|
||||
name: 'page-layout-layout-blank',
|
||||
component: () => import('@/views/ui/page-layouts/LayoutBlank.vue'),
|
||||
meta: {
|
||||
layout: 'full',
|
||||
pageTitle: 'Layout Blank',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/page-layouts/collapsed-menu',
|
||||
name: 'page-layout-collapsed-menu',
|
||||
component: () => import('@/views/Examples/ui/page-layouts/CollapsedMenu.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Layout Collapsed Menu',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Layouts',
|
||||
},
|
||||
{
|
||||
text: 'Collapsed Menu',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/page-layouts/boxed-layout',
|
||||
name: 'page-layout-boxed-layout',
|
||||
component: () => import('@/views/Examples/ui/page-layouts/BoxedLayout.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Boxed Layout',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Layouts',
|
||||
},
|
||||
{
|
||||
text: 'Boxed Layout',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/page-layouts/without-menu',
|
||||
name: 'page-layout-without-menu',
|
||||
component: () => import('@/views/Examples/ui/page-layouts/WithoutMenu.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Layout Without Menu',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Layouts',
|
||||
},
|
||||
{
|
||||
text: 'Layout Without Menu',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/page-layouts/layout-empty',
|
||||
name: 'page-layout-layout-empty',
|
||||
component: () => import('@/views/Examples/ui/page-layouts/LayoutEmpty.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Layout Empty',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Layouts',
|
||||
},
|
||||
{
|
||||
text: 'Layout Empty',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/page-layouts/layout-blank',
|
||||
name: 'page-layout-layout-blank',
|
||||
component: () => import('@/views/Examples/ui/page-layouts/LayoutBlank.vue'),
|
||||
meta: {
|
||||
layout: 'full',
|
||||
pageTitle: 'Layout Blank',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,53 +1,53 @@
|
|||
export default [
|
||||
{
|
||||
path: '/ui/typography',
|
||||
name: 'ui-typography',
|
||||
component: () => import('@/views/ui/typography/Typography.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Typography',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'UI',
|
||||
},
|
||||
{
|
||||
text: 'Typography',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/ui/colors',
|
||||
name: 'ui-colors',
|
||||
component: () => import('@/views/ui/colors/Colors.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Colors',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'UI',
|
||||
},
|
||||
{
|
||||
text: 'Colors',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/ui/feather',
|
||||
name: 'ui-feather',
|
||||
component: () => import('@/views/ui/feather/Feather.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Feather',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'UI',
|
||||
},
|
||||
{
|
||||
text: 'Feather',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/ui/typography',
|
||||
name: 'ui-typography',
|
||||
component: () => import('@/views/Examples/ui/typography/Typography.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Typography',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'UI',
|
||||
},
|
||||
{
|
||||
text: 'Typography',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/ui/colors',
|
||||
name: 'ui-colors',
|
||||
component: () => import('@/views/Examples/ui/colors/Colors.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Colors',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'UI',
|
||||
},
|
||||
{
|
||||
text: 'Colors',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/ui/feather',
|
||||
name: 'ui-feather',
|
||||
component: () => import('@/views/Examples/ui/feather/Feather.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Feather',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'UI',
|
||||
},
|
||||
{
|
||||
text: 'Feather',
|
||||
active: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -18,6 +18,24 @@ export default {
|
|||
if (windowWidth >= $themeBreakpoints.sm) return 'sm'
|
||||
return 'xs'
|
||||
},
|
||||
|
||||
windowIsSmallerThanMD: (state, getters) => {
|
||||
return (
|
||||
getters.currentBreakPoint === 'xs' ||
|
||||
getters.currentBreakPoint === 'sm'
|
||||
)
|
||||
},
|
||||
|
||||
windowIsLargerThanMD: (state, getters) => {
|
||||
return (
|
||||
getters.currentBreakPoint === 'lg' ||
|
||||
getters.currentBreakPoint === 'xl'
|
||||
)
|
||||
},
|
||||
|
||||
windowIsLargerThanLG: (state, getters) => {
|
||||
return ( getters.currentBreakPoint === 'xl' )
|
||||
},
|
||||
},
|
||||
|
||||
mutations: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,239 @@
|
|||
<template>
|
||||
<div class="page--main d-lg-flex justify-content-md-center align-items-lg-center">
|
||||
<validation-observer
|
||||
id="add-admin--container"
|
||||
class="d-flex flex-column"
|
||||
ref="addNewAdmin"
|
||||
>
|
||||
<!-- HEADER -->
|
||||
<header class="d-flex justify-content-between align-items-center p-1">
|
||||
<h2 class="text-primary m-0">Add Admin</h2>
|
||||
<img style="cursor: pointer;" src="@/assets/svg/cross.svg" alt="close-icon" v-on:click="$router.push('/')">
|
||||
</header>
|
||||
|
||||
<!-- BODY -->
|
||||
<main class="px-1 px-md-3 py-1">
|
||||
<b-row>
|
||||
<!-- First Name -->
|
||||
<b-col md="6">
|
||||
<b-form-group label="First Name:" label-for="txtFirstName">
|
||||
<validation-provider
|
||||
v-slot:default="{ errors }"
|
||||
name="First Name"
|
||||
rules="required"
|
||||
>
|
||||
<b-form-input
|
||||
id="txtFirstName"
|
||||
v-model="Payload_D.first_name"
|
||||
v-bind:state="errors.length > 0 ? false : null"
|
||||
/>
|
||||
<small class="text-danger"> {{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<!-- Last Name -->
|
||||
<b-col md="6">
|
||||
<b-form-group label="Last Name:" label-for="txtLastName">
|
||||
<validation-provider
|
||||
v-slot:default="{ errors }"
|
||||
name="Last Name"
|
||||
rules="required"
|
||||
>
|
||||
<b-form-input
|
||||
id="txtLastName"
|
||||
v-model="Payload_D.last_name"
|
||||
v-bind:state="errors.length > 0 ? false : null"
|
||||
/>
|
||||
<small class="text-danger"> {{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<!-- Email -->
|
||||
<b-col md="12">
|
||||
<b-form-group label="Email:" label-for="txtEmail">
|
||||
<validation-provider
|
||||
v-slot:default="{ errors }"
|
||||
name="Email"
|
||||
rules="required|email"
|
||||
>
|
||||
<b-form-input
|
||||
id="txtEmail"
|
||||
placeholder="example@gmail.com"
|
||||
v-model="Payload_D.email"
|
||||
v-bind:state="errors.length > 0 ? false : null"
|
||||
/>
|
||||
<small class="text-danger"> {{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<!-- Password -->
|
||||
<b-col md="6">
|
||||
<b-form-group label="Password:">
|
||||
<validation-provider
|
||||
v-slot:default="{ errors }"
|
||||
name="Password"
|
||||
rules="required"
|
||||
>
|
||||
<b-form-input
|
||||
id="txtPassword"
|
||||
v-model="Payload_D.password"
|
||||
v-bind:state="errors.length > 0 ? false : null"
|
||||
/>
|
||||
<small class="text-danger"> {{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<!-- Confirm Password -->
|
||||
<b-col md="6">
|
||||
<b-form-group label="Confirm Password:">
|
||||
<validation-provider
|
||||
v-slot:default="{ errors }"
|
||||
name="Confirm Password"
|
||||
rules="required"
|
||||
>
|
||||
<b-form-input
|
||||
id="txtPasswordConfirm"
|
||||
v-model="ConfirmedPassword_D"
|
||||
v-bind:state="errors.length > 0 ? false : null"
|
||||
/>
|
||||
<small class="text-danger"> {{ errors[0] }}</small>
|
||||
</validation-provider>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</main>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="px-3 py-1">
|
||||
<b-button
|
||||
class="mr-1"
|
||||
variant="primary"
|
||||
type="submit"
|
||||
v-ripple.400="'rgba(255, 255, 255, 0.15)'"
|
||||
v-on:click="AddNewAdmin()"
|
||||
>
|
||||
Save New Admin
|
||||
</b-button>
|
||||
or
|
||||
<a class="text-primary" v-on:click="$router.push('/')">Cancel</a>
|
||||
</footer>
|
||||
</validation-observer>
|
||||
|
||||
<!-- PASSWORD MISMATCH MODAL -->
|
||||
<b-modal id="password-mismatch-modal" ok-only centered body-bg-variant="error">
|
||||
<h1 class="text-danger">Password Mismatch</h1>
|
||||
<p>The passwords do not match. Please try again.</p>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BButton, BRow, BCol, BFormGroup, BFormInput, BFormDatepicker, BFormRadio, BFormTextarea, BModal, VBModal } from 'bootstrap-vue'
|
||||
import Ripple from 'vue-ripple-directive'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate'
|
||||
import { required, email } from '@validations'
|
||||
import { Log } from '@/modules/core'
|
||||
import axios from '@/axios'
|
||||
|
||||
export default {
|
||||
name: 'AddAdminView',
|
||||
|
||||
components: {
|
||||
BButton,
|
||||
BRow,
|
||||
BCol,
|
||||
BFormGroup,
|
||||
BFormInput,
|
||||
BFormDatepicker,
|
||||
BFormRadio,
|
||||
BFormTextarea,
|
||||
BModal,
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
},
|
||||
|
||||
directives: {
|
||||
'b-modal': VBModal,
|
||||
Ripple,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
Payload_D: {
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
ConfirmedPassword_D: '',
|
||||
|
||||
// Vee Validate Rules
|
||||
required,
|
||||
email,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
AddNewAdmin()
|
||||
{
|
||||
this.$refs.addNewAdmin.validate().then(async success => {
|
||||
if( success )
|
||||
{
|
||||
// Check if password and confirmed password match
|
||||
if( this.Payload_D.password !== this.ConfirmedPassword_D )
|
||||
{
|
||||
this.Payload_D.password = ''
|
||||
this.ConfirmedPassword_D = ''
|
||||
this.$bvModal.show('password-mismatch-modal')
|
||||
return
|
||||
}
|
||||
|
||||
// Add the new admin
|
||||
try
|
||||
{
|
||||
const { data } = await axios.post('administrator/user/application-admin/', this.Payload_D)
|
||||
this.$router.push('/users/list')
|
||||
}
|
||||
catch (e)
|
||||
{
|
||||
Log('ERROR::AXIOS::VIEWS/ADMINS/ADD_ADMIN.VUE>METHODS>ADD_NEW_ADMIN', e)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#add-admin--container {
|
||||
background: white;
|
||||
width: auto;
|
||||
}
|
||||
@media (min-width: 375px) {
|
||||
#add-admin--container {
|
||||
border: 1px solid #707070;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
#add-admin--container {
|
||||
max-width: 75%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1199px) {
|
||||
#add-admin--container {
|
||||
max-width: 66%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1740px) {
|
||||
#add-admin--container {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
border-top: 1px solid rgb(0 0 0 / 9%);
|
||||
border-bottom: 1px solid rgb(0 0 0 / 9%);
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue