Skip to content

Updates Ui for tasks. #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Updates Ui for tasks. #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4f8edb4
Add Checklist items
AbdullahiAbdulkabir Aug 3, 2022
6e5c085
4.1.1
AbdullahiAbdulkabir Aug 3, 2022
1b7f192
Remove unrelated codes
AbdullahiAbdulkabir Aug 3, 2022
b7a6362
Fix spacings, removed unsused codes
AbdullahiAbdulkabir Aug 3, 2022
bed8501
Fix lint
AbdullahiAbdulkabir Aug 3, 2022
b7e57ec
Fix lint
AbdullahiAbdulkabir Aug 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@enso-ui/tasks",
"version": "4.0.1",
"version": "4.1.1",
"description": "Basic tasks package",
"main": "src/bulma/pages/tasks/Index.vue",
"scripts": {
Expand Down
14 changes: 14 additions & 0 deletions src/bulma/modules/task.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
const cssClass = (statuses, { status }) => {
switch (status) {
case parseInt(statuses.Finished):
return 'is-success';
case parseInt(statuses.Progress):
return 'is-warning';
case parseInt(statuses.New):
return 'is-info';
default:
return '';
}
};

export default cssClass;
20 changes: 12 additions & 8 deletions src/bulma/pages/tasks/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,13 @@
</template>
</dropdown>
</template>
<template #status="{ column, row }">
<span
class="tag is-table-tag "
:class="cssClass(column.enum, row)">
{{ column.enum._get(row.status) }}
</span>
</template>
<template #reminder="{ row }">
<dropdown :triggers="['click']"
:auto-hide="false"
Expand Down Expand Up @@ -95,13 +102,6 @@
:user="row.allocatedTo"
v-else/>
</template>
<template #completed="{ row }">
<div class="is-flex is-justify-content-center">
<vue-switch class="is-medium"
v-model="row.completed"
@update:model-value="update(row.id, 'completed', row.completed)"/>
</div>
</template>
<template #createdBy="{ row: { createdBy } }">
<avatar class="is-24x24"
:user="createdBy"/>
Expand Down Expand Up @@ -131,6 +131,7 @@ import { Dropdown } from 'v-tooltip';
import { clickOutside } from '@enso-ui/directives';
import Filters from './components/Filters.vue';
import Flags from './components/Flags.vue';
import cssClass from '../../modules/task';

library.add(faClock, faInfoCircle, faCog);

Expand Down Expand Up @@ -159,7 +160,7 @@ export default {
ready: false,
filters: {
tasks: {
completed: false,
status: 1,
flag: null,
allocated_to: null,
},
Expand Down Expand Up @@ -205,6 +206,9 @@ export default {
}
});
},
cssClass(columnEnum, row) {
return cssClass(columnEnum, row);
}
},
};
</script>
Expand Down
172 changes: 172 additions & 0 deletions src/bulma/pages/tasks/Show.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<template>
<div v-if="task" class="containter m-auto">
<div class="columns mx-0 box">
<div class="column is-two-third-tablet px-5">
<div class="columns">
<div class="column is-three-quarters is-size-7 pl-5">
Updated {{ task.updatedAt }} | Created by
<a>
<strong>{{ task.createdBy.person.name }}
</strong>
</a>
</div>
<div class="column pt-0">
<fa
:class="{ 'has-text-grey': !task.muted }" @click="notification"
class="bell is-clickable is-pulled-right is-flex fa-2xl" icon="bell" />
</div>
</div>
<div class="column">
<h4 class="title is-4">
{{ task.name }}
</h4>
</div>
<div class="column">
<div class="columns">
<div class="column is-one-fifth">
<div class="mt-3">Status</div>
<div class="mt-4">From - To</div>
<div class="mt-3">Flag</div>
<div class="mt-3">Allocated To</div>
</div>
<div class="column is-two-fifth">
<div class="mt-3">
<span v-for="(status, id) in enums.statuses._all()">
<span class="tag is-table-tag" :class="cssClass(enums.statuses, task)"
v-if="task.status == id">
{{ status }}
</span>
</span>
</div>
<div class="mt-3">
{{ task.from }} - {{ task.to }}
</div>
<div class="mt-3">
<span v-for="(flag, id) in enums.flags._all()" class="icon"
:class="`has-text-${flag.toLowerCase()}`">
<fa v-if="id == task.flag" icon="flag" />
</span>
</div>
<div class="mt-3">
<figure class="is-flex is-align-items-center avatar">
<p class="image is-32x32 mr-2">
<img class="is-rounded" alt="avatar"
:src="route('core.avatars.show', task.allocatedTo.avatar.id)">
</p>
{{ task.allocatedTo.person.name }}
</figure>
</div>
</div>
</div>
<Divider />
<div class="mt-5">
<div>
<strong>{{ i18n('Description') }}</strong>
</div>
<div class="my-4">
{{ task.description }}
</div>
</div>
<Divider />
<div class="mt-5">
<div>
<strong>{{ i18n('Checklist') }} ({{ task.completedTaskChecklistItems }})</strong>
</div>
<div>
<checklist-items :id="taskId" :taskChecklistItems="taskChecklistItems" @update="fetch();"
type="task" ref="checklists" />
</div>
</div>
</div>
</div>
<div class="column pt-0 is-one-third">
<comments
:id="taskId"
type="task" r
ef="comments" />
</div>
</div>
</div>
</template>

<script>
import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCloudDownloadAlt, faBell } from '@fortawesome/free-solid-svg-icons';
import { hljs } from '@enso-ui/directives';
import { mapState } from "vuex";
import ChecklistItems from './components/checklists/ChecklistItems.vue';
import cssClass from '../../modules/task';
import Divider from '@enso-ui/divider';
import Comments from './components/comments/Comments.vue';


library.add(faCloudDownloadAlt, faBell);

export default {
name: 'Show',

directives: { hljs },

components: {
Fa,
ChecklistItems,
Divider,
Comments
},

inject: ['errorHandler', 'http', 'i18n', 'route', 'toastr', 'routerErrorHandler'],

data: () => ({
task: null,
taskChecklistItems: [],

}),
computed: {
...mapState(['meta', 'enums']),
taskId() {
return Number.parseInt(this.$route.params.task, 10);
},
},

created() {
this.fetch();
},

methods: {
fetch() {
this.http.get(this.route('tasks.show', this.$route.params.task))
.then(({ data }) => {
this.task = data.task;
this.taskChecklistItems = data.task.taskChecklistItems;
}).catch(this.errorHandler);
},
cssClass(columnEnum, row) {
return cssClass(columnEnum, row);
},
notification() {
this.http.patch(this.route('tasks.update', { 'task': this.task }),
{ muted: !this.task.muted })
.then(({ data: { message } }) => {
this.toastr.success(message);
this.fetch()
}).catch(error => {
if (error.response && error.response.status === 422) {
this.toastr.warning(this.i18n(error.response.data.message));
} else {
this.errorHandler(error);
}
});
}
},
};
</script>

<style src="highlight.js/styles/atom-one-light.css">
</style>

<style lang="scss">
.wrapper {
padding: 1.2em;
}
</style>
25 changes: 13 additions & 12 deletions src/bulma/pages/tasks/components/Filters.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="columns is-centered is-multiline">
<div class="column is-narrow">
<enso-select-filter class="box raises-on-hover allocation-filter"
<div class="column is-narrow is-one-fifth">
<enso-select-filter class="box raises-on-hover"
v-model="filters.tasks.allocated_to"
source="administration.users.options"
label="person.name"
Expand All @@ -14,11 +14,12 @@
:options="flagOptions"
:name="i18n('Importance')"/>
</div>
<div class="column is-narrow">
<boolean-filter class="box raises-on-hover"
v-model="filters.tasks.completed"
icons
:name="i18n('Completed')"/>
<div class="column is-narrow is-2">
<enso-select-filter
class="box raises-on-hover"
v-model="filters.tasks.status"
:options="enums.statuses._select()"
:name="i18n('Status')"/>
</div>
<div class="column is-narrow">
<enso-filter class="box raises-on-hover"
Expand All @@ -27,8 +28,10 @@
:options="overdueOptions"
:name="i18n('Overdue')"/>
</div>
</div>
<div class="columns is-centered">
<div class="column is-narrow">
<enso-date-filter class="box raises-on-hover"
<enso-date-filter class="box raises-on-hover"
v-model:filter="params.dateFilter"
v-model:interval="intervals.tasks.reminder"/>
</div>
Expand All @@ -42,14 +45,15 @@ import {
} from '@enso-ui/filters/bulma';
import { faFlag, faExclamation } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import { EnsoSelect } from '@enso-ui/select/bulma';

library.add(faFlag, faExclamation);

export default {
name: 'Filters',

components: {
BooleanFilter, EnsoDateFilter, EnsoFilter, EnsoSelectFilter,
BooleanFilter, EnsoDateFilter, EnsoFilter, EnsoSelectFilter, EnsoSelect
},

inject: ['i18n'],
Expand Down Expand Up @@ -91,7 +95,4 @@ export default {
</script>

<style lang="scss">
.allocation-filter {
width: 250px;
}
</style>
Loading