Todos Support (#681)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
2026-09-29 13:05:08 +02:00 · 2021-12-20 11:18:29 +01:00
parent ec738daf75
commit 56380c4958
22 changed files with 564 additions and 74 deletions
@@ -0,0 +1,76 @@
+<!--
+// 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 type { Class, Ref, Space } from '@anticrm/core'
+  import { Card, getClient } from '@anticrm/presentation'
+  import type { Task } from '@anticrm/task'
+  import { DatePicker, EditBox, Grid } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
+  import task from '../../plugin'
+
+  export let objectId: Ref<Task>
+  export let _class: Ref<Class<Task>>
+  export let space: Ref<Space>
+
+  let name: string
+  const done = false
+  let dueTo: Date
+
+  $: _space = space
+
+  const dispatch = createEventDispatcher()
+  const client = getClient()
+
+  export function canClose (): boolean {
+    return objectId === undefined
+  }
+
+  async function createTodo () {
+    await client.addCollection(
+      task.class.TodoItem,
+      space,
+      objectId,
+      _class,
+      'todos',
+      {
+        name,
+        done,
+        dueTo: dueTo?.getTime() ?? undefined
+      }
+    )
+  }
+</script>
+
+<Card
+  label={task.string.TodoCreate}
+  okAction={createTodo}
+  canSave={name?.length > 0}
+  bind:space={_space}
+  on:close={() => {
+    dispatch('close')
+  }}
+  okLabel={task.string.TodoSave}>
+    <Grid column={1} rowGap={1.75}>
+      <EditBox
+      label={task.string.TodoDescription}
+      bind:value={name}
+      icon={task.icon.Task}
+      placeholder="todo..."
+      maxWidth="39rem"
+      focus
+    />
+    <DatePicker title={task.string.TodoDueDate} bind:selected={dueTo} />
+  </Grid>
+</Card>
@@ -0,0 +1,91 @@
+<!--
+// 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 type { DocumentUpdate, Ref, Timestamp } from '@anticrm/core'
+  import { IntlString } from '@anticrm/platform'
+  import { Card, getClient } from '@anticrm/presentation'
+  import type { TodoItem } from '@anticrm/task'
+  import { DatePicker, EditBox, Grid } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
+  import task from '../../plugin'
+
+  export let item: TodoItem
+
+  let name: string = ''
+  let dueTo: Date | undefined
+
+  let _itemId: Ref<TodoItem>
+
+  $: if (_itemId !== item._id) {
+    _itemId = item._id
+    name = item.name
+    dueTo = new Date(item.dueTo ?? 0)
+    console.log('AHTUNG', item, dueTo)
+  }
+
+  const dispatch = createEventDispatcher()
+  const client = getClient()
+
+  export function canClose (): boolean {
+    return true
+  }
+
+  async function editTodo () {
+    const ops: DocumentUpdate<TodoItem> = {}
+    if (item.name !== name) {
+      ops.name = name
+    }
+    if (item.dueTo !== dueTo) {
+      ops.dueTo = (dueTo?.getTime() ?? null) as unknown as Timestamp
+    }
+    console.log('AHTUNG', ops)
+
+    if (Object.keys(ops).length === 0) {
+      return
+    }
+  
+    await client.updateCollection(
+      item._class,
+      item.space,
+      item._id,
+      item.attachedTo,
+      item.attachedToClass,
+      item.collection,
+      ops
+    )
+  }
+</script>
+
+<Card
+  label={task.string.TodoEdit}
+  okAction={editTodo}
+  canSave={name.length > 0}
+  space={item.space}
+  on:close={() => {
+    dispatch('close')
+  }}
+  okLabel={task.string.TodoSave}>
+    <Grid column={1} rowGap={1.75}>
+      <EditBox
+      label={task.string.TodoDescription}
+      bind:value={name}
+      icon={task.icon.Task}
+      placeholder="todo..."
+      maxWidth="39rem"
+      focus
+    />
+    <DatePicker title={task.string.TodoDueDate} bind:selected={dueTo} />
+  </Grid>
+</Card>
@@ -0,0 +1,33 @@
+<!--
+// 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
+// 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 type { TodoItem } from '@anticrm/task'
+  import { closeTooltip, Icon, showPopup } from '@anticrm/ui'
+  import task from '../../plugin'
+  import EditTodo from './EditTodo.svelte'
+
+  export let value: TodoItem
+
+
+  function show (elm: EventTarget | null) {
+    closeTooltip()
+    showPopup(EditTodo, { item: value }, elm as HTMLElement)
+  }
+</script>
+
+<div class="sm-tool-icon" on:click={(evt) => show(evt.target)}>
+  <span class="icon"><Icon icon={task.icon.Task} size={'small'} /></span>{value.name}
+</div>
@@ -0,0 +1,47 @@
+<!--
+// 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
+// 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 type { TodoItem } from '@anticrm/task'
+  import { Label } from '@anticrm/ui'
+  import task from '../../plugin'
+  export let value: TodoItem
+
+  $: color = value.done ? '#60B96E' : '#6F7BC5'
+  $: text = value.done ? task.string.DoneState : task.string.UndoneState
+
+</script>
+
+{#if value }
+  <div class="overflow-label state-container" style="background-color: {color};">    
+    <Label label={text}/>
+  </div>
+{/if}
+
+<style lang="scss">
+  .state-container {
+    padding: .25rem .5rem;
+    width: 6.25rem;
+    max-width: 6.25rem;
+    text-transform: uppercase;
+    text-align: center;
+    letter-spacing: .5px;
+    font-size: .625rem;
+    color: #fff;
+    border: 1px solid rgba(0, 0, 0, .1);
+    border-radius: .25rem;
+  }
+</style>
@@ -0,0 +1,86 @@
+<!--
+// 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 type { Ref, Space, Doc, Class } from '@anticrm/core'
+  import type { TodoItem } from '@anticrm/task'
+  import { createQuery } from '@anticrm/presentation'
+  import { CircleButton, IconAdd, showPopup, Label } from '@anticrm/ui'
+  import CreateTodo from './CreateTodo.svelte'
+  import { Table } from '@anticrm/view-resources'
+
+  import task from '../../plugin'
+
+  export let objectId: Ref<Doc>
+  export let space: Ref<Space>
+  export let _class: Ref<Class<Doc>>
+
+  let todos: TodoItem[] = []
+
+  const query = createQuery()
+  $: query.query(task.class.TodoItem, { attachedTo: objectId }, result => { todos = result })
+
+  const createApp = (ev: MouseEvent): void => {
+    showPopup(CreateTodo, { objectId, _class, space }, ev.target as HTMLElement)
+  }
+</script>
+
+<div class="applications-container">
+  <div class="flex-row-center">
+    <div class="title">To Do's</div>
+    <CircleButton icon={IconAdd} size={'small'} selected on:click={createApp} />
+  </div>
+  {#if todos.length > 0}
+    <Table 
+      _class={task.class.TodoItem}
+      config={[{ key: '', label: task.string.TodoName }, 'dueTo', { key: 'done', presenter: task.component.TodoStatePresenter, label: task.string.TodoState }]}
+      options={
+        {
+          // lookup: {
+          // }
+        }
+      }
+      query={ { attachedTo: objectId } }
+    />
+  {:else}
+    <div class="flex-col-center mt-5 createapp-container">
+      <div class="small-text">
+        <a href={'#'} on:click={createApp}><Label label={task.string.NoTodoItems} /></a>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .applications-container {
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      margin-right: .75rem;
+      font-weight: 500;
+      font-size: 1.25rem;
+      color: var(--theme-caption-color);
+    }
+  }
+
+  .createapp-container {
+    padding: 1rem;
+    color: var(--theme-caption-color);
+    background: var(--theme-bg-accent-color);
+    border: 1px solid var(--theme-bg-accent-color);
+    border-radius: .75rem;
+  }
+</style>