Merge pull request #339 from hcengineering/boolean-presenter

Boolean presenter

models/view/src/index.ts

@@ -97,6 +97,10 @@ export function createModel (builder: Builder): void {
     presenter: view.component.StringPresenter
   })
 
+  builder.mixin(core.class.TypeBoolean, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: view.component.BooleanPresenter
+  })
+
   builder.mixin(core.class.TypeBoolean, core.class.Class, view.mixin.AttributeEditor, {
     editor: view.component.BooleanEditor
   })

models/view/src/plugin.ts

@@ -29,6 +29,7 @@ export default mergeIds(viewId, view, {
   component: {
     StringEditor: '' as AnyComponent,
     StringPresenter: '' as AnyComponent,
+    BooleanPresenter: '' as AnyComponent,
     BooleanEditor: '' as AnyComponent,
     StatePresenter: '' as AnyComponent,
     TimestampPresenter: '' as AnyComponent,

plugins/view-resources/src/components/BooleanPresenter.svelte

@@ -1,5 +1,6 @@
 <!--
 // Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
 // 
 // 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
@@ -14,24 +15,21 @@
 -->
 
 <script lang="ts">
+  import { IntlString } from '@anticrm/platform'
   import { Label } from '@anticrm/ui'
-
-  export let value: boolean | undefined
-
-  function getLabel(value: boolean | undefined) {
-    if (value === true) return 'Yes'
-    if (value === false) return 'No'
-    return 'N/A'
+  
+  export let value: any
+  
+  function getLabel(value: boolean | undefined): IntlString {
+    if (value === true) return 'Yes' as IntlString
+    if (value === false) return 'No' as IntlString
+    return 'N/A' as IntlString
   }
 </script>
 
-<div class="flex-row-center yesno-container {value}" on:click={() => {
-  if (value === true) value = false
-  else if (value === false) value = undefined
-  else value = true
-}}>
+<div class="flex-row-center yesno-container" class:yes={value === true} class:no={value === false} class:unknown={value === undefined}>
   <svg class="svg-small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <circle cx="8" cy="8" r="6" class:yes={value === true} class:no={value === false} />
+    <circle class:yes={value === true} class:no={value === false} cx="8" cy="8" r="6"/>
     {#if value === true}
       <polygon fill="#fff" points="7.4,10.9 4.9,8.4 5.7,7.6 7.3,9.1 10.2,5.6 11.1,6.4 "/>
     {:else if value === false}

plugins/view-resources/src/index.ts

@@ -18,6 +18,7 @@ import type { Doc } from '@anticrm/core'
 import StringEditor from './components/StringEditor.svelte'
 import StringPresenter from './components/StringPresenter.svelte'
 import BooleanEditor from './components/BooleanEditor.svelte'
+import BooleanPresenter from './components/BooleanPresenter.svelte'
 import StatePresenter from './components/StatePresenter.svelte'
 import TimestampPresenter from './components/TimestampPresenter.svelte'
 import TableView from './components/TableView.svelte'
@@ -50,6 +51,7 @@ export default async () => ({
   component: {
     StringEditor,
     StringPresenter,
+    BooleanPresenter,
     BooleanEditor,
     StatePresenter,
     TableView,