@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/components/modules/adm/audit-log/TimelineLog.vue

@@ -0,0 +1,557 @@
+<template>
+  <div>
+    <Loading
+      type="line"
+      :center="false"
+      v-if="loading"
+    />
+    <div v-if="logs.length === 0 && !loading">Nenhum registro encontrado!</div>
+    <br>
+    <b-row>
+      <b-col sm="1">
+      </b-col>
+      <b-col
+        sm="10"
+        v-if="logs.length > 0"
+      >
+        <HorizontalFilter :showTotalPerPage="false">
+          <div
+            slot="content-filter-horizontal"
+            class="div-container-search"
+          >
+            <input
+              v-model="searchTerm"
+              placeholder="Pesquisar..."
+            />
+
+            <div class="div-checkbox">
+              <div>
+                <CheckboxSimple
+                  :markFormDirty="false"
+                  title="Agrupar por ação"
+                  v-model="groupByActionAndEntity"
+                />
+              </div>
+              <div class="side-by-side checkbox-simple">
+                <CheckboxSimple
+                  :markFormDirty="false"
+                  title="Adicionado"
+                  v-model="filters.create"
+                />
+              </div>
+              <div class="side-by-side checkbox-simple">
+                <CheckboxSimple
+                  :markFormDirty="false"
+                  title="Modificado"
+                  v-model="filters.update"
+                />
+              </div>
+              <div class="side-by-side">
+                <CheckboxSimple
+                  :markFormDirty="false"
+                  title="Removido"
+                  v-model="filters.delete"
+                />
+              </div>
+              <div class="div-btn-update">
+                <Button
+                  _key="btnSearch"
+                  title="Atualizar"
+                  classIcon="fa-solid fa-arrows-rotate"
+                  size="small"
+                  type="info"
+                  :clicked="getAll"
+                />
+              </div>
+            </div>
+          </div>
+        </HorizontalFilter>
+      </b-col>
+    </b-row>
+    <div class="div-space"></div>
+    <div v-if="logs.length > 0">
+      <div class="timeline-container">
+
+        <div class="div-total text-right">
+          Total de <b>{{ logs.length }}</b> registro(s)
+        </div>
+
+        <!-- Agrupado -->
+        <div v-if="groupByActionAndEntity">
+          <div
+            v-for="group in groupedLogs"
+            :key="group.groupKey"
+            class="group-block"
+          >
+            <h6>
+              <strong class="title">{{ getLabel(group.action) }}</strong>
+              <span
+                class="title"
+                v-if="group.title"
+              > • {{ group.title }}</span>
+              <span class="text-muted"> ({{ group.logs.length }} registros)</span>
+            </h6>
+
+            <div
+              v-for="log in group.logs"
+              :key="log.id"
+              class="timeline-item"
+            >
+              <div
+                class="timeline-icon"
+                :class="log.action.toLowerCase()"
+              >
+                <i :class="getIconClass(log.action)"></i>
+              </div>
+              <div class="timeline-content title">
+                <p :class="{ 'text-truncated': !expandedDescriptions[log.id] }">
+                  <span
+                    v-if="!isDownloadableFile(log.description)"
+                    v-html="log.description"
+                  ></span>
+                  <span
+                    class="title-link"
+                    v-else
+                    @click="download(log.description)"
+                  >
+                    Baixar
+                  </span>
+                </p>
+                <div>
+                  <span
+                    v-if="log.description.length > 200"
+                    @click="toggleDescription(log.id)"
+                    style="color: #007bff; cursor: pointer; font-size: 12px;"
+                  >
+                    {{ expandedDescriptions[log.id] ? 'Ver menos' : 'Ver mais' }}
+                  </span>
+                </div>
+                <div><small class="title">{{ formatDate(log.timestamp) }} • {{ log.user }}</small></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Sem agrupamento -->
+        <div v-else>
+          <div
+            v-for="log in filteredLogs"
+            :key="log.id"
+            class="timeline-item"
+          >
+            <div
+              class="timeline-icon"
+              :class="log.action.toLowerCase()"
+            >
+              <i :class="getIconClass(log.action)"></i>
+            </div>
+            <div class="timeline-content title">
+              <h4>
+                <span>{{ getLabel(log.action) }}</span>
+                <span v-if="log.title"> • {{ log.title }}</span>
+              </h4>
+              <p :class="{ 'text-truncated': !expandedDescriptions[log.id] }">
+                <span
+                  v-if="!isDownloadableFile(log.description)"
+                  v-html="log.description"
+                ></span>
+                <span
+                  class="title-link"
+                  v-else
+                  @click="download(log.description)"
+                >
+                  Baixar
+                </span>
+              </p>
+              <div>
+                <span
+                  v-if="log.description.length > 200"
+                  @click="toggleDescription(log.id)"
+                  style="color: #007bff; cursor: pointer; font-size: 12px;"
+                >
+                  {{ expandedDescriptions[log.id] ? 'Ver menos' : 'Ver mais' }}
+                </span>
+              </div>
+              <div><small class="title">{{ formatDate(log.timestamp) }} • {{ log.user }}</small></div>
+            </div>
+          </div>
+        </div>
+        <Alert
+          v-if="logs.length >= 1000"
+          type="warning"
+        >
+          <span>
+            Limite de exibição de <b>1000</b> registros. Para visualizar tudo, fale com o suporte.
+          </span>
+        </Alert>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
+import CheckboxSimple from "@nixweb/nixloc-ui/src/component/forms/CheckboxSimple";
+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 Molded from "@nixweb/nixloc-ui/src/component/layout/Molded";
+import HorizontalFilter from "@nixweb/nixloc-ui/src/component/shared/HorizontalFilter.vue";
+
+import { mapActions, mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "TimelineLog",
+  props: ["id"],
+  components: {
+    Alert,
+    CheckboxSimple,
+    Button,
+    ScrollBar,
+    Loading,
+    HorizontalFilter,
+    Molded,
+  },
+  data() {
+    return {
+      urlGetApi: "/api/v1/audit-log/get-all",
+      logs: [],
+      loading: false,
+      searchTerm: "",
+      groupByActionAndEntity: false,
+      filters: {
+        create: true,
+        update: true,
+        delete: true,
+      },
+      expandedDescriptions: {},
+    };
+  },
+  computed: {
+    ...mapGetters("generic", ["event"]),
+    filteredLogs() {
+      return this.logs.filter((log) => {
+        const term = this.searchTerm.toLowerCase();
+        const action = log.action.toLowerCase();
+        const matchesText =
+          !term ||
+          log.description?.toLowerCase().includes(term) ||
+          log.entity?.toLowerCase().includes(term);
+        const matchesAction =
+          (this.filters.create && action === "create") ||
+          (this.filters.update && action === "update") ||
+          (this.filters.delete && action === "delete");
+        return matchesText && matchesAction;
+      });
+    },
+    groupedLogs() {
+      if (!this.groupByActionAndEntity) return this.filteredLogs;
+      const groups = {};
+      this.filteredLogs.forEach((log) => {
+        const key = `${log.action}::${log.title}`;
+        if (!groups[key]) {
+          groups[key] = {
+            groupKey: key,
+            action: log.action,
+            title: log.title,
+            logs: [],
+          };
+        }
+        groups[key].logs.push(log);
+      });
+      return Object.values(groups);
+    },
+  },
+  mounted() {
+    this.getAll();
+  },
+  methods: {
+    ...mapActions("generic", ["getApi"]),
+    ...mapMutations("generic", ["removeLoading"]),
+    getAll() {
+      this.loading = true;
+      let params = { url: this.urlGetApi, obj: { id: this.id } };
+      this.getApi(params).then((response) => {
+        this.logs = response.content;
+        this.loading = false;
+        this.removeLoading(["btnSearch"]);
+      });
+    },
+    toggleDescription(id) {
+      this.$set(this.expandedDescriptions, id, !this.expandedDescriptions[id]);
+    },
+    getIconClass(action) {
+      switch (action) {
+        case "Create":
+          return "fas fa-plus";
+        case "Update":
+          return "fas fa-pen";
+        case "Delete":
+          return "fas fa-trash";
+        default:
+          return "fas fa-info-circle";
+      }
+    },
+    formatDate(date) {
+      return new Date(date).toLocaleString("pt-BR");
+    },
+    getLabel(action) {
+      return action === "Create"
+        ? "Adicionado"
+        : action === "Update"
+        ? "Modificado"
+        : action === "Delete"
+        ? "Removido"
+        : action;
+    },
+    isDownloadableFile(description) {
+      if (!description) return false;
+      const lowerDesc = description.toLowerCase();
+      const allowedExtensions = [
+        ".txt",
+        ".pdf",
+        ".doc",
+        ".docx",
+        ".odt",
+        ".rtf",
+        ".tex",
+        ".md",
+        ".xls",
+        ".xlsx",
+        ".ods",
+        ".csv",
+        ".tsv",
+        ".ppt",
+        ".pptx",
+        ".odp",
+        ".key",
+        ".png",
+        ".jpg",
+        ".jpeg",
+        ".gif",
+        ".bmp",
+        ".tiff",
+        ".tif",
+        ".svg",
+        ".webp",
+        ".heic",
+        ".zip",
+        ".rar",
+        ".7z",
+        ".tar",
+        ".gz",
+        ".bz2",
+        ".xz",
+        ".iso",
+        ".xml",
+        ".json",
+        ".html",
+        ".htm",
+        ".xhtml",
+        ".log",
+        ".yaml",
+        ".yml",
+        ".mp3",
+        ".wav",
+        ".aac",
+        ".ogg",
+        ".flac",
+        ".m4a",
+        ".wma",
+        ".mp4",
+        ".avi",
+        ".mov",
+        ".mkv",
+        ".wmv",
+        ".flv",
+        ".webm",
+        ".mpeg",
+        ".mpg",
+        ".3gp",
+        ".psd",
+        ".ai",
+        ".eps",
+        ".indd",
+        ".xd",
+        ".sketch",
+        ".figma",
+        ".blend",
+        ".exe",
+        ".msi",
+        ".bat",
+        ".sh",
+        ".cmd",
+        ".apk",
+        ".jar",
+        ".ret",
+      ];
+
+      return allowedExtensions.some((ext) => lowerDesc.endsWith(ext));
+    },
+
+    isTxtFile(description) {
+      return description?.toLowerCase().endsWith(".txt");
+    },
+
+    download(fileName) {
+      if (!fileName) return;
+
+      let url;
+      if (this.isTxtFile(fileName)) {
+        url = `https://espaco.blob.core.windows.net/nixloc-document-version/${fileName}`;
+      } else {
+        url = `https://espaco.blob.core.windows.net/nixloc-attachments/${fileName}`;
+      }
+
+      const downloadLink = document.createElement("a");
+      downloadLink.href = url;
+      downloadLink.target = "_blank";
+      downloadLink.download = fileName;
+      downloadLink.click();
+    },
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "auditLogGetAll") this.getAll();
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+input {
+  padding: 4px 10px;
+  border: 1px solid #e5e4e8;
+  border-radius: 20px;
+  outline: none;
+  font-size: 13px;
+  width: 400px;
+}
+
+.div-container-search {
+  padding-left: 25px;
+  padding-right: 25px;
+  padding-bottom: 25px;
+  max-width: 900px;
+  margin: auto;
+}
+
+.checkbox-simple {
+  margin-right: 10px;
+}
+
+.timeline-container {
+  max-width: 900px;
+  margin: auto;
+  padding: 20px;
+}
+
+.timeline-item {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  margin-bottom: 20px;
+  padding-left: 32px;
+}
+
+.timeline-item::before {
+  content: "";
+  position: absolute;
+  left: 12px;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  background-color: #ccc;
+}
+
+.timeline-icon {
+  position: absolute;
+  left: -4px;
+  top: -6px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  padding-top: 4px;
+  padding-left: 9px;
+  font-size: 12px;
+  color: #fff;
+}
+
+.timeline-icon.create {
+  background-color: #94aa2a;
+}
+
+.timeline-icon.update {
+  background-color: #939394;
+}
+
+.timeline-icon.delete {
+  background-color: #f0134d;
+}
+
+.timeline-content {
+  background: #f9f9f9;
+  border: 1px solid #eee;
+  padding: 10px 14px;
+  border-radius: 6px;
+  width: 100%;
+}
+
+.timeline-content h4 {
+  margin: 0 0 4px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.timeline-content p {
+  margin: 0 0 4px;
+  font-size: 13px;
+}
+
+.timeline-content small {
+  color: #888;
+  font-size: 11px;
+}
+
+.text-truncated {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.group-block {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+.div-checkbox {
+  margin-top: 20px;
+}
+
+.div-space {
+  margin-bottom: -20px;
+}
+
+.div-btn-update {
+  margin-top: 10px;
+  margin-left: -5px;
+}
+
+.title-link {
+  color: #007bff;
+  cursor: pointer;
+}
+
+.title-link:hover {
+  text-decoration: underline;
+}
+
+.div-total {
+  margin-bottom: 10px;
+}
+</style>

package/src/components/modules/adm/authorization/Authorization.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="authz-wrap">
+        <section class="af-panel">
+            <header class="af-header">
+                <span class="af-title title">Lista de Autorização</span>
+            </header>
+            <div class="af-body">
+                <div v-show="userLogged.user.userName == 'UserTemp'">
+                    <div>
+                        <Button _key="btnCreate" title="Solicitar Autorização" classIcon="fas fa-plus-circle"
+                            type="primary" size="small" :clicked="create" />
+                    </div>
+                    <br />
+                </div>
+                <AuthorizationTable />
+            </div>
+        </section>
+        <Modal title="Solicitar Autorização" :width="550" :height="750" v-if="showModal('authorization')">
+            <AuthorizationCreate />
+        </Modal>
+    </div>
+</template>
+
+<script>
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
+
+import AuthorizationCreate from './AuthorizationCreate.vue'
+import AuthorizationTable from './AuthorizationTable.vue'
+
+import { mapState, mapGetters, mapMutations } from "vuex";
+
+export default {
+    name: 'Authorization',
+    components: { Button, Modal, AuthorizationCreate, AuthorizationTable },
+    computed: {
+        ...mapState("user", ["userLogged"]),
+        ...mapGetters("generic", ["showModal"]),
+    },
+    methods: {
+        ...mapMutations("generic", ["openModal", "removeLoading"]),
+        create() {
+            this.openModal("authorization");
+            this.removeLoading(["btnCreate"]);
+        }
+    }
+}
+</script>
+
+<style scoped>
+.authz-wrap {
+    --af-border: #e6e7eb;
+    --af-muted: #6b7280;
+    --af-primary: #0f172a;
+    --af-accent: #577696;
+    --af-pad: 12px;
+    --af-radius: 14px;
+}
+
+.af-panel {
+    background: #fff;
+    border: 1px solid var(--af-border);
+    border-radius: var(--af-radius);
+    overflow: hidden;
+}
+
+.af-header {
+    padding: var(--af-pad);
+    border-bottom: 1px solid var(--af-border);
+}
+
+.af-title {
+    font-size: 14px;
+    color: var(--af-primary);
+    font-weight: 600;
+}
+
+.af-body {
+    padding: var(--af-pad);
+}
+</style>

package/src/components/modules/adm/authorization/AuthorizationCreate.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <TextArea title="Descrição" field="description" :required="true" :maxLength="2000" v-model="description" />
+        <Select title="Solicitado por" :showNewRegister="false" field="user" :url="urlUser" v-model="selectUser" />
+        <div class="div-btn-save text-right">
+            <Button _key="saveAuthorization" type="success" title="Salvar"
+                :disabled="description == '' || selectUser.content == ''" classIcon="fas fa-save" size="medium"
+                :clicked="save" />
+        </div>
+    </div>
+</template>
+
+<script>
+
+import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
+import InputText from "@nixweb/nixloc-ui/src/component/forms/InputText";
+import Select from "@nixweb/nixloc-ui/src/component/forms/Select";
+import TextArea from "@nixweb/nixloc-ui/src/component/forms/TextArea";
+
+import { mapActions, mapMutations } from "vuex";
+
+export default {
+    name: 'AuthorizationCreate',
+    components: {
+        Button, InputText, Select, TextArea
+    },
+    data() {
+        return {
+            urlUser: "/api/v1/adm/user/select-all",
+            urlCreate: "/api/v1/adm/authorization/create",
+            description: '',
+            createdBy: '',
+            selectUser: {},
+        }
+    },
+    methods: {
+        ...mapActions("generic", ["postApi"]),
+        ...mapMutations("generic", ["addEvent", "hideModal", "removeLoading"]),
+        save() {
+            if (!this.description) return
+            const obj = {
+                description: this.description,
+                createdBy: this.selectUser.content
+            }
+            let params = { url: this.urlCreate, obj: obj };
+            this.postApi(params).then((response) => {
+                if (response.success) {
+                    this.description = ''
+                    this.createdBy = ''
+                }
+                this.hideModal();
+                this.removeLoading(["saveAuthorization"]);
+                this.addEvent({ name: "getAllAuthorization" });
+            });
+        }
+    }
+}
+</script>
+<style scoped>
+.div-btn-save {
+    margin-top: 20px;
+}
+</style>