@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/shared/job/JobCreateUpdate.vue

@@ -0,0 +1,408 @@
+<template>
+  <div>
+    <div v-if="loading">
+      <Loading :center="false" />
+    </div>
+
+    <div v-else>
+      <b-row>
+        <b-col sm="5">
+          <InputText title="Assunto" field="subject" :formName="formName" :required="true" :maxLength="100"
+            v-model="job.subject" />
+        </b-col>
+
+        <b-col sm="7">
+          <div class="loc-row" role="group" aria-label="Local">
+            <div class="loc-input">
+              <InputAddressGoogle v-if="isGoogleMaps" title="Local Google" field="address" :maxLength="200"
+                v-model="job.location" />
+              <InputText v-else title="Local" field="address" :maxLength="200" v-model="job.location" />
+            </div>
+
+            <div class="loc-toggle" role="radiogroup" aria-label="Modo de endereço">
+              <button type="button" class="loc-icon" :class="{ active: isGoogleMaps }" role="radio"
+                :aria-checked="isGoogleMaps ? 'true' : 'false'" @click="isGoogleMaps = true" title="Google Maps">
+                <i class="fa-solid fa-map-location-dot icon-place" aria-hidden="true"></i>
+                <span class="sr-only">Google Maps</span>
+              </button>
+
+              <button type="button" class="loc-icon" :class="{ active: !isGoogleMaps }" role="radio"
+                :aria-checked="!isGoogleMaps ? 'true' : 'false'" @click="isGoogleMaps = false" title="Livre">
+                <i class="fa-solid fa-location-dot icon-place" aria-hidden="true"></i>
+                <span class="sr-only">Livre</span>
+              </button>
+            </div>
+          </div>
+        </b-col>
+      </b-row>
+
+      <b-tabs v-model="tabIndex">
+        <b-tab title="Principal">
+          <CheckboxSimple title="Dia Inteiro" v-model="job.allDay" />
+          <b-row>
+            <b-col sm="3">
+              <DateTime title="Data Inicio" field="birthDate" format="DD/MM/YYYY" type="date" :required="true"
+                placeholder :formName="formName" v-model="job.dateStart" />
+            </b-col>
+            <b-col sm="2" v-if="!job.allDay">
+              <DateTime title="Hora" field="birthDate" format="HH:mm" type="time" placeholder :formName="formName"
+                v-model="job.timeStart" />
+            </b-col>
+            <b-col sm="3">
+              <DateTime title="Data Fim" field="birthDate" format="DD/MM/YYYY" type="date" :required="true" placeholder
+                :formName="formName" v-model="job.dateEnd" />
+            </b-col>
+            <b-col sm="2" v-if="!job.allDay">
+              <DateTime title="Hora" field="birthDate" format="HH:mm" type="time" placeholder :formName="formName"
+                v-model="job.timeEnd" />
+            </b-col>
+          </b-row>
+
+          <span class="title">Descrição</span>
+          <ScrollBar :minHeight="150" :maxHeight="250">
+            <EditorHtml field="description" :maxLength="5000" v-model="job.description" />
+            <br />
+          </ScrollBar>
+        </b-tab>
+
+        <b-tab title="Nota" v-if="job.id">
+          <NoteListCreateEdit :jobId="job.id" />
+        </b-tab>
+
+        <b-tab title="Participantes">
+          <b-row>
+            <b-col sm="6">
+              <Select title="Usuário Interno" :showNewRegister="false" field="user" :url="urlUser"
+                v-model="selectUser" />
+            </b-col>
+            <b-col sm="4">
+              <div class="side-by-side">
+                <div class="btn-add">
+                  <Button _key="btnAddUser" type="primary" :disabled="!selectUser.id" classIcon="fa-solid fa-plus"
+                    size="small" :clicked="addUser" />
+                </div>
+              </div>
+              <div class="side-by-side">
+                <div class="btn-add">
+                  <Button _key="btnAddAllUser" title="Todos" type="primary" classIcon="fa-solid fa-users" size="small"
+                    :clicked="addAllUser" />
+                </div>
+              </div>
+            </b-col>
+          </b-row>
+
+          <InputTag title="Participantes" placeholder="Digite um e-mail e pressione Enter" :initialValue="job.guest"
+            v-model="job.guest" />
+        </b-tab>
+
+        <b-tab title="Anexo" v-if="job.id">
+          <FileManager :showInModal="false" source="job" :genericId="job.id" />
+        </b-tab>
+
+        <b-tab title="Auditoria" v-if="job.id && (userLogged.user.userName === 'UserTemp' || hasRule('Audit'))">
+          <ScrollBar :minHeight="300" :maxHeight="300">
+            <TimelineLog v-if="tabIndex == 4" :id="job.id" />
+          </ScrollBar>
+        </b-tab>
+      </b-tabs>
+
+      <b-row>
+        <b-col sm="12">
+          <footer class="g-actions" aria-label="Ações">
+            <div class="g-actions-left">
+              <CheckboxSimple title="Marcar como concluída" v-model="job.done" />
+              <CheckboxSimple v-if="job.id && job.guest.length > 0" :markFormDirty="false"
+                title="Notificar Participantes" v-model="notify" />
+            </div>
+
+            <div class="g-actions-right">
+              <CheckboxSimple title="Fechar ao salvar" :markFormDirty="false" v-model="closeOnSave" />
+              <Button _key="create" type="success" title="Salvar" :disabled="!isFormValid(formName) || loadingBtn"
+                classIcon="fas fa-save" size="medium" :clicked="create" />
+            </div>
+          </footer>
+        </b-col>
+      </b-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import EditorHtml from "@nixweb/nixloc-ui/src/component/forms/EditorHtml";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import InputAddressGoogle from "@nixweb/nixloc-ui/src/component/forms/InputAddressGoogle";
+import CheckboxSimple from "@nixweb/nixloc-ui/src/component/forms/CheckboxSimple.vue";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+import InputTag from "@nixweb/nixloc-ui/src/component/forms/InputTag";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import FileManager from "@nixweb/nixloc-ui/src/component/shared/file-manager/FileManager";
+import NoteListCreateEdit from "../note/NoteListCreateEdit.vue";
+import TimelineLog from "../../adm/audit-log/TimelineLog.vue";
+
+import Job from "@/components/modules/shared/job/Job.js";
+
+import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
+
+export default {
+  name: "JobCreateUpdate",
+  components: {
+    Button,
+    InputText,
+    DateTime,
+    EditorHtml,
+    ScrollBar,
+    InputAddressGoogle,
+    CheckboxSimple,
+    Loading,
+    InputTag,
+    Select,
+    FileManager,
+    NoteListCreateEdit,
+    TimelineLog,
+  },
+  data() {
+    return {
+      formName: "jobCreateUpdate",
+      job: new Job(),
+      urlCreate: "/api/v1/shared/job/create",
+      urlUpdate: "/api/v1/shared/job/update",
+      urlUser: "/api/v1/adm/user/select-all",
+      selectUser: {},
+      isGoogleMaps: true,
+      loading: true,
+      loadingBtn: false,
+      notify: false,
+      closeOnSave: true,
+      baseParams: {
+        search: "",
+        currentPage: 1,
+        totalPerPage: 200,
+      },
+      tabIndex: 0,
+    };
+  },
+  computed: {
+    ...mapGetters("validation", ["isFormValid"]),
+    ...mapGetters("generic", ["event"]),
+    ...mapState("user", ["userLogged"]),
+    ...mapGetters("user", ["hasRule"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi", "getApi"]),
+    ...mapMutations("validation", ["resetValidation"]),
+    ...mapMutations("generic", ["addEvent", "removeLoading", "removeEvent", "hideModal"]),
+    ...mapMutations("validation", ["resetValidation"]),
+    create() {
+      this.loadingBtn = true;
+      this.job.userId = this.userLogged.user.id;
+      this.job.organizerName = this.userLogged.user.name;
+      this.job.organizerEmail = this.userLogged.user.email;
+      this.job.notify = this.notify;
+
+      if (this.job.id) {
+        const params = { url: this.urlUpdate, obj: this.job };
+        this.putApi(params).then((response) => {
+          if (response.success) {
+            if (response.content && response.content.id) this.job.id = response.content.id;
+            if (!this.closeOnSave) this.tabIndex = 1;
+            if (this.closeOnSave) this.hideModal();
+          }
+          this.addEvent({ name: "updatedJob" });
+          this.removeLoading(["create"]);
+          this.loadingBtn = false;
+        });
+      } else {
+        const params = { url: this.urlCreate, obj: this.job };
+        this.postApi(params).then((response) => {
+          if (response.success) {
+            if (response.content && response.content.id) this.job.id = response.content.id;
+            if (!this.closeOnSave) this.tabIndex = 1;
+            if (this.closeOnSave) this.hideModal();
+          }
+          this.addEvent({ name: "updatedJob" });
+          this.removeLoading(["create"]);
+          this.loadingBtn = false;
+        });
+      }
+    },
+    update(data) {
+      this.job = new Job();
+      this.job.update(data);
+      this.removeLoading([data.id]);
+    },
+    addUser() {
+      if (!this.job.guest.includes(this.selectUser.content)) {
+        this.job.guest.push(this.selectUser.content);
+        this.selectUser = {};
+      }
+      this.removeLoading(["btnAddUser"]);
+    },
+    addAllUser() {
+      const obj = { ...this.baseParams };
+      const params = { url: this.urlUser, obj: obj };
+      this.getApi(params).then((response) => {
+        let self = this;
+        response.content.data.forEach((user) => {
+          if (!self.job.guest.includes(user.content)) {
+            self.job.guest.push(user.content);
+          }
+        });
+        this.removeLoading(["btnAddAllUser"]);
+      });
+    },
+    removerDuplicados(array) {
+      return array.filter((element, index) => array.indexOf(element) === index);
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "jobUpdate") {
+          this.update(event.data);
+          this.loading = false;
+        }
+        if (event.name == "jobCreate") {
+          this.job = new Job();
+          this.resetValidation(this.formName);
+          this.loading = false;
+          this.job.allDay = true;
+          this.job.dateStart = event.data;
+          this.job.dateEnd = event.data;
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* --- Local com toggle de ícones acoplado ao input --- */
+.loc-row {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+}
+
+.loc-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-right: 10px;
+}
+
+.loc-toggle {
+  display: inline-flex;
+  align-items: center;
+  border-left: none;
+  margin-top: 18px;
+  gap: 6px;
+}
+
+.loc-icon {
+  appearance: none;
+  border: 1px solid transparent;
+  background: transparent;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+}
+
+.loc-icon i {
+  font-size: 16px;
+}
+
+.loc-icon.active {
+  border-color: #e5e7eb;
+  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
+  font-weight: 600;
+}
+
+.loc-icon:focus {
+  outline: 2px solid #94a3b8;
+  outline-offset: 2px;
+}
+
+/* mobile: quebra em 2 linhas */
+@media (max-width: 575.98px) {
+  .loc-row {
+    flex-direction: column;
+  }
+
+  .loc-toggle {
+    border-left: 1px solid #e7ebf3;
+    border-radius: 8px;
+    margin-top: 6px;
+    align-self: flex-end;
+    /* opcional */
+  }
+}
+
+/* --- Barra de ações moderna --- */
+.btn-add {
+  margin-top: 38px;
+}
+
+.icon-place {
+  color: #D98621;
+}
+
+.g-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 0 12px 16px;
+  border: 1px solid #e7ebf3;
+  border-radius: 8px;
+  margin-top: 10px;
+}
+
+.g-actions-left {
+  display: flex;
+  align-items: center;
+  gap: 34px;
+}
+
+.g-actions-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.g-actions-right>*:last-child {
+  min-width: 100px;
+  font-weight: 600;
+}
+
+@media (max-width: 575.98px) {
+  .g-actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .g-actions-left {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .g-actions-right {
+    margin-left: 0;
+    justify-content: stretch;
+  }
+
+  .g-actions-right>* {
+    width: 100%;
+  }
+}
+</style>

package/src/components/modules/shared/note/NoteListCreateEdit.vue

@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <b-row>
+      <b-col sm="10">
+        <input
+          type="text"
+          placeholder="Digite sua nota..."
+          @keyup.enter.prevent="addNote"
+          v-model="comment"
+        >
+      </b-col>
+      <b-col sm="2">
+        <div class="div-btn">
+          <Button
+            _key="btnAdd"
+            type="primary"
+            :disabled="note == ''"
+            classIcon="fa-sharp fa-solid fa-plus"
+            size="small"
+            :clicked="addNote"
+          />
+        </div>
+      </b-col>
+    </b-row>
+    <Loading
+      v-if="loading"
+      type="line"
+    />
+    <ScrollBar
+      :minHeight="300"
+      :maxHeight="300"
+    >
+      <div
+        v-if="!loading"
+        class="div-comments"
+      >
+        <div v-for="comment in comments">
+          <b-row>
+            <b-col sm="1">
+              <div class="text-right div-photo">
+                <img
+                  :src="comment.avatar"
+                  class="user-photo"
+                >
+              </div>
+            </b-col>
+            <b-col sm="11">
+              <b-row>
+                <b-col sm="12">
+                  <small class="title title-user"> {{ comment.userName }} em {{
+                                        comment.registeredDateStr }}
+                  </small>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col sm="12">
+                  <div
+                    v-if="comment.id != commentSelected.id"
+                    class="div-comment"
+                    @click="edit(comment)"
+                  >
+                    {{ comment.comment }}
+                  </div>
+                  <div v-else>
+                    <b-row>
+                      <b-col sm="10">
+                        <div class="input-edit">
+                          <input
+                            type="text"
+                            placeholder="Digite sua nota..."
+                            @keyup.enter.prevent="updateNote"
+                            v-model="comment.comment"
+                          >
+                        </div>
+                      </b-col>
+                      <b-col sm="2">
+                        <div class="side-by-side div-btn-edit">
+                          <div
+                            class="div-icon-save"
+                            @click="updateNote"
+                          >
+                            <i class="fa-solid fa-floppy-disk"></i>
+                          </div>
+                        </div>
+                        <div class="side-by-side div-btn-edit">
+                          <div
+                            class="div-icon-cancel"
+                            @click="commentSelected = {}"
+                          >
+                            <i class="fa-solid fa-ban"></i>
+                          </div>
+                        </div>
+                        <div class="side-by-side div-btn-edit">
+                          <div
+                            class="title-remove div-icon-cancel"
+                            @click="remove(comment)"
+                          >
+                            <i class="fa-solid fa-trash"></i>
+                          </div>
+                        </div>
+                      </b-col>
+                    </b-row>
+                  </div>
+                </b-col>
+              </b-row>
+            </b-col>
+          </b-row>
+        </div>
+      </div>
+      <div
+        class="title"
+        v-if="comments.length == 0"
+      >Nenhuma nota adicionada!</div>
+    </ScrollBar>
+  </div>
+</template>
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
+
+import { mapActions, mapMutations, mapState } from "vuex";
+
+export default {
+  name: "NoteListCreateEdit",
+  props: ["jobId"],
+  components: {
+    Button,
+    InputText,
+    ScrollBar,
+    Loading,
+  },
+  data() {
+    return {
+      comment: "",
+      commentSelected: "",
+      comments: [],
+      urlCreate: "/api/v1/shared/note/create",
+      urlUpdate: "/api/v1/shared/note/update",
+      urlDelete: "/api/v1/shared/note/delete",
+      urlGetAll: "/api/v1/shared/note/get-all",
+      loading: true,
+      initialLoadDone: false,
+    };
+  },
+  mounted() {
+    this.getAll();
+  },
+  watch: {
+    jobId() {
+      this.getAll();
+    },
+  },
+  computed: {
+    ...mapState("user", ["userLogged"]),
+  },
+  methods: {
+    ...mapActions("generic", ["postApi", "putApi", "getApi", "deleteAllApi"]),
+    ...mapMutations("generic", ["removeLoading"]),
+    getAll() {
+      if (!this.initialLoadDone) {
+        this.loading = true;
+      }
+      let params = {
+        url: this.urlGetAll,
+        obj: {
+          any: this.jobId,
+        },
+      };
+      this.getApi(params)
+        .then((response) => {
+          this.comments = response.content.data;
+        })
+        .finally(() => {
+          if (!this.initialLoadDone) {
+            this.loading = false;
+            this.initialLoadDone = true;
+          }
+        });
+    },
+    addNote() {
+      let params = {
+        url: this.urlCreate,
+        obj: {
+          comment: this.comment,
+          jobId: this.jobId,
+          userId: this.userLogged.user.id,
+        },
+        notNotifyToast: true,
+      };
+      this.postApi(params).then((response) => {
+        if (response.success) {
+          this.comment = "";
+          this.getAll();
+        }
+        this.removeLoading(["btnAdd"]);
+      });
+    },
+    updateNote() {
+      let params = {
+        url: this.urlUpdate,
+        obj: {
+          id: this.commentSelected.id,
+          comment: this.commentSelected.comment,
+        },
+        notNotifyToast: true,
+      };
+      this.putApi(params).then((response) => {
+        if (response.success) {
+          this.commentSelected = {};
+          this.getAll();
+        }
+      });
+    },
+    remove(item) {
+      let params = {
+        url: this.urlDelete,
+        selected: [item.id],
+      };
+      this.deleteAllApi(params).then((response) => {
+        if (response.success) {
+          this.getAll();
+        }
+      });
+    },
+    edit(comment) {
+      this.commentSelected = comment;
+    },
+  },
+};
+</script>
+<style scoped>
+.div-btn {
+  margin-top: 5px;
+}
+
+.div-photo {
+  padding-top: 20px;
+}
+
+.user-photo {
+  width: 30px;
+  height: 30px;
+  border-radius: 50px;
+  margin-bottom: 3px;
+}
+
+.div-comments {
+  margin-top: 20px;
+}
+
+.title-user {
+  margin-left: 14px;
+}
+
+.div-comment {
+  margin-right: 15px;
+  margin-bottom: 15px;
+  padding: 8px 10px 8px 10px;
+  font-size: 13px;
+  background-color: #f0f0f0;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+.div-btn {
+  margin-left: 10px;
+}
+
+.div-icon-save {
+  color: darkgreen;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.div-icon-cancel {
+  color: red;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.title-remove {
+  color: red;
+  cursor: pointer;
+}
+
+input {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border: 1px solid #e5e4e8;
+  border-radius: 20px;
+  outline: none;
+  font-size: 13px;
+  width: 100%;
+}
+
+.input-edit {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.div-btn-edit {
+  margin: 10px 7px 0px 0px;
+}
+</style>