Initial commit voor Outlook plugin

This commit is contained in:
2024-10-04 10:18:51 +02:00
commit d02d5291ee
35 changed files with 16082 additions and 0 deletions

8
.eslintrc.json Normal file
View File

@@ -0,0 +1,8 @@
{
"plugins": [
"office-addins"
],
"extends": [
"plugin:office-addins/recommended"
]
}

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
node_modules
.vscode

BIN
assets/icon-128.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
assets/icon-16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
assets/icon-32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
assets/icon-64.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
assets/icon-80.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
assets/logo-filled.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

3
babel.config.json Normal file
View File

@@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env"]
}

BIN
dist/assets/icon-128.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
dist/assets/icon-16.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
dist/assets/icon-32.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
dist/assets/icon-64.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
dist/assets/icon-80.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
dist/assets/logo-filled.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

1
dist/commands.html vendored Normal file
View File

@@ -0,0 +1 @@
<!doctype html><html><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=Edge"/><script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script><script defer="defer" src="polyfill.js"></script><script defer="defer" src="commands.js"></script></head><body></body></html>

2
dist/commands.js vendored Normal file
View File

@@ -0,0 +1,2 @@
Office.onReady((function(){})),Office.actions.associate("action",(function(e){var i={type:Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,message:"Performed action.",icon:"Icon.80x80",persistent:!0};Office.context.mailbox.item.notificationMessages.replaceAsync("action",i),e.completed()}));
//# sourceMappingURL=commands.js.map

1
dist/commands.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"commands.js","mappings":"AAOAA,OAAOC,SAAQ,WACb,IAuBFD,OAAOE,QAAQC,UAAU,UAhBzB,SAAgBC,GACd,IAAMC,EAAU,CACdC,KAAMN,OAAOO,aAAaC,4BAA4BC,qBACtDJ,QAAS,oBACTK,KAAM,aACNC,YAAY,GAIdX,OAAOY,QAAQC,QAAQC,KAAKC,qBAAqBC,aAAa,SAAUX,GAGxED,EAAMa,WACR","sources":["webpack://office-addin-taskpane-js/./src/commands/commands.js"],"sourcesContent":["/*\n * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.\n * See LICENSE in the project root for license information.\n */\n\n/* global Office */\n\nOffice.onReady(() => {\n // If needed, Office.js is ready to be called.\n});\n\n/**\n * Shows a notification when the add-in command is executed.\n * @param event {Office.AddinCommands.Event}\n */\nfunction action(event) {\n const message = {\n type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,\n message: \"Performed action.\",\n icon: \"Icon.80x80\",\n persistent: true,\n };\n\n // Show a notification message.\n Office.context.mailbox.item.notificationMessages.replaceAsync(\"action\", message);\n\n // Be sure to indicate when the add-in command function is complete.\n event.completed();\n}\n\n// Register the function with Office.\nOffice.actions.associate(\"action\", action);\n"],"names":["Office","onReady","actions","associate","event","message","type","MailboxEnums","ItemNotificationMessageType","InformationalMessage","icon","persistent","context","mailbox","item","notificationMessages","replaceAsync","completed"],"sourceRoot":""}

224
dist/fc95fa02fd204a05f6f4.css vendored Normal file
View File

@@ -0,0 +1,224 @@
*
* Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
* See LICENSE in the project root for license information.
*/
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0; }
.ms-welcome__header {
padding: 20px;
padding-bottom: 20px;
padding-top: 20px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
align-items: center;
}
.ms-welcome__main {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: center;
align-items: center;
-webkit-flex: 1 0 0;
flex: 1 0 0;
padding: 10px 20px;
}
.ms-welcome__main > h2 {
width: 100%;
text-align: center;
}
.ms-welcome__features {
list-style-type: none;
margin-top: 20px;
}
.ms-welcome__features.ms-List .ms-ListItem {
padding-bottom: 20px;
display: -webkit-flex;
display: flex;
}
.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
margin-right: 10px;
}
.ms-welcome__action.ms-Button--hero {
margin-top: 30px;
}
.ms-Button.ms-Button--hero .ms-Button-label {
color: #0078d7;
}
.ms-Button.ms-Button--hero:hover .ms-Button-label,
.ms-Button.ms-Button--hero:focus .ms-Button-label{
color: #005a9e;
cursor: pointer;
}
b {
font-weight: bold;
}
/* CSS */
.run-button {
appearance: button;
backface-visibility: hidden;
background-color: #405cf5;
border-radius: 6px;
border-width: 0;
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
font-size: 100%;
height: 44px;
line-height: 1.15;
margin: 12px 0 0;
outline: none;
overflow: hidden;
padding: 0 25px;
position: relative;
text-align: center;
text-transform: none;
transform: translateZ(0);
transition: all .2s,box-shadow .08s ease-in;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100%;
}
.run-button {
cursor: pointer;
}
.run-button:hover {
transform: scale(1.1);
}
.run-button {
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}
/* Loading CSS for button */
.loader {
display: none;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid blue;
border-radius: 50%;
width: 25px;
height: 25px;
animation: spin 1s linear infinite;
margin-left: 10px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
background-color: #ccc;
pointer-events: none;
}
/* CSS */
.result-button {
appearance: button;
backface-visibility: hidden;
background-color: #47bf67;
border-radius: 6px;
border-width: 0;
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
font-size: 100%;
height: 44px;
line-height: 1.15;
margin: 12px 0 0;
outline: none;
overflow: hidden;
padding: 0 25px;
position: relative;
text-align: center;
text-transform: none;
transform: translateZ(0);
transition: all .2s,box-shadow .08s ease-in;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100%;
}
.result-button {
cursor: pointer;
}
.result-button:hover {
transform: scale(1.1);
}
.result-button {
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}
/* CSS */
.no-result-button {
appearance: button;
backface-visibility: hidden;
background-color: #bf4747;
border-radius: 6px;
border-width: 0;
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
font-size: 100%;
height: 44px;
line-height: 1.15;
margin: 12px 0 0;
outline: none;
overflow: hidden;
padding: 0 25px;
position: relative;
text-align: center;
text-transform: none;
transform: translateZ(0);
transition: all .2s,box-shadow .08s ease-in;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100%;
}
.no-result-button {
cursor: pointer;
}

107
dist/manifest.xml vendored Normal file
View File

@@ -0,0 +1,107 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" xsi:type="MailApp">
<Id>6aefdc1b-c9c2-4f92-95c7-af96bd9ced13</Id>
<Version>1.0.0.0</Version>
<ProviderName>Contoso</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="order-finder"/>
<Description DefaultValue="A template to get started."/>
<IconUrl DefaultValue="https://www.contoso.com/assets/icon-64.png"/>
<HighResolutionIconUrl DefaultValue="https://www.contoso.com/assets/icon-128.png"/>
<SupportUrl DefaultValue="https://www.contoso.com/help"/>
<AppDomains>
<AppDomain>https://www.contoso.com</AppDomain>
</AppDomains>
<Hosts>
<Host Name="Mailbox"/>
</Hosts>
<Requirements>
<Sets>
<Set Name="Mailbox" MinVersion="1.1"/>
</Sets>
</Requirements>
<FormSettings>
<Form xsi:type="ItemRead">
<DesktopSettings>
<SourceLocation DefaultValue="https://www.contoso.com/taskpane.html"/>
<RequestedHeight>250</RequestedHeight>
</DesktopSettings>
</Form>
</FormSettings>
<Permissions>ReadWriteItem</Permissions>
<Rule xsi:type="RuleCollection" Mode="Or">
<Rule xsi:type="ItemIs" ItemType="Message" FormType="Read"/>
</Rule>
<DisableEntityHighlighting>false</DisableEntityHighlighting>
<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
<Requirements>
<bt:Sets DefaultMinVersion="1.3">
<bt:Set Name="Mailbox"/>
</bt:Sets>
</Requirements>
<Hosts>
<Host xsi:type="MailHost">
<DesktopFormFactor>
<FunctionFile resid="Commands.Url"/>
<ExtensionPoint xsi:type="MessageReadCommandSurface">
<OfficeTab id="TabDefault">
<Group id="msgReadGroup">
<Label resid="GroupLabel"/>
<Control xsi:type="Button" id="msgReadOpenPaneButton">
<Label resid="TaskpaneButton.Label"/>
<Supertip>
<Title resid="TaskpaneButton.Label"/>
<Description resid="TaskpaneButton.Tooltip"/>
</Supertip>
<Icon>
<bt:Image size="16" resid="Icon.16x16"/>
<bt:Image size="32" resid="Icon.32x32"/>
<bt:Image size="80" resid="Icon.80x80"/>
</Icon>
<Action xsi:type="ShowTaskpane">
<SourceLocation resid="Taskpane.Url"/>
</Action>
</Control>
<Control xsi:type="Button" id="ActionButton">
<Label resid="ActionButton.Label"/>
<Supertip>
<Title resid="ActionButton.Label"/>
<Description resid="ActionButton.Tooltip"/>
</Supertip>
<Icon>
<bt:Image size="16" resid="Icon.16x16"/>
<bt:Image size="32" resid="Icon.32x32"/>
<bt:Image size="80" resid="Icon.80x80"/>
</Icon>
<Action xsi:type="ExecuteFunction">
<FunctionName>action</FunctionName>
</Action>
</Control>
</Group>
</OfficeTab>
</ExtensionPoint>
</DesktopFormFactor>
</Host>
</Hosts>
<Resources>
<bt:Images>
<bt:Image id="Icon.16x16" DefaultValue="https://www.contoso.com/assets/icon-16.png"/>
<bt:Image id="Icon.32x32" DefaultValue="https://www.contoso.com/assets/icon-32.png"/>
<bt:Image id="Icon.80x80" DefaultValue="https://www.contoso.com/assets/icon-80.png"/>
</bt:Images>
<bt:Urls>
<bt:Url id="Commands.Url" DefaultValue="https://www.contoso.com/commands.html"/>
<bt:Url id="Taskpane.Url" DefaultValue="https://www.contoso.com/taskpane.html"/>
</bt:Urls>
<bt:ShortStrings>
<bt:String id="GroupLabel" DefaultValue="Contoso Add-in"/>
<bt:String id="TaskpaneButton.Label" DefaultValue="Show Taskpane"/>
<bt:String id="ActionButton.Label" DefaultValue="Perform an action"/>
</bt:ShortStrings>
<bt:LongStrings>
<bt:String id="TaskpaneButton.Tooltip" DefaultValue="Opens a pane displaying all available properties."/>
<bt:String id="ActionButton.Tooltip" DefaultValue="Perform an action when clicked."/>
</bt:LongStrings>
</Resources>
</VersionOverrides>
</OfficeApp>

2
dist/polyfill.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/polyfill.js.map vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/taskpane.html vendored Normal file
View File

@@ -0,0 +1 @@
<!doctype html><html><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=Edge"/><meta name="viewport" content="width=device-width,initial-scale=1"><title>Contoso Task Pane Add-in</title><script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script><link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"/><link href="fc95fa02fd204a05f6f4.css" rel="stylesheet"/><script defer="defer" src="polyfill.js"></script><script defer="defer" src="taskpane.js"></script></head><body class="ms-font-m ms-welcome ms-Fabric"><header class="ms-welcome__header"><h1 class="ms-font-su" style="color:#fff">OVAS</h1></header><main style="color:#fff" id="app-body" class="ms-welcome__main" style="display:none"><ul class="ms-List ms-welcome__features"><li class="ms-ListItem"><i class="ms-Icon ms-Icon--Ribbon ms-font-xl"></i> <span class="ms-font-m">Zoek bijbehorende bestellingen efficient vanuit Outlook</span></li></ul><button class="run-button" id="run"><span id="btn-text">Zoek naar bestellingen</span><div class="loader" id="loader"></div></button><p><label id="item-subject"></label></p><div id="results"></div></main></body></html>

3
dist/taskpane.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/taskpane.js.LICENSE.txt vendored Normal file
View File

@@ -0,0 +1 @@
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

1
dist/taskpane.js.map vendored Normal file

File diff suppressed because one or more lines are too long

107
manifest.xml Normal file
View File

@@ -0,0 +1,107 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" xsi:type="MailApp">
<Id>6aefdc1b-c9c2-4f92-95c7-af96bd9ced13</Id>
<Version>1.0.0.0</Version>
<ProviderName>OVAS</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue="Order finder OVAS"/>
<Description DefaultValue="Vind bestellingen die eventueel bij de e-mail horen"/>
<IconUrl DefaultValue="https://localhost:3000/assets/icon-64.png"/>
<HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-128.png"/>
<SupportUrl DefaultValue="https://ovas.nl"/>
<AppDomains>
<AppDomain>https://localhost:3000</AppDomain>
</AppDomains>
<Hosts>
<Host Name="Mailbox"/>
</Hosts>
<Requirements>
<Sets>
<Set Name="Mailbox" MinVersion="1.1"/>
</Sets>
</Requirements>
<FormSettings>
<Form xsi:type="ItemRead">
<DesktopSettings>
<SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
<RequestedHeight>250</RequestedHeight>
</DesktopSettings>
</Form>
</FormSettings>
<Permissions>ReadWriteItem</Permissions>
<Rule xsi:type="RuleCollection" Mode="Or">
<Rule xsi:type="ItemIs" ItemType="Message" FormType="Read"/>
</Rule>
<DisableEntityHighlighting>false</DisableEntityHighlighting>
<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
<Requirements>
<bt:Sets DefaultMinVersion="1.3">
<bt:Set Name="Mailbox"/>
</bt:Sets>
</Requirements>
<Hosts>
<Host xsi:type="MailHost">
<DesktopFormFactor>
<FunctionFile resid="Commands.Url"/>
<ExtensionPoint xsi:type="MessageReadCommandSurface">
<OfficeTab id="TabDefault">
<Group id="msgReadGroup">
<Label resid="GroupLabel"/>
<Control xsi:type="Button" id="msgReadOpenPaneButton">
<Label resid="TaskpaneButton.Label"/>
<Supertip>
<Title resid="TaskpaneButton.Label"/>
<Description resid="TaskpaneButton.Tooltip"/>
</Supertip>
<Icon>
<bt:Image size="16" resid="Icon.16x16"/>
<bt:Image size="32" resid="Icon.32x32"/>
<bt:Image size="80" resid="Icon.80x80"/>
</Icon>
<Action xsi:type="ShowTaskpane">
<SourceLocation resid="Taskpane.Url"/>
</Action>
</Control>
<Control xsi:type="Button" id="ActionButton">
<Label resid="ActionButton.Label"/>
<Supertip>
<Title resid="ActionButton.Label"/>
<Description resid="ActionButton.Tooltip"/>
</Supertip>
<Icon>
<bt:Image size="16" resid="Icon.16x16"/>
<bt:Image size="32" resid="Icon.32x32"/>
<bt:Image size="80" resid="Icon.80x80"/>
</Icon>
<Action xsi:type="ExecuteFunction">
<FunctionName>action</FunctionName>
</Action>
</Control>
</Group>
</OfficeTab>
</ExtensionPoint>
</DesktopFormFactor>
</Host>
</Hosts>
<Resources>
<bt:Images>
<bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
<bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
<bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
</bt:Images>
<bt:Urls>
<bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html"/>
<bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
</bt:Urls>
<bt:ShortStrings>
<bt:String id="GroupLabel" DefaultValue="OVAS (Zoek bestellingen)"/>
<bt:String id="TaskpaneButton.Label" DefaultValue="Bestellingen zoeken"/>
<bt:String id="ActionButton.Label" DefaultValue="Perform an action"/>
</bt:ShortStrings>
<bt:LongStrings>
<bt:String id="TaskpaneButton.Tooltip" DefaultValue="Opent een paneel waar je bestellingen kan zoeken voor de des betreffende e-mail"/>
<bt:String id="ActionButton.Tooltip" DefaultValue="Perform an action when clicked."/>
</bt:LongStrings>
</Resources>
</VersionOverrides>
</OfficeApp>

14997
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

64
package.json Normal file
View File

@@ -0,0 +1,64 @@
{
"name": "office-addin-taskpane-js",
"version": "0.0.1",
"repository": {
"type": "git",
"url": "https://github.com/OfficeDev/Office-Addin-TaskPane-JS.git"
},
"license": "MIT",
"config": {
"app_to_debug": "outlook",
"app_type_to_debug": "desktop",
"dev_server_port": 3000
},
"scripts": {
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"dev-server": "webpack serve --mode development",
"lint": "office-addin-lint check",
"lint:fix": "office-addin-lint fix",
"prettier": "office-addin-lint prettier",
"signin": "office-addin-dev-settings m365-account login",
"signout": "office-addin-dev-settings m365-account logout",
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
"stop": "office-addin-debugging stop manifest.xml",
"validate": "office-addin-manifest validate manifest.xml",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"core-js": "^3.36.0",
"regenerator-runtime": "^0.14.1"
},
"devDependencies": {
"@babel/core": "^7.24.0",
"@babel/preset-env": "^7.12.11",
"@types/office-js": "^1.0.377",
"@types/office-runtime": "^1.0.35",
"acorn": "^8.11.3",
"babel-loader": "^9.1.3",
"copy-webpack-plugin": "^12.0.2",
"eslint-plugin-office-addins": "^3.0.2",
"file-loader": "^6.2.0",
"html-loader": "^5.0.0",
"html-webpack-plugin": "^5.6.0",
"office-addin-cli": "^1.6.3",
"office-addin-debugging": "^5.1.4",
"office-addin-dev-certs": "^1.13.3",
"office-addin-lint": "^2.3.3",
"office-addin-manifest": "^1.13.4",
"office-addin-prettier-config": "^1.2.1",
"os-browserify": "^0.3.0",
"process": "^0.11.10",
"source-map-loader": "^5.0.0",
"webpack": "^5.90.3",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "5.0.3"
},
"prettier": "office-addin-prettier-config",
"browserslist": [
"last 2 versions",
"ie 11"
]
}

View File

@@ -0,0 +1,18 @@
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
</head>
<body>
</body>
</html>

32
src/commands/commands.js Normal file
View File

@@ -0,0 +1,32 @@
/*
* Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
* See LICENSE in the project root for license information.
*/
/* global Office */
Office.onReady(() => {
// If needed, Office.js is ready to be called.
});
/**
* Shows a notification when the add-in command is executed.
* @param event {Office.AddinCommands.Event}
*/
function action(event) {
const message = {
type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
message: "Performed action.",
icon: "Icon.80x80",
persistent: true,
};
// Show a notification message.
Office.context.mailbox.item.notificationMessages.replaceAsync("action", message);
// Be sure to indicate when the add-in command function is complete.
event.completed();
}
// Register the function with Office.
Office.actions.associate("action", action);

225
src/taskpane/taskpane.css Normal file
View File

@@ -0,0 +1,225 @@
*
* Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
* See LICENSE in the project root for license information.
*/
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
.ms-welcome__header {
padding: 20px;
padding-bottom: 20px;
padding-top: 20px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
align-items: center;
}
.ms-welcome__main {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: center;
align-items: center;
-webkit-flex: 1 0 0;
flex: 1 0 0;
padding: 10px 20px;
}
.ms-welcome__main > h2 {
width: 100%;
text-align: center;
}
.ms-welcome__features {
list-style-type: none;
margin-top: 20px;
}
.ms-welcome__features.ms-List .ms-ListItem {
padding-bottom: 20px;
display: -webkit-flex;
display: flex;
}
.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
margin-right: 10px;
}
.ms-welcome__action.ms-Button--hero {
margin-top: 30px;
}
.ms-Button.ms-Button--hero .ms-Button-label {
color: #0078d7;
}
.ms-Button.ms-Button--hero:hover .ms-Button-label,
.ms-Button.ms-Button--hero:focus .ms-Button-label{
color: #005a9e;
cursor: pointer;
}
b {
font-weight: bold;
}
/* CSS */
.run-button {
appearance: button;
backface-visibility: hidden;
background-color: #405cf5;
border-radius: 6px;
border-width: 0;
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
font-size: 100%;
height: 44px;
line-height: 1.15;
margin: 12px 0 0;
outline: none;
overflow: hidden;
padding: 0 25px;
position: relative;
text-align: center;
text-transform: none;
transform: translateZ(0);
transition: all .2s,box-shadow .08s ease-in;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100%;
}
.run-button {
cursor: pointer;
}
.run-button:hover {
transform: scale(1.1);
}
.run-button {
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}
/* Loading CSS for button */
.loader {
display: none;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid blue;
border-radius: 50%;
width: 25px;
height: 25px;
animation: spin 1s linear infinite;
margin-left: 10px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
background-color: #ccc;
pointer-events: none;
}
/* CSS */
.result-button {
appearance: button;
backface-visibility: hidden;
background-color: #47bf67;
border-radius: 6px;
border-width: 0;
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
font-size: 100%;
height: 44px;
line-height: 1.15;
margin: 12px 0 0;
outline: none;
overflow: hidden;
padding: 0 25px;
position: relative;
text-align: center;
text-transform: none;
transform: translateZ(0);
transition: all .2s,box-shadow .08s ease-in;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100%;
}
.result-button {
cursor: pointer;
}
.result-button:hover {
transform: scale(1.1);
}
.result-button {
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}
/* CSS */
.no-result-button {
appearance: button;
backface-visibility: hidden;
background-color: #bf4747;
border-radius: 6px;
border-width: 0;
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
font-size: 100%;
height: 44px;
line-height: 1.15;
margin: 12px 0 0;
outline: none;
overflow: hidden;
padding: 0 25px;
position: relative;
text-align: center;
text-transform: none;
transform: translateZ(0);
transition: all .2s,box-shadow .08s ease-in;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100%;
}
.no-result-button {
cursor: pointer;
}

View File

@@ -0,0 +1,43 @@
<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. -->
<!-- This file shows how to design a first-run page that provides a welcome screen to the user about the features of the add-in. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contoso Task Pane Add-in</title>
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"/>
<!-- Template styles -->
<link href="taskpane.css" rel="stylesheet" type="text/css" />
</head>
<body class="ms-font-m ms-welcome ms-Fabric">
<header class="ms-welcome__header">
<h1 class="ms-font-su" style="color: white;">OVAS</h1>
</header>
<main style="color: white;" id="app-body" class="ms-welcome__main" style="display: none;">
<ul class="ms-List ms-welcome__features">
<li class="ms-ListItem">
<i class="ms-Icon ms-Icon--Ribbon ms-font-xl"></i>
<span class="ms-font-m">Zoek bijbehorende bestellingen efficient vanuit Outlook</span>
</li>
</ul>
<button class="run-button" id="run">
<span id="btn-text">Zoek naar bestellingen</span>
<div class="loader" id="loader"></div>
</button>
<p><label id="item-subject"></label></p>
<div id="results"></div>
</main>
</body>
</html>

139
src/taskpane/taskpane.js Normal file
View File

@@ -0,0 +1,139 @@
/*
* Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
* See LICENSE in the project root for license information.
*/
/* global document, Office */
import axios from "axios";
const api_tokens = {
dev: "kstlkkRb85jWbS424SXs6bw0rMmJDAcLrUJD05sL",
test: "fEKxynKZrM14BqMY1c14vxUqoEdocpMol3woH6Lv",
prod: "Uvk3eiHf2NB8ahRC1ijXp0N1YrrhZ1eakIG9gTA0",
};
// axios conf
axios.defaults.headers.common["api-key"] = api_tokens.dev;
axios.defaults.headers.common["api-language"] = "nl";
const localApiUrl = "https://ozrp7bzqco.sharedwithexpose.com/api/zoek_bestelling";
const orderUrlEdit = "http://localhost:8080/bestellingen/edit/";
const orderUrlIndex = "http://localhost:8080/bestellingen";
Office.onReady((info) => {
if (info.host === Office.HostType.Outlook) {
document.getElementById("app-body").style.display = "flex";
document.getElementById("run").onclick = run;
}
});
export async function run() {
// Set load animation in button
loadAnimation(true);
let searchInfo = {
senderLastName: btoa(getLastName(Office.context.mailbox.item.sender.displayName)),
senderInitials: btoa(getInitials(Office.context.mailbox.item.sender.displayName)),
senderName: btoa(Office.context.mailbox.item.sender.displayName),
senderEmail: btoa(Office.context.mailbox.item.sender.emailAddress),
senderSubject: btoa(Office.context.mailbox.item.subject),
postalCodes: {},
};
searchInfo.postalCodes = await new Promise((resolve) => {
Office.context.mailbox.item.body.getAsync("text", function (async) {
resolve(getPostalCodesFromText(async.value));
});
});
// Make API call to see if we can find an order for the e-mail.
let results;
await search(searchInfo).then((res) => (results = res));
// Disable load animation in button
loadAnimation(false);
// Load results via buttons
showResults(results);
}
// Animation function for loader on button
function loadAnimation(animate) {
const loadButton = document.getElementById("run");
const loader = document.getElementById("loader");
const btnText = document.getElementById("btn-text");
if (animate) {
loadButton.disabled = true;
btnText.style.display = "none";
loader.style.display = "inline-block";
}
if (!animate) {
loadButton.disabled = false;
loader.style.display = "none";
btnText.style.display = "block";
}
}
// OVAS API call
async function search(searchInfo) {
let results = [];
await axios
.get(localApiUrl, {
params: searchInfo,
})
.then(function (res) {
results = res.data.results ?? [];
})
.catch((err) => err);
return results;
}
function getLastName(name) {
const nameParts = name.trim().split(" ");
const lastName = nameParts.slice(-1)[0]; // Pak het laatste deel als achternaam
return lastName;
}
function getInitials(name) {
const nameParts = name.trim().split(" ");
const firstName = nameParts[0];
const initials = firstName.charAt(0).toUpperCase() + ".";
return initials;
}
function getPostalCodesFromText(emailBody) {
const regex = /\b\d{4}\s?[A-Z]{2}\b/g;
return btoa(emailBody.match(regex));
}
function showResults(results) {
let resultDiv = document.getElementById("results");
resultDiv.innerHTML = "";
if (results.length > 0) {
results.forEach((result) => {
resultDiv.innerHTML += resultsFoundButton(result.id, result.lastname);
});
} else {
resultDiv.innerHTML = noResultsFoundButton();
}
}
function resultsFoundButton(id, customer) {
return `<button type="button" target="_blank" onclick="location.href='${orderUrlEdit}${id}'" class="result-button" style="text-decoration: none;">
<span class="btn-text" style="display: block;">Order ID: ${id} - ${customer}</span>
</button>`;
}
function noResultsFoundButton() {
return `<button type="button" onclick="location.href='${orderUrlIndex}'" class="no-result-button" style="text-decoration: none;">
<span class="btn-text" style="display: block;">Geen bestellingen gevonden...</span>
</button>`;
}

100
webpack.config.js Normal file
View File

@@ -0,0 +1,100 @@
/* eslint-disable no-undef */
const devCerts = require("office-addin-dev-certs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const urlDev = "https://localhost:3000/";
const urlProd = "https://www.contoso.com/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION
async function getHttpsOptions() {
const httpsOptions = await devCerts.getHttpsServerOptions();
return { ca: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
}
module.exports = async (env, options) => {
const dev = options.mode === "development";
const config = {
devtool: "source-map",
entry: {
polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
taskpane: ["./src/taskpane/taskpane.js", "./src/taskpane/taskpane.html"],
commands: "./src/commands/commands.js",
},
output: {
clean: true,
},
resolve: {
extensions: [".html", ".js"],
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader",
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
type: "asset/resource",
generator: {
filename: "assets/[name][ext][query]",
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: "taskpane.html",
template: "./src/taskpane/taskpane.html",
chunks: ["polyfill", "taskpane"],
}),
new CopyWebpackPlugin({
patterns: [
{
from: "assets/*",
to: "assets/[name][ext][query]",
},
{
from: "manifest*.xml",
to: "[name]" + "[ext]",
transform(content) {
if (dev) {
return content;
} else {
return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
}
},
},
],
}),
new HtmlWebpackPlugin({
filename: "commands.html",
template: "./src/commands/commands.html",
chunks: ["polyfill", "commands"],
}),
],
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
},
server: {
type: "https",
options: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
},
port: process.env.npm_package_config_dev_server_port || 3000,
},
};
return config;
};