From 820207ae84c26c395355153527b6fdd216bb4ecd Mon Sep 17 00:00:00 2001 From: Kurtil Date: Fri, 17 Dec 2021 12:47:38 +0100 Subject: [PATCH] update fileIcon API + add doc + add export --- components.js | 1 + .../BIMDataFileIcon/BIMDataFileIcon.vue | 22 ++++- .../components/FileCard/FileCard.vue | 7 +- .../BIMDataFileManager/utils/files.js | 12 +-- src/store.js | 7 ++ src/web/router/router.js | 6 ++ .../views/Components/FileIcon/FileIcon.vue | 97 +++++++++++++++++++ 7 files changed, 131 insertions(+), 21 deletions(-) create mode 100644 src/web/views/Components/FileIcon/FileIcon.vue diff --git a/components.js b/components.js index c6cab66d..6378a70b 100644 --- a/components.js +++ b/components.js @@ -4,6 +4,7 @@ export { default as BIMDataCard } from "./dist/js/BIMDataComponents/BIMDataCard. export { default as BIMDataCheckbox } from "./dist/js/BIMDataComponents/BIMDataCheckbox.js"; export { default as BIMDataDropdownList } from "./dist/js/BIMDataComponents/BIMDataDropdownList.js"; export { default as BIMDataDropdownMenu } from "./dist/js/BIMDataComponents/BIMDataDropdownMenu.js"; +export { default as BIMDataFileIcon } from "./dist/js/BIMDataComponents/BIMDataFileIcon.js"; export { default as BIMDataIcon } from "./dist/js/BIMDataComponents/BIMDataIcon.js"; export { default as BIMDataIllustration } from "./dist/js/BIMDataComponents/BIMDataIllustration.js"; export { default as BIMDataInput } from "./dist/js/BIMDataComponents/BIMDataInput.js"; diff --git a/src/BIMDataComponents/BIMDataFileIcon/BIMDataFileIcon.vue b/src/BIMDataComponents/BIMDataFileIcon/BIMDataFileIcon.vue index cf8a2172..a3d4fbab 100644 --- a/src/BIMDataComponents/BIMDataFileIcon/BIMDataFileIcon.vue +++ b/src/BIMDataComponents/BIMDataFileIcon/BIMDataFileIcon.vue @@ -12,19 +12,33 @@ import icons from "./file-icons/index.js"; export default { props: { - name: { + fileName: { type: String, - default: "unknown", + default: "", }, size: { - type: [String, Number], - default: "35", + type: Number, + default: 35, }, }, computed: { + name() { + return this.getFileExtension(this.fileName) || "unknown"; + }, imageUrl() { return icons[`icon_${this.name}`] || icons.icon_unknown; }, }, + methods: { + getFileExtension(fileName = "") { + const match = fileName.match(/\.([0-9a-z]+$)/); + const extension = match && match[1]; + if (extension && extension.toLowerCase() === "ifczip") { + return "ifc"; + } else { + return extension; + } + }, + }, }; diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard/FileCard.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard/FileCard.vue index 61ba49de..1145f708 100644 --- a/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard/FileCard.vue +++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard/FileCard.vue @@ -53,7 +53,7 @@
@@ -107,8 +107,6 @@ import BIMDataCheckbox from "../../../../BIMDataComponents/BIMDataCheckbox/BIMDa import BIMDataFileIcon from "../../../../BIMDataComponents/BIMDataFileIcon/BIMDataFileIcon.vue"; import clickaway from "../../../../BIMDataDirectives/click-away.js"; -import { getFileExtension } from "../../utils/files"; - import PieProgressSpinner from "../PieProgressSpinner.vue"; export default { @@ -231,9 +229,6 @@ export default { this.menuDisplayed = false; } }, - getFileExtension(...args) { - return getFileExtension(...args); - }, onRenameClick() { this.menuDisplayed = false; this.$emit("rename"); diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/utils/files.js b/src/BIMDataSmartComponents/BIMDataFileManager/utils/files.js index 49492b5b..892e6999 100644 --- a/src/BIMDataSmartComponents/BIMDataFileManager/utils/files.js +++ b/src/BIMDataSmartComponents/BIMDataFileManager/utils/files.js @@ -86,14 +86,4 @@ async function downloadFiles(files, apiInfos = {}) { } } -function getFileExtension(file) { - const match = file.name.match(/\.([0-9a-z]+$)/); - const extension = match && match[1]; - if (extension && extension.toLowerCase() === "ifczip") { - return "ifc"; - } else { - return extension; - } -} - -export { downloadFiles, getFileExtension }; +export { downloadFiles }; diff --git a/src/store.js b/src/store.js index 87321410..8f1e26c6 100644 --- a/src/store.js +++ b/src/store.js @@ -154,6 +154,13 @@ export default new Vuex.Store({ text: "Dropdown component shows a simple menu.", btn: "View dropdown menu", }, + { + title: "FileIcon", + img: require("./web/assets/img/icon-icons.svg"), + path: "fileicon", + text: "FileIcon is used to provide file visual context.", + btn: "View FileIcon", + }, { title: "Icons", img: require("./web/assets/img/icon-icons.svg"), diff --git a/src/web/router/router.js b/src/web/router/router.js index 87d428e0..166254ff 100644 --- a/src/web/router/router.js +++ b/src/web/router/router.js @@ -27,6 +27,7 @@ import Card from "../views/Components/Card/Card.vue"; import Checkbox from "../views/Components/Checkbox/Checkbox.vue"; import DropdownMenu from "../views/Components/DropdownMenu/DropdownMenu.vue"; import DropdownList from "../views/Components/DropdownList/DropdownList.vue"; +import FileIcon from "../views/Components/FileIcon/FileIcon.vue"; import Icons from "../views/Components/Icons/Icons.vue"; import Illustrations from "../views/Components/Illustrations/Illustrations.vue"; import Input from "../views/Components/Input/Input.vue"; @@ -171,6 +172,11 @@ const routes = [ name: "dropdownmenu", component: DropdownMenu, }, + { + path: "fileicon", + name: "fileicon", + component: FileIcon, + }, { path: "icons", name: "icons", diff --git a/src/web/views/Components/FileIcon/FileIcon.vue b/src/web/views/Components/FileIcon/FileIcon.vue new file mode 100644 index 00000000..1ece61d3 --- /dev/null +++ b/src/web/views/Components/FileIcon/FileIcon.vue @@ -0,0 +1,97 @@ + + +