From 8530b33ffc7e25da1661c6dfbd5bc6d1453d0c71 Mon Sep 17 00:00:00 2001 From: Naomi Calabretta Date: Wed, 31 Jul 2024 04:10:52 +0200 Subject: [PATCH] app refactor, fronting entries work --- src/components/FrontingEntryInList.vue | 13 ++-- src/components/MemberInList.vue | 57 ----------------- src/components/member/MemberAvatar.vue | 25 ++++++++ src/components/member/MemberLabel.vue | 34 ++++++++++ src/modals/FrontingEntryEdit.vue | 88 +++++++++++++++++-------- src/modals/MemberEdit.vue | 89 +++++++++++++++----------- src/modals/MemberSelect.vue | 81 +++++++++++++++++++++++ src/modals/TagEdit.vue | 26 +++----- src/modals/TagListSelect.vue | 73 ++++++++------------- src/views/options/FrontHistory.vue | 6 +- src/views/options/TagManagement.vue | 11 ++-- src/views/tabbed/Members.vue | 30 +++++---- translations/en/options.json | 7 +- translations/en/other.json | 8 +++ 14 files changed, 336 insertions(+), 212 deletions(-) delete mode 100644 src/components/MemberInList.vue create mode 100644 src/components/member/MemberAvatar.vue create mode 100644 src/components/member/MemberLabel.vue create mode 100644 src/modals/MemberSelect.vue create mode 100644 translations/en/other.json diff --git a/src/components/FrontingEntryInList.vue b/src/components/FrontingEntryInList.vue index 1320f6e..2002693 100644 --- a/src/components/FrontingEntryInList.vue +++ b/src/components/FrontingEntryInList.vue @@ -23,16 +23,21 @@ -

- {{ dayjs(props.entry.startTime).format("MMMM D, HH:mm") }} -

-

+

{{ props.entry.endTime ? dayjs(props.entry.startTime).from(props.entry.endTime, true) : dayjs(props.entry.startTime).fromNow(true) }}

+

+ {{ dayjs(props.entry.startTime).format("MMMM D, HH:mm") }} + {{ + props.entry.endTime + ? " - " + dayjs(props.entry.endTime).format("MMMM D, HH:mm") + : "" + }} +

{{ props.entry.member.name }}

diff --git a/src/components/MemberInList.vue b/src/components/MemberInList.vue deleted file mode 100644 index 871fa36..0000000 --- a/src/components/MemberInList.vue +++ /dev/null @@ -1,57 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/member/MemberAvatar.vue b/src/components/member/MemberAvatar.vue new file mode 100644 index 0000000..23956f6 --- /dev/null +++ b/src/components/member/MemberAvatar.vue @@ -0,0 +1,25 @@ + + + + + \ No newline at end of file diff --git a/src/components/member/MemberLabel.vue b/src/components/member/MemberLabel.vue new file mode 100644 index 0000000..3e92534 --- /dev/null +++ b/src/components/member/MemberLabel.vue @@ -0,0 +1,34 @@ + + + diff --git a/src/modals/FrontingEntryEdit.vue b/src/modals/FrontingEntryEdit.vue index 780e7b8..d9d1c1c 100644 --- a/src/modals/FrontingEntryEdit.vue +++ b/src/modals/FrontingEntryEdit.vue @@ -10,6 +10,7 @@ IonFabButton, IonLabel, IonToggle, + IonInput, IonItem, modalController, IonModal, @@ -26,42 +27,30 @@ import trashMD from "@material-design-icons/svg/outlined/delete.svg"; import { FrontingEntryComplete, getTable } from '../lib/db/entities/frontingEntries'; - import { Ref, WatchStopHandle, inject, ref, toRaw, watch } from "vue"; + import { Ref, ShallowReactive, WatchStopHandle, inject, provide, ref, shallowReactive, toRaw, watch } from "vue"; + + import MemberSelect from "./MemberSelect.vue"; + import MemberAvatar from "../components/member/MemberAvatar.vue"; import dayjs from "dayjs"; import UTC from "dayjs/plugin/utc"; import Timezone from "dayjs/plugin/timezone"; + import { Member } from "../lib/db/entities/members"; dayjs.extend(UTC); dayjs.extend(Timezone); const isOpen = inject>("isOpen")!; const frontingEntry = inject>("frontingEntry")!; - const startTime = ref(); - const endTime = ref(); - - const watchStopHandles: WatchStopHandle[] = []; - watch(frontingEntry, () => { - if(!frontingEntry.value) return; - watchStopHandles.forEach(x => x()); - - console.log(frontingEntry.value.startTime, dayjs(dayjs(frontingEntry.value.startTime).format("YYYY-MM-DDTHH:mm:ss")).toDate()); + const memberSelectModal = ref(); - startTime.value = dayjs(frontingEntry.value.startTime).format("YYYY-MM-DDTHH:mm:ss"); + const selectedMembers: ShallowReactive = shallowReactive([]); + provide("selectedMembers", selectedMembers); - if(frontingEntry.value.endTime) - endTime.value = dayjs(frontingEntry.value.endTime).format("YYYY-MM-DDTHH:mm:ss"); + const startTime: Ref = ref(); + const endTime: Ref = ref(); - watchStopHandles.push( - watch(startTime, () => { - frontingEntry.value.startTime = dayjs(startTime.value).toDate(); - }, {immediate: false}), - watch(endTime, () => { - if(endTime.value) - frontingEntry.value.endTime = dayjs(endTime.value).toDate(); - }, {immediate: false}) - ); - }, {immediate: false}); + const watchStopHandles: WatchStopHandle[] = []; function dismiss(){ if(isOpen) @@ -74,6 +63,8 @@ const uuid = frontingEntry.value?.uuid; const _frontingEntry = toRaw(frontingEntry.value); + console.log(selectedMembers, _frontingEntry.member.uuid); + await getTable().update(uuid, { ..._frontingEntry, member: _frontingEntry.member.uuid @@ -96,12 +87,43 @@ } function present() { + watchStopHandles.forEach(x => x()); + watchStopHandles.length = 0; + if(!frontingEntry.value) return; + + selectedMembers.push(frontingEntry.value.member); + + startTime.value = dayjs(frontingEntry.value.startTime).format("YYYY-MM-DDTHH:mm:ss"); + + if(frontingEntry.value.endTime) + endTime.value = dayjs(frontingEntry.value.endTime).format("YYYY-MM-DDTHH:mm:ss"); + + watchStopHandles.push( + watch(selectedMembers, () => { + console.log(selectedMembers, frontingEntry.value.member.uuid); + if(selectedMembers.length) + frontingEntry.value.member = selectedMembers[0]; + }, {immediate: false}), + watch(startTime, () => { + frontingEntry.value.startTime = dayjs(startTime.value).toDate(); + }, {immediate: false}), + watch(endTime, () => { + if(endTime.value) + frontingEntry.value.endTime = dayjs(endTime.value).toDate(); + }, {immediate: false}) + ); + } + + function didPresent() { + setTimeout(() => { + console.log() + }, 2000); } @@ -167,11 +201,15 @@ } ion-modal.sheet-modal { - --height: 50%; + --height: 50dvh; --border-radius: 16px; } ion-content { --padding-bottom: 80px; } + + ion-input { + margin: 16px 0; + } \ No newline at end of file diff --git a/src/modals/MemberEdit.vue b/src/modals/MemberEdit.vue index 89e0178..6f7ea99 100644 --- a/src/modals/MemberEdit.vue +++ b/src/modals/MemberEdit.vue @@ -43,25 +43,27 @@ import trashMD from "@material-design-icons/svg/outlined/delete.svg"; import { Member, getTable, newMember } from '../lib/db/entities/members'; - import { tags } from "../lib/db/entities/tags"; + import { Tag, tags } from "../lib/db/entities/tags"; import { getBlobURL } from '../lib/util/blob'; import { getFiles } from "../lib/util/misc"; import { resizeImage } from "../lib/util/image"; - import { Ref, inject, provide, ref, toRaw } from "vue"; + import { Ref, ShallowReactive, WatchStopHandle, inject, provide, ref, shallowReactive, toRaw, watch } from "vue"; import { getMarkdownFor } from "../lib/markdown"; import { addMaterialColors, unsetMaterialColors } from "../lib/theme"; import { PartialBy } from "../lib/db/types"; const isIOS = inject("isIOS")!; - const isOpen = inject>("isOpen")!; const member = inject | undefined>>("member")!; - const isTagListSelectOpen = ref(false); - provide("isTagListSelectionOpen", isTagListSelectOpen); + const tagSelectionModal = ref(); + const selectedTags: ShallowReactive = shallowReactive([]); + provide("selectedTags", selectedTags); const isEditing = ref(false); const self = ref(); + const watchStopHandles: WatchStopHandle[] = []; + async function toggleEditing(){ if(!member.value) return; @@ -78,7 +80,7 @@ if(!uuid){ await newMember(_member); - await modalController.dismiss(undefined, "added"); + await modalController.dismiss(); return; } @@ -103,18 +105,26 @@ await getTable().delete(member.value.uuid); try{ - await modalController.dismiss(undefined, "deleted"); + await modalController.dismiss(); }catch(_){} } - function dismiss(){ - if(isOpen) - isOpen.value = false; - } - function present() { + watchStopHandles.forEach(x => x()); + watchStopHandles.length = 0; + if(!member.value) return; + watchStopHandles.push( + watch(selectedTags, () => { + member.value!.tags = selectedTags.map(x => x.uuid) + }, {immediate: false}) + ); + + // push tags inside + selectedTags.length = 0; + selectedTags.push(...member.value.tags.map(x => tags.value.find(y => y.uuid === x)!)) + // are we editing? isEditing.value = !member.value.uuid; @@ -128,22 +138,22 @@ \ No newline at end of file diff --git a/src/modals/TagEdit.vue b/src/modals/TagEdit.vue index c368264..6e8210b 100644 --- a/src/modals/TagEdit.vue +++ b/src/modals/TagEdit.vue @@ -31,16 +31,10 @@ import { addMaterialColors, unsetMaterialColors } from "../lib/theme"; import { PartialBy } from "../lib/db/types"; - const isOpen = inject>("isOpen")!; const tag = inject | undefined>>("tag")!; const self = ref(); - function dismiss(){ - if(isOpen) - isOpen.value = false; - } - async function save(){ if(!tag.value) return; @@ -84,31 +78,31 @@ \ No newline at end of file diff --git a/src/views/options/FrontHistory.vue b/src/views/options/FrontHistory.vue index 9e91699..7919943 100644 --- a/src/views/options/FrontHistory.vue +++ b/src/views/options/FrontHistory.vue @@ -1,6 +1,6 @@ @@ -32,7 +32,7 @@ - + diff --git a/src/views/options/TagManagement.vue b/src/views/options/TagManagement.vue index 40e60ea..c9a7e48 100644 --- a/src/views/options/TagManagement.vue +++ b/src/views/options/TagManagement.vue @@ -15,15 +15,14 @@ import { PartialBy } from '../../lib/db/types'; const search = ref(""); const tags = getFilteredTags(search, type); - const isOpen = ref(false); - provide("isOpen", isOpen); + const tagEditModal = ref(); const tag: Ref | undefined> = ref(); provide("tag", tag); - function showModal(clickedTag?: Tag){ + async function showModal(clickedTag?: Tag){ if(clickedTag) - tag.value = clickedTag; + tag.value = {...clickedTag}; else { tag.value = { name: "", @@ -31,7 +30,7 @@ import { PartialBy } from '../../lib/db/types'; }; } - isOpen.value = true; + await tagEditModal.value.$el.present(); } @@ -76,6 +75,6 @@ import { PartialBy } from '../../lib/db/types'; - + diff --git a/src/views/tabbed/Members.vue b/src/views/tabbed/Members.vue index edc835a..47b11c4 100644 --- a/src/views/tabbed/Members.vue +++ b/src/views/tabbed/Members.vue @@ -10,6 +10,9 @@ IonFab, IonFabButton, IonIcon, + IonItem, + IonItemSliding, + IonItemOptions, IonItemOption, IonLabel } from '@ionic/vue'; @@ -18,10 +21,11 @@ import { addOutline as addIOS } from "ionicons/icons"; import addMD from "@material-design-icons/svg/outlined/add.svg"; import MemberEdit from '../../modals/MemberEdit.vue'; - import MemberInList from '../../components/MemberInList.vue'; import { Member } from '../../lib/db/entities/members'; import { PartialBy } from '../../lib/db/types'; import { getCurrentFrontEntryForMember, newFrontingEntry, removeFronter, setMainFronter, setSoleFronter } from '../../lib/db/entities/frontingEntries'; + import MemberAvatar from '../../components/member/MemberAvatar.vue'; + import MemberLabel from '../../components/member/MemberLabel.vue'; const isIOS = inject("isIOS"); @@ -33,12 +37,11 @@ const member: Ref | undefined> = ref(); provide("member", member); - const isOpen = ref(false); - provide("isOpen", isOpen); + const memberEditModal = ref(); - function showModal(clickedMember?: Member){ + async function showModal(clickedMember?: Member){ if(clickedMember) - member.value = clickedMember; + member.value = {...clickedMember}; else { member.value = { name: "", @@ -48,7 +51,7 @@ }; } - isOpen.value = true; + await memberEditModal.value.$el.present(); } function addFrontingEntry(member: Member) { @@ -99,8 +102,13 @@ - - - + + @@ -137,6 +145,6 @@ - + diff --git a/translations/en/options.json b/translations/en/options.json index 0d07fac..3041b52 100644 --- a/translations/en/options.json +++ b/translations/en/options.json @@ -12,9 +12,10 @@ "header": "Front history", "edit": { "header": "Edit fronting entry", - "member": "Edit member", - "startTime": "Edit start time", - "endTime": "Edit end time", + "member": "Edit fronting member", + "customStatus": "Custom status", + "startTime": "Start time", + "endTime": "End time", "endTimeUnavailable": "To edit the end time, first remove this member from front", "isMainFronter": "Main fronter?", "delete": { diff --git a/translations/en/other.json b/translations/en/other.json new file mode 100644 index 0000000..3e84e9f --- /dev/null +++ b/translations/en/other.json @@ -0,0 +1,8 @@ +{ + "taglistSelect": { + "header": "Select some tags" + }, + "memberSelect": { + "header": "Select a member" + } +} \ No newline at end of file