+ {{ message.text }}
+ + +
+
+
+
+
+
+
+
+
{{ dropMessage }}
+ Glisser/déposer votre document ici pour débuter
+
Taille max : 50 Mo - Format : PDF, DOCX ou PPTX
+
+
+
+
+
+
+ Ajout Annexe
+
+
+
+
+
+
+
+
+
+
+
diff --git a/VUEJS/src/components/Header.vue b/VUEJS/src/components/Header.vue
new file mode 100644
index 0000000..42e3331
--- /dev/null
+++ b/VUEJS/src/components/Header.vue
@@ -0,0 +1,43 @@
+// 1. Header.vue
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/VUEJS/src/components/Status.vue b/VUEJS/src/components/Status.vue
new file mode 100644
index 0000000..f3a3915
--- /dev/null
+++ b/VUEJS/src/components/Status.vue
@@ -0,0 +1,107 @@
+
+
+
+ Add New Recipient
+ + + +
+
+
+
+
+
+
\ No newline at end of file
diff --git a/VUEJS/src/components/TheWelcome.vue b/VUEJS/src/components/TheWelcome.vue
new file mode 100644
index 0000000..d3d2e7a
--- /dev/null
+++ b/VUEJS/src/components/TheWelcome.vue
@@ -0,0 +1,84 @@
+
+
+
+ Contract ID: {{ contractId }}
+status: {{ contractId }}
++ + More instructions are available in
README.md.
+
+
+
+
+
+
diff --git a/VUEJS/src/components/icons/IconCommunity.vue b/VUEJS/src/components/icons/IconCommunity.vue
new file mode 100644
index 0000000..2dc8b05
--- /dev/null
+++ b/VUEJS/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/VUEJS/src/components/icons/IconDocumentation.vue b/VUEJS/src/components/icons/IconDocumentation.vue
new file mode 100644
index 0000000..6d4791c
--- /dev/null
+++ b/VUEJS/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/VUEJS/src/components/icons/IconEcosystem.vue b/VUEJS/src/components/icons/IconEcosystem.vue
new file mode 100644
index 0000000..c3a4f07
--- /dev/null
+++ b/VUEJS/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/VUEJS/src/components/icons/IconSupport.vue b/VUEJS/src/components/icons/IconSupport.vue
new file mode 100644
index 0000000..7452834
--- /dev/null
+++ b/VUEJS/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/VUEJS/src/components/icons/IconTooling.vue b/VUEJS/src/components/icons/IconTooling.vue
new file mode 100644
index 0000000..660598d
--- /dev/null
+++ b/VUEJS/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+
+
+
+
diff --git a/VUEJS/src/components/icons/LOGO-OODRIVE-2022-noir.svg b/VUEJS/src/components/icons/LOGO-OODRIVE-2022-noir.svg
new file mode 100644
index 0000000..d0d2180
--- /dev/null
+++ b/VUEJS/src/components/icons/LOGO-OODRIVE-2022-noir.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/VUEJS/src/components/icons/fond-business-card-1-2-2048x210.png b/VUEJS/src/components/icons/fond-business-card-1-2-2048x210.png
new file mode 100644
index 0000000..2ffc2b8
Binary files /dev/null and b/VUEJS/src/components/icons/fond-business-card-1-2-2048x210.png differ
diff --git a/VUEJS/src/contractService.js b/VUEJS/src/contractService.js
new file mode 100644
index 0000000..f092661
--- /dev/null
+++ b/VUEJS/src/contractService.js
@@ -0,0 +1,128 @@
+
+//contractService.js
+import axios from 'axios';
+
+const apiUrl = '/api'; // Use the proxy path
+// Shared state object to store contract ID and status
+const contractState = {
+ contractId: null,
+ status: null,
+};
+export const createContract = async (token, cdi, contractor_id, actor_id, pdfParts, appendixParts) => {
+ console.log('Received FormData (pdfParts):', pdfParts);
+ console.log('Received FormData (appendixParts):', appendixParts);
+
+ const contract = {
+ name: "contrat test VUE JS.pdf",
+ message_title: "Votre contrat Test signature",
+ message_body: "Vous êtes signataire du contrat Z ci-joint pour la companyName. Merci de bien vouloir le signer électroniquement en cliquant sur le lien ci-dessous.
+
+
+
+
+
+ Cordialement", + keep_on_move: false, + auto_close: 1 + }; + + const recipients = { + data: [ + { + civility: "MONSIEUR", + firstname: "Hamza", + lastname: "Ayari", + address_1: "rue Bombée", + cell_phone: "0757947761", + email: "h.ayari+1@oodrive.com", + signature_mode: 10 + }, + { + civility: "MONSIEUR", + firstname: "John", + lastname: "Doe", + address_1: "rue plate", + cell_phone: "0757947761", + email: "oodrivesign@gmail.com", + signature_mode: 10 + } + ] + }; + + const formData = new FormData(); + formData.append('contract', JSON.stringify(contract)); + formData.append('recipients', JSON.stringify(recipients)); + + // Ensure that pdfParts is an array before attempting to iterate + if (Array.isArray(pdfParts)) { + // Append each pdfPart to the FormData + for (const file of pdfParts) { + formData.append('pdfparts', file); + } + } else { + // If it's not an array, treat it as a single pdfPart + formData.append('pdfparts', pdfParts); + } + + // Ensure that appendixParts is an array before attempting to iterate + if (Array.isArray(appendixParts)) { + // Append each appendixPart to the FormData + for (const file of appendixParts) { + formData.append('appendixparts', file); + } + } else { + // If it's not an array, treat it as a single appendixPart + formData.append('appendixparts', appendixParts); + } + + try { + const response = await axios.post(apiUrl + "/contracts/allinone?start=true", formData, { + headers: { + 'Accept': 'application/json', + 'Content-Type': 'multipart/form-data', + 'j_token': token + }, + responseType: 'json', + }); + + console.log('Contract created: ============222==========='); + console.log(response.data); // Log the entire response to inspect its structure + + const contract_id = response.data.contract.contract_id; // Access the contract_id property correctly + + const status = response.data.contract.status; + + console.log('Contract ID:', contract_id); + console.log('status:', status); + // Store the contract ID and status in the shared state object + contractState.contractId = contract_id; + contractState.status = status; + + if (response.data.recipients && Array.isArray(response.data.recipients)) { + const recipients = response.data.recipients; + recipients.forEach((recipient, index) => { + const recipient_id = recipient.id; + console.log(`Recipient ${index + 1} ID:`, recipient_id); + }); + contractState.recipient_id = recipients; + } else { + console.log('Invalid recipients data in the response'); + } + } catch (error) { + if (error.response) { + // The request was made, but the server responded with a status code + console.error('Server responded with status code:', error.response.status); + console.error('Response data:', error.response.data); + } else if (error.request) { + // The request was made, but no response was received + console.error('No response received from the server'); + } else { + // Something happened in setting up the request that triggered an Error + console.error('Error setting up the request:', error.message); + } + throw new Error('Error creating contract'); + } +}; +// Function to retrieve the contract ID from the shared state object +export const getContractId = () => { + return contractState.contractId; +}; + +// Function to retrieve the status from the shared state object +export const getStatus = () => { + return contractState.status; +}; \ No newline at end of file diff --git a/VUEJS/src/createAndSendContract.js b/VUEJS/src/createAndSendContract.js new file mode 100644 index 0000000..1ac5275 --- /dev/null +++ b/VUEJS/src/createAndSendContract.js @@ -0,0 +1,24 @@ +// createAndSendContract.js +import { createContract } from './contractService.js'; + +export async function createAndSendContract(files) { + const token = process.env.VITE_API_TOKEN; + const cdi = process.env.VITE_CDI; + const contractorId = process.env.VITE_CONTRACTOR_ID; + const actorId = process.env.VITE_ACTOR_ID; + + try { + // Assuming that 'files' is an array of files + const formData = new FormData(); + + files.forEach((file, index) => { + formData.append(`pdfparts[${index}]`, file); + }); + + const response = await createContract(token, cdi, contractorId, actorId, formData); + console.log('Contract created 12358:', response); + } catch (error) { + console.error('Error creating contract:', error.message); + } +} + diff --git a/VUEJS/src/main.js b/VUEJS/src/main.js new file mode 100644 index 0000000..6be2a94 --- /dev/null +++ b/VUEJS/src/main.js @@ -0,0 +1,7 @@ +import { createApp } from 'vue' + +import App from './App.vue' + +import './assets/main.css' + +createApp(App).mount('#app') diff --git a/VUEJS/vite.config.js b/VUEJS/vite.config.js new file mode 100644 index 0000000..5f800e9 --- /dev/null +++ b/VUEJS/vite.config.js @@ -0,0 +1,23 @@ +// vite.config.js +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; + +export default defineConfig({ + server: { + host: true, + proxy: { + '/api': { + target: "http://localhost:5171", + changeOrigin: true, + secure: false, // Set this to false if the target server uses a self-signed certificate + logLevel: 'debug', + }, + }, + }, + plugins: [vue()], + resolve: { + alias: { + '@': './src', // Assuming './src' is the correct relative path to your source directory + }, + }, +}); \ No newline at end of file diff --git a/readme.md b/readme.md index f44dfdd..05f33aa 100644 --- a/readme.md +++ b/readme.md @@ -26,43 +26,44 @@ To see your changes, just refresh the app web page. To launch the container type Build the Docker image: - +```sh docker compose build - +``` Start the service using Docker Compose: - +```sh docker compose up +``` ### Setting up with Docker ### If you have Docker installed, you can easily set up and run the project without manually installing dependencies. 1.First, ensure you have both Docker and Docker Compose installed. Install Docker - +```sh Install Docker Compose - +``` 2.Clone the GitHub repo: - -git clone https://github.com/hamzaoodrive/API_integration_Sign.git - +```sh +git clone +``` 3.Navigate to the project directory: - +```sh cd API_integration_Sign - +``` 4.Build the Docker image: - +```sh docker compose build - +``` 5.tart the service using Docker Compose: - +```sh docker compose up - +``` Your server will now be running at http://localhost:8020. You can interact with the API or run your tests as you would normally. To stop the Docker containers, simply run: - +```sh docker compose down - +``` PS : Note When using Docker, any changes you make to your local files will be reflected in the Docker container thanks to the volume mapping in the docker-compose.yml file. If you add or remove dependencies, however, you'll need to rebuild the Docker image using docker compose build.