@nixweb/nixloc-ui 1.16.0 → 1.17.0

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

@@ -1,557 +0,0 @@
-<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

@@ -1,81 +0,0 @@
-<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

@@ -1,63 +0,0 @@
-<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>