Setting plugin (#328)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
2026-09-30 13:35:04 +02:00 · 2021-11-22 13:06:14 +01:00
parent ef0c3e8c91
commit 5e807d466a
54 changed files with 2629 additions and 1284 deletions
@@ -0,0 +1,108 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { Button, Component, Label, Link } from '@anticrm/ui'
+  import { getMetadata } from '@anticrm/platform'
+  import { showPopup } from '@anticrm/ui'
+  import type { Integration, IntegrationType } from '@anticrm/setting'
+  import setting from '@anticrm/setting'
+  import { getClient } from '@anticrm/presentation'
+  import type { Ref, Space } from '@anticrm/core'
+  import login from '@anticrm/login'
+
+  export let integrationType: IntegrationType
+  export let integration: Integration | undefined
+  const accountId = getMetadata(login.metadata.LoginEmail)
+  const client = getClient()
+
+  async function close(res: any): Promise<void> {
+    if (res.value) {
+      await client.createDoc(setting.class.Integration, accountId as Ref<Space>, {
+        type: integrationType._id,
+        value: res.value
+      })
+    }
+  }
+
+  async function disconnect(): Promise<void> {
+    if (integration !== undefined) {
+      await client.removeDoc(setting.class.Integration, accountId as Ref<Space>, integration._id)
+    }
+  }
+</script>
+
+<div class="flex-col plugin-container">
+  <div class="flex-row-center header">
+    <div class="icon mr-4"><Component is={integrationType.icon} /></div>
+    <div class="flex-grow flex-col">
+      <div class="fs-title max-label overflow-label"><Label label={integrationType.label} /></div>
+      <div class="small-text content-dark-color max-label overflow-label">
+        <Label label={integrationType.description} />
+      </div>
+    </div>
+  </div>
+  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp</div>
+  <div class="footer">
+    {#if integration}
+      <Button label={'Disconnect'} on:click={disconnect} />
+    {:else}
+      <Button
+        label={'Add'}
+        primary
+        on:click={(e) => {
+          showPopup(integrationType.createComponent, {}, e.target, close)
+        }}
+      />
+      <Link label={'Learn more'} />
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  .plugin-container {
+    background-color: var(--theme-button-bg-enabled);
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: 0.75rem;
+  }
+  .header {
+    margin: 1.5rem 1.5rem 1rem;
+  }
+  .max-label {
+    max-width: calc(100% - 6.25rem);
+  }
+  .icon {
+    flex-shrink: 0;
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+  .content {
+    margin: 0 1.5rem 0.25rem;
+    color: var(--theme-caption-color);
+  }
+  .footer {
+    flex-shrink: 0;
+    display: grid;
+    grid-auto-flow: column;
+    direction: rtl;
+    justify-content: start;
+    align-items: center;
+    column-gap: 1rem;
+    padding: 1.5rem 1.75rem 1.25rem;
+    height: 5.25rem;
+    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
+    overflow: hidden;
+    border-radius: 0 0 1.25rem 1.25rem;
+  }
+</style>