danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

added sort icon.

Browse source
This commit is contained in:
ArabCoders 2024-01-03 22:57:38 +03:00
parent c08ffe03e8
commit a8ef590a36
2 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/components/Page-Completed.vue
View file

@ -63,6 +63,16 @@
</span> </span>
</button> </button>
</div> </div>
<div class="column is-1">
<button type="button" class="button is-fullwidth"
@click="direction = direction === 'desc' ? 'asc' : 'desc'">
<span class="icon-text">
<span class="icon">
<font-awesome-icon :icon="direction === 'desc' ? 'fa-solid fa-arrow-down-a-z' :'fa-solid fa-arrow-up-a-z'"/>
</span>
</span>
</button>
</div>
</div> </div>
<div class="columns is-multiline"> <div class="columns is-multiline">
@ -223,6 +233,7 @@ const props = defineProps({
const selectedElms = ref([]); const selectedElms = ref([]);
const masterSelectAll = ref(false); const masterSelectAll = ref(false);
const showCompleted = useStorage('showCompleted', true) const showCompleted = useStorage('showCompleted', true)
const direction = useStorage('sortCompleted', 'desc')
watch(masterSelectAll, (value) => { watch(masterSelectAll, (value) => {
for (const key in props.completed) { for (const key in props.completed) {
@ -236,7 +247,11 @@ watch(masterSelectAll, (value) => {
}) })
const sortCompleted = computed(() => { const sortCompleted = computed(() => {
const thisDirection = direction.value;
return Object.values(props.completed).sort((a, b) => { return Object.values(props.completed).sort((a, b) => {
if (thisDirection === 'asc') {
return new Date(a.datetime) - new Date(b.datetime);
}
return new Date(b.datetime) - new Date(a.datetime); return new Date(b.datetime) - new Date(a.datetime);
}) })
}) })

4
frontend/src/main.js
View file

@ -5,7 +5,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { import {
faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare, faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ, faArrowDownAZ
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons' import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
@ -17,7 +17,7 @@ import './assets/css/style.css'
import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css'; import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css';
library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare, library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
faSquare, faSquareCheck, faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar) faSquare, faSquareCheck, faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ, faArrowDownAZ)
const app = createApp(App); const app = createApp(App);
app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1); app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1);