argous 1.2.198 → 1.2.200
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/UserCard/UserCard.d.ts +15 -0
- package/dist/components/UserCard/UserCard.js +183 -0
- package/dist/components/UserCard/index.d.ts +2 -0
- package/dist/components/UserCard/index.js +8 -0
- package/dist/components/index.d.ts +4 -1
- package/dist/components/index.js +3 -1
- package/dist/utils/index.d.ts +2 -1
- package/dist/utils/index.js +16 -2
- package/lib/components/UserCard/UserCard.d.ts +15 -0
- package/lib/components/UserCard/UserCard.js +137 -0
- package/lib/components/UserCard/index.d.ts +2 -0
- package/lib/components/UserCard/index.js +1 -0
- package/lib/components/index.d.ts +4 -1
- package/lib/components/index.js +3 -1
- package/lib/utils/index.ts +16 -2
- package/package.json +1 -1
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface UserCardProps {
|
|
2
|
+
/**
|
|
3
|
+
* Element to be used as an anchor
|
|
4
|
+
*/
|
|
5
|
+
anchor: (object|null),
|
|
6
|
+
/**
|
|
7
|
+
* User id
|
|
8
|
+
*/
|
|
9
|
+
userId: (number|undefined)
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
declare function UserCard(props: UserCardProps): JSX.Element
|
|
14
|
+
|
|
15
|
+
export default UserCard;
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
16
|
+
}) : (function(o, m, k, k2) {
|
|
17
|
+
if (k2 === undefined) k2 = k;
|
|
18
|
+
o[k2] = m[k];
|
|
19
|
+
}));
|
|
20
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
21
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
22
|
+
}) : function(o, v) {
|
|
23
|
+
o["default"] = v;
|
|
24
|
+
});
|
|
25
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
26
|
+
if (mod && mod.__esModule) return mod;
|
|
27
|
+
var result = {};
|
|
28
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
29
|
+
__setModuleDefault(result, mod);
|
|
30
|
+
return result;
|
|
31
|
+
};
|
|
32
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
33
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
34
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
35
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
36
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
37
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
38
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
42
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
43
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
44
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
45
|
+
function step(op) {
|
|
46
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
47
|
+
while (_) try {
|
|
48
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
49
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
50
|
+
switch (op[0]) {
|
|
51
|
+
case 0: case 1: t = op; break;
|
|
52
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
53
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
54
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
55
|
+
default:
|
|
56
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
57
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
58
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
59
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
60
|
+
if (t[2]) _.ops.pop();
|
|
61
|
+
_.trys.pop(); continue;
|
|
62
|
+
}
|
|
63
|
+
op = body.call(thisArg, _);
|
|
64
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
65
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
69
|
+
var __1 = require("../");
|
|
70
|
+
var fieldsRedux_1 = require("../../fieldsRedux");
|
|
71
|
+
var utils_1 = require("../../utils");
|
|
72
|
+
var api_1 = require("../../utils/api");
|
|
73
|
+
var core_1 = require("@material-ui/core");
|
|
74
|
+
var react_1 = __importStar(require("react"));
|
|
75
|
+
var io_1 = require("react-icons/io");
|
|
76
|
+
var md_1 = require("react-icons/md");
|
|
77
|
+
var initialState = {
|
|
78
|
+
local: {
|
|
79
|
+
anchor: null,
|
|
80
|
+
userId: null
|
|
81
|
+
},
|
|
82
|
+
data: {},
|
|
83
|
+
show: false
|
|
84
|
+
};
|
|
85
|
+
function UserCard(_a) {
|
|
86
|
+
var _this = this;
|
|
87
|
+
var anchor = _a.anchor, userId = _a.userId;
|
|
88
|
+
var time = react_1.useRef();
|
|
89
|
+
var clear = react_1.useRef(true);
|
|
90
|
+
var allowShow = react_1.useRef(false);
|
|
91
|
+
var loggedUserId = utils_1.useStore().usuarioLogado.idUsuario;
|
|
92
|
+
var _b = react_1.useState(__assign(__assign({}, initialState), { local: {
|
|
93
|
+
anchor: (anchor || null),
|
|
94
|
+
userId: (userId || null)
|
|
95
|
+
} })), state = _b[0], setState = _b[1];
|
|
96
|
+
var local = state.local, show = state.show, data = state.data;
|
|
97
|
+
var logicSetState = function (_a) {
|
|
98
|
+
var type = _a.type, field = _a.field, value = _a.value;
|
|
99
|
+
return setState(function (states) {
|
|
100
|
+
var _a, _b;
|
|
101
|
+
return (__assign(__assign({}, states), (_a = {}, _a[type] = type && field ? __assign(__assign({}, states[type]), (_b = {}, _b[field] = value, _b)) : value, _a)));
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
react_1.useEffect(function () {
|
|
105
|
+
if (anchor && userId) {
|
|
106
|
+
logicSetState({ type: 'local', value: { anchor: anchor, userId: userId } });
|
|
107
|
+
allowShow.current = true;
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
clearTimeout(time.current);
|
|
111
|
+
allowShow.current = false;
|
|
112
|
+
setTimeout(function () {
|
|
113
|
+
if (!clear.current)
|
|
114
|
+
return;
|
|
115
|
+
setState(initialState);
|
|
116
|
+
}, 200);
|
|
117
|
+
}
|
|
118
|
+
}, [anchor, userId, show]);
|
|
119
|
+
var search = react_1.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
120
|
+
var response;
|
|
121
|
+
return __generator(this, function (_a) {
|
|
122
|
+
switch (_a.label) {
|
|
123
|
+
case 0:
|
|
124
|
+
if (!local.anchor || !local.userId) {
|
|
125
|
+
logicSetState({ type: 'show', value: false });
|
|
126
|
+
clearTimeout(time.current);
|
|
127
|
+
return [2 /*return*/];
|
|
128
|
+
}
|
|
129
|
+
return [4 /*yield*/, api_1.serverAction('getInfoUsuario', { idUsuario: local.userId }, 'Argous.MntUsuarios', true)];
|
|
130
|
+
case 1:
|
|
131
|
+
response = _a.sent();
|
|
132
|
+
time.current = setTimeout(function () {
|
|
133
|
+
if (allowShow.current) {
|
|
134
|
+
setState(function (states) { return (__assign(__assign({}, states), { data: response, show: true })); });
|
|
135
|
+
}
|
|
136
|
+
}, 500);
|
|
137
|
+
return [2 /*return*/];
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
}); }, [local]);
|
|
141
|
+
react_1.useEffect(function () { return void (search()); }, [search]);
|
|
142
|
+
var returnUser = function () {
|
|
143
|
+
return { idUsuario: userId, titulo: data.dsNomeUsuario, subTitulo: data.dsFuncaoUsuario, msgsNaoLidas: 0, online: false };
|
|
144
|
+
};
|
|
145
|
+
function mouseLeave() {
|
|
146
|
+
setState(initialState);
|
|
147
|
+
clearTimeout(time.current);
|
|
148
|
+
clear.current = true;
|
|
149
|
+
}
|
|
150
|
+
function mouseEnter() {
|
|
151
|
+
clearTimeout(clear.current);
|
|
152
|
+
clear.current = false;
|
|
153
|
+
}
|
|
154
|
+
if (local.userId && show)
|
|
155
|
+
return (react_1.default.createElement(core_1.Portal, null,
|
|
156
|
+
react_1.default.createElement(core_1.Popper, { open: ((!!anchor || !!local.anchor) && !!data.dsNomeUsuario), anchorEl: anchor || local.anchor, onClick: function (e) { return e.stopPropagation(); }, onMouseLeave: mouseLeave, onMouseEnter: mouseEnter, style: { zIndex: 1300 } },
|
|
157
|
+
react_1.default.createElement(core_1.Card, { variant: 'outlined', style: { padding: '10px', maxWidth: '350px' } },
|
|
158
|
+
react_1.default.createElement(core_1.Grid, { container: true, spacing: 1 },
|
|
159
|
+
react_1.default.createElement(core_1.Grid, { item: true, xs: 'auto' },
|
|
160
|
+
react_1.default.createElement(__1.ArgousAvatar, { style: { width: '50px', height: '50px', margin: '10px' }, nome: data.dsNomeUsuario, idUsuario: userId || local.userId })),
|
|
161
|
+
react_1.default.createElement(core_1.Grid, { item: true, xs: 'auto' },
|
|
162
|
+
react_1.default.createElement(core_1.Typography, { variant: 'h6', style: { overflow: 'hidden', width: '250px', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, data.dsNomeUsuario),
|
|
163
|
+
react_1.default.createElement(core_1.Typography, { variant: 'body2', style: { width: '250px' } }, data.dsFuncaoUsuario),
|
|
164
|
+
react_1.default.createElement(core_1.Typography, { variant: 'caption', style: { width: '250px' } }, data.dsSetor)),
|
|
165
|
+
(data.dtExclusaoUsuario) ? react_1.default.createElement(core_1.Typography, { variant: 'h6' },
|
|
166
|
+
"Usu\u00E1rio excluido em ",
|
|
167
|
+
data.dtExclusaoUsuario) : (((userId && (loggedUserId !== userId)) || (local.userId && (loggedUserId !== local.userId))) && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
168
|
+
(data.nrRamalUsuario) && (react_1.default.createElement(core_1.Grid, { item: true, xs: true },
|
|
169
|
+
react_1.default.createElement(core_1.Button, { fullWidth: true, variant: 'contained', href: "tel: " + data.nrRamalUsuario, title: "Ramal: " + data.nrRamalUsuario },
|
|
170
|
+
react_1.default.createElement(io_1.IoIosCall, null),
|
|
171
|
+
"\u00A0",
|
|
172
|
+
data.nrRamalUsuario))),
|
|
173
|
+
react_1.default.createElement(core_1.Grid, { item: true, xs: true },
|
|
174
|
+
react_1.default.createElement(core_1.Button, { fullWidth: true, variant: 'contained', href: "mailto: " + data.dsEmailUsuario, title: data.dsEmailUsuario },
|
|
175
|
+
react_1.default.createElement(md_1.MdMail, null),
|
|
176
|
+
"\u00A0Email")),
|
|
177
|
+
react_1.default.createElement(core_1.Grid, { item: true, xs: true },
|
|
178
|
+
react_1.default.createElement(core_1.Button, { fullWidth: true, variant: 'contained', onClick: function () { return fieldsRedux_1.setAnotherProgramField('janelaChatOpen', returnUser(), 'argousSystem'); }, title: 'Abrir chat de conversa' },
|
|
179
|
+
react_1.default.createElement(md_1.MdMessage, null),
|
|
180
|
+
"\u00A0Mensagem"))))))))));
|
|
181
|
+
return null;
|
|
182
|
+
}
|
|
183
|
+
exports.default = UserCard;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var UserCard_1 = require("./UserCard");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(UserCard_1).default; } });
|
|
@@ -154,4 +154,7 @@ export { default as PercentageDisplay } from './PercentageDisplay';
|
|
|
154
154
|
export * from './PercentageDisplay';
|
|
155
155
|
|
|
156
156
|
export { default as HalfGauge } from './HalfGauge';
|
|
157
|
-
export * from './HalfGauge';
|
|
157
|
+
export * from './HalfGauge';
|
|
158
|
+
|
|
159
|
+
export { default as UserCard } from './UserCard';
|
|
160
|
+
export * from './UserCard';
|
package/dist/components/index.js
CHANGED
|
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
};
|
|
15
15
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
16
16
|
exports.AutoCompleteFavorites = exports.UtilAutoComplete = exports.ThreadLog = exports.TextArea = exports.Tabs = exports.TablePicker = exports.Stepper = exports.SimpleTable = exports.Select = exports.ProgressBar = exports.Programa = exports.Pagination = exports.OutputText = exports.OtpInput = exports.MultipleSelect = exports.MonthPicker = exports.ModalProvider = exports.MenuBar = exports.MaterialButton = exports.ListSelect = exports.InputTags = exports.Input = exports.ImageResizeButton = exports.ImageResize = exports.Highlight = exports.FormVisualizer = exports.FileUploader = exports.FilePreparer = exports.DropArea = exports.Compartilhar = exports.Collapse = exports.CartaoUsuario = exports.Calendar = exports.Cabecalho = exports.Button = exports.BarraFerramentas = exports.BarChart = exports.AutoComplete = exports.ArgousSimpleTable = exports.ArgousProgressBar = exports.ArgousPagination = exports.ArgousInput = exports.ArgousComplexTableToolbar = exports.ArgousComplexTableHead = exports.ArgousComplexTableBody = exports.ArgousComplexTable = exports.ArgousComplexPagination = exports.ArgousAvatar = exports.ArgousAction = exports.Alert = void 0;
|
|
17
|
-
exports.HalfGauge = exports.PercentageDisplay = void 0;
|
|
17
|
+
exports.UserCard = exports.HalfGauge = exports.PercentageDisplay = void 0;
|
|
18
18
|
var Alert_1 = require("./Alert");
|
|
19
19
|
Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
|
|
20
20
|
__exportStar(require("./Alert"), exports);
|
|
@@ -170,3 +170,5 @@ __exportStar(require("./PercentageDisplay"), exports);
|
|
|
170
170
|
var HalfGauge_1 = require("./HalfGauge");
|
|
171
171
|
Object.defineProperty(exports, "HalfGauge", { enumerable: true, get: function () { return __importDefault(HalfGauge_1).default; } });
|
|
172
172
|
__exportStar(require("./HalfGauge"), exports);
|
|
173
|
+
var UserCard_1 = require("./UserCard");
|
|
174
|
+
Object.defineProperty(exports, "UserCard", { enumerable: true, get: function () { return __importDefault(UserCard_1).default; } });
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -58,7 +58,7 @@ export declare const formataTelefone: (value: string) => string;
|
|
|
58
58
|
export declare const useWebSocket: () => {};
|
|
59
59
|
export declare const formataCpf: (value: string) => string;
|
|
60
60
|
export declare const numbersOnly: (value: string, type: string) => string;
|
|
61
|
-
export declare const currencyMask: (value: string | number) => string
|
|
61
|
+
export declare const currencyMask: (value: string | number) => string;
|
|
62
62
|
export declare const toFloat: (value: string) => number | undefined;
|
|
63
63
|
export declare const copyToClipboard: (text: string) => void;
|
|
64
64
|
export declare const confirm: (props: BasicModalProps | string) => Promise<boolean>;
|
|
@@ -73,3 +73,4 @@ export declare const storageMeasures: {
|
|
|
73
73
|
};
|
|
74
74
|
export declare const bytesTranslator: (bytes?: number, decimals?: number, binary?: boolean) => object;
|
|
75
75
|
export declare const formatCpfCnpj: (value: string | number) => string;
|
|
76
|
+
export declare function dataUrlToBlob(dataUrl: string): Blob | undefined;
|
package/dist/utils/index.js
CHANGED
|
@@ -82,7 +82,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
|
|
|
82
82
|
return to;
|
|
83
83
|
};
|
|
84
84
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
85
|
-
exports.formatCpfCnpj = exports.bytesTranslator = exports.storageMeasures = exports.confirm = exports.copyToClipboard = exports.toFloat = exports.currencyMask = exports.numbersOnly = exports.formataCpf = exports.useWebSocket = exports.formataTelefone = exports.reduxDispatch = exports.useStore = exports.useModal = exports.useGraph = exports.randomColor = exports.humanFileSize = exports.sanitizaHTML = exports.formataDinheiro = exports.useUpdateEffect = exports.usePrevious = exports.getNumeroFromInitials = exports.getInitials = exports.getRandomColor = exports.printPdf = exports.downloadFromUrl = exports.downloadBase64 = exports.formataNome = exports.addExtraZero = exports.getCookie = exports.widthToCenterVertically = void 0;
|
|
85
|
+
exports.dataUrlToBlob = exports.formatCpfCnpj = exports.bytesTranslator = exports.storageMeasures = exports.confirm = exports.copyToClipboard = exports.toFloat = exports.currencyMask = exports.numbersOnly = exports.formataCpf = exports.useWebSocket = exports.formataTelefone = exports.reduxDispatch = exports.useStore = exports.useModal = exports.useGraph = exports.randomColor = exports.humanFileSize = exports.sanitizaHTML = exports.formataDinheiro = exports.useUpdateEffect = exports.usePrevious = exports.getNumeroFromInitials = exports.getInitials = exports.getRandomColor = exports.printPdf = exports.downloadFromUrl = exports.downloadBase64 = exports.formataNome = exports.addExtraZero = exports.getCookie = exports.widthToCenterVertically = void 0;
|
|
86
86
|
var store_1 = require("./store");
|
|
87
87
|
var api_1 = require("../api");
|
|
88
88
|
var ModalProvider_1 = require("../components/ConfirmModal/ModalProvider");
|
|
@@ -356,7 +356,7 @@ var currencyMask = function (value) {
|
|
|
356
356
|
if (value === 0)
|
|
357
357
|
return value.toString() + ",00";
|
|
358
358
|
if (!value)
|
|
359
|
-
return;
|
|
359
|
+
return '';
|
|
360
360
|
if (lodash_1.isNumber(value))
|
|
361
361
|
value = value.toFixed(2);
|
|
362
362
|
value = value.toString();
|
|
@@ -437,3 +437,17 @@ var formatCpfCnpj = function (value) {
|
|
|
437
437
|
return value;
|
|
438
438
|
};
|
|
439
439
|
exports.formatCpfCnpj = formatCpfCnpj;
|
|
440
|
+
function dataUrlToBlob(dataUrl) {
|
|
441
|
+
if (!dataUrl)
|
|
442
|
+
return;
|
|
443
|
+
var byteString = atob(dataUrl.split(',')[1]);
|
|
444
|
+
var mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
|
|
445
|
+
var arrayBuffer = new ArrayBuffer(byteString.length);
|
|
446
|
+
var intArray = new Uint8Array(arrayBuffer);
|
|
447
|
+
for (var i = 0; i < byteString.length; i++) {
|
|
448
|
+
intArray[i] = byteString.charCodeAt(i);
|
|
449
|
+
}
|
|
450
|
+
var blob = new Blob([arrayBuffer], { type: mimeString });
|
|
451
|
+
return blob;
|
|
452
|
+
}
|
|
453
|
+
exports.dataUrlToBlob = dataUrlToBlob;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface UserCardProps {
|
|
2
|
+
/**
|
|
3
|
+
* Element to be used as an anchor
|
|
4
|
+
*/
|
|
5
|
+
anchor: (object|null),
|
|
6
|
+
/**
|
|
7
|
+
* User id
|
|
8
|
+
*/
|
|
9
|
+
userId: (number|undefined)
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
declare function UserCard(props: UserCardProps): JSX.Element
|
|
14
|
+
|
|
15
|
+
export default UserCard;
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { ArgousAvatar } from '../';
|
|
2
|
+
import { setAnotherProgramField } from '../../fieldsRedux';
|
|
3
|
+
import { useStore } from '../../utils';
|
|
4
|
+
import { serverAction } from '../../utils/api';
|
|
5
|
+
import { Card, Typography, Grid, Button, Portal, Popper } from '@material-ui/core';
|
|
6
|
+
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
7
|
+
import { IoIosCall } from 'react-icons/io';
|
|
8
|
+
import { MdMail, MdMessage } from 'react-icons/md';
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
const initialState = {
|
|
12
|
+
local: {
|
|
13
|
+
anchor: null,
|
|
14
|
+
userId: null
|
|
15
|
+
},
|
|
16
|
+
data: {},
|
|
17
|
+
show: false
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
function UserCard({ anchor, userId }) {
|
|
22
|
+
|
|
23
|
+
const time = useRef();
|
|
24
|
+
const clear = useRef(true);
|
|
25
|
+
const allowShow = useRef(false);
|
|
26
|
+
const { usuarioLogado: { idUsuario: loggedUserId } } = useStore();
|
|
27
|
+
|
|
28
|
+
const [state, setState] = useState({
|
|
29
|
+
...initialState,
|
|
30
|
+
local: {
|
|
31
|
+
anchor: (anchor || null),
|
|
32
|
+
userId: (userId || null)
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
const { local, show, data } = state;
|
|
36
|
+
|
|
37
|
+
const logicSetState = ({ type, field, value }) => setState(states => ({
|
|
38
|
+
...states,
|
|
39
|
+
[type]: type && field ? { ...states[type], [field]: value } : value
|
|
40
|
+
}));
|
|
41
|
+
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
if (anchor && userId) {
|
|
44
|
+
logicSetState({ type: 'local', value: { anchor, userId } });
|
|
45
|
+
allowShow.current = true;
|
|
46
|
+
} else {
|
|
47
|
+
clearTimeout(time.current);
|
|
48
|
+
allowShow.current = false;
|
|
49
|
+
setTimeout(() => {
|
|
50
|
+
if (!clear.current) return;
|
|
51
|
+
setState(initialState);
|
|
52
|
+
}, 200);
|
|
53
|
+
}
|
|
54
|
+
}, [anchor, userId, show]);
|
|
55
|
+
|
|
56
|
+
const search = useCallback(async () => {
|
|
57
|
+
if (!local.anchor || !local.userId) {
|
|
58
|
+
logicSetState({ type: 'show', value: false });
|
|
59
|
+
clearTimeout(time.current);
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
const response = await serverAction('getInfoUsuario', { idUsuario: local.userId }, 'Argous.MntUsuarios', true);
|
|
63
|
+
time.current = setTimeout(() => {
|
|
64
|
+
if (allowShow.current) {
|
|
65
|
+
setState(states => ({
|
|
66
|
+
...states,
|
|
67
|
+
data: response,
|
|
68
|
+
show: true
|
|
69
|
+
}));
|
|
70
|
+
}
|
|
71
|
+
}, 500);
|
|
72
|
+
}, [local]);
|
|
73
|
+
useEffect(() => void(search()), [search]);
|
|
74
|
+
|
|
75
|
+
const returnUser = () => {
|
|
76
|
+
return { idUsuario: userId, titulo: data.dsNomeUsuario, subTitulo: data.dsFuncaoUsuario, msgsNaoLidas: 0, online: false };
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
function mouseLeave() {
|
|
80
|
+
setState(initialState);
|
|
81
|
+
clearTimeout(time.current);
|
|
82
|
+
clear.current = true;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function mouseEnter() {
|
|
86
|
+
clearTimeout(clear.current);
|
|
87
|
+
clear.current = false;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
if (local.userId && show) return (
|
|
92
|
+
<Portal>
|
|
93
|
+
<Popper
|
|
94
|
+
open={((!!anchor || !!local.anchor) && !!data.dsNomeUsuario)}
|
|
95
|
+
anchorEl={anchor || local.anchor}
|
|
96
|
+
onClick={e => e.stopPropagation()}
|
|
97
|
+
onMouseLeave={mouseLeave}
|
|
98
|
+
onMouseEnter={mouseEnter}
|
|
99
|
+
style={{ zIndex: 1300 }}
|
|
100
|
+
>
|
|
101
|
+
<Card variant='outlined' style={{ padding: '10px', maxWidth: '350px' }}>
|
|
102
|
+
<Grid container spacing={1}>
|
|
103
|
+
<Grid item xs='auto'>
|
|
104
|
+
<ArgousAvatar style={{ width: '50px', height: '50px', margin: '10px' }} nome={data.dsNomeUsuario} idUsuario={userId || local.userId} />
|
|
105
|
+
</Grid>
|
|
106
|
+
<Grid item xs='auto'>
|
|
107
|
+
<Typography variant='h6' style={{ overflow: 'hidden', width: '250px', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{data.dsNomeUsuario}</Typography>
|
|
108
|
+
<Typography variant='body2' style={{ width: '250px' }}>{data.dsFuncaoUsuario}</Typography>
|
|
109
|
+
<Typography variant='caption' style={{ width: '250px' }}>{data.dsSetor}</Typography>
|
|
110
|
+
</Grid>
|
|
111
|
+
{(data.dtExclusaoUsuario) ? <Typography variant='h6'>Usuário excluido em {data.dtExclusaoUsuario}</Typography> : (
|
|
112
|
+
((userId && (loggedUserId !== userId)) || (local.userId && (loggedUserId !== local.userId))) && (
|
|
113
|
+
<React.Fragment>
|
|
114
|
+
{(data.nrRamalUsuario) && (
|
|
115
|
+
<Grid item xs>
|
|
116
|
+
<Button fullWidth variant='contained' href={`tel: ${data.nrRamalUsuario}`} title={`Ramal: ${data.nrRamalUsuario}`}><IoIosCall/> {data.nrRamalUsuario}</Button>
|
|
117
|
+
</Grid>
|
|
118
|
+
)}
|
|
119
|
+
<Grid item xs>
|
|
120
|
+
<Button fullWidth variant='contained' href={`mailto: ${data.dsEmailUsuario}`} title={data.dsEmailUsuario}><MdMail/> Email</Button>
|
|
121
|
+
</Grid>
|
|
122
|
+
<Grid item xs>
|
|
123
|
+
<Button fullWidth variant='contained' onClick={() => setAnotherProgramField('janelaChatOpen', returnUser(), 'argousSystem')} title='Abrir chat de conversa'><MdMessage/> Mensagem</Button>
|
|
124
|
+
</Grid>
|
|
125
|
+
</React.Fragment>
|
|
126
|
+
)
|
|
127
|
+
)}
|
|
128
|
+
</Grid>
|
|
129
|
+
</Card>
|
|
130
|
+
</Popper>
|
|
131
|
+
</Portal>
|
|
132
|
+
);
|
|
133
|
+
return null;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
export default UserCard;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './UserCard';
|
|
@@ -154,4 +154,7 @@ export { default as PercentageDisplay } from './PercentageDisplay';
|
|
|
154
154
|
export * from './PercentageDisplay';
|
|
155
155
|
|
|
156
156
|
export { default as HalfGauge } from './HalfGauge';
|
|
157
|
-
export * from './HalfGauge';
|
|
157
|
+
export * from './HalfGauge';
|
|
158
|
+
|
|
159
|
+
export { default as UserCard } from './UserCard';
|
|
160
|
+
export * from './UserCard';
|
package/lib/components/index.js
CHANGED
|
@@ -152,4 +152,6 @@ export { default as PercentageDisplay } from './PercentageDisplay';
|
|
|
152
152
|
export * from './PercentageDisplay';
|
|
153
153
|
|
|
154
154
|
export { default as HalfGauge } from './HalfGauge';
|
|
155
|
-
export * from './HalfGauge';
|
|
155
|
+
export * from './HalfGauge';
|
|
156
|
+
|
|
157
|
+
export { default as UserCard } from './UserCard';
|
package/lib/utils/index.ts
CHANGED
|
@@ -10,6 +10,7 @@ import { BasicModalProps } from 'lib/components';
|
|
|
10
10
|
import { isNumber } from 'lodash';
|
|
11
11
|
import React, { useRef, useEffect, useContext, useState } from 'react';
|
|
12
12
|
|
|
13
|
+
|
|
13
14
|
export const widthToCenterVertically = (content:number) => {
|
|
14
15
|
const B = document.body;
|
|
15
16
|
const H = document.documentElement;
|
|
@@ -282,7 +283,7 @@ export const numbersOnly = (value: string, type: string) => value ? value.replac
|
|
|
282
283
|
|
|
283
284
|
export const currencyMask = (value: string | number) => {
|
|
284
285
|
if (value === 0) return `${value.toString()},00`;
|
|
285
|
-
if (!value) return;
|
|
286
|
+
if (!value) return '';
|
|
286
287
|
if (isNumber(value)) value = value.toFixed(2);
|
|
287
288
|
value = value.toString();
|
|
288
289
|
value = value.replace(/\D/g, '');
|
|
@@ -348,4 +349,17 @@ export const formatCpfCnpj = (value: string | number) => {
|
|
|
348
349
|
else if (valueLen > 11 && valueLen < 13) value = `${value.substring(0, 2)}.${value.substring(2, 5)}.${value.substring(5, 8)}/${value.substring(8)}`;
|
|
349
350
|
else if (valueLen > 12) value = `${value.substring(0, 2)}.${value.substring(2, 5)}.${value.substring(5, 8)}/${value.substring(8, 12)}-${value.substring(12, 14)}`;
|
|
350
351
|
return value;
|
|
351
|
-
};
|
|
352
|
+
};
|
|
353
|
+
|
|
354
|
+
export function dataUrlToBlob(dataUrl: string) {
|
|
355
|
+
if (!dataUrl) return;
|
|
356
|
+
let byteString = atob(dataUrl.split(',')[1]);
|
|
357
|
+
let mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
|
|
358
|
+
let arrayBuffer = new ArrayBuffer(byteString.length);
|
|
359
|
+
let intArray = new Uint8Array(arrayBuffer);
|
|
360
|
+
for (let i = 0; i < byteString.length; i++) {
|
|
361
|
+
intArray[i] = byteString.charCodeAt(i);
|
|
362
|
+
}
|
|
363
|
+
let blob = new Blob([arrayBuffer], { type: mimeString });
|
|
364
|
+
return blob;
|
|
365
|
+
}
|