@nixweb/nixloc-ui 1.16.0 → 1.17.0

package/src/components/modules/adm/notification/NotificationConfig.vue

@@ -1,827 +0,0 @@
-<template>
-  <div class="notification-config">
-    <div class="notification-config-header">
-      <div class="notification-config-title">
-        <i class="fa-solid fa-bell"></i>
-        <div class="notification-config-texts">
-          <span class="title">Notificações por Módulo</span>
-          <span class="subtitle">Configure como e quem será notificado em cada ação.</span>
-        </div>
-      </div>
-    </div>
-
-    <div
-      v-for="module in modules"
-      :key="module.key"
-      class="notification-module"
-    >
-
-      <div
-        class="notification-module-header"
-        @click="toggleModule(module.key)"
-      >
-        <div class="notification-module-title">
-          <span class="module-label">{{ module.label }}</span>
-          <span class="module-key">{{ module.key }}</span>
-        </div>
-        <button
-          type="button"
-          class="module-toggle-btn"
-        >
-          <i
-            class="fa-solid fa-chevron-down"
-            :class="{ 'module-toggle-icon-open': isModuleOpen(module.key) }"
-          ></i>
-        </button>
-      </div>
-
-      <div
-        v-if="isModuleOpen(module.key)"
-        class="notification-module-body"
-      >
-        <div
-          class="notification-module-description"
-          v-if="module.description"
-        >
-          {{ module.description }}
-        </div>
-
-        <div
-          v-if="module.actions && module.actions.length"
-          class="notification-list"
-        >
-          <div
-            v-for="action in module.actions"
-            :key="action.actionKey"
-            class="notification-row"
-          >
-
-            <div class="notification-row-left">
-              <div class="notification-row-title">
-                <span
-                  class="action-key"
-                  :class="getActionBadgeClass(action.actionKey)"
-                >
-                  <i :class="action.actionIcon"></i>
-                  {{ action.actionLabel }}
-                </span>
-              </div>
-
-              <div
-                class="notification-row-description"
-                v-if="action.description && action.__open"
-              >
-                {{ action.description }}
-              </div>
-            </div>
-
-            <div
-              class="notification-row-right"
-              v-if="action.__open"
-            >
-              <div class="notification-row-right-top">
-                <div
-                  v-for="channel in channelTypes"
-                  :key="channel.key"
-                  class="notification-channel"
-                >
-                  <button
-                    type="button"
-                    class="channel-main"
-                    :class="{ 'is-active': action.channels[channel.key].enabled }"
-                    @click="toggleChannel(module.key, action.actionKey, channel.key)"
-                  >
-                    <i :class="channel.icon"></i>
-                    <span class="channel-label">{{ channel.label }}</span>
-                  </button>
-                </div>
-              </div>
-
-              <div class="notification-row-right-bottom">
-                <div
-                  v-for="channel in channelTypes"
-                  :key="channel.key"
-                  class="channel-extra-block"
-                  v-if="action.channels[channel.key].enabled"
-                >
-                  <div
-                    v-if="isGroupChannel(channel.key)"
-                    class="channel-extra"
-                  >
-                    <div class="channel-extra-header">
-                      <span class="channel-extra-title">
-                        {{ channel.label }} – Grupos Notificados
-                      </span>
-                    </div>
-
-                    <div class="channel-groups-pills">
-                      <button
-                        type="button"
-                        class="group-pill group-pill-all"
-                        :class="{ 'is-selected': action.channels[channel.key].notifyAll }"
-                        @click="toggleNotifyAll(action, channel.key)"
-                      >
-                        <span class="group-pill-label">Todos</span>
-                      </button>
-
-                      <button
-                        v-for="group in groupsAvailable"
-                        :key="group.key"
-                        type="button"
-                        class="group-pill"
-                        :class="{
-                                                    'is-selected':
-                                                        !action.channels[channel.key].notifyAll &&
-                                                        action.channels[channel.key].groups.includes(group.key)
-                                                }"
-                        @click="toggleGroup(action, channel.key, group.key)"
-                      >
-                        <span class="group-pill-label">{{ group.label }}</span>
-                      </button>
-                    </div>
-
-                    <div>
-                      <EditorHtml
-                        title="Mensagem"
-                        field="observation"
-                        :required="false"
-                        v-model="action.template"
-                        :changed="onTextChanged"
-                      />
-                      <b-row>
-                        <b-col sm="6">
-                          <small
-                            class="title title-parameter"
-                            @click="openModal('parametersInfo')"
-                          >
-                            <i class="fa-solid fa-bracket-curly"></i>
-                            <i class="fa-solid fa-bracket-curly"></i>
-                            Parâmetros
-                            <i class="fa-solid fa-bracket-curly-right"></i>
-                            <i class="fa-solid fa-bracket-curly-right"></i>
-                          </small>
-                        </b-col>
-                        <b-col sm="6">
-                          <div class="text-right">
-                            <button
-                              class="notification-btn-save"
-                              @click="convertObj()"
-                            >
-                              <i class="fa-solid fa-floppy-disk"></i>
-                            </button>
-                          </div>
-                        </b-col>
-                      </b-row>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <button
-              type="button"
-              class="action-toggle-btn"
-              @click="toggleAction(module.key, action.actionKey, $event)"
-            >
-              <i
-                class="fa-solid fa-chevron-down"
-                :class="{ 'action-toggle-icon-open': action.__open }"
-              ></i>
-            </button>
-          </div>
-        </div>
-
-        <div
-          v-else
-          class="notification-empty"
-        >
-          <i class="fa-regular fa-bell-slash"></i>
-          <span>Nenhuma ação configurada para este módulo.</span>
-        </div>
-      </div>
-    </div>
-
-    <Modal
-      title="Parâmetros Disponíveis"
-      :width="900"
-      :height="750"
-      v-if="showModal('parametersInfo')"
-    >
-      <ParametersInfo :params="parametersInfoParams" />
-    </Modal>
-  </div>
-</template>
-
-<script>
-import Modal from "@nixweb/nixloc-ui/src/component/forms/Modal";
-import EditorHtml from "@nixweb/nixloc-ui/src/component/forms/EditorHtml";
-import ParametersInfo from "../../shared/ParametersInfo.vue";
-import locacaoParameters from "../../shared/parameters/locacaoParameters";
-import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
-
-export default {
-  name: "NotificationConfig",
-  components: {
-    Modal,
-    EditorHtml,
-    ParametersInfo,
-  },
-  data() {
-    return {
-      urlUpdate: "/api/v1/adm/company/update-notification",
-      urlGetById: "/api/v1/adm/company/get-by-id",
-      urlGetAllGroups: "/api/v1/adm/user/get-all-groups",
-      groupsAvailable: [],
-      channelTypes: [
-        { key: "email", label: "E-mail", icon: "fa-solid fa-envelope" },
-      ],
-      modules: [
-        {
-          key: "módulo locação",
-          label: "Locação",
-          description: "Eventos relacionados à locação.",
-          actions: [
-            {
-              actionKey: "aprovar-locacao",
-              actionIcon: "fa-solid fa-thumbs-up",
-              actionLabel: "Aprovar Locação",
-              description:
-                "O evento é disparado quando uma locação é aprovada.",
-              template: "",
-              channels: {
-                email: {
-                  enabled: true,
-                  notifyAll: false,
-                  groups: [],
-                },
-              },
-              __open: false,
-            },
-            {
-              actionKey: "reprovar-locacao",
-              actionIcon: "fa-solid fa-thumbs-down",
-              actionLabel: "Reprovar Locação",
-              description:
-                "O evento é disparado quando uma locação é reprovada.",
-              template: "",
-              channels: {
-                email: {
-                  enabled: false,
-                  notifyAll: false,
-                  groups: [],
-                },
-              },
-              __open: false,
-            },
-          ],
-        },
-      ],
-      expandedModules: {
-        "módulo locação": false,
-      },
-      parametersInfoParams: locacaoParameters,
-    };
-  },
-  mounted() {
-    this.getAllGroups();
-  },
-  computed: {
-    ...mapState("user", ["userLogged"]),
-    ...mapGetters("generic", ["showModal"]),
-  },
-  methods: {
-    ...mapMutations("generic", ["openModal", "removeLoading"]),
-    ...mapActions("generic", ["getApi", "putApi"]),
-    onTextChanged() {},
-    convertObj() {
-      const result = [];
-      this.modules.forEach((module) => {
-        module.actions.forEach((action) => {
-          const actionObj = {
-            actionKey: action.actionKey,
-            template: action.template,
-            channels: [],
-          };
-          Object.keys(action.channels).forEach((channelKey) => {
-            const channel = action.channels[channelKey];
-            if (!channel || !channel.enabled) return;
-            const groups = channel.notifyAll
-              ? ["all"]
-              : Array.isArray(channel.groups)
-              ? channel.groups
-              : [];
-            actionObj.channels.push({
-              type: channelKey,
-              groups,
-            });
-          });
-          if (actionObj.channels.length > 0) {
-            result.push(actionObj);
-          }
-        });
-      });
-      this.save(result);
-      return result;
-    },
-    save(obj) {
-      const params = { url: this.urlUpdate, obj: { any: JSON.stringify(obj) } };
-      this.putApi(params).then(() => {
-        this.removeLoading(["btnSave"]);
-      });
-    },
-    getById() {
-      const params = {
-        url: this.urlGetById,
-        obj: { id: this.userLogged.companyId },
-      };
-      this.getApi(params).then((response) => {
-        if (response.content.notification) {
-          const arr = JSON.parse(response.content.notification);
-          this.applyConfigFromApi(arr);
-        }
-      });
-    },
-    getAllGroups() {
-      const params = {
-        url: this.urlGetAllGroups,
-      };
-      this.getApi(params).then((response) => {
-        response.content.forEach((item) => {
-          const obj = { key: item, label: item };
-          this.groupsAvailable.push(obj);
-        });
-        this.getById();
-      });
-    },
-    applyConfigFromApi(config) {
-      if (!Array.isArray(config)) return;
-      config.forEach((cfgAction) => {
-        if (!cfgAction || !cfgAction.actionKey) return;
-        this.modules.forEach((module) => {
-          const action = module.actions.find(
-            (a) => a.actionKey === cfgAction.actionKey
-          );
-          if (!action) return;
-          if (typeof cfgAction.template === "string") {
-            this.$set(action, "template", cfgAction.template);
-          }
-          if (!Array.isArray(cfgAction.channels)) return;
-          cfgAction.channels.forEach((chCfg) => {
-            const channelKey = chCfg.type;
-            if (!channelKey) return;
-            if (!action.channels[channelKey]) {
-              this.$set(action.channels, channelKey, {
-                enabled: false,
-                notifyAll: false,
-                groups: [],
-              });
-            }
-            const channel = action.channels[channelKey];
-            channel.enabled = true;
-            const groups = Array.isArray(chCfg.groups) ? chCfg.groups : [];
-            if (groups.includes("all")) {
-              channel.notifyAll = true;
-              channel.groups = [];
-            } else {
-              channel.notifyAll = false;
-              channel.groups = groups.slice();
-            }
-          });
-          if (typeof action.__open === "undefined") {
-            this.$set(action, "__open", false);
-          }
-        });
-      });
-    },
-    isGroupChannel(channelKey) {
-      return channelKey === "email";
-    },
-    isWebhookChannel() {
-      return false;
-    },
-    toggleAction(moduleKey, actionKey, event) {
-      if (event && event.stopPropagation) {
-        event.stopPropagation();
-      }
-      const module = this.modules.find((m) => m.key === moduleKey);
-      if (!module) return;
-      const action = module.actions.find((a) => a.actionKey === actionKey);
-      if (!action) return;
-      const current = !!action.__open;
-      this.$set(action, "__open", !current);
-    },
-    toggleChannel(moduleKey, actionKey, channelKey) {
-      const module = this.modules.find((m) => m.key === moduleKey);
-      if (!module) return;
-      const action = module.actions.find((a) => a.actionKey === actionKey);
-      if (!action) return;
-      const channel = action.channels[channelKey];
-      if (!channel) return;
-      channel.enabled = !channel.enabled;
-    },
-    toggleNotifyAll(action, channelKey) {
-      const channel = action.channels[channelKey];
-      if (!channel) return;
-      channel.notifyAll = !channel.notifyAll;
-      if (channel.notifyAll) {
-        channel.groups = [];
-      }
-      this.convertObj();
-    },
-    toggleGroup(action, channelKey, groupKey) {
-      const channel = action.channels[channelKey];
-      if (!channel) return;
-      if (channel.notifyAll) {
-        channel.notifyAll = false;
-        channel.groups = [];
-      }
-      const groups = channel.groups;
-      const index = groups.indexOf(groupKey);
-      if (index === -1) {
-        groups.push(groupKey);
-      } else {
-        groups.splice(index, 1);
-      }
-      this.convertObj();
-    },
-    isModuleOpen(moduleKey) {
-      return !!this.expandedModules[moduleKey];
-    },
-    toggleModule(moduleKey) {
-      this.$set(
-        this.expandedModules,
-        moduleKey,
-        !this.expandedModules[moduleKey]
-      );
-    },
-    getActionBadgeClass(actionKey) {
-      if (!actionKey) return "";
-      const key = actionKey.toString().toLowerCase();
-      if (key.indexOf("aprovar") !== -1) {
-        return "action-key-approve";
-      }
-      if (
-        key.indexOf("reprovar") !== -1 ||
-        key.indexOf("recusar") !== -1 ||
-        key.indexOf("negar") !== -1
-      ) {
-        return "action-key-reject";
-      }
-      return "";
-    },
-  },
-};
-</script>
-
-<style scoped>
-.notification-config {
-  background: #ffffff;
-  border-radius: 16px;
-  border: 1px solid #e5e7eb;
-  padding: 20px 22px;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.notification-config-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.notification-config-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.notification-config-title > i {
-  font-size: 18px;
-  color: #2563eb;
-}
-
-.notification-config-texts .title {
-  display: block;
-  font-size: 17px;
-  font-weight: 500;
-  color: #111827;
-}
-
-.notification-config-texts .subtitle {
-  display: block;
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.notification-module {
-  border-radius: 14px;
-  border: 1px solid #e5e7eb;
-  background: #f9fafb;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.notification-module-header {
-  padding: 10px 14px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-}
-
-.notification-module-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.module-label {
-  font-size: 15px;
-  font-weight: 500;
-  color: #111827;
-}
-
-.module-key {
-  font-size: 13px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: #e5e7eb;
-  color: #4b5563;
-}
-
-.module-toggle-btn {
-  border: none;
-  background: transparent;
-  padding: 4px;
-  cursor: pointer;
-}
-
-.module-toggle-btn i {
-  font-size: 15px;
-  color: #6b7280;
-  transition: transform 0.15s ease;
-}
-
-.module-toggle-icon-open {
-  transform: rotate(180deg);
-}
-
-.notification-module-body {
-  padding: 10px 14px 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.notification-module-description {
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.notification-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.notification-row {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 18px;
-  padding: 12px 14px;
-  border-radius: 12px;
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-}
-
-.notification-row-left {
-  width: 400px;
-}
-
-.notification-row-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 2px;
-}
-
-.action-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: #111827;
-}
-
-.action-key {
-  font-size: 13px !important;
-  padding: 2px 7px;
-  border-radius: 999px;
-  background: #eff6ff;
-  color: #1d4ed8;
-  border: 1px solid transparent;
-}
-
-.action-key-approve {
-  background: #ecfdf3;
-  color: #166534;
-  border-color: #bbf7d0;
-}
-
-.action-key-reject {
-  background: #fef2f2;
-  color: #b91c1c;
-  border-color: #fecaca;
-}
-
-.notification-row-description {
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.notification-btn-save {
-  color: #fff;
-  background: #94aa2a;
-  border-color: #94aa2a;
-  border: 0;
-  width: 35px;
-  height: 35px;
-  border-radius: 50px;
-}
-
-.notification-btn-save:hover {
-  background: #6d7e1c;
-}
-
-.notification-row-right {
-  flex: 1.2;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.notification-row-right-top {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: flex-start;
-}
-
-.notification-channel {
-  display: inline-flex;
-}
-
-.channel-main {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border-radius: 999px;
-  border: 1px solid #d1d5db;
-  background: #f3f4f6;
-  padding: 4px 10px;
-  cursor: pointer;
-  font-size: 12px;
-  color: #374151;
-  transition: 0.15s ease;
-}
-
-.channel-main i {
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.channel-main.is-active {
-  background: #e0edff;
-  border-color: #2563eb;
-  color: #1d4ed8;
-}
-
-.channel-main.is-active i {
-  color: #2563eb;
-}
-
-.channel-label {
-  font-size: 12px;
-}
-
-.notification-row-right-bottom {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding-top: 6px;
-  border-top: 1px dashed #e5e7eb;
-}
-
-.channel-extra-block {
-  padding: 6px 8px;
-  border-radius: 10px;
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
-}
-
-.channel-extra {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.channel-extra-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.channel-extra-title {
-  font-size: 13px;
-  font-weight: 500;
-  color: #111827;
-}
-
-.channel-groups-pills {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.group-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  border-radius: 999px;
-  border: 1px solid #d1d5db;
-  background: #ffffff;
-  font-size: 12.5px;
-  color: #4b5563;
-  cursor: pointer;
-  transition: 0.15s ease;
-}
-
-.group-pill-all {
-  font-weight: 600;
-}
-
-.group-pill.is-selected {
-  background: #e0edff;
-  border-color: #2563eb;
-  color: #1d4ed8;
-}
-
-.group-pill-label {
-  white-space: nowrap;
-}
-
-.notification-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 0 4px;
-  color: #9ca3af;
-  font-size: 13px;
-}
-
-.notification-empty i {
-  font-size: 18px;
-}
-
-.title-parameter {
-  font-size: 12px;
-  cursor: pointer;
-  color: darkblue;
-}
-
-.action-toggle-btn {
-  border: none;
-  background: transparent;
-  padding: 4px;
-  cursor: pointer;
-  align-self: center;
-}
-
-.action-toggle-btn i {
-  font-size: 15px;
-  color: #6b7280;
-  transition: transform 0.15s ease;
-}
-
-.action-toggle-icon-open {
-  transform: rotate(180deg);
-}
-
-@media (max-width: 768px) {
-  .notification-row {
-    flex-direction: column;
-  }
-
-  .notification-row-right {
-    width: 100%;
-  }
-
-  .action-toggle-btn {
-    align-self: flex-end;
-    padding-top: 8px;
-  }
-}
-</style>