Document List View with AngularJS

by dshilkret

HTML

<div class="view-controls">
    <button ng-click="changeView('details')">Details</button>
    <button ng-click="changeView('tiles')">Tiles</button>
    <button ng-click="changeView('large-icons')">Large Icons</button>
    <button ng-click="changeView('medium-icons')">Medium Icons</button>
    <button ng-click="changeView('small-icons')">Small Icons</button>
</div>

<div id="document-list" ng-class="'view-' + currentView">
    <div class="document-item" ng-repeat="document in documents">
        <span class="document-icon">{{document.icon}}</span>
        <span class="document-name">{{document.name}}</span>
        <span class="document-size" ng-if="currentView === 'details'">{{document.size}}</span>
        <span class="document-date" ng-if="currentView === 'details'">{{document.date}}</span>
    </div>
</div>

CSS

body {
    font-family: Arial, sans-serif;
}

.view-controls {
    margin-bottom: 20px;
}

.view-controls button {
    margin-right: 10px;
    padding: 5px 10px;
    cursor: pointer;
}

#document-list {
    display: flex;
    flex-wrap: wrap;
}

.document-item {
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.document-icon {
    margin-right: 10px;
    font-size: 24px;
}

.document-name {
    flex-grow: 1;
}

/* Details View */
.view-details .document-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* Tiles View */
.view-tiles .document-item {
    width: 150px;
    flex-direction: column;
    text-align: center;
}

/* Large Icons View */
.view-large-icons .document-item .document-icon {
    font-size: 48px;
}

/* Medium Icons View */
.view-medium-icons .document-item .document-icon {
    font-size: 32px;
}

/* Small Icons View */
.view-small-icons .document-item .document-icon {
    font-size: 16px;
}

JavaScript

var app = angular.module("documentApp", []);

app.controller("DocumentController", function ($scope) {
  $scope.currentView = "details";

  $scope.documents = [
    { name: "Document 1", size: "100 KB", date: "2024-08-29", icon: "📄" },
    { name: "Document 2", size: "200 KB", date: "2024-08-28", icon: "📄" },
    // Add more document items as needed
  ];

  $scope.changeView = function (view) {
    $scope.currentView = view;
  };
});