@nixweb/nixloc-ui 0.0.274 → 0.0.276

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nixweb/nixloc-ui",
3
- "version": "0.0.274",
3
+ "version": "0.0.276",
4
4
  "description": "Componentes UI",
5
5
  "author": "Fábio Ávila <fabio@nixweb.com.br>",
6
6
  "private": false,
@@ -0,0 +1,67 @@
1
+ <template>
2
+ <button-toggle :class="buttonClass" @click="handleClick">
3
+ <span v-if="active" class="icon"><i class="fa-regular fa-check-double"></i></span>
4
+ <span v-else class="icon"><i class="fa-solid fa-calendar-week"></i></span>
5
+ <span v-if="active">{{ titleActive }}</span>
6
+ <span v-else="active">{{ titleInactive }}</span>
7
+ </button-toggle>
8
+ </template>
9
+
10
+ <script>
11
+ export default {
12
+ name: 'ToggleButton',
13
+ props: {
14
+ titleActive: String,
15
+ titleInactive: String,
16
+ value: Number
17
+ },
18
+ data() {
19
+ return {
20
+ active: false,
21
+ }
22
+ },
23
+ computed: {
24
+ buttonClass() {
25
+ return {
26
+ 'button-toggle': true,
27
+ 'button-toggle--active': this.active,
28
+ 'button-toggle--inactive': !this.active
29
+ };
30
+ },
31
+ },
32
+ methods: {
33
+ handleClick() {
34
+ this.active = this.active == true ? false : true;
35
+ this.$emit("input", this.active);
36
+ }
37
+ }
38
+ }
39
+ </script>
40
+
41
+ <style scoped>
42
+ .button-toggle {
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ padding: 5px 25px;
47
+ border: none;
48
+ border-radius: 20px;
49
+ font-size: 13px;
50
+ cursor: pointer;
51
+ transition: background-color 0.3s, color 0.3s;
52
+ }
53
+
54
+ .button-toggle--active {
55
+ background-color: #FF8A1B;
56
+ color: white;
57
+ }
58
+
59
+ .button-toggle--inactive {
60
+ background-color: #F0F0F0;
61
+ color: black;
62
+ }
63
+
64
+ .icon {
65
+ margin-right: 8px;
66
+ }
67
+ </style>
@@ -0,0 +1,193 @@
1
+ <template>
2
+ <div class="date-filter">
3
+ <button @click="previous" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
4
+ :disabled="disabled">
5
+ <i class="fa-solid fa-chevron-left"></i>
6
+ </button>
7
+ <span class="date-display" :class="{ 'title-disabled': disabled }">{{ displayValue }} </span>
8
+ <span class="date-icon" @click="resetSelection()" :class="{ 'disabled': disabled }">
9
+ <i class="fa-solid fa-calendar-week"></i>
10
+ </span>
11
+ <button @click="next" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
12
+ :disabled="disabled">
13
+ <i class="fa-solid fa-chevron-right"></i>
14
+ </button>
15
+ </div>
16
+ </template>
17
+
18
+ <script>
19
+ import { mapMutations } from "vuex";
20
+
21
+ export default {
22
+ props: {
23
+ mode: {
24
+ type: String,
25
+ required: true,
26
+ validator(value) {
27
+ return ['month', 'year'].includes(value);
28
+ }
29
+ },
30
+ value: {
31
+ type: Number,
32
+ required: false
33
+ },
34
+ disabled: {
35
+ type: Boolean,
36
+ default: false
37
+ }
38
+ },
39
+ data() {
40
+ return {
41
+ currentMonth: new Date().getMonth(),
42
+ currentYear: new Date().getFullYear()
43
+ };
44
+ },
45
+ created() {
46
+ this.resetSelection();
47
+ },
48
+ mounted() {
49
+ this.sendEvent();
50
+ },
51
+ computed: {
52
+ displayValue() {
53
+ if (this.mode === 'month') {
54
+ return this.monthNames[this.currentMonth];
55
+ } else {
56
+ return this.currentYear;
57
+ }
58
+ },
59
+ monthNames() {
60
+ return ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
61
+ },
62
+ buttonClass() {
63
+ return this.mode === 'month' ? 'month-mode' : 'year-mode';
64
+ }
65
+ },
66
+ methods: {
67
+ ...mapMutations("generic", ["addEvent"]),
68
+ previous() {
69
+ if (this.disabled) return;
70
+ if (this.mode === 'month') {
71
+ this.currentMonth = (this.currentMonth + 11) % 12;
72
+ if (this.currentMonth === 11) {
73
+ this.currentYear--;
74
+ }
75
+ } else {
76
+ this.currentYear--;
77
+ }
78
+ this.$emit('input', this.getValue());
79
+ this.sendEvent();
80
+ },
81
+ next() {
82
+ if (this.disabled) return;
83
+ if (this.mode === 'month') {
84
+ this.currentMonth = (this.currentMonth + 1) % 12;
85
+ if (this.currentMonth === 0) {
86
+ this.currentYear++;
87
+ }
88
+ } else {
89
+ this.currentYear++;
90
+ }
91
+ this.$emit('input', this.getValue());
92
+ this.sendEvent();
93
+ },
94
+ resetSelection() {
95
+ const now = new Date();
96
+ if (this.mode === 'month') {
97
+ this.currentMonth = now.getMonth();
98
+ this.currentYear = now.getFullYear();
99
+ } else {
100
+ this.currentYear = now.getFullYear();
101
+ }
102
+ this.sendEvent();
103
+ },
104
+ getValue() {
105
+ if (this.mode === 'month') {
106
+ return (this.currentMonth + 1).toString();
107
+ } else {
108
+ return this.currentYear.toString();
109
+ }
110
+ },
111
+ sendEvent() {
112
+ this.addEvent({ name: "dateYearMonth", data: { mode: this.mode, value: this.getValue() } });
113
+ this.$emit('input', this.getValue());
114
+ }
115
+ },
116
+ watch: {
117
+ mode(newMode) {
118
+ this.resetSelection();
119
+ },
120
+ value(newValue) {
121
+ if (this.mode === 'month') {
122
+ this.currentMonth = newValue - 1;
123
+ } else {
124
+ this.currentYear = newValue;
125
+ }
126
+ }
127
+ },
128
+ };
129
+ </script>
130
+
131
+ <style scoped>
132
+ .date-filter {
133
+ display: flex;
134
+ align-items: center;
135
+ justify-content: center;
136
+ gap: 20px;
137
+ }
138
+
139
+ .navigation-button {
140
+ color: white;
141
+ border: none;
142
+ border-radius: 50%;
143
+ width: 30px;
144
+ height: 30px;
145
+ display: flex;
146
+ align-items: center;
147
+ justify-content: center;
148
+ font-size: 1.2em;
149
+ cursor: pointer;
150
+ transition: background-color 0.3s, transform 0.2s;
151
+ }
152
+
153
+ .navigation-button:hover {
154
+ opacity: 0.8;
155
+ }
156
+
157
+ .navigation-button:active {
158
+ transform: scale(0.95);
159
+ }
160
+
161
+ .navigation-button.disabled {
162
+ background-color: #b0b0b0;
163
+ opacity: 0.5;
164
+ cursor: not-allowed;
165
+ }
166
+
167
+ .date-display {
168
+ font-size: 1.5em;
169
+ font-weight: bold;
170
+ }
171
+
172
+ .month-mode {
173
+ background-color: #ffa500;
174
+ }
175
+
176
+ .year-mode {
177
+ background-color: #007bff;
178
+ }
179
+
180
+ .date-icon {
181
+ cursor: pointer;
182
+ color: rgb(73, 72, 72);
183
+ }
184
+
185
+ .title-disabled {
186
+ color: #b0b0b0;
187
+ }
188
+
189
+ .date-icon.disabled {
190
+ color: #b0b0b0;
191
+ cursor: not-allowed;
192
+ }
193
+ </style>
@@ -23,9 +23,11 @@ export default {
23
23
  <style scoped>
24
24
  .main {
25
25
  background-color: white;
26
+ min-height: 900px;
26
27
  }
27
28
 
28
29
  .content {
30
+ width: 1024px;
29
31
  margin: auto;
30
32
  }
31
33
  </style>
@@ -10,18 +10,6 @@
10
10
  type: 'warning',
11
11
  }">
12
12
  <slot name="content-filter-horizontal"></slot>
13
- <b-row>
14
- <b-col :sm="showTotalPerPage ? 10 : 12"></b-col>
15
- <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="showTotalPerPage">
16
- <SelectStatic title="Mostrar" fieldTarget="totalPerPage" :initialValue="initialValue" :data="[
17
- { content: '10', id: 10 },
18
- { content: '20', id: 20 },
19
- { content: '30', id: 30 },
20
- { content: '50', id: 50 },
21
- { content: '100', id: 100 },
22
- ]" v-model="totalPerPage" />
23
- </b-col>
24
- </b-row>
25
13
  </Collapse>
26
14
  </div>
27
15
  </template>
@@ -0,0 +1,63 @@
1
+ <template>
2
+ <div class="filter-horizontal">
3
+ <b-row>
4
+ <b-col :sm="showTotalPerPage ? 10 : 12"></b-col>
5
+ <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="showTotalPerPage">
6
+ <SelectStatic title="Mostrar" fieldTarget="totalPerPage" :initialValue="initialValue" :data="[
7
+ { content: '10', id: 10 },
8
+ { content: '20', id: 20 },
9
+ { content: '30', id: 30 },
10
+ { content: '50', id: 50 },
11
+ { content: '100', id: 100 },
12
+ ]" v-model="totalPerPage" />
13
+ </b-col>
14
+ </b-row>
15
+ </div>
16
+ </template>
17
+
18
+ <script>
19
+ import SelectStatic from "../forms/SelectStatic.vue";
20
+
21
+ import { mapMutations, mapState } from "vuex";
22
+
23
+ export default {
24
+ name: "TableTotalPerPage",
25
+ components: { SelectStatic },
26
+ props: {
27
+ showTotalPerPage: {
28
+ type: Boolean,
29
+ default: true,
30
+ },
31
+ },
32
+ data() {
33
+ return {
34
+ initialValue: {}
35
+ }
36
+ },
37
+ created() {
38
+ this.initialValue = { content: this.paginations.totalPerPage, id: this.paginations.totalPerPage }
39
+ },
40
+ computed: {
41
+ ...mapState("generic", ["paginations"]),
42
+ totalPerPage: {
43
+ get() {
44
+ return this.$store.state.generic.paginations.totalPerPage;
45
+ },
46
+ set(value) {
47
+ this.updateTotalPerPage(value);
48
+ },
49
+ },
50
+ },
51
+ methods: {
52
+ ...mapMutations("generic", [
53
+ "updateTotalPerPage",
54
+ ]),
55
+ }
56
+ };
57
+ </script>
58
+
59
+ <style scoped>
60
+ .filter-horizontal {
61
+ margin-bottom: 5px;
62
+ }
63
+ </style>
@@ -76,8 +76,11 @@ export default {
76
76
  },
77
77
  mounted() {
78
78
  var filterStorage = this.getQueryFilter(this.$route.name);
79
- this.filtersAdded = filterStorage.filtersAdded;
80
- this.addEvent({ name: "stringFilter", data: this.filterFinal });
79
+ if (filterStorage) {
80
+ this.filtersAdded = filterStorage.filtersAdded;
81
+ this.addEvent({ name: "stringFilter", data: this.filterFinal });
82
+ }
83
+
81
84
  },
82
85
  computed: {
83
86
  ...mapGetters("generic", ["event", "getQueryFilter"]),
@@ -101,6 +104,7 @@ export default {
101
104
  },
102
105
  filterFinal() {
103
106
  return this.filtersAdded.map(item => ({
107
+ routeName: this.$route.name,
104
108
  title: item.title,
105
109
  field: item.field,
106
110
  type: item.type,
@@ -133,6 +137,7 @@ export default {
133
137
  watch: {
134
138
  event: {
135
139
  handler(event) {
140
+
136
141
  if (event.name == "tagFilterRemove") {
137
142
  this.removeItem(event.data.field);
138
143
  this.addEvent({ name: "stringFilter" });
@@ -3,16 +3,17 @@
3
3
  <div>
4
4
  <Button _key="btnFilter" tooltip="Aplicar Filtros" color="black" backGroundColor="#F0F0F0" title="Filtros"
5
5
  classIcon="fa-sharp fa-solid fa-filters" size="small" :clicked="openFilter" />
6
- </div>
7
6
 
8
- <div class="side-by-side" v-for="item in tags">
9
- <div class="side-by-side div-tag">
10
- <Tag v-if="item.value" eventName="eventName" :params="item" eventData="tag" :clickedBody="openFilter"
11
- :clickedRemove="removeTag" :title="item.title" :value="item.value" :tagRemoved="false" />
7
+ <div class="side-by-side" v-for="item in tags">
8
+ <div class="div-tag">
9
+ <Tag v-if="item.value" eventName="eventName" :params="item" eventData="tag"
10
+ :clickedBody="openFilter" :clickedRemove="removeTag" :title="item.title" :value="item.value"
11
+ :tagRemoved="false" />
12
+ </div>
12
13
  </div>
13
14
  </div>
14
15
 
15
- <Modal title="Filtros" :width="700" :height="750" v-if="showModal('filter')">
16
+ <Modal title="Filtros" :width="700" :height="750" v-show="showModal('filter')">
16
17
  <FilterBuilder :filters="filters" v-model="filterFinal" />
17
18
  </Modal>
18
19
  </div>
@@ -30,7 +31,7 @@ import { mapGetters, mapMutations } from "vuex";
30
31
 
31
32
  export default {
32
33
  name: "FilterQuery",
33
- props: ["filters", "value"],
34
+ props: ["filters", "showDateYearMonth", "value"],
34
35
  components: {
35
36
  Button, Modal, FilterBuilder, Tag
36
37
  },
@@ -44,7 +45,7 @@ export default {
44
45
  ...mapGetters("generic", ["showModal", "event"]),
45
46
  },
46
47
  methods: {
47
- ...mapMutations("generic", ["openModal", "addEvent", "removeLoading", "updateQueryTags"]),
48
+ ...mapMutations("generic", ["openModal", "addEvent", "removeLoading", "updateQueryTags", "updateFilterFinal"]),
48
49
  openFilter() {
49
50
  this.openModal("filter");
50
51
  this.removeLoading(["btnFilter"]);
@@ -67,6 +68,7 @@ export default {
67
68
  filterFinal: {
68
69
  handler(filterFinal) {
69
70
  this.$emit("input", filterFinal);
71
+ this.updateFilterFinal(filterFinal);
70
72
  },
71
73
  deep: true,
72
74
  },
@@ -4,11 +4,13 @@
4
4
  <b-row>
5
5
  <b-col sm="12">
6
6
  <div>
7
- <HorizontalFilter v-if="showHorizontalFilter">
7
+ <!-- <HorizontalFilter v-if="showHorizontalFilter">
8
8
  <div slot="content-filter-horizontal">
9
9
  <slot name="content-filter-horizontal"></slot>
10
10
  </div>
11
11
  </HorizontalFilter>
12
+ <TableTotalPerPage />
13
+ -->
12
14
  </div>
13
15
  </b-col>
14
16
  </b-row>
@@ -60,6 +62,7 @@
60
62
 
61
63
  <script>
62
64
  import Pagination from "@nixweb/nixloc-ui/src/component/shared/Pagination.vue";
65
+ import TableTotalPerPage from "@nixweb/nixloc-ui/src/component/shared/TableTotalPerPage.vue";
63
66
  import Table from "../shared/Table.vue";
64
67
  import Button from "../forms/Button.vue";
65
68
  import FixedBar from "../layout/FixedBar.vue";
@@ -111,6 +114,7 @@ export default {
111
114
  Table,
112
115
  InputText,
113
116
  Pagination,
117
+ TableTotalPerPage
114
118
  },
115
119
  data() {
116
120
  return {
@@ -10,12 +10,10 @@
10
10
  </div>
11
11
  <div slot="content-main">
12
12
  <slot name="content-between-search-table"></slot>
13
- <!-- <FilterQuery v-if="filters.length > 0" :filters="filters" v-model="stringFilter" />-->
13
+ <FilterQuery v-if="filters.length > 0" :filters="filters" v-model="stringFilter" />
14
14
  <Molded>
15
- <!-- <ListViewWithDataHandler :templateList="templateList"
16
- :propsParam="{ stringFilter: JSON.stringify(stringFilter) }" :isFilterStorage="true"
17
- :buttonRemove="buttonRemove">-->
18
- <ListViewWithDataHandler :templateList="templateList" :propsParam="propsParam" :isFilterStorage="true"
15
+ <ListViewWithDataHandler :templateList="templateList"
16
+ :propsParam="{ ...propsParam, stringFilter: JSON.stringify(stringFilter) }" :isFilterStorage="true"
19
17
  :buttonRemove="buttonRemove">
20
18
  <div slot="content-buttons-table-header">
21
19
  <slot name="content-buttons-table-header"></slot>
@@ -42,7 +42,9 @@ export default {
42
42
  methodExecutedApi: undefined,
43
43
  filterStorage: [],
44
44
  filterQuery: [],
45
+ filterFinal: [],
45
46
  queryTags: [],
47
+ _filterStorage: [],
46
48
  },
47
49
  getters: {
48
50
  tip: (state) => (tipId) => {
@@ -74,6 +76,14 @@ export default {
74
76
  getQueryFilter: (state) => (routeName) => {
75
77
  return state.filterQuery.find(x => x.routeName === routeName);
76
78
  },
79
+ get_FilterStorage: (state) => (routeName) => {
80
+ return state._filterStorage.find(x => x.routeName === routeName);
81
+ },
82
+ isExistFilterQuery: (state) => (routeName, field) => {
83
+ var arr = state.filterFinal.find(x => x.routeName === routeName && x.field == field);
84
+ if (arr) return true;
85
+ return false;
86
+ },
77
87
  paramsFilterStorage: (state) => (route, key, returnIfNull) => {
78
88
  var filter = state.filterStorage.find(x => x.key === route);
79
89
 
@@ -375,9 +385,22 @@ export default {
375
385
  state.filterQuery.push(obj);
376
386
  }
377
387
  },
388
+ updateFilterFinal: (state, filterFinal) => {
389
+ state.filterFinal = filterFinal;
390
+ },
378
391
  updateQueryTags: (state, tags) => {
379
392
  state.queryTags = tags;
380
393
  },
394
+ _addFilterStorage: (state, obj) => { // está com _addFilterStorage para não ter duplicidade
395
+ // função abaixo é para não deixar duplicidade
396
+ const index = state._filterStorage.findIndex(x => x.routeName === obj.routeName);
397
+ if (index !== -1) {
398
+ state._filterStorage[index] = obj;
399
+
400
+ } else {
401
+ state._filterStorage.push(obj);
402
+ }
403
+ },
381
404
  },
382
405
  actions: {
383
406
  postApi: async function (context, params) {