@monoui/vuejs 1.1.77 → 1.1.79

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@monoui/vuejs",
-	"version": "1.1.77",
+	"version": "1.1.79",
 	"description": "This project will contain MonoFor UI Framework",
 	"main": "./dist/main.js",
 	"repository": "git@gitlab.com:monoui/vuejs.git",

package/src/components/Table/Table.vue

@@ -57,6 +57,58 @@
 											>
 												{{ columnKey }}
 											</small>
+
+											<b-dropdown
+												boundary="window"
+												v-if="
+													finalTimeFrame &&
+														finalTimeFrame.enabled &&
+														finalTimeFrame.column ===
+															columnKey
+												"
+												:text="getTimeFrameTitle()"
+												size="sm"
+												variant="light"
+											>
+												<b-dropdown-item
+													v-for="opt in finalTimeFrame.options.filter(
+														q => q !== 'Clear'
+													)"
+													:key="'time-frame-' + opt"
+													@click.stop="
+														applyTimeFrameFilter(
+															opt
+														)
+													"
+												>
+													<span>{{
+														getMonthLabel(opt)
+													}}</span>
+												</b-dropdown-item>
+
+												<template
+													v-if="
+														finalTimeFrame.options.some(
+															q => q === 'Clear'
+														)
+													"
+												>
+													<b-dropdown-divider></b-dropdown-divider>
+													<b-dropdown-item
+														@click.stop="
+															applyTimeFrameFilter(
+																'Clear'
+															)
+														"
+													>
+														<i
+															class="fa fa-trash mr-1"
+														/>
+														Clear
+													</b-dropdown-item>
+												</template>
+											</b-dropdown>
+
 											<span
 												v-if="isSortable(columnKey)"
 												class="sort-position"
@@ -365,6 +417,7 @@ import IconArrowDownLong from "./Icons/ArrowDownLong.vue";
 import IconSorting from "./Icons/Sorting.vue";
 import IconSortingAZ from "./Icons/SortingAZ.vue";
 import IconSortingArrows from "./Icons/SortingArrows.vue";
+
 export default {
 	name: "mui-table",
 	components: {
@@ -537,6 +590,11 @@ export default {
 			type: Boolean,
 			required: false,
 			default: false
+		},
+		timeFrame: {
+			type: Object,
+			required: false,
+			default: () => ({})
 		}
 	},
 	watch: {
@@ -563,7 +621,14 @@ export default {
 			comingFromPopState: false,
 			skipWatch: false,
 			selectedCorrelationId: null,
-			emptyGuid: "00000000-0000-0000-0000-000000000000"
+			emptyGuid: "00000000-0000-0000-0000-000000000000",
+			finalTimeFrame: {
+				enabled: false,
+				column: "CreatedDate",
+				title: "All",
+				frame: 3,
+				options: [3, 6, 9, 12, "Clear"]
+			}
 		};
 	},
 	computed: {
@@ -595,11 +660,78 @@ export default {
 	async mounted() {
 		if (this.history) this.loadHistory();
 
+		if (this.timeFrame) {
+			if (this.timeFrame.enabled) this.finalTimeFrame.enabled = true;
+
+			if (this.timeFrame.column)
+				this.finalTimeFrame.column = this.timeFrame.column;
+
+			if (this.timeFrame.title)
+				this.finalTimeFrame.title = this.timeFrame.title;
+
+			if (this.timeFrame.frame)
+				this.finalTimeFrame.frame = this.timeFrame.frame;
+
+			if (this.timeFrame.options && this.timeFrame.options.length > 0)
+				this.finalTimeFrame.options = this.timeFrame.options;
+		}
+
+		if (this.finalTimeFrame && this.finalTimeFrame.enabled) {
+			this.applyTimeFrameFilter(this.finalTimeFrame.frame);
+		}
+
 		if (this.autoLoad) {
 			await this.getValues(true, true);
 		}
 	},
 	methods: {
+		getTimeFrameTitle() {
+			if (this.finalTimeFrame.frame)
+				return this.getMonthLabel(this.finalTimeFrame.frame, true);
+			return this.finalTimeFrame.title;
+		},
+
+		getMonthLabel(lbl, align = false) {
+			if (lbl === "Clear") return lbl;
+
+			if (!align) return `${lbl} months`;
+			return lbl < 10 ? `\u00A0${lbl} months` : `${lbl} months`;
+		},
+
+		applyTimeFrameFilter(opt) {
+			const existingIndex = this.filters.findIndex(
+				f => f.Column === this.finalTimeFrame.column
+			);
+
+			if (opt === "Clear") {
+				this.finalTimeFrame.frame = null;
+				if (existingIndex !== -1) {
+					this.filters.splice(existingIndex, 1);
+				}
+			} else {
+				this.finalTimeFrame.frame = opt;
+				if (existingIndex !== -1) {
+					// Update existing filter
+					this.$set(this.filters, existingIndex, {
+						Column: this.finalTimeFrame.column,
+						Value: -opt,
+						Operator: 5,
+						AddMonths: true
+					});
+				} else {
+					// Add new filter
+					this.filters.push({
+						Column: this.finalTimeFrame.column,
+						Value: -opt,
+						Operator: 5,
+						AddMonths: true
+					});
+				}
+			}
+
+			this.getValues();
+		},
+
 		getCorrelationClass(row, tableData) {
 			var correlationCount = 0;
 			tableData.forEach(element => {
@@ -663,6 +795,10 @@ export default {
 			}
 			this.loadHistoryFilters();
 			this.loadHistorySorting();
+
+			if (this.finalTimeFrame && this.finalTimeFrame.enabled) {
+				this.applyTimeFrameFilter(this.finalTimeFrame.frame);
+			}
 		},
 		sortableIcon(column) {
 			const currentSort = this.sorting.find(x => x.Column === column);