@nixweb/nixloc-ui 1.14.0 → 1.16.0

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

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