FEDEO/spaces/pages/products.vue

<template>
  <div id="main">
    <div id="left">

      <UButton @click="showCreateProduct = true" >+ Artikel</UButton>
      <UModal v-model="showCreateProduct">
        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
          <template #header>
            Artikel erstellen
          </template>

          <UFormGroup
            label="Name:"
          >
            <UInput
              v-model="createProductData.name"
            />
          </UFormGroup>
          <UFormGroup
            label="Hersteller:"
          >
            <UInput
                v-model="createProductData.manufacturer"
            />
          </UFormGroup>
          <UFormGroup
            label="Einheit:"
          >
            <UInput
                v-model="createProductData.unit"
            />
          </UFormGroup>

          <template #footer>
            <UButton @click="createProduct">Erstellen</UButton>
          </template>
        </UCard>
      </UModal>

      <div class="listContainer">
        <a v-for="item in products" @click="selectItem(item)">
          <UCard class="listItem">
            <UBadge>{{item.id}}</UBadge> {{item.attributes.name}} - {{item.attributes.manufacturer}}
          </UCard>
        </a>
      </div>




    </div>
    <div id="right">
      <div v-if="false">
        <img
            v-if="selectedItem.attributes.image"
            :src="'http://localhost:1337' + selectedItem.attributes.image.data.attributes.url"/>
        {{selectedItem.attributes.image.data.attributes.url}}
      </div>

      <UCard v-if="selectedItem.attributes">
        <template #header>
          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.attributes.name}}
        </template>
<!--        <UBadge
          v-for="tag in selectedItem.tags"
          class="mr-2"
        >
          {{tag}}
        </UBadge>-->
        <UDivider class="my-3"/>
        <div v-if="selectedItem.attributes">
          Hersteller: {{selectedItem.attributes.manufacturer}}<br>
          Einkaufspreis: {{selectedItem.attributes.purchasePriceNet.toFixed(2)}} €<br>
          Aufschlag: {{selectedItem.attributes.profitPercentage}} %<br>
          Verkaufspreis: {{selectedItem.attributes.retailPriceNet.toFixed(2)}} €<br>
        </div>

        <UDivider class="my-3"/>
        <p>Verlauf:</p>

        <table>
          <tr
            v-for="item in history"
            class="historyItem"
          >
            <td>
              {{item.position}}
            </td>
            <td>
              {{item.date}}
            </td>
            <td>
              <UBadge>{{item.user}}</UBadge>
            </td>
            <td>
              {{item.message}}
            </td>

          </tr>
        </table>


<!--        <div
          v-for="item in history"
          class="historyItem"
        >
          <p>{{item.message}}</p>
          <UBadge>{{item.user}}</UBadge>
        </div>-->



      </UCard>        {{selectedItem}}

    </div>
  </div>
</template>

<script setup>

definePageMeta({
  middleware: "auth"
})

const {find,create} = useStrapi4()
const products = (await find('products',{populate: "*"})).data

const showCreateProduct = ref(false)
const createProductData = ref({})


let selectedItem = ref({})

const history = ref([
  {
    position: 0,
    message: "Produkt erstellt",
    date: "2023-11-20",
    user: "flfeders"
  }
])


const selectItem = (item) => {
  selectedItem.value = item
  console.log(item)
}

const createProduct = async () => {
  await create('products', createProductData.value)
  showCreateProduct.value = false
  createProductData.value = {}

}

</script>

<style scoped>
#main {
  display: flex;
  flex-direction: row;
}
#left {
  width: 25vw;
  overflow: hidden;
}

#right {
  width: 60vw;
  padding-left: 3vw;
}

.listContainer {
  height: 75vh;
  overflow: auto;
  margin-top: 3vh;
}



.historyItem >td {
  border: 0.5px solid grey;
  border-radius: 15px;
  padding: 1em
}


/* Hide scrollbar for Chrome, Safari and Opera */
.listContainer::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.listContainer {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
</style>