@nixweb/nixloc-ui 0.0.300 → 0.0.301

package/src/component/forms/CheckboxServer.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <div>
+      <div class="div-btn side-by-side">
+        <Button _key="btnShow" color="black" backGroundColor="#F0F0F0"
+          :title="' ' + quantitySelected + ' ' + title + ' selecionado(s)'"
+          classIcon="fa-sharp fa-solid fa-ballot-check" size="small" :clicked="showHide" />
+      </div>
+      <div v-show="show" class="side-by-side">
+        <div class="input-container">
+          <input type="text" v-model="baseParams.search" placeholder="Pesquisar..." />
+        </div>
+      </div>
+
+    </div>
+    <div v-show="show">
+      <div class="div-loading">
+        <Loading type="line" :center="false" v-show="loading" />
+      </div>
+      <ScrollBar :minHeight="0" :maxHeight="200">
+        <div class="div-check">
+          <div class="div-items" v-for="item in data" :key="item.id">
+            <b-form-checkbox v-model="item.selected" @change="add(item)">
+              <span class="title">{{ item.content }}</span>
+            </b-form-checkbox>
+          </div>
+        </div>
+        <div v-if="totalRecords > 20 && data.length < totalRecords">
+          <div class="after-list text-center">
+            <Button key="loadingMore" type="info" title="Carregar mais..." classIcon="fas fa-redo-alt" size="small"
+              :clicked="loadingMore" />
+          </div>
+        </div>
+      </ScrollBar>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+
+import { mapGetters, mapMutations, mapActions } from "vuex";
+
+export default {
+  name: "CheckboxServer",
+  components: {
+    Button, ScrollBar, Loading, InputText
+  },
+  props: {
+    title: String,
+    url: String,
+    propsParams: Object,
+    value: Array,
+  },
+  data() {
+    return {
+      show: false,
+      loading: true,
+      data: [],
+      selected: [],
+      totalRecords: 0,
+      baseParams: {
+        search: "",
+        currentPage: 1,
+        totalPerPage: 20,
+      },
+    };
+  },
+  mounted() {
+    this.getAll();
+
+    if (this.value.length > 0) {
+      this.selected = this.value;
+    }
+
+  },
+  computed: {
+    ...mapGetters("generic", ["showModal", "event"]),
+    quantitySelected() {
+      return this.selected.length > 0 ? this.selected.length : 0;
+    }
+  },
+  methods: {
+    ...mapMutations("generic", ["removeLoading"]),
+    ...mapActions("generic", ["getApi"]),
+    getAll() {
+      let obj = { ...this.baseParams, ...this.propsParams };
+      let params = { url: this.url, obj: obj };
+      this.loading = true;
+      this.getApi(params).then((response) => {
+        this.totalRecords = response.content.totalRecords;
+        if (this.baseParams.currentPage == 1) {
+          this.data = [];
+        }
+
+        let self = this;
+        response.content.data.forEach(item => {
+          self.data.push(item);
+        });
+
+        this.markSelected();
+
+        this.loading = false;
+        this.removeLoading(["loadingMore"]);
+      });
+    },
+    loadingMore() {
+      this.baseParams.currentPage++;
+      this.getAll();
+    },
+    add(item) {
+      const index = this.selected.indexOf(item.content);
+      if (index > -1) {
+        this.selected.splice(index, 1);
+      } else {
+        this.selected.push(item.content);
+      }
+    },
+    showHide() {
+      this.show = this.show == true ? false : true;
+      this.removeLoading(["btnShow"]);
+    },
+    markSelected() {
+      this.data.forEach(item => {
+        if (this.selected.includes(item.content)) {
+          item.selected = true;
+        }
+      });
+    }
+  },
+  watch: {
+    selected: {
+      handler(value) {
+        this.$emit("input", value);
+      },
+      deep: true,
+    },
+    'baseParams.search': {
+      handler(value) {
+        this.getAll();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.div-check {
+  margin: 10px;
+}
+
+.div-items {
+  margin-left: 10px;
+}
+
+.div-loading {
+  margin-top: 3px;
+}
+
+.div-btn {
+  padding-bottom: 5px;
+}
+
+.div-icon {
+  margin-left: 10px;
+  font-size: 16px;
+  color: green;
+  cursor: pointer;
+}
+
+.input-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px;
+}
+
+input {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  border: 1px solid #E5E4E8;
+  border-radius: 20px;
+  outline: none;
+  font-size: 13px;
+  width: 300px;
+}
+</style>

package/src/component/forms/CheckboxSimple.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <b-form-checkbox v-model="valueLocal" :value="true" :unchecked-value="false">
+      <span class="title">{{ title }}</span>
+      <Tip :field="field" :formName="formName" />
+    </b-form-checkbox>
+  </div>
+</template>
+
+<script>
+import Tip from "../shared/Tip.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  components: { Tip },
+  name: "CheckboxSimple",
+  props: {
+    title: String,
+    formName: String,
+    fieldTarget: String,
+    field: String,
+    value: Boolean,
+    changed: Function,
+    params: Object,
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      valueLocal: false,
+    };
+  },
+  methods: {
+    ...mapMutations("validation", ["updateFormDirty"]),
+    ...mapMutations("generic", ["addFilter"]),
+  },
+  mounted() {
+    this.valueLocal = this.value;
+  },
+  watch: {
+    value() {
+      this.valueLocal = this.value;
+    },
+    valueLocal() {
+      this.$emit("input", this.valueLocal);
+      if (this.markFormDirty) this.updateFormDirty(true);
+      if (this.changed) this.changed(this.params);
+
+      if (this.fieldTarget) {
+        let obj = { fieldTarget: this.fieldTarget, value: this.valueLocal ? "true" : "false" };
+        this.addFilter(obj);
+      }
+
+    },
+  },
+};
+</script>

package/src/component/forms/Color.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="form-group">
+    <div>
+      <span class="title">{{ title }} </span>
+      <compact-picker v-model.trim="color.hex" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Chrome } from "vue-color";
+
+export default {
+  name: "Color",
+  components: {
+    "compact-picker": Chrome,
+  },
+  props: {
+    title: String,
+    field: String,
+    formName: String,
+    value: String,
+  },
+  data() {
+    return {
+      color: { hex: "#40BF84" },
+    };
+  },
+  watch: {
+    value() {
+      this.color.hex = this.value;
+    },
+    "color.hex": function (value) {
+      if (value.hex) this.$emit("input", value.hex);
+    },
+  },
+};
+</script>

package/src/component/forms/DateTime.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="form-group">
+    <label>
+      <span class="title">{{ title }} </span>
+      <span class="required" v-if="required">*</span>
+      <Tip :field="field" :formName="formName" />
+    </label>
+    <div class="inner-addon right-addon">
+      <i v-if="notifications.length > 0 && formDirty" class="required glyphicon fas fa-exclamation-triangle"></i>
+      <date-picker lang="pt-br" :disabled="disabled" :range="range" @confirm="executeConfirm" @change="executeConfirm"
+        @clear="close" :confirm="confirm" :confirm-text="confirmText" :format="format" value-type="format"
+        :time-picker-options="{
+        start: '07:00',
+        step: '00:30',
+        end: '23:30',
+        format: 'HH:mm',
+      }" width="100%" :placeholder="placeholder" :type="type" v-model="valueLocal"
+        :class="{ 'is-invalid': notifications.length > 0 && formDirty }"></date-picker>
+    </div>
+
+    <div v-if="formDirty">
+      <div v-for="message in notifications" :key="message">
+        <span class="invalid">{{ message }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Tip from "../shared/Tip";
+import DatePicker from "vue2-datepicker";
+
+import { mapState, mapMutations, mapGetters } from "vuex";
+
+export default {
+  components: { Tip, DatePicker },
+  name: "Data",
+  mixins: [],
+  props: [
+    "title",
+    "field",
+    "fieldTarget",
+    "placeholder",
+    "formName",
+    "required",
+    "disabled",
+    "format",
+    "type",
+    "value",
+    "range",
+    "confirm",
+    "confirmText",
+    "markFormDirty",
+  ],
+  data() {
+    return {
+      notifications: [],
+      formDirty: false,
+      valueLocal: "",
+      markFormDirtyLocal: false,
+    };
+  },
+  created() {
+    this.validate();
+    this.valueLocal = this.value;
+
+    if (this.markFormDirty == undefined) this.markFormDirtyLocal = true;
+  },
+  methods: {
+    ...mapMutations("validation", [
+      "addValidation",
+      "removeValidation",
+      "updateFormDirty",
+    ]),
+    ...mapMutations("generic", ["addFilter", "removeTag", "addEvent"]),
+    validate() {
+      this.notifications = [];
+
+      if (this.required && this.valueLocal.length == 0) {
+        var message = `${this.title} não pode ser vazio!`;
+        this.notifications.push(message);
+      }
+    },
+    executeConfirm() {
+      if (this.range) {
+        if (this.fieldTarget) {
+          let obj = {
+            fieldTarget: this.fieldTarget,
+            value: { start: this.valueLocal[0], end: this.valueLocal[1] },
+          };
+          this.addFilter(obj);
+        }
+      }
+    },
+    close() {
+      this.removeTag("period");
+      this.addEvent({ name: "tagRemoved", data: "period" });
+    },
+  },
+  computed: {
+    ...mapState("validation", ["resetForm", "validations"]),
+    ...mapGetters("generic", ["event"]),
+  },
+  watch: {
+    valueLocal() {
+      this.validate();
+      this.formDirty = true;
+      if (this.markFormDirtyLocal) this.updateFormDirty(true);
+      this.$emit("input", this.valueLocal);
+    },
+    value() {
+      this.valueLocal = this.value;
+      if (this.markFormDirty) this.updateFormDirty(true);
+    },
+    notifications() {
+      let self = this;
+      this.notifications.forEach(function (notification) {
+        let obj = {
+          key: self.field + "&" + self.formName,
+          formName: self.formName,
+          notification: notification,
+        };
+        self.addValidation(obj);
+      });
+
+      if (this.notifications.length == 0) {
+        let obj = {
+          key: self.field + "&" + self.formName,
+          formName: self.formName,
+        };
+        self.removeValidation(obj);
+      }
+    },
+    resetForm: {
+      handler(form) {
+        if (form.name == this.formName) this.formDirty = false;
+      },
+      deep: true,
+    },
+    event: {
+      handler(event) {
+        if (event.name == "tagRemoved") {
+          this.valueLocal = [];
+
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.title {
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  color: #0a0a0a;
+  letter-spacing: 0.5px !important;
+}
+
+.success {
+  color: #94aa2a;
+  font-size: 14px;
+}
+
+.invalid {
+  color: #f0134d;
+  font-size: 14px;
+}
+</style>

package/src/component/forms/DateYearMonth.vue

@@ -0,0 +1,193 @@
+<template>
+    <div class="date-filter">
+        <button @click="previous" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
+            :disabled="disabled">
+            <i class="fa-solid fa-chevron-left"></i>
+        </button>
+        <span class="date-display" :class="{ 'title-disabled': disabled }">{{ displayValue }} </span>
+        <span class="date-icon" @click="resetSelection()" :class="{ 'disabled': disabled }">
+            <i class="fa-solid fa-calendar-week"></i>
+        </span>
+        <button @click="next" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
+            :disabled="disabled">
+            <i class="fa-solid fa-chevron-right"></i>
+        </button>
+    </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+    props: {
+        mode: {
+            type: String,
+            required: true,
+            validator(value) {
+                return ['month', 'year'].includes(value);
+            }
+        },
+        value: {
+            type: Number,
+            required: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            currentMonth: new Date().getMonth(),
+            currentYear: new Date().getFullYear()
+        };
+    },
+    created() {
+        this.resetSelection();
+    },
+    mounted() {
+        this.sendEvent();
+    },
+    computed: {
+        displayValue() {
+            if (this.mode === 'month') {
+                return this.monthNames[this.currentMonth];
+            } else {
+                return this.currentYear;
+            }
+        },
+        monthNames() {
+            return ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
+        },
+        buttonClass() {
+            return this.mode === 'month' ? 'month-mode' : 'year-mode';
+        }
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent"]),
+        previous() {
+            if (this.disabled) return;
+            if (this.mode === 'month') {
+                this.currentMonth = (this.currentMonth + 11) % 12;
+                if (this.currentMonth === 11) {
+                    this.currentYear--;
+                }
+            } else {
+                this.currentYear--;
+            }
+            this.$emit('input', this.getValue());
+            this.sendEvent();
+        },
+        next() {
+            if (this.disabled) return;
+            if (this.mode === 'month') {
+                this.currentMonth = (this.currentMonth + 1) % 12;
+                if (this.currentMonth === 0) {
+                    this.currentYear++;
+                }
+            } else {
+                this.currentYear++;
+            }
+            this.$emit('input', this.getValue());
+            this.sendEvent();
+        },
+        resetSelection() {
+            const now = new Date();
+            if (this.mode === 'month') {
+                this.currentMonth = now.getMonth();
+                this.currentYear = now.getFullYear();
+            } else {
+                this.currentYear = now.getFullYear();
+            }
+            this.sendEvent();
+        },
+        getValue() {
+            if (this.mode === 'month') {
+                return (this.currentMonth + 1).toString();
+            } else {
+                return this.currentYear.toString();
+            }
+        },
+        sendEvent() {
+            this.addEvent({ name: "dateYearMonth", data: { mode: this.mode, value: this.getValue() } });
+            this.$emit('input', this.getValue());
+        }
+    },
+    watch: {
+        mode(newMode) {
+            this.resetSelection();
+        },
+        value(newValue) {
+            if (this.mode === 'month') {
+                this.currentMonth = newValue - 1;
+            } else {
+                this.currentYear = newValue;
+            }
+        }
+    },
+};
+</script>
+
+<style scoped>
+.date-filter {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+}
+
+.navigation-button {
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2em;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
+}
+
+.navigation-button:hover {
+    opacity: 0.8;
+}
+
+.navigation-button:active {
+    transform: scale(0.95);
+}
+
+.navigation-button.disabled {
+    background-color: #b0b0b0;
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.date-display {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+.month-mode {
+    background-color: #ffa500;
+}
+
+.year-mode {
+    background-color: #007bff;
+}
+
+.date-icon {
+    cursor: pointer;
+    color: rgb(73, 72, 72);
+}
+
+.title-disabled {
+    color: #b0b0b0;
+}
+
+.date-icon.disabled {
+    color: #b0b0b0;
+    cursor: not-allowed;
+}
+</style>