From 5c5c13c620ef83561f3113df7b7447c1ab4395af Mon Sep 17 00:00:00 2001 From: Vins Date: Fri, 16 Feb 2024 14:59:49 +0100 Subject: [PATCH] ondoing --- package-lock.json | 134 +++++++------ package.json | 2 +- .../Api/LeCoffreApi/Notary/Offices/Offices.ts | 53 ++++++ .../Api/LeCoffreApi/Notary/Bucket/Bucket.ts | 62 ++++++ .../Notary/DocumentTypes/DocumentTypes.ts | 2 +- .../DesignSystem/DepositDocument/index.tsx | 2 +- .../DepositRib/classes.module.scss | 108 +++++++++++ .../DesignSystem/DepositRib/index.tsx | 178 ++++++++++++++++++ .../DocumentTypes/DocumentTypesEdit/index.tsx | 21 ++- .../Layouts/Rib/classes.module.scss | 68 +++++++ src/front/Components/Layouts/Rib/index.tsx | 136 +++++++++++++ src/pages/rib/[officeUid]/index.tsx | 5 + 12 files changed, 701 insertions(+), 70 deletions(-) create mode 100644 src/common/Api/LeCoffreApi/Notary/Offices/Offices.ts create mode 100644 src/front/Api/LeCoffreApi/Notary/Bucket/Bucket.ts create mode 100644 src/front/Components/DesignSystem/DepositRib/classes.module.scss create mode 100644 src/front/Components/DesignSystem/DepositRib/index.tsx create mode 100644 src/front/Components/Layouts/Rib/classes.module.scss create mode 100644 src/front/Components/Layouts/Rib/index.tsx create mode 100644 src/pages/rib/[officeUid]/index.tsx diff --git a/package-lock.json b/package-lock.json index c41f42fc..e5d9c2d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "eslint-config-next": "13.2.4", "form-data": "^4.0.0", "jwt-decode": "^3.1.2", - "le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.108", + "le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.115", "next": "13.2.4", "prettier": "^2.8.7", "react": "18.2.0", @@ -1436,9 +1436,9 @@ "optional": true }, "node_modules/bare-fs": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.1.3.tgz", - "integrity": "sha512-Oa7F0QJV7We0mtKq7Tk246uiBrl7vun64cPEsJOEwv2vHjnVL9yO7aH3643aSrd4rXfVe7yhJ9LHZywQQAXKFQ==", + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.1.5.tgz", + "integrity": "sha512-5t0nlecX+N2uJqdxe9d18A98cp2u9BETelbjKpiVgQqzzmVNFYWEAjQHqS+2Khgto1vcwhik9cXucaj5ve2WWA==", "optional": true, "dependencies": { "bare-events": "^2.0.0", @@ -1448,9 +1448,9 @@ } }, "node_modules/bare-os": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.1.2.tgz", - "integrity": "sha512-slQjOn78Q8itnzomNAamiKo5MDpEpV3JnoNZ93lyynaFh6paWcU+5c0GVcZ7EYIJC2unN2JGdF1qupdscYl0Yg==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.2.0.tgz", + "integrity": "sha512-hD0rOPfYWOMpVirTACt4/nK8mC55La12K5fY1ij8HAdfQakD62M+H4o4tpfKzVGLgRDTuk3vjA4GqGXXCeFbag==", "optional": true }, "node_modules/bare-path": { @@ -1543,14 +1543,15 @@ } }, "node_modules/call-bind": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.6.tgz", - "integrity": "sha512-Mj50FLHtlsoVfRfnHaZvyrooHcrlceNZdL/QBvJJVd9Ta55qCQK0gs4ss2oZDeV9zFCs6ewzYgVE5yfVmfFpVg==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", + "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", "dependencies": { + "es-define-property": "^1.0.0", "es-errors": "^1.3.0", "function-bind": "^1.1.2", - "get-intrinsic": "^1.2.3", - "set-function-length": "^1.2.0" + "get-intrinsic": "^1.2.4", + "set-function-length": "^1.2.1" }, "engines": { "node": ">= 0.4" @@ -1827,17 +1828,19 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==" }, "node_modules/define-data-property": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.2.tgz", - "integrity": "sha512-SRtsSqsDbgpJBbW3pABMCOt6rQyeM8s8RiyeSN8jYG8sYmt/kGJejbydttUsnDs1tadr19tvhT4ShwMyoqAm4g==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", + "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", "dependencies": { + "es-define-property": "^1.0.0", "es-errors": "^1.3.0", - "get-intrinsic": "^1.2.2", - "gopd": "^1.0.1", - "has-property-descriptors": "^1.0.1" + "gopd": "^1.0.1" }, "engines": { "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" } }, "node_modules/define-properties": { @@ -1912,9 +1915,9 @@ } }, "node_modules/dotenv": { - "version": "16.4.2", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.2.tgz", - "integrity": "sha512-rZSSFxke7d9nYQ5NeMIwp5PP+f8wXgKNljpOb7KtH6SKW1cEqcXAz9VSJYVLKe7Jhup/gUYOkaeSVyK8GJ+nBg==", + "version": "16.4.4", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.4.tgz", + "integrity": "sha512-XvPXc8XAQThSjAbY6cQ/9PcBXmFoWuw1sQ3b8HqUCR6ziGXjkTi//kB9SWa2UwqlgdAIuRqAa/9hVljzPehbYg==", "engines": { "node": ">=12" }, @@ -1956,49 +1959,51 @@ } }, "node_modules/es-abstract": { - "version": "1.22.3", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz", - "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==", + "version": "1.22.4", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.4.tgz", + "integrity": "sha512-vZYJlk2u6qHYxBOTjAeg7qUxHdNfih64Uu2J8QqWgXZ2cri0ZpJAkzDUK/q593+mvKwlxyaxr6F1Q+3LKoQRgg==", "dependencies": { - "array-buffer-byte-length": "^1.0.0", - "arraybuffer.prototype.slice": "^1.0.2", - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.5", - "es-set-tostringtag": "^2.0.1", + "array-buffer-byte-length": "^1.0.1", + "arraybuffer.prototype.slice": "^1.0.3", + "available-typed-arrays": "^1.0.6", + "call-bind": "^1.0.7", + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "es-set-tostringtag": "^2.0.2", "es-to-primitive": "^1.2.1", "function.prototype.name": "^1.1.6", - "get-intrinsic": "^1.2.2", - "get-symbol-description": "^1.0.0", + "get-intrinsic": "^1.2.4", + "get-symbol-description": "^1.0.2", "globalthis": "^1.0.3", "gopd": "^1.0.1", - "has-property-descriptors": "^1.0.0", + "has-property-descriptors": "^1.0.2", "has-proto": "^1.0.1", "has-symbols": "^1.0.3", - "hasown": "^2.0.0", - "internal-slot": "^1.0.5", - "is-array-buffer": "^3.0.2", + "hasown": "^2.0.1", + "internal-slot": "^1.0.7", + "is-array-buffer": "^3.0.4", "is-callable": "^1.2.7", "is-negative-zero": "^2.0.2", "is-regex": "^1.1.4", "is-shared-array-buffer": "^1.0.2", "is-string": "^1.0.7", - "is-typed-array": "^1.1.12", + "is-typed-array": "^1.1.13", "is-weakref": "^1.0.2", "object-inspect": "^1.13.1", "object-keys": "^1.1.1", - "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.5.1", - "safe-array-concat": "^1.0.1", - "safe-regex-test": "^1.0.0", + "object.assign": "^4.1.5", + "regexp.prototype.flags": "^1.5.2", + "safe-array-concat": "^1.1.0", + "safe-regex-test": "^1.0.3", "string.prototype.trim": "^1.2.8", "string.prototype.trimend": "^1.0.7", "string.prototype.trimstart": "^1.0.7", - "typed-array-buffer": "^1.0.0", + "typed-array-buffer": "^1.0.1", "typed-array-byte-length": "^1.0.0", "typed-array-byte-offset": "^1.0.0", "typed-array-length": "^1.0.4", "unbox-primitive": "^1.0.2", - "which-typed-array": "^1.1.13" + "which-typed-array": "^1.1.14" }, "engines": { "node": ">= 0.4" @@ -2012,6 +2017,17 @@ "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz", "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==" }, + "node_modules/es-define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "dependencies": { + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/es-errors": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", @@ -2021,20 +2037,20 @@ } }, "node_modules/es-iterator-helpers": { - "version": "1.0.16", - "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.16.tgz", - "integrity": "sha512-CREG2A9Vq7bpDRnldhFcMKuKArvkZtsH6Y0DHOHVg49qhf+LD8uEdUM3OkOAICv0EziGtDEnQtqY2/mfBILpFw==", + "version": "1.0.17", + "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.17.tgz", + "integrity": "sha512-lh7BsUqelv4KUbR5a/ZTaGGIMLCjPGPqJ6q+Oq24YP0RdyptX1uzm4vvaqzk7Zx3bpl/76YLTTDj9L7uYQ92oQ==", "dependencies": { "asynciterator.prototype": "^1.0.0", - "call-bind": "^1.0.6", + "call-bind": "^1.0.7", "define-properties": "^1.2.1", - "es-abstract": "^1.22.3", + "es-abstract": "^1.22.4", "es-errors": "^1.3.0", "es-set-tostringtag": "^2.0.2", "function-bind": "^1.1.2", "get-intrinsic": "^1.2.4", "globalthis": "^1.0.3", - "has-property-descriptors": "^1.0.1", + "has-property-descriptors": "^1.0.2", "has-proto": "^1.0.1", "has-symbols": "^1.0.3", "internal-slot": "^1.0.7", @@ -2856,11 +2872,11 @@ } }, "node_modules/has-property-descriptors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz", - "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", + "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", "dependencies": { - "get-intrinsic": "^1.2.2" + "es-define-property": "^1.0.0" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -3442,7 +3458,7 @@ } }, "node_modules/le-coffre-resources": { - "resolved": "git+ssh://git@github.com/smart-chain-fr/leCoffre-resources.git#9e5840c4634a50851ceb7b912737e15b0bbe1c49", + "resolved": "git+ssh://git@github.com/smart-chain-fr/leCoffre-resources.git#cc49eea2e6692637edda2335970deaa4221a9201", "license": "MIT", "dependencies": { "class-transformer": "^0.5.1", @@ -3463,9 +3479,9 @@ } }, "node_modules/libphonenumber-js": { - "version": "1.10.55", - "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.55.tgz", - "integrity": "sha512-MrTg2JFLscgmTY6/oT9vopYETlgUls/FU6OaeeamGwk4LFxjIgOUML/ZSZICgR0LPYXaonVJo40lzMvaaTJlQA==" + "version": "1.10.56", + "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.56.tgz", + "integrity": "sha512-d0GdKshNnyfl5gM7kZ9rXjGiAbxT/zCXp0k+EAzh8H4zrb2R7GXtMCrULrX7UQxtfx6CLy/vz/lomvW79FAFdA==" }, "node_modules/lines-and-columns": { "version": "1.2.4", @@ -4404,9 +4420,9 @@ } }, "node_modules/sass": { - "version": "1.70.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.70.0.tgz", - "integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==", + "version": "1.71.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.0.tgz", + "integrity": "sha512-HKKIKf49Vkxlrav3F/w6qRuPcmImGVbIXJ2I3Kg0VMA+3Bav+8yE9G5XmP5lMj6nl4OlqbPftGAscNaNu28b8w==", "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", diff --git a/package.json b/package.json index eeb5e5f3..b259e258 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "eslint-config-next": "13.2.4", "form-data": "^4.0.0", "jwt-decode": "^3.1.2", - "le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.108", + "le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.115", "next": "13.2.4", "prettier": "^2.8.7", "react": "18.2.0", diff --git a/src/common/Api/LeCoffreApi/Notary/Offices/Offices.ts b/src/common/Api/LeCoffreApi/Notary/Offices/Offices.ts new file mode 100644 index 00000000..ef825aba --- /dev/null +++ b/src/common/Api/LeCoffreApi/Notary/Offices/Offices.ts @@ -0,0 +1,53 @@ +import { Office } from "le-coffre-resources/dist/SuperAdmin"; +import BaseNotary from "../BaseNotary"; + +export interface IGetOfficesparams { + where?: {}; + include?: {}; + select?: {}; +} + +export default class Offices extends BaseNotary { + private static instance: Offices; + private readonly baseURl = this.namespaceUrl.concat("/offices"); + + private constructor() { + super(); + } + + public static getInstance() { + if (!this.instance) { + return new this(); + } else { + return this.instance; + } + } + + public async get(q?: IGetOfficesparams): Promise { + const url = new URL(this.baseURl); + if (q) { + const query = { q }; + Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value))); + } + try { + return await this.getRequest(url); + } catch (err) { + this.onError(err); + return Promise.reject(err); + } + } + + /** + * @description : Get a folder by uid + */ + public async getByUid(uid: string, q?: any): Promise { + const url = new URL(this.baseURl.concat(`/${uid}`)); + if (q) Object.entries(q).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value))); + try { + return await this.getRequest(url); + } catch (err) { + this.onError(err); + return Promise.reject(err); + } + } +} diff --git a/src/front/Api/LeCoffreApi/Notary/Bucket/Bucket.ts b/src/front/Api/LeCoffreApi/Notary/Bucket/Bucket.ts new file mode 100644 index 00000000..28c57988 --- /dev/null +++ b/src/front/Api/LeCoffreApi/Notary/Bucket/Bucket.ts @@ -0,0 +1,62 @@ +import BaseNotary from "../../Notary/BaseNotary"; + +// TODO Type get query params -> Where + inclue + orderby +export interface IGetFilesparams { + where?: {}; + include?: {}; +} + +// TODO Type getbyuid query params + +export type IPutFilesParams = {}; + +export interface IPostFilesParams {} + +export default class Bucket extends BaseNotary { + private static instance: Bucket; + private readonly baseURl = this.namespaceUrl.concat("/bucket"); + + private constructor() { + super(); + } + + public static getInstance() { + return (this.instance ??= new this()); + } + + public async getRibStream(uid: string) { + const url = new URL(this.baseURl.concat(`/${uid}`)); + try { + return await this.getRequest(url); + } catch (err) { + this.onError(err); + return Promise.reject(err); + } + } + + /** + * @description : Create a File + */ + public async post(body: any) { + const url = new URL(this.baseURl); + try { + return await this.postRequestFormData(url, body); + } catch (err) { + this.onError(err); + return Promise.reject(err); + } + } + + /** + * @description : Delete a File + */ + public async delete(uid: string) { + const url = new URL(this.baseURl.concat(`/${uid}`)); + try { + return await this.deleteRequest(url); + } catch (err) { + this.onError(err); + return Promise.reject(err); + } + } +} diff --git a/src/front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes.ts b/src/front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes.ts index f73255e3..6fc75302 100644 --- a/src/front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes.ts +++ b/src/front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes.ts @@ -15,7 +15,7 @@ export type IPutDocumentTypesParams = {}; export interface IPostDocumentTypesParams { name: string; - public_description: string; + public_description?: string | null; private_description: string | null; office?: { uid?: string; diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx index b7cf8644..be8b8184 100644 --- a/src/front/Components/DesignSystem/DepositDocument/index.tsx +++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx @@ -133,7 +133,7 @@ export default class DepositDocument extends React.Component { {this.props.document.document_type?.public_description !== " " && this.props.document.document_type?.public_description !== "" && this.props.document.document_status !== EDocumentStatus.VALIDATED && ( - + )} {this.props.document.document_status === EDocumentStatus.VALIDATED && ( Document check diff --git a/src/front/Components/DesignSystem/DepositRib/classes.module.scss b/src/front/Components/DesignSystem/DepositRib/classes.module.scss new file mode 100644 index 00000000..9bba001b --- /dev/null +++ b/src/front/Components/DesignSystem/DepositRib/classes.module.scss @@ -0,0 +1,108 @@ +.container { + + + .root { + padding: 24px; + background-color: var(--white); + border: 1px dashed #e7e7e7; + + height: fit-content; + + &[data-drag-over="true"] { + border: 1px dashed var(--grey); + } + + &.validated { + border: 1px dashed var(--green-flash); + } + + .top-container { + display: flex; + align-items: center; + + .left { + margin-right: 28px; + } + + .separator { + background-color: #939393; + width: 1px; + align-self: stretch; + } + + .right { + margin-left: 18px; + + .validated { + color: var(--green-flash); + } + + .refused-button { + font-size: 14px; + color: var(--re-hover); + margin-left: 8px; + } + + .title { + display: flex; + align-items: center; + gap: 8px; + } + } + } + + .documents-container { + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 16px; + + .file-container { + display: flex; + align-items: center; + justify-content: space-between; + + .left-part { + display: flex; + align-items: center; + gap: 8px; + .loader { + width: 32px; + height: 32px; + } + } + + .cross { + cursor: pointer; + } + } + } + + .bottom-container { + margin-top: 16px; + + .add-button { + .add-document { + display: flex; + align-items: center; + gap: 14px; + } + } + } + + .text { + margin-bottom: 12px; + } + } + + .modal-content { + display: flex; + flex-direction: column; + gap: 16px; + } + + .error-message { + color: var(--red-flash); + margin-top: 8px; + } +} \ No newline at end of file diff --git a/src/front/Components/DesignSystem/DepositRib/index.tsx b/src/front/Components/DesignSystem/DepositRib/index.tsx new file mode 100644 index 00000000..506bec67 --- /dev/null +++ b/src/front/Components/DesignSystem/DepositRib/index.tsx @@ -0,0 +1,178 @@ +import React from "react"; +import classes from "./classes.module.scss"; +import DepositDocumentIcon from "@Assets/Icons/deposit-document.svg"; +import PlusIcon from "@Assets/Icons/plus.svg"; +import CrossIcon from "@Assets/Icons/cross.svg"; +import DocumentCheckIcon from "@Assets/Icons/document-check.svg"; +import Image from "next/image"; + +import Button, { EButtonVariant } from "../Button"; +import Typography, { ITypo, ITypoColor } from "../Typography"; + +type IProps = { + onChange: (documentList: File[]) => void; +}; + +interface IState { + documents: File[]; + errorMessage: string; +} + +type fileAccepted = { + extension: string; + size: number; +}; + +const filesAccepted: { [key: string]: fileAccepted } = { + "application/pdf": { + extension: "pdf", + size: 41943040, + }, + "image/jpeg": { + extension: "jpeg", + size: 41943040, + }, + "image/png": { + extension: "png", + size: 41943040, + }, + "image/jpg": { + extension: "jpg", + size: 41943040, + }, +}; + +export default class DepositRib extends React.Component { + fileInput: HTMLInputElement | null = null; + constructor(props: IProps) { + super(props); + this.state = { + documents: [], + errorMessage: "", + }; + } + + handleDrop = (e: React.DragEvent) => { + e.preventDefault(); + const file = e.dataTransfer.files[0]; + this.handleFile(file!); + }; + + handleFile = (file: File) => { + if (file.type === "application/pdf" || file.type === "image/jpeg" || file.type === "image/png") { + this.setState((prevState) => ({ + documents: [...prevState.documents, file], + errorMessage: "", + })); + this.props.onChange([...this.state.documents, file]); + } else { + this.setState({ errorMessage: "Only PDF, JPEG, and PNG files are allowed." }); + } + }; + + handleRemove = () => { + const updatedDocuments = [...this.state.documents]; + updatedDocuments.splice(0, 1); + this.setState({ documents: updatedDocuments }); + this.props.onChange(updatedDocuments); + }; + + // handleValidate = async () => { + // // Send documents to the backend for validation + // if (this.state.documents.length === 0) return; + // const formData = new FormData(); + // formData.append("file", this.state.documents[0]!, this.state.documents[0]!.name); + + // const sentFile = await Bucket.getInstance().post(formData); + // console.log("Sent file:", sentFile); + + // // Reset documents state + // this.setState({ documents: [] }); + // }; + + // handleCancel = () => { + // console.log("Cancel:", this.state.documents); + // // Reset documents state + // this.setState({ documents: [] }); + // }; + + handleAddFile = (e: React.ChangeEvent) => { + const file = e.target.files && e.target.files[0]; + if (file) { + this.handleFile(file); + } + }; + + private shortName(name: string): string { + const maxLength = 20; + if (name.length > maxLength) { + return name.substring(0, maxLength / 2) + "..." + name.substring(name.length - maxLength / 2, name.length); + } + return name; + } + + public override render(): JSX.Element { + return ( +
+
e.preventDefault()} onDrop={(e) => this.handleDrop(e)}> + (this.fileInput = input)} + /> + +
+
+ Deposit document +
+
+ +
+ +
Déposer un RIB
+ + + Sélectionnez des documents .jpg, .pdf ou .png + +
+
+ +
+ {this.state.documents.map((file) => { + return ( +
+
+ Document check + + {this.shortName(file.name)} + +
+ Cross icon this.handleRemove()} + /> +
+ ); + })} +
+ +
+ +
+ + {/* + */} +
+ {this.state.errorMessage &&
{this.state.errorMessage}
} +
+ ); + } +} diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx b/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx index 4be51fe1..0dfc5f3b 100644 --- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx +++ b/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx @@ -18,7 +18,7 @@ export default function DocumentTypesEdit() { let { documentTypeUid } = router.query; const [documentTypeSelected, setDocumentTypeSelected] = useState(null); - const [validationError, setValidationError] = useState([]) + const [validationError, setValidationError] = useState([]); useEffect(() => { async function getDocumentType() { @@ -43,11 +43,11 @@ export default function DocumentTypesEdit() { await validateOrReject(documentToUpdate, { groups: ["updateDocumentType"] }); } catch (validationErrors: Array | any) { console.log(validationErrors); - if(!Array.isArray(validationErrors)) return; + if (!Array.isArray(validationErrors)) return; setValidationError(validationErrors as ValidationError[]); return; } - + const documentTypeUpdated = await DocumentTypes.getInstance().put(documentTypeUid as string, documentToUpdate); router.push( Module.getInstance() @@ -58,9 +58,9 @@ export default function DocumentTypesEdit() { ), ); } catch (validationErrors: Array | any) { - if(!Array.isArray(validationErrors)) return; - setValidationError(validationErrors as ValidationError[]); - return; + if (!Array.isArray(validationErrors)) return; + setValidationError(validationErrors as ValidationError[]); + return; } }, [documentTypeUid, router, validationError], @@ -73,7 +73,12 @@ export default function DocumentTypesEdit() { Paramétrage des documents
- error.property === "name")} /> + error.property === "name")} + /> error.property === "public_description")} />
diff --git a/src/front/Components/Layouts/Rib/classes.module.scss b/src/front/Components/Layouts/Rib/classes.module.scss new file mode 100644 index 00000000..961a0fec --- /dev/null +++ b/src/front/Components/Layouts/Rib/classes.module.scss @@ -0,0 +1,68 @@ +@import "@Themes/constants.scss"; + +.root { + .title { + margin-top: 24px; + } + + .subtitle { + margin-top: 32px; + } + + .document-container { + margin-top: 32px; + gap: 64px; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + + .arrow-container { + cursor: pointer; + + &[data-disabled="true"] { + opacity: 0.3; + cursor: not-allowed; + } + } + + .file-container { + max-width: 1000px; + margin: auto; + flex: 1; + } + } + + .footer { + width: fit-content; + margin: auto; + .ocr-container { + margin-top: 42px; + } + .buttons-container { + display: flex; + gap: 24px; + justify-content: center; + margin-top: 32px; + @media (max-width: $screen-s) { + flex-direction: column-reverse; + } + } + } + + .refuse-document-container { + .refuse-text { + margin-bottom: 24px; + } + } + + .validate-document-container { + .document-validating-container { + .validate-gif { + width: 100%; + height: 100%; + object-fit: contain; + } + } + } +} diff --git a/src/front/Components/Layouts/Rib/index.tsx b/src/front/Components/Layouts/Rib/index.tsx new file mode 100644 index 00000000..f5b18eed --- /dev/null +++ b/src/front/Components/Layouts/Rib/index.tsx @@ -0,0 +1,136 @@ +import React, { useState } from "react"; +import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; +import classes from "./classes.module.scss"; +import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; +import FilePreview from "@Front/Components/DesignSystem/FilePreview"; +import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; +import { useRouter } from "next/router"; +import Bucket from "@Front/Api/LeCoffreApi/Notary/Bucket/Bucket"; +import DepositRib from "@Front/Components/DesignSystem/DepositRib"; +import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; + +export default function Rib() { + const [documentList, setDocumentList] = useState([]); + const router = useRouter(); + let { officeUid } = router.query; + const [fileUrl, setFileUrl] = useState(""); + const [fileName, setFileName] = useState(""); + const [key, setKey] = useState(""); + const [isRibModalOpen, setIsRibModalOpen] = useState(false); + + const fetchData = async () => { + if (!officeUid) return; + const blob = await Bucket.getInstance().getRibStream(officeUid as string); + + if (!blob) { + setFileUrl(""); + setFileName(""); + setKey(""); + } + const ribUrl = URL.createObjectURL(blob); + + setFileUrl(ribUrl); + setKey(key); + setFileName(key); + }; + + async function deleteFile() { + if (!officeUid) return; + await Bucket.getInstance().delete(officeUid as string); + setDocumentList([]); + fetchData(); + } + + function downloadFile() { + if (!fileUrl) return; + const a = document.createElement("a"); + a.style.display = "none"; + a.href = fileUrl; + a.download = key; + document.body.appendChild(a); + a.click(); + } + + async function onRibModalAccepted() { + // Send documents to the backend for validation + if (documentList.length === 0) return; + const formData = new FormData(); + formData.append("file", documentList[0]!, documentList[0]!.name); + + await Bucket.getInstance().post(formData); + + setDocumentList([]); + setIsRibModalOpen(false); + fetchData(); + } + + function onCloseRibModal(): void { + setDocumentList([]); + setIsRibModalOpen(false); + } + + function openRibModal(): void { + setIsRibModalOpen(true); + } + + const onDocumentChange = (documentList: File[]) => { + setDocumentList(documentList); + }; + + return ( + +
+ + Rib de l'office + + + {!fileUrl && ( +
+
+ + Aucun RIB n'a été déposé pour cet office + +
+
+
+ +
+
+
+ )} + + {fileUrl && ( +
+
{fileUrl && }
+
+ + + +
+
+ )} + + + + + + {/*
+ + + + +
*/} +
+ + ); +} diff --git a/src/pages/rib/[officeUid]/index.tsx b/src/pages/rib/[officeUid]/index.tsx new file mode 100644 index 00000000..e168971a --- /dev/null +++ b/src/pages/rib/[officeUid]/index.tsx @@ -0,0 +1,5 @@ +import Rib from "@Front/Components/Layouts/Rib"; + +export default function Route() { + return ; +}