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

update Cards

Browse Source
This commit is contained in:
Henry Jordan
2021-07-08 15:00:07 +00:00
parent 48b728bde1
commit bfb957ea5a
7 changed files with 244 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,50 @@
<template>
<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>
</div>
</div>
</div>
</template>
<script>
export default {
name: "VueCardView",
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: {
classBtn(cls) {
return "btn btn-slim btn-force-radius v-btn-header " + cls;
},
},
};
</script>
<style>
.pm-vue-card {
display: inline-block;
}
</style>

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

@@ -1,18 +1,39 @@
<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>
</div>
</div>
</template>
<script>
import VueCard from "./VueCard.vue";
export default {
name: "VueCardView",
props: [],
components: {
VueCard,
},
props: ["data"],
data() {
return {
columns: [
"detail",
"case_number",
"case_title",
"process_name",
"task",
"due_date",
"delegation_date",
"priority",
"actions",
],
};
},
mounted(){
console.log(this.data);
},
methods: {
classBtn(cls) {
return "btn btn-slim btn-force-radius v-btn-header " + cls;
@@ -23,7 +44,8 @@ export default {
<style>
.pm-vue-card-view {
}
.pm-vue-card-view-container {
}
</style>

0
resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js Normal file
View File

40
resources/assets/js/components/headers/MultiviewHeader.vue
View File

@@ -2,6 +2,7 @@
<div class="pm-multiview-header">
<div class="pm-multiview-header-title"></div>
<div class="pm-multiview-header-actions">
<div>
<button
v-for="action in data.actions"
:key="action.id"
@@ -17,46 +18,15 @@
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "MultiviewHeader",
props: [],
props: ["data"],
data() {
return {
data: {
actions: [
{
id: "view-grid",
title: "Grid",
onClick(action) {
console.log("action");
console.log(action);
},
icon: "fas fa-table",
},
{
id: "view-list",
title: "List",
onClick(action) {
console.log("action");
console.log(action);
},
icon: "fas fa-list",
},
{
id: "view-card",
title: "Card",
onClick(action) {
console.log("action");
console.log(action);
},
icon: "fas fa-th",
},
],
},
};
return {};
},
methods: {
classBtn(cls) {
@@ -72,7 +42,7 @@ export default {
.pm-multiview-header-title {
}
.pm-multiview-header-actions {
float: right;
text-align: end;
}
.pm-multiview-header-button {
background-color: transparent;

2
resources/assets/js/home/Home.vue
View File

@@ -40,7 +40,7 @@
import CustomSidebar from "./../components/menu/CustomSidebar";
import MyCases from "./MyCases";
import MyDocuments from "./MyDocuments";
import Todo from "./Todo";
import Todo from "./Inbox/Todo.vue";
import Draft from "./Draft";
import Paused from "./Paused";
import Unassigned from "./Unassigned";

76
resources/assets/js/home/Todo.vue → resources/assets/js/home/Inbox/Todo.vue
View File

@@ -8,8 +8,9 @@
@onRemoveFilter="onRemoveFilter"
@onUpdateFilters="onUpdateFilters"
/>
<multiview-header/>
<multiview-header :data="dataMultiviewHeader" />
<v-server-table
v-if="typeView === 'GRID'"
:data="tableData"
:columns="columns"
:options="options"
@@ -50,28 +51,35 @@
</button>
</div>
</v-server-table>
<VueCardView v-if="typeView === 'CARD'" :data="tableData">
</VueCardView>
</div>
</template>
<script>
import HeaderCounter from "../components/home/HeaderCounter.vue";
import ButtonFleft from "../components/home/ButtonFleft.vue";
import ModalNewRequest from "./ModalNewRequest.vue";
import TaskCell from "../components/vuetable/TaskCell.vue";
import CasesFilter from "../components/search/CasesFilter";
import api from "./../api/index";
import utils from "./../utils/utils";
import MultiviewHeader from "./../components/headers/MultiviewHeader.vue";
import HeaderCounter from "../../components/home/HeaderCounter.vue";
import ButtonFleft from "../../components/home/ButtonFleft.vue";
import ModalNewRequest from "../ModalNewRequest.vue";
import TaskCell from "../../components/vuetable/TaskCell.vue";
import CasesFilter from "../../components/search/CasesFilter";
import api from "../../api/index";
import utils from "../../utils/utils";
import MultiviewHeader from "../../components/headers/MultiviewHeader.vue";
import VueCardView from "../../components/dataViews/vueCardView/VueCardView.vue";
import defaultMixins from "./defaultMixins";
export default {
name: "Todo",
mixins: [defaultMixins],
components: {
HeaderCounter,
ButtonFleft,
ModalNewRequest,
TaskCell,
CasesFilter,
MultiviewHeader
MultiviewHeader,
VueCardView,
},
props: ["defaultOption", "filters"],
data() {
@@ -116,7 +124,7 @@ export default {
filter: this.$i18n.t("ID_FILTER") + ":",
limit: this.$i18n.t("ID_RECORDS") + ":",
page: this.$i18n.t("ID_PAGE") + ":",
noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS")
noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS"),
},
selectable: {
mode: "single",
@@ -134,12 +142,12 @@ export default {
clickCount: 0,
singleClickTimer: null,
statusTitle: {
"ON_TIME": this.$i18n.t("ID_IN_PROGRESS"),
"OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"),
"DRAFT": this.$i18n.t("ID_IN_DRAFT"),
"PAUSED": this.$i18n.t("ID_PAUSED"),
"UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
}
ON_TIME: this.$i18n.t("ID_IN_PROGRESS"),
OVERDUE: this.$i18n.t("ID_TASK_OVERDUE"),
DRAFT: this.$i18n.t("ID_IN_DRAFT"),
PAUSED: this.$i18n.t("ID_PAUSED"),
UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
},
};
},
created() {
@@ -176,8 +184,8 @@ export default {
label: "",
options: [],
value: params.openapplicationuid,
autoShow: false
}
autoShow: false,
},
]);
}
}
@@ -192,7 +200,7 @@ export default {
if (params && params.app_uid && params.del_index) {
this.openCase({
APP_UID: params.app_uid,
DEL_INDEX: params.del_index
DEL_INDEX: params.del_index,
});
this.$emit("cleanDefaultOption");
}
@@ -206,10 +214,10 @@ export default {
label: "",
options: [],
value: params.openapplicationuid,
autoShow: false
}
autoShow: false,
},
],
refresh: false
refresh: false,
});
this.$emit("cleanDefaultOption");
}
@@ -276,19 +284,23 @@ export default {
CASE_NUMBER: v.APP_NUMBER,
CASE_TITLE: v.DEL_TITLE,
PROCESS_NAME: v.PRO_TITLE,
TASK: [{
TASK: [
{
TITLE: v.TAS_TITLE,
CODE_COLOR: v.TAS_COLOR,
COLOR: v.TAS_COLOR_LABEL,
DELAYED_TITLE: v.TAS_STATUS === "OVERDUE" ?
this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[v.TAS_STATUS],
DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : ""
}],
DELAYED_TITLE:
v.TAS_STATUS === "OVERDUE"
? this.$i18n.t("ID_DELAYED") + ":"
: this.statusTitle[v.TAS_STATUS],
DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : "",
},
],
USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
userName: v.USR_LASTNAME,
firstName: v.USR_LASTNAME,
lastName: v.USR_LASTNAME,
format: window.config.FORMATS.format || null
format: window.config.FORMATS.format || null,
}),
DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
@@ -312,7 +324,7 @@ export default {
DEL_INDEX: item.DEL_INDEX,
PRO_UID: item.PRO_UID,
TAS_UID: item.TAS_UID,
ACTION: "todo"
ACTION: "todo",
});
this.$emit("onUpdatePage", "XCase");
},
@@ -331,7 +343,7 @@ export default {
PRO_UID: item.PRO_UID,
TAS_UID: item.TAS_UID,
APP_NUMBER: item.CASE_NUMBER,
ACTION: "todo"
ACTION: "todo",
});
that.$emit("onUpdatePage", "case-detail");
});
@@ -351,7 +363,7 @@ export default {
*/
updateView() {
this.$refs["vueTable"].getData();
}
},
},
};
</script>

43
resources/assets/js/home/Inbox/defaultMixins.js Normal file
View File

@@ -0,0 +1,43 @@
export default {
data() {
let that = this;
return {
typeView: "GRID",
dataMultiviewHeader: {
actions: [
{
id: "view-grid",
title: "Grid",
onClick(action) {
that.typeView = "GRID";
},
icon: "fas fa-table",
},
{
id: "view-list",
title: "List",
onClick(action) {
that.typeView = "LIST";
},
icon: "fas fa-list",
},
{
id: "view-card",
title: "Card",
onClick(action) {
that.typeView = "CARD";
},
icon: "fas fa-th",
},
],
}
}
},
created: function () {
},
methods: {
}
}