-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #47 from openzim/collection-view
Collection View
- Loading branch information
Showing
14 changed files
with
494 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <template> | ||
| Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad | ||
| nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. | ||
| Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla | ||
| est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat | ||
| reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident | ||
| adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit | ||
| commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea | ||
| consectetur et est culpa et culpa duis. | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| <template> | ||
| <div | ||
| class="px-2 py-2 my-2 d-flex justify-content-between align-items-center project-column" | ||
| :class="{ active: isActive }" | ||
| @click.prevent="setupProject" | ||
| @dblclick.prevent="enableEditMode" | ||
| @mouseover="isHover = true" | ||
| @mouseleave="isHover = false" | ||
| > | ||
| <div class="d-flex align-items-center"> | ||
| <div v-if="!isEditMode" class="text-light fs-4 pe-1 me-1"> | ||
| <font-awesome-icon :icon="['fa', 'file']" /> | ||
| </div> | ||
| <input | ||
| ref="inputElement" | ||
| v-else | ||
| type="text" | ||
| class="form-control" | ||
| @blur="exitEditModeWithoutChange" | ||
| @keyup.esc="exitEditModeWithoutChange" | ||
| @keyup.enter="exitEditModeWithChange" | ||
| v-model="editingProjectName" | ||
| /> | ||
| <div v-if="!isEditMode" class="fw-semibold text-light text-truncate project-name"> | ||
| {{ projectName }} | ||
| </div> | ||
| </div> | ||
| <div v-show="!isHover" class="expire text-white-50"> | ||
| {{ leftDays }} | ||
| </div> | ||
| <button | ||
| v-show="isHover && !isEditMode" | ||
| type="button" | ||
| class="btn text-light py-9" | ||
| @click.stop="clickDeleteProjectButton" | ||
| > | ||
| <font-awesome-icon :icon="['fas', 'trash']" /> | ||
| </button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import type { Project } from '@/constants' | ||
| import { useAppStore, useModalStore, useProjectStore } from '@/stores/stores' | ||
| import moment from 'moment' | ||
| import { computed, ref, watch, type Ref } from 'vue' | ||
| const props = defineProps<{ project: Project }>() | ||
| const emit = defineEmits<{ deleteProject: [Project] }>() | ||
| const leftDays = computed(() => | ||
| props.project.expire_on ? `Expire ${moment.utc(props.project.expire_on).fromNow()}` : '' | ||
| ) | ||
| const storeProject = useProjectStore() | ||
| const storeModal = useModalStore() | ||
| const isActive = computed(() => storeProject.lastProjectId == props.project.id) | ||
| const isEditMode = ref(false) | ||
| const isHover = ref(false) | ||
| const projectName = ref(props.project.name) | ||
| const editingProjectName = ref(projectName.value) | ||
| const inputElement: Ref<HTMLInputElement | null> = ref(null) | ||
| const storeApp = useAppStore() | ||
| watch(inputElement, (newElement) => { | ||
| newElement?.focus() | ||
| }) | ||
| watch(projectName, (newValue) => { | ||
| editingProjectName.value = newValue | ||
| }) | ||
| function setupProject() { | ||
| storeProject.setLastProjectId(props.project.id) | ||
| } | ||
| function enableEditMode() { | ||
| isEditMode.value = true | ||
| } | ||
| async function exitEditModeWithChange() { | ||
| isEditMode.value = false | ||
| await updateProjectName(props.project.id, editingProjectName.value) | ||
| } | ||
| async function exitEditModeWithoutChange() { | ||
| isEditMode.value = false | ||
| editingProjectName.value = projectName.value | ||
| } | ||
| async function updateProjectName(projectId: string, newName: string) { | ||
| const projectRequestData = { | ||
| name: newName | ||
| } | ||
| try { | ||
| await storeApp.axiosInstance.patch<Project>(`/projects/${projectId}`, projectRequestData) | ||
| } catch (error: any) { | ||
| console.log('Unable to update project name.', error, projectId) | ||
| storeApp.alertsError(`Unable to update project name, project id: ${projectId}`) | ||
| editingProjectName.value = projectName.value | ||
| } | ||
| projectName.value = newName | ||
| } | ||
| async function deleteProject() { | ||
| try { | ||
| await storeApp.axiosInstance.delete(`/projects/${props.project.id}`) | ||
| } catch (error: any) { | ||
| console.log('Unable to delete project.', error, props.project.id) | ||
| storeApp.alertsError(`Unable to delete project, project id: ${props.project.id}`) | ||
| } | ||
| emit('deleteProject', props.project) | ||
| } | ||
| async function clickDeleteProjectButton() { | ||
| storeModal.showModal( | ||
| 'Are you sure you want to delete:', | ||
| 'Delete', | ||
| 'Close', | ||
| deleteProject, | ||
| async () => {}, | ||
| [projectName.value] | ||
| ) | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .expire { | ||
| font-size: 0.8em; | ||
| } | ||
| .active { | ||
| background-color: orange; | ||
| } | ||
| .project-column { | ||
| cursor: pointer; | ||
| height: 3em; | ||
| } | ||
| .project-name { | ||
| cursor: text; | ||
| max-width: 8em; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <template> | ||
| <div class="d-flex flex-column" style="height: 100%"> | ||
| <div class="d-flex justify-content-between mt-2 border-bottom border-2 border-white"> | ||
| <div class="fw-bold fs-4 text-light">Collection:</div> | ||
| <button | ||
| type="button" | ||
| class="btn fw-bold fs-5 text-light p-1" | ||
| @click.prevent="createAndUpdateProject" | ||
| > | ||
| <font-awesome-icon :icon="['fas', 'plus']" /> | ||
| </button> | ||
| </div> | ||
| <div class="flex-grow-1 py-2 overflow-x-auto"> | ||
| <ProjectColumnComponent | ||
| v-for="project in storeProject.projects" | ||
| :key="project.id" | ||
| :project="project" | ||
| @delete-project="removeProjectFromList" | ||
| /> | ||
| </div> | ||
| <div class="border-top border-2 border-white py-2"> | ||
| <p class="text-light"><router-link to="/faq" class="link-light">FAQ</router-link></p> | ||
| <p class="text-light"><router-link to="/contact" class="link-light">Contact</router-link></p> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import ProjectColumnComponent from './ProjectColumnComponent.vue' | ||
| import type { Project } from '@/constants' | ||
| import { useProjectStore } from '@/stores/stores' | ||
| import { createNewProject, updateProjects } from '@/utils' | ||
| const storeProject = useProjectStore() | ||
| await updateProjects() | ||
| async function createAndUpdateProject() { | ||
| await createNewProject('New Project') | ||
| await updateProjects() | ||
| } | ||
| function removeProjectFromList(project: Project) { | ||
| storeProject.setProjects(storeProject.projects.filter((element) => element.id != project.id)) | ||
| if (storeProject.projects.length != 0) { | ||
| storeProject.setLastProjectId(storeProject.projects[0].id) | ||
| } else { | ||
| storeProject.clearLastProjectId() | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.