puffpastry-frontend/src/components/Sidebar.vue

<template>
  <aside class="sm:flex sm:flex-col sm:w-1/4 bg-gray-600 h-screen">
    <nav class="sticky top-0 left-0 flex flex-row w-full h-1/16 justify-between">
      <button
          class="w-10/12 h-full bg-gray-800 px-5 py-3 text-sm font-bold text-white border-r border-white border-solid uppercase text-center cursor-pointer"
          @click="showNewProposalModal"
      >
        Add Proposal
      </button>
      <button
          class="flex flex-row w-2/12 h-full bg-gray-800 justify-center items-center cursor-pointer"
          @click="showFilterModal"
      >
        <Filter/>
      </button>
    </nav>

    <div class="h-11/12">
      <ProposalContainer
          v-for="proposal in proposals"
          :key="proposal.id"
          :proposal="proposal"
          :selected="selectedId === proposal.id"
          @selected="handleSelection"
      />
      <LoadingSpinner
          v-if="isLoading('proposals')"
          identifier="proposals"
      />
    </div>
  </aside>
</template>

<script setup lang="ts">
import ProposalContainer from "./ProposalContainer.vue";
import LoadingSpinner from "./LoadingSpinner.vue";
import {ProposalSelection} from "../types/proposal.ts";
import {useLoading} from "../composables/useLoading.ts";
import ProposalModal from "./modals/ProposalModal.vue";
import {ContentModal, useModal} from "../composables/useModal.ts";
import FilterModal from "./modals/FilterModal.vue";
import Filter from "./icons/Filter.vue";
import {ref} from "vue";
import {ProposalList} from "../generated/typescript";
const { show: showModal } = useModal();

const props = defineProps<{ proposals: ProposalList | undefined }>();
const emit = defineEmits(['update:selection']);

const {isLoading} = useLoading();

const selectedId = ref<number>();

const handleSelection = (proposal: ProposalSelection) => {
  const id = proposal.proposal.id;
  if (selectedId.value && selectedId.value === id) return;
  selectedId.value = id;
  emit('update:selection', {proposal: proposal.proposal});
}

const showNewProposalModal = () => {
  showModal(ProposalModal as ContentModal);
}

const showFilterModal = () => {
  showModal(FilterModal as ContentModal);
}

</script>

<style lang="postcss">

</style>