feat: ajustes visuais que simplificam a interface de envio de arquivos
This commit is contained in:
parent
b2befb71de
commit
2a5b927988
38
app/components/criarDocumento.mjs
Normal file
38
app/components/criarDocumento.mjs
Normal file
@ -0,0 +1,38 @@
|
||||
// @ts-check
|
||||
|
||||
import { gql } from "@apollo/client/core";
|
||||
import { useApolloClient } from "@apollo/client/react/hooks/useApolloClient.js";
|
||||
import { useMutation } from "@apollo/client/react/hooks/useMutation.js";
|
||||
import { createElement as h } from "react";
|
||||
|
||||
const CRIAR_DOCUMENTO = gql`
|
||||
mutation CriarDocumento($arquivo: [Upload!]!, $input: CreateDocumentoInput!) {
|
||||
criarDocumento(arquivo: $arquivo, input: $input) {
|
||||
id
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function CriarDocumento() {
|
||||
const [multipleUploadMutation] = useMutation(CRIAR_DOCUMENTO);
|
||||
const apolloClient = useApolloClient();
|
||||
|
||||
/** @type {import("react").ChangeEventHandler<HTMLInputElement>} */
|
||||
function onChange({ target: { validity, files } }) {
|
||||
if (validity.valid && files && files[0]) {
|
||||
multipleUploadMutation({
|
||||
variables: {
|
||||
arquivo: Array.from(files),
|
||||
input: {
|
||||
modeloId: 26,
|
||||
fluxoId: 33,
|
||||
},
|
||||
},
|
||||
}).then(() => {
|
||||
apolloClient.resetStore();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return h("input", { type: "file", multiple: true, required: true, onChange });
|
||||
}
|
||||
99
app/package-lock.json
generated
99
app/package-lock.json
generated
@ -11,7 +11,7 @@
|
||||
"apollo-upload-client": "^18.0.0",
|
||||
"device-agnostic-ui": "~10.0.0",
|
||||
"graphql": "^16.8.1",
|
||||
"next": "^13.5.6",
|
||||
"next": "^13.5.11",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
@ -696,17 +696,19 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/env": {
|
||||
"version": "13.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
|
||||
"integrity": "sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw=="
|
||||
"version": "13.5.11",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.11.tgz",
|
||||
"integrity": "sha512-fbb2C7HChgM7CemdCY+y3N1n8pcTKdqtQLbC7/EQtPdLvlMUT9JX/dBYl8MMZAtYG4uVMyPFHXckb68q/NRwqg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@next/swc-darwin-arm64": {
|
||||
"version": "13.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz",
|
||||
"integrity": "sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==",
|
||||
"version": "13.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.9.tgz",
|
||||
"integrity": "sha512-pVyd8/1y1l5atQRvOaLOvfbmRwefxLhqQOzYo/M7FQ5eaRwA1+wuCn7t39VwEgDd7Aw1+AIWwd+MURXUeXhwDw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
@ -716,12 +718,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-darwin-x64": {
|
||||
"version": "13.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz",
|
||||
"integrity": "sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==",
|
||||
"version": "13.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.9.tgz",
|
||||
"integrity": "sha512-DwdeJqP7v8wmoyTWPbPVodTwCybBZa02xjSJ6YQFIFZFZ7dFgrieKW4Eo0GoIcOJq5+JxkQyejmI+8zwDp3pwA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
@ -731,12 +734,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-gnu": {
|
||||
"version": "13.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz",
|
||||
"integrity": "sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==",
|
||||
"version": "13.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.9.tgz",
|
||||
"integrity": "sha512-wdQsKsIsGSNdFojvjW3Ozrh8Q00+GqL3wTaMjDkQxVtRbAqfFBtrLPO0IuWChVUP2UeuQcHpVeUvu0YgOP00+g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
@ -746,12 +750,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-musl": {
|
||||
"version": "13.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz",
|
||||
"integrity": "sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==",
|
||||
"version": "13.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.9.tgz",
|
||||
"integrity": "sha512-6VpS+bodQqzOeCwGxoimlRoosiWlSc0C224I7SQWJZoyJuT1ChNCo+45QQH+/GtbR/s7nhaUqmiHdzZC9TXnXA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
@ -761,12 +766,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-gnu": {
|
||||
"version": "13.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz",
|
||||
"integrity": "sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==",
|
||||
"version": "13.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.9.tgz",
|
||||
"integrity": "sha512-XxG3yj61WDd28NA8gFASIR+2viQaYZEFQagEodhI/R49gXWnYhiflTeeEmCn7Vgnxa/OfK81h1gvhUZ66lozpw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
@ -776,12 +782,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-musl": {
|
||||
"version": "13.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz",
|
||||
"integrity": "sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==",
|
||||
"version": "13.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.9.tgz",
|
||||
"integrity": "sha512-/dnscWqfO3+U8asd+Fc6dwL2l9AZDl7eKtPNKW8mKLh4Y4wOpjJiamhe8Dx+D+Oq0GYVjuW0WwjIxYWVozt2bA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
@ -791,12 +798,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-arm64-msvc": {
|
||||
"version": "13.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz",
|
||||
"integrity": "sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==",
|
||||
"version": "13.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.9.tgz",
|
||||
"integrity": "sha512-T/iPnyurOK5a4HRUcxAlss8uzoEf5h9tkd+W2dSWAfzxv8WLKlUgbfk+DH43JY3Gc2xK5URLuXrxDZ2mGfk/jw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
@ -806,12 +814,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-ia32-msvc": {
|
||||
"version": "13.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz",
|
||||
"integrity": "sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==",
|
||||
"version": "13.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.9.tgz",
|
||||
"integrity": "sha512-BLiPKJomaPrTAb7ykjA0LPcuuNMLDVK177Z1xe0nAem33+9FIayU4k/OWrtSn9SAJW/U60+1hoey5z+KCHdRLQ==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
@ -821,12 +830,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-x64-msvc": {
|
||||
"version": "13.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz",
|
||||
"integrity": "sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ==",
|
||||
"version": "13.5.9",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.9.tgz",
|
||||
"integrity": "sha512-/72/dZfjXXNY/u+n8gqZDjI6rxKMpYsgBBYNZKWOQw0BpBF7WCnPflRy3ZtvQ2+IYI3ZH2bPyj7K+6a6wNk90Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
@ -2767,11 +2777,12 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/next": {
|
||||
"version": "13.5.6",
|
||||
"resolved": "https://registry.npmjs.org/next/-/next-13.5.6.tgz",
|
||||
"integrity": "sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==",
|
||||
"version": "13.5.11",
|
||||
"resolved": "https://registry.npmjs.org/next/-/next-13.5.11.tgz",
|
||||
"integrity": "sha512-WUPJ6WbAX9tdC86kGTu92qkrRdgRqVrY++nwM+shmWQwmyxt4zhZfR59moXSI4N8GDYCBY3lIAqhzjDd4rTC8Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@next/env": "13.5.6",
|
||||
"@next/env": "13.5.11",
|
||||
"@swc/helpers": "0.5.2",
|
||||
"busboy": "1.6.0",
|
||||
"caniuse-lite": "^1.0.30001406",
|
||||
@ -2786,15 +2797,15 @@
|
||||
"node": ">=16.14.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@next/swc-darwin-arm64": "13.5.6",
|
||||
"@next/swc-darwin-x64": "13.5.6",
|
||||
"@next/swc-linux-arm64-gnu": "13.5.6",
|
||||
"@next/swc-linux-arm64-musl": "13.5.6",
|
||||
"@next/swc-linux-x64-gnu": "13.5.6",
|
||||
"@next/swc-linux-x64-musl": "13.5.6",
|
||||
"@next/swc-win32-arm64-msvc": "13.5.6",
|
||||
"@next/swc-win32-ia32-msvc": "13.5.6",
|
||||
"@next/swc-win32-x64-msvc": "13.5.6"
|
||||
"@next/swc-darwin-arm64": "13.5.9",
|
||||
"@next/swc-darwin-x64": "13.5.9",
|
||||
"@next/swc-linux-arm64-gnu": "13.5.9",
|
||||
"@next/swc-linux-arm64-musl": "13.5.9",
|
||||
"@next/swc-linux-x64-gnu": "13.5.9",
|
||||
"@next/swc-linux-x64-musl": "13.5.9",
|
||||
"@next/swc-win32-arm64-msvc": "13.5.9",
|
||||
"@next/swc-win32-ia32-msvc": "13.5.9",
|
||||
"@next/swc-win32-x64-msvc": "13.5.9"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@opentelemetry/api": "^1.1.0",
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
"apollo-upload-client": "^18.0.0",
|
||||
"device-agnostic-ui": "~10.0.0",
|
||||
"graphql": "^16.8.1",
|
||||
"next": "^13.5.6",
|
||||
"next": "^13.5.11",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
|
||||
@ -21,12 +21,8 @@ import nextApp from "next/app.js";
|
||||
import nextHead from "next/head.js";
|
||||
import { createElement as h, Fragment } from "react";
|
||||
|
||||
/**
|
||||
* Creates an Apollo Client instance.
|
||||
* @param {import(
|
||||
* "@apollo/client/cache/inmemory/types.js"
|
||||
* ).NormalizedCacheObject} [cache] Apollo Client initial cache.
|
||||
*/
|
||||
let token = process.env.API_TOKEN;
|
||||
|
||||
const createApolloClient = (cache = {}) =>
|
||||
new ApolloClient({
|
||||
ssrMode: typeof window === "undefined",
|
||||
@ -35,6 +31,8 @@ const createApolloClient = (cache = {}) =>
|
||||
uri: process.env.API_URI,
|
||||
headers: {
|
||||
"Apollo-Require-Preflight": "true",
|
||||
"tenant-id": "imagetech",
|
||||
authorization: `Bearer ${token}`,
|
||||
},
|
||||
}),
|
||||
});
|
||||
@ -93,7 +91,6 @@ if (typeof window === "undefined")
|
||||
renderFunction: ReactDOMServer.renderToStaticMarkup,
|
||||
});
|
||||
} catch (error) {
|
||||
// Prevent crash from GraphQL errors.
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
// @ts-check
|
||||
|
||||
import Code from "device-agnostic-ui/Code.mjs";
|
||||
import Heading from "device-agnostic-ui/Heading.mjs";
|
||||
import Margin from "device-agnostic-ui/Margin.mjs";
|
||||
import { createElement as h } from "react";
|
||||
@ -8,50 +7,20 @@ import { createElement as h } from "react";
|
||||
import Header from "../components/Header.mjs";
|
||||
import Page from "../components/Page.mjs";
|
||||
import Section from "../components/Section.mjs";
|
||||
import UploadBlob from "../components/UploadBlob.mjs";
|
||||
import UploadFile from "../components/UploadFile.mjs";
|
||||
import UploadFileList from "../components/UploadFileList.mjs";
|
||||
import Uploads from "../components/Uploads.mjs";
|
||||
import CriarDocumento from "../components/criarDocumento.mjs";
|
||||
|
||||
export default function IndexPage() {
|
||||
return h(
|
||||
Page,
|
||||
{ title: "Apollo upload examples" },
|
||||
h(
|
||||
Header,
|
||||
null,
|
||||
h(Heading, { level: 1, size: 1 }, "Apollo upload examples"),
|
||||
),
|
||||
{ title: "GeoDoc - Uploads" },
|
||||
h(Header, null, h(Heading, { level: 1, size: 1 }, "GeoDoc - Uploads")),
|
||||
h(
|
||||
Section,
|
||||
null,
|
||||
h(
|
||||
Header,
|
||||
null,
|
||||
h(Heading, { level: 2, size: 2 }, "Upload ", h(Code, null, "FileList")),
|
||||
),
|
||||
h(Margin, null, h(UploadFileList)),
|
||||
h(Header, null, h(Heading, { level: 2, size: 2 }, "CriarDocumento ")),
|
||||
h(Margin, null, h(CriarDocumento)),
|
||||
),
|
||||
h(
|
||||
Section,
|
||||
null,
|
||||
h(
|
||||
Header,
|
||||
null,
|
||||
h(Heading, { level: 2, size: 2 }, "Upload ", h(Code, null, "File")),
|
||||
),
|
||||
h(Margin, null, h(UploadFile)),
|
||||
),
|
||||
h(
|
||||
Section,
|
||||
null,
|
||||
h(
|
||||
Header,
|
||||
null,
|
||||
h(Heading, { level: 2, size: 2 }, "Upload ", h(Code, null, "Blob")),
|
||||
),
|
||||
h(Margin, null, h(UploadBlob)),
|
||||
),
|
||||
h(Section, null, h(Header, null, h(Heading, null, "Uploads")), h(Uploads)),
|
||||
h(Section, null),
|
||||
h(Section, null, h(Header, null, h(Heading, null, "Documentos Recentes"))),
|
||||
);
|
||||
}
|
||||
|
||||
2187
app/yarn.lock
Normal file
2187
app/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user