Entwurf einer
dienstorientierten
Plug-in-Architektur für
Webanwendungen

const nearbuyPluginMuesliIndex: NearbuyPluginOptions = {
  id: "muesli-index",
  name: {
  	de: "Muesli-Index", en: "Muesli Index"
  },
  description: {
    en: "Calculates the 'Muesli index', representing the availability of ingredients
    required for a yummy muesli. Requests for missing ingredients can be added
    with one click."
  },
  version: packageJson.version,
  versionNearbuyCompatibility: packageJson.peerDependencies.nearbuy,
  url: new URL("http://localhost:3001"),
  iconPngBase64: "iVBORw0KGgoAAAA...",
  entryPoints: {
    dashboard: [{
      dashlet: [{
      	contentUrl: "https://nearbuy_muesli-index.jonas-thelemann.de/",
      }],
    }],
    plugin: {
    	contentUrl: "http://localhost:3001/",
    },
  },
}

val userinfo = parseUserinfo(String(Base64.getDecoder().decode(xUserinfoEncoded)))
this.scopes.addAll(userinfo.scope.split(" "))

val annotationScope =
	"${annotation.clazz.name.lowercase()}-${annotation.action.name.lowercase()}"
    
if (!(requestContext.securityContext as NearbuySecurityContext).hasScope(annotationScope)) {
	abort(requestContext)
}

@Allowed(READ, COMPANY, "{companyId}")

<Button
    onClick={(): void => this.props.
    onClose()}
/>


<Button
    onClick={(): void => this.saveOffer()}
    color="primary"
    variant="contained"
    disabled={...}
/>

<NbButton
    onNbButtonEvent={(): void =>
        this.props.onClose()
    }
    secondary
/>
<NbButton
    onNbButtonEvent={(): void =>
        this.saveOffer()
    }
    disabled={...}
/>

import { applyPolyfills, defineCustomElements }
	from "@dargmuesli/nearbuy-web-components/loader"

Vue.config.ignoredElements = [[/nb-\w+/]

applyPolyfills().then(() => {
    defineCustomElements()
})

{
    hydratePath: ’@dargmuesli/nearbuy-web-components/hydrate’,
    lib: ’@dargmuesli/nearbuy-web-components’,
    loaderPath: ’@dargmuesli/nearbuy-web-components/loader’,
    prefix: ’nb-’,
},

@Prop() secondary: boolean = false;
@Prop() disabled: boolean = false;
@Prop({ attribute: ’first-last’ }) name: Name = {
    first: ’Max’,
    last: ’Mustermann’
};
@Event() nbButtonEvent: EventEmitter<string>;



render() {
  return <button
        class={[
            "font-medium leading-7 px-4 py-1 rounded-full text-sm uppercase",
            ...(this.secondary ? ["nb-secondary"] : []),
            ...(this.disabled ? ["nb-disabled"] : [])
        ].join(’ ’)}
        onClick={() => this.nbButtonEvent.emit(this.getText())}
        part="nb-button"
        type="button"
    >
        <slot>{this.getText()}</slot>
    </button>;
}

button {
    background-color: var(--primary-color, #92BE9B);
    font-family: ’Quicksand’, sans-serif;
    @apply font-bold shadow-md text-white;
}

body.theme-muesli-index nb-button[secondary]::part(nb-button):hover {
    background-color: rgba(72 111 80 / 4%);
}