Remove duplicate code

- was silly for writing so much duplicate code to change the index of the array
- woke up with inspiration
This commit is contained in:
Matt Rider 2019-07-11 07:08:17 -03:00
parent 79930dcdc4
commit 2e97af074c

View File

@ -3,7 +3,7 @@
<ds-space /> <ds-space />
<ds-flex> <ds-flex>
<ds-flex-item <ds-flex-item
:width="{ base: '100%', sm: '100%', md: '100%', lg: '20%' }" :width="{ base: '100%', sm: '100%', md: '100%', lg: '13%' }"
class="categories-list" class="categories-list"
> >
<ds-space margin-bottom="x-small" /> <ds-space margin-bottom="x-small" />
@ -23,148 +23,13 @@
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }"> <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '7%' }" />
<ds-flex v-for="category in chunk[0]" :key="category.id" class="categories-list"> <ds-flex-item
<ds-flex> :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }"
<ds-flex-item width="100%"> v-for="index in chunk.length"
<ds-button :key="index"
:icon="category.icon" >
:primary="isActive(category.id)" <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-list">
@click.stop.prevent="toggleCategory(category.id)"
/>
<ds-space margin-bottom="small" />
</ds-flex-item>
<ds-flex>
<ds-flex-item>
<label>{{ category.name }}</label>
</ds-flex-item>
<ds-space margin-bottom="xx-large" />
</ds-flex>
</ds-flex>
</ds-flex>
</ds-flex-item>
<ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
<ds-flex v-for="category in chunk[1]" :key="category.id" class="categories-list">
<ds-flex>
<ds-flex-item width="100%">
<ds-button
:icon="category.icon"
:primary="isActive(category.id)"
@click.stop.prevent="toggleCategory(category.id)"
/>
<ds-space margin-bottom="small" />
</ds-flex-item>
<ds-flex class="categories-list">
<ds-flex-item>
<label>{{ category.name }}</label>
</ds-flex-item>
<ds-space margin-bottom="xx-large" />
</ds-flex>
</ds-flex>
</ds-flex>
</ds-flex-item>
<ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
<ds-flex v-for="category in chunk[2]" :key="category.id" class="categories-list">
<ds-flex>
<ds-flex-item width="100%">
<ds-button
:icon="category.icon"
:primary="isActive(category.id)"
@click.stop.prevent="toggleCategory(category.id)"
/>
<ds-space margin-bottom="small" />
</ds-flex-item>
<ds-flex>
<ds-flex-item>
<label>{{ category.name }}</label>
</ds-flex-item>
<ds-space margin-bottom="xx-large" />
</ds-flex>
</ds-flex>
</ds-flex>
</ds-flex-item>
<ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
<ds-flex v-for="category in chunk[3]" :key="category.id" class="categories-list">
<ds-flex>
<ds-flex-item width="100%">
<ds-button
:icon="category.icon"
:primary="isActive(category.id)"
@click.stop.prevent="toggleCategory(category.id)"
/>
<ds-space margin-bottom="small" />
</ds-flex-item>
<ds-flex>
<ds-flex-item>
<label>{{ category.name }}</label>
</ds-flex-item>
<ds-space margin-bottom="xx-large" />
</ds-flex>
</ds-flex>
</ds-flex>
</ds-flex-item>
<ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
<ds-flex v-for="category in chunk[4]" :key="category.id" class="categories-list">
<ds-flex>
<ds-flex-item width="100%">
<ds-button
:icon="category.icon"
:primary="isActive(category.id)"
@click.stop.prevent="toggleCategory(category.id)"
/>
<ds-space margin-bottom="small" />
</ds-flex-item>
<ds-flex>
<ds-flex-item>
<label>{{ category.name }}</label>
</ds-flex-item>
<ds-space margin-bottom="xx-large" />
</ds-flex>
</ds-flex>
</ds-flex>
</ds-flex-item>
<ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
<ds-flex v-for="category in chunk[5]" :key="category.id" class="categories-list">
<ds-flex>
<ds-flex-item width="100%">
<ds-button
:icon="category.icon"
:primary="isActive(category.id)"
@click.stop.prevent="toggleCategory(category.id)"
/>
<ds-space margin-bottom="small" />
</ds-flex-item>
<ds-flex>
<ds-flex-item>
<label>{{ category.name }}</label>
</ds-flex-item>
<ds-space margin-bottom="xx-large" />
</ds-flex>
</ds-flex>
</ds-flex>
</ds-flex-item>
<ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
<ds-flex v-for="category in chunk[6]" :key="category.id" class="categories-list">
<ds-flex>
<ds-flex-item width="100%">
<ds-button
:icon="category.icon"
:primary="isActive(category.id)"
@click.stop.prevent="toggleCategory(category.id)"
/>
<ds-space margin-bottom="small" />
</ds-flex-item>
<ds-flex>
<ds-flex-item>
<label>{{ category.name }}</label>
</ds-flex-item>
<ds-space margin-bottom="xx-large" />
</ds-flex>
</ds-flex>
</ds-flex>
</ds-flex-item>
<ds-flex-item :width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }">
<ds-flex v-for="category in chunk[7]" :key="category.id" class="categories-list">
<ds-flex> <ds-flex>
<ds-flex-item width="100%"> <ds-flex-item width="100%">
<ds-button <ds-button