fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update cards view API service

Browse Source
This commit is contained in:
Henry Jordan
2021-07-08 20:20:05 +00:00
parent bfb957ea5a
commit 2364ecbe99
5 changed files with 150 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
resources/assets/js/components/dataViews/vueCardView/VueCard.vue
View File

@@ -2,14 +2,7 @@
<div class="pm-vue-card">
<div class="card" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<span v-for="column in columns" :key="column">
<slot :name="column" :item="item"></slot>
</span>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
<slot> </slot>
</div>
</div>
</div>
@@ -21,18 +14,6 @@ export default {
props: ["columns", "item"],
data() {
return {
headings: {
detail: "",
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
case_title: this.$i18n.t("ID_CASE_TITLE"),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
task: this.$i18n.t("ID_TASK"),
current_user: this.$i18n.t("ID_CURRENT_USER"),
due_date: this.$i18n.t("ID_DUE_DATE"),
delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
priority: this.$i18n.t("ID_PRIORITY"),
actions: "",
},
};
},
methods: {

32
resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
View File

@@ -1,8 +1,16 @@
<template>
<div class="pm-vue-card-view">
<div class="pm-vue-card-view-container">
<div v-for="item in data" :columns="columns" :key="item" :data="item">
asdasd {{item}}
<div>
<vue-card v-for="item in data" :key="item.id">
<slot
v-for="column in options.columns"
:name="column"
:item="item"
:column="column"
:headings="options.headings"
></slot>
</vue-card>
</div>
</div>
</div>
@@ -10,29 +18,21 @@
<script>
import VueCard from "./VueCard.vue";
import DefaultMixins from "./VueCardViewMixins";
export default {
name: "VueCardView",
mixins: [DefaultMixins],
components: {
VueCard,
},
props: ["data"],
props: ["options"],
data() {
return {
columns: [
"detail",
"case_number",
"case_title",
"process_name",
"task",
"due_date",
"delegation_date",
"priority",
"actions",
],
};
},
mounted(){
console.log(this.data);
mounted() {
},
methods: {
classBtn(cls) {

41
resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js
View File

@@ -0,0 +1,41 @@
export default {
data() {
let that = this;
return {
config: {
page: 1
},
data: []
}
},
mounted: function () {
console.log("jonas");
this.getData();
},
methods: {
/**
* Get data similar to vue Table
*/
getData() {
let options = _.extend({}, this.config, this.options),
that = this;
console.log("GETTTTTTTTTT");
this.options.requestFunction(options)
.then((data) => {
console.log("jonas vue car view");
that.data = data.data;
})
.catch(() => {
});
},
/**
* Get data when press the button more view
*/
viewMore() {
}
}
}

33
resources/assets/js/home/Inbox/Todo.vue
View File

@@ -51,7 +51,20 @@
</button>
</div>
</v-server-table>
<VueCardView v-if="typeView === 'CARD'" :data="tableData">
<VueCardView v-if="typeView === 'CARD'" :options="optionsVueCardView">
<div slot="case_number" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark">{{ props["headings"][props.column]}} :</span> <span class="v-card-text-light">{{ props["item"]["CASE_NUMBER"]}} </span>
</div>
<div slot="case_title" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark">{{ props["headings"][props.column]}} :</span> <span class="v-card-text-light">{{ props["item"]["CASE_TITLE"]}} </span>
</div>
<div slot="process_name" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark">{{ props["headings"][props.column]}} :</span> <span class="v-card-text-light">{{ props["item"]["PROCESS_NAME"]}} </span>
</div>
<div slot="task" slot-scope="props" class="v-card-text">
<span class="v-card-text-dark">{{ props["headings"][props.column]}} :</span> <span class="v-card-text-light"> <TaskCell :data="props.item.TASK" /> </span>
</div>
</VueCardView>
</div>
@@ -377,4 +390,22 @@ export default {
.VueTables__limit {
display: none;
}
.v-card-text-dark{
font-size: 14px;
font-weight: 700;
line-height: 1.5;
display: inline-block;
}
.v-card-text-light{
font-size: 14px;
font-weight: 400;
line-height: 1.5;
display: inline-block;
}
.v-card-text{
line-height: 0;
}
</style>

60
resources/assets/js/home/Inbox/defaultMixins.js
View File

@@ -1,3 +1,4 @@
import api from "../../api/index";
export default {
data() {
let that = this;
@@ -30,6 +31,35 @@ export default {
icon: "fas fa-th",
},
],
},
optionsVueCardView: {
limit: 10,
headings: {
detail: "",
case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
case_title: this.$i18n.t("ID_CASE_TITLE"),
process_name: this.$i18n.t("ID_PROCESS_NAME"),
task: this.$i18n.t("ID_TASK"),
current_user: this.$i18n.t("ID_CURRENT_USER"),
due_date: this.$i18n.t("ID_DUE_DATE"),
delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
priority: this.$i18n.t("ID_PRIORITY"),
actions: "",
},
columns: [
"detail",
"case_number",
"case_title",
"process_name",
"task",
"due_date",
"delegation_date",
"priority",
"actions",
],
requestFunction(data){
return that.getCasesVueCarView(data);
}
}
}
},
@@ -37,7 +67,37 @@ export default {
},
methods: {
/**
* Get cases for Vue Card View
*/
getCasesVueCarView(data) {
let that = this,
dt,
start = 0,
limit = data.limit,
filters = {};
filters = {
paged: "0," + limit,
};
_.forIn(this.filters, function (item, key) {
filters[item.filterVar] = item.value;
});
return new Promise((resolutionFunc, rejectionFunc) => {
api.cases
.todo(filters)
.then((response) => {
dt = that.formatDataResponse(response.data.data);
resolutionFunc({
data: dt,
count: response.data.total,
});
})
.catch((e) => {
rejectionFunc(e);
});
});
},
}
}