Skip to content

Commit

Permalink
fixing vue3 toastify css for prod;
Browse files Browse the repository at this point in the history 
new layout for opened cards *using columns;
  • Loading branch information
@jnettome
jnettome committed Apr 17, 2023
1 parent c24209a commit 4a23e89
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 68 deletions.
7 changes: 4 additions & 3 deletions components/BoardColumnComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,14 +89,14 @@
<!-- font-semibold -->
<!-- text-sm -->

<div class="flex mt-4 justify-between items-center">
<div class="flex mt-4 justify-between items-center" v-if="false">
<span class="text-sm text-gray-400 dark:text-gray-600 truncate">{{ $dayjs(element.created_at).format('D MMM LT') }}</span>
</div>

<!-- numero de comentarios -->
<!-- numero de attachments -->

<Badge :noText="true" v-for="tag in element.taggings" :key="tag.id" :color="tag.tags.color" class="mt-2">
<Badge :noText="!isFullBadgeDisplay" @click.self.stop.prevent="isFullBadgeDisplay = !isFullBadgeDisplay" v-for="tag in element.taggings" :key="tag.id" :color="tag.tags.color" class="mt-2">
{{ tag.tags.name }}
</Badge>
</div>
Expand All @@ -112,14 +112,15 @@
<script setup lang="ts">
import draggable from "vuedraggable";
// set props
const column = defineProps<{
id: number,
name: string,
todos: Array<{id: number, task: string, board_id: number, board_column_id: number, position: number, is_complete: boolean, created_at: string }>
}>()
const isFullBadgeDisplay = ref(false)
const emit = defineEmits<{
(event: 'refreshBoard'): void,
(event: 'onTaskClicked', task: Todo): void
Expand Down
4 changes: 2 additions & 2 deletions components/ModalComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<!-- @click.self.prevent="closeModal"
@keydown.esc="closeModal" -->
<div
class="flex items-start justify-center min-h-screen pt-24 text-center"
class="flex items-start justify-center min-h-screen pt-4 md:pt-24 text-center"
>
<transition
enter-active-class="transition ease-out duration-300 transform "
Expand All @@ -27,7 +27,7 @@
leave-to-class="opacity-0 translate-y-10 translate-y-0 scale-95"
>
<div
class="relative bg-slate-100 text-slate-800 dark:bg-black dark:text-white rounded-lg text-left overflow-hidden shadow-2xl shadow-gray-600 p-8 w-full md:w-5/6 lg:w-1/2 outline-0"
class="relative bg-slate-100 text-slate-800 dark:bg-black dark:text-white rounded-lg text-left shadow-2xl shadow-gray-600 p-8 w-full md:w-5/6 lg:w-3/6 outline-0"
role="dialog"
ref="modal"
aria-modal="true"
Expand Down
8 changes: 5 additions & 3 deletions components/TagsField.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<template>
<div class="tags-field my-4">
<div class="current-tags block mb-2" v-if="localProps.taggings?.length > 0">
<div class="current-tags block mb-2" v-if="localProps.taggings?.length > 0 && displayTags">
<Badge :color="tagging.tags.color" v-for="tagging in localProps.taggings" :key="tagging.id">
{{ tagging.tags.name || '' }}
</Badge>
</div>
<button @click="toggleEditingTags" class="px-3 py-2 rounded text-sm font-semibold bg-slate-300 text-slate-700 hover:text-gray-200 hover:bg-slate-400 dark:bg-slate-800 dark:text-gray-300 hover:text-gray-200 hover:dark:bg-slate-950">
<button v-if="displayEditButton" @click="toggleEditingTags" class="px-3 py-2 rounded text-sm font-semibold bg-slate-300 text-slate-700 hover:text-gray-200 hover:bg-slate-400 dark:bg-slate-800 dark:text-gray-300 hover:text-gray-200 hover:dark:bg-slate-950">
{{ $t('edit_tags') }}
</button>

<div v-if="isEditing" class="w-[300px] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-4 mt-1">
<div v-if="isEditing" class="w-[300px] md:absolute lg:absolute bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-4 mt-1">
<div v-if="!isNewTag" class="tags-field__tags">

<label class="cursor-pointer flex items-center py-2 my-1" v-for="tag in tags" :key="tag.id">
Expand Down Expand Up @@ -69,6 +69,8 @@ const localProps = defineProps<{
taggings?: any,
todoId: number,
boardId: string,
displayEditButton: boolean,
displayTags: boolean
}>()
const emit = defineEmits<{
Expand Down
125 changes: 66 additions & 59 deletions pages/boards/[id].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,70 +68,73 @@

<!-- text-slate-700 bg-slate-300 hover:text-gray-200 hover:bg-slate-400 hover:dark:text-gray-200 dark:text-gray-300 dark:bg-slate-800 hover:dark:bg-slate-950 -->

<div class="flex">
<button class="px-3 py-2 rounded text-sm font-semibold bg-slate-300 text-slate-700 hover:text-gray-200 hover:bg-slate-400 dark:bg-slate-800 dark:text-gray-300 hover:text-gray-200 hover:dark:bg-slate-950" @click.stop.prevent="isEditing = !isEditing">
<span v-if="isEditing">{{ $t('cancel_editing') }}</span>
<span v-else>{{ $t('edit_task') }}</span>
</button>
<button v-if="isEditing" @click.stop.prevent="deleteTask(modalTask)" class="px-3 py-2 rounded text-sm font-semibold bg-slate-300 text-slate-700 hover:text-gray-200 hover:bg-slate-400 dark:bg-slate-800 dark:text-gray-300 hover:text-gray-200 hover:dark:bg-slate-950">
{{ $t('delete_task') }}
</button>
</div>

<div class="flex-wrap md:flex">
<div v-if="!isEditing" class="w-full md:w-2/3">
<div class="block mt-4">
<h1 @dblclick="isEditing = true" class="text-xl">{{ modalTask.task }}</h1>
<p class="text-sm" v-if="modalTask.board_columns">in {{ modalTask.board_columns?.name }}</p>
</div>

<TagsField :displayTags="true" :todoId="modalTask.id" :taggings="modalTask.taggings" :boardId="route.params.id" />

<div v-if="modalTask.body">
<MarkdownComponent :block="{ content: modalTask.body }"></MarkdownComponent>
</div>
<div v-else>
<p @dblclick="isEditing = true" class="text-gray-500">{{ $t('no_description') }}</p>
</div>
</div>
<div v-else class="w-full md:w-2/3">
<form @submit.prevent="updateTask(modalTask)">
<input
v-model="modalTask.task"
class="w-full dark:bg-gray-700 px-3 py-2 outline-0"
type="text"
name="task"
placeholder="Task title"
:disabled="isLoading"
@keydown.esc.self.prevent.stop="isEditing = false"
/>
<textarea
v-model="modalTask.body"
class="w-full dark:bg-gray-700 px-3 py-2 outline-0 mt-2 h-[200px]"
type="text"
name="body"
placeholder="Add more details"
:disabled="isLoading"
@keydown.ctrl.enter="updateTask(modalTask)"
@keydown.meta.enter="updateTask(modalTask)"
@keydown.esc.self.prevent.stop="isEditing = false"
/>

<button type="submit" class="px-3 py-2 rounded text-sm font-semibold bg-slate-300 text-slate-700 hover:text-gray-200 hover:bg-slate-400 dark:bg-slate-800 dark:text-gray-300 hover:text-gray-200 hover:dark:bg-slate-950">
{{ $t('update_task') }}
</button>
or
<button @click="isEditing = false" class="px-3 py-2 rounded text-sm font-semibold bg-slate-300 text-slate-700 hover:text-gray-200 hover:bg-slate-400 dark:bg-slate-800 dark:text-gray-300 hover:text-gray-200 hover:dark:bg-slate-950">
{{ $t('cancel') }}
</button>
</form>
</div>

<div v-if="isEditing">
<div class="w-full md:w-1/3 px-2">
<p class="">#{{ modalTask.id }}</p>
<span class="text-sm text-gray-600 truncate">{{ $dayjs(modalTask.created_at).format('D MMM LT') }}</span>
<!-- <p>{{ modalTask.is_complete ? 'done' : '' }}</p> -->

<form @submit.prevent="updateTask(modalTask)">
<input
v-model="modalTask.task"
class="w-full dark:bg-gray-700 px-3 py-2 outline-0"
type="text"
name="task"
placeholder="Task title"
:disabled="isLoading"
/>
<textarea
v-model="modalTask.body"
class="w-full dark:bg-gray-700 px-3 py-2 outline-0 mt-2 h-[200px]"
type="text"
name="body"
placeholder="Add more details"
:disabled="isLoading"
@keydown.ctrl.enter="updateTask(modalTask)"
@keydown.meta.enter="updateTask(modalTask)"
/>

<button type="submit" class="px-3 py-2 rounded text-sm font-semibold bg-slate-300 text-slate-700 hover:text-gray-200 hover:bg-slate-400 dark:bg-slate-800 dark:text-gray-300 hover:text-gray-200 hover:dark:bg-slate-950">
{{ $t('update_task') }}
</button>
</form>
</div>

<div v-else>
<!-- viewing -->
<div class="flex mt-4 justify-between">
<h1>{{ modalTask.task }}</h1>
<p class="w-[100px]">#{{ modalTask.id }}</p>
</div>
<TagsField :displayEditButton="true" ref="tagsField" @onTagsUpdated="onTagsUpdated" :todoId="modalTask.id" :taggings="modalTask.taggings" :boardId="route.params.id" />

<div>
<MarkdownComponent :block="{ content: modalTask.body }">
</MarkdownComponent>
<button v-if="!isEditing" class="text-left px-3 py-2 rounded text-sm font-semibold bg-slate-300 text-slate-700 hover:text-gray-200 hover:bg-slate-400 dark:bg-slate-800 dark:text-gray-300 hover:text-gray-200 hover:dark:bg-slate-950" @click.stop.prevent="isEditing = !isEditing">
<span>{{ $t('edit_task') }}</span>
</button>
<button v-if="isEditing" @click.stop.prevent="deleteTask(modalTask)" class="text-left px-3 py-2 rounded text-sm font-semibold bg-slate-300 text-slate-700 hover:text-gray-200 hover:bg-slate-400 dark:bg-slate-800 dark:text-gray-300 hover:text-gray-200 hover:dark:bg-slate-950">
{{ $t('delete_task') }}
</button>
</div>

<span class="text-sm text-gray-600 truncate">{{ $dayjs(modalTask.created_at).format('D MMM LT') }}</span>

<!-- <p>{{ modalTask.is_complete ? 'done' : '' }}</p> -->
<!-- <p>#{{ modalTask.position }}</p> -->
<!-- <p>#{{ modalTask.board_id }}</p> -->
<!-- <p>#{{ modalTask.board_column_id }}</p> -->
<!-- <p class="mb-4">
{{ modalTask }}
</p> -->

<TagsField ref="tagsField" @onTagsUpdated="onTagsUpdated" :todoId="modalTask.id" :taggings="modalTask.taggings" :boardId="route.params.id" />
</div>


</ModalComponent>
</div>
</template>
Expand Down Expand Up @@ -172,7 +175,11 @@ const modalTask = ref({
board_column_id: 0,
created_at: '',
updated_at: '',
taggings: []
taggings: [],
board_columns: {
name: '',
id: ''
}
})

async function onCloseModal () {
Expand Down Expand Up @@ -206,7 +213,7 @@ const router = useRouter()

const { data: board, refresh } = await useAsyncData('board', async () => {
const { data, error } = await client.from<Board>('boards')
.select('id, name, board_columns(*, todos(*, taggings(*, tags(*)))))')
.select('id, name, board_columns(*, todos(*, board_columns(*),taggings(*, tags(*)))))')
.eq('id', route.params.id)
.eq('user_id', user.value?.id)
.order('created_at', { foreignTable: 'board_columns', ascending: true })
Expand Down
2 changes: 1 addition & 1 deletion plugins/vue3-toastify.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Vue3Toastify, { toast } from 'vue3-toastify';
// import 'vue3-toastify/dist/index.css';
import 'vue3-toastify/dist/index.css';

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 1000, theme: 'auto' });
Expand Down
1 change: 1 addition & 0 deletions types/todos.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface Todo {
user?: string;
created_at?: string;
tags?: string[];
board_column?: BoardColumn;
}


Expand Down

1 comment on commit 4a23e89

@vercel
Copy link

@vercel vercel bot commented on 4a23e89 Apr 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nuxt3-supabase-tasks – ./

nuxt3-supabase-tasks-git-main-pixtame.vercel.app
nuxt3-supabase-tasks-pixtame.vercel.app
www.tarefas.me
nuxt3-supabase-tasks.vercel.app
t.loco.ltd
tarefas.me

Please sign in to comment.