@nixweb/nixloc-ui 0.0.271 → 0.0.273

package/src/components/modules/rental/period-rental/PeriodRentCreateUpdate.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="12" v-if="showGenerate">
+        <div class="text-center">
+          <RadioGroup :title="msg" field="CalculateByFullPeriod" :formName="formName" :options="[
+        { text: 'Gerador', value: true },
+        { text: 'Manual', value: false },
+      ]" v-model="modeGenerate" />
+        </div>
+      </b-col>
+    </b-row>
+    <div v-show="modeGenerate">
+      <GeneratePeriodRent :isShowStartDateHour="true" v-model="periodRent" />
+    </div>
+    <div v-show="!modeGenerate">
+      <b-row>
+        <b-col sm="3">
+          <DateTime title="Saída" field="deliveryDateHour" format="DD/MM/YYYY HH:mm" type="dateTime" placeholder
+            :formName="formName" :markFormDirty="markFormDirty" :required="true"
+            v-model="periodRent.deliveryDateHour" />
+        </b-col>
+        <b-col sm="3">
+          <DateTime title="Inicio" field="startDateHour" format="DD/MM/YYYY HH:mm" type="dateTime" placeholder
+            :formName="formName" :markFormDirty="markFormDirty" :required="true" v-model="periodRent.startDateHour" />
+        </b-col>
+        <b-col sm="3">
+          <DateTime title="Fim" field="endDateHour" format="DD/MM/YYYY HH:mm" type="dateTime" placeholder
+            :formName="formName" :markFormDirty="markFormDirty" :required="true" v-model="periodRent.endDateHour" />
+        </b-col>
+        <b-col sm="3">
+          <DateTime title="Retorno" field="devolutionDateHour" format="DD/MM/YYYY HH:mm" type="dateTime" placeholder
+            :formName="formName" :markFormDirty="markFormDirty" :required="true"
+            v-model="periodRent.devolutionDateHour" />
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col sm="12">
+          <InputText title="Descrição" field="descricao" :formName="formName" :required="false" :maxLength="100"
+            v-model="periodRent.description" :markFormDirty="markFormDirty" />
+        </b-col>
+      </b-row>
+    </div>
+    <b-row v-if="showBtnSave">
+      <b-col sm="12">
+        <div class="text-right">
+          <Button _key="savePeriodRent" type="success" title="Salvar" :disabled="!isFormValid(formName)"
+            classIcon="fas fa-save" size="medium" :clicked="savePeriodRent" />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup.vue";
+
+import GeneratePeriodRent from "@/components/modules/rental/period-rental/GeneratePeriodRent.vue";
+import PeriodRent from "@/components/modules/rental/period-rental/PeriodRent.js";
+
+import { mapGetters, mapMutations, mapActions } from "vuex";
+
+export default {
+  name: "PeriodRentCreateUpdate",
+  props: {
+    rentId: String,
+    msg: String,
+    showBtnSave: {
+      type: Boolean,
+      default: true,
+    },
+    showModeGenerate: {
+      type: Boolean,
+      default: true,
+    },
+    markFormDirty: {
+      type: Boolean,
+      default: false,
+    },
+    value: Object,
+  },
+  components: {
+    DateTime,
+    InputText,
+    Button,
+    RadioGroup,
+    GeneratePeriodRent,
+  },
+  data() {
+    return {
+      periodRent: new PeriodRent(),
+      formName: "periodRentCreateUpdate",
+      urlCreate: "/api/v1/rental/period-rent/create",
+      urlUpdate: "/api/v1/rental/period-rent/update",
+      urlGenerate: "/api/v1/rental/period-rent/generate-manual",
+      readOnly: false,
+      showGenerate: true,
+      modeGenerate: true,
+    };
+  },
+  mounted() {
+    this.periodRent = this.value;
+    if (this.rentId) this.periodRent.rentId = this.rentId;
+    this.modeGenerate = this.showModeGenerate;
+    this.showGenerate = this.showModeGenerate;
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi"]),
+    ...mapMutations("generic", ["addEvent", "removeLoading", "hideModal"]),
+    savePeriodRent() {
+      if (this.periodRent.id && !this.readOnly) {
+        let params = { url: this.urlUpdate, obj: this.periodRent };
+        this.putApi(params).then((response) => {
+          if (response.success) this.hideModal();
+          this.removeLoading(["savePeriodRent"]);
+        });
+      } else if (!this.readOnly) {
+        this.periodRent.rentId = this.rentId;
+        let params = { url: this.urlCreate, obj: this.periodRent };
+        this.postApi(params).then((response) => {
+          if (response.success) this.hideModal();
+          this.removeLoading(["savePeriodRent"]);
+        });
+      } else if (this.readOnly) {
+        let params = {
+          url: this.urlGenerate,
+          obj: this.periodRent,
+          notNotifyToast: true,
+        };
+        this.postApi(params).then((response) => {
+          if (response.success) {
+            this.addEvent({
+              name: "generatePeriodRent",
+              data: response.content,
+            });
+            this.hideModal();
+          }
+          this.removeLoading(["savePeriodRent"]);
+        });
+      }
+    },
+    update(data) {
+      this.periodRent = new PeriodRent();
+      this.periodRent.update(data);
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "periodRentCreateUpdate") {
+          this.showGenerate = true;
+          this.modeGenerate = true;
+          this.readOnly = false;
+          this.periodRent = new PeriodRent();
+        }
+        if (event.name == "periodRentUpdate") {
+          this.showGenerate = false;
+          this.modeGenerate = false;
+          this.readOnly = false;
+          this.update(event.data.fullPeriod);
+        }
+        if (event.name == "clickedPeriodRentItem") {
+          this.modeGenerate = false;
+          this.readOnly = true;
+          this.update(event.data);
+        }
+      },
+      deep: true,
+    },
+    periodRent: {
+      handler(periodRent) {
+        this.$emit("input", periodRent);
+      },
+      deep: true,
+    },
+  },
+};
+</script>

package/src/components/modules/rental/period-rental/PeriodRentItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="text-center">
+      <div class="period-rent-item" @click="update">
+        <DisplayPeriodRent :periodRent="periodRent" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+import DisplayPeriodRent from "@nixweb/nixloc-ui/src/component/rental/DisplayPeriodRent";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "PeriodRentItem",
+  components: {
+    Modal,
+    DisplayPeriodRent,
+  },
+  data() {
+    return {
+      periodRent: {},
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["event", "showModal"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent", "openModal"]),
+    update() {
+      this.addEvent({
+        name: "clickedPeriodRentItem",
+        data: this.periodRent,
+      });
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "generatePeriodRent") this.periodRent = event.data;
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.period-rent-item {
+  cursor: pointer;
+  max-width: 550px;
+  border: 1px solid #e5e4e8;
+  background-color: white;
+  border-radius: 8px;
+  padding-left: 10px;
+  padding-right: 7px;
+  font-size: 14px;
+  font-weight: normal;
+  margin: auto;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 2%);
+}
+</style>

package/src/components/modules/rental/period-rental/PeriodRentList.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <ViewTemplateConfiguration
+      :templateList="templateList"
+      :showSearch="false"
+      :showHorizontalFilter="false"
+      :propsParam="propsParam"
+    >
+      <div slot="content-buttons">
+        <Button
+          _key="btnPeriodRentCreateUpdate"
+          title="Período"
+          classIcon="fas fa-plus-circle"
+          type="primary"
+          size="small"
+          :clicked="create"
+        />
+      </div>
+    </ViewTemplateConfiguration>
+  </div>
+</template>
+
+<script>
+import ViewTemplateConfiguration from "@nixweb/nixloc-ui/src/component/template/ViewTemplateConfiguration";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "PeriodRentList",
+  components: {
+    ViewTemplateConfiguration,
+    Button,
+  },
+  props: {
+    rentId: String,
+  },
+  data() {
+    return {
+      templateList: {
+        urlGetApi: "/api/v1/rental/period-rent/get-all",
+        urlDeleteAllApi: "/api/v1/rental/period-rent/delete",
+        headerTable: [
+          {
+            field: "fullPeriod",
+            title: "Período",
+            type: "period-rent",
+            eventName: "periodRentUpdate",
+          },
+          {
+            field: "description",
+            title: "Descrição",
+            type: "text",
+          },
+        ],
+      },
+      propsParam: {
+        rentId: this.rentId,
+        periodRentId: "null",
+      },
+    };
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent", "removeLoading"]),
+    create() {
+      this.addEvent({ name: "periodRentCreateUpdate" });
+      this.removeLoading(["btnPeriodRentCreateUpdate"]);
+    },
+  },
+};
+</script>

package/src/components/modules/rental/period-rental/SelectOptionPeriodRent.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <CheckboxSimple title="TODOS PERÍODOS" v-show="showPeriodAll && data.length > 1" :markFormDirty="false"
+      v-model="showAll" />
+    <div :class="{ 'show-all': showAll }" class="div-main">
+      <div :class="{ 'display-period-rent-selected': period.id == selectedPeriod.id || showAll }"
+        class="display-period-rent" v-for="period in data" :key="period.id">
+        <div @click="select(period)">
+          <b-popover :target="period.id" triggers="hover" placement="top">
+            <template #title>Saída e Retorno</template>
+            <div class="text-center">
+              <DisplayPeriodRent :fontSize="13" :periodRent="period.fullPeriod" :showOnlyDeliveryDevolution="true"
+                :showDeliveryDevolution="true" />
+            </div>
+          </b-popover>
+          <DisplayPeriodRent :id="period.id" :fontSize="13" :periodRent="period.fullPeriod">
+            <span slot="start" class="check" v-if="period.id == selectedPeriod.id || showAll">
+              <i class="fa-solid fa-circle-check"></i>
+            </span>
+          </DisplayPeriodRent>
+        </div>
+      </div>
+      <br />
+    </div>
+  </div>
+</template>
+<script>
+import CheckboxSimple from "@nixweb/nixloc-ui/src/component/forms/CheckboxSimple.vue";
+import DisplayPeriodRent from "@nixweb/nixloc-ui/src/component/rental/DisplayPeriodRent";
+
+import { mapActions, mapMutations } from "vuex";
+
+export default {
+  name: "SelectOptionPeriodRent",
+  props: ["value"],
+  components: {
+    DisplayPeriodRent,
+    CheckboxSimple,
+  },
+  props: {
+    rentId: String,
+    showPeriodAll: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      periodRentId: this.$route.params.periodRentId,
+      urlGetApi: "/api/v1/rental/period-rent/get-all",
+      data: [],
+      showAll: false,
+      selectedPeriod: {},
+    };
+  },
+  created() {
+    this.getAll();
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    ...mapMutations("generic", ["addEvent"]),
+    getAll() {
+      let params = {
+        url: this.urlGetApi,
+        obj: {
+          rentId: this.rentId,
+          periodRentId: this.periodRentId,
+          noPaginated: true,
+        },
+      };
+      this.getApi(params).then((response) => {
+        this.data = response.content.data;
+        let firstPeriod = response.content.data[0];
+        this.selectedPeriod = firstPeriod;
+        this.$emit("input", {
+          showAll: this.showAll,
+          period: this.selectedPeriod,
+        });
+        this.addEvent({
+          name: "selectedPeriodRent",
+          data: { showAll: this.showAll, period: this.selectedPeriod },
+        });
+        this.addEvent({
+          name: "totalRecordsPeriod",
+          data: { totalRecords: this.data.length },
+        });
+      });
+    },
+    select(period) {
+      if (!this.showAll) {
+        this.selectedPeriod = period;
+        this.$emit("input", {
+          showAll: this.showAll,
+          period: this.selectedPeriod,
+        });
+        this.addEvent({
+          name: "selectedPeriodRent",
+          data: { showAll: this.showAll, period: this.selectedPeriod },
+        });
+      }
+    },
+  },
+  watch: {
+    showAll: {
+      handler() {
+        this.$emit("input", {
+          showAll: this.showAll,
+          period: this.selectedPeriod,
+        });
+        this.addEvent({
+          name: "selectedPeriodRent",
+          data: { showAll: this.showAll, period: this.selectedPeriod },
+        });
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-main {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.display-period-rent {
+  display: inline-block;
+  cursor: pointer;
+  max-width: 550px;
+  border: 1px solid #e5e4e8;
+  background-color: white;
+  border-radius: 8px;
+  padding-left: 10px;
+  padding-right: 7px;
+  font-size: 14px;
+  font-weight: normal;
+  margin: 5px;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 2%);
+}
+
+.check {
+  margin-right: 5px;
+  color: #4680a5;
+}
+
+.display-period-rent-selected {
+  border: 1px #4680a5 solid;
+}
+
+.show-all {
+  opacity: 0.4;
+}
+</style>

package/src/components/modules/rental/rent/Rent.js

@@ -0,0 +1,42 @@
+export default class Rent {
+    constructor() {
+        this.id = "";
+        this.identification = "";
+        this.number = 0;
+        this.statusRental = 1;
+        this.type = 1;
+        this.typeRent = { id: "", content: "" };
+        this.collaborator = { id: "", content: "" };
+        this.customer = { id: "", content: "" };
+        this.contact = { id: "", content: "" };
+        this.periodRent = {};
+        this.observationRental = "";
+        this.observationServiceOrder = "";
+        this.dateAccepted = "";
+        this.registeredDate = "";
+        this.registeredUser = "";
+    }
+    update(data) {
+        this.id = data.id;
+        this.identification = data.identification;
+        this.number = data.number;
+        this.statusRental = data.statusRental;
+
+        if (data.typeRent)
+            this.typeRent = { id: data.typeRent.id, content: data.typeRent.name };
+
+        if (data.collaborator)
+            this.collaborator = { id: data.collaborator.id, content: data.collaborator.person.companyName + " (" + data.collaborator.person.tradeName + ")" };
+
+        this.customer = { id: data.customerSupplier.id, content: data.customerSupplier.person.companyName + " (" + data.customerSupplier.person.tradeName + ")" };
+        this.contact = { id: data.contact.id, content: data.contact.name };
+        this.observationRental = data.observationRental;
+        this.observationServiceOrder = data.observationServiceOrder;
+
+        this.dateAccepted = data.dateAccepted;
+        this.registeredDate = data.registeredDate;
+        this.registeredUser = data.registeredUser;
+
+    }
+
+}

package/src/components/modules/rental/rent/RentAccept.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div class="text-center">
+      <Button _key="btnRentAccept" title="SIM, aprovar" classIcon="fa-solid fa-circle-check" type="success" size="small"
+        :clicked="update" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button.vue";
+
+import { mapMutations, mapActions } from "vuex";
+
+export default {
+  name: "RentAccept",
+  props: {
+    rentId: String,
+  },
+  components: {
+    Button,
+  },
+  data() {
+    return { urlUpdate: "/api/v1/rental/rent/accept" };
+  },
+  methods: {
+    ...mapActions("generic", ["putApi"]),
+    ...mapMutations("generic", ["addEvent", "hideModal", "removeLoading"]),
+    update() {
+      let params = { url: this.urlUpdate, obj: { rentId: this.rentId } };
+      this.putApi(params).then((response) => {
+        if (response.success) {
+          this.addEvent({ name: "rentAccepted" });
+          this.hideModal();
+        }
+        this.removeLoading(["btnRentAccept"]);
+      });
+    },
+  },
+};
+</script>